reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: cross platform ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-28 16:00:11 +07:00
parent 5a3207f878
commit c89e7e48ee
86 changed files with 376 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/shared/accounts/active.tsx
View File

@@ -11,10 +11,10 @@ import { useNostr } from '@utils/hooks/useNostr';
import { useProfile } from '@utils/hooks/useProfile';
import { sendNativeNotification } from '@utils/notification';
export function ActiveAccount({ data }: { data: { pubkey: string; npub: string } }) {
const { sub } = useNostr();
export function ActiveAccount() {
const { db } = useStorage();
const { status, user } = useProfile(data.pubkey);
const { status, user } = useProfile(db.account.pubkey);
const { sub } = useNostr();
useEffect(() => {
const filter: NDKFilter = {
@@ -53,11 +53,11 @@ export function ActiveAccount({ data }: { data: { pubkey: string; npub: string }
}
return (
<Link to={`/users/${data.pubkey}`} className="relative inline-block h-9 w-9">
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block shrink-0">
<Image
src={user?.picture || user?.image}
alt={data.npub}
className="h-9 w-9 rounded-md object-cover"
alt={db.account.npub}
className="h-10 w-10 rounded-lg object-cover"
/>
<NetworkStatusIndicator />
</Link>

4
src/shared/button.tsx
View File

@@ -16,7 +16,7 @@ export function Button({
switch (preset) {
case 'small':
preClass =
'w-min h-9 px-4 bg-white/10 rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
break;
case 'publish':
preClass =
@@ -28,7 +28,7 @@ export function Button({
break;
case 'large-alt':
preClass =
'h-11 w-full bg-white/10 rounded-lg font-medium text-white hover:bg-white/20';
'h-11 w-full bg-white/10 backdrop-blur-xl rounded-lg font-medium text-white hover:bg-white/20';
break;
default:
break;

6
src/shared/composer/composer.tsx
View File

@@ -130,7 +130,7 @@ export function Composer() {
<div className="flex h-full flex-col px-4 pb-4">
<div className="flex h-full w-full gap-3">
<div className="flex w-8 shrink-0 items-center justify-center">
<div className="h-full w-[2px] bg-white/10" />
<div className="h-full w-[2px] bg-white/10 backdrop-blur-xl" />
</div>
<div className="w-full">
<EditorContent
@@ -146,7 +146,7 @@ export function Composer() {
<button
type="button"
onClick={() => clearReply()}
className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2"
className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2 backdrop-blur-xl"
>
<CancelIcon className="h-4 w-4 text-white" />
</button>
@@ -158,7 +158,7 @@ export function Composer() {
<button
type="button"
onClick={() => uploadImage()}
className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/10"
className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
>
<PlusCircleIcon className="h-5 w-5 text-white/50" />
</button>

10
src/shared/composer/modal.tsx
View File

@@ -21,30 +21,30 @@ export function ComposerModal() {
<Dialog.Trigger asChild>
<button
type="button"
className="inline-flex h-9 w-max items-center justify-center gap-2 rounded-md bg-white/10 px-4 text-sm font-medium text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
className="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-white/20 from-fuchsia-200 via-red-200 to-orange-300 px-4 font-medium text-white hover:bg-fuchsia-500 hover:bg-gradient-to-r hover:text-black focus:outline-none active:translate-y-1"
>
<ComposeIcon className="h-4 w-4" />
<ComposeIcon className="h-5 w-5" />
Postr
</button>
</Dialog.Trigger>
<Dialog.Portal className="relative z-10">
<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-2xl rounded-xl bg-white/10">
<div className="relative h-min w-full max-w-2xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="flex items-center justify-between px-4 py-4">
<div className="flex items-center gap-2">
<ComposerUser pubkey={db.account.pubkey} />
<span>
<ChevronRightIcon className="h-4 w-4 text-white/50" />
</span>
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white">
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white backdrop-blur-xl">
New Post
<ChevronDownIcon className="h-4 w-4" />
</div>
</div>
<Dialog.Close
onClick={() => toggle(false)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/10"
className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
>
<CancelIcon className="h-5 w-5 text-white/50" />
</Dialog.Close>

2
src/shared/layouts/app.tsx
View File

@@ -8,7 +8,7 @@ export function AppLayout() {
<div className="shrink-0">
<Navigation />
</div>
<div className="h-full w-full flex-1 bg-black/90">
<div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
<Outlet />
<ScrollRestoration
getKey={(location) => {

2
src/shared/layouts/auth.tsx
View File

@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
export function AuthLayout() {
return (
<div className="relative h-screen w-screen bg-black/90">
<div className="relative h-screen w-screen bg-black/90 backdrop-blur-xl">
<div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
<Outlet />
</div>

2
src/shared/layouts/note.tsx
View File

@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
export function NoteLayout() {
return (
<div className="relative h-screen w-screen bg-black/90">
<div className="relative h-screen w-screen bg-black/90 backdrop-blur-xl">
<div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
<Outlet />
</div>

14
src/shared/layouts/settings.tsx
View File

@@ -21,7 +21,9 @@ export function SettingsLayout() {
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive ? 'bg-white/10 text-white' : 'text-white/80'
isActive
? 'bg-white/10 text-white backdrop-blur-xl'
: 'text-white/80'
)
}
>
@@ -32,7 +34,9 @@ export function SettingsLayout() {
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive ? 'bg-white/10 text-white' : 'text-white/80'
isActive
? 'bg-white/10 text-white backdrop-blur-xl'
: 'text-white/80'
)
}
>
@@ -43,7 +47,9 @@ export function SettingsLayout() {
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive ? 'bg-white/10 text-white' : 'text-white/80'
isActive
? 'bg-white/10 text-white backdrop-blur-xl'
: 'text-white/80'
)
}
>
@@ -57,7 +63,7 @@ export function SettingsLayout() {
<LumeBar />
</div>
</div>
<div className="h-full w-full flex-1 bg-black/90">
<div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
<Outlet />
<ScrollRestoration
getKey={(location) => {

6
src/shared/logout.tsx
View File

@@ -30,14 +30,14 @@ export function Logout() {
<Dialog.Portal className="relative z-10">
<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="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-6">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<Dialog.Title className="text-lg font-semibold leading-none text-white">
Are you sure!
</Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
<CancelIcon className="h-4 w-4 text-white/50" />
</Dialog.Close>
</div>
@@ -57,7 +57,7 @@ export function Logout() {
<div className="flex items-center gap-2">
<button
type="button"
className="inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-white/50 hover:bg-white/10"
className="inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-white/50 backdrop-blur-xl hover:bg-white/10"
>
Cancel
</button>

28
src/shared/lumeBar.tsx
View File

@@ -1,28 +0,0 @@
import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { ActiveAccount } from '@shared/accounts/active';
import { SettingsIcon } from '@shared/icons';
import { Logout } from '@shared/logout';
export function LumeBar() {
const { db } = useStorage();
return (
<div className="absolute bottom-3 left-1/2 w-max -translate-x-1/2 transform">
<div className="rounded-xl bg-white/10 p-2 backdrop-blur-xl">
<div className="flex items-center gap-2">
<ActiveAccount data={db.account} />
<Link
to="/settings/general"
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
>
<SettingsIcon className="h-4 w-4 text-white" />
</Link>
<Logout />
</div>
</div>
</div>
);
}

152
src/shared/navigation.tsx
View File

@@ -1,112 +1,73 @@
import * as Collapsible from '@radix-ui/react-collapsible';
import { NavLink, useNavigate } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { ChatsList } from '@app/chats/components/list';
import { ComposerModal } from '@shared/composer/modal';
import {
ArrowLeftIcon,
ArrowRightIcon,
BellIcon,
NavArrowDownIcon,
SpaceIcon,
} from '@shared/icons';
import { LumeBar } from '@shared/lumeBar';
import { ActiveAccount } from '@shared/accounts/active';
import { ComposerModal } from '@shared/composer';
import { BellIcon, NavArrowDownIcon, SettingsIcon, SpaceIcon } from '@shared/icons';
import { useSidebar } from '@stores/sidebar';
export function Navigation() {
const navigate = useNavigate();
const [feeds, toggleFeeds] = useSidebar((state) => [state.feeds, state.toggleFeeds]);
const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
return (
<div className="relative h-full w-[232px] bg-black/80">
<div className="absolute left-0 top-0 h-8 w-full" data-tauri-drag-region />
<div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
<div className="inline-flex h-8 items-center justify-between px-2 pb-4 pt-14">
<ComposerModal />
<div className="flex gap-2.5">
<button
type="button"
onClick={() => navigate(-1)}
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
>
<ArrowLeftIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
</button>
<button
type="button"
onClick={() => navigate(1)}
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
>
<ArrowRightIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
</button>
</div>
<div data-tauri-drag-region className="h-11 w-full" />
<div className="scrollbar-hide flex h-full flex-col gap-6 overflow-y-auto pb-32">
<div className="flex flex-col px-2">
<NavLink
to="/"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-md px-2',
isActive ? 'bg-white/5 text-white' : 'text-white/80'
)
}
>
<span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<SpaceIcon className="h-4 w-4 text-white" />
</span>
Space
</NavLink>
<NavLink
to="/notifications"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-md px-2',
isActive ? 'bg-white/5 text-white' : 'text-white/80'
)
}
>
<span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<BellIcon className="h-4 w-4 text-white" />
</span>
Notifications
</NavLink>
<NavLink
to="/settings"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-md px-2',
isActive ? 'bg-white/5 text-white' : 'text-white/80'
)
}
>
<span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<SettingsIcon className="h-4 w-4 text-white" />
</span>
Settings
</NavLink>
</div>
<Collapsible.Root open={feeds} onOpenChange={toggleFeeds}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1">
<div
className={twMerge(
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
open ? '' : 'rotate-180'
)}
>
<NavArrowDownIcon
className={twMerge(
'h-3 w-3 text-white/50',
feeds ? '' : 'rotate-180'
)}
/>
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
Personal
</h3>
</button>
</Collapsible.Trigger>
<Collapsible.Content>
<div className="flex flex-col">
<NavLink
to="/"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2',
isActive ? 'bg-white/10 text-white' : 'text-white/80'
)
}
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<SpaceIcon className="h-3 w-3 text-white" />
</span>
Space
</NavLink>
<NavLink
to="/notifications"
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2',
isActive ? 'bg-white/10 text-white' : 'text-white/80'
)
}
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<BellIcon className="h-3 w-3 text-white" />
</span>
Notifications
</NavLink>
</div>
</Collapsible.Content>
</div>
</Collapsible.Root>
<Collapsible.Root open={chats} onOpenChange={toggleChats}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1">
<button className="flex items-center gap-1 px-3">
<div
className={twMerge(
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
@@ -126,7 +87,12 @@ export function Navigation() {
</div>
</Collapsible.Root>
</div>
<LumeBar />
<div className="absolute bottom-4 left-0 right-0 px-2">
<div className="flex items-center gap-2 rounded-2xl bg-white/10 px-2 py-2 backdrop-blur-xl">
<ActiveAccount />
<ComposerModal />
</div>
</div>
</div>
);
}

2
src/shared/notes/actions.tsx
View File

@@ -36,7 +36,7 @@ export function NoteActions({
</div>
{!noOpenThread && (
<>
<div className="mx-2 block h-4 w-px bg-white/10" />
<div className="mx-2 block h-4 w-px bg-white/10 backdrop-blur-xl" />
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<button

10
src/shared/notes/actions/more.tsx
View File

@@ -45,11 +45,11 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
</Tooltip.Portal>
</Tooltip.Root>
<DropdownMenu.Portal>
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl backdrop-blur-xl focus:outline-none">
<DropdownMenu.Item asChild>
<Link
to={`/notes/text/${id}`}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
>
Focus mode
</Link>
@@ -58,7 +58,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => copyLink()}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
>
Copy shareable link
</button>
@@ -67,7 +67,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => copyID()}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
>
Copy ID
</button>
@@ -75,7 +75,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<DropdownMenu.Item asChild>
<Link
to={`/users/${pubkey}`}
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
>
View profile
</Link>

10
src/shared/notes/actions/reaction.tsx
View File

@@ -80,14 +80,14 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => react('👏')}
className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
className="inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
>
<img src="/clapping_hands.png" alt="Clapping Hands" className="h-6 w-6" />
</button>
<button
type="button"
onClick={() => react('🤪')}
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
>
<img
src="/face_with_tongue.png"
@@ -98,7 +98,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => react('😮')}
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
>
<img
src="/face_with_open_mouth.png"
@@ -109,14 +109,14 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
<button
type="button"
onClick={() => react('😢')}
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
>
<img src="/crying_face.png" alt="Crying Face" className="h-6 w-6" />
</button>
<button
type="button"
onClick={() => react('🤡')}
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
>
<img src="/clown_face.png" alt="Clown Face" className="h-6 w-6" />
</button>

4
src/shared/notes/actions/repost.tsx
View File

@@ -46,7 +46,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<AlertDialog.Portal className="relative z-10">
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
<AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
<AlertDialog.Title className="text-lg font-semibold leading-none text-white">
Confirm repost this post?
@@ -58,7 +58,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
</div>
<div className="flex justify-end gap-6 px-5 py-3">
<AlertDialog.Cancel asChild>
<button className="inline-flex h-11 items-center justify-center rounded-lg bg-white/10 px-4 font-medium leading-none text-white outline-none">
<button className="inline-flex h-11 items-center justify-center rounded-lg bg-white/10 px-4 font-medium leading-none text-white outline-none backdrop-blur-xl">
Cancel
</button>
</AlertDialog.Cancel>

28
src/shared/notes/actions/zap.tsx
View File

@@ -41,7 +41,7 @@ export function NoteZap({ id }: { id: string }) {
<Dialog.Portal className="relative z-10">
<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="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="relative h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
<div className="flex flex-col items-center gap-1.5">
<Dialog.Title className="font-medium leading-none text-white">
@@ -51,7 +51,7 @@ export function NoteZap({ id }: { id: string }) {
Send tip with Bitcoin via Lightning
</Dialog.Description>
</div>
<Dialog.Close className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
<Dialog.Close className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
<CancelIcon className="h-4 w-4 text-white/50" />
</Dialog.Close>
</div>
@@ -63,8 +63,8 @@ export function NoteZap({ id }: { id: string }) {
type="button"
onClick={() => setAmount(21000)}
className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(21000) && 'bg-white/10'}`
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
`${selected(21000) && 'bg-white/10 backdrop-blur-xl'}`
)}
>
<img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -76,8 +76,8 @@ export function NoteZap({ id }: { id: string }) {
type="button"
onClick={() => setAmount(69000)}
className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(69000) && 'bg-white/10'}`
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
`${selected(69000) && 'bg-white/10 backdrop-blur-xl'}`
)}
>
<img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -89,8 +89,8 @@ export function NoteZap({ id }: { id: string }) {
type="button"
onClick={() => setAmount(100000)}
className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(100000) && 'bg-white/10'}`
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
`${selected(100000) && 'bg-white/10 backdrop-blur-xl'}`
)}
>
<img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -102,8 +102,8 @@ export function NoteZap({ id }: { id: string }) {
type="button"
onClick={() => setAmount(200000)}
className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(200000) && 'bg-white/10'}`
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
`${selected(200000) && 'bg-white/10 backdrop-blur-xl'}`
)}
>
<img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -115,8 +115,8 @@ export function NoteZap({ id }: { id: string }) {
type="button"
onClick={() => setAmount(500000)}
className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(500000) && 'bg-white/10'}`
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
`${selected(500000) && 'bg-white/10 backdrop-blur-xl'}`
)}
>
<img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -128,8 +128,8 @@ export function NoteZap({ id }: { id: string }) {
type="button"
onClick={() => setAmount(1000000)}
className={twMerge(
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
`${selected(1000000) && 'bg-white/10'}`
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
`${selected(1000000) && 'bg-white/10 backdrop-blur-xl'}`
)}
>
<img className="h-12 w-12" src="/zap.png" alt="High Voltage" />

4
src/shared/notes/child.tsx
View File

@@ -17,7 +17,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
if (status === 'loading') {
return (
<div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
<div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<NoteSkeleton />
</div>
);
@@ -25,7 +25,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
if (status === 'error') {
return (
<div className="mb-5 flex overflow-hidden rounded-xl bg-white/10 px-3 py-3">
<div className="mb-5 flex overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<p className="break-all text-white/50">Failed to fetch event: {id}</p>
</div>
);

2
src/shared/notes/kinds/article.tsx
View File

@@ -41,7 +41,7 @@ export function ArticleNote({ event }: { event: NDKEvent }) {
className="h-44 w-full rounded-t-lg object-cover"
/>
)}
<div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3">
<div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
<h5 className="line-clamp-1 font-medium leading-none text-white">
{metadata.title}
</h5>

8
src/shared/notes/kinds/repost.tsx
View File

@@ -21,7 +21,7 @@ export function Repost({ event }: { event: NDKEvent }) {
if (status === 'loading') {
return (
<div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<NoteSkeleton />
</div>
</div>
@@ -31,11 +31,11 @@ export function Repost({ event }: { event: NDKEvent }) {
if (status === 'error') {
return (
<div className="h-min w-full px-3 py-1.5">
<div className="flex flex-col gap-1 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
<div className="flex flex-col gap-1 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<p className="select-text break-all text-white/50">
Failed to get repost with ID
</p>
<div className="break-all rounded-lg bg-white/10 px-2 py-2">
<div className="break-all rounded-lg bg-white/10 px-2 py-2 backdrop-blur-xl">
<p className="text-white">{repostID}</p>
</div>
</div>
@@ -58,7 +58,7 @@ export function Repost({ event }: { event: NDKEvent }) {
return (
<div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
<div className="relative flex flex-col">
<div className="isolate flex flex-col -space-y-4">
<RepostUser pubkey={event.pubkey} />

2
src/shared/notes/kinds/unknown.tsx
View File

@@ -3,7 +3,7 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
export function UnknownNote({ event }: { event: NDKEvent }) {
return (
<div className="mb-3 mt-3 flex w-full flex-col gap-2">
<div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-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: {event.kind}
</span>

6
src/shared/notes/mentions/note.tsx
View File

@@ -33,7 +33,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
if (status === 'loading') {
return (
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
<NoteSkeleton />
</div>
);
@@ -41,7 +41,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
if (status === 'error') {
return (
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
<p>Can&apos;t get event from relay</p>
</div>
);
@@ -66,7 +66,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
onKeyDown={(e) => openThread(e, id)}
role="button"
tabIndex={0}
className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
>
<User pubkey={data.pubkey} time={data.created_at} size="small" />
<div>{renderKind(data)}</div>

8
src/shared/notes/preview/link.tsx
View File

@@ -7,13 +7,13 @@ export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]);
return (
<div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10">
<div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl">
{status === 'loading' ? (
<div className="flex flex-col">
<div className="h-44 w-full animate-pulse bg-white/10" />
<div className="h-44 w-full animate-pulse bg-white/10 backdrop-blur-xl" />
<div className="flex flex-col gap-2 px-3 py-3">
<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" />
<div className="h-3 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-3/4 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<span className="mt-2.5 text-sm leading-none text-white/50">
{domain.hostname}
</span>

2
src/shared/notes/replies/form.tsx
View File

@@ -24,7 +24,7 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
};
return (
<div className="mt-3 flex flex-col rounded-xl bg-white/10">
<div className="mt-3 flex flex-col rounded-xl bg-white/10 backdrop-blur-xl">
<div className="relative w-full flex-1 overflow-hidden">
<textarea
value={value}

4
src/shared/notes/replies/list.tsx
View File

@@ -40,7 +40,7 @@ export function RepliesList({ id }: { id: string }) {
return (
<div className="mt-5 pb-10">
<div className="flex flex-col">
<div className="rounded-xl bg-white/10 px-3 py-3">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<NoteSkeleton />
</div>
</div>
@@ -55,7 +55,7 @@ export function RepliesList({ id }: { id: string }) {
</h5>
<div className="flex flex-col gap-3">
{data?.length === 0 ? (
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10">
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10 backdrop-blur-xl">
<div className="flex flex-col items-center justify-center gap-2 py-6">
<h3 className="text-3xl">👋</h3>
<p className="leading-none text-white/50">Share your thought on it...</p>

10
src/shared/notes/skeleton.tsx
View File

@@ -2,14 +2,14 @@ export function NoteSkeleton() {
return (
<div className="flex h-min flex-col">
<div className="flex items-start gap-3">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-white/10" />
<div className="h-3 w-20 rounded bg-white/10" />
<div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-20 rounded bg-white/10 backdrop-blur-xl" />
</div>
<div className="-mt-6 animate-pulse pl-[49px]">
<div className="flex flex-col gap-1">
<div className="h-3 w-full rounded bg-white/10" />
<div className="h-3 w-2/3 rounded bg-white/10" />
<div className="h-3 w-1/2 rounded bg-white/10" />
<div className="h-3 w-full rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-2/3 rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3 w-1/2 rounded bg-white/10 backdrop-blur-xl" />
</div>
</div>
</div>

2
src/shared/notes/wrapper.tsx
View File

@@ -20,7 +20,7 @@ export function NoteWrapper({
}) {
return (
<div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
<div className="relative">{root && <ChildNote id={root} />}</div>
<div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
<div className="relative flex flex-col">

2
src/shared/titleBar.tsx
View File

@@ -19,7 +19,7 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
<button
type="button"
onClick={() => remove(db, 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-white/10 group-hover:translate-y-0"
className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded backdrop-blur-xl transition-transform duration-150 ease-in-out hover:bg-white/10 group-hover:translate-y-0"
>
<CancelIcon className="h-3 w-3 text-white" />
</button>

10
src/shared/user.tsx
View File

@@ -37,10 +37,10 @@ export function User({
<div
className={`${avatarWidth} ${avatarHeight} ${
size === 'small' ? 'rounded' : 'rounded-lg'
} relative z-10 shrink-0 animate-pulse overflow-hidden bg-white/10`}
} relative z-10 shrink-0 animate-pulse overflow-hidden bg-white/10 backdrop-blur-xl`}
/>
<div className="flex flex-wrap items-baseline gap-1">
<div className="h-3.5 w-36 animate-pulse rounded bg-white/10" />
<div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
</div>
);
@@ -87,7 +87,7 @@ export function User({
</div>
<Popover.Portal>
<Popover.Content
className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl focus:outline-none"
className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl backdrop-blur-xl focus:outline-none"
sideOffset={5}
>
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
@@ -115,13 +115,13 @@ export function User({
<div className="flex items-center gap-2 px-3 py-3">
<Link
to={`/users/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
>
View profile
</Link>
<Link
to={`/chats/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
>
Message
</Link>

6
src/shared/userProfile.tsx
View File

@@ -73,7 +73,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => unfollowUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 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 backdrop-blur-xl hover:bg-fuchsia-500"
>
Unfollow
</button>
@@ -81,14 +81,14 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => followUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 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 backdrop-blur-xl hover:bg-fuchsia-500"
>
Follow
</button>
)}
<Link
to={`/chats/${pubkey}`}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 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 backdrop-blur-xl hover:bg-fuchsia-500"
>
Message
</Link>