mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
wip: ui
This commit is contained in:
parent
ced23341d2
commit
140b8a47bf
@ -27,7 +27,7 @@
|
||||
"fileDropEnabled": true,
|
||||
"transparent": true,
|
||||
"windowEffects": {
|
||||
"effects": ["mica"]
|
||||
"effects": ["micaLight", "micaDark"]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
@ -9,7 +9,7 @@ export function ToggleWidgetList() {
|
||||
const setWidget = useWidgets((state) => state.setWidget);
|
||||
|
||||
return (
|
||||
<div className="flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
|
||||
<div className="flex h-full w-[420px] items-center justify-center border-r border-zinc-100 dark:border-zinc-900">
|
||||
<div className="relative">
|
||||
<div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
|
||||
<HandArrowDownIcon className="text-zinc-100 dark:text-zinc-900" />
|
||||
|
@ -101,7 +101,7 @@ export function WidgetList({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative h-full shrink-0 grow-0 basis-[400px]">
|
||||
<div className="h-full w-[420px] border-r border-zinc-100 dark:border-zinc-900">
|
||||
<TitleBar id={params.id} title="Add widget" />
|
||||
<div className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
<div className="flex flex-col gap-6 px-3">
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { ToggleWidgetList } from '@app/space/components/toggle';
|
||||
import { WidgetList } from '@app/space/components/widgetList';
|
||||
@ -84,17 +85,17 @@ export function SpaceScreen() {
|
||||
}, [fetchWidgets]);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide inline-flex h-full w-full min-w-full flex-nowrap items-start divide-x divide-zinc-200 overflow-x-auto overflow-y-hidden dark:divide-zinc-800">
|
||||
{!widgets ? (
|
||||
<div className="flex shrink-0 grow-0 basis-[400px] flex-col">
|
||||
<div className="flex w-full flex-1 items-center justify-center p-3">
|
||||
<div className="h-full w-full">
|
||||
<VList className="scrollbar-hide h-full w-full" horizontal>
|
||||
{!widgets ? (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
widgets.map((widget) => renderItem(widget))
|
||||
)}
|
||||
<ToggleWidgetList />
|
||||
) : (
|
||||
widgets.map((widget) => renderItem(widget))
|
||||
)}
|
||||
<ToggleWidgetList />
|
||||
</VList>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -4,16 +4,14 @@ import { Link } from 'react-router-dom';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { SettingsIcon } from '@shared/icons';
|
||||
import { HorizontalDotsIcon } from '@shared/icons';
|
||||
import { Image } from '@shared/image';
|
||||
import { Logout } from '@shared/logout';
|
||||
|
||||
import { useActivities } from '@stores/activities';
|
||||
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { sendNativeNotification } from '@utils/notification';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
export function ActiveAccount() {
|
||||
const { db } = useStorage();
|
||||
@ -52,38 +50,22 @@ export function ActiveAccount() {
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="inline-flex h-16 items-center gap-2.5 border-l-2 border-transparent px-3 pb-2">
|
||||
<div className="relative h-10 w-10 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
<div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
</div>
|
||||
<div className="aspect-square h-full w-full animate-pulse rounded-lg bg-white/10" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-16 items-center justify-between border-l-2 border-transparent px-3 pb-1">
|
||||
<Link to={`/users/${db.account.pubkey}`} className="flex items-center gap-1.5">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
alt={db.account.npub}
|
||||
className="h-9 w-9 shrink-0 rounded-lg object-cover"
|
||||
className="aspect-square h-full w-full rounded-lg"
|
||||
/>
|
||||
<div className="flex flex-col items-start">
|
||||
<div className="max-w-[10rem] truncate text-sm font-semibold text-white">
|
||||
{user?.name || user?.display_name || user?.displayName}
|
||||
</div>
|
||||
<div className="max-w-[7rem] truncate text-sm text-white/50">
|
||||
{user?.nip05 || displayNpub(db.account.pubkey, 12)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-zinc-50 dark:ring-zinc-950" />
|
||||
</Link>
|
||||
<div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/5 bg-white/10">
|
||||
<Link
|
||||
to="/settings/"
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-l-lg hover:bg-white/10"
|
||||
>
|
||||
<SettingsIcon className="h-5 w-5 text-white" />
|
||||
</Link>
|
||||
<Logout />
|
||||
<div className="inline-flex items-center justify-center rounded-md bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800">
|
||||
<HorizontalDotsIcon className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -28,10 +28,9 @@ export function ComposerModal() {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-4 text-sm font-semibold text-zinc-900 hover:bg-interor-600 hover:text-white dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-interor-600"
|
||||
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-zinc-300 hover:bg-interor-600 dark:bg-zinc-700 dark:hover:bg-interor-600"
|
||||
>
|
||||
New
|
||||
<ComposeIcon className="h-4 w-4" />
|
||||
<ComposeIcon className="h-5 w-5 text-black dark:text-white" />
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
|
@ -5,7 +5,7 @@ import { Navigation } from '@shared/navigation';
|
||||
|
||||
export function AppLayout() {
|
||||
return (
|
||||
<div className="flex h-screen w-screen flex-col">
|
||||
<div className="flex h-screen w-screen flex-col bg-zinc-50 dark:bg-zinc-950">
|
||||
<WindowTitlebar />
|
||||
<div className="flex h-full min-h-0 w-full">
|
||||
<div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">
|
||||
|
@ -1,13 +1,9 @@
|
||||
import { NavLink, useNavigate } from 'react-router-dom';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { ActiveAccount } from '@shared/accounts/active';
|
||||
import { ComposerModal } from '@shared/composer';
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowRightIcon,
|
||||
ChatsIcon,
|
||||
CommunityIcon,
|
||||
ExploreIcon,
|
||||
@ -18,148 +14,117 @@ import {
|
||||
export function Navigation() {
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col justify-between p-3">
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="flex flex-1 flex-col gap-5">
|
||||
<NavLink
|
||||
to="/"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
className="inline-flex flex-col items-center justify-center"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<HomeIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Home
|
||||
<HomeIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="text-sm text-black dark:text-white">Home</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/chats"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
className="inline-flex flex-col items-center justify-center"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<ChatsIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Chats
|
||||
<ChatsIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="text-sm text-black dark:text-white">Chats</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/communities"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
className="inline-flex flex-col items-center justify-center"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<CommunityIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Groups
|
||||
<CommunityIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="text-sm text-black dark:text-white">Groups</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/relays"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
className="inline-flex flex-col items-center justify-center"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<RelayIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Relays
|
||||
<RelayIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="text-sm text-black dark:text-white">Relays</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/explore"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
className="inline-flex flex-col items-center justify-center"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<ExploreIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Explore
|
||||
<ExploreIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="text-sm text-black dark:text-white">Explore</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col gap-3 p-1">
|
||||
<ComposerModal />
|
||||
<ActiveAccount />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -34,7 +34,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<>
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
|
||||
<div className="relative mb-5 overflow-hidden">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
@ -46,7 +46,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
|
||||
const noteLink = `https://njump.me/${nip19.noteEncode(id)}`;
|
||||
return (
|
||||
<>
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
|
||||
<div className="relative mb-5 flex flex-col">
|
||||
<div className="relative z-10 flex items-start gap-3">
|
||||
<div className="inline-flex h-10 w-10 items-end justify-center rounded-lg bg-black pb-1">
|
||||
@ -78,7 +78,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
|
||||
<div className="mb-6 flex flex-col">
|
||||
<User pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
|
@ -40,13 +40,7 @@ export function FileNote(props: { event?: NDKEvent }) {
|
||||
crossorigin=""
|
||||
className="player"
|
||||
>
|
||||
<MediaProvider>
|
||||
<Poster
|
||||
className="vds-poster"
|
||||
src="https://thumbnail.video/api/get?url=${url}&seconds=1"
|
||||
alt={url}
|
||||
/>
|
||||
</MediaProvider>
|
||||
<MediaProvider />
|
||||
<DefaultAudioLayout
|
||||
icons={defaultLayoutIcons}
|
||||
smallLayoutWhen="(width < 500) or (height < 380)"
|
||||
|
@ -2,16 +2,16 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
|
||||
export function UnknownNote(props: { event?: NDKEvent }) {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
<div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2 backdrop-blur-xl">
|
||||
<span className="text-sm font-medium leading-none text-white/50">
|
||||
Unknown kind: {props.event.kind}
|
||||
<div className="mt-2 flex w-full flex-col gap-2">
|
||||
<div className="inline-flex flex-col rounded-md bg-zinc-200 px-2 py-2 dark:bg-zinc-800">
|
||||
<span className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
||||
Kind: {props.event.kind}
|
||||
</span>
|
||||
<p className="text-sm leading-none text-white">
|
||||
Lume isn't fully support this kind
|
||||
<p className="text-sm text-zinc-800 dark:text-zinc-200">
|
||||
Unsupport kind on newsfeed
|
||||
</p>
|
||||
</div>
|
||||
<div className="select-text whitespace-pre-line break-all text-white">
|
||||
<div className="select-text whitespace-pre-line break-all text-zinc-800 dark:text-zinc-200">
|
||||
<p>{props.event.content.toString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -31,7 +31,9 @@ export function LinkPreview({ urls }: { urls: string[] }) {
|
||||
<p className="text-sm text-white/50">
|
||||
Can't fetch open graph, click to open webpage
|
||||
</p>
|
||||
<span className="text-sm leading-none text-white">{domain.hostname}</span>
|
||||
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100">
|
||||
{domain.hostname}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@ -46,15 +48,17 @@ export function LinkPreview({ urls }: { urls: string[] }) {
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
|
||||
<h5 className="line-clamp-1 text-base font-semibold text-white">
|
||||
<h5 className="line-clamp-1 text-base font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{data.title}
|
||||
</h5>
|
||||
{data.description && (
|
||||
<p className="line-clamp-3 break-all text-sm text-white/80">
|
||||
<p className="line-clamp-3 break-all text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{data.description}
|
||||
</p>
|
||||
)}
|
||||
<span className="mt-2.5 text-sm text-white/80">{domain.hostname}</span>
|
||||
<span className="mt-2.5 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{domain.hostname}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
@ -18,13 +18,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
|
||||
muted={true}
|
||||
className="player"
|
||||
>
|
||||
<MediaProvider>
|
||||
<Poster
|
||||
className="vds-poster"
|
||||
src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
|
||||
alt={url}
|
||||
/>
|
||||
</MediaProvider>
|
||||
<MediaProvider />
|
||||
<DefaultAudioLayout
|
||||
icons={defaultLayoutIcons}
|
||||
smallLayoutWhen="(width < 500) or (height < 380)"
|
||||
|
@ -60,27 +60,25 @@ export function NoteStats({ id }: { id: string }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-11 items-center gap-3">
|
||||
<p className="text-white/50">
|
||||
<span className="font-semibold text-white">
|
||||
<div className="mt-3 flex w-full flex-wrap gap-2">
|
||||
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
|
||||
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{compactNumber.format(data.reactions)}
|
||||
</span>{' '}
|
||||
reactions
|
||||
</p>
|
||||
<span className="text-white/50">·</span>
|
||||
<p className="text-white/50">
|
||||
<span className="font-semibold text-white">
|
||||
</div>
|
||||
<div className="text-sm text-zinc-500 dark:text-zinc-300">Reactions</div>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
|
||||
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{compactNumber.format(data.reposts)}
|
||||
</span>{' '}
|
||||
reposts
|
||||
</p>
|
||||
<span className="text-white/50">·</span>
|
||||
<p className="text-white/50">
|
||||
<span className="font-semibold text-white">
|
||||
</div>
|
||||
<div className="text-sm text-zinc-500 dark:text-zinc-300">Reposts</div>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
|
||||
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{compactNumber.format(data.zaps)}
|
||||
</span>{' '}
|
||||
zaps
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-sm text-zinc-500 dark:text-zinc-300">Zaps</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -9,12 +9,11 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
|
||||
const remove = useWidgets((state) => state.removeWidget);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
|
||||
>
|
||||
<div className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3">
|
||||
<div className="w-6" />
|
||||
<h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{title}</h3>
|
||||
<h3 className="text-sm font-medium tracking-wide text-zinc-900 dark:text-zinc-100">
|
||||
{title}
|
||||
</h3>
|
||||
{id ? (
|
||||
<button
|
||||
type="button"
|
||||
|
@ -283,16 +283,14 @@ export const User = memo(function User({
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="flex flex-1 flex-col gap-2">
|
||||
<div className="flex flex-1 flex-col">
|
||||
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{user?.name || user?.display_name || user?.displayName || 'Anon'}
|
||||
</h5>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">·</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">
|
||||
{displayNpub(pubkey, 16)}
|
||||
</span>
|
||||
<div className="inline-flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-300">
|
||||
<span>{createdAt}</span>
|
||||
<span>·</span>
|
||||
<span>{displayNpub(pubkey, 16)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -310,7 +308,7 @@ export const User = memo(function User({
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="h-10 w-10 rounded-lg border border-white/5"
|
||||
className="h-10 w-10 rounded-lg border border-white/5 object-cover"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img
|
||||
|
@ -52,8 +52,8 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-min w-full px-3 pt-1.5">
|
||||
<div className="rounded-xl bg-zinc-100 px-3 pt-3 dark:bg-zinc-900">
|
||||
<div className="h-min w-full px-3">
|
||||
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
|
||||
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<NoteActions
|
||||
@ -61,11 +61,11 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
|
||||
pubkey={data.pubkey}
|
||||
extraButtons={false}
|
||||
/>
|
||||
<NoteStats id={params.content} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="px-3">
|
||||
<NoteStats id={params.content} />
|
||||
<NoteReplyForm id={params.content} pubkey={db.account.pubkey} />
|
||||
<RepliesList id={params.content} />
|
||||
</div>
|
||||
|
@ -81,7 +81,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
|
||||
return (
|
||||
<WidgetWrapper>
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
<div className="scrollbar-hide h-full overflow-y-auto">
|
||||
<div className="px-3 pt-1.5">
|
||||
<UserProfile pubkey={params.content} />
|
||||
</div>
|
||||
@ -107,10 +107,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<WVList>
|
||||
{data.map((item) => renderItem(item))}
|
||||
<div className="h-16" />
|
||||
</WVList>
|
||||
<WVList>{data.map((item) => renderItem(item))}</WVList>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -20,7 +20,10 @@ export function WidgetWrapper({
|
||||
}}
|
||||
minWidth={420}
|
||||
minHeight={'100vh'}
|
||||
className={twMerge('relative shrink-0 grow-0', className)}
|
||||
className={twMerge(
|
||||
'h-full border-r border-zinc-100 pb-10 dark:border-zinc-900',
|
||||
className
|
||||
)}
|
||||
enable={{ right: true }}
|
||||
>
|
||||
{children}
|
||||
|
Loading…
Reference in New Issue
Block a user