This commit is contained in:
Ren Amamiya 2023-08-03 15:17:28 +07:00
parent d10462cd4a
commit 3432005ade
18 changed files with 69 additions and 83 deletions

View File

@ -18,7 +18,7 @@
},
"dependencies": {
"@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",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.4",
@ -93,7 +93,7 @@
"csstype": "^3.1.2",
"encoding": "^0.1.13",
"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-react": "^7.33.1",
"eslint-plugin-simple-import-sort": "^10.0.0",

View File

@ -5,11 +5,11 @@ dependencies:
specifier: ^1.7.16
version: 1.7.16(react-dom@18.2.0)(react@18.2.0)
'@nostr-dev-kit/ndk':
specifier: ^0.8.0
version: 0.8.0(typescript@4.9.5)
specifier: ^0.8.1
version: 0.8.1(typescript@4.9.5)
'@nostr-fetch/adapter-ndk':
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':
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)
@ -226,8 +226,8 @@ devDependencies:
specifier: ^8.46.0
version: 8.46.0
eslint-config-prettier:
specifier: ^8.9.0
version: 8.9.0(eslint@8.46.0)
specifier: ^8.10.0
version: 8.10.0(eslint@8.46.0)
eslint-plugin-jsx-a11y:
specifier: ^6.7.1
version: 6.7.1(eslint@8.46.0)
@ -1131,8 +1131,8 @@ packages:
'@nodelib/fs.scandir': 2.1.5
fastq: 1.15.0
/@nostr-dev-kit/ndk@0.8.0(typescript@4.9.5):
resolution: {integrity: sha512-SFrB7dW80kMZgquw33OUEjDpE5JJD11PsS/ET4Lxl5FtYMHP/unR61BmcIsCPhBXLm+0Pf2QqAq+N5/BYVZqEA==}
/@nostr-dev-kit/ndk@0.8.1(typescript@4.9.5):
resolution: {integrity: sha512-uI41sCs+7CxtKGIKXQGZjdwvksfeCwd83bB2yrJCePx4oIkEMMH1gVRYsNfQIMFBPejnU2bfBqcO2zEP9RzIFg==}
dependencies:
'@noble/hashes': 1.3.1
'@noble/secp256k1': 2.0.0
@ -1143,7 +1143,7 @@ packages:
esbuild: 0.17.19
esbuild-plugin-alias: 0.2.1
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)
esm-loader-typescript: 1.0.5
eventemitter3: 5.0.1
@ -1160,13 +1160,13 @@ packages:
- typescript
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==}
peerDependencies:
'@nostr-dev-kit/ndk': ^0.5.0
nostr-fetch: ^0.11.0
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: 0.12.2
dev: false
@ -2837,7 +2837,7 @@ packages:
postcss: ^8.1.0
dependencies:
browserslist: 4.21.10
caniuse-lite: 1.0.30001518
caniuse-lite: 1.0.30001519
fraction.js: 4.2.0
normalize-range: 0.1.2
picocolors: 1.0.0
@ -2908,7 +2908,7 @@ packages:
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true
dependencies:
caniuse-lite: 1.0.30001518
caniuse-lite: 1.0.30001519
electron-to-chromium: 1.4.482
node-releases: 2.0.13
update-browserslist-db: 1.0.11(browserslist@4.21.10)
@ -2968,8 +2968,8 @@ packages:
engines: {node: '>=6'}
dev: false
/caniuse-lite@1.0.30001518:
resolution: {integrity: sha512-rup09/e3I0BKjncL+FesTayKtPrdwKhUufQFd3riFw1hHg8JmIFoInYfB102cFcY/pPgGmdyl/iy+jgiDi2vdA==}
/caniuse-lite@1.0.30001519:
resolution: {integrity: sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==}
/case-anything@2.1.13:
resolution: {integrity: sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==}
@ -3596,8 +3596,8 @@ packages:
engines: {node: '>=12'}
dev: false
/eslint-config-prettier@8.9.0(eslint@8.46.0):
resolution: {integrity: sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==}
/eslint-config-prettier@8.10.0(eslint@8.46.0):
resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
hasBin: true
peerDependencies:
eslint: '>=7.0.0'

View File

@ -34,12 +34,12 @@ export function ChatsList() {
return (
<div className="flex flex-col">
<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="h-3 w-full animate-pulse rounded-sm 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-white/10" />
</div>
<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="h-3 w-full animate-pulse rounded-sm 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-white/10" />
</div>
</div>
);
@ -51,15 +51,15 @@ export function ChatsList() {
<ChatsListSelfItem data={account} />
) : (
<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="h-3 w-full animate-pulse rounded-sm 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-white/10" />
</div>
)}
{chats.follows.map((item) => renderItem(item))}
{isFetching && (
<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="h-3 w-full animate-pulse rounded-sm 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-white/10" />
</div>
)}
{chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}

View File

@ -14,9 +14,9 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
if (status === 'loading') {
return (
<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 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>
);

View File

@ -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">
{status === 'loading' ? (
<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 />
</div>
</div>

View File

@ -156,7 +156,7 @@ export function FeedBlock({ params }: { params: Block }) {
)}
{isFetchingNextPage && (
<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 />
</div>
</div>

View File

@ -177,7 +177,7 @@ export function FollowingBlock() {
)}
{isFetchingNextPage && (
<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 />
</div>
</div>

View File

@ -10,7 +10,7 @@ export function ImageBlock({ params }: { params: Block }) {
const { remove } = useBlock();
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="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">
@ -28,7 +28,7 @@ export function ImageBlock({ params }: { params: Block }) {
src={params.content}
fallback={DEFAULT_AVATAR}
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>

View File

@ -27,7 +27,7 @@ export function ThreadBlock({ params }: { params: Block }) {
<div className="h-full">
{status === 'loading' ? (
<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 />
</div>
</div>

View File

@ -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">
{status === 'loading' ? (
<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 />
</div>
</div>

View File

@ -116,12 +116,7 @@ export function ImageModal() {
onSubmit={handleSubmit(onSubmit)}
className="mb-0 flex h-full w-full flex-col gap-3"
>
<input
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"
/>
<input type={'hidden'} {...register('content')} value={image} />
<div className="flex flex-col gap-1">
<label
htmlFor="title"
@ -145,7 +140,7 @@ export function ImageModal() {
>
Picture
</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
src={image}
fallback={DEFAULT_AVATAR}
@ -156,7 +151,7 @@ export function ImageModal() {
<button
onClick={() => uploadImage()}
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
</button>

View File

@ -1,7 +1,6 @@
import * as Dialog from '@radix-ui/react-dialog';
import { useHotkeys } from 'react-hotkeys-hook';
import { Button } from '@shared/button';
import { Composer, ComposerUser } from '@shared/composer';
import {
CancelIcon,
@ -28,10 +27,13 @@ export function ComposerModal() {
return (
<Dialog.Root open={open}>
<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" />
Postr
</Button>
</button>
</Dialog.Trigger>
<Dialog.Portal className="relative z-10">
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />

View File

@ -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">
{status === 'loading' ? (
<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="h-3 w-2/3 animate-pulse rounded bg-zinc-700" />
<div className="h-3 w-3/4 animate-pulse rounded bg-zinc-700" />
<span className="mt-2.5 text-sm leading-none text-zinc-500">
<div className="h-3 w-2/3 animate-pulse rounded bg-white/10" />
<div className="h-3 w-3/4 animate-pulse rounded bg-white/10" />
<span className="mt-2.5 text-sm leading-none text-white/50">
{domain.hostname}
</span>
</div>

View File

@ -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.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="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 items-center justify-between">
<Dialog.Title className="text-lg font-semibold leading-none text-white">
Notification
</Dialog.Title>
<Dialog.Close asChild>
<button
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 className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
<CancelIcon className="h-4 w-4 text-white/50" />
</Dialog.Close>
</div>
<Dialog.Description className="text-sm leading-tight text-white/50">
@ -80,7 +75,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
</Dialog.Description>
</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' ? (
<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" />

View File

@ -13,20 +13,16 @@ export function NotiMention({ event }: { event: NDKEvent }) {
const content = useMemo(() => parser(event), [event]);
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 gap-1">
<NotiUser pubkey={event.pubkey} />
<p className="leading-none text-white/50">reply your post</p>
</div>
<div>
<span className="leading-none text-zinc-500">{createdAt}</span>
</div>
<span className="leading-none text-white/50">{createdAt}</span>
</div>
<div className="-mt-4 pl-[35px]">
<div>
<NoteContent content={content} />
</div>
<div className="-mt-3 pl-[44px]">
<NoteContent content={content} />
{replyTo && <MentionNote id={replyTo} />}
</div>
</div>

View File

@ -10,17 +10,17 @@ export function NotiReaction({ event }: { event: NDKEvent }) {
const createdAt = formatCreatedAt(event.created_at);
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 gap-1">
<NotiUser pubkey={event.pubkey} />
<p className="leading-none text-white/50">reacted {event.content}</p>
</div>
<div>
<span className="leading-none text-zinc-500">{createdAt}</span>
<span className="leading-none text-white/50">{createdAt}</span>
</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>
);
}

View File

@ -10,7 +10,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
const createdAt = formatCreatedAt(event.created_at);
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 gap-1">
<NotiUser pubkey={event.pubkey} />
@ -20,7 +20,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
<span className="leading-none text-zinc-500">{createdAt}</span>
</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>
);
}

View File

@ -20,17 +20,15 @@ export function NotiUser({ pubkey }: { pubkey: string }) {
}
return (
<div className="flex shrink-0 items-start justify-start gap-2">
<div className="w-88 relative h-8 shrink-0 rounded-md">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="w-88 h-8 rounded-md object-cover"
/>
</div>
<span className="max-w-[10rem] flex-1 truncate leading-none text-zinc-200">
{user?.nip05 || user?.name || user?.displayName || displayNpub(pubkey, 16)}
<div className="flex shrink-0 items-start justify-start gap-3">
<Image
src={user?.picture || user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-10 w-10 shrink-0 rounded-md object-cover"
/>
<span className="max-w-[10rem] flex-1 truncate font-medium leading-none text-white">
{user?.nip05 || user?.name || user?.display_name || displayNpub(pubkey, 16)}
</span>
</div>
);