mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 18:00:47 +00:00
wip: update color palette
This commit is contained in:
parent
d20ee26e22
commit
043c1b1220
@ -4,7 +4,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Lume</title>
|
<title>Lume</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-black dark:text-white">
|
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-neutral-950 dark:text-neutral-50">
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
14
package.json
14
package.json
@ -73,12 +73,12 @@
|
|||||||
"react-markdown": "^8.0.7",
|
"react-markdown": "^8.0.7",
|
||||||
"react-router-dom": "^6.16.0",
|
"react-router-dom": "^6.16.0",
|
||||||
"react-string-replace": "^1.1.1",
|
"react-string-replace": "^1.1.1",
|
||||||
"reactflow": "^11.9.2",
|
"reactflow": "^11.9.3",
|
||||||
"remark-gfm": "^3.0.1",
|
"remark-gfm": "^3.0.1",
|
||||||
"tailwind-scrollbar": "^3.0.5",
|
"tailwind-scrollbar": "^3.0.5",
|
||||||
"tauri-controls": "^0.2.0",
|
"tauri-controls": "^0.2.0",
|
||||||
"tippy.js": "^6.3.7",
|
"tippy.js": "^6.3.7",
|
||||||
"virtua": "^0.9.1",
|
"virtua": "^0.12.0",
|
||||||
"zustand": "^4.4.3"
|
"zustand": "^4.4.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -86,12 +86,12 @@
|
|||||||
"@tauri-apps/cli": "2.0.0-alpha.14",
|
"@tauri-apps/cli": "2.0.0-alpha.14",
|
||||||
"@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.2",
|
||||||
"@types/node": "^20.8.3",
|
"@types/node": "^20.8.4",
|
||||||
"@types/react": "^18.2.25",
|
"@types/react": "^18.2.27",
|
||||||
"@types/react-dom": "^18.2.11",
|
"@types/react-dom": "^18.2.12",
|
||||||
"@types/youtube-player": "^5.5.8",
|
"@types/youtube-player": "^5.5.8",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
"@typescript-eslint/eslint-plugin": "^6.7.5",
|
||||||
"@typescript-eslint/parser": "^6.7.4",
|
"@typescript-eslint/parser": "^6.7.5",
|
||||||
"@vitejs/plugin-react-swc": "^3.4.0",
|
"@vitejs/plugin-react-swc": "^3.4.0",
|
||||||
"autoprefixer": "^10.4.16",
|
"autoprefixer": "^10.4.16",
|
||||||
"clsx": "^2.0.0",
|
"clsx": "^2.0.0",
|
||||||
|
666
pnpm-lock.yaml
666
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
50
src-tauri/Cargo.lock
generated
50
src-tauri/Cargo.lock
generated
@ -88,9 +88,9 @@ dependencies = [
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "aho-corasick"
|
name = "aho-corasick"
|
||||||
version = "1.1.1"
|
version = "1.1.2"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "ea5d730647d4fadd988536d06fecce94b7b4f2a7efdae548f1cf4b63205518ab"
|
checksum = "b2969dcb958b36655471fc61f7e416fa76033bdd4bfed0678d8fee1e2d07a1f0"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"memchr",
|
"memchr",
|
||||||
]
|
]
|
||||||
@ -305,7 +305,7 @@ dependencies = [
|
|||||||
"cfg-if",
|
"cfg-if",
|
||||||
"event-listener 3.0.0",
|
"event-listener 3.0.0",
|
||||||
"futures-lite",
|
"futures-lite",
|
||||||
"rustix 0.38.17",
|
"rustix 0.38.18",
|
||||||
"windows-sys 0.48.0",
|
"windows-sys 0.48.0",
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -322,9 +322,9 @@ dependencies = [
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "async-signal"
|
name = "async-signal"
|
||||||
version = "0.2.3"
|
version = "0.2.4"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "1079d27511f6c038736279421774ef4ad4bdd2e300825f4a48c4cc463a57cedf"
|
checksum = "d2a5415b7abcdc9cd7d63d6badba5288b2ca017e3fbd4173b8f405449f1a2399"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"async-io",
|
"async-io",
|
||||||
"async-lock",
|
"async-lock",
|
||||||
@ -332,7 +332,7 @@ dependencies = [
|
|||||||
"cfg-if",
|
"cfg-if",
|
||||||
"futures-core",
|
"futures-core",
|
||||||
"futures-io",
|
"futures-io",
|
||||||
"rustix 0.38.17",
|
"rustix 0.38.18",
|
||||||
"signal-hook-registry",
|
"signal-hook-registry",
|
||||||
"slab",
|
"slab",
|
||||||
"windows-sys 0.48.0",
|
"windows-sys 0.48.0",
|
||||||
@ -1130,9 +1130,9 @@ dependencies = [
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "curl-sys"
|
name = "curl-sys"
|
||||||
version = "0.4.66+curl-8.3.0"
|
version = "0.4.67+curl-8.3.0"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "70c44a72e830f0e40ad90dda8a6ab6ed6314d39776599a58a2e5e37fbc6db5b9"
|
checksum = "3cc35d066510b197a0f72de863736641539957628c8a42e70e27c66849e77c34"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"cc",
|
"cc",
|
||||||
"libc",
|
"libc",
|
||||||
@ -1496,7 +1496,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
|
|||||||
checksum = "ef033ed5e9bad94e55838ca0ca906db0e043f517adda0c8b79c7a8c66c93c1b5"
|
checksum = "ef033ed5e9bad94e55838ca0ca906db0e043f517adda0c8b79c7a8c66c93c1b5"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"cfg-if",
|
"cfg-if",
|
||||||
"rustix 0.38.17",
|
"rustix 0.38.18",
|
||||||
"windows-sys 0.48.0",
|
"windows-sys 0.48.0",
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -2544,9 +2544,9 @@ dependencies = [
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "json-patch"
|
name = "json-patch"
|
||||||
version = "1.1.0"
|
version = "1.2.0"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "4f7765dccf8c39c3a470fc694efe322969d791e713ca46bc7b5c506886157572"
|
checksum = "55ff1e1486799e3f64129f8ccad108b38290df9cd7015cd31bed17239f0789d6"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"serde",
|
"serde",
|
||||||
"serde_json",
|
"serde_json",
|
||||||
@ -3878,14 +3878,14 @@ dependencies = [
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "regex"
|
name = "regex"
|
||||||
version = "1.9.6"
|
version = "1.10.0"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "ebee201405406dbf528b8b672104ae6d6d63e6d118cb10e4d51abbc7b58044ff"
|
checksum = "d119d7c7ca818f8a53c300863d4f87566aac09943aef5b355bb83969dae75d87"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"aho-corasick",
|
"aho-corasick",
|
||||||
"memchr",
|
"memchr",
|
||||||
"regex-automata 0.3.9",
|
"regex-automata 0.4.1",
|
||||||
"regex-syntax 0.7.5",
|
"regex-syntax 0.8.0",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
@ -3899,13 +3899,13 @@ dependencies = [
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "regex-automata"
|
name = "regex-automata"
|
||||||
version = "0.3.9"
|
version = "0.4.1"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "59b23e92ee4318893fa3fe3e6fb365258efbfe6ac6ab30f090cdcbb7aa37efa9"
|
checksum = "465c6fc0621e4abc4187a2bda0937bfd4f722c2730b29562e19689ea796c9a4b"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"aho-corasick",
|
"aho-corasick",
|
||||||
"memchr",
|
"memchr",
|
||||||
"regex-syntax 0.7.5",
|
"regex-syntax 0.8.0",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
@ -3916,9 +3916,9 @@ checksum = "f162c6dd7b008981e4d40210aca20b4bd0f9b60ca9271061b07f78537722f2e1"
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "regex-syntax"
|
name = "regex-syntax"
|
||||||
version = "0.7.5"
|
version = "0.8.0"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "dbb5fb1acd8a1a18b3dd5be62d25485eb770e05afb408a9627d14d451bae12da"
|
checksum = "c3cbb081b9784b07cceb8824c8583f86db4814d172ab043f3c23f7dc600bf83d"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "reqwest"
|
name = "reqwest"
|
||||||
@ -4065,9 +4065,9 @@ dependencies = [
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "rustix"
|
name = "rustix"
|
||||||
version = "0.38.17"
|
version = "0.38.18"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "f25469e9ae0f3d0047ca8b93fc56843f38e6774f0914a107ff8b41be8be8e0b7"
|
checksum = "5a74ee2d7c2581cd139b42447d7d9389b889bdaad3a73f1ebb16f2a3237bb19c"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"bitflags 2.4.0",
|
"bitflags 2.4.0",
|
||||||
"errno",
|
"errno",
|
||||||
@ -4233,9 +4233,9 @@ dependencies = [
|
|||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "semver"
|
name = "semver"
|
||||||
version = "1.0.19"
|
version = "1.0.20"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "ad977052201c6de01a8ef2aa3378c4bd23217a056337d1d6da40468d267a4fb0"
|
checksum = "836fa6a3e1e547f9a2c4040802ec865b5d85f4014efe00555d7090a3dcaa1090"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"serde",
|
"serde",
|
||||||
]
|
]
|
||||||
@ -5535,7 +5535,7 @@ dependencies = [
|
|||||||
"cfg-if",
|
"cfg-if",
|
||||||
"fastrand 2.0.1",
|
"fastrand 2.0.1",
|
||||||
"redox_syscall 0.3.5",
|
"redox_syscall 0.3.5",
|
||||||
"rustix 0.38.17",
|
"rustix 0.38.18",
|
||||||
"windows-sys 0.48.0",
|
"windows-sys 0.48.0",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -57,5 +57,5 @@ input::-ms-clear {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ProseMirror img.ProseMirror-selectednode {
|
.ProseMirror img.ProseMirror-selectednode {
|
||||||
@apply outline-fuchsia-500;
|
@apply outline-blue-500;
|
||||||
}
|
}
|
||||||
|
@ -132,7 +132,7 @@ export function CreateStep1Screen() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => download()}
|
onClick={() => download()}
|
||||||
className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{downloaded ? 'Downloaded' : 'Download account keys'}
|
{downloaded ? 'Downloaded' : 'Download account keys'}
|
||||||
</button>
|
</button>
|
||||||
|
@ -127,7 +127,7 @@ export function CreateStep2Screen() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isDirty || !isValid}
|
disabled={!isDirty || !isValid}
|
||||||
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -150,7 +150,7 @@ export function CreateStep3Screen() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isDirty || !isValid}
|
disabled={!isDirty || !isValid}
|
||||||
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -133,7 +133,7 @@ export function ImportStep1Screen() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isDirty || !isValid}
|
disabled={!isDirty || !isValid}
|
||||||
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -127,7 +127,7 @@ export function ImportStep2Screen() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isDirty || !isValid}
|
disabled={!isDirty || !isValid}
|
||||||
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -62,7 +62,7 @@ export function ImportStep3Screen() {
|
|||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
|
||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
|
@ -157,7 +157,7 @@ export function MigrateScreen() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isDirty || !isValid}
|
disabled={!isDirty || !isValid}
|
||||||
className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50"
|
className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-blue-500 font-medium text-white hover:bg-blue-600 disabled:pointer-events-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
|
||||||
|
@ -76,7 +76,7 @@ export function OnboardStep1Screen() {
|
|||||||
add them later.
|
add them later.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="scrollbar-none flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4">
|
<div className="flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4 scrollbar-none">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||||
@ -109,7 +109,7 @@ export function OnboardStep1Screen() {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={submit}
|
onClick={submit}
|
||||||
disabled={loading || follows.length === 0}
|
disabled={loading || follows.length === 0}
|
||||||
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
|
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -101,7 +101,7 @@ export function OnboardStep2Screen() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<div className="scrollbar-none flex h-[450px] w-full flex-col divide-y divide-white/5 overflow-y-auto rounded-xl bg-white/20 backdrop-blur-xl">
|
<div className="flex h-[450px] w-full flex-col divide-y divide-white/5 overflow-y-auto rounded-xl bg-white/20 backdrop-blur-xl scrollbar-none">
|
||||||
{data.map((item: { hashtag: string }) => (
|
{data.map((item: { hashtag: string }) => (
|
||||||
<button
|
<button
|
||||||
key={item.hashtag}
|
key={item.hashtag}
|
||||||
@ -123,7 +123,7 @@ export function OnboardStep2Screen() {
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={submit}
|
onClick={submit}
|
||||||
disabled={loading || tags.size === 0 || tags.size > 3}
|
disabled={loading || tags.size === 0 || tags.size > 3}
|
||||||
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
|
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -105,14 +105,14 @@ export function OnboardStep3Screen() {
|
|||||||
href="https://nostr.com/relays"
|
href="https://nostr.com/relays"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="text-fuchsia-500 underline"
|
className="text-blue-500 underline"
|
||||||
>
|
>
|
||||||
here (nostr.com)
|
here (nostr.com)
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<div className="scrollbar-none relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl">
|
<div className="relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl scrollbar-none">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||||
@ -158,7 +158,7 @@ export function OnboardStep3Screen() {
|
|||||||
type="button"
|
type="button"
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
|
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -159,7 +159,7 @@ export function ResetScreen() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isDirty || !isValid}
|
disabled={!isDirty || !isValid}
|
||||||
className="inline-flex h-12 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50"
|
className="inline-flex h-12 w-full items-center justify-center rounded-md bg-blue-500 font-medium text-white hover:bg-blue-600 disabled:pointer-events-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||||
|
@ -95,7 +95,7 @@ export function UnlockScreen() {
|
|||||||
{...register('password', { required: true, minLength: 4 })}
|
{...register('password', { required: true, minLength: 4 })}
|
||||||
type={showPassword ? 'text' : 'password'}
|
type={showPassword ? 'text' : 'password'}
|
||||||
placeholder="Enter password"
|
placeholder="Enter password"
|
||||||
className="relative h-12 w-full rounded-lg bg-zinc-300 py-1 text-center tracking-widest text-zinc-900 !outline-none backdrop-blur-xl placeholder:tracking-normal placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
|
className="relative h-12 w-full rounded-lg bg-neutral-300 py-1 text-center tracking-widest text-neutral-900 !outline-none backdrop-blur-xl placeholder:tracking-normal placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-500"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -113,7 +113,7 @@ export function UnlockScreen() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isDirty || !isValid}
|
disabled={!isDirty || !isValid}
|
||||||
className="inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-interor-600 px-6 text-white hover:bg-interor-700 focus:outline-none disabled:opacity-50"
|
className="inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -16,7 +16,7 @@ export function WelcomeScreen() {
|
|||||||
<div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10">
|
<div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10">
|
||||||
<Link
|
<Link
|
||||||
to="/auth/import"
|
to="/auth/import"
|
||||||
className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-4 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-4 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
<span className="w-5" />
|
<span className="w-5" />
|
||||||
<span>Login with private key</span>
|
<span>Login with private key</span>
|
||||||
|
@ -71,17 +71,17 @@ export function ChatScreen() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full p-3">
|
<div className="h-full w-full p-3">
|
||||||
<div className="rounded-lg bg-zinc-100 backdrop-blur-xl dark:bg-zinc-900">
|
<div className="rounded-lg bg-neutral-100 backdrop-blur-xl dark:bg-neutral-900">
|
||||||
<div className="flex h-full flex-col justify-between overflow-hidden">
|
<div className="flex h-full flex-col justify-between overflow-hidden">
|
||||||
<div className="flex h-16 shrink-0 items-center border-b border-zinc-200 px-3 dark:border-zinc-800">
|
<div className="flex h-16 shrink-0 items-center border-b border-neutral-200 px-3 dark:border-neutral-800">
|
||||||
<User pubkey={pubkey} variant="simple" />
|
<User pubkey={pubkey} variant="simple" />
|
||||||
</div>
|
</div>
|
||||||
<div className="h-full w-full flex-1 px-3 py-3">
|
<div className="h-full w-full flex-1 px-3 py-3">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<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-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
|
||||||
Loading messages
|
Loading messages
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -89,17 +89,17 @@ export function ChatScreen() {
|
|||||||
) : data.length === 0 ? (
|
) : data.length === 0 ? (
|
||||||
<div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
|
<div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
|
||||||
<h3 className="mb-2 text-4xl">🙌</h3>
|
<h3 className="mb-2 text-4xl">🙌</h3>
|
||||||
<p className="leading-none text-zinc-500 dark:text-zinc-300">
|
<p className="leading-none text-neutral-500 dark:text-neutral-300">
|
||||||
You two didn't talk yet, let's send first message
|
You two didn't talk yet, let's send first message
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList ref={listRef} className="scrollbar-none h-full" mode="reverse">
|
<VList ref={listRef} className="h-full scrollbar-none" reverse>
|
||||||
{data.map((message) => renderItem(message))}
|
{data.map((message) => renderItem(message))}
|
||||||
</VList>
|
</VList>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="shrink-0 rounded-b-lg border-t border-zinc-300 bg-zinc-200 p-3 backdrop-blur-xl dark:border-zinc-700 dark:bg-zinc-800">
|
<div className="shrink-0 rounded-b-lg border-t border-neutral-300 bg-neutral-200 p-3 backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-800">
|
||||||
<ChatForm
|
<ChatForm
|
||||||
receiverPubkey={pubkey}
|
receiverPubkey={pubkey}
|
||||||
userPubkey={db.account.pubkey}
|
userPubkey={db.account.pubkey}
|
||||||
|
@ -47,7 +47,7 @@ export function ChatForm({
|
|||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<MediaUploader setState={setValue} />
|
<MediaUploader setState={setValue} />
|
||||||
<div className="flex w-full items-center justify-between rounded-full bg-zinc-300 px-3 dark:bg-zinc-700">
|
<div className="flex w-full items-center justify-between rounded-full bg-neutral-300 px-3 dark:bg-neutral-700">
|
||||||
<input
|
<input
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(e) => setValue(e.target.value)}
|
onChange={(e) => setValue(e.target.value)}
|
||||||
@ -57,12 +57,12 @@ export function ChatForm({
|
|||||||
autoCorrect="off"
|
autoCorrect="off"
|
||||||
autoCapitalize="off"
|
autoCapitalize="off"
|
||||||
placeholder="Message"
|
placeholder="Message"
|
||||||
className="h-10 flex-1 resize-none bg-transparent px-3 text-zinc-900 placeholder:text-zinc-500 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-300"
|
className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-500 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={submit}
|
onClick={submit}
|
||||||
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-zinc-500 dark:text-zinc-300"
|
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-300"
|
||||||
>
|
>
|
||||||
<EnterIcon className="h-5 w-5" />
|
<EnterIcon className="h-5 w-5" />
|
||||||
Send
|
Send
|
||||||
|
@ -44,10 +44,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
|
|||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
twMerge(
|
||||||
'flex items-center gap-2.5 px-3 py-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-800',
|
'flex items-center gap-2.5 px-3 py-1.5 hover:bg-neutral-200 dark:hover:bg-neutral-800',
|
||||||
isActive
|
isActive
|
||||||
? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100'
|
? 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
|
||||||
: 'text-zinc-500 dark:text-zinc-300'
|
: 'text-neutral-500 dark:text-neutral-300'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -69,7 +69,7 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex w-full flex-col">
|
<div className="flex w-full flex-col">
|
||||||
<div className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
<div className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
|
@ -29,7 +29,7 @@ export function MediaUploader({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => uploadMedia()}
|
onClick={() => uploadMedia()}
|
||||||
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-zinc-300 text-zinc-500 hover:bg-zinc-400 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
|
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-neutral-500 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||||
|
@ -26,15 +26,15 @@ export function ChatMessage({
|
|||||||
className={twMerge(
|
className={twMerge(
|
||||||
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
|
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
|
||||||
self
|
self
|
||||||
? 'ml-auto rounded-l-xl bg-interor-500'
|
? 'ml-auto rounded-l-xl bg-blue-500'
|
||||||
: 'rounded-r-xl bg-zinc-200 dark:bg-zinc-800'
|
: 'rounded-r-xl bg-neutral-200 dark:bg-neutral-800'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{!richContent ? (
|
{!richContent ? (
|
||||||
<p className="text-zinc-900 dark:text-zinc-100">Decrypting...</p>
|
<p className="text-neutral-900 dark:text-neutral-100">Decrypting...</p>
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
<p className="select-text whitespace-pre-line text-zinc-900 dark:text-zinc-100">
|
<p className="select-text whitespace-pre-line text-neutral-900 dark:text-neutral-100">
|
||||||
{richContent.parsed}
|
{richContent.parsed}
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
|
@ -33,12 +33,12 @@ export function ChatsScreen() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid h-full w-full grid-cols-3">
|
<div className="grid h-full w-full grid-cols-3">
|
||||||
<div className="scrollbar-none col-span-1 h-full overflow-y-auto border-r border-white/5">
|
<div className="col-span-1 h-full overflow-y-auto border-r border-white/5 scrollbar-none">
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
|
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
|
||||||
>
|
>
|
||||||
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
|
<h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
|
||||||
All chats
|
All chats
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
@ -10,7 +10,7 @@ export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<h3 className="text-sm font-semibold text-fuchsia-500">{`${
|
<h3 className="text-sm font-semibold text-blue-500">{`${
|
||||||
user.name || user.display_name
|
user.name || user.display_name
|
||||||
}'s network`}</h3>
|
}'s network`}</h3>
|
||||||
);
|
);
|
||||||
|
@ -10,15 +10,15 @@ export function UserGroupNode({ data }) {
|
|||||||
<Handle
|
<Handle
|
||||||
type="target"
|
type="target"
|
||||||
position={Position.Top}
|
position={Position.Top}
|
||||||
className="h-2 w-5 rounded-full border-none !bg-fuchsia-400"
|
className="h-2 w-5 rounded-full border-none !bg-blue-400"
|
||||||
/>
|
/>
|
||||||
<div className="relative mx-3 my-3 flex flex-col gap-1">
|
<div className="relative mx-3 my-3 flex flex-col gap-1">
|
||||||
{data.title ? (
|
{data.title ? (
|
||||||
<h3 className="text-sm font-semibold text-fuchsia-500">{data.title}</h3>
|
<h3 className="text-sm font-semibold text-blue-500">{data.title}</h3>
|
||||||
) : (
|
) : (
|
||||||
<GroupTitle pubkey={data.pubkey} />
|
<GroupTitle pubkey={data.pubkey} />
|
||||||
)}
|
)}
|
||||||
<div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-interor-500/10 p-4">
|
<div className="grid grid-cols-5 gap-6 rounded-lg border border-blue-500/50 bg-blue-500/10 p-4">
|
||||||
{data.list.map((user: string) => (
|
{data.list.map((user: string) => (
|
||||||
<UserWithDrawer key={user} pubkey={user} />
|
<UserWithDrawer key={user} pubkey={user} />
|
||||||
))}
|
))}
|
||||||
@ -27,7 +27,7 @@ export function UserGroupNode({ data }) {
|
|||||||
<Handle
|
<Handle
|
||||||
type="source"
|
type="source"
|
||||||
position={Position.Bottom}
|
position={Position.Bottom}
|
||||||
className="h-2 w-5 rounded-full border-none !bg-fuchsia-400"
|
className="h-2 w-5 rounded-full border-none !bg-blue-400"
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -97,7 +97,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => unfollowUser(pubkey)}
|
onClick={() => unfollowUser(pubkey)}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
Unfollow
|
Unfollow
|
||||||
</button>
|
</button>
|
||||||
@ -105,14 +105,14 @@ export const UserWithDrawer = memo(function UserWithDrawer({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => followUser(pubkey)}
|
onClick={() => followUser(pubkey)}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
Follow
|
Follow
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<Link
|
<Link
|
||||||
to={`/chats/${pubkey}`}
|
to={`/chats/${pubkey}`}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
Message
|
Message
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -16,7 +16,7 @@ export function NotiMention({ event }: { event: NDKEvent }) {
|
|||||||
<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-white/50">has mention you · {createdAt}</p>
|
||||||
</div>
|
</div>
|
||||||
<span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block">
|
<span className="hidden text-sm font-semibold text-blue-500 group-hover:block">
|
||||||
View
|
View
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,7 +18,7 @@ export function NotiReaction({ event }: { event: NDKEvent }) {
|
|||||||
reacted {event.content} · {createdAt}
|
reacted {event.content} · {createdAt}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block">
|
<span className="hidden text-sm font-semibold text-blue-500 group-hover:block">
|
||||||
View
|
View
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -24,7 +24,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
|
|||||||
· {createdAt}
|
· {createdAt}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block">
|
<span className="hidden text-sm font-semibold text-blue-500 group-hover:block">
|
||||||
View
|
View
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -121,7 +121,7 @@ export function NWCAlby() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => initAlby()}
|
onClick={() => initAlby()}
|
||||||
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
|
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -139,7 +139,7 @@ export function NWCOther() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isDirty || !isValid}
|
disabled={!isDirty || !isValid}
|
||||||
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
|
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<>
|
<>
|
||||||
|
@ -71,7 +71,7 @@ export function NWCScreen() {
|
|||||||
<a
|
<a
|
||||||
href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
|
href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="text-fuchsia-300"
|
className="text-blue-300"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
>
|
>
|
||||||
the specs (NIP47)
|
the specs (NIP47)
|
||||||
@ -99,7 +99,7 @@ export function NWCScreen() {
|
|||||||
href="https://www.mutinywallet.com/"
|
href="https://www.mutinywallet.com/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="text-fuchsia-300"
|
className="text-blue-300"
|
||||||
>
|
>
|
||||||
website
|
website
|
||||||
</a>
|
</a>
|
||||||
@ -110,7 +110,7 @@ export function NWCScreen() {
|
|||||||
href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
|
href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="text-fuchsia-300"
|
className="text-blue-300"
|
||||||
>
|
>
|
||||||
website
|
website
|
||||||
</a>
|
</a>
|
||||||
|
@ -40,9 +40,9 @@ export function RelayForm() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<div className="flex h-10 items-center justify-between rounded-lg bg-zinc-200 pr-1.5 dark:bg-zinc-800">
|
<div className="flex h-10 items-center justify-between rounded-lg bg-neutral-200 pr-1.5 dark:bg-neutral-800">
|
||||||
<input
|
<input
|
||||||
className="h-full w-full bg-transparent pl-3 pr-1.5 text-zinc-900 placeholder:text-zinc-600 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-400"
|
className="h-full w-full bg-transparent pl-3 pr-1.5 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-400"
|
||||||
type="url"
|
type="url"
|
||||||
placeholder="wss://"
|
placeholder="wss://"
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
@ -55,7 +55,7 @@ export function RelayForm() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => createRelay()}
|
onClick={() => createRelay()}
|
||||||
className="inline-flex h-6 w-6 items-center justify-center rounded bg-interor-500 text-white hover:bg-interor-600"
|
className="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500 text-white hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
<PlusIcon className="h-4 w-4" />
|
<PlusIcon className="h-4 w-4" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -44,32 +44,32 @@ export function RelayList() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="col-span-2 border-r border-zinc-100 dark:border-zinc-900">
|
<div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="flex h-full w-full items-center justify-center pb-10">
|
<div className="flex h-full w-full items-center justify-center pb-10">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
<p>Loading relay...</p>
|
<p>Loading relay...</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none mt-20 h-full">
|
<VList className="mt-20 h-full scrollbar-none">
|
||||||
<div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900">
|
<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
|
||||||
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
|
<h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
|
||||||
All relays used by your follows
|
All relays used by your follows
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
{[...data].map(([key, value]) => (
|
{[...data].map(([key, value]) => (
|
||||||
<div
|
<div
|
||||||
key={key}
|
key={key}
|
||||||
className="flex h-14 w-full items-center justify-between border-b border-zinc-100 px-3 dark:border-zinc-900"
|
className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900"
|
||||||
>
|
>
|
||||||
<div className="inline-flex items-center gap-2 divide-x divide-zinc-100 dark:divide-zinc-900">
|
<div className="inline-flex items-center gap-2 divide-x divide-neutral-100 dark:divide-neutral-900">
|
||||||
<div className="inline-flex items-center gap-2">
|
<div className="inline-flex items-center gap-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => inspectRelay(key)}
|
onClick={() => inspectRelay(key)}
|
||||||
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-zinc-200 px-1.5 text-sm font-medium text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
|
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-neutral-200 px-1.5 text-sm font-medium text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
|
||||||
>
|
>
|
||||||
<ShareIcon className="h-3 w-3" />
|
<ShareIcon className="h-3 w-3" />
|
||||||
Inspect
|
Inspect
|
||||||
@ -77,16 +77,16 @@ export function RelayList() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => connectRelay(key)}
|
onClick={() => connectRelay(key)}
|
||||||
className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-900 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800"
|
className="inline-flex h-6 w-6 items-center justify-center rounded text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
|
||||||
>
|
>
|
||||||
<PlusIcon className="h-3 w-3" />
|
<PlusIcon className="h-3 w-3" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex items-center gap-2 pl-3">
|
<div className="inline-flex items-center gap-2 pl-3">
|
||||||
<span className="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
|
<span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
|
||||||
Relay:{' '}
|
Relay:{' '}
|
||||||
</span>
|
</span>
|
||||||
<span className="max-w-[200px] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
<span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||||
{key}
|
{key}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -96,7 +96,7 @@ export function RelayList() {
|
|||||||
<User key={item} pubkey={item} variant="stacked" />
|
<User key={item} pubkey={item} variant="stacked" />
|
||||||
))}
|
))}
|
||||||
{value.length > 4 ? (
|
{value.length > 4 ? (
|
||||||
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-zinc-200 text-zinc-900 ring-1 ring-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700">
|
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
|
||||||
<span className="text-xs font-medium">+{value.length}</span>
|
<span className="text-xs font-medium">+{value.length}</span>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
@ -34,7 +34,7 @@ export function UserRelay() {
|
|||||||
{data.map((item) => (
|
{data.map((item) => (
|
||||||
<div
|
<div
|
||||||
key={item}
|
key={item}
|
||||||
className="group flex h-10 items-center justify-between rounded-lg bg-zinc-200 pl-3 pr-1.5 dark:bg-zinc-800"
|
className="group flex h-10 items-center justify-between rounded-lg bg-neutral-200 pl-3 pr-1.5 dark:bg-neutral-800"
|
||||||
>
|
>
|
||||||
<div className="inline-flex items-center gap-2.5">
|
<div className="inline-flex items-center gap-2.5">
|
||||||
{relayUrls.includes(item) ? (
|
{relayUrls.includes(item) ? (
|
||||||
@ -48,16 +48,16 @@ export function UserRelay() {
|
|||||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
|
<span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
<p className="max-w-[20rem] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
<p className="max-w-[20rem] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||||
{item}
|
{item}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => removeRelay(item)}
|
onClick={() => removeRelay(item)}
|
||||||
className="hidden h-6 w-6 items-center justify-center rounded hover:bg-zinc-300 group-hover:inline-flex dark:hover:bg-zinc-700"
|
className="hidden h-6 w-6 items-center justify-center rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
|
||||||
>
|
>
|
||||||
<CancelIcon className="h-4 w-4 text-zinc-900 dark:text-zinc-100" />
|
<CancelIcon className="h-4 w-4 text-neutral-900 dark:text-neutral-100" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
@ -6,8 +6,8 @@ export function RelaysScreen() {
|
|||||||
<div className="grid h-full w-full grid-cols-3">
|
<div className="grid h-full w-full grid-cols-3">
|
||||||
<RelayList />
|
<RelayList />
|
||||||
<div className="col-span-1">
|
<div className="col-span-1">
|
||||||
<div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900">
|
<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
|
||||||
<h3 className="font-semibold text-zinc-900 dark:text-zinc-100">
|
<h3 className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
Connected relays
|
Connected relays
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
@ -79,7 +79,7 @@ export function RelayScreen() {
|
|||||||
<a
|
<a
|
||||||
href={`mailto:${resolvedRelay.contact}`}
|
href={`mailto:${resolvedRelay.contact}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="underline after:content-['_↗'] hover:text-fuchsia-500"
|
className="underline after:content-['_↗'] hover:text-blue-500"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
>
|
>
|
||||||
mailto:{resolvedRelay.contact}
|
mailto:{resolvedRelay.contact}
|
||||||
@ -92,7 +92,7 @@ export function RelayScreen() {
|
|||||||
href={resolvedRelay.software}
|
href={resolvedRelay.software}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="underline after:content-['_↗'] hover:text-fuchsia-500"
|
className="underline after:content-['_↗'] hover:text-blue-500"
|
||||||
>
|
>
|
||||||
{getSoftwareName(resolvedRelay.software) +
|
{getSoftwareName(resolvedRelay.software) +
|
||||||
' - ' +
|
' - ' +
|
||||||
@ -110,7 +110,7 @@ export function RelayScreen() {
|
|||||||
href={`https://nips.be/${item}`}
|
href={`https://nips.be/${item}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-interor-500"
|
className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
{item}
|
{item}
|
||||||
</a>
|
</a>
|
||||||
@ -145,7 +145,7 @@ export function RelayScreen() {
|
|||||||
href={resolvedRelay.payments_url}
|
href={resolvedRelay.payments_url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-interor-500 text-sm font-medium hover:bg-interor-600"
|
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
Open payment website
|
Open payment website
|
||||||
</a>
|
</a>
|
||||||
|
@ -71,7 +71,7 @@ export function AccountSettingsScreen() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => showPrivkey()}
|
onClick={() => showPrivkey()}
|
||||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
|
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-neutral-700"
|
||||||
>
|
>
|
||||||
{privType === 'password' ? (
|
{privType === 'password' ? (
|
||||||
<EyeOffIcon
|
<EyeOffIcon
|
||||||
@ -103,7 +103,7 @@ export function AccountSettingsScreen() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => showNsec()}
|
onClick={() => showNsec()}
|
||||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
|
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-neutral-700"
|
||||||
>
|
>
|
||||||
{privType === 'password' ? (
|
{privType === 'password' ? (
|
||||||
<EyeOffIcon
|
<EyeOffIcon
|
||||||
|
@ -2,7 +2,7 @@ export function AutoStartSetting() {
|
|||||||
return (
|
return (
|
||||||
<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-zinc-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-white/50">Auto start at login</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -12,7 +12,7 @@ export function CacheTimeSetting() {
|
|||||||
return (
|
return (
|
||||||
<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-zinc-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-white/50">
|
||||||
@ -25,12 +25,12 @@ export function CacheTimeSetting() {
|
|||||||
onChange={(e) => setTime(e.currentTarget.value)}
|
onChange={(e) => setTime(e.currentTarget.value)}
|
||||||
autoCapitalize="none"
|
autoCapitalize="none"
|
||||||
autoCorrect="none"
|
autoCorrect="none"
|
||||||
className="h-8 w-24 rounded-md bg-zinc-800 px-2 text-right font-medium text-zinc-300 focus:outline-none"
|
className="h-8 w-24 rounded-md bg-neutral-800 px-2 text-right font-medium text-neutral-300 focus:outline-none"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => update()}
|
onClick={() => update()}
|
||||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-interor-500"
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-800 font-medium hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
<CheckCircleIcon className="h-4 w-4 text-white" />
|
<CheckCircleIcon className="h-4 w-4 text-white" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -15,13 +15,13 @@ export function DataPath() {
|
|||||||
return (
|
return (
|
||||||
<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-zinc-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-white/50">
|
||||||
Where the local data is stored
|
Where the local data is stored
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex items-center gap-2">
|
<div className="inline-flex items-center gap-2">
|
||||||
<span className="font-medium text-zinc-300">{path}</span>
|
<span className="font-medium text-neutral-300">{path}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -15,13 +15,13 @@ export function VersionSetting() {
|
|||||||
return (
|
return (
|
||||||
<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-zinc-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-white/50">
|
||||||
You're using latest version
|
You're using latest version
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex items-center gap-2">
|
<div className="inline-flex items-center gap-2">
|
||||||
<span className="font-medium text-zinc-300">{version}</span>
|
<span className="font-medium text-neutral-300">{version}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -9,17 +9,17 @@ export function ToggleWidgetList() {
|
|||||||
const setWidget = useWidgets((state) => state.setWidget);
|
const setWidget = useWidgets((state) => state.setWidget);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full w-[420px] items-center justify-center border-r border-zinc-100 dark:border-zinc-900">
|
<div className="flex h-full w-[420px] items-center justify-center border-r border-neutral-100 dark:border-neutral-900">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
|
<div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
|
||||||
<HandArrowDownIcon className="text-zinc-100 dark:text-zinc-900" />
|
<HandArrowDownIcon className="text-neutral-100 dark:text-neutral-900" />
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
|
setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
|
||||||
}
|
}
|
||||||
className="inline-flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-3 text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
|
className="inline-flex h-9 items-center gap-2 rounded-full bg-neutral-200 px-3 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
|
||||||
>
|
>
|
||||||
<PlusIcon className="h-4 w-4 text-white" />
|
<PlusIcon className="h-4 w-4 text-white" />
|
||||||
<p className="text-sm font-semibold leading-none">Add widget</p>
|
<p className="text-sm font-semibold leading-none">Add widget</p>
|
||||||
|
@ -33,22 +33,34 @@ export function WidgetList({ params }: { params: Widget }) {
|
|||||||
(kind: number) => {
|
(kind: number) => {
|
||||||
switch (kind) {
|
switch (kind) {
|
||||||
case WidgetKinds.tmp.xfeed:
|
case WidgetKinds.tmp.xfeed:
|
||||||
return <GroupFeedsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
|
return (
|
||||||
|
<GroupFeedsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
|
);
|
||||||
case WidgetKinds.local.follows:
|
case WidgetKinds.local.follows:
|
||||||
return <FollowsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
|
return (
|
||||||
|
<FollowsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
|
);
|
||||||
case WidgetKinds.local.files:
|
case WidgetKinds.local.files:
|
||||||
case WidgetKinds.global.files:
|
case WidgetKinds.global.files:
|
||||||
return <FileIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
|
return <FileIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
|
||||||
case WidgetKinds.local.articles:
|
case WidgetKinds.local.articles:
|
||||||
case WidgetKinds.global.articles:
|
case WidgetKinds.global.articles:
|
||||||
return <ArticleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
|
return (
|
||||||
|
<ArticleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
|
);
|
||||||
case WidgetKinds.tmp.xhashtag:
|
case WidgetKinds.tmp.xhashtag:
|
||||||
return <HashtagIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
|
return (
|
||||||
|
<HashtagIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
|
||||||
|
);
|
||||||
case WidgetKinds.nostrBand.trendingAccounts:
|
case WidgetKinds.nostrBand.trendingAccounts:
|
||||||
case WidgetKinds.nostrBand.trendingNotes:
|
case WidgetKinds.nostrBand.trendingNotes:
|
||||||
return <TrendingIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
|
return (
|
||||||
|
<TrendingIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
|
||||||
|
);
|
||||||
case WidgetKinds.other.learnNostr:
|
case WidgetKinds.other.learnNostr:
|
||||||
return <ThreadsIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
|
return (
|
||||||
|
<ThreadsIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
|
||||||
|
);
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -60,15 +72,15 @@ export function WidgetList({ params }: { params: Widget }) {
|
|||||||
(row: WidgetGroup, index: number) => {
|
(row: WidgetGroup, index: number) => {
|
||||||
return (
|
return (
|
||||||
<div key={index} className="flex flex-col gap-2">
|
<div key={index} className="flex flex-col gap-2">
|
||||||
<h3 className="text-sm font-semibold text-zinc-500 dark:text-zinc-300">
|
<h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-300">
|
||||||
{row.title}
|
{row.title}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-xl bg-zinc-100 dark:divide-zinc-800 dark:bg-zinc-900">
|
<div className="flex flex-col divide-y divide-neutral-200 overflow-hidden rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
|
||||||
{row.data.map((item, index) => (
|
{row.data.map((item, index) => (
|
||||||
<button
|
<button
|
||||||
onClick={() => openWidget(item)}
|
onClick={() => openWidget(item)}
|
||||||
key={index}
|
key={index}
|
||||||
className="group flex items-center gap-2.5 px-4 hover:bg-zinc-200 dark:hover:bg-zinc-800"
|
className="group flex items-center gap-2.5 px-4 hover:bg-neutral-200 dark:hover:bg-neutral-800"
|
||||||
>
|
>
|
||||||
{item.icon ? (
|
{item.icon ? (
|
||||||
<div className="h-10 w-10 shrink-0 rounded-md">
|
<div className="h-10 w-10 shrink-0 rounded-md">
|
||||||
@ -79,15 +91,15 @@ export function WidgetList({ params }: { params: Widget }) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-zinc-200 group-hover:bg-zinc-300 dark:bg-zinc-800 dark:group-hover:bg-zinc-700">
|
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-neutral-200 group-hover:bg-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700">
|
||||||
{renderIcon(item.kind)}
|
{renderIcon(item.kind)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="inline-flex h-16 w-full flex-col items-start justify-center">
|
<div className="inline-flex h-16 w-full flex-col items-start justify-center">
|
||||||
<h5 className="line-clamp-1 text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
<h5 className="line-clamp-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||||
{item.title}
|
{item.title}
|
||||||
</h5>
|
</h5>
|
||||||
<p className="line-clamp-1 text-xs text-zinc-500 dark:text-zinc-300">
|
<p className="line-clamp-1 text-xs text-neutral-500 dark:text-neutral-300">
|
||||||
{item.description}
|
{item.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -101,22 +113,22 @@ export function WidgetList({ params }: { params: Widget }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-[420px] border-r border-zinc-100 dark:border-zinc-900">
|
<div className="h-full w-[420px] border-r border-neutral-100 dark:border-neutral-900">
|
||||||
<TitleBar id={params.id} title="Add widget" />
|
<TitleBar id={params.id} title="Add widget" />
|
||||||
<div className="scrollbar-none h-full overflow-y-auto pb-20">
|
<div className="h-full overflow-y-auto pb-20 scrollbar-none">
|
||||||
<div className="flex flex-col gap-6 px-3">
|
<div className="flex flex-col gap-6 px-3">
|
||||||
{DefaultWidgets.map((row: WidgetGroup, index: number) =>
|
{DefaultWidgets.map((row: WidgetGroup, index: number) =>
|
||||||
renderItem(row, index)
|
renderItem(row, index)
|
||||||
)}
|
)}
|
||||||
<div className="border-t border-zinc-200 pt-6 dark:border-zinc-800">
|
<div className="border-t border-neutral-200 pt-6 dark:border-neutral-800">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
disabled
|
disabled
|
||||||
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-zinc-100 text-sm font-medium text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100"
|
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-neutral-100 text-sm font-medium text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100"
|
||||||
>
|
>
|
||||||
Build your own widget{' '}
|
Build your own widget{' '}
|
||||||
<div className="-rotate-3 transform-gpu rounded-md border border-zinc-300 bg-zinc-200 px-1.5 py-1 dark:border-zinc-700 dark:bg-zinc-800">
|
<div className="-rotate-3 transform-gpu rounded-md border border-neutral-300 bg-neutral-200 px-1.5 py-1 dark:border-neutral-700 dark:bg-neutral-800">
|
||||||
<span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
|
<span className="bg-gradient-to-t from-blue-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
|
||||||
Coming soon
|
Coming soon
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -86,10 +86,10 @@ export function SpaceScreen() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full">
|
||||||
<VList className="scrollbar-none h-full w-full" horizontal>
|
<VList className="h-full w-full scrollbar-none" horizontal>
|
||||||
{!widgets ? (
|
{!widgets ? (
|
||||||
<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">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
widgets.map((widget) => renderItem(widget))
|
widgets.map((widget) => renderItem(widget))
|
||||||
|
@ -50,12 +50,12 @@ export function SplashScreen() {
|
|||||||
}, [ndk, db.account]);
|
}, [ndk, db.account]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-zinc-50 dark:bg-zinc-950 relative flex h-screen w-screen items-center justify-center">
|
<div className="relative flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950">
|
||||||
<div data-tauri-drag-region className="absolute left-0 top-0 z-10 h-16 w-full" />
|
<div data-tauri-drag-region className="absolute left-0 top-0 z-10 h-16 w-full" />
|
||||||
<div className="flex min-h-0 w-full flex-1 items-center justify-center px-8">
|
<div className="flex min-h-0 w-full flex-1 items-center justify-center px-8">
|
||||||
<div className="flex flex-col items-center justify-center gap-6">
|
<div className="flex flex-col items-center justify-center gap-6">
|
||||||
<LoaderIcon className="text-zinc-950 dark:text-zinc-50 h-6 w-6 animate-spin" />
|
<LoaderIcon className="h-6 w-6 animate-spin text-neutral-950 dark:text-neutral-50" />
|
||||||
<h3 className="text-zinc-950 dark:text-zinc-50 text-lg font-medium leading-none">
|
<h3 className="text-lg font-medium leading-none text-neutral-950 dark:text-neutral-50">
|
||||||
{!ndk ? 'Connecting...' : 'Syncing...'}
|
{!ndk ? 'Connecting...' : 'Syncing...'}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
@ -138,7 +138,7 @@ export function EditProfileModal() {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
|
||||||
>
|
>
|
||||||
Edit profile
|
Edit profile
|
||||||
</button>
|
</button>
|
||||||
@ -146,13 +146,13 @@ export function EditProfileModal() {
|
|||||||
<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-zinc-100 dark:bg-zinc-900">
|
<div className="relative h-min w-full max-w-xl rounded-xl bg-neutral-100 dark:bg-neutral-900">
|
||||||
<div className="h-min w-full shrink-0 rounded-t-xl border-b border-zinc-200 px-5 py-5 dark:border-zinc-800">
|
<div className="h-min w-full shrink-0 rounded-t-xl border-b border-neutral-200 px-5 py-5 dark:border-neutral-800">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<Dialog.Title className="text-lg font-semibold leading-none text-zinc-900 dark:text-zinc-100">
|
<Dialog.Title className="text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
Edit profile
|
Edit profile
|
||||||
</Dialog.Title>
|
</Dialog.Title>
|
||||||
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-zinc-900 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800">
|
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800">
|
||||||
<CancelIcon className="h-4 w-4" />
|
<CancelIcon className="h-4 w-4" />
|
||||||
</Dialog.Close>
|
</Dialog.Close>
|
||||||
</div>
|
</div>
|
||||||
@ -181,7 +181,7 @@ export function EditProfileModal() {
|
|||||||
<Image
|
<Image
|
||||||
src={picture}
|
src={picture}
|
||||||
alt="user's avatar"
|
alt="user's avatar"
|
||||||
className="h-14 w-14 rounded-lg object-cover ring-2 ring-zinc-900"
|
className="h-14 w-14 rounded-lg object-cover ring-2 ring-neutral-900"
|
||||||
/>
|
/>
|
||||||
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
|
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
|
||||||
<AvatarUploader setPicture={setPicture} />
|
<AvatarUploader setPicture={setPicture} />
|
||||||
@ -193,7 +193,7 @@ export function EditProfileModal() {
|
|||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<label
|
<label
|
||||||
htmlFor="name"
|
htmlFor="name"
|
||||||
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
|
className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
|
||||||
>
|
>
|
||||||
Name
|
Name
|
||||||
</label>
|
</label>
|
||||||
@ -204,13 +204,13 @@ export function EditProfileModal() {
|
|||||||
minLength: 4,
|
minLength: 4,
|
||||||
})}
|
})}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
|
className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<label
|
<label
|
||||||
htmlFor="nip05"
|
htmlFor="nip05"
|
||||||
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
|
className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
|
||||||
>
|
>
|
||||||
NIP-05
|
NIP-05
|
||||||
</label>
|
</label>
|
||||||
@ -221,7 +221,7 @@ export function EditProfileModal() {
|
|||||||
minLength: 4,
|
minLength: 4,
|
||||||
})}
|
})}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
|
className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
|
||||||
/>
|
/>
|
||||||
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
|
||||||
{nip05.verified ? (
|
{nip05.verified ? (
|
||||||
@ -246,20 +246,20 @@ export function EditProfileModal() {
|
|||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<label
|
<label
|
||||||
htmlFor="about"
|
htmlFor="about"
|
||||||
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
|
className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
|
||||||
>
|
>
|
||||||
Bio
|
Bio
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
{...register('about')}
|
{...register('about')}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
className="relative h-20 w-full resize-none rounded-lg bg-zinc-200 px-3 py-2 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
|
className="relative h-20 w-full resize-none rounded-lg bg-neutral-200 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<label
|
<label
|
||||||
htmlFor="website"
|
htmlFor="website"
|
||||||
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
|
className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
|
||||||
>
|
>
|
||||||
Website
|
Website
|
||||||
</label>
|
</label>
|
||||||
@ -267,13 +267,13 @@ export function EditProfileModal() {
|
|||||||
type={'text'}
|
type={'text'}
|
||||||
{...register('website', { required: false })}
|
{...register('website', { required: false })}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
|
className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<label
|
<label
|
||||||
htmlFor="website"
|
htmlFor="website"
|
||||||
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
|
className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
|
||||||
>
|
>
|
||||||
Lightning address
|
Lightning address
|
||||||
</label>
|
</label>
|
||||||
@ -281,14 +281,14 @@ export function EditProfileModal() {
|
|||||||
type={'text'}
|
type={'text'}
|
||||||
{...register('lud16', { required: false })}
|
{...register('lud16', { required: false })}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
|
className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isValid}
|
disabled={!isValid}
|
||||||
className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-interor-500 font-medium text-white hover:bg-interor-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
|
className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
|
||||||
|
@ -58,36 +58,36 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
className="h-full w-full object-cover"
|
className="h-full w-full object-cover"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="h-full w-full bg-zinc-100 dark:bg-zinc-900" />
|
<div className="h-full w-full bg-neutral-100 dark:bg-neutral-900" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-7 flex w-full flex-col items-center px-5">
|
<div className="-mt-7 flex w-full flex-col items-center px-5">
|
||||||
<Image
|
<Image
|
||||||
src={user.picture || user.image}
|
src={user.picture || user.image}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
className="h-14 w-14 rounded-lg ring-2 ring-zinc-100 dark:ring-zinc-900"
|
className="h-14 w-14 rounded-lg ring-2 ring-neutral-100 dark:ring-neutral-900"
|
||||||
/>
|
/>
|
||||||
<div className="mt-2 flex flex-1 flex-col gap-6">
|
<div className="mt-2 flex flex-1 flex-col gap-6">
|
||||||
<div className="flex flex-col items-center gap-1">
|
<div className="flex flex-col items-center gap-1">
|
||||||
<div className="inline-flex flex-col items-center">
|
<div className="inline-flex flex-col items-center">
|
||||||
<h5 className="text-center text-xl font-semibold text-zinc-900 dark:text-zinc-100">
|
<h5 className="text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{user.name || user.display_name || user.displayName || 'No name'}
|
{user.name || user.display_name || user.displayName || 'No name'}
|
||||||
</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 text-zinc-500 dark:text-zinc-400"
|
className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400">
|
<span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400">
|
||||||
{displayNpub(pubkey, 16)}
|
{displayNpub(pubkey, 16)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-6">
|
||||||
{user.about || user.bio ? (
|
{user.about || user.bio ? (
|
||||||
<p className="mt-2 max-w-[500px] select-text break-words text-center text-zinc-900 dark:text-zinc-100">
|
<p className="mt-2 max-w-[500px] select-text break-words text-center text-neutral-900 dark:text-neutral-100">
|
||||||
{user.about || user.bio}
|
{user.about || user.bio}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
@ -101,7 +101,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => unfollowUser(pubkey)}
|
onClick={() => unfollowUser(pubkey)}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
|
||||||
>
|
>
|
||||||
Unfollow
|
Unfollow
|
||||||
</button>
|
</button>
|
||||||
@ -109,20 +109,20 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => followUser(pubkey)}
|
onClick={() => followUser(pubkey)}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
|
||||||
>
|
>
|
||||||
Follow
|
Follow
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<Link
|
<Link
|
||||||
to={`/chats/${pubkey}`}
|
to={`/chats/${pubkey}`}
|
||||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
|
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
|
||||||
>
|
>
|
||||||
Message
|
Message
|
||||||
</Link>
|
</Link>
|
||||||
{db.account.pubkey === pubkey && (
|
{db.account.pubkey === pubkey && (
|
||||||
<>
|
<>
|
||||||
<span className="mx-2 inline-flex h-4 w-px bg-zinc-200 dark:bg-zinc-800" />
|
<span className="mx-2 inline-flex h-4 w-px bg-neutral-200 dark:bg-neutral-800" />
|
||||||
<EditProfileModal />
|
<EditProfileModal />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -16,7 +16,7 @@ export function UserStats({ pubkey }: { pubkey: string }) {
|
|||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full items-center justify-center">
|
<div className="flex w-full items-center justify-center">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -28,38 +28,38 @@ export function UserStats({ pubkey }: { pubkey: string }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex w-full items-center justify-center gap-10">
|
<div className="flex w-full items-center justify-center gap-10">
|
||||||
<div className="inline-flex flex-col items-center gap-1">
|
<div className="inline-flex flex-col items-center gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
|
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
|
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
|
<span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
|
||||||
Followers
|
Followers
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col items-center gap-1">
|
<div className="inline-flex flex-col items-center gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
|
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
|
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
|
<span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
|
||||||
Following
|
Following
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col items-center gap-1">
|
<div className="inline-flex flex-col items-center gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
|
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
{data.stats[pubkey].zaps_received
|
{data.stats[pubkey].zaps_received
|
||||||
? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
|
? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
|
||||||
: 0}
|
: 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
|
<span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
|
||||||
Zaps received
|
Zaps received
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col items-center gap-1">
|
<div className="inline-flex flex-col items-center gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
|
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
{data.stats[pubkey].zaps_sent
|
{data.stats[pubkey].zaps_sent
|
||||||
? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
|
? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
|
||||||
: 0}
|
: 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
|
<span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
|
||||||
Zaps sent
|
Zaps sent
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -68,7 +68,7 @@ export function UserScreen() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="scrollbar-none relative h-full w-full overflow-y-auto">
|
<div className="relative h-full w-full overflow-y-auto scrollbar-none">
|
||||||
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
|
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
|
||||||
<UserProfile pubkey={pubkey} />
|
<UserProfile pubkey={pubkey} />
|
||||||
<div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
|
<div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
|
||||||
@ -84,9 +84,9 @@ export function UserScreen() {
|
|||||||
</div>
|
</div>
|
||||||
) : data.length === 0 ? (
|
) : data.length === 0 ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
|
<div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900">
|
||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<p className="text-center text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
<p className="text-center text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||||
User doesn't have any posts in the last 48 hours.
|
User doesn't have any posts in the last 48 hours.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -55,14 +55,14 @@ export function ActiveAccount() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-1 rounded-lg bg-zinc-100 p-1 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800">
|
<div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
||||||
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
|
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
|
||||||
<Image
|
<Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={db.account.npub}
|
alt={db.account.npub}
|
||||||
className="aspect-square h-full w-full rounded-md"
|
className="aspect-square h-full w-full rounded-md"
|
||||||
/>
|
/>
|
||||||
<span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-zinc-50 dark:ring-zinc-950" />
|
<span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-neutral-50 dark:ring-neutral-950" />
|
||||||
</Link>
|
</Link>
|
||||||
<div className="inline-flex items-center justify-center rounded-md">
|
<div className="inline-flex items-center justify-center rounded-md">
|
||||||
<HorizontalDotsIcon className="h-4 w-4" />
|
<HorizontalDotsIcon className="h-4 w-4" />
|
||||||
|
@ -16,15 +16,15 @@ 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-interor-500';
|
'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-blue-600';
|
||||||
break;
|
break;
|
||||||
case 'publish':
|
case 'publish':
|
||||||
preClass =
|
preClass =
|
||||||
'w-min h-9 px-4 bg-interor-500 rounded-md text-sm font-medium text-white hover:bg-interor-600';
|
'w-min h-9 px-4 bg-blue-500 rounded-md text-sm font-medium text-white hover:bg-blue-600';
|
||||||
break;
|
break;
|
||||||
case 'large':
|
case 'large':
|
||||||
preClass =
|
preClass =
|
||||||
'h-11 w-full bg-interor-500 rounded-lg font-medium text-white hover:bg-interor-600';
|
'h-11 w-full bg-blue-500 rounded-lg font-medium text-white hover:bg-blue-600';
|
||||||
break;
|
break;
|
||||||
case 'large-alt':
|
case 'large-alt':
|
||||||
preClass =
|
preClass =
|
||||||
|
@ -124,7 +124,7 @@ export function Composer() {
|
|||||||
autoCorrect="off"
|
autoCorrect="off"
|
||||||
autoCapitalize="off"
|
autoCapitalize="off"
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'scrollbar-none markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none',
|
'markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none scrollbar-none',
|
||||||
expand ? 'min-h-[500px]' : reply.id ? 'min-h-min' : 'min-h-[120px]'
|
expand ? 'min-h-[500px]' : reply.id ? 'min-h-min' : 'min-h-[120px]'
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
@ -150,7 +150,7 @@ export function Composer() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
disabled={editor && editor.isEmpty}
|
disabled={editor && editor.isEmpty}
|
||||||
className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-interor-500 px-2 font-semibold hover:bg-interor-600 disabled:opacity-50"
|
className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-blue-500 px-2 font-semibold hover:bg-blue-600 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{loading === true ? (
|
{loading === true ? (
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||||
|
@ -28,7 +28,7 @@ export function ComposerModal() {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-zinc-300 hover:bg-interor-600 dark:bg-zinc-700 dark:hover:bg-interor-600"
|
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-neutral-300 hover:bg-blue-600 dark:bg-neutral-700 dark:hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
<ComposeIcon className="h-5 w-5 text-black dark:text-white" />
|
<ComposeIcon className="h-5 w-5 text-black dark:text-white" />
|
||||||
</button>
|
</button>
|
||||||
@ -38,15 +38,15 @@ export function ComposerModal() {
|
|||||||
<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
|
<div
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'relative h-min w-full rounded-xl bg-zinc-100 dark:bg-zinc-900',
|
'relative h-min w-full rounded-xl bg-neutral-100 dark:bg-neutral-900',
|
||||||
expand ? 'max-w-4xl' : 'max-w-2xl'
|
expand ? 'max-w-4xl' : 'max-w-2xl'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between px-4 py-4">
|
<div className="flex items-center justify-between px-4 py-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<ComposerUser pubkey={db.account.pubkey} />
|
<ComposerUser pubkey={db.account.pubkey} />
|
||||||
<ChevronRightIcon className="h-4 w-4 text-zinc-400 dark:text-zinc-600" />
|
<ChevronRightIcon className="h-4 w-4 text-neutral-400 dark:text-neutral-600" />
|
||||||
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-zinc-200 pl-3 pr-1.5 text-sm font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100">
|
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-neutral-200 pl-3 pr-1.5 text-sm font-medium text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100">
|
||||||
New Post
|
New Post
|
||||||
<ChevronDownIcon className="h-4 w-4" />
|
<ChevronDownIcon className="h-4 w-4" />
|
||||||
</div>
|
</div>
|
||||||
@ -55,11 +55,11 @@ export function ComposerModal() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => toggleExpand()}
|
onClick={() => toggleExpand()}
|
||||||
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-200 hover:text-zinc-500 dark:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-400"
|
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-400 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400"
|
||||||
>
|
>
|
||||||
<ExpandIcon className="h-5 w-5" />
|
<ExpandIcon className="h-5 w-5" />
|
||||||
</button>
|
</button>
|
||||||
<Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-200 hover:text-zinc-500 dark:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-400">
|
<Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-400 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400">
|
||||||
<CancelIcon className="h-5 w-5" />
|
<CancelIcon className="h-5 w-5" />
|
||||||
</Dialog.Close>
|
</Dialog.Close>
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,7 +5,7 @@ import { Navigation } from '@shared/navigation';
|
|||||||
|
|
||||||
export function AppLayout() {
|
export function AppLayout() {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-screen flex-col bg-zinc-50 dark:bg-zinc-950">
|
<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
|
||||||
<WindowTitlebar />
|
<WindowTitlebar />
|
||||||
<div className="flex h-full min-h-0 w-full">
|
<div className="flex h-full min-h-0 w-full">
|
||||||
<div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">
|
<div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">
|
||||||
|
@ -3,9 +3,9 @@ import { WindowTitlebar } from 'tauri-controls';
|
|||||||
|
|
||||||
export function AuthLayout() {
|
export function AuthLayout() {
|
||||||
return (
|
return (
|
||||||
<div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950">
|
<div className="relative h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
|
||||||
<WindowTitlebar />
|
<WindowTitlebar />
|
||||||
<div className="bg-zinc-50 dark:bg-zinc-950">
|
<div className="bg-neutral-50 dark:bg-neutral-950">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,7 +8,7 @@ export function SettingsLayout() {
|
|||||||
<div className="flex h-screen w-screen">
|
<div className="flex h-screen w-screen">
|
||||||
<div className="relative flex h-full w-[232px] flex-col">
|
<div className="relative flex h-full w-[232px] flex-col">
|
||||||
<div data-tauri-drag-region className="h-11 w-full shrink-0" />
|
<div data-tauri-drag-region className="h-11 w-full shrink-0" />
|
||||||
<div className="scrollbar-none flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32">
|
<div className="flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32 scrollbar-none">
|
||||||
<div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
|
<div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
|
||||||
<Link
|
<Link
|
||||||
to="/"
|
to="/"
|
||||||
@ -27,7 +27,7 @@ export function SettingsLayout() {
|
|||||||
twMerge(
|
twMerge(
|
||||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
||||||
isActive
|
isActive
|
||||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
? 'border-blue-500 bg-white/5 text-white'
|
||||||
: 'border-transparent text-white/80'
|
: 'border-transparent text-white/80'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -43,7 +43,7 @@ export function SettingsLayout() {
|
|||||||
twMerge(
|
twMerge(
|
||||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
||||||
isActive
|
isActive
|
||||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
? 'border-blue-500 bg-white/5 text-white'
|
||||||
: 'border-transparent text-white/80'
|
: 'border-transparent text-white/80'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -54,7 +54,7 @@ export function Logout() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => logout()}
|
onClick={() => logout()}
|
||||||
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
|
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
Logout
|
Logout
|
||||||
</button>
|
</button>
|
||||||
|
@ -126,7 +126,7 @@ export function Navigation() {
|
|||||||
<ComposerModal />
|
<ComposerModal />
|
||||||
<Link
|
<Link
|
||||||
to="/nwc"
|
to="/nwc"
|
||||||
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-zinc-100 hover:bg-interor-600 dark:bg-zinc-900 dark:hover:bg-interor-600"
|
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-600 dark:bg-neutral-900 dark:hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
<NwcIcon className="h-5 w-5" />
|
<NwcIcon className="h-5 w-5" />
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -45,7 +45,7 @@ export function NoteActions({
|
|||||||
to={`/notes/text/${id}`}
|
to={`/notes/text/${id}`}
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||||
>
|
>
|
||||||
<FocusIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
|
<FocusIcon className="h-5 w-5 text-white/80 group-hover:text-blue-400" />
|
||||||
</Link>
|
</Link>
|
||||||
</Tooltip.Trigger>
|
</Tooltip.Trigger>
|
||||||
<Tooltip.Portal>
|
<Tooltip.Portal>
|
||||||
@ -68,7 +68,7 @@ export function NoteActions({
|
|||||||
}
|
}
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||||
>
|
>
|
||||||
<ThreadIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
|
<ThreadIcon className="h-5 w-5 text-white/80 group-hover:text-blue-400" />
|
||||||
</button>
|
</button>
|
||||||
</Tooltip.Trigger>
|
</Tooltip.Trigger>
|
||||||
<Tooltip.Portal>
|
<Tooltip.Portal>
|
||||||
|
@ -30,9 +30,9 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<DropdownMenu.Trigger asChild>
|
<DropdownMenu.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
|
className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||||
>
|
>
|
||||||
<HorizontalDotsIcon className="h-5 w-5 group-hover:text-interor-600" />
|
<HorizontalDotsIcon className="h-5 w-5 group-hover:text-blue-500" />
|
||||||
</button>
|
</button>
|
||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
</Tooltip.Trigger>
|
</Tooltip.Trigger>
|
||||||
|
@ -62,7 +62,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<Popover.Trigger asChild>
|
<Popover.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
|
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||||
>
|
>
|
||||||
{reaction ? (
|
{reaction ? (
|
||||||
<img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
|
<img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
|
||||||
|
@ -21,7 +21,7 @@ export function NoteReply({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setReply(id, pubkey, root)}
|
onClick={() => setReply(id, pubkey, root)}
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
|
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||||
>
|
>
|
||||||
<ReplyIcon className="h-5 w-5 group-hover:text-green-500" />
|
<ReplyIcon className="h-5 w-5 group-hover:text-green-500" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -44,7 +44,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<AlertDialog.Trigger asChild>
|
<AlertDialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
|
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||||
>
|
>
|
||||||
<RepostIcon
|
<RepostIcon
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
@ -84,7 +84,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
|
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||||
|
@ -93,7 +93,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
|
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||||
>
|
>
|
||||||
<ZapIcon className="h-5 w-5 group-hover:text-orange-400" />
|
<ZapIcon className="h-5 w-5 group-hover:text-orange-400" />
|
||||||
</button>
|
</button>
|
||||||
@ -186,7 +186,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => createZapRequest()}
|
onClick={() => createZapRequest()}
|
||||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium text-white hover:bg-interor-600"
|
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
{isCompleted ? (
|
{isCompleted ? (
|
||||||
<p>Successfully tipped</p>
|
<p>Successfully tipped</p>
|
||||||
@ -210,7 +210,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => createZapRequest()}
|
onClick={() => createZapRequest()}
|
||||||
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium hover:bg-interor-600"
|
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
<p>Create Lightning invoice</p>
|
<p>Create Lightning invoice</p>
|
||||||
</button>
|
</button>
|
||||||
|
@ -63,7 +63,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
|
|||||||
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
|
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
|
||||||
Lume cannot find this post with your current relays, but you can view it
|
Lume cannot find this post with your current relays, but you can view it
|
||||||
via njump.me.{' '}
|
via njump.me.{' '}
|
||||||
<Link to={noteLink} className="text-fuchsia-500">
|
<Link to={noteLink} className="text-blue-500">
|
||||||
Learn more
|
Learn more
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
@ -23,5 +23,6 @@ export * from './skeleton';
|
|||||||
export * from './actions';
|
export * from './actions';
|
||||||
export * from './mentions/hashtag';
|
export * from './mentions/hashtag';
|
||||||
export * from './mentions/boost';
|
export * from './mentions/boost';
|
||||||
|
export * from './mentions/invoice';
|
||||||
export * from './stats';
|
export * from './stats';
|
||||||
export * from './wrapper';
|
export * from './wrapper';
|
||||||
|
@ -61,7 +61,7 @@ export function FileNote(props: { event?: NDKEvent }) {
|
|||||||
<Link
|
<Link
|
||||||
to={url}
|
to={url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="break-all font-normal text-fuchsia-500 hover:text-fuchsia-600"
|
className="break-all font-normal text-blue-500 hover:text-blue-500"
|
||||||
>
|
>
|
||||||
{url}
|
{url}
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -65,7 +65,7 @@ export function Repost({
|
|||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
|
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
|
||||||
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
|
!lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
||||||
@ -104,7 +104,7 @@ export function Repost({
|
|||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'relative overflow-hidden rounded-xl px-3 py-3',
|
'relative overflow-hidden rounded-xl px-3 py-3',
|
||||||
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
|
!lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="relative flex flex-col">
|
<div className="relative flex flex-col">
|
||||||
@ -123,7 +123,7 @@ export function Repost({
|
|||||||
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
|
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
|
||||||
Lume cannot find this post with your current relays, but you can view
|
Lume cannot find this post with your current relays, but you can view
|
||||||
it via njump.me.{' '}
|
it via njump.me.{' '}
|
||||||
<Link to={noteLink} className="text-fuchsia-500">
|
<Link to={noteLink} className="text-blue-500">
|
||||||
Learn more
|
Learn more
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
@ -142,7 +142,7 @@ export function Repost({
|
|||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
|
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
|
||||||
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
|
!lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
||||||
|
@ -6,6 +6,7 @@ import {
|
|||||||
Boost,
|
Boost,
|
||||||
Hashtag,
|
Hashtag,
|
||||||
ImagePreview,
|
ImagePreview,
|
||||||
|
Invoice,
|
||||||
LinkPreview,
|
LinkPreview,
|
||||||
MentionNote,
|
MentionNote,
|
||||||
MentionUser,
|
MentionUser,
|
||||||
@ -21,7 +22,7 @@ export function TextNote(props: { content?: string }) {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
|
className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
|
||||||
remarkPlugins={[remarkGfm]}
|
remarkPlugins={[remarkGfm]}
|
||||||
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
|
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
|
||||||
unwrapDisallowed={true}
|
unwrapDisallowed={true}
|
||||||
@ -36,7 +37,7 @@ export function TextNote(props: { content?: string }) {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
|
className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
|
||||||
remarkPlugins={[remarkGfm]}
|
remarkPlugins={[remarkGfm]}
|
||||||
components={{
|
components={{
|
||||||
a: ({ href }) => {
|
a: ({ href }) => {
|
||||||
@ -60,6 +61,9 @@ export function TextNote(props: { content?: string }) {
|
|||||||
if (key.startsWith('boost')) {
|
if (key.startsWith('boost')) {
|
||||||
return <Boost boost={key.replace('boost-', '')} />;
|
return <Boost boost={key.replace('boost-', '')} />;
|
||||||
}
|
}
|
||||||
|
if (key.startsWith('lnbc')) {
|
||||||
|
return <Invoice invoice={key.replace('lnbc-', '')} />;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
|
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
|
||||||
|
@ -3,15 +3,15 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|||||||
export function UnknownNote(props: { event?: NDKEvent }) {
|
export function UnknownNote(props: { event?: NDKEvent }) {
|
||||||
return (
|
return (
|
||||||
<div className="mt-2 flex w-full flex-col gap-2">
|
<div className="mt-2 flex w-full flex-col gap-2">
|
||||||
<div className="inline-flex flex-col rounded-md bg-zinc-200 px-2 py-2 dark:bg-zinc-800">
|
<div className="inline-flex flex-col rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
|
||||||
<span className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
Kind: {props.event.kind}
|
Kind: {props.event.kind}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-sm text-zinc-800 dark:text-zinc-200">
|
<p className="text-sm text-neutral-800 dark:text-neutral-200">
|
||||||
Unsupport kind on newsfeed
|
Unsupport kind on newsfeed
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="select-text whitespace-pre-line break-all text-zinc-800 dark:text-zinc-200">
|
<div className="select-text whitespace-pre-line break-all text-neutral-800 dark:text-neutral-200">
|
||||||
<p>{props.event.content.toString()}</p>
|
<p>{props.event.content.toString()}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
export function Boost({ boost }: { boost: string }) {
|
export function Boost({ boost }: { boost: string }) {
|
||||||
return (
|
return <span className="break-words text-blue-400 hover:text-blue-500">{boost}</span>;
|
||||||
<span className="break-words text-fuchsia-400 hover:text-fuchsia-500">{boost}</span>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
@ -24,7 +24,7 @@ export function Hashtag({ tag }: { tag: string }) {
|
|||||||
content: tag.replace('#', ''),
|
content: tag.replace('#', ''),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
className="break-all text-interor-500 hover:text-interor-600"
|
className="break-all text-blue-500 hover:text-blue-500"
|
||||||
>
|
>
|
||||||
{tag}
|
{tag}
|
||||||
</span>
|
</span>
|
||||||
|
9
src/shared/notes/mentions/invoice.tsx
Normal file
9
src/shared/notes/mentions/invoice.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { QRCodeSVG } from 'qrcode.react';
|
||||||
|
|
||||||
|
export function Invoice({ invoice }: { invoice: string }) {
|
||||||
|
return (
|
||||||
|
<div className="mt-2 flex items-center rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
|
||||||
|
<QRCodeSVG value={invoice} includeMargin={true} className="rounded-lg" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -71,7 +71,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
|||||||
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
|
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
|
||||||
Lume cannot find this post with your current relays, but you can view it via
|
Lume cannot find this post with your current relays, but you can view it via
|
||||||
njump.me.{' '}
|
njump.me.{' '}
|
||||||
<Link to={noteLink} className="text-fuchsia-500">
|
<Link to={noteLink} className="text-blue-500">
|
||||||
Learn more
|
Learn more
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
@ -30,7 +30,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
|
|||||||
content: pubkey,
|
content: pubkey,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
className="break-words text-interor-500 hover:text-interor-600"
|
className="break-words text-blue-500 hover:text-blue-500"
|
||||||
>
|
>
|
||||||
{'@' +
|
{'@' +
|
||||||
(user?.name ||
|
(user?.name ||
|
||||||
|
@ -31,7 +31,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
|
|||||||
<p className="text-sm text-white/50">
|
<p className="text-sm text-white/50">
|
||||||
Can't fetch open graph, click to open webpage
|
Can't fetch open graph, click to open webpage
|
||||||
</p>
|
</p>
|
||||||
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100">
|
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
{domain.hostname}
|
{domain.hostname}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -48,15 +48,15 @@ export function LinkPreview({ urls }: { urls: string[] }) {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
|
<div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
|
||||||
<h5 className="line-clamp-1 text-base font-semibold text-zinc-900 dark:text-zinc-100">
|
<h5 className="line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{data.title}
|
{data.title}
|
||||||
</h5>
|
</h5>
|
||||||
{data.description && (
|
{data.description && (
|
||||||
<p className="line-clamp-3 break-all text-sm text-zinc-500 dark:text-zinc-400">
|
<p className="line-clamp-3 break-all text-sm text-neutral-500 dark:text-neutral-400">
|
||||||
{data.description}
|
{data.description}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
<span className="mt-2.5 text-sm text-zinc-500 dark:text-zinc-400">
|
<span className="mt-2.5 text-sm text-neutral-500 dark:text-neutral-400">
|
||||||
{domain.hostname}
|
{domain.hostname}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -7,7 +7,7 @@ export function Reply({ event, root }: { event: NDKEventWithReplies; root?: stri
|
|||||||
return (
|
return (
|
||||||
<div className="relative h-min w-full">
|
<div className="relative h-min w-full">
|
||||||
{event?.replies?.length > 0 && (
|
{event?.replies?.length > 0 && (
|
||||||
<div className="absolute -left-3 top-0 h-[calc(100%-1.2rem)] w-px bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300" />
|
<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">
|
||||||
|
@ -61,23 +61,23 @@ export function NoteStats({ id }: { id: string }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-3 flex w-full flex-wrap gap-2">
|
<div className="mt-3 flex w-full flex-wrap gap-2">
|
||||||
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
|
<div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
|
||||||
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
<div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{compactNumber.format(data.reactions)}
|
{compactNumber.format(data.reactions)}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-zinc-500 dark:text-zinc-300">Reactions</div>
|
<div className="text-sm text-neutral-500 dark:text-neutral-300">Reactions</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
|
<div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
|
||||||
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
<div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{compactNumber.format(data.reposts)}
|
{compactNumber.format(data.reposts)}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-zinc-500 dark:text-zinc-300">Reposts</div>
|
<div className="text-sm text-neutral-500 dark:text-neutral-300">Reposts</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
|
<div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
|
||||||
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
<div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{compactNumber.format(data.zaps)}
|
{compactNumber.format(data.zaps)}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-zinc-500 dark:text-zinc-300">Zaps</div>
|
<div className="text-sm text-neutral-500 dark:text-neutral-300">Zaps</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -24,7 +24,7 @@ export function NoteWrapper({
|
|||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'relative overflow-hidden rounded-xl px-3 py-4',
|
'relative overflow-hidden rounded-xl px-3 py-4',
|
||||||
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
|
!lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="relative">{root && <ChildNote id={root} />}</div>
|
<div className="relative">{root && <ChildNote id={root} />}</div>
|
||||||
|
@ -11,14 +11,14 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3">
|
<div className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3">
|
||||||
<div className="w-6" />
|
<div className="w-6" />
|
||||||
<h3 className="text-sm font-medium tracking-wide text-zinc-900 dark:text-zinc-100">
|
<h3 className="text-sm font-medium tracking-wide text-neutral-900 dark:text-neutral-100">
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
{id ? (
|
{id ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => remove(db, id)}
|
onClick={() => remove(db, id)}
|
||||||
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-zinc-900 backdrop-blur-xl hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-900"
|
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-neutral-900 backdrop-blur-xl hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
|
||||||
>
|
>
|
||||||
<CancelIcon className="h-3 w-3" />
|
<CancelIcon className="h-3 w-3" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -84,14 +84,14 @@ export const User = memo(function User({
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex flex-1 items-baseline gap-2">
|
<div className="flex flex-1 items-baseline gap-2">
|
||||||
<h5 className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
displayNpub(pubkey, 16)}
|
displayNpub(pubkey, 16)}
|
||||||
</h5>
|
</h5>
|
||||||
<span className="text-zinc-500 dark:text-zinc-300">·</span>
|
<span className="text-neutral-500 dark:text-neutral-300">·</span>
|
||||||
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
|
<span className="text-neutral-500 dark:text-neutral-300">{createdAt}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -119,7 +119,7 @@ export const User = memo(function User({
|
|||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex h-full flex-col items-start justify-between">
|
<div className="flex h-full flex-col items-start justify-between">
|
||||||
<div className="flex flex-col items-start gap-1 text-start">
|
<div className="flex flex-col items-start gap-1 text-start">
|
||||||
<p className="max-w-[15rem] truncate text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
<p className="max-w-[15rem] truncate text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{user?.name || user?.display_name || user?.displayName}
|
{user?.name || user?.display_name || user?.displayName}
|
||||||
</p>
|
</p>
|
||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
@ -137,7 +137,7 @@ export const User = memo(function User({
|
|||||||
<Link
|
<Link
|
||||||
to={user?.website}
|
to={user?.website}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="inline-flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100/70"
|
className="inline-flex items-center gap-2 text-sm text-neutral-900 dark:text-neutral-100/70"
|
||||||
>
|
>
|
||||||
<WorldIcon className="h-4 w-4" />
|
<WorldIcon className="h-4 w-4" />
|
||||||
<p className="max-w-[10rem] truncate">{user?.website}</p>
|
<p className="max-w-[10rem] truncate">{user?.website}</p>
|
||||||
@ -170,10 +170,10 @@ export const User = memo(function User({
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex w-full flex-col items-start">
|
<div className="flex w-full flex-col items-start">
|
||||||
<h3 className="max-w-[15rem] truncate font-medium text-zinc-900 dark:text-zinc-100">
|
<h3 className="max-w-[15rem] truncate font-medium text-neutral-900 dark:text-neutral-100">
|
||||||
{user?.name || user?.display_name || user?.displayName}
|
{user?.name || user?.display_name || user?.displayName}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/70">
|
<p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/70">
|
||||||
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
|
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -250,7 +250,7 @@ export const User = memo(function User({
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="inline-flex items-baseline gap-1">
|
<div className="inline-flex items-baseline gap-1">
|
||||||
<h5 className="max-w-[10rem] truncate font-medium text-zinc-900 dark:text-zinc-100/80">
|
<h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
@ -284,10 +284,10 @@ export const User = memo(function User({
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex flex-1 flex-col">
|
<div className="flex flex-1 flex-col">
|
||||||
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
<h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{user?.name || user?.display_name || user?.displayName || 'Anon'}
|
{user?.name || user?.display_name || user?.displayName || 'Anon'}
|
||||||
</h5>
|
</h5>
|
||||||
<div className="inline-flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-300">
|
<div className="inline-flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-300">
|
||||||
<span>{createdAt}</span>
|
<span>{createdAt}</span>
|
||||||
<span>·</span>
|
<span>·</span>
|
||||||
<span>{displayNpub(pubkey, 16)}</span>
|
<span>{displayNpub(pubkey, 16)}</span>
|
||||||
@ -320,19 +320,19 @@ export const User = memo(function User({
|
|||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
</HoverCard.Trigger>
|
</HoverCard.Trigger>
|
||||||
<div className="flex flex-1 items-center gap-2">
|
<div className="flex flex-1 items-center gap-2">
|
||||||
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
<h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
displayNpub(pubkey, 16)}
|
displayNpub(pubkey, 16)}
|
||||||
</h5>
|
</h5>
|
||||||
<span className="text-zinc-500 dark:text-zinc-300">·</span>
|
<span className="text-neutral-500 dark:text-neutral-300">·</span>
|
||||||
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
|
<span className="text-neutral-500 dark:text-neutral-300">{createdAt}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<HoverCard.Portal>
|
<HoverCard.Portal>
|
||||||
<HoverCard.Content
|
<HoverCard.Content
|
||||||
className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl focus:outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all"
|
className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all focus:outline-none"
|
||||||
sideOffset={5}
|
sideOffset={5}
|
||||||
>
|
>
|
||||||
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
|
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
|
||||||
@ -365,16 +365,16 @@ export const User = memo(function User({
|
|||||||
<NIP05
|
<NIP05
|
||||||
pubkey={pubkey}
|
pubkey={pubkey}
|
||||||
nip05={user?.nip05}
|
nip05={user?.nip05}
|
||||||
className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300"
|
className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300">
|
<span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300">
|
||||||
{displayNpub(pubkey, 16)}
|
{displayNpub(pubkey, 16)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="line-clamp-3 break-all text-sm leading-tight text-zinc-900 dark:text-zinc-100">
|
<p className="line-clamp-3 break-all text-sm leading-tight text-neutral-900 dark:text-neutral-100">
|
||||||
{user?.about}
|
{user?.about}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -383,13 +383,13 @@ export const User = memo(function User({
|
|||||||
<div className="flex items-center gap-2 px-3 py-3">
|
<div className="flex items-center gap-2 px-3 py-3">
|
||||||
<Link
|
<Link
|
||||||
to={`/users/${pubkey}`}
|
to={`/users/${pubkey}`}
|
||||||
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
|
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
View profile
|
View profile
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to={`/chats/${pubkey}`}
|
to={`/chats/${pubkey}`}
|
||||||
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
|
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
Message
|
Message
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -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-interor-500"
|
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"
|
||||||
>
|
>
|
||||||
Unfollow
|
Unfollow
|
||||||
</button>
|
</button>
|
||||||
@ -70,14 +70,14 @@ 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-interor-500"
|
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"
|
||||||
>
|
>
|
||||||
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-interor-500"
|
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"
|
||||||
>
|
>
|
||||||
Message
|
Message
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -42,29 +42,29 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mb-3 px-3">
|
<div className="mb-3 px-3">
|
||||||
<div className="h-max w-full rounded-lg bg-zinc-100 p-3 dark:bg-zinc-900">
|
<div className="h-max w-full rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
|
||||||
<div className="flex flex-col items-center gap-3">
|
<div className="flex flex-col items-center gap-3">
|
||||||
{firstTime ? (
|
{firstTime ? (
|
||||||
<div>
|
<div>
|
||||||
<span className="text-4xl">👋</span>
|
<span className="text-4xl">👋</span>
|
||||||
<h3 className="mt-2 font-semibold leading-tight text-zinc-100 dark:text-zinc-900">
|
<h3 className="mt-2 font-semibold leading-tight text-neutral-100 dark:text-neutral-900">
|
||||||
Hello, this is the first time you're using Lume
|
Hello, this is the first time you're using Lume
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-zinc-500">
|
<p className="text-sm text-neutral-500">
|
||||||
Lume is downloading all events since the last 24 hours. It will auto
|
Lume is downloading all events since the last 24 hours. It will auto
|
||||||
refresh when it done, please be patient
|
refresh when it done, please be patient
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
|
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
|
||||||
Downloading all events while you're away...
|
Downloading all events while you're away...
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
|
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800">
|
||||||
<div
|
<div
|
||||||
className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
|
className="flex flex-col justify-center overflow-hidden bg-blue-500 transition-all duration-1000 ease-smooth"
|
||||||
role="progressbar"
|
role="progressbar"
|
||||||
style={{ width: `${progress}%` }}
|
style={{ width: `${progress}%` }}
|
||||||
/>
|
/>
|
||||||
|
@ -47,7 +47,7 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center ">
|
<div className="flex h-full w-full items-center justify-center ">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
Loading article...
|
Loading article...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -57,17 +57,17 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||||
Oops, it looks like there are no articles.
|
Oops, it looks like there are no articles.
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-zinc-500 dark:text-zinc-400">
|
<p className="text-neutral-500 dark:text-neutral-400">
|
||||||
You can close this widget
|
You can close this widget
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{data.map((item) => renderItem(item))}
|
{data.map((item) => renderItem(item))}
|
||||||
<div className="h-16" />
|
<div className="h-16" />
|
||||||
</VList>
|
</VList>
|
||||||
|
@ -49,7 +49,7 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center ">
|
<div className="flex h-full w-full items-center justify-center ">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
Loading file sharing event...
|
Loading file sharing event...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -59,17 +59,17 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||||
Oops, it looks like there are no file sharing events.
|
Oops, it looks like there are no file sharing events.
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-zinc-500 dark:text-zinc-400">
|
<p className="text-neutral-500 dark:text-neutral-400">
|
||||||
You can close this widget
|
You can close this widget
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{data.map((item) => renderItem(item))}
|
{data.map((item) => renderItem(item))}
|
||||||
<div className="h-16" />
|
<div className="h-16" />
|
||||||
</VList>
|
</VList>
|
||||||
|
@ -79,7 +79,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center">
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
Loading event related to the hashtag {params.title}...
|
Loading event related to the hashtag {params.title}...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -89,17 +89,17 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||||
Oops, it looks like there are no events related to {params.title}.
|
Oops, it looks like there are no events related to {params.title}.
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-zinc-500 dark:text-zinc-400">
|
<p className="text-neutral-500 dark:text-neutral-400">
|
||||||
You can close this widget or try with other hashtag
|
You can close this widget or try with other hashtag
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{data.map((item) => renderItem(item))}
|
{data.map((item) => renderItem(item))}
|
||||||
<div className="h-16" />
|
<div className="h-16" />
|
||||||
</VList>
|
</VList>
|
||||||
|
@ -49,7 +49,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center ">
|
<div className="flex h-full w-full items-center justify-center ">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
Loading article...
|
Loading article...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -59,38 +59,38 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||||
Oops, it looks like there are no articles.
|
Oops, it looks like there are no articles.
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-zinc-500 dark:text-zinc-400">
|
<p className="text-neutral-500 dark:text-neutral-400">
|
||||||
You can close this widget
|
You can close this widget
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{dbEvents.map((item) => renderItem(item))}
|
{dbEvents.map((item) => renderItem(item))}
|
||||||
<div className="flex items-center justify-center px-3 py-1.5">
|
<div className="flex items-center justify-center px-3 py-1.5">
|
||||||
{dbEvents.length > 0 ? (
|
{dbEvents.length > 0 ? (
|
||||||
<button
|
<button
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<>
|
<>
|
||||||
<span>Loading...</span>
|
<span>Loading...</span>
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
</>
|
</>
|
||||||
) : hasNextPage ? (
|
) : hasNextPage ? (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Load more</span>
|
<span>Load more</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Nothing more to load</span>
|
<span>Nothing more to load</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -85,7 +85,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center">
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
Loading newsfeed...
|
Loading newsfeed...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -95,38 +95,38 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||||
Oops, it looks like there are no posts.
|
Oops, it looks like there are no posts.
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-zinc-500 dark:text-zinc-400">
|
<p className="text-neutral-500 dark:text-neutral-400">
|
||||||
You can close this widget
|
You can close this widget
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{dbEvents.map((item) => renderItem(item))}
|
{dbEvents.map((item) => renderItem(item))}
|
||||||
<div className="flex items-center justify-center px-3 py-1.5">
|
<div className="flex items-center justify-center px-3 py-1.5">
|
||||||
{dbEvents.length > 0 ? (
|
{dbEvents.length > 0 ? (
|
||||||
<button
|
<button
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<>
|
<>
|
||||||
<span>Loading...</span>
|
<span>Loading...</span>
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
</>
|
</>
|
||||||
) : hasNextPage ? (
|
) : hasNextPage ? (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Load more</span>
|
<span>Load more</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Nothing more to load</span>
|
<span>Nothing more to load</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -49,7 +49,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center ">
|
<div className="flex h-full w-full items-center justify-center ">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
Loading file sharing event...
|
Loading file sharing event...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -59,38 +59,38 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||||
Oops, it looks like there are no file sharing events.
|
Oops, it looks like there are no file sharing events.
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-zinc-500 dark:text-zinc-400">
|
<p className="text-neutral-500 dark:text-neutral-400">
|
||||||
You can close this widget
|
You can close this widget
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{dbEvents.map((item) => renderItem(item))}
|
{dbEvents.map((item) => renderItem(item))}
|
||||||
<div className="flex items-center justify-center px-3 py-1.5">
|
<div className="flex items-center justify-center px-3 py-1.5">
|
||||||
{dbEvents.length > 0 ? (
|
{dbEvents.length > 0 ? (
|
||||||
<button
|
<button
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<>
|
<>
|
||||||
<span>Loading...</span>
|
<span>Loading...</span>
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
</>
|
</>
|
||||||
) : hasNextPage ? (
|
) : hasNextPage ? (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Load more</span>
|
<span>Load more</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Nothing more to load</span>
|
<span>Nothing more to load</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -84,7 +84,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center ">
|
<div className="flex h-full w-full items-center justify-center ">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
Loading post...
|
Loading post...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -94,38 +94,38 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||||
Oops, it looks like there are no posts.
|
Oops, it looks like there are no posts.
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-zinc-500 dark:text-zinc-400">
|
<p className="text-neutral-500 dark:text-neutral-400">
|
||||||
You can close this widget
|
You can close this widget
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{dbEvents.map((item) => renderItem(item))}
|
{dbEvents.map((item) => renderItem(item))}
|
||||||
<div className="flex items-center justify-center px-3 py-1.5">
|
<div className="flex items-center justify-center px-3 py-1.5">
|
||||||
{dbEvents.length > 0 ? (
|
{dbEvents.length > 0 ? (
|
||||||
<button
|
<button
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<>
|
<>
|
||||||
<span>Loading...</span>
|
<span>Loading...</span>
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
</>
|
</>
|
||||||
) : hasNextPage ? (
|
) : hasNextPage ? (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Load more</span>
|
<span>Load more</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Nothing more to load</span>
|
<span>Nothing more to load</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -106,14 +106,14 @@ export function LocalNetworkWidget() {
|
|||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
|
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : dbEvents.length === 0 ? (
|
) : dbEvents.length === 0 ? (
|
||||||
<EventLoader firstTime={true} />
|
<EventLoader firstTime={true} />
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{!isFetched ? <EventLoader firstTime={false} /> : null}
|
{!isFetched ? <EventLoader firstTime={false} /> : null}
|
||||||
{dbEvents.map((item) => renderItem(item))}
|
{dbEvents.map((item) => renderItem(item))}
|
||||||
<div className="flex items-center justify-center px-3 py-1.5">
|
<div className="flex items-center justify-center px-3 py-1.5">
|
||||||
@ -121,21 +121,21 @@ export function LocalNetworkWidget() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => fetchNextPage()}
|
onClick={() => fetchNextPage()}
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
disabled={!hasNextPage || isFetchingNextPage}
|
||||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
|
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||||
>
|
>
|
||||||
{isFetchingNextPage ? (
|
{isFetchingNextPage ? (
|
||||||
<>
|
<>
|
||||||
<span>Loading...</span>
|
<span>Loading...</span>
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
</>
|
</>
|
||||||
) : hasNextPage ? (
|
) : hasNextPage ? (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Load more</span>
|
<span>Load more</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
|
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
|
||||||
<span>Nothing more to load</span>
|
<span>Nothing more to load</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -44,16 +44,16 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
|
|||||||
return (
|
return (
|
||||||
<WidgetWrapper>
|
<WidgetWrapper>
|
||||||
<TitleBar id={params.id} title={params.title} />
|
<TitleBar id={params.id} title={params.title} />
|
||||||
<div className="scrollbar-none h-full overflow-y-auto">
|
<div className="h-full overflow-y-auto scrollbar-none">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
|
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="h-min w-full px-3">
|
<div className="h-min w-full px-3">
|
||||||
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
|
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||||
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
|
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
|
||||||
<div className="mt-2">{renderKind(data)}</div>
|
<div className="mt-2">{renderKind(data)}</div>
|
||||||
<NoteActions
|
<NoteActions
|
||||||
|
@ -81,26 +81,26 @@ export function LocalUserWidget({ params }: { params: Widget }) {
|
|||||||
return (
|
return (
|
||||||
<WidgetWrapper>
|
<WidgetWrapper>
|
||||||
<TitleBar id={params.id} title={params.title} />
|
<TitleBar id={params.id} title={params.title} />
|
||||||
<div className="scrollbar-none h-full overflow-y-auto">
|
<div className="h-full overflow-y-auto scrollbar-none">
|
||||||
<div className="px-3 pt-1.5">
|
<div className="px-3 pt-1.5">
|
||||||
<UserProfile pubkey={params.content} />
|
<UserProfile pubkey={params.content} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
Latest posts
|
Latest posts
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
|
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||||
<NoteSkeleton />
|
<NoteSkeleton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : data.length === 0 ? (
|
) : data.length === 0 ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
<div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
|
<div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900">
|
||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<p className="text-center text-sm text-zinc-900 dark:text-zinc-100">
|
<p className="text-center text-sm text-neutral-900 dark:text-neutral-100">
|
||||||
No new post from 24 hours ago
|
No new post from 24 hours ago
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -40,7 +40,7 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center ">
|
<div className="flex h-full w-full items-center justify-center ">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
|
||||||
Loading trending accounts...
|
Loading trending accounts...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -50,14 +50,14 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
|
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
|
||||||
Sorry, an unexpected error has occurred.
|
Sorry, an unexpected error has occurred.
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{data.map((item: Profile) => (
|
{data.map((item: Profile) => (
|
||||||
<NostrBandUserProfile key={item.pubkey} data={item} />
|
<NostrBandUserProfile key={item.pubkey} data={item} />
|
||||||
))}
|
))}
|
||||||
|
@ -41,7 +41,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex h-full w-full items-center justify-center ">
|
<div className="flex h-full w-full items-center justify-center ">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
||||||
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
|
||||||
Loading trending posts...
|
Loading trending posts...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -51,14 +51,14 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
|
|||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
|
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
|
||||||
Sorry, an unexpected error has occurred.
|
Sorry, an unexpected error has occurred.
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<VList className="scrollbar-none h-full">
|
<VList className="h-full scrollbar-none">
|
||||||
{data.map((item) => (
|
{data.map((item) => (
|
||||||
<NoteWrapper key={item.event.id} event={item.event}>
|
<NoteWrapper key={item.event.id} event={item.event}>
|
||||||
<TextNote content={item.event.content} />
|
<TextNote content={item.event.content} />
|
||||||
|
@ -65,7 +65,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
|||||||
|
|
||||||
if (!profile) {
|
if (!profile) {
|
||||||
return (
|
return (
|
||||||
<div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
|
<div className="rounded-xl bg-neutral-100 px-5 py-5 dark:bg-neutral-900">
|
||||||
<p>Can't fetch profile</p>
|
<p>Can't fetch profile</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -73,7 +73,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-min w-full px-3 pb-3">
|
<div className="h-min w-full px-3 pb-3">
|
||||||
<div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
|
<div className="rounded-xl bg-neutral-100 px-5 py-5 dark:bg-neutral-900">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="inline-flex items-center gap-2">
|
<div className="inline-flex items-center gap-2">
|
||||||
<Image
|
<Image
|
||||||
@ -81,10 +81,10 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
|||||||
className="h-11 w-11 shrink-0 rounded-lg object-cover"
|
className="h-11 w-11 shrink-0 rounded-lg object-cover"
|
||||||
/>
|
/>
|
||||||
<div className="inline-flex flex-col">
|
<div className="inline-flex flex-col">
|
||||||
<h3 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
<h3 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{profile.display_name || profile.name}
|
{profile.display_name || profile.name}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/50">
|
<p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/50">
|
||||||
{profile.nip05 || shortenKey(data.pubkey)}
|
{profile.nip05 || shortenKey(data.pubkey)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -94,7 +94,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => unfollowUser(data.pubkey)}
|
onClick={() => unfollowUser(data.pubkey)}
|
||||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-200 text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-white dark:bg-neutral-800 dark:text-neutral-100 dark:hover:text-white"
|
||||||
>
|
>
|
||||||
<UnfollowIcon className="h-4 w-4" />
|
<UnfollowIcon className="h-4 w-4" />
|
||||||
</button>
|
</button>
|
||||||
@ -102,7 +102,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => followUser(data.pubkey)}
|
onClick={() => followUser(data.pubkey)}
|
||||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-200 text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-white dark:bg-neutral-800 dark:text-neutral-100 dark:hover:text-white"
|
||||||
>
|
>
|
||||||
<FollowIcon className="h-4 w-4" />
|
<FollowIcon className="h-4 w-4" />
|
||||||
</button>
|
</button>
|
||||||
@ -110,7 +110,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
<p className="whitespace-pre-line break-words text-zinc-900 dark:text-zinc-100">
|
<p className="whitespace-pre-line break-words text-neutral-900 dark:text-neutral-100">
|
||||||
{profile.about || profile.bio}
|
{profile.about || profile.bio}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -120,30 +120,30 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
|||||||
) : (
|
) : (
|
||||||
<div className="flex w-full items-center gap-8">
|
<div className="flex w-full items-center gap-8">
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
|
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
{userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
|
{userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
|
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
|
||||||
Followers
|
Followers
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
|
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
{userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
|
{userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
|
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
|
||||||
Following
|
Following
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
|
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
{userStats.stats[data.pubkey].zaps_received
|
{userStats.stats[data.pubkey].zaps_received
|
||||||
? compactNumber.format(
|
? compactNumber.format(
|
||||||
userStats.stats[data.pubkey].zaps_received.msats / 1000
|
userStats.stats[data.pubkey].zaps_received.msats / 1000
|
||||||
)
|
)
|
||||||
: 0}
|
: 0}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
|
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
|
||||||
Zaps received
|
Zaps received
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -24,10 +24,10 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
|
|||||||
return (
|
return (
|
||||||
<WidgetWrapper>
|
<WidgetWrapper>
|
||||||
<TitleBar id={params.id} title="The Joy of Nostr" />
|
<TitleBar id={params.id} title="The Joy of Nostr" />
|
||||||
<div className="scrollbar-none h-full overflow-y-auto px-3 pb-20">
|
<div className="h-full overflow-y-auto px-3 pb-20 scrollbar-none">
|
||||||
{resources.map((resource, index) => (
|
{resources.map((resource, index) => (
|
||||||
<div key={index} className="mb-6">
|
<div key={index} className="mb-6">
|
||||||
<h3 className="mb-2 text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<h3 className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
{resource.title}
|
{resource.title}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
@ -37,24 +37,26 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
|
|||||||
key={index}
|
key={index}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => open(item.id)}
|
onClick={() => open(item.id)}
|
||||||
className="flex items-center justify-between rounded-xl bg-zinc-100 px-4 py-3 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"
|
className="flex items-center justify-between rounded-xl bg-neutral-100 px-4 py-3 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
|
||||||
>
|
>
|
||||||
<div className="flex flex-col items-start">
|
<div className="flex flex-col items-start">
|
||||||
<h5 className="font-semibold text-zinc-900 dark:text-zinc-100">
|
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
{item.title}
|
{item.title}
|
||||||
</h5>
|
</h5>
|
||||||
{seens.has(item.id) ? (
|
{seens.has(item.id) ? (
|
||||||
<p className="text-sm text-green-500">Readed</p>
|
<p className="text-sm text-green-500">Readed</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">Unread</p>
|
<p className="text-sm text-neutral-500 dark:text-neutral-400">
|
||||||
|
Unread
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ArrowRightIcon className="h-5 w-5 text-zinc-100 dark:text-zinc-900" />
|
<ArrowRightIcon className="h-5 w-5 text-neutral-100 dark:text-neutral-900" />
|
||||||
</button>
|
</button>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<div className="flex h-14 items-center justify-center rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
|
<div className="flex h-14 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||||
<p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||||
More resources are coming, stay tuned.
|
More resources are coming, stay tuned.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,7 +44,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
|
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
|
||||||
<div className="w-full px-5">
|
<div className="w-full px-5">
|
||||||
<h3 className="mb-4 text-center font-semibold text-zinc-900 dark:text-zinc-100">
|
<h3 className="mb-4 text-center font-semibold text-neutral-900 dark:text-neutral-100">
|
||||||
Choose account you want to add to group feeds
|
Choose account you want to add to group feeds
|
||||||
</h3>
|
</h3>
|
||||||
<div className="mb-0 flex flex-col gap-2">
|
<div className="mb-0 flex flex-col gap-2">
|
||||||
@ -53,16 +53,16 @@ export function XfeedsWidget({ params }: { params: Widget }) {
|
|||||||
value={title}
|
value={title}
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
placeholder="Title"
|
placeholder="Title"
|
||||||
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
|
className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-300"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="scrollbar-none flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-zinc-200 py-2 dark:bg-zinc-800">
|
<div className="flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-neutral-200 py-2 scrollbar-none dark:bg-neutral-800">
|
||||||
{db.account.network.map((item: string) => (
|
{db.account.network.map((item: string) => (
|
||||||
<button
|
<button
|
||||||
key={item}
|
key={item}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => toggleGroup(item)}
|
onClick={() => toggleGroup(item)}
|
||||||
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-zinc-300 dark:hover:bg-zinc-700"
|
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-neutral-300 dark:hover:bg-neutral-700"
|
||||||
>
|
>
|
||||||
<User pubkey={item} variant="simple" />
|
<User pubkey={item} variant="simple" />
|
||||||
{groups.includes(item) && (
|
{groups.includes(item) && (
|
||||||
@ -78,7 +78,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
|
|||||||
type="submit"
|
type="submit"
|
||||||
disabled={groups.length < 1}
|
disabled={groups.length < 1}
|
||||||
onClick={submit}
|
onClick={submit}
|
||||||
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
|
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
|
||||||
>
|
>
|
||||||
<span className="w-5" />
|
<span className="w-5" />
|
||||||
<span>Add {groups.length} account to group feed</span>
|
<span>Add {groups.length} account to group feed</span>
|
||||||
@ -87,7 +87,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={cancel}
|
onClick={cancel}
|
||||||
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
|
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-neutral-900 hover:bg-neutral-200 focus:outline-none disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-800"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user