wip: migrate to desktop2

packages/ark/src/ark.ts

@@ -54,7 +54,7 @@ export class Ark {
 			const event = JSON.parse(cmd) as Event;
 			return event;
 		} catch (e) {
-			console.error(String(e));
+			return null;
 		}
 	}
 
@@ -66,7 +66,7 @@ export class Ark {
 			const cmd: Event[] = await invoke("get_text_events", { limit, until });
 			return cmd;
 		} catch (e) {
-			console.error(String(e));
+			return [];
 		}
 	}
 
@@ -120,7 +120,7 @@ export class Ark {
 			const cmd: Event[] = await invoke("get_event_thread", { id });
 			return cmd;
 		} catch (e) {
-			console.error(String(e));
+			return [];
 		}
 	}
 
@@ -165,8 +165,8 @@ export class Ark {
 		try {
 			const cmd: Metadata = await invoke("get_profile", { id });
 			return cmd;
-		} catch (e) {
-			console.error(String(e));
+		} catch {
+			return null;
 		}
 	}
 

packages/ark/src/components/user/cover.tsx

@@ -7,19 +7,14 @@ export function UserCover({ className }: { className?: string }) {
 	if (!user) {
 		return (
 			<div
-				className={cn(
-					"animate-pulse bg-neutral-300 dark:bg-neutral-700",
-					className,
-				)}
+				className={cn("animate-pulse bg-gray-3 dark:bg-gray-7", className)}
 			/>
 		);
 	}
 
 	if (user && !user.profile.banner) {
 		return (
-			<div
-				className={cn("bg-gradient-to-b from-sky-400 to-sky-200", className)}
-			/>
+			<div className={cn("bg-gradient-to-b from-sky-4 to-blue-2", className)} />
 		);
 	}
 

packages/ark/src/components/user/followButton.tsx

@@ -2,11 +2,14 @@ import { LoaderIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useArk } from "../../provider";
 
 export function UserFollowButton({
 	target,
 	className,
 }: { target: string; className?: string }) {
+	const ark = useArk();
+
 	const [t] = useTranslation();
 	const [loading, setLoading] = useState(false);
 	const [followed, setFollowed] = useState(false);

packages/ark/src/components/user/nip05.tsx

@@ -37,7 +37,7 @@ export function UserNip05({ className }: { className?: string }) {
 					  : user?.profile.nip05}
 			</p>
 			{!isLoading && verified ? (
-				<VerifiedIcon className="size-4 text-teal-500" />
+				<VerifiedIcon className="size-4 text-green-10" />
 			) : null}
 		</div>
 	);

packages/ark/src/hooks/useRelayList.ts

@@ -1,90 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useArk } from "../provider";
-
-export function useRelaylist() {
-	const ark = useArk();
-	const queryClient = useQueryClient();
-
-	const connectRelay = useMutation({
-		mutationFn: async (
-			relay: WebSocket["url"],
-			purpose?: "read" | "write" | undefined,
-		) => {
-			// Cancel any outgoing refetches
-			await queryClient.cancelQueries({
-				queryKey: ["relay-personal"],
-			});
-
-			const relayUrl = normalizeRelayUrl(relay);
-
-			// Snapshot the previous value
-			const prevRelays: NDKTag[] = queryClient.getQueryData(["relay-personal"]);
-
-			// create new relay list if not exist
-			if (!prevRelays) {
-				await ark.createEvent({
-					kind: NDKKind.RelayList,
-					tags: [["r", relay, purpose ?? ""]],
-				});
-			}
-
-			// add relay to exist list
-			const index = prevRelays.findIndex((el) => el[1] === relay);
-			if (index > -1) return;
-
-			await ark.createEvent({
-				kind: NDKKind.RelayList,
-				tags: [...prevRelays, ["r", relayUrl, purpose ?? ""]],
-			});
-
-			// Optimistically update to the new value
-			queryClient.setQueryData(["relay-personal"], (prev: NDKTag[]) => [
-				...prev,
-				["r", relayUrl, purpose ?? ""],
-			]);
-
-			// Return a context object with the snapshotted value
-			return { prevRelays };
-		},
-		onSettled: () => {
-			queryClient.invalidateQueries({
-				queryKey: ["relay-personal"],
-			});
-		},
-	});
-
-	const removeRelay = useMutation({
-		mutationFn: async (relay: WebSocket["url"]) => {
-			// Cancel any outgoing refetches
-			await queryClient.cancelQueries({
-				queryKey: ["relay-personal"],
-			});
-
-			// Snapshot the previous value
-			const prevRelays: NDKTag[] = queryClient.getQueryData(["relay-personal"]);
-
-			if (!prevRelays) return;
-
-			const index = prevRelays.findIndex((el) => el[1] === relay);
-			if (index > -1) prevRelays.splice(index, 1);
-
-			await ark.createEvent({
-				kind: NDKKind.RelayList,
-				tags: prevRelays,
-			});
-
-			// Optimistically update to the new value
-			queryClient.setQueryData(["relay-personal"], prevRelays);
-
-			// Return a context object with the snapshotted value
-			return { prevRelays };
-		},
-		onSettled: () => {
-			queryClient.invalidateQueries({
-				queryKey: ["relay-personal"],
-			});
-		},
-	});
-
-	return { connectRelay, removeRelay };
-}

