mirror of
https://github.com/luminous-devs/lume.git
synced 2024-08-30 18:10:50 +00:00
wip: cross platform ui
This commit is contained in:
parent
5a3207f878
commit
c89e7e48ee
BIN
public/ghost.png
Normal file
BIN
public/ghost.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.0 MiB |
@ -24,10 +24,10 @@
|
||||
"width": 400,
|
||||
"height": 500,
|
||||
"decorations": false,
|
||||
"label": "Lume",
|
||||
"title": "Lume",
|
||||
"center": true,
|
||||
"resizable": false,
|
||||
"label": "splashscreen",
|
||||
"url": "splashscreen"
|
||||
}
|
||||
]
|
||||
|
@ -25,12 +25,12 @@
|
||||
"width": 400,
|
||||
"height": 500,
|
||||
"decorations": true,
|
||||
"label": "Lume",
|
||||
"title": "Lume",
|
||||
"titleBarStyle": "Overlay",
|
||||
"hiddenTitle": true,
|
||||
"center": true,
|
||||
"resizable": false,
|
||||
"label": "splashscreen",
|
||||
"url": "splashscreen"
|
||||
}
|
||||
]
|
||||
|
@ -24,10 +24,10 @@
|
||||
"width": 400,
|
||||
"height": 500,
|
||||
"decorations": false,
|
||||
"label": "Lume",
|
||||
"title": "Lume",
|
||||
"center": true,
|
||||
"resizable": false,
|
||||
"label": "splashscreen",
|
||||
"url": "splashscreen"
|
||||
}
|
||||
]
|
||||
|
@ -220,6 +220,13 @@ const router = createBrowserRouter([
|
||||
return { Component: ResetScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'hard-reset',
|
||||
async lazy() {
|
||||
const { HardResetScreen } = await import('@app/auth/hardReset');
|
||||
return { Component: HardResetScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -256,7 +263,7 @@ export default function App() {
|
||||
<RouterProvider
|
||||
router={router}
|
||||
fallbackElement={
|
||||
<div className="flex h-full w-full items-center justify-center bg-black/90">
|
||||
<div className="flex h-full w-full items-center justify-center bg-black/90 backdrop-blur-xl">
|
||||
<LoaderIcon className="h-6 w-6 animate-spin text-white" />
|
||||
</div>
|
||||
}
|
||||
|
@ -9,10 +9,10 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10" />
|
||||
<div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
|
||||
<div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
|
||||
<span className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
|
||||
<span className="h-3 w-1/3 animate-pulse rounded bg-white/10" />
|
||||
<span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
<span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -9,10 +9,10 @@ export function UserRelay({ pubkey }: { pubkey: string }) {
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10" />
|
||||
<div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
|
||||
<div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
|
||||
<span className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
|
||||
<span className="h-3 w-1/3 animate-pulse rounded bg-white/10" />
|
||||
<span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
<span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -81,7 +81,7 @@ export function CreateStep1Screen() {
|
||||
<input
|
||||
readOnly
|
||||
value={npub}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -91,12 +91,12 @@ export function CreateStep1Screen() {
|
||||
readOnly
|
||||
type={privkeyInput}
|
||||
value={nsec}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 py-1 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 py-1 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showPrivateKey()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
{privkeyInput === 'password' ? (
|
||||
<EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
|
||||
|
@ -98,12 +98,12 @@ export function CreateStep2Screen() {
|
||||
<input
|
||||
{...register('password', { required: true })}
|
||||
type={passwordInput}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showPassword()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
{passwordInput === 'password' ? (
|
||||
<EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
|
||||
|
@ -63,12 +63,12 @@ export function CreateStep3Screen() {
|
||||
<div className="mb-8 text-center">
|
||||
<h1 className="text-xl font-semibold text-white">Create your profile</h1>
|
||||
</div>
|
||||
<div className="w-full overflow-hidden rounded-xl bg-white/10">
|
||||
<div className="w-full overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
|
||||
<input type={'hidden'} {...register('picture')} value={picture} />
|
||||
<input type={'hidden'} {...register('banner')} value={banner} />
|
||||
<div className="relative">
|
||||
<div className="relative h-44 w-full bg-white/10">
|
||||
<div className="relative h-44 w-full bg-white/10 backdrop-blur-xl">
|
||||
<Image
|
||||
src={banner}
|
||||
alt="user's banner"
|
||||
@ -106,7 +106,7 @@ export function CreateStep3Screen() {
|
||||
minLength: 4,
|
||||
})}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -119,7 +119,7 @@ export function CreateStep3Screen() {
|
||||
<textarea
|
||||
{...register('about')}
|
||||
spellCheck={false}
|
||||
className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -135,7 +135,7 @@ export function CreateStep3Screen() {
|
||||
required: false,
|
||||
})}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
|
7
src/app/auth/hardReset.tsx
Normal file
7
src/app/auth/hardReset.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
export function HardResetScreen() {
|
||||
return (
|
||||
<div>
|
||||
<p>hard reset</p>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -95,7 +95,7 @@ export function ImportStep1Screen() {
|
||||
{...register('privkey', { required: true, minLength: 32 })}
|
||||
type={'password'}
|
||||
placeholder="nsec or hexstring"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
<span className="text-sm text-red-400">
|
||||
{errors.privkey && <p>{errors.privkey.message}</p>}
|
||||
|
@ -98,12 +98,12 @@ export function ImportStep2Screen() {
|
||||
<input
|
||||
{...register('password', { required: true })}
|
||||
type={passwordInput}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showPassword()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
{passwordInput === 'password' ? (
|
||||
<EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
|
||||
|
@ -54,7 +54,7 @@ export function ImportStep3Screen() {
|
||||
{loading ? 'Prefetching data...' : 'Continue with'}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="w-full rounded-xl bg-white/10 p-4">
|
||||
<div className="w-full rounded-xl bg-white/10 p-4 backdrop-blur-xl">
|
||||
<div className="flex flex-col gap-3">
|
||||
<User pubkey={db.account.pubkey} />
|
||||
<button
|
||||
|
@ -99,7 +99,7 @@ export function MigrateScreen() {
|
||||
Upgrade security for your account
|
||||
</h1>
|
||||
</div>
|
||||
<div className="w-full rounded-xl bg-white/10 px-3 py-3">
|
||||
<div className="w-full rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<div className="mt-1">
|
||||
|
@ -76,7 +76,7 @@ export function OnboardStep1Screen() {
|
||||
<p className="text-sm text-white/50">Choose account you want to follow</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10 py-2">
|
||||
<div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10 py-2 backdrop-blur-xl">
|
||||
{status === 'loading' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||
@ -124,7 +124,7 @@ export function OnboardStep1Screen() {
|
||||
</button>
|
||||
<Link
|
||||
to="/auth/onboarding/step-2"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white hover:bg-white/10 focus:outline-none"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
|
||||
>
|
||||
Skip, you can add later
|
||||
</Link>
|
||||
|
@ -75,13 +75,13 @@ export function OnboardStep2Screen() {
|
||||
<p className="text-sm text-white/50">Customize your space which hashtag widget</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10">
|
||||
<div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
{data.map((item: { hashtag: string }) => (
|
||||
<button
|
||||
key={item.hashtag}
|
||||
type="button"
|
||||
onClick={() => toggleTag(item.hashtag)}
|
||||
className="inline-flex transform items-center justify-between bg-white/10 px-4 py-2 hover:bg-white/20"
|
||||
className="inline-flex transform items-center justify-between bg-white/10 px-4 py-2 backdrop-blur-xl hover:bg-white/20"
|
||||
>
|
||||
<p className="text-white">{item.hashtag}</p>
|
||||
{tags.has(item.hashtag) && (
|
||||
@ -115,7 +115,7 @@ export function OnboardStep2Screen() {
|
||||
</button>
|
||||
<Link
|
||||
to="/auth/onboarding/step-3"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white hover:bg-white/10 focus:outline-none"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
|
||||
>
|
||||
Skip, you can add later
|
||||
</Link>
|
||||
|
@ -112,7 +112,7 @@ export function OnboardStep3Screen() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="scrollbar-hide relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10">
|
||||
<div className="scrollbar-hide relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
{status === 'loading' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||
@ -130,7 +130,7 @@ export function OnboardStep3Screen() {
|
||||
key={item + index}
|
||||
type="button"
|
||||
onClick={() => toggleRelay(item)}
|
||||
className="inline-flex transform items-start justify-between bg-white/10 px-4 py-2 hover:bg-white/20"
|
||||
className="inline-flex transform items-start justify-between bg-white/10 px-4 py-2 backdrop-blur-xl hover:bg-white/20"
|
||||
>
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<p className="max-w-[15rem] truncate">{item.replace(/\/+$/, '')}</p>
|
||||
@ -145,7 +145,7 @@ export function OnboardStep3Screen() {
|
||||
))
|
||||
)}
|
||||
{relays.size > 5 && (
|
||||
<div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl">
|
||||
<div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl backdrop-blur-xl">
|
||||
<p className="text-sm text-orange-400">
|
||||
Using too much relay can cause high resource usage
|
||||
</p>
|
||||
@ -176,7 +176,7 @@ export function OnboardStep3Screen() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => submit(true)}
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white hover:bg-white/10 focus:outline-none"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
|
||||
>
|
||||
Skip, use default relays
|
||||
</button>
|
||||
|
@ -124,7 +124,7 @@ export function ResetScreen() {
|
||||
{...register('privkey', { required: true })}
|
||||
type="text"
|
||||
placeholder="nsec..."
|
||||
className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none placeholder:text-white/10"
|
||||
className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -137,12 +137,12 @@ export function ResetScreen() {
|
||||
{...register('password', { required: true })}
|
||||
type={passwordInput}
|
||||
placeholder="min. 4 characters"
|
||||
className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none placeholder:text-white/10"
|
||||
className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showPassword()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
{passwordInput === 'password' ? (
|
||||
<EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
|
||||
|
@ -84,12 +84,12 @@ export function UnlockScreen() {
|
||||
{...register('password', { required: true, minLength: 4 })}
|
||||
type={'password'}
|
||||
placeholder="Password"
|
||||
className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword((prev) => !prev)}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
|
||||
|
@ -28,7 +28,7 @@ export function WelcomeScreen() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full flex-col justify-between bg-white/10">
|
||||
<div className="flex h-screen w-full flex-col justify-between bg-white/10 backdrop-blur-xl">
|
||||
<div className="flex flex-col gap-10 pt-16">
|
||||
<div className="sflex flex-col gap-2 text-center">
|
||||
<h1 className="text-3xl font-medium text-white">Welcome to Lume</h1>
|
||||
@ -48,7 +48,7 @@ export function WelcomeScreen() {
|
||||
</Link>
|
||||
<Link
|
||||
to="/auth/create"
|
||||
className="inline-flex h-11 w-2/3 items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-zinc-200 hover:bg-white/20 focus:outline-none"
|
||||
className="inline-flex h-11 w-2/3 items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-zinc-200 backdrop-blur-xl hover:bg-white/20 focus:outline-none"
|
||||
>
|
||||
Create new key
|
||||
</Link>
|
||||
|
@ -11,9 +11,9 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||
<div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10" />
|
||||
<div className="inline-flex h-10 items-center gap-2.5 rounded-md px-2">
|
||||
<div className="relative h-7 w-7 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>
|
||||
);
|
||||
}
|
||||
@ -24,15 +24,15 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
|
||||
isActive ? 'bg-white/10 text-white' : 'text-white/80'
|
||||
'inline-flex h-10 items-center gap-2.5 rounded-md px-2',
|
||||
isActive ? 'bg-white/10 text-white backdrop-blur-xl' : 'text-white/80'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
alt={pubkey}
|
||||
className="h-6 w-6 shrink-0 rounded object-cover"
|
||||
className="h-7 w-7 shrink-0 rounded object-cover"
|
||||
/>
|
||||
<div className="inline-flex w-full flex-1 items-center justify-between">
|
||||
<h5 className="max-w-[10rem] truncate">
|
||||
|
@ -33,12 +33,12 @@ export function ChatsList() {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10 backdrop-blur-xl" />
|
||||
</div>
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-white/10 backdrop-blur-xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -20,7 +20,7 @@ export function ChatMessageItem({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
|
||||
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 backdrop-blur-xl hover:bg-white/10">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={message.pubkey} time={message.created_at} isChat={true} />
|
||||
<div className="-mt-[20px] pl-[49px]">
|
||||
|
@ -29,7 +29,7 @@ export function MediaUploader({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => uploadMedia()}
|
||||
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
|
||||
className="group inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||
|
@ -24,10 +24,10 @@ export function NewMessageModal() {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
|
||||
className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<PlusIcon className="h-3 w-3 text-white" />
|
||||
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<PlusIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-white/50">New chat</h5>
|
||||
@ -37,14 +37,14 @@ export function NewMessageModal() {
|
||||
<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-5">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<Dialog.Title className="text-lg font-semibold leading-none text-white">
|
||||
New chat
|
||||
</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,14 +57,14 @@ export function NewMessageModal() {
|
||||
{db.account?.follows?.map((follow) => (
|
||||
<div
|
||||
key={follow}
|
||||
className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
|
||||
className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
<User pubkey={follow} />
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openChat(follow)}
|
||||
className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
|
||||
className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
|
||||
>
|
||||
Chat
|
||||
</button>
|
||||
|
@ -31,7 +31,7 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
|
||||
<p className="leading-tight">{user?.bio || user?.about}</p>
|
||||
<Link
|
||||
to={`/users/${pubkey}`}
|
||||
className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white hover:bg-fuchsia-500"
|
||||
className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-fuchsia-500"
|
||||
>
|
||||
View full profile
|
||||
</Link>
|
||||
|
@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { User } from '@app/auth/components/user';
|
||||
|
||||
import { CancelIcon, PlusIcon } from '@shared/icons';
|
||||
import { CancelIcon, StrangersIcon } from '@shared/icons';
|
||||
|
||||
import { compactNumber } from '@utils/number';
|
||||
|
||||
@ -22,10 +22,10 @@ export function UnknownsModal({ data }: { data: string[] }) {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
|
||||
className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<PlusIcon className="h-3 w-3 text-white" />
|
||||
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<StrangersIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-white/50">
|
||||
@ -37,14 +37,14 @@ export function UnknownsModal({ data }: { data: 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="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<Dialog.Title className="text-lg font-semibold leading-none text-white">
|
||||
{data.length} unknowns
|
||||
</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,14 +57,14 @@ export function UnknownsModal({ data }: { data: string[] }) {
|
||||
{data.map((pubkey) => (
|
||||
<div
|
||||
key={pubkey}
|
||||
className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
|
||||
className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
<User pubkey={pubkey} />
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openChat(pubkey)}
|
||||
className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
|
||||
className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
|
||||
>
|
||||
Chat
|
||||
</button>
|
||||
|
@ -74,10 +74,10 @@ export function ChatScreen() {
|
||||
}, [pubkey]);
|
||||
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-3 bg-white/10">
|
||||
<div className="grid h-full w-full grid-cols-3 bg-white/10 backdrop-blur-xl">
|
||||
<div className="col-span-2 border-r border-white/5">
|
||||
<div className="h-full w-full flex-1 p-3">
|
||||
<div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10">
|
||||
<div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<div className="h-full w-full flex-1">
|
||||
{status === 'loading' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
@ -104,7 +104,7 @@ export function ChatScreen() {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5">
|
||||
<div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5 backdrop-blur-xl">
|
||||
<ChatMessageForm
|
||||
receiverPubkey={pubkey}
|
||||
userPubkey={db.account.pubkey}
|
||||
|
@ -33,7 +33,7 @@ export function ErrorScreen() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center bg-black/90">
|
||||
<div className="flex h-full items-center justify-center bg-black/90 backdrop-blur-xl">
|
||||
<div className="flex max-w-lg flex-col gap-4">
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-1 text-2xl font-semibold text-white">
|
||||
@ -57,19 +57,19 @@ export function ErrorScreen() {
|
||||
href="https://github.com/luminous-devs/lume/issues/new"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/20"
|
||||
>
|
||||
Click here to report the issue on GitHub
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/20"
|
||||
>
|
||||
Reload app
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
|
||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/20"
|
||||
>
|
||||
Reset app
|
||||
</button>
|
||||
|
@ -93,13 +93,13 @@ export function ArticleNoteScreen() {
|
||||
<div className="col-span-3 flex flex-col gap-1.5">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : (
|
||||
<div className="h-min w-full px-3">
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3">
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
|
||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<div>
|
||||
|
@ -99,13 +99,13 @@ export function TextNoteScreen() {
|
||||
<div className="col-span-3 flex flex-col gap-1.5">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : (
|
||||
<div className="h-min w-full px-3">
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3">
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
|
||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<div>
|
||||
|
@ -13,7 +13,7 @@ export function NotiMention({ 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="flex items-start justify-between">
|
||||
<div className="flex items-start gap-1">
|
||||
<NotiUser pubkey={event.pubkey} />
|
||||
@ -22,7 +22,7 @@ export function NotiMention({ event }: { event: NDKEvent }) {
|
||||
</div>
|
||||
<div className="f- relative z-10 -mt-6 flex gap-3">
|
||||
<div className="h-11 w-11 shrink-0" />
|
||||
<div className="mb-2 mt-3 w-full cursor-default rounded-lg bg-white/10 px-3 py-3">
|
||||
<div className="mb-2 mt-3 w-full cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
|
||||
<NotiContent content={content} />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -11,7 +11,7 @@ export function NotiReaction({ 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="flex items-start justify-between">
|
||||
<div className="flex items-start gap-1">
|
||||
<NotiUser pubkey={event.pubkey} />
|
||||
|
@ -15,7 +15,7 @@ export function NotiRepost({ 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="flex items-start justify-between">
|
||||
<div className="flex items-start gap-1">
|
||||
<NotiUser pubkey={event.pubkey} />
|
||||
|
@ -26,7 +26,7 @@ export const SimpleNote = memo(function SimpleNote({ 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>
|
||||
);
|
||||
@ -34,7 +34,7 @@ export const SimpleNote = memo(function SimpleNote({ 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't get event from relay</p>
|
||||
</div>
|
||||
);
|
||||
@ -46,7 +46,7 @@ export const SimpleNote = memo(function SimpleNote({ 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 className="markdown">
|
||||
|
@ -41,12 +41,12 @@ export function NotificationScreen() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide h-full w-full overflow-y-auto bg-white/10">
|
||||
<div className="grid grid-cols-3">
|
||||
<div className="scrollbar-hide h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl">
|
||||
<div className="grid h-full grid-cols-3">
|
||||
<div className="col-span-2 flex flex-col border-r border-white/5">
|
||||
<TitleBar title="Activities in the last 24 hours" />
|
||||
<div className="flex h-full flex-col gap-1.5">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex h-full flex-col">
|
||||
{status === 'loading' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
@ -58,7 +58,7 @@ export function NotificationScreen() {
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<p className="mb-1 text-4xl">🎉</p>
|
||||
<p className="font-medium text-white/50">
|
||||
Yo!, you've no new activities
|
||||
Yo!, no new activities around you in the last 24 hours
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
|
@ -35,7 +35,7 @@ export function AccountSettingsScreen() {
|
||||
<input
|
||||
readOnly
|
||||
value={db.account.pubkey}
|
||||
className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -45,7 +45,7 @@ export function AccountSettingsScreen() {
|
||||
<input
|
||||
readOnly
|
||||
value={db.account.npub}
|
||||
className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -60,7 +60,7 @@ export function AccountSettingsScreen() {
|
||||
readOnly
|
||||
type={type}
|
||||
value={privkey}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
|
@ -7,7 +7,7 @@ export function GeneralSettingsScreen() {
|
||||
<div className="h-full w-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-white">General</h1>
|
||||
<div className="w-full rounded-xl bg-white/10">
|
||||
<div className="w-full rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<div className="flex h-full w-full flex-col divide-y divide-white/5">
|
||||
<AutoStartSetting />
|
||||
<CacheTimeSetting />
|
||||
|
@ -5,17 +5,17 @@ export function ShortcutsSettingsScreen() {
|
||||
<div className="h-full w-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-white">Shortcuts</h1>
|
||||
<div className="w-full rounded-xl bg-white/10">
|
||||
<div className="w-full rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<div className="flex h-full w-full flex-col divide-y divide-white/5">
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">Open composer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<CommandIcon width={12} height={12} className="text-white/50" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<span className="text-sm leading-none text-white/50">N</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,10 +27,10 @@ export function ShortcutsSettingsScreen() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<CommandIcon width={12} height={12} className="text-white/50" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<span className="text-sm leading-none text-white/50">I</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,10 +42,10 @@ export function ShortcutsSettingsScreen() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<CommandIcon width={12} height={12} className="text-white/50" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<span className="text-sm leading-none text-white/50">F</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,10 +57,10 @@ export function ShortcutsSettingsScreen() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<CommandIcon width={12} height={12} className="text-white/50" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<span className="text-sm leading-none text-white/50">P</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,10 +72,10 @@ export function ShortcutsSettingsScreen() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<CommandIcon width={12} height={12} className="text-white/50" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<span className="text-sm leading-none text-white/50">B</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -71,7 +71,7 @@ export function AddWidgetButton() {
|
||||
<div className="inline-flex h-full w-full flex-col items-center justify-center">
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button type="button" className="flex flex-col items-center gap-2">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 hover:bg-white/10">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 backdrop-blur-xl hover:bg-white/10">
|
||||
<PlusIcon className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<p className="font-medium text-white/50">Add widget</p>
|
||||
@ -82,15 +82,15 @@ export function AddWidgetButton() {
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
sideOffset={-20}
|
||||
className="flex w-[256px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none"
|
||||
className="flex w-[256px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl backdrop-blur-xl focus:outline-none"
|
||||
>
|
||||
<DropdownMenu.Item asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={setHashtagWidget}
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<HashtagIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
Add hashtag feeds
|
||||
@ -100,9 +100,9 @@ export function AddWidgetButton() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={setGroupFeedWidget}
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<FeedIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
Add user group feeds
|
||||
@ -112,9 +112,9 @@ export function AddWidgetButton() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={setArticleWidget}
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<ThreadsIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
Add article feeds
|
||||
@ -124,9 +124,9 @@ export function AddWidgetButton() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={setFileWidget}
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<FileIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
Add file feeds
|
||||
@ -136,9 +136,9 @@ export function AddWidgetButton() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={setTrendingProfilesWidget}
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<TrendingIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
Add trending accounts
|
||||
@ -148,9 +148,9 @@ export function AddWidgetButton() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={setTrendingNotesWidget}
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
|
||||
className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<TrendingIcon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
Add trending notes
|
||||
|
@ -43,7 +43,7 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10">
|
||||
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
|
||||
<div className="w-full px-5">
|
||||
<h3 className="mb-4 text-center text-lg font-semibold">
|
||||
Choose account you want to add to group feeds
|
||||
@ -54,10 +54,10 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Title"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-white/10 py-2">
|
||||
<div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-white/10 py-2 backdrop-blur-xl">
|
||||
{db.account.network.map((item: string) => (
|
||||
<button
|
||||
key={item}
|
||||
@ -88,7 +88,7 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={cancel}
|
||||
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white hover:bg-white/20 focus:outline-none disabled:opacity-50"
|
||||
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
@ -62,7 +62,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10">
|
||||
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
|
||||
<div className="w-full px-5">
|
||||
<h3 className="mb-4 text-center text-lg font-semibold">
|
||||
Enter hashtag you want to follow
|
||||
@ -72,7 +72,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
|
||||
<input
|
||||
{...register('hashtag', { required: true, minLength: 1 })}
|
||||
placeholder="#bitcoin"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
<span className="text-sm text-red-400">
|
||||
{errors.hashtag && <p>{errors.hashtag.message}</p>}
|
||||
@ -91,7 +91,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={cancel}
|
||||
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white hover:bg-white/20 focus:outline-none disabled:opacity-50"
|
||||
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
@ -65,14 +65,14 @@ export function UserProfile({ data }: { data: Profile }) {
|
||||
|
||||
if (!profile) {
|
||||
return (
|
||||
<div className="rounded-xl bg-white/10 px-5 py-5">
|
||||
<div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
|
||||
<p>Can't fetch profile</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-xl bg-white/10 px-5 py-5">
|
||||
<div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Image
|
||||
@ -93,7 +93,7 @@ export function UserProfile({ data }: { data: Profile }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => unfollowUser(data.pubkey)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white hover:bg-fuchsia-500 hover:text-white"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
|
||||
>
|
||||
<UnfollowIcon className="h-4 w-4" />
|
||||
</button>
|
||||
@ -101,7 +101,7 @@ export function UserProfile({ data }: { data: Profile }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => followUser(data.pubkey)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white hover:bg-fuchsia-500 hover:text-white"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
|
||||
>
|
||||
<FollowIcon className="h-4 w-4" />
|
||||
</button>
|
||||
|
@ -51,18 +51,18 @@ export function ArticleWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : items.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm font-medium text-white">
|
||||
There have been no new articles in the last 24 hours.
|
||||
|
@ -116,18 +116,18 @@ export function FeedWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : items.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="bbg-white/10 rounded-xl px-3 py-6">
|
||||
<div className="bbg-white/10 rounded-xl px-3 py-6 backdrop-blur-xl">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm text-white">
|
||||
There have been no new posts.
|
||||
@ -155,7 +155,7 @@ export function FeedWidget({ params }: { params: Widget }) {
|
||||
)}
|
||||
{isFetchingNextPage && (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
|
@ -51,18 +51,18 @@ export function FileWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : items.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm font-medium text-white">
|
||||
There have been no new files in the last 24 hours.
|
||||
|
@ -114,18 +114,18 @@ export function HashtagWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : items.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm font-medium text-white">
|
||||
There have been no new posts with this hashtag in the last 24 hours.
|
||||
|
@ -153,23 +153,25 @@ export function NetworkWidget() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar title="Network" />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : dbEvents.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm text-white">
|
||||
You not have any posts to see yet
|
||||
<br />
|
||||
Follow more people to have more fun.
|
||||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||
<div className="text-center">
|
||||
<h3 className="text-xl font-semibold leading-tight">
|
||||
Your newsfeed is empty
|
||||
</h3>
|
||||
<p className="text-center text-white/50">
|
||||
Connect more people to explore more content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -193,38 +195,40 @@ export function NetworkWidget() {
|
||||
</div>
|
||||
)}
|
||||
{isFetchingNextPage && (
|
||||
<div className="mb-20 px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-3">
|
||||
<div className="mb-20 px-3">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="px-3 py-1.5">
|
||||
<button
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<>
|
||||
<span className="w-5" />
|
||||
<span>Loading...</span>
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||
</>
|
||||
) : hasNextPage ? (
|
||||
<>
|
||||
<span className="w-5" />
|
||||
<span>Load more</span>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="w-5" />
|
||||
<span>Nothing more to load</span>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{dbEvents.length > 0 ? (
|
||||
<button
|
||||
onClick={() => fetchNextPage()}
|
||||
disabled={!hasNextPage || isFetchingNextPage}
|
||||
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
|
||||
>
|
||||
{isFetchingNextPage ? (
|
||||
<>
|
||||
<span className="w-5" />
|
||||
<span>Loading...</span>
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||
</>
|
||||
) : hasNextPage ? (
|
||||
<>
|
||||
<span className="w-5" />
|
||||
<span>Load more</span>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="w-5" />
|
||||
<span>Nothing more to load</span>
|
||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -41,18 +41,18 @@ export function ThreadBlock({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="h-full">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : (
|
||||
<div className="h-min w-full px-3 pt-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3">
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
|
||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<NoteActions id={params.content} pubkey={data.pubkey} noOpenThread={true} />
|
||||
|
@ -31,18 +31,18 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="h-full">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : status === 'error' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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">
|
||||
<p className="text-center text-sm font-medium text-white">
|
||||
Sorry, an unexpected error has occurred.
|
||||
</p>
|
||||
|
@ -32,18 +32,18 @@ export function TrendingProfilesWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="h-full">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : status === 'error' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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">
|
||||
<p className="text-center text-sm font-medium text-white">
|
||||
Sorry, an unexpected error has occurred.
|
||||
</p>
|
||||
|
@ -120,7 +120,7 @@ export function UserWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
<div className="px-3 pt-1.5">
|
||||
@ -131,13 +131,13 @@ export function UserWidget({ params }: { params: Widget }) {
|
||||
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="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>
|
||||
) : items.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm text-white">
|
||||
No new post from user in 24 hours ago
|
||||
|
@ -50,8 +50,6 @@ export function SplashScreen() {
|
||||
}
|
||||
|
||||
if (ndk && db.account) {
|
||||
if (db.account.network.length < 1) invoke('close_splashscreen');
|
||||
|
||||
console.log('prefetching...');
|
||||
prefetch();
|
||||
}
|
||||
|
@ -125,7 +125,7 @@ export function EditProfileModal() {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
Edit profile
|
||||
</button>
|
||||
@ -133,13 +133,13 @@ export function EditProfileModal() {
|
||||
<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-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<Dialog.Title className="text-lg font-semibold leading-none text-white">
|
||||
Edit profile
|
||||
</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>
|
||||
@ -191,7 +191,7 @@ export function EditProfileModal() {
|
||||
minLength: 4,
|
||||
})}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -208,7 +208,7 @@ export function EditProfileModal() {
|
||||
minLength: 4,
|
||||
})}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
|
||||
{nip05.verified ? (
|
||||
@ -240,7 +240,7 @@ export function EditProfileModal() {
|
||||
<textarea
|
||||
{...register('about')}
|
||||
spellCheck={false}
|
||||
className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
|
||||
className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -254,7 +254,7 @@ export function EditProfileModal() {
|
||||
type={'text'}
|
||||
{...register('website', { required: false })}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@ -268,7 +268,7 @@ export function EditProfileModal() {
|
||||
type={'text'}
|
||||
{...register('lud16', { required: false })}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
|
||||
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -92,7 +92,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>
|
||||
@ -100,20 +100,20 @@ 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>
|
||||
{db.account.pubkey === pubkey && (
|
||||
<>
|
||||
<span className="mx-2 inline-flex h-4 w-px bg-white/10" />
|
||||
<span className="mx-2 inline-flex h-4 w-px bg-white/10 backdrop-blur-xl" />
|
||||
<EditProfileModal />
|
||||
</>
|
||||
)}
|
||||
|
@ -114,7 +114,7 @@ export function UserScreen() {
|
||||
return (
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10"
|
||||
className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl"
|
||||
>
|
||||
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
|
||||
<UserProfile pubkey={pubkey} />
|
||||
@ -125,13 +125,13 @@ export function UserScreen() {
|
||||
<div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<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>
|
||||
) : items.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm font-medium text-white">
|
||||
User doesn't have any posts in the last 48 hours.
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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,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,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>
|
||||
|
@ -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) => {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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" />
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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} />
|
||||
|
@ -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>
|
||||
|
@ -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'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>
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user