mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
polish
This commit is contained in:
parent
d10462cd4a
commit
3432005ade
@ -18,7 +18,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui/react": "^1.7.16",
|
"@headlessui/react": "^1.7.16",
|
||||||
"@nostr-dev-kit/ndk": "^0.8.0",
|
"@nostr-dev-kit/ndk": "^0.8.1",
|
||||||
"@nostr-fetch/adapter-ndk": "^0.11.0",
|
"@nostr-fetch/adapter-ndk": "^0.11.0",
|
||||||
"@radix-ui/react-collapsible": "^1.0.3",
|
"@radix-ui/react-collapsible": "^1.0.3",
|
||||||
"@radix-ui/react-dialog": "^1.0.4",
|
"@radix-ui/react-dialog": "^1.0.4",
|
||||||
@ -93,7 +93,7 @@
|
|||||||
"csstype": "^3.1.2",
|
"csstype": "^3.1.2",
|
||||||
"encoding": "^0.1.13",
|
"encoding": "^0.1.13",
|
||||||
"eslint": "^8.46.0",
|
"eslint": "^8.46.0",
|
||||||
"eslint-config-prettier": "^8.9.0",
|
"eslint-config-prettier": "^8.10.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.7.1",
|
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||||
"eslint-plugin-react": "^7.33.1",
|
"eslint-plugin-react": "^7.33.1",
|
||||||
"eslint-plugin-simple-import-sort": "^10.0.0",
|
"eslint-plugin-simple-import-sort": "^10.0.0",
|
||||||
|
@ -5,11 +5,11 @@ dependencies:
|
|||||||
specifier: ^1.7.16
|
specifier: ^1.7.16
|
||||||
version: 1.7.16(react-dom@18.2.0)(react@18.2.0)
|
version: 1.7.16(react-dom@18.2.0)(react@18.2.0)
|
||||||
'@nostr-dev-kit/ndk':
|
'@nostr-dev-kit/ndk':
|
||||||
specifier: ^0.8.0
|
specifier: ^0.8.1
|
||||||
version: 0.8.0(typescript@4.9.5)
|
version: 0.8.1(typescript@4.9.5)
|
||||||
'@nostr-fetch/adapter-ndk':
|
'@nostr-fetch/adapter-ndk':
|
||||||
specifier: ^0.11.0
|
specifier: ^0.11.0
|
||||||
version: 0.11.0(@nostr-dev-kit/ndk@0.8.0)(nostr-fetch@0.12.2)
|
version: 0.11.0(@nostr-dev-kit/ndk@0.8.1)(nostr-fetch@0.12.2)
|
||||||
'@radix-ui/react-collapsible':
|
'@radix-ui/react-collapsible':
|
||||||
specifier: ^1.0.3
|
specifier: ^1.0.3
|
||||||
version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
|
version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
|
||||||
@ -226,8 +226,8 @@ devDependencies:
|
|||||||
specifier: ^8.46.0
|
specifier: ^8.46.0
|
||||||
version: 8.46.0
|
version: 8.46.0
|
||||||
eslint-config-prettier:
|
eslint-config-prettier:
|
||||||
specifier: ^8.9.0
|
specifier: ^8.10.0
|
||||||
version: 8.9.0(eslint@8.46.0)
|
version: 8.10.0(eslint@8.46.0)
|
||||||
eslint-plugin-jsx-a11y:
|
eslint-plugin-jsx-a11y:
|
||||||
specifier: ^6.7.1
|
specifier: ^6.7.1
|
||||||
version: 6.7.1(eslint@8.46.0)
|
version: 6.7.1(eslint@8.46.0)
|
||||||
@ -1131,8 +1131,8 @@ packages:
|
|||||||
'@nodelib/fs.scandir': 2.1.5
|
'@nodelib/fs.scandir': 2.1.5
|
||||||
fastq: 1.15.0
|
fastq: 1.15.0
|
||||||
|
|
||||||
/@nostr-dev-kit/ndk@0.8.0(typescript@4.9.5):
|
/@nostr-dev-kit/ndk@0.8.1(typescript@4.9.5):
|
||||||
resolution: {integrity: sha512-SFrB7dW80kMZgquw33OUEjDpE5JJD11PsS/ET4Lxl5FtYMHP/unR61BmcIsCPhBXLm+0Pf2QqAq+N5/BYVZqEA==}
|
resolution: {integrity: sha512-uI41sCs+7CxtKGIKXQGZjdwvksfeCwd83bB2yrJCePx4oIkEMMH1gVRYsNfQIMFBPejnU2bfBqcO2zEP9RzIFg==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@noble/hashes': 1.3.1
|
'@noble/hashes': 1.3.1
|
||||||
'@noble/secp256k1': 2.0.0
|
'@noble/secp256k1': 2.0.0
|
||||||
@ -1143,7 +1143,7 @@ packages:
|
|||||||
esbuild: 0.17.19
|
esbuild: 0.17.19
|
||||||
esbuild-plugin-alias: 0.2.1
|
esbuild-plugin-alias: 0.2.1
|
||||||
eslint: 8.46.0
|
eslint: 8.46.0
|
||||||
eslint-config-prettier: 8.9.0(eslint@8.46.0)
|
eslint-config-prettier: 8.10.0(eslint@8.46.0)
|
||||||
eslint-plugin-import: 2.28.0(@typescript-eslint/parser@5.62.0)(eslint@8.46.0)
|
eslint-plugin-import: 2.28.0(@typescript-eslint/parser@5.62.0)(eslint@8.46.0)
|
||||||
esm-loader-typescript: 1.0.5
|
esm-loader-typescript: 1.0.5
|
||||||
eventemitter3: 5.0.1
|
eventemitter3: 5.0.1
|
||||||
@ -1160,13 +1160,13 @@ packages:
|
|||||||
- typescript
|
- typescript
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@nostr-fetch/adapter-ndk@0.11.0(@nostr-dev-kit/ndk@0.8.0)(nostr-fetch@0.12.2):
|
/@nostr-fetch/adapter-ndk@0.11.0(@nostr-dev-kit/ndk@0.8.1)(nostr-fetch@0.12.2):
|
||||||
resolution: {integrity: sha512-Otl7SEzm9ecqyHB10bpYXBu1qpqJEnipp7dZ4qcA9LeJAtM38fnYKUD34HX0JXA9EDjtc6VS5UNZe544xC9GCg==}
|
resolution: {integrity: sha512-Otl7SEzm9ecqyHB10bpYXBu1qpqJEnipp7dZ4qcA9LeJAtM38fnYKUD34HX0JXA9EDjtc6VS5UNZe544xC9GCg==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@nostr-dev-kit/ndk': ^0.5.0
|
'@nostr-dev-kit/ndk': ^0.5.0
|
||||||
nostr-fetch: ^0.11.0
|
nostr-fetch: ^0.11.0
|
||||||
dependencies:
|
dependencies:
|
||||||
'@nostr-dev-kit/ndk': 0.8.0(typescript@4.9.5)
|
'@nostr-dev-kit/ndk': 0.8.1(typescript@4.9.5)
|
||||||
'@nostr-fetch/kernel': 0.11.0
|
'@nostr-fetch/kernel': 0.11.0
|
||||||
nostr-fetch: 0.12.2
|
nostr-fetch: 0.12.2
|
||||||
dev: false
|
dev: false
|
||||||
@ -2837,7 +2837,7 @@ packages:
|
|||||||
postcss: ^8.1.0
|
postcss: ^8.1.0
|
||||||
dependencies:
|
dependencies:
|
||||||
browserslist: 4.21.10
|
browserslist: 4.21.10
|
||||||
caniuse-lite: 1.0.30001518
|
caniuse-lite: 1.0.30001519
|
||||||
fraction.js: 4.2.0
|
fraction.js: 4.2.0
|
||||||
normalize-range: 0.1.2
|
normalize-range: 0.1.2
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
@ -2908,7 +2908,7 @@ packages:
|
|||||||
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
caniuse-lite: 1.0.30001518
|
caniuse-lite: 1.0.30001519
|
||||||
electron-to-chromium: 1.4.482
|
electron-to-chromium: 1.4.482
|
||||||
node-releases: 2.0.13
|
node-releases: 2.0.13
|
||||||
update-browserslist-db: 1.0.11(browserslist@4.21.10)
|
update-browserslist-db: 1.0.11(browserslist@4.21.10)
|
||||||
@ -2968,8 +2968,8 @@ packages:
|
|||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/caniuse-lite@1.0.30001518:
|
/caniuse-lite@1.0.30001519:
|
||||||
resolution: {integrity: sha512-rup09/e3I0BKjncL+FesTayKtPrdwKhUufQFd3riFw1hHg8JmIFoInYfB102cFcY/pPgGmdyl/iy+jgiDi2vdA==}
|
resolution: {integrity: sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==}
|
||||||
|
|
||||||
/case-anything@2.1.13:
|
/case-anything@2.1.13:
|
||||||
resolution: {integrity: sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==}
|
resolution: {integrity: sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==}
|
||||||
@ -3596,8 +3596,8 @@ packages:
|
|||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/eslint-config-prettier@8.9.0(eslint@8.46.0):
|
/eslint-config-prettier@8.10.0(eslint@8.46.0):
|
||||||
resolution: {integrity: sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==}
|
resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
eslint: '>=7.0.0'
|
eslint: '>=7.0.0'
|
||||||
|
@ -34,12 +34,12 @@ export function ChatsList() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -51,15 +51,15 @@ export function ChatsList() {
|
|||||||
<ChatsListSelfItem data={account} />
|
<ChatsListSelfItem data={account} />
|
||||||
) : (
|
) : (
|
||||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{chats.follows.map((item) => renderItem(item))}
|
{chats.follows.map((item) => renderItem(item))}
|
||||||
{isFetching && (
|
{isFetching && (
|
||||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
|
{chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
|
||||||
|
@ -14,9 +14,9 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
|
|||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
return (
|
return (
|
||||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||||
<div>
|
<div>
|
||||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
|
<div className="h-2.5 w-full animate-pulse truncate rounded bg-white/10 text-base font-medium" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -23,7 +23,7 @@ export function NoteScreen() {
|
|||||||
<div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-16">
|
<div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-16">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
|
<div className="shadow-input rounded-md bg-white/10 px-3 py-3">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -156,7 +156,7 @@ export function FeedBlock({ params }: { params: Block }) {
|
|||||||
)}
|
)}
|
||||||
{isFetchingNextPage && (
|
{isFetchingNextPage && (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
<div className="rounded-xl bg-white/10 px-3 py-3">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -177,7 +177,7 @@ export function FollowingBlock() {
|
|||||||
)}
|
)}
|
||||||
{isFetchingNextPage && (
|
{isFetchingNextPage && (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
<div className="rounded-xl bg-white/10 px-3 py-3">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -10,7 +10,7 @@ export function ImageBlock({ params }: { params: Block }) {
|
|||||||
const { remove } = useBlock();
|
const { remove } = useBlock();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full w-[350px] shrink-0 flex-col justify-between border-r border-zinc-900">
|
<div className="flex h-full w-[400px] shrink-0 flex-col justify-between">
|
||||||
<div className="relative h-full w-full flex-1 overflow-hidden p-3">
|
<div className="relative h-full w-full flex-1 overflow-hidden p-3">
|
||||||
<div className="absolute left-0 top-3 h-16 w-full px-3">
|
<div className="absolute left-0 top-3 h-16 w-full px-3">
|
||||||
<div className="flex h-16 items-center justify-between overflow-hidden rounded-t-xl px-5">
|
<div className="flex h-16 items-center justify-between overflow-hidden rounded-t-xl px-5">
|
||||||
@ -28,7 +28,7 @@ export function ImageBlock({ params }: { params: Block }) {
|
|||||||
src={params.content}
|
src={params.content}
|
||||||
fallback={DEFAULT_AVATAR}
|
fallback={DEFAULT_AVATAR}
|
||||||
alt={params.title}
|
alt={params.title}
|
||||||
className="h-full w-full rounded-xl border-t border-zinc-800/50 object-cover"
|
className="h-full w-full rounded-xl object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,7 +27,7 @@ export function ThreadBlock({ params }: { params: Block }) {
|
|||||||
<div className="h-full">
|
<div className="h-full">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
<div className="rounded-xl bg-white/10 px-3 py-3">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,7 +51,7 @@ export function UserBlock({ params }: { params: Block }) {
|
|||||||
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
|
<div className="rounded-md bg-white/10 px-3 py-3">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -116,12 +116,7 @@ export function ImageModal() {
|
|||||||
onSubmit={handleSubmit(onSubmit)}
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
className="mb-0 flex h-full w-full flex-col gap-3"
|
className="mb-0 flex h-full w-full flex-col gap-3"
|
||||||
>
|
>
|
||||||
<input
|
<input type={'hidden'} {...register('content')} value={image} />
|
||||||
type={'hidden'}
|
|
||||||
{...register('content')}
|
|
||||||
value={image}
|
|
||||||
className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<label
|
<label
|
||||||
htmlFor="title"
|
htmlFor="title"
|
||||||
@ -145,7 +140,7 @@ export function ImageModal() {
|
|||||||
>
|
>
|
||||||
Picture
|
Picture
|
||||||
</label>
|
</label>
|
||||||
<div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
|
<div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg bg-white/10">
|
||||||
<Image
|
<Image
|
||||||
src={image}
|
src={image}
|
||||||
fallback={DEFAULT_AVATAR}
|
fallback={DEFAULT_AVATAR}
|
||||||
@ -156,7 +151,7 @@ export function ImageModal() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => uploadImage()}
|
onClick={() => uploadImage()}
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-sm font-medium text-zinc-300 ring-1 ring-zinc-800 hover:bg-zinc-800"
|
className="inline-flex h-6 items-center justify-center rounded bg-white/10 px-3 text-sm font-medium text-white hover:bg-fuchsia-500"
|
||||||
>
|
>
|
||||||
Upload
|
Upload
|
||||||
</button>
|
</button>
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import * as Dialog from '@radix-ui/react-dialog';
|
import * as Dialog from '@radix-ui/react-dialog';
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
import { useHotkeys } from 'react-hotkeys-hook';
|
||||||
|
|
||||||
import { Button } from '@shared/button';
|
|
||||||
import { Composer, ComposerUser } from '@shared/composer';
|
import { Composer, ComposerUser } from '@shared/composer';
|
||||||
import {
|
import {
|
||||||
CancelIcon,
|
CancelIcon,
|
||||||
@ -28,10 +27,13 @@ export function ComposerModal() {
|
|||||||
return (
|
return (
|
||||||
<Dialog.Root open={open}>
|
<Dialog.Root open={open}>
|
||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<Button preset="small">
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex h-9 w-min items-center justify-center gap-1 rounded-md bg-white/10 px-4 text-sm font-medium text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
|
||||||
|
>
|
||||||
<ComposeIcon className="h-4 w-4" />
|
<ComposeIcon className="h-4 w-4" />
|
||||||
Postr
|
Postr
|
||||||
</Button>
|
</button>
|
||||||
</Dialog.Trigger>
|
</Dialog.Trigger>
|
||||||
<Dialog.Portal className="relative z-10">
|
<Dialog.Portal className="relative z-10">
|
||||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
|
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
|
||||||
|
@ -10,11 +10,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
|
|||||||
<div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10">
|
<div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="h-44 w-full animate-pulse bg-zinc-700" />
|
<div className="h-44 w-full animate-pulse bg-white/10" />
|
||||||
<div className="flex flex-col gap-2 px-3 py-3">
|
<div className="flex flex-col gap-2 px-3 py-3">
|
||||||
<div className="h-3 w-2/3 animate-pulse rounded bg-zinc-700" />
|
<div className="h-3 w-2/3 animate-pulse rounded bg-white/10" />
|
||||||
<div className="h-3 w-3/4 animate-pulse rounded bg-zinc-700" />
|
<div className="h-3 w-3/4 animate-pulse rounded bg-white/10" />
|
||||||
<span className="mt-2.5 text-sm leading-none text-zinc-500">
|
<span className="mt-2.5 text-sm leading-none text-white/50">
|
||||||
{domain.hostname}
|
{domain.hostname}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -60,19 +60,14 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
|
|||||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
|
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
|
||||||
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||||
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
|
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
|
||||||
<div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
|
<div className="h-min w-full shrink-0 rounded-t-xl border-b border-white/10 bg-white/5 px-5 py-5">
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<Dialog.Title className="text-lg font-semibold leading-none text-white">
|
<Dialog.Title className="text-lg font-semibold leading-none text-white">
|
||||||
Notification
|
Notification
|
||||||
</Dialog.Title>
|
</Dialog.Title>
|
||||||
<Dialog.Close asChild>
|
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
|
||||||
<button
|
<CancelIcon className="h-4 w-4 text-white/50" />
|
||||||
type="button"
|
|
||||||
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
|
||||||
>
|
|
||||||
<CancelIcon className="h-5 w-5 text-zinc-300" />
|
|
||||||
</button>
|
|
||||||
</Dialog.Close>
|
</Dialog.Close>
|
||||||
</div>
|
</div>
|
||||||
<Dialog.Description className="text-sm leading-tight text-white/50">
|
<Dialog.Description className="text-sm leading-tight text-white/50">
|
||||||
@ -80,7 +75,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
|
|||||||
</Dialog.Description>
|
</Dialog.Description>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="scrollbar-hide flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
|
<div className="scrollbar-hide flex h-[500px] flex-col divide-y divide-white/10 overflow-y-auto overflow-x-hidden">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="inline-flex items-center justify-center px-4 py-3">
|
<div className="inline-flex items-center justify-center px-4 py-3">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
|
@ -13,20 +13,16 @@ export function NotiMention({ event }: { event: NDKEvent }) {
|
|||||||
const content = useMemo(() => parser(event), [event]);
|
const content = useMemo(() => parser(event), [event]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-min flex-col px-5 py-2">
|
<div className="flex h-min flex-col px-3 py-3">
|
||||||
<div className="flex items-start justify-between">
|
<div className="flex items-start justify-between">
|
||||||
<div className="flex items-start gap-1">
|
<div className="flex items-start gap-1">
|
||||||
<NotiUser pubkey={event.pubkey} />
|
<NotiUser pubkey={event.pubkey} />
|
||||||
<p className="leading-none text-white/50">reply your post</p>
|
<p className="leading-none text-white/50">reply your post</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<span className="leading-none text-white/50">{createdAt}</span>
|
||||||
<span className="leading-none text-zinc-500">{createdAt}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="-mt-3 pl-[44px]">
|
||||||
<div className="-mt-4 pl-[35px]">
|
|
||||||
<div>
|
|
||||||
<NoteContent content={content} />
|
<NoteContent content={content} />
|
||||||
</div>
|
|
||||||
{replyTo && <MentionNote id={replyTo} />}
|
{replyTo && <MentionNote id={replyTo} />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -10,17 +10,17 @@ export function NotiReaction({ event }: { event: NDKEvent }) {
|
|||||||
const createdAt = formatCreatedAt(event.created_at);
|
const createdAt = formatCreatedAt(event.created_at);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-min flex-col px-5 py-2">
|
<div className="flex h-min flex-col px-3 py-3">
|
||||||
<div className="flex items-start justify-between">
|
<div className="flex items-start justify-between">
|
||||||
<div className="flex items-start gap-1">
|
<div className="flex items-start gap-1">
|
||||||
<NotiUser pubkey={event.pubkey} />
|
<NotiUser pubkey={event.pubkey} />
|
||||||
<p className="leading-none text-white/50">reacted {event.content}</p>
|
<p className="leading-none text-white/50">reacted {event.content}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="leading-none text-zinc-500">{createdAt}</span>
|
<span className="leading-none text-white/50">{createdAt}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-4 pl-[35px]">{root && <MentionNote id={root} />}</div>
|
<div className="-mt-5 pl-[44px]">{root && <MentionNote id={root} />}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
|
|||||||
const createdAt = formatCreatedAt(event.created_at);
|
const createdAt = formatCreatedAt(event.created_at);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-min flex-col px-5 py-2">
|
<div className="flex h-min flex-col px-3 py-3">
|
||||||
<div className="flex items-start justify-between">
|
<div className="flex items-start justify-between">
|
||||||
<div className="flex items-start gap-1">
|
<div className="flex items-start gap-1">
|
||||||
<NotiUser pubkey={event.pubkey} />
|
<NotiUser pubkey={event.pubkey} />
|
||||||
@ -20,7 +20,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
|
|||||||
<span className="leading-none text-zinc-500">{createdAt}</span>
|
<span className="leading-none text-zinc-500">{createdAt}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-4 pl-[35px]">{root && <MentionNote id={root} />}</div>
|
<div className="-mt-5 pl-[44px]">{root && <MentionNote id={root} />}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -20,17 +20,15 @@ export function NotiUser({ pubkey }: { pubkey: string }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex shrink-0 items-start justify-start gap-2">
|
<div className="flex shrink-0 items-start justify-start gap-3">
|
||||||
<div className="w-88 relative h-8 shrink-0 rounded-md">
|
|
||||||
<Image
|
<Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
fallback={DEFAULT_AVATAR}
|
fallback={DEFAULT_AVATAR}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
className="w-88 h-8 rounded-md object-cover"
|
className="h-10 w-10 shrink-0 rounded-md object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
<span className="max-w-[10rem] flex-1 truncate font-medium leading-none text-white">
|
||||||
<span className="max-w-[10rem] flex-1 truncate leading-none text-zinc-200">
|
{user?.nip05 || user?.name || user?.display_name || displayNpub(pubkey, 16)}
|
||||||
{user?.nip05 || user?.name || user?.displayName || displayNpub(pubkey, 16)}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user