This commit is contained in:
2023-10-19 08:59:50 +07:00
parent 823fb0f239
commit 0de72eb009
39 changed files with 1882 additions and 4272 deletions

View File

@@ -1,4 +1,5 @@
import { Link, useLocation } from 'react-router-dom';
import { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { AllowNotification } from '@app/auth/components/features/allowNotification';
import { Circle } from '@app/auth/components/features/enableCircle';
@@ -7,10 +8,25 @@ import { FavoriteHashtag } from '@app/auth/components/features/favoriteHashtag';
import { FollowList } from '@app/auth/components/features/followList';
import { SuggestFollow } from '@app/auth/components/features/suggestFollow';
import { LoaderIcon } from '@shared/icons';
export function OnboardingListScreen() {
const navigate = useNavigate();
const { state } = useLocation();
const { newuser }: { newuser: boolean } = state;
const [loading, setLoading] = useState(false);
const completed = () => {
setLoading(true);
const timeout = setTimeout(() => setLoading(false), 1200);
clearTimeout(timeout);
navigate('/');
};
return (
<div className="relative flex h-full w-full items-center justify-center">
<div className="mx-auto flex w-full max-w-md flex-col gap-10">
@@ -28,12 +44,13 @@ export function OnboardingListScreen() {
<Circle />
<OutboxModel />
<AllowNotification />
<Link
to="/"
<button
type="button"
onClick={completed}
className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
>
Continue
</Link>
{loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : ' Continue'}
</button>
</div>
</div>
</div>

View File

@@ -22,10 +22,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
if (status === 'loading') {
return (
<div className="flex items-center gap-2.5 rounded-md px-3">
<div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-white/10 backdrop-blur-xl" />
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-400 dark:bg-neutral-600" />
<div className="flex w-full flex-col">
<div className="h-2.5 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-2.5 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-2.5 w-1/2 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-2.5 w-full animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
</div>
</div>
);

View File

@@ -56,11 +56,15 @@ export function ErrorScreen() {
</p>
</div>
<div className="mt-4">
<p className="font-medium text-white/50">
<p className="font-medium text-neutral-600 dark:text-neutral-400">
Current location: {location.pathname}
</p>
<p className="font-medium text-white/50">App version: {debugInfo.version}</p>
<p className="font-medium text-white/50">Platform: {debugInfo.os}</p>
<p className="font-medium text-neutral-600 dark:text-neutral-400">
App version: {debugInfo.version}
</p>
<p className="font-medium text-neutral-600 dark:text-neutral-400">
Platform: {debugInfo.os}
</p>
</div>
</div>
<div className="flex flex-col gap-2">

View File

@@ -14,7 +14,9 @@ export function NotiMention({ event }: { event: NDKEvent }) {
<div className="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
<div className="flex items-center gap-2">
<NotiUser pubkey={event.pubkey} />
<p className="leading-none text-white/50">has mention you · {createdAt}</p>
<p className="leading-none text-neutral-600 dark:text-neutral-400">
has mention you · {createdAt}
</p>
</div>
<span className="hidden text-sm font-semibold text-blue-500 group-hover:block">
View

View File

@@ -14,7 +14,7 @@ export function NotiReaction({ event }: { event: NDKEvent }) {
<div className="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
<div className="flex items-center gap-2">
<NotiUser pubkey={event.pubkey} />
<p className="leading-none text-white/50">
<p className="leading-none text-neutral-600 dark:text-neutral-400">
reacted {event.content} · {createdAt}
</p>
</div>

View File

@@ -18,7 +18,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
<div className="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
<div className="flex items-center gap-2">
<NotiUser pubkey={event.pubkey} />
<p className="leading-none text-white/50">
<p className="leading-none text-neutral-600 dark:text-neutral-400">
repost{' '}
{event.pubkey !== db.account.pubkey ? 'a post that mention you' : 'your post'}{' '}
· {createdAt}

View File

@@ -53,7 +53,7 @@ export function NotificationScreen() {
}, []);
return (
<div className="scrollbar-none h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl">
<div className="h-full w-full overflow-y-auto bg-neutral-400 scrollbar-none dark:bg-neutral-600">
<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" />
@@ -62,13 +62,15 @@ export function NotificationScreen() {
<div className="flex h-full w-full items-center justify-center">
<div className="flex flex-col items-center gap-1.5">
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<p className="text-sm font-medium text-white/50">Loading</p>
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
Loading
</p>
</div>
</div>
) : activities.length <= 1 ? (
<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">
<p className="font-medium text-neutral-600 dark:text-neutral-400">
Yo!, no new activities around you in the last 24 hours
</p>
</div>

View File

@@ -78,7 +78,7 @@ export function NWCAlby() {
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<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 backdrop-blur-xl">
<div className="relative h-min w-full max-w-xl rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="h-min w-full shrink-0 rounded-t-xl 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">
@@ -86,7 +86,7 @@ export function NWCAlby() {
Alby integration (Beta)
</Dialog.Title>
<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" />
<CancelIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
</Dialog.Close>
</div>
</div>
@@ -107,12 +107,12 @@ export function NWCAlby() {
) : null}
</div>
<div className="flex flex-col gap-2">
<p className="text-sm text-white/50">
<p className="text-sm text-neutral-600 dark:text-neutral-400">
When you click &quot;Connect&quot;, a new window will open and you need
to click the &quot;Connect Wallet&quot; button to grant Lume permission
to integrate with your Alby account.
</p>
<p className="text-sm text-white/50">
<p className="text-sm text-neutral-600 dark:text-neutral-400">
All information will be encrypted and stored on the local machine.
</p>
</div>

View File

@@ -95,7 +95,7 @@ export function NWCOther() {
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" />
<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 backdrop-blur-xl">
<div className="relative h-min w-full max-w-xl rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="h-min w-full shrink-0 rounded-t-xl 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">
@@ -103,7 +103,7 @@ export function NWCOther() {
Nostr Wallet Connect
</Dialog.Title>
<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" />
<CancelIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
</Dialog.Close>
</div>
</div>
@@ -115,7 +115,7 @@ export function NWCOther() {
<div className="flex flex-col gap-1">
<label
htmlFor="uri"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
className="text-sm font-semibold uppercase tracking-wider text-neutral-600 dark:text-neutral-400"
>
Connect URI
</label>
@@ -126,7 +126,7 @@ export function NWCOther() {
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
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"
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
/>
<span className="text-sm text-red-400">
{errors.uri && <p>{errors.uri.message}</p>}
@@ -152,7 +152,7 @@ export function NWCOther() {
</>
)}
</button>
<span className="text-sm text-white/50">
<span className="text-sm text-neutral-600 dark:text-neutral-400">
All information will be encrypted and stored on the local machine.
</span>
</div>

View File

@@ -36,27 +36,36 @@ export function AccountSettingsScreen() {
<h1 className="text-xl font-semibold text-white">Account</h1>
<div className="flex flex-col gap-4 rounded-xl bg-white/10 p-3 backdrop-blur-xl">
<div className="flex flex-col gap-1">
<label htmlFor="pubkey" className="text-base font-semibold text-white/50">
<label
htmlFor="pubkey"
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
>
Public Key
</label>
<input
readOnly
value={db.account.pubkey}
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"
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-neutral-600 dark:text-neutral-400"
/>
</div>
<div className="flex flex-col gap-1">
<label htmlFor="npub" className="text-base font-semibold text-white/50">
<label
htmlFor="npub"
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
>
Npub
</label>
<input
readOnly
value={db.account.npub}
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"
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-neutral-600 dark:text-neutral-400"
/>
</div>
<div className="flex flex-col gap-1">
<label htmlFor="privkey" className="text-base font-semibold text-white/50">
<label
htmlFor="privkey"
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
>
Private Key
</label>
<div className="relative w-full">
@@ -64,7 +73,7 @@ export function AccountSettingsScreen() {
readOnly
type={privType}
value={privkey}
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"
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-neutral-600 dark:text-neutral-400"
/>
<button
type="button"
@@ -75,20 +84,23 @@ export function AccountSettingsScreen() {
<EyeOffIcon
width={20}
height={20}
className="text-white/50 group-hover:text-white"
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
/>
) : (
<EyeOnIcon
width={20}
height={20}
className="text-white/50 group-hover:text-white"
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
/>
)}
</button>
</div>
</div>
<div className="flex flex-col gap-1">
<label htmlFor="privkey" className="text-base font-semibold text-white/50">
<label
htmlFor="privkey"
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
>
Nsec
</label>
<div className="relative w-full">
@@ -96,7 +108,7 @@ export function AccountSettingsScreen() {
readOnly
type={nsecType}
value={nsec}
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"
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-neutral-600 dark:text-neutral-400"
/>
<button
type="button"
@@ -107,13 +119,13 @@ export function AccountSettingsScreen() {
<EyeOffIcon
width={20}
height={20}
className="text-white/50 group-hover:text-white"
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
/>
) : (
<EyeOnIcon
width={20}
height={20}
className="text-white/50 group-hover:text-white"
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
/>
)}
</button>

View File

@@ -3,7 +3,9 @@ export function AutoStartSetting() {
<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-neutral-200">Auto start</span>
<span className="text-sm leading-none text-white/50">Auto start at login</span>
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
Auto start at login
</span>
</div>
</div>
);

View File

@@ -15,7 +15,7 @@ export function CacheTimeSetting() {
<span className="font-medium leading-none text-neutral-200">
Cache time (milliseconds)
</span>
<span className="text-sm leading-none text-white/50">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
The length of time before inactive data gets removed from the cache
</span>
</div>

View File

@@ -16,7 +16,7 @@ export function DataPath() {
<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-neutral-200">App data path</span>
<span className="text-sm leading-none text-white/50">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
Where the local data is stored
</span>
</div>

View File

@@ -16,7 +16,7 @@ export function VersionSetting() {
<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-neutral-200">Version</span>
<span className="text-sm leading-none text-white/50">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
You&apos;re using latest version
</span>
</div>

View File

@@ -7,7 +7,7 @@ export function GeneralSettingsScreen() {
<div className="h-full w-full px-3 pt-11">
<div className="flex flex-col gap-2">
<h1 className="text-xl font-semibold text-white">General</h1>
<div className="w-full rounded-xl bg-white/10 backdrop-blur-xl">
<div className="w-full rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="flex h-full w-full flex-col divide-y divide-white/5">
<AutoStartSetting />
<DataPath />

View File

@@ -5,18 +5,24 @@ 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 backdrop-blur-xl">
<div className="w-full rounded-xl bg-neutral-400 dark:bg-neutral-600">
<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 backdrop-blur-xl">
<CommandIcon width={12} height={12} className="text-white/50" />
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div>
<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 className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
N
</span>
</div>
</div>
</div>
@@ -27,11 +33,17 @@ 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 backdrop-blur-xl">
<CommandIcon width={12} height={12} className="text-white/50" />
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div>
<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 className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
I
</span>
</div>
</div>
</div>
@@ -42,11 +54,17 @@ 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 backdrop-blur-xl">
<CommandIcon width={12} height={12} className="text-white/50" />
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div>
<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 className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
F
</span>
</div>
</div>
</div>
@@ -57,11 +75,17 @@ 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 backdrop-blur-xl">
<CommandIcon width={12} height={12} className="text-white/50" />
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div>
<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 className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
P
</span>
</div>
</div>
</div>
@@ -72,11 +96,17 @@ 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 backdrop-blur-xl">
<CommandIcon width={12} height={12} className="text-white/50" />
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div>
<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 className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
B
</span>
</div>
</div>
</div>

View File

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

View File

@@ -9,27 +9,27 @@ export function MentionItem({ pubkey, embed }: { pubkey: string; embed?: string
if (status === 'loading') {
return (
<div className="flex items-center gap-2.5 px-2">
<div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
<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 backdrop-blur-xl" />
<span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<span className="h-4 w-1/2 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
<span className="h-3 w-1/3 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
</div>
</div>
);
}
return (
<div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-white/10">
<div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-neutral-200 dark:bg-neutral-800">
<Image
src={user.picture || user.image}
alt={pubkey}
className="shirnk-0 h-8 w-8 rounded-md object-cover"
/>
<div className="flex flex-col items-start gap-px">
<h5 className="max-w-[10rem] truncate text-sm font-medium leading-none text-white">
<h5 className="max-w-[10rem] truncate text-sm font-medium leading-none text-neutral-900 dark:text-neutral-100">
{user.display_name || user.displayName || user.name}
</h5>
<span className="text-sm leading-none text-white/50">
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
{displayNpub(pubkey, 16)}
</span>
</div>

View File

@@ -24,7 +24,7 @@ export function MentionPopup({ editor }: { editor: Editor }) {
<MentionIcon className="h-5 w-5" />
</button>
</Popover.Trigger>
<Popover.Content className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg bg-white/10 backdrop-blur-xl focus:outline-none">
<Popover.Content className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg bg-neutral-400 focus:outline-none dark:bg-neutral-600">
<div className="flex flex-col gap-1 py-1">
{db.account.follows.map((item) => (
<button key={item} type="button" onClick={() => insertMention(item)}>

View File

@@ -14,9 +14,9 @@ export function SettingsLayout() {
to="/"
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
>
<ArrowLeftIcon className="h-4 w-4 text-white/50" />
<ArrowLeftIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
</Link>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
<h3 className="text-[11px] font-bold uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
Settings
</h3>
</div>
@@ -32,7 +32,7 @@ export function SettingsLayout() {
)
}
>
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<SettingsIcon className="h-4 w-4 text-white" />
</span>
<span className="font-medium">General</span>
@@ -48,7 +48,7 @@ export function SettingsLayout() {
)
}
>
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<SecureIcon className="h-4 w-4 text-white" />
</span>
<span className="font-medium">Backup</span>

View File

@@ -28,12 +28,12 @@ export function Logout() {
<AlertDialog.Portal>
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<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-md rounded-xl bg-white/10 backdrop-blur-xl">
<div className="relative h-min w-full max-w-md rounded-xl bg-neutral-400 dark:bg-neutral-600">
<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">
Are you sure!
</AlertDialog.Title>
<AlertDialog.Description className="text-sm leading-tight text-white/50">
<AlertDialog.Description className="text-sm leading-tight text-neutral-600 dark:text-neutral-400">
You can always log back in at any time. If you just want to switch
accounts, you can do that by adding an existing account.
</AlertDialog.Description>

View File

@@ -21,7 +21,7 @@ export function Navigation() {
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
: 'text-black/50 dark:text-neutral-400 dark:text-neutral-600'
)}
>
<HomeIcon className="h-6 w-6" />
@@ -42,7 +42,7 @@ export function Navigation() {
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
: 'text-black/50 dark:text-neutral-400 dark:text-neutral-600'
)}
>
<ChatsIcon className="h-6 w-6" />
@@ -63,7 +63,7 @@ export function Navigation() {
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
: 'text-black/50 dark:text-neutral-400 dark:text-neutral-600'
)}
>
<RelayIcon className="h-6 w-6" />
@@ -84,7 +84,7 @@ export function Navigation() {
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
: 'text-black/50 dark:text-neutral-400 dark:text-neutral-600'
)}
>
<ExploreIcon className="h-6 w-6" />

View File

@@ -1,10 +1,8 @@
import * as Tooltip from '@radix-ui/react-tooltip';
import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { FocusIcon, ThreadIcon } from '@shared/icons';
import { MoreActions } from '@shared/notes/actions/more';
import { FocusIcon } from '@shared/icons';
import { NoteReaction } from '@shared/notes/actions/reaction';
import { NoteReply } from '@shared/notes/actions/reply';
import { NoteRepost } from '@shared/notes/actions/repost';
@@ -50,7 +48,7 @@ export function NoteActions({
}
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
>
<ThreadIcon className="h-5 w-5 group-hover:text-blue-500" />
<FocusIcon className="h-5 w-5 group-hover:text-blue-500" />
</button>
</Tooltip.Trigger>
<Tooltip.Portal>

View File

@@ -25,8 +25,8 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
return (
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Trigger asChild>
<button type="button" className="inline-flex h-7 w-7 items-center justify-center">
<HorizontalDotsIcon className="h-5 w-5 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
<button type="button" className="inline-flex h-6 w-6 items-center justify-center">
<HorizontalDotsIcon className="h-4 w-4 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>

View File

@@ -65,12 +65,12 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<AlertDialog.Portal>
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
<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-md rounded-xl bg-white/10 backdrop-blur-xl">
<div className="relative h-min w-full max-w-md rounded-xl bg-neutral-400 dark:bg-neutral-600">
<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?
</AlertDialog.Title>
<AlertDialog.Description className="text-sm leading-tight text-white/50">
<AlertDialog.Description className="text-sm leading-tight text-neutral-600 dark:text-neutral-400">
Reposted post will be visible to your followers, and you cannot undo this
action.
</AlertDialog.Description>

View File

@@ -107,14 +107,14 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black" />
<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 backdrop-blur-xl">
<div className="relative h-min w-full max-w-xl rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="inline-flex w-full shrink-0 items-center justify-between px-5 py-3">
<div className="w-6" />
<Dialog.Title className="text-center text-sm font-semibold leading-none text-white">
Send tip to {user?.name || user?.display_name || user?.displayName}
</Dialog.Title>
<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" />
<CancelIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
</Dialog.Close>
</div>
<div className="overflow-y-auto overflow-x-hidden px-5 pb-5">
@@ -131,9 +131,9 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
max={10000} // 1M sats
maxLength={10000} // 1M sats
onValueChange={(value) => setAmount(value)}
className="w-full flex-1 bg-transparent text-right text-4xl font-semibold text-white placeholder:text-white/50 focus:outline-none"
className="w-full flex-1 bg-transparent text-right text-4xl font-semibold text-white placeholder:text-neutral-600 focus:outline-none dark:text-neutral-400"
/>
<span className="w-full flex-1 text-left text-4xl font-semibold text-white/50">
<span className="w-full flex-1 text-left text-4xl font-semibold text-neutral-600 dark:text-neutral-400">
sats
</span>
</div>
@@ -185,7 +185,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
autoCorrect="off"
autoCapitalize="off"
placeholder="Enter message (optional)"
className="relative min-h-[56px] w-full resize-none rounded-lg bg-white/10 px-3 py-2 !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative min-h-[56px] w-full resize-none rounded-lg bg-white/10 px-3 py-2 !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
/>
<div className="flex flex-col gap-2">
{walletConnectURL ? (
@@ -199,14 +199,14 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
) : isLoading ? (
<span className="flex flex-col">
<p className="mb-px leading-none">Waiting for approval</p>
<p className="text-xs leading-none text-white/70">
<p className="text-xs leading-none text-neutral-600 dark:text-neutral-400">
Go to your wallet and approve payment request
</p>
</span>
) : (
<span className="flex flex-col">
<p className="mb-px leading-none">Send tip</p>
<p className="text-xs leading-none text-white/70">
<p className="text-xs leading-none text-neutral-600 dark:text-neutral-400">
You&apos;re using nostr wallet connect
</p>
</span>
@@ -233,7 +233,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<h3 className="text-lg font-medium leading-none text-white">
Scan to pay
</h3>
<span className="text-center text-sm text-white/50">
<span className="text-center text-sm text-neutral-600 dark:text-neutral-400">
You must use Bitcoin wallet which support Lightning
<br />
such as: Blue Wallet, Bitkit, Phoenix,...

View File

@@ -36,7 +36,7 @@ export function FileNote(props: { event?: NDKEvent }) {
if (type === 'video') {
return (
<div className="mb-2 mt-3">
<MediaController key={url} className="aspect-video">
<MediaController key={url} className="aspect-video overflow-hidden rounded-lg">
<video
slot="media"
src={url}

View File

@@ -100,12 +100,12 @@ export function NoteMetadata({ id }: { id: string }) {
content: id,
})
}
className="text-white/50"
className="text-neutral-600 dark:text-neutral-400"
>
<span className="font-semibold text-white">{data.replies}</span> replies
</button>
<span className="text-white/50">·</span>
<p className="text-white/50">
<span className="text-neutral-600 dark:text-neutral-400">·</span>
<p className="text-neutral-600 dark:text-neutral-400">
<span className="font-semibold text-white">
{compactNumber.format(data.zap)}
</span>{' '}

View File

@@ -10,11 +10,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
<div className="my-2">
{status === 'loading' ? (
<div className="flex flex-col bg-neutral-200 dark:bg-neutral-800">
<div className="h-44 w-full animate-pulse bg-white/10 backdrop-blur-xl" />
<div className="h-44 w-full animate-pulse bg-neutral-400 dark:bg-neutral-600" />
<div className="flex flex-col gap-2 px-3 py-3">
<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">
<div className="h-3 w-2/3 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-3/4 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
<span className="mt-2.5 text-sm leading-none text-neutral-600 dark:text-neutral-400">
{domain.hostname}
</span>
</div>
@@ -24,11 +24,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
to={urls[0]}
target="_blank"
rel="noreferrer"
className="flex flex-col rounded-lg bg-neutral-200 dark:bg-neutral-800"
className="flex flex-col rounded-lg border border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
>
{error ? (
<div className="flex flex-col gap-2 px-3 py-3">
<p className="text-sm text-white/50">
<p className="text-sm text-neutral-600 dark:text-neutral-400">
Can&apos;t fetch open graph, click to open webpage
</p>
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100">

View File

@@ -1,4 +1,4 @@
import { NoteActions, SubReply, TextNote } from '@shared/notes';
import { MemoizedTextNote, NoteActions, SubReply } from '@shared/notes';
import { User } from '@shared/user';
import { NDKEventWithReplies } from '@utils/types';
@@ -6,16 +6,13 @@ import { NDKEventWithReplies } from '@utils/types';
export function Reply({ event, root }: { event: NDKEventWithReplies; root?: string }) {
return (
<div className="relative h-min w-full">
{event?.replies?.length > 0 && (
<div className="absolute -left-3 top-0 h-[calc(100%-1.2rem)] w-px bg-gradient-to-t from-blue-200 via-red-200 to-orange-300" />
)}
<div className="relative z-10">
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 flex items-start gap-3">
<User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="flex-1">
<TextNote content={event.content} />
<MemoizedTextNote content={event.content} />
<NoteActions
id={event.id}
pubkey={event.pubkey}

View File

@@ -37,10 +37,8 @@ export function RepliesList({ id }: { id: string }) {
if (!data) {
return (
<div className="mt-5 pb-10">
<div className="flex flex-col">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<NoteSkeleton />
</div>
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />
</div>
</div>
);
@@ -48,15 +46,17 @@ export function RepliesList({ id }: { id: string }) {
return (
<div className="mt-5 pb-10">
<h5 className="mb-2 text-lg font-semibold text-white">
<h5 className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{data?.length || 0} replies
</h5>
<div className="flex flex-col gap-5">
<div className="flex flex-col gap-2">
{data?.length === 0 ? (
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10 backdrop-blur-xl">
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-neutral-400 dark:bg-neutral-600">
<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>
<p className="leading-none text-neutral-600 dark:text-neutral-400">
Share your thought on it...
</p>
</div>
</div>
) : (

View File

@@ -1,16 +1,16 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { NoteActions, TextNote } from '@shared/notes';
import { MemoizedTextNote, NoteActions } from '@shared/notes';
import { User } from '@shared/user';
export function SubReply({ event }: { event: NDKEvent }) {
return (
<div className="relative z-10 mb-3 mt-5 flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 flex items-start gap-3">
<User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="flex-1">
<TextNote content={event.content} />
<MemoizedTextNote content={event.content} />
<NoteActions id={event.id} pubkey={event.pubkey} extraButtons={false} />
</div>
</div>

View File

@@ -2,15 +2,15 @@ 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 backdrop-blur-xl" />
<div className="h-3 w-20 rounded bg-white/10 backdrop-blur-xl" />
<div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-20 rounded bg-neutral-400 dark:bg-neutral-600" />
</div>
<div className="-mt-5 flex animate-pulse gap-3">
<div className="w-10 shrink-0" />
<div className="flex flex-col gap-1">
<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 className="h-3 w-full rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-2/3 rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-1/2 rounded bg-neutral-400 dark:bg-neutral-600" />
</div>
</div>
</div>

View File

@@ -46,23 +46,23 @@ export const User = memo(function User({
if (status === 'loading') {
if (variant === 'avatar') {
return (
<div className="h-12 w-12 animate-pulse overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
<div className="h-12 w-12 animate-pulse overflow-hidden rounded-lg bg-neutral-400 dark:bg-neutral-600" />
);
}
if (variant === 'mention') {
return (
<div className="relative flex items-center gap-3">
<div className="relative z-10 h-6 w-6 shrink-0 animate-pulse overflow-hidden rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="relative z-10 h-6 w-6 shrink-0 animate-pulse overflow-hidden rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3.5 w-36 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
</div>
);
}
return (
<div className="flex items-start gap-3">
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-white/10 backdrop-blur-xl" />
<div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-400 dark:bg-neutral-600" />
<div className="h-6 w-36 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
</div>
);
}
@@ -327,7 +327,7 @@ export const User = memo(function User({
<HoverCard.Root>
<div className="relative z-10 flex items-start gap-3">
<HoverCard.Trigger asChild>
<Avatar.Root className="relative top-1 shrink-0">
<Avatar.Root className="relative top-1 h-10 w-10 shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
alt={pubkey}
@@ -345,7 +345,7 @@ export const User = memo(function User({
</Avatar.Fallback>
</Avatar.Root>
</HoverCard.Trigger>
<div className="flex flex-1 items-start gap-2">
<div className="flex h-6 flex-1 items-start gap-2">
<div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
{user?.name ||
user?.display_name ||

View File

@@ -62,7 +62,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => unfollowUser(pubkey)}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Unfollow
</button>
@@ -70,38 +70,38 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button
type="button"
onClick={() => followUser(pubkey)}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Follow
</button>
)}
<Link
to={`/chats/${pubkey}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
>
Message
</Link>
</div>
</div>
<div className="mt-2 flex flex-1 flex-col gap-2">
<div className="flex flex-col gap-2">
<h5 className="text-lg font-semibold leading-none">
<div className="mt-2 flex flex-1 flex-col">
<div className="flex flex-col">
<h5 className="text-lg font-semibold">
{user?.name || user?.display_name || user?.displayName || 'Anon'}
</h5>
{user?.nip05 ? (
<NIP05
pubkey={pubkey}
nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm leading-none text-white/50"
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
/>
) : (
<span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
{displayNpub(pubkey, 16)}
</span>
)}
</div>
<div className="flex flex-col gap-4">
<p className="mb-3 mt-2 max-w-[500px] select-text break-words text-sm text-white">
<div className="flex flex-col gap-3">
<p className="mb-3 mt-2 max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about}
</p>
<UserStats pubkey={pubkey} />

View File

@@ -69,7 +69,6 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
<NoteReplyForm id={params.content} pubkey={db.account.pubkey} />
<RepliesList id={params.content} />
</div>
<div className="h-16" />
</div>
</WidgetWrapper>
);