nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-10-02 09:50:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

polish

Browse Source
This commit is contained in:
reya 2023-10-19 08:59:50 +07:00
parent 823fb0f239
commit 0de72eb009
39 changed files with 1882 additions and 4272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@ -88,11 +88,11 @@
"devDependencies": { "devDependencies": {
"@tailwindcss/typography": "^0.5.10", "@tailwindcss/typography": "^0.5.10",
"@trivago/prettier-plugin-sort-imports": "^4.2.0", "@trivago/prettier-plugin-sort-imports": "^4.2.0",
"@types/html-to-text": "^9.0.2", "@types/html-to-text": "^9.0.3",
"@types/node": "^20.8.6", "@types/node": "^20.8.7",
"@types/react": "^18.2.28", "@types/react": "^18.2.29",
"@types/react-dom": "^18.2.13", "@types/react-dom": "^18.2.14",
"@types/youtube-player": "^5.5.8", "@types/youtube-player": "^5.5.9",
"@typescript-eslint/eslint-plugin": "^6.8.0", "@typescript-eslint/eslint-plugin": "^6.8.0",
"@typescript-eslint/parser": "^6.8.0", "@typescript-eslint/parser": "^6.8.0",
"@vitejs/plugin-react-swc": "^3.4.0", "@vitejs/plugin-react-swc": "^3.4.0",
@ -115,7 +115,7 @@
"tailwind-merge": "^1.14.0", "tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^4.4.11", "vite": "^4.5.0",
"vite-tsconfig-paths": "^4.2.1" "vite-tsconfig-paths": "^4.2.1"
} }
} }

5654
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

123
src-tauri/Cargo.lock generated
View File

