mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
wip: convert more components to new ui
This commit is contained in:
parent
1ddcbf1654
commit
a85bcf917b
@ -90,7 +90,7 @@ export function UnlockScreen() {
|
|||||||
<input
|
<input
|
||||||
{...register('password', { required: true })}
|
{...register('password', { required: true })}
|
||||||
type={passwordInput}
|
type={passwordInput}
|
||||||
className="relative w-full rounded-lg bg-white/10 py-3 text-center text-white !outline-none placeholder:text-white/10"
|
className="relative h-12 w-full rounded-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/10"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -175,7 +175,7 @@ export function Root() {
|
|||||||
}, [status]);
|
}, [status]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen w-screen">
|
<div className="h-screen w-screen bg-black/90">
|
||||||
<div className="flex h-screen w-full flex-col">
|
<div className="flex h-screen w-full flex-col">
|
||||||
<div data-tauri-drag-region className="h-11 shrink-0" />
|
<div data-tauri-drag-region className="h-11 shrink-0" />
|
||||||
<div className="relative flex min-h-0 w-full flex-1 items-center justify-center">
|
<div className="relative flex min-h-0 w-full flex-1 items-center justify-center">
|
||||||
|
@ -84,15 +84,15 @@ export function AddFeedBlock() {
|
|||||||
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
|
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||||
<CommandIcon width={12} height={12} className="text-zinc-500" />
|
<CommandIcon width={12} height={12} className="text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||||
<span className="text-sm leading-none text-zinc-500">F</span>
|
<span className="text-sm leading-none text-white">F</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="font-medium text-zinc-400">New feed block</h5>
|
<h5 className="font-medium text-white/50">New feed block</h5>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<Transition appear show={isOpen} as={Fragment}>
|
<Transition appear show={isOpen} as={Fragment}>
|
||||||
|
@ -68,15 +68,15 @@ export function AddHashTagBlock() {
|
|||||||
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
|
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||||
<CommandIcon width={12} height={12} className="text-zinc-500" />
|
<CommandIcon width={12} height={12} className="text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||||
<span className="text-sm leading-none text-zinc-500">T</span>
|
<span className="text-sm leading-none text-white">T</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="font-medium text-zinc-400">New hashtag block</h5>
|
<h5 className="font-medium text-white/50">New hashtag block</h5>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<Transition appear show={isOpen} as={Fragment}>
|
<Transition appear show={isOpen} as={Fragment}>
|
||||||
|
@ -89,15 +89,15 @@ export function AddImageBlock() {
|
|||||||
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
|
className="inline-flex h-9 w-72 items-center justify-start gap-2.5 rounded-md px-2.5"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||||
<CommandIcon width={12} height={12} className="text-zinc-500" />
|
<CommandIcon width={12} height={12} className="text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||||
<span className="text-sm leading-none text-zinc-500">I</span>
|
<span className="text-sm leading-none text-white">I</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="font-medium text-zinc-400">New image block</h5>
|
<h5 className="font-medium text-white/50">New image block</h5>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<Transition appear show={isOpen} as={Fragment}>
|
<Transition appear show={isOpen} as={Fragment}>
|
||||||
|
@ -113,13 +113,12 @@ export function FeedBlock({ params }: { params: Block }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
<div
|
||||||
|
ref={parentRef}
|
||||||
|
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
|
||||||
|
>
|
||||||
<TitleBar id={params.id} title={params.title} />
|
<TitleBar id={params.id} title={params.title} />
|
||||||
<div
|
<div className="h-full">
|
||||||
ref={parentRef}
|
|
||||||
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
|
|
||||||
style={{ contain: 'strict' }}
|
|
||||||
>
|
|
||||||
{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 border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
||||||
|
@ -31,13 +31,12 @@ export function HashtagBlock({ params }: { params: Block }) {
|
|||||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
<div
|
||||||
|
ref={parentRef}
|
||||||
|
className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
|
||||||
|
>
|
||||||
<TitleBar id={params.id} title={params.title + ' in 48 hours ago'} />
|
<TitleBar id={params.id} title={params.title + ' in 48 hours ago'} />
|
||||||
<div
|
<div className="h-full">
|
||||||
ref={parentRef}
|
|
||||||
className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
|
|
||||||
style={{ contain: 'strict' }}
|
|
||||||
>
|
|
||||||
{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 pt-3">
|
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||||
|
@ -22,9 +22,9 @@ export function ThreadBlock({ params }: { params: Block }) {
|
|||||||
// useLiveThread(params.content);
|
// useLiveThread(params.content);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-[400px] shrink-0 border-r border-zinc-900">
|
<div className="scrollbar-hide w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
|
||||||
<TitleBar id={params.id} title={params.title} />
|
<TitleBar id={params.id} title={params.title} />
|
||||||
<div className="scrollbar-hide flex h-full w-full flex-col gap-3 overflow-y-auto pb-20 pt-1.5">
|
<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 border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
|
||||||
@ -33,7 +33,7 @@ export function ThreadBlock({ params }: { params: Block }) {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="h-min w-full px-3 pt-1.5">
|
<div className="h-min w-full px-3 pt-1.5">
|
||||||
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
<div className="rounded-xl bg-white/10 px-3 pt-3">
|
||||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
<NoteContent content={data.content} />
|
<NoteContent content={data.content} />
|
||||||
|
@ -35,17 +35,17 @@ export function UserBlock({ params }: { params: Block }) {
|
|||||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-[400px] shrink-0 border-r border-zinc-900">
|
<div
|
||||||
|
ref={parentRef}
|
||||||
|
className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
|
||||||
|
>
|
||||||
<TitleBar id={params.id} title={params.title} />
|
<TitleBar id={params.id} title={params.title} />
|
||||||
<div
|
<div className="h-full">
|
||||||
ref={parentRef}
|
|
||||||
className="scrollbar-hide flex h-full flex-1 flex-col gap-1.5 overflow-y-auto pt-1.5"
|
|
||||||
>
|
|
||||||
<div className="px-3 pt-1.5">
|
<div className="px-3 pt-1.5">
|
||||||
<UserProfile pubkey={params.content} />
|
<UserProfile pubkey={params.content} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="mt-2 px-3 text-lg font-semibold text-zinc-300">
|
<h3 className="mt-2 px-3 text-lg font-semibold text-white">
|
||||||
Latest activities
|
Latest activities
|
||||||
</h3>
|
</h3>
|
||||||
<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">
|
||||||
@ -57,9 +57,9 @@ export function UserBlock({ params }: { params: Block }) {
|
|||||||
</div>
|
</div>
|
||||||
) : itemsVirtualizer.length === 0 ? (
|
) : itemsVirtualizer.length === 0 ? (
|
||||||
<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-6">
|
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<p className="text-center text-sm text-zinc-300">
|
<p className="text-center text-sm text-white">
|
||||||
No new posts about this hashtag in 48 hours ago
|
No new posts about this hashtag in 48 hours ago
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -54,7 +54,7 @@ export function SpaceScreen() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
|
<div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
|
||||||
<FollowingBlock />
|
<FollowingBlock />
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="flex w-[350px] shrink-0 flex-col">
|
<div className="flex w-[350px] shrink-0 flex-col">
|
||||||
@ -63,7 +63,7 @@ export function SpaceScreen() {
|
|||||||
className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
|
className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
|
||||||
/>
|
/>
|
||||||
<div className="flex w-full flex-1 items-center justify-center p-3">
|
<div className="flex w-full flex-1 items-center justify-center p-3">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-white/10" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
@ -18,32 +18,32 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex w-full items-center gap-10">
|
<div className="flex w-full items-center gap-10">
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-100">
|
<span className="font-semibold leading-none text-white">
|
||||||
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
|
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-400">Followers</span>
|
<span className="text-sm leading-none text-white/50">Followers</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-100">
|
<span className="font-semibold leading-none text-white">
|
||||||
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
|
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-400">Following</span>
|
<span className="text-sm leading-none text-white/50">Following</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-100">
|
<span className="font-semibold leading-none text-white">
|
||||||
{data.stats[pubkey].zaps_received
|
{data.stats[pubkey].zaps_received
|
||||||
? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
|
? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
|
||||||
: 0}
|
: 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-400">Zaps received</span>
|
<span className="text-sm leading-none text-white/50">Zaps received</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-100">
|
<span className="font-semibold leading-none text-white">
|
||||||
{data.stats[pubkey].zaps_sent
|
{data.stats[pubkey].zaps_sent
|
||||||
? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
|
? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
|
||||||
: 0}
|
: 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-400">Zaps sent</span>
|
<span className="text-sm leading-none text-white/50">Zaps sent</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -30,7 +30,7 @@ export function ComposerModal() {
|
|||||||
<>
|
<>
|
||||||
<Button onClick={() => toggle(true)} preset="small">
|
<Button onClick={() => toggle(true)} preset="small">
|
||||||
<ComposeIcon className="h-4 w-4" />
|
<ComposeIcon className="h-4 w-4" />
|
||||||
Compose
|
Postr
|
||||||
</Button>
|
</Button>
|
||||||
<Transition appear show={open} as={Fragment}>
|
<Transition appear show={open} as={Fragment}>
|
||||||
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
||||||
|
@ -27,9 +27,9 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => downloadImage(url)}
|
onClick={() => downloadImage(url)}
|
||||||
className="absolute right-3 top-3 hidden h-7 w-7 items-center justify-center rounded-md bg-black/70 backdrop-blur-md hover:bg-fuchsia-500 group-hover:inline-flex"
|
className="absolute right-2 top-2 hidden h-8 w-8 items-center justify-center rounded-md bg-black/50 backdrop-blur-md hover:bg-black/40 group-hover:inline-flex"
|
||||||
>
|
>
|
||||||
<DownloadIcon className="h-4 w-4 text-zinc-100" />
|
<DownloadIcon className="h-5 w-5 text-white" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
@ -26,17 +26,17 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col rounded-xl border-t border-zinc-800/50 bg-zinc-900">
|
<div className="mt-3 flex flex-col rounded-xl bg-white/10">
|
||||||
<div className="relative w-full flex-1 overflow-hidden">
|
<div className="relative w-full flex-1 overflow-hidden">
|
||||||
<textarea
|
<textarea
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(e) => setValue(e.target.value)}
|
onChange={(e) => setValue(e.target.value)}
|
||||||
placeholder="Reply to this thread..."
|
placeholder="Reply to this thread..."
|
||||||
className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
|
className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base text-white !outline-none placeholder:text-white/50"
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full border-t border-zinc-800 px-3 py-3">
|
<div className="w-full border-t border-white/10 px-3 py-3">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div>
|
<div>
|
||||||
<p>Loading...</p>
|
<p>Loading...</p>
|
||||||
@ -53,8 +53,8 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-1 text-sm leading-none text-zinc-400">Reply as</p>
|
<p className="mb-1 text-sm leading-none text-white/50">Reply as</p>
|
||||||
<p className="text-sm font-medium leading-none text-zinc-100">
|
<p className="text-sm font-medium leading-none text-white">
|
||||||
{user?.nip05 || user?.name || displayNpub(pubkey, 16)}
|
{user?.nip05 || user?.name || displayNpub(pubkey, 16)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -11,7 +11,7 @@ export function Reply({ event, root }: { event: LumeEvent; root?: string }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-min w-full py-1.5">
|
<div className="h-min w-full py-1.5">
|
||||||
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
|
||||||
<div className="relative flex flex-col">
|
<div className="relative flex flex-col">
|
||||||
<User pubkey={event.pubkey} time={event.created_at} />
|
<User pubkey={event.pubkey} time={event.created_at} />
|
||||||
<div className="relative z-20 -mt-6 flex items-start gap-3">
|
<div className="relative z-20 -mt-6 flex items-start gap-3">
|
||||||
|
@ -54,14 +54,12 @@ export function RepliesList({ id }: { id: string }) {
|
|||||||
return (
|
return (
|
||||||
<div className="mt-3">
|
<div className="mt-3">
|
||||||
<div className="mb-2">
|
<div className="mb-2">
|
||||||
<h5 className="text-lg font-semibold text-zinc-300">
|
<h5 className="text-lg font-semibold text-white">{data?.length || 0} replies</h5>
|
||||||
{data?.length || 0} replies
|
|
||||||
</h5>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
{data?.length === 0 ? (
|
{data?.length === 0 ? (
|
||||||
<div className="px=3">
|
<div className="px=3">
|
||||||
<div className="flex w-full items-center justify-center rounded-xl bg-zinc-900">
|
<div className="flex w-full items-center justify-center rounded-xl bg-white/10">
|
||||||
<div className="flex flex-col items-center justify-center gap-2 py-6">
|
<div className="flex flex-col items-center justify-center gap-2 py-6">
|
||||||
<h3 className="text-3xl">👋</h3>
|
<h3 className="text-3xl">👋</h3>
|
||||||
<p className="leading-none text-zinc-400">Share your thought on it...</p>
|
<p className="leading-none text-zinc-400">Share your thought on it...</p>
|
||||||
|
@ -61,22 +61,22 @@ export function NoteStats({ id }: { id: string }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-11 items-center gap-3">
|
<div className="flex h-11 items-center gap-3">
|
||||||
<p className="text-zinc-500">
|
<p className="text-white/50">
|
||||||
<span className="font-semibold text-zinc-300">
|
<span className="font-semibold text-white">
|
||||||
{compactNumber.format(data.reactions)}
|
{compactNumber.format(data.reactions)}
|
||||||
</span>{' '}
|
</span>{' '}
|
||||||
reactions
|
reactions
|
||||||
</p>
|
</p>
|
||||||
<span className="text-zinc-500">·</span>
|
<span className="text-white/50">·</span>
|
||||||
<p className="text-zinc-500">
|
<p className="text-white/50">
|
||||||
<span className="font-semibold text-zinc-300">
|
<span className="font-semibold text-white">
|
||||||
{compactNumber.format(data.reposts)}
|
{compactNumber.format(data.reposts)}
|
||||||
</span>{' '}
|
</span>{' '}
|
||||||
reposts
|
reposts
|
||||||
</p>
|
</p>
|
||||||
<span className="text-zinc-500">·</span>
|
<span className="text-white/50">·</span>
|
||||||
<p className="text-zinc-500">
|
<p className="text-white/50">
|
||||||
<span className="font-semibold text-zinc-300">
|
<span className="font-semibold text-white">
|
||||||
{compactNumber.format(data.zaps)}
|
{compactNumber.format(data.zaps)}
|
||||||
</span>{' '}
|
</span>{' '}
|
||||||
zaps
|
zaps
|
||||||
|
@ -25,20 +25,20 @@ export function ThreadUser({ pubkey, time }: { pubkey: string; time: number }) {
|
|||||||
/>
|
/>
|
||||||
<div className="lex flex-1 items-baseline justify-between">
|
<div className="lex flex-1 items-baseline justify-between">
|
||||||
<div className="inline-flex w-full items-center justify-between">
|
<div className="inline-flex w-full items-center justify-between">
|
||||||
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-zinc-100">
|
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
|
||||||
{user?.nip05?.toLowerCase() || user?.name || user?.display_name}
|
{user?.nip05?.toLowerCase() || user?.name || user?.display_name}
|
||||||
</h5>
|
</h5>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-5 w-max items-center justify-center rounded px-1 hover:bg-zinc-800"
|
className="inline-flex h-5 w-max items-center justify-center rounded px-1 hover:bg-white/10"
|
||||||
>
|
>
|
||||||
<VerticalDotsIcon className="h-4 w-4 rotate-90 transform text-zinc-200" />
|
<VerticalDotsIcon className="h-4 w-4 rotate-90 transform text-white/50" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-1 inline-flex items-center gap-2">
|
<div className="mt-1 inline-flex items-center gap-2">
|
||||||
<span className="leading-none text-zinc-500">{createdAt}</span>
|
<span className="leading-none text-white/50">{createdAt}</span>
|
||||||
<span className="leading-none text-zinc-500">·</span>
|
<span className="leading-none text-white/50">·</span>
|
||||||
<span className="leading-none text-zinc-500">{displayNpub(pubkey, 16)}</span>
|
<span className="leading-none text-white/50">{displayNpub(pubkey, 16)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -13,7 +13,7 @@ export function Protected({ children }: { children: ReactNode }) {
|
|||||||
|
|
||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
<div className="flex h-full w-full items-center justify-center bg-black/90">
|
||||||
<LoaderIcon className="h-6 w-6 animate-spin text-zinc-100" />
|
<LoaderIcon className="h-6 w-6 animate-spin text-zinc-100" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -11,14 +11,14 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
|
|||||||
className="group flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
|
className="group flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
|
||||||
>
|
>
|
||||||
<div className="w-6" />
|
<div className="w-6" />
|
||||||
<h3 className="text-sm font-medium text-zinc-200">{title}</h3>
|
<h3 className="text-sm font-medium text-white">{title}</h3>
|
||||||
{id ? (
|
{id ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => remove.mutate(id)}
|
onClick={() => remove.mutate(id)}
|
||||||
className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded transition-transform duration-150 ease-in-out hover:bg-zinc-900 group-hover:translate-y-0"
|
className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded transition-transform duration-150 ease-in-out hover:bg-white/10 group-hover:translate-y-0"
|
||||||
>
|
>
|
||||||
<CancelIcon width={12} height={12} className="text-zinc-300" />
|
<CancelIcon className="h-3 w-3 text-white" />
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<div className="w-6" />
|
<div className="w-6" />
|
||||||
|
@ -54,19 +54,19 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
fallback={DEFAULT_AVATAR}
|
fallback={DEFAULT_AVATAR}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
className="h-14 w-14 rounded-md ring-2 ring-black"
|
className="h-14 w-14 rounded-md"
|
||||||
/>
|
/>
|
||||||
<div className="mt-2 flex flex-1 flex-col gap-2">
|
<div className="mt-2 flex flex-1 flex-col gap-2">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<h5 className="text-lg font-semibold leading-none">
|
<h5 className="text-lg font-semibold leading-none">
|
||||||
{user?.displayName || user?.name || 'No name'}
|
{user?.displayName || user?.name || 'No name'}
|
||||||
</h5>
|
</h5>
|
||||||
<span className="max-w-[15rem] truncate text-sm leading-none text-zinc-500">
|
<span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
|
||||||
{user?.nip05 || displayNpub(pubkey, 16)}
|
{user?.nip05 || displayNpub(pubkey, 16)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<p className="mt-2 max-w-[500px] select-text break-words text-zinc-100">
|
<p className="mt-2 max-w-[500px] select-text break-words text-white">
|
||||||
{user?.about}
|
{user?.about}
|
||||||
</p>
|
</p>
|
||||||
<UserMetadata pubkey={pubkey} />
|
<UserMetadata pubkey={pubkey} />
|
||||||
@ -75,7 +75,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||||
>
|
>
|
||||||
Loading...
|
Loading...
|
||||||
</button>
|
</button>
|
||||||
@ -83,7 +83,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => unfollowUser(pubkey)}
|
onClick={() => unfollowUser(pubkey)}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||||
>
|
>
|
||||||
Unfollow
|
Unfollow
|
||||||
</button>
|
</button>
|
||||||
@ -91,20 +91,20 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => followUser(pubkey)}
|
onClick={() => followUser(pubkey)}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||||
>
|
>
|
||||||
Follow
|
Follow
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<Link
|
<Link
|
||||||
to={`/app/chats/${pubkey}`}
|
to={`/app/chats/${pubkey}`}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-fuchsia-500"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
||||||
>
|
>
|
||||||
Message
|
Message
|
||||||
</Link>
|
</Link>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="group inline-flex h-10 w-10 items-center justify-center rounded-md bg-zinc-900 text-sm font-medium hover:bg-orange-500"
|
className="group inline-flex h-10 w-10 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-orange-500"
|
||||||
>
|
>
|
||||||
<ZapIcon className="h-5 w-5" />
|
<ZapIcon className="h-5 w-5" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -18,7 +18,7 @@ export function useAccount() {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
staleTime: Infinity,
|
staleTime: Infinity,
|
||||||
refetchOnMount: true,
|
refetchOnMount: false,
|
||||||
refetchOnWindowFocus: false,
|
refetchOnWindowFocus: false,
|
||||||
refetchOnReconnect: true,
|
refetchOnReconnect: true,
|
||||||
}
|
}
|
||||||
|
@ -36,6 +36,7 @@ export function useProfile(pubkey: string, fallback?: string) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
refetchOnMount: false,
|
||||||
refetchOnWindowFocus: false,
|
refetchOnWindowFocus: false,
|
||||||
refetchOnReconnect: false,
|
refetchOnReconnect: false,
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user