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