@ -294,9 +294,9 @@ dependencies = [
[[package]] [[package]]
name = "async-task" name = "async-task"
version = "4.4.1" version = "4.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b9441c6b2fe128a7c2bf680a44c34d0df31ce09e5b7e401fcca3faa483dbc921" checksum = "b4eb2cdb97421e01129ccb49169d8279ed21e829929144f4a22a6e54ac549ca1"
[[package]] [[package]]
name = "async-trait" name = "async-trait"
@ -2088,16 +2088,16 @@ dependencies = [
[[package]] [[package]]
name = "iana-time-zone" name = "iana-time-zone"
version = "0.1.57" version = "0.1.58"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2fad5b825842d2b38bd206f3e81d6957625fd7f0a361e345c30e01a0ae2dd613" checksum = "8326b86b6cff230b97d0d312a6c40a60726df3332e721f72a1b035f451663b20"
dependencies = [ dependencies = [
"android_system_properties", "android_system_properties",
"core-foundation-sys", "core-foundation-sys",
"iana-time-zone-haiku", "iana-time-zone-haiku",
"js-sys", "js-sys",
"wasm-bindgen", "wasm-bindgen",
"windows 0.48.0", "windows-core",
] ]
[[package]] [[package]]
@ -2486,9 +2486,9 @@ checksum = "da2479e8c062e40bf0066ffa0bc823de0a9368974af99c9f6df941d2c231e03f"
[[package]] [[package]]
name = "lock_api" name = "lock_api"
version = "0.4.10" version = "0.4.11"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c1cc9717a20b1bb222f333e6a92fd32f7d8a18ddc5a3191a11af45dcbf4dcd16" checksum = "3c168f8615b12bc01f9c17e2eb0cc07dcae1940121185446edc3744920e8ef45"
dependencies = [ dependencies = [
"autocfg", "autocfg",
"scopeguard", "scopeguard",
@ -3168,9 +3168,9 @@ dependencies = [
[[package]] [[package]]
name = "parking" name = "parking"
version = "2.1.1" version = "2.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e52c774a4c39359c1d1c52e43f73dd91a75a614652c825408eec30c95a9b2067" checksum = "bb813b8af86854136c6922af0598d719255ecb2179515e6e7730d468f05c9cae"
[[package]] [[package]]
name = "parking_lot" name = "parking_lot"
@ -3184,13 +3184,13 @@ dependencies = [
[[package]] [[package]]
name = "parking_lot_core" name = "parking_lot_core"
version = "0.9.8" version = "0.9.9"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "93f00c865fe7cabf650081affecd3871070f26767e7b2070a3ffae14c654b447" checksum = "4c42a9226546d68acdd9c0a280d17ce19bfe27a46bf68784e4066115788d008e"
dependencies = [ dependencies = [
"cfg-if", "cfg-if",
"libc", "libc",
"redox_syscall 0.3.5", "redox_syscall 0.4.1",
"smallvec", "smallvec",
"windows-targets 0.48.5", "windows-targets 0.48.5",
] ]
@ -3524,18 +3524,18 @@ dependencies = [
[[package]] [[package]]
name = "quick-xml" name = "quick-xml"
version = "0.23.1" version = "0.29.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "11bafc859c6815fbaffbbbf4229ecb767ac913fecb27f9ad4343662e9ef099ea" checksum = "81b9228215d82c7b61490fec1de287136b5de6f5700f6e58ea9ad61a7964ca51"
dependencies = [ dependencies = [
"memchr", "memchr",
] ]
[[package]] [[package]]
name = "quick-xml" name = "quick-xml"
version = "0.29.0" version = "0.30.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "81b9228215d82c7b61490fec1de287136b5de6f5700f6e58ea9ad61a7964ca51" checksum = "eff6510e86862b57b210fd8cbe8ed3f0d7d600b9c2863cd4549a2e033c66e956"
dependencies = [ dependencies = [
"memchr", "memchr",
] ]
@ -3675,6 +3675,15 @@ dependencies = [
"bitflags 1.3.2", "bitflags 1.3.2",
] ]
[[package]]
name = "redox_syscall"
version = "0.4.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4722d768eff46b75989dd134e5c353f0d6296e5aaa3132e776cbdb56be7731aa"
dependencies = [
"bitflags 1.3.2",
]
[[package]] [[package]]
name = "redox_users" name = "redox_users"
version = "0.4.3" version = "0.4.3"
@ -4122,9 +4131,9 @@ dependencies = [
[[package]] [[package]]
name = "serde_with" name = "serde_with"
version = "3.3.0" version = "3.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1ca3b16a3d82c4088f343b7480a93550b3eabe1a358569c2dfe38bbcead07237" checksum = "64cd236ccc1b7a29e7e2739f27c0b2dd199804abc4290e32f59f3b68d6405c23"
dependencies = [ dependencies = [
"base64", "base64",
"chrono", "chrono",
@ -4139,9 +4148,9 @@ dependencies = [
[[package]] [[package]]
name = "serde_with_macros" name = "serde_with_macros"
version = "3.3.0" version = "3.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2e6be15c453eb305019bfa438b1593c731f36a289a7853f7707ee29e870b3b3c" checksum = "93634eb5f75a2323b16de4748022ac4297f9e76b6dced2be287a099f41b5e788"
dependencies = [ dependencies = [
"darling", "darling",
"proc-macro2", "proc-macro2",
@ -5248,12 +5257,12 @@ dependencies = [
[[package]] [[package]]
name = "tauri-winrt-notification" name = "tauri-winrt-notification"
version = "0.1.2" version = "0.1.3"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4f5bff1d532fead7c43324a0fa33643b8621a47ce2944a633be4cb6c0240898f" checksum = "006851c9ccefa3c38a7646b8cec804bb429def3da10497bfa977179869c3e8e2"
dependencies = [ dependencies = [
"quick-xml 0.23.1", "quick-xml 0.30.0",
"windows 0.39.0", "windows 0.51.1",
] ]
[[package]] [[package]]
@ -5682,9 +5691,9 @@ checksum = "711b9620af191e0cdc7468a8d14e709c3dcdb115b36f838e601583af800a370a"
[[package]] [[package]]
name = "uuid" name = "uuid"
version = "1.4.1" version = "1.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "79daa5ed5740825c40b389c5e50312b9c86df53fccd33f281df655642b43869d" checksum = "88ad59a7560b41a70d191093a945f0b87bc1deeda46fb237479708a1d6b6cdfc"
dependencies = [ dependencies = [
"getrandom 0.2.10", "getrandom 0.2.10",
] ]
@ -6016,19 +6025,6 @@ version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f" checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
[[package]]
name = "windows"
version = "0.39.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f1c4bd0a50ac6020f65184721f758dba47bb9fbc2133df715ec74a237b26794a"
dependencies = [
"windows_aarch64_msvc 0.39.0",
"windows_i686_gnu 0.39.0",
"windows_i686_msvc 0.39.0",
"windows_x86_64_gnu 0.39.0",
"windows_x86_64_msvc 0.39.0",
]
[[package]] [[package]]
name = "windows" name = "windows"
version = "0.44.0" version = "0.44.0"
@ -6049,6 +6045,16 @@ dependencies = [
"windows-targets 0.48.5", "windows-targets 0.48.5",
] ]
[[package]]
name = "windows"
version = "0.51.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ca229916c5ee38c2f2bc1e9d8f04df975b4bd93f9955dc69fabb5d91270045c9"
dependencies = [
"windows-core",
"windows-targets 0.48.5",
]
[[package]] [[package]]
name = "windows-bindgen" name = "windows-bindgen"
version = "0.48.0" version = "0.48.0"
@ -6059,6 +6065,15 @@ dependencies = [
"windows-tokens", "windows-tokens",
] ]
[[package]]
name = "windows-core"
version = "0.51.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f1f8cf84f35d2db49a46868f947758c7a1138116f7fac3bc844f43ade1292e64"
dependencies = [
"windows-targets 0.48.5",
]
[[package]] [[package]]
name = "windows-implement" name = "windows-implement"
version = "0.48.0" version = "0.48.0"
@ -6153,12 +6168,6 @@ version = "0.48.5"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8" checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8"
[[package]]
name = "windows_aarch64_msvc"
version = "0.39.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ec7711666096bd4096ffa835238905bb33fb87267910e154b18b44eaabb340f2"
[[package]] [[package]]
name = "windows_aarch64_msvc" name = "windows_aarch64_msvc"
version = "0.42.2" version = "0.42.2"
@ -6171,12 +6180,6 @@ version = "0.48.5"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc" checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc"
[[package]]
name = "windows_i686_gnu"
version = "0.39.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "763fc57100a5f7042e3057e7e8d9bdd7860d330070251a73d003563a3bb49e1b"
[[package]] [[package]]
name = "windows_i686_gnu" name = "windows_i686_gnu"
version = "0.42.2" version = "0.42.2"
@ -6189,12 +6192,6 @@ version = "0.48.5"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e" checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e"
[[package]]
name = "windows_i686_msvc"
version = "0.39.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7bc7cbfe58828921e10a9f446fcaaf649204dcfe6c1ddd712c5eebae6bda1106"
[[package]] [[package]]
name = "windows_i686_msvc" name = "windows_i686_msvc"
version = "0.42.2" version = "0.42.2"
@ -6207,12 +6204,6 @@ version = "0.48.5"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406" checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406"
[[package]]
name = "windows_x86_64_gnu"
version = "0.39.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6868c165637d653ae1e8dc4d82c25d4f97dd6605eaa8d784b5c6e0ab2a252b65"
[[package]] [[package]]
name = "windows_x86_64_gnu" name = "windows_x86_64_gnu"
version = "0.42.2" version = "0.42.2"
@ -6237,12 +6228,6 @@ version = "0.48.5"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc" checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc"
[[package]]
name = "windows_x86_64_msvc"
version = "0.39.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5e4d40883ae9cae962787ca76ba76390ffa29214667a111db9e0a1ad8377e809"
[[package]] [[package]]
name = "windows_x86_64_msvc" name = "windows_x86_64_msvc"
version = "0.42.2" version = "0.42.2"

27
src/app/auth/onboarding/list.tsx
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 { AllowNotification } from '@app/auth/components/features/allowNotification';
import { Circle } from '@app/auth/components/features/enableCircle'; 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 { FollowList } from '@app/auth/components/features/followList';
import { SuggestFollow } from '@app/auth/components/features/suggestFollow'; import { SuggestFollow } from '@app/auth/components/features/suggestFollow';
import { LoaderIcon } from '@shared/icons';
export function OnboardingListScreen() { export function OnboardingListScreen() {
const navigate = useNavigate();
const { state } = useLocation(); const { state } = useLocation();
const { newuser }: { newuser: boolean } = state; const { newuser }: { newuser: boolean } = state;
const [loading, setLoading] = useState(false);
const completed = () => {
setLoading(true);
const timeout = setTimeout(() => setLoading(false), 1200);
clearTimeout(timeout);
navigate('/');
};
return ( return (
<div className="relative flex h-full w-full items-center justify-center"> <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"> <div className="mx-auto flex w-full max-w-md flex-col gap-10">
@ -28,12 +44,13 @@ export function OnboardingListScreen() {
<Circle /> <Circle />
<OutboxModel /> <OutboxModel />
<AllowNotification /> <AllowNotification />
<Link <button
to="/" 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" 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 {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : ' Continue'}
</Link> </button>
</div> </div>
</div> </div>
</div> </div>

6
src/app/chats/components/chatListItem.tsx
View File

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

10
src/app/error.tsx
View File

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

4
src/app/notifications/components/mention.tsx
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="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<NotiUser pubkey={event.pubkey} /> <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> </div>
<span className="hidden text-sm font-semibold text-blue-500 group-hover:block"> <span className="hidden text-sm font-semibold text-blue-500 group-hover:block">
View View

2
src/app/notifications/components/reaction.tsx
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="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<NotiUser pubkey={event.pubkey} /> <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} reacted {event.content} · {createdAt}
</p> </p>
</div> </div>

2
src/app/notifications/components/repost.tsx
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="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<NotiUser pubkey={event.pubkey} /> <NotiUser pubkey={event.pubkey} />
<p className="leading-none text-white/50"> <p className="leading-none text-neutral-600 dark:text-neutral-400">
repost{' '} repost{' '}
{event.pubkey !== db.account.pubkey ? 'a post that mention you' : 'your post'}{' '} {event.pubkey !== db.account.pubkey ? 'a post that mention you' : 'your post'}{' '}
· {createdAt} · {createdAt}

8
src/app/notifications/index.tsx
View File

@ -53,7 +53,7 @@ export function NotificationScreen() {
}, []); }, []);
return ( 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="grid h-full grid-cols-3">
<div className="col-span-2 flex flex-col border-r border-white/5"> <div className="col-span-2 flex flex-col border-r border-white/5">
<TitleBar title="Activities in the last 24 hours" /> <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 h-full w-full items-center justify-center">
<div className="flex flex-col items-center gap-1.5"> <div className="flex flex-col items-center gap-1.5">
<LoaderIcon className="h-5 w-5 animate-spin text-white" /> <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>
</div> </div>
) : activities.length <= 1 ? ( ) : activities.length <= 1 ? (
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="flex h-full w-full flex-col items-center justify-center">
<p className="mb-1 text-4xl">🎉</p> <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 Yo!, no new activities around you in the last 24 hours
</p> </p>
</div> </div>

8
src/app/nwc/components/alby.tsx
View File

@ -78,7 +78,7 @@ export function NWCAlby() {
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" /> <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"> <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="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 flex-col gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -86,7 +86,7 @@ export function NWCAlby() {
Alby integration (Beta) Alby integration (Beta)
</Dialog.Title> </Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl 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" /> <CancelIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
</Dialog.Close> </Dialog.Close>
</div> </div>
</div> </div>
@ -107,12 +107,12 @@ export function NWCAlby() {
) : null} ) : null}
</div> </div>
<div className="flex flex-col gap-2"> <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 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 click the &quot;Connect Wallet&quot; button to grant Lume permission
to integrate with your Alby account. to integrate with your Alby account.
</p> </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. All information will be encrypted and stored on the local machine.
</p> </p>
</div> </div>

10
src/app/nwc/components/other.tsx
View File

@ -95,7 +95,7 @@ export function NWCOther() {
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" /> <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"> <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="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 flex-col gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -103,7 +103,7 @@ export function NWCOther() {
Nostr Wallet Connect Nostr Wallet Connect
</Dialog.Title> </Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl 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" /> <CancelIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
</Dialog.Close> </Dialog.Close>
</div> </div>
</div> </div>
@ -115,7 +115,7 @@ export function NWCOther() {
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="uri" 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 Connect URI
</label> </label>
@ -126,7 +126,7 @@ export function NWCOther() {
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
autoCapitalize="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"> <span className="text-sm text-red-400">
{errors.uri && <p>{errors.uri.message}</p>} {errors.uri && <p>{errors.uri.message}</p>}
@ -152,7 +152,7 @@ export function NWCOther() {
</> </>
)} )}
</button> </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. All information will be encrypted and stored on the local machine.
</span> </span>
</div> </div>

36
src/app/settings/account.tsx
View File

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

4
src/app/settings/components/autoStart.tsx
View File

@ -3,7 +3,9 @@ export function AutoStartSetting() {
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-medium leading-none text-neutral-200">Auto start</span> <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>
</div> </div>
); );

2
src/app/settings/components/cacheTime.tsx
View File

@ -15,7 +15,7 @@ export function CacheTimeSetting() {
<span className="font-medium leading-none text-neutral-200"> <span className="font-medium leading-none text-neutral-200">
Cache time (milliseconds) Cache time (milliseconds)
</span> </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 The length of time before inactive data gets removed from the cache
</span> </span>
</div> </div>

2
src/app/settings/components/dataPath.tsx
View File

@ -16,7 +16,7 @@ export function DataPath() {
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-medium leading-none text-neutral-200">App data path</span> <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 Where the local data is stored
</span> </span>
</div> </div>

2
src/app/settings/components/version.tsx
View File

@ -16,7 +16,7 @@ export function VersionSetting() {
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-medium leading-none text-neutral-200">Version</span> <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 You&apos;re using latest version
</span> </span>
</div> </div>

2
src/app/settings/general.tsx
View File

@ -7,7 +7,7 @@ export function GeneralSettingsScreen() {
<div className="h-full w-full px-3 pt-11"> <div className="h-full w-full px-3 pt-11">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h1 className="text-xl font-semibold text-white">General</h1> <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"> <div className="flex h-full w-full flex-col divide-y divide-white/5">
<AutoStartSetting /> <AutoStartSetting />
<DataPath /> <DataPath />

72
src/app/settings/shortcuts.tsx
View File

@ -5,18 +5,24 @@ export function ShortcutsSettingsScreen() {
<div className="h-full w-full px-3 pt-12"> <div className="h-full w-full px-3 pt-12">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h1 className="text-lg font-semibold text-white">Shortcuts</h1> <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="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="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-medium leading-none text-white">Open composer</span> <span className="font-medium leading-none text-white">Open composer</span>
</div> </div>
<div className="flex items-center gap-2"> <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"> <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-white/50" /> <CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div> </div>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl"> <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-white/50">N</span> <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
N
</span>
</div> </div>
</div> </div>
</div> </div>
@ -27,11 +33,17 @@ export function ShortcutsSettingsScreen() {
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <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"> <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-white/50" /> <CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div> </div>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl"> <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-white/50">I</span> <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
I
</span>
</div> </div>
</div> </div>
</div> </div>
@ -42,11 +54,17 @@ export function ShortcutsSettingsScreen() {
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <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"> <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-white/50" /> <CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div> </div>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl"> <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-white/50">F</span> <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
F
</span>
</div> </div>
</div> </div>
</div> </div>
@ -57,11 +75,17 @@ export function ShortcutsSettingsScreen() {
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <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"> <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-white/50" /> <CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div> </div>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl"> <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-white/50">P</span> <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
P
</span>
</div> </div>
</div> </div>
</div> </div>
@ -72,11 +96,17 @@ export function ShortcutsSettingsScreen() {
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <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"> <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-white/50" /> <CommandIcon
width={12}
height={12}
className="text-neutral-600 dark:text-neutral-400"
/>
</div> </div>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl"> <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-white/50">B</span> <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
B
</span>
</div> </div>
</div> </div>
</div> </div>

4
src/shared/button.tsx
View File

@ -16,7 +16,7 @@ export function Button({
switch (preset) { switch (preset) {
case 'small': case 'small':
preClass = 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; break;
case 'publish': case 'publish':
preClass = preClass =
@ -28,7 +28,7 @@ export function Button({
break; break;
case 'large-alt': case 'large-alt':
preClass = 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; break;
default: default:
break; break;

12
src/shared/composer/mention/item.tsx
View File

@ -9,27 +9,27 @@ export function MentionItem({ pubkey, embed }: { pubkey: string; embed?: string
if (status === 'loading') { if (status === 'loading') {
return ( return (
<div className="flex items-center gap-2.5 px-2"> <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"> <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-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-white/10 backdrop-blur-xl" /> <span className="h-3 w-1/3 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
</div> </div>
</div> </div>
); );
} }
return ( 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 <Image
src={user.picture || user.image} src={user.picture || user.image}
alt={pubkey} alt={pubkey}
className="shirnk-0 h-8 w-8 rounded-md object-cover" className="shirnk-0 h-8 w-8 rounded-md object-cover"
/> />
<div className="flex flex-col items-start gap-px"> <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} {user.display_name || user.displayName || user.name}
</h5> </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)} {displayNpub(pubkey, 16)}
</span> </span>
</div> </div>

2
src/shared/composer/mention/popup.tsx
View File

@ -24,7 +24,7 @@ export function MentionPopup({ editor }: { editor: Editor }) {
<MentionIcon className="h-5 w-5" /> <MentionIcon className="h-5 w-5" />
</button> </button>
</Popover.Trigger> </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"> <div className="flex flex-col gap-1 py-1">
{db.account.follows.map((item) => ( {db.account.follows.map((item) => (
<button key={item} type="button" onClick={() => insertMention(item)}> <button key={item} type="button" onClick={() => insertMention(item)}>

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

@ -14,9 +14,9 @@ export function SettingsLayout() {
to="/" to="/"
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 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> </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 Settings
</h3> </h3>
</div> </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" /> <SettingsIcon className="h-4 w-4 text-white" />
</span> </span>
<span className="font-medium">General</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" /> <SecureIcon className="h-4 w-4 text-white" />
</span> </span>
<span className="font-medium">Backup</span> <span className="font-medium">Backup</span>

4
src/shared/logout.tsx
View File

@ -28,12 +28,12 @@ export function Logout() {
<AlertDialog.Portal> <AlertDialog.Portal>
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" /> <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"> <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"> <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"> <AlertDialog.Title className="text-lg font-semibold leading-none text-white">
Are you sure! Are you sure!
</AlertDialog.Title> </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 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. accounts, you can do that by adding an existing account.
</AlertDialog.Description> </AlertDialog.Description>

8
src/shared/navigation.tsx
View File

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

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

@ -1,10 +1,8 @@
import * as Tooltip from '@radix-ui/react-tooltip'; import * as Tooltip from '@radix-ui/react-tooltip';
import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider'; import { useStorage } from '@libs/storage/provider';
import { FocusIcon, ThreadIcon } from '@shared/icons'; import { FocusIcon } from '@shared/icons';
import { MoreActions } from '@shared/notes/actions/more';
import { NoteReaction } from '@shared/notes/actions/reaction'; import { NoteReaction } from '@shared/notes/actions/reaction';
import { NoteReply } from '@shared/notes/actions/reply'; import { NoteReply } from '@shared/notes/actions/reply';
import { NoteRepost } from '@shared/notes/actions/repost'; 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" 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> </button>
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Portal> <Tooltip.Portal>

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

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

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

@ -65,12 +65,12 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<AlertDialog.Portal> <AlertDialog.Portal>
<AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" /> <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"> <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"> <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"> <AlertDialog.Title className="text-lg font-semibold leading-none text-white">
Confirm repost this post? Confirm repost this post?
</AlertDialog.Title> </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 Reposted post will be visible to your followers, and you cannot undo this
action. action.
</AlertDialog.Description> </AlertDialog.Description>

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

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

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

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

6
src/shared/notes/metadata.tsx
View File

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

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

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

11
src/shared/notes/replies/item.tsx
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 { User } from '@shared/user';
import { NDKEventWithReplies } from '@utils/types'; import { NDKEventWithReplies } from '@utils/types';
@ -6,16 +6,13 @@ import { NDKEventWithReplies } from '@utils/types';
export function Reply({ event, root }: { event: NDKEventWithReplies; root?: string }) { export function Reply({ event, root }: { event: NDKEventWithReplies; root?: string }) {
return ( return (
<div className="relative h-min w-full"> <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 z-10">
<div className="relative flex flex-col"> <div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} /> <User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
<div className="-mt-5 flex items-start gap-3"> <div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" /> <div className="w-10 shrink-0" />
<div className="flex-1"> <div className="flex-1">
<TextNote content={event.content} /> <MemoizedTextNote content={event.content} />
<NoteActions <NoteActions
id={event.id} id={event.id}
pubkey={event.pubkey} pubkey={event.pubkey}

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

@ -37,10 +37,8 @@ export function RepliesList({ id }: { id: string }) {
if (!data) { if (!data) {
return ( return (
<div className="mt-5 pb-10"> <div className="mt-5 pb-10">
<div className="flex flex-col"> <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl"> <NoteSkeleton />
<NoteSkeleton />
</div>
</div> </div>
</div> </div>
); );
@ -48,15 +46,17 @@ export function RepliesList({ id }: { id: string }) {
return ( return (
<div className="mt-5 pb-10"> <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 {data?.length || 0} replies
</h5> </h5>
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-2">
{data?.length === 0 ? ( {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"> <div className="flex flex-col items-center justify-center gap-2 py-6">
<h3 className="text-3xl">👋</h3> <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>
</div> </div>
) : ( ) : (

8
src/shared/notes/replies/sub.tsx
View File

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

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

@ -2,15 +2,15 @@ export function NoteSkeleton() {
return ( return (
<div className="flex h-min flex-col"> <div className="flex h-min flex-col">
<div className="flex items-start gap-3"> <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="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-white/10 backdrop-blur-xl" /> <div className="h-3 w-20 rounded bg-neutral-400 dark:bg-neutral-600" />
</div> </div>
<div className="-mt-5 flex animate-pulse gap-3"> <div className="-mt-5 flex animate-pulse gap-3">
<div className="w-10 shrink-0" /> <div className="w-10 shrink-0" />
<div className="flex flex-col gap-1"> <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-full rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-2/3 rounded bg-white/10 backdrop-blur-xl" /> <div className="h-3 w-2/3 rounded bg-neutral-400 dark:bg-neutral-600" />
<div className="h-3 w-1/2 rounded bg-white/10 backdrop-blur-xl" /> <div className="h-3 w-1/2 rounded bg-neutral-400 dark:bg-neutral-600" />
</div> </div>
</div> </div>
</div> </div>

14
src/shared/user.tsx
View File

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

20
src/shared/userProfile.tsx
View File

@ -62,7 +62,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => unfollowUser(pubkey)} 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 Unfollow
</button> </button>
@ -70,38 +70,38 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => followUser(pubkey)} 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 Follow
</button> </button>
)} )}
<Link <Link
to={`/chats/${pubkey}`} 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 Message
</Link> </Link>
</div> </div>
</div> </div>
<div className="mt-2 flex flex-1 flex-col gap-2"> <div className="mt-2 flex flex-1 flex-col">
<div className="flex flex-col gap-2"> <div className="flex flex-col">
<h5 className="text-lg font-semibold leading-none"> <h5 className="text-lg font-semibold">
{user?.name || user?.display_name || user?.displayName || 'Anon'} {user?.name || user?.display_name || user?.displayName || 'Anon'}
</h5> </h5>
{user?.nip05 ? ( {user?.nip05 ? (
<NIP05 <NIP05
pubkey={pubkey} pubkey={pubkey}
nip05={user?.nip05} 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)} {displayNpub(pubkey, 16)}
</span> </span>
)} )}
</div> </div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-3">
<p className="mb-3 mt-2 max-w-[500px] select-text break-words text-sm text-white"> <p className="mb-3 mt-2 max-w-[500px] select-text break-words text-neutral-900 dark:text-neutral-100">
{user?.about} {user?.about}
</p> </p>
<UserStats pubkey={pubkey} /> <UserStats pubkey={pubkey} />

1
src/shared/widgets/local/thread.tsx
View File

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