packages/ui/package.json

@@ -18,6 +18,7 @@
 		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-popover": "^1.0.7",
 		"@tanstack/react-query": "^5.18.1",
+		"@tanstack/react-router": "^1.16.0",
 		"framer-motion": "^11.0.3",
 		"jotai": "^2.6.4",
 		"minidenticons": "^4.2.0",

packages/ui/src/account/active.tsx

@@ -15,13 +15,13 @@ export function ActiveAccount() {
 	const svgURI = useMemo(
 		() =>
 			`data:image/svg+xml;utf8,${encodeURIComponent(
-				minidenticon(ark.account.pubkey, 90, 50),
+				minidenticon(ark.account.npub, 90, 50),
 			)}`,
 		[],
 	);
 
 	const { t } = useTranslation();
-	const { user } = useProfile(ark.account.pubkey);
+	const { user } = useProfile(ark.account.npub);
 
 	return (
 		<DropdownMenu.Root>
@@ -30,24 +30,24 @@ export function ActiveAccount() {
 					<Avatar.Root>
 						<Avatar.Image
 							src={user?.picture}
-							alt={ark.account.pubkey}
+							alt={ark.account.npub}
 							loading="lazy"
 							decoding="async"
 							style={{ contentVisibility: "auto" }}
-							className="aspect-square h-auto w-full rounded-xl object-cover"
+							className="object-cover w-full h-auto aspect-square rounded-xl"
 						/>
 						<Avatar.Fallback delayMs={150}>
 							<img
 								src={svgURI}
-								alt={ark.account.pubkey}
-								className="aspect-square h-auto w-full rounded-xl bg-black dark:bg-white"
+								alt={ark.account.npub}
+								className="w-full h-auto bg-black aspect-square rounded-xl dark:bg-white"
 							/>
 						</Avatar.Fallback>
 					</Avatar.Root>
 					<span
 						className={cn(
-							"absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-neutral-100 dark:ring-neutral-900",
-							isOnline ? "bg-teal-500" : "bg-red-500",
+							"absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-gray-1 dark:ring-graydark-1",
+							isOnline ? "bg-green-9" : "bg-red-9",
 						)}
 					/>
 				</div>

packages/ui/src/navigation.tsx

@@ -2,8 +2,6 @@ import {
 	ArrowUpSquareIcon,
 	BellFilledIcon,
 	BellIcon,
-	DepotFilledIcon,
-	DepotIcon,
 	HomeFilledIcon,
 	HomeIcon,
 	PlusIcon,
@@ -13,13 +11,13 @@ import {
 	SettingsIcon,
 } from "@lume/icons";
 import { cn, editorAtom, searchAtom } from "@lume/utils";
+import { Link } from "@tanstack/react-router";
 import { confirm } from "@tauri-apps/plugin-dialog";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { Update, check } from "@tauri-apps/plugin-updater";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { NavLink } from "react-router-dom";
 import { ActiveAccount } from "./account/active";
 import { UnreadActivity } from "./unread";
 
@@ -65,20 +63,19 @@ export function Navigation() {
 						type="button"
 						onClick={() => setIsEditorOpen((state) => !state)}
 						className={cn(
-							"flex items-center justify-center h-auto w-full text-black aspect-square rounded-xl hover:text-white dark:text-white",
+							"flex items-center justify-center h-auto w-full aspect-square rounded-xl text-gray-normal",
 							isEditorOpen
-								? "bg-blue-500 text-white"
-								: "bg-black/5 hover:bg-blue-500 dark:bg-white/5 dark:hover:bg-blue-500",
+								? "bg-blue-solid text-white"
+								: "bg-gray-4 hover:bg-blue-solid dark:bg-graydark-4",
 						)}
 					>
 						<PlusIcon className="size-5" />
 					</button>
 				</div>
-				<div className="my-5 w-2/3 mx-auto h-px bg-black/10 dark:bg-white/10" />
+				<div className="w-2/3 h-px mx-auto my-5 bg-black/10 dark:bg-white/10" />
 				<div className="flex flex-col gap-2">
-					<NavLink
-						to="/"
-						preventScrollReset={true}
+					<Link
+						to="/app/space"
 						className="inline-flex flex-col items-center justify-center"
 					>
 						{({ isActive }) => (
@@ -97,10 +94,9 @@ export function Navigation() {
 								)}
 							</div>
 						)}
-					</NavLink>
-					<NavLink
-						to="/activity/"
-						preventScrollReset={true}
+					</Link>
+					<Link
+						to="/app/activity"
 						className="inline-flex flex-col items-center justify-center"
 					>
 						{({ isActive }) => (
@@ -120,29 +116,7 @@ export function Navigation() {
 								<UnreadActivity />
 							</div>
 						)}
-					</NavLink>
-					<NavLink
-						to="/relays/"
-						preventScrollReset={true}
-						className="inline-flex flex-col items-center justify-center"
-					>
-						{({ isActive }) => (
-							<div
-								className={cn(
-									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
-									isActive
-										? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
-										: "text-black/50 dark:text-neutral-400",
-								)}
-							>
-								{isActive ? (
-									<DepotFilledIcon className="size-6" />
-								) : (
-									<DepotIcon className="size-6" />
-								)}
-							</div>
-						)}
-					</NavLink>
+					</Link>
 				</div>
 			</div>
 			<div className="flex flex-col gap-2">
@@ -152,10 +126,10 @@ export function Navigation() {
 						onClick={installNewUpdate}
 						className="relative inline-flex flex-col items-center justify-center"
 					>
-						<span className="inline-flex items-center rounded-full bg-teal-500/60 ring-teal-500/80 text-teal-50 dark:bg-teal-500/10 px-2 py-1 text-xs font-semibold dark:text-teal-400 ring-1 ring-inset dark:ring-teal-500/20">
+						<span className="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full bg-teal-500/60 ring-teal-500/80 text-teal-50 dark:bg-teal-500/10 dark:text-teal-400 ring-1 ring-inset dark:ring-teal-500/20">
 							Update
 						</span>
-						<div className="inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl text-black/50 dark:text-neutral-400">
+						<div className="inline-flex items-center justify-center w-full h-auto aspect-square rounded-xl text-black/50 dark:text-neutral-400">
 							<ArrowUpSquareIcon className="size-6" />
 						</div>
 					</button>
@@ -180,9 +154,8 @@ export function Navigation() {
 						)}
 					</div>
 				</button>
-				<NavLink
-					to="/settings/"
-					preventScrollReset={true}
+				<Link
+					to="/settings"
 					className="inline-flex flex-col items-center justify-center"
 				>
 					{({ isActive }) => (
@@ -201,7 +174,7 @@ export function Navigation() {
 							)}
 						</div>
 					)}
-				</NavLink>
+				</Link>
 			</div>
 		</div>
 	);