mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-14 09:13:31 +00:00
redesign sidebar
This commit is contained in:
Ren Amamiya
parent
9941305998
commit
e97d0281e2
@ -4,7 +4,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lume</title>
|
||||
</head>
|
||||
<body class="cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen bg-white dark:bg-black text-black dark:text-white">
|
||||
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-white">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"@headlessui/react": "^1.7.16",
|
||||
"@nostr-dev-kit/ndk": "^0.7.7",
|
||||
"@nostr-fetch/adapter-ndk": "^0.11.0",
|
||||
"@radix-ui/react-collapsible": "^1.0.3",
|
||||
"@radix-ui/react-dialog": "^1.0.4",
|
||||
"@radix-ui/react-popover": "^1.0.6",
|
||||
"@radix-ui/react-tooltip": "^1.0.6",
|
||||
|
||||
@ -10,6 +10,9 @@ dependencies:
|
||||
'@nostr-fetch/adapter-ndk':
|
||||
specifier: ^0.11.0
|
||||
version: 0.11.0(@nostr-dev-kit/ndk@0.7.7)(nostr-fetch@0.12.2)
|
||||
'@radix-ui/react-collapsible':
|
||||
specifier: ^1.0.3
|
||||
version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-dialog':
|
||||
specifier: ^1.0.4
|
||||
version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
|
||||
@ -1084,6 +1087,34 @@ packages:
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.6
|
||||
'@radix-ui/primitive': 1.0.1
|
||||
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.18)(react@18.2.0)
|
||||
'@radix-ui/react-context': 1.0.1(@types/react@18.2.18)(react@18.2.0)
|
||||
'@radix-ui/react-id': 1.0.1(@types/react@18.2.18)(react@18.2.0)
|
||||
'@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.18)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.18)(react@18.2.0)
|
||||
'@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.18)(react@18.2.0)
|
||||
'@types/react': 18.2.18
|
||||
'@types/react-dom': 18.2.7
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.18)(react@18.2.0):
|
||||
resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
|
||||
peerDependencies:
|
||||
|
||||
106
src-tauri/Cargo.lock
generated
106
src-tauri/Cargo.lock
generated
@ -182,7 +182,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "d6041616acea41d67c4a984709ddab1587fd0b10efe5cc563fee954d2f011854"
|
||||
dependencies = [
|
||||
"clipboard-win",
|
||||
"core-graphics",
|
||||
"core-graphics 0.22.3",
|
||||
"image",
|
||||
"log",
|
||||
"objc",
|
||||
@ -787,8 +787,24 @@ dependencies = [
|
||||
"block",
|
||||
"cocoa-foundation",
|
||||
"core-foundation",
|
||||
"core-graphics",
|
||||
"foreign-types",
|
||||
"core-graphics 0.22.3",
|
||||
"foreign-types 0.3.2",
|
||||
"libc",
|
||||
"objc",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "cocoa"
|
||||
version = "0.25.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f6140449f97a6e97f9511815c5632d84c8aacf8ac271ad77c559218161a1373c"
|
||||
dependencies = [
|
||||
"bitflags 1.3.2",
|
||||
"block",
|
||||
"cocoa-foundation",
|
||||
"core-foundation",
|
||||
"core-graphics 0.23.1",
|
||||
"foreign-types 0.5.0",
|
||||
"libc",
|
||||
"objc",
|
||||
]
|
||||
@ -803,7 +819,7 @@ dependencies = [
|
||||
"block",
|
||||
"core-foundation",
|
||||
"core-graphics-types",
|
||||
"foreign-types",
|
||||
"foreign-types 0.3.2",
|
||||
"libc",
|
||||
"objc",
|
||||
]
|
||||
@ -901,7 +917,20 @@ dependencies = [
|
||||
"bitflags 1.3.2",
|
||||
"core-foundation",
|
||||
"core-graphics-types",
|
||||
"foreign-types",
|
||||
"foreign-types 0.3.2",
|
||||
"libc",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "core-graphics"
|
||||
version = "0.23.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "970a29baf4110c26fedbc7f82107d42c23f7e88e404c4577ed73fe99ff85a212"
|
||||
dependencies = [
|
||||
"bitflags 1.3.2",
|
||||
"core-foundation",
|
||||
"core-graphics-types",
|
||||
"foreign-types 0.5.0",
|
||||
"libc",
|
||||
]
|
||||
|
||||
@ -1465,7 +1494,28 @@ version = "0.3.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f6f339eb8adc052cd2ca78910fda869aefa38d22d5cb648e6485e4d3fc06f3b1"
|
||||
dependencies = [
|
||||
"foreign-types-shared",
|
||||
"foreign-types-shared 0.1.1",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "foreign-types"
|
||||
version = "0.5.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
|
||||
dependencies = [
|
||||
"foreign-types-macros",
|
||||
"foreign-types-shared 0.3.1",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "foreign-types-macros"
|
||||
version = "0.2.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn 2.0.27",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
@ -1474,6 +1524,12 @@ version = "0.1.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
|
||||
|
||||
[[package]]
|
||||
name = "foreign-types-shared"
|
||||
version = "0.3.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "aa9a19cbb55df58761df49b23516a86d432839add4af60fc256da840f66ed35b"
|
||||
|
||||
[[package]]
|
||||
name = "form_urlencoded"
|
||||
version = "1.2.0"
|
||||
@ -2562,7 +2618,7 @@ dependencies = [
|
||||
name = "lume"
|
||||
version = "1.1.1"
|
||||
dependencies = [
|
||||
"cocoa",
|
||||
"cocoa 0.24.1",
|
||||
"objc",
|
||||
"rand 0.8.5",
|
||||
"rust-argon2",
|
||||
@ -2587,6 +2643,8 @@ dependencies = [
|
||||
"tauri-plugin-updater",
|
||||
"tauri-plugin-upload",
|
||||
"tauri-plugin-window",
|
||||
"window-shadows",
|
||||
"window-vibrancy",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
@ -4652,9 +4710,9 @@ dependencies = [
|
||||
"bitflags 1.3.2",
|
||||
"cairo-rs",
|
||||
"cc",
|
||||
"cocoa",
|
||||
"cocoa 0.24.1",
|
||||
"core-foundation",
|
||||
"core-graphics",
|
||||
"core-graphics 0.22.3",
|
||||
"crossbeam-channel",
|
||||
"dirs-next",
|
||||
"dispatch",
|
||||
@ -4728,7 +4786,7 @@ checksum = "2e18377a75e314aa1d476896af881ed63f57a78ca84889fe63e69067f0de158d"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"bytes",
|
||||
"cocoa",
|
||||
"cocoa 0.24.1",
|
||||
"dirs-next",
|
||||
"embed_plist",
|
||||
"futures-util",
|
||||
@ -5091,7 +5149,7 @@ version = "0.13.0-alpha.6"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1231be42085f3a8b150e615601f8a070bd16bf579771a5dafe2931970a05b518"
|
||||
dependencies = [
|
||||
"cocoa",
|
||||
"cocoa 0.24.1",
|
||||
"gtk",
|
||||
"jni",
|
||||
"percent-encoding",
|
||||
@ -5857,6 +5915,28 @@ version = "0.4.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
|
||||
|
||||
[[package]]
|
||||
name = "window-shadows"
|
||||
version = "0.2.1"
|
||||
source = "git+https://github.com/tauri-apps/window-shadows?branch=dev#dd8ca283fa50b1484043e686fa0b1e45ba5a969d"
|
||||
dependencies = [
|
||||
"cocoa 0.25.0",
|
||||
"objc",
|
||||
"raw-window-handle",
|
||||
"windows-sys 0.48.0",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "window-vibrancy"
|
||||
version = "0.4.0"
|
||||
source = "git+https://github.com/tauri-apps/window-vibrancy?branch=dev#d1b349f3c3f524ffd3ba37b64349ec6ad6410272"
|
||||
dependencies = [
|
||||
"cocoa 0.25.0",
|
||||
"objc",
|
||||
"raw-window-handle",
|
||||
"windows-sys 0.48.0",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "windows"
|
||||
version = "0.36.1"
|
||||
@ -6175,8 +6255,8 @@ checksum = "7d15f9f827d537cefe6d047be3930f5d89b238dfb85e08ba6a319153217635aa"
|
||||
dependencies = [
|
||||
"base64 0.13.1",
|
||||
"block",
|
||||
"cocoa",
|
||||
"core-graphics",
|
||||
"cocoa 0.24.1",
|
||||
"core-graphics 0.22.3",
|
||||
"crossbeam-channel",
|
||||
"dunce",
|
||||
"gdk",
|
||||
|
||||
@ -16,7 +16,7 @@ tauri-build = { version = "2.0.0-alpha.6", features = [] }
|
||||
[dependencies]
|
||||
serde_json = "1.0"
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
tauri = { version = "2.0.0-alpha.10", features = ["system-tray"] }
|
||||
tauri = { version = "2.0.0-alpha.10", features = [ "macos-private-api", "system-tray"] }
|
||||
tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
|
||||
tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
|
||||
tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
|
||||
@ -32,6 +32,8 @@ tauri-plugin-process = { git = "https://github.com/tauri-apps/plugins-workspace"
|
||||
tauri-plugin-os = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
|
||||
tauri-plugin-window = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
|
||||
tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
|
||||
window-shadows = { git = "https://github.com/tauri-apps/window-shadows", branch = "dev" }
|
||||
window-vibrancy = { git = "https://github.com/tauri-apps/window-vibrancy", branch = "dev" }
|
||||
sqlx-cli = { version = "0.7.0", default-features = false, features = [
|
||||
"sqlite",
|
||||
] }
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
use tauri::{Manager};
|
||||
use tauri_plugin_autostart::MacosLauncher;
|
||||
use tauri_plugin_sql::{Migration, MigrationKind};
|
||||
use window_shadows::set_shadow;
|
||||
use window_vibrancy::{apply_blur, apply_vibrancy, NSVisualEffectMaterial};
|
||||
|
||||
#[derive(Clone, serde::Serialize)]
|
||||
struct Payload {
|
||||
@ -136,6 +138,22 @@ fn main() {
|
||||
.plugin(tauri_plugin_os::init())
|
||||
.plugin(tauri_plugin_window::init())
|
||||
.plugin(tauri_plugin_store::Builder::default().build())
|
||||
.setup(|app| {
|
||||
let window = app.get_window("main").unwrap();
|
||||
|
||||
// native shadow
|
||||
set_shadow(&window, true).expect("Unsupported platform!");
|
||||
|
||||
#[cfg(target_os = "macos")]
|
||||
apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, None)
|
||||
.expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
|
||||
|
||||
#[cfg(target_os = "windows")]
|
||||
apply_blur(&window, Some((18, 18, 18, 125)))
|
||||
.expect("Unsupported platform! 'apply_blur' is only supported on Windows");
|
||||
|
||||
Ok(())
|
||||
})
|
||||
.run(tauri::generate_context!())
|
||||
.expect("error while running tauri application");
|
||||
}
|
||||
|
||||
@ -103,10 +103,11 @@
|
||||
"theme": "Dark",
|
||||
"title": "Lume",
|
||||
"titleBarStyle": "Overlay",
|
||||
"transparent": false,
|
||||
"transparent": true,
|
||||
"width": 1080,
|
||||
"center": true
|
||||
}
|
||||
]
|
||||
],
|
||||
"macOSPrivateApi": true
|
||||
}
|
||||
}
|
||||
@ -6,14 +6,14 @@ import { Image } from '@shared/image';
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { shortenKey } from '@utils/shortenKey';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
export function ChatsListItem({ data }: { data: any }) {
|
||||
const { status, user } = useProfile(data.sender_pubkey);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-2.5 w-2/3 animate-pulse rounded bg-zinc-800" />
|
||||
</div>
|
||||
@ -26,28 +26,24 @@ export function ChatsListItem({ data }: { data: any }) {
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
|
||||
isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
|
||||
'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
|
||||
isActive ? 'bg-white/10 text-white' : 'text-white/80'
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
fallback={DEFAULT_AVATAR}
|
||||
alt={data.sender_pubkey}
|
||||
className="h-6 w-6 rounded object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex w-full items-center justify-between">
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[10rem] truncate font-medium text-zinc-200">
|
||||
{user?.nip05 ||
|
||||
user?.name ||
|
||||
user?.displayName ||
|
||||
shortenKey(data.sender_pubkey)}
|
||||
</h5>
|
||||
</div>
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
fallback={DEFAULT_AVATAR}
|
||||
alt={data.sender_pubkey}
|
||||
className="h-6 w-6 shrink-0 rounded object-cover"
|
||||
/>
|
||||
<div className="inline-flex w-full flex-1 items-center justify-between">
|
||||
<h5 className="max-w-[10rem] truncate">
|
||||
{user?.nip05 ||
|
||||
user?.name ||
|
||||
user?.displayName ||
|
||||
displayNpub(data.sender_pubkey, 16)}
|
||||
</h5>
|
||||
<div className="flex items-center">
|
||||
{data.new_messages > 0 && (
|
||||
<span className="inline-flex w-8 items-center justify-center rounded bg-fuchsia-400/10 px-1 py-1 text-xs font-medium text-fuchsia-500 ring-1 ring-inset ring-fuchsia-400/20">
|
||||
|
||||
@ -50,20 +50,20 @@ export function ChatsList() {
|
||||
{account ? (
|
||||
<ChatsListSelfItem data={account} />
|
||||
) : (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||
</div>
|
||||
)}
|
||||
{chats.follows.map((item) => renderItem(item))}
|
||||
{chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
|
||||
<NewMessageModal />
|
||||
{isFetching && (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||
</div>
|
||||
)}
|
||||
{chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
|
||||
<NewMessageModal />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -33,13 +33,13 @@ export function NewMessageModal() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openModal()}
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<PlusIcon className="h-3 w-3 text-zinc-200" />
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<PlusIcon className="h-3 w-3 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium text-zinc-400">New chat</h5>
|
||||
<h5 className="text-white/50">New chat</h5>
|
||||
</div>
|
||||
</button>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
|
||||
@ -6,14 +6,14 @@ import { Image } from '@shared/image';
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { shortenKey } from '@utils/shortenKey';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
|
||||
const { status, user } = useProfile(data.pubkey);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div>
|
||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
|
||||
@ -28,24 +28,22 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
|
||||
isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
|
||||
'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
|
||||
isActive ? 'bg-white/10 text-white' : 'text-white/80'
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
fallback={DEFAULT_AVATAR}
|
||||
alt={data.pubkey}
|
||||
className="h-6 w-6 rounded bg-white object-cover"
|
||||
/>
|
||||
</div>
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
fallback={DEFAULT_AVATAR}
|
||||
alt={data.pubkey}
|
||||
className="h-6 w-6 shrink-0 rounded bg-white object-cover"
|
||||
/>
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
|
||||
{user?.nip05 || user?.name || shortenKey(data.pubkey)}
|
||||
<h5 className="max-w-[10rem] truncate">
|
||||
{user?.nip05 || user?.name || displayNpub(data.pubkey, 16)}
|
||||
</h5>
|
||||
<span className="text-zinc-500">(you)</span>
|
||||
<span className="text-white/50">(you)</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
);
|
||||
|
||||
@ -31,15 +31,13 @@ export function UnknownsModal({ data }: { data: Chats[] }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openModal()}
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<StrangersIcon className="h-3 w-3 text-zinc-200" />
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
|
||||
<StrangersIcon className="h-3 w-3 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium text-zinc-400">
|
||||
{compactNumber.format(data.length)} unknowns
|
||||
</h5>
|
||||
<h5 className="text-white/50">{compactNumber.format(data.length)} unknowns</h5>
|
||||
</div>
|
||||
</button>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
|
||||
@ -175,12 +175,9 @@ export function Root() {
|
||||
}, [status]);
|
||||
|
||||
return (
|
||||
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
|
||||
<div className="h-screen w-screen">
|
||||
<div className="flex h-screen w-full flex-col">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="relative h-11 shrink-0 border border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
|
||||
/>
|
||||
<div data-tauri-drag-region className="h-11 shrink-0" />
|
||||
<div className="relative flex min-h-0 w-full flex-1 items-center justify-center">
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<LoaderIcon className="h-6 w-6 animate-spin text-zinc-100" />
|
||||
|
||||
@ -16,7 +16,7 @@ import { sendNativeNotification } from '@utils/notification';
|
||||
|
||||
const lastLogin = await getLastLogin();
|
||||
|
||||
export function ActiveAccount({ data }: { data: any }) {
|
||||
export function ActiveAccount({ data }: { data: { pubkey: string; npub: string } }) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { ndk } = useNDK();
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@shared/icons';
|
||||
|
||||
export function AppHeader({ reverse }: { reverse?: boolean }) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const goBack = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const goForward = () => {
|
||||
navigate(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className={`flex h-11 w-full shrink-0 items-center border-b border-zinc-900 px-3 ${
|
||||
reverse ? 'justify-start' : 'justify-end'
|
||||
}`}
|
||||
>
|
||||
<div className="flex gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => goBack()}
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
|
||||
>
|
||||
<ArrowLeftIcon
|
||||
width={16}
|
||||
height={16}
|
||||
className="text-zinc-500 group-hover:text-zinc-300"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => goForward()}
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
|
||||
>
|
||||
<ArrowRightIcon
|
||||
width={16}
|
||||
height={16}
|
||||
className="text-zinc-500 group-hover:text-zinc-300"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -5,10 +5,10 @@ import { Navigation } from '@shared/navigation';
|
||||
export function AppLayout() {
|
||||
return (
|
||||
<div className="flex h-screen w-screen">
|
||||
<div className="relative flex shrink-0 flex-row">
|
||||
<div className="shrink-0">
|
||||
<Navigation />
|
||||
</div>
|
||||
<div className="h-full w-full">
|
||||
<div className="h-full w-full flex-1 bg-black">
|
||||
<Outlet />
|
||||
<ScrollRestoration />
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ export function Button({
|
||||
switch (preset) {
|
||||
case 'small':
|
||||
preClass =
|
||||
'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-zinc-100 hover:bg-fuchsia-600';
|
||||
'w-min h-9 px-4 bg-white/10 rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
|
||||
break;
|
||||
case 'publish':
|
||||
preClass =
|
||||
|
||||
@ -34,9 +34,9 @@ export function Logout() {
|
||||
type="button"
|
||||
onClick={() => openModal()}
|
||||
aria-label="Logout"
|
||||
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
|
||||
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
|
||||
>
|
||||
<LogoutIcon className="h-4 w-4 text-zinc-400" />
|
||||
<LogoutIcon className="h-4 w-4 text-white" />
|
||||
</button>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
||||
|
||||
@ -11,7 +11,7 @@ export function LumeBar() {
|
||||
const { status, account } = useAccount();
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900/80 p-2 backdrop-blur-md">
|
||||
<div className="rounded-xl bg-white/10 p-2 backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
{status === 'loading' ? (
|
||||
<>
|
||||
@ -26,9 +26,9 @@ export function LumeBar() {
|
||||
)}
|
||||
<Link
|
||||
to="/settings/general"
|
||||
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
|
||||
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
|
||||
>
|
||||
<SettingsIcon className="h-4 w-4 text-zinc-400" />
|
||||
<SettingsIcon className="h-4 w-4 text-white" />
|
||||
</Link>
|
||||
<Logout />
|
||||
</div>
|
||||
|
||||
@ -1,62 +1,123 @@
|
||||
import { Disclosure } from '@headlessui/react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
||||
import { useState } from 'react';
|
||||
import { NavLink, useNavigate } from 'react-router-dom';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { ChatsList } from '@app/chats/components/list';
|
||||
|
||||
import { AppHeader } from '@shared/appHeader';
|
||||
import { ComposerModal } from '@shared/composer/modal';
|
||||
import { NavArrowDownIcon, SpaceIcon, TrendingIcon } from '@shared/icons';
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowRightIcon,
|
||||
NavArrowDownIcon,
|
||||
SpaceIcon,
|
||||
TrendingIcon,
|
||||
} from '@shared/icons';
|
||||
import { LumeBar } from '@shared/lumeBar';
|
||||
|
||||
export function Navigation() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [feeds, setFeeds] = useState(true);
|
||||
const [chats, setChats] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900">
|
||||
<AppHeader />
|
||||
<div className="relative h-full w-[232px] bg-black/80">
|
||||
<div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
|
||||
<div className="inlin-lflex h-8 px-3.5">
|
||||
<div className="inline-flex h-8 items-center justify-between px-2 pb-4 pt-14">
|
||||
<ComposerModal />
|
||||
</div>
|
||||
{/* Newsfeed */}
|
||||
<div className="flex flex-col gap-0.5 px-1.5">
|
||||
<div className="px-2.5">
|
||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
|
||||
Feeds
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<NavLink
|
||||
to="/app/space"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
|
||||
isActive ? 'bg-zinc-900/50' : ''
|
||||
)
|
||||
}
|
||||
<div className="flex gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(-1)}
|
||||
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
|
||||
>
|
||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<SpaceIcon width={12} height={12} className="text-zinc-100" />
|
||||
</span>
|
||||
<span className="font-medium">Spaces</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/app/trending"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200',
|
||||
isActive ? 'bg-zinc-900/50' : ''
|
||||
)
|
||||
}
|
||||
<ArrowLeftIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(1)}
|
||||
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
|
||||
>
|
||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<TrendingIcon width={12} height={12} className="text-zinc-100" />
|
||||
</span>
|
||||
<span className="font-medium">Trending</span>
|
||||
</NavLink>
|
||||
<ArrowRightIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Collapsible.Root open={feeds} onOpenChange={setFeeds}>
|
||||
<div className="flex flex-col gap-1 px-2">
|
||||
<Collapsible.Trigger asChild>
|
||||
<button className="flex items-center gap-1">
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
|
||||
open ? '' : 'rotate-180'
|
||||
)}
|
||||
>
|
||||
<NavArrowDownIcon width={12} height={12} className="text-white/50" />
|
||||
</div>
|
||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
|
||||
Feeds
|
||||
</h3>
|
||||
</button>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<div className="flex flex-col">
|
||||
<NavLink
|
||||
to="/app/space"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-9 items-center gap-2.5 rounded-md px-2',
|
||||
isActive ? 'bg-white/10 text-white' : 'text-white/80'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
|
||||
<SpaceIcon className="h-3 w-3 text-white" />
|
||||
</span>
|
||||
<span className="font-medium">Spaces</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/app/trending"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-9 items-center gap-2.5 rounded-md px-2 ',
|
||||
isActive ? 'bg-white/10 text-white' : 'text-white/80'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
|
||||
<TrendingIcon className="h-3 w-3 text-white" />
|
||||
</span>
|
||||
<span className="font-medium">Trending</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</div>
|
||||
</Collapsible.Root>
|
||||
<Collapsible.Root open={chats} onOpenChange={setChats}>
|
||||
<div className="flex flex-col gap-1 px-2">
|
||||
<Collapsible.Trigger asChild>
|
||||
<button className="flex items-center gap-1">
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
|
||||
open ? '' : 'rotate-180'
|
||||
)}
|
||||
>
|
||||
<NavArrowDownIcon width={12} height={12} className="text-white/50" />
|
||||
</div>
|
||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
|
||||
Chats
|
||||
</h3>
|
||||
</button>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<ChatsList />
|
||||
</Collapsible.Content>
|
||||
</div>
|
||||
</Collapsible.Root>
|
||||
{/* Channels
|
||||
<Disclosure defaultOpen={true}>
|
||||
{({ open }) => (
|
||||
@ -84,28 +145,6 @@ export function Navigation() {
|
||||
)}
|
||||
</Disclosure>
|
||||
*/}
|
||||
{/* Chats */}
|
||||
<Disclosure defaultOpen={true}>
|
||||
{({ open }) => (
|
||||
<div className="flex flex-col gap-0.5 px-1.5 pb-6">
|
||||
<Disclosure.Button className="flex items-center gap-1 px-3">
|
||||
<div
|
||||
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||
open ? '' : 'rotate-180'
|
||||
}`}
|
||||
>
|
||||
<NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
|
||||
</div>
|
||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
|
||||
Chats
|
||||
</h3>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel>
|
||||
<ChatsList />
|
||||
</Disclosure.Panel>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
</div>
|
||||
<div className="absolute bottom-3 left-0 w-full px-10">
|
||||
<LumeBar />
|
||||
|
||||
@ -51,9 +51,9 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
|
||||
className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
|
||||
>
|
||||
<BellIcon className="h-4 w-4 text-zinc-400" />
|
||||
<BellIcon className="h-4 w-4 text-white" />
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal className="relative z-10">
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { AppHeader } from '@shared/appHeader';
|
||||
import { LumeBar } from '@shared/lumeBar';
|
||||
|
||||
export function SettingsLayout() {
|
||||
@ -9,7 +8,6 @@ export function SettingsLayout() {
|
||||
<div className="flex h-screen w-screen">
|
||||
<div className="relative flex shrink-0 flex-row">
|
||||
<div className="relative flex w-[232px] flex-col gap-3 border-r border-zinc-900">
|
||||
<AppHeader />
|
||||
<div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
|
||||
<div className="flex flex-col gap-0.5 px-1.5">
|
||||
<div className="px-2.5">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user