final design (#184)

* feat: redesign

* feat: update other columns to new design

* chore: small fixes

* fix: better manage external webview

* feat: redesign note

* feat: update ui

* chore: update

* chore: update

* chore: polish ui

* chore: update auth ui

* feat: finalize note design

* chore: small fixes

* feat: add window management in rust

* chore: format

* feat: update ui for event screen

* feat: update event screen

* feat: final

apps/desktop2/package.json

@@ -20,21 +20,21 @@
 		"@radix-ui/react-popover": "^1.0.7",
 		"@radix-ui/react-switch": "^1.0.3",
 		"@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/query-sync-storage-persister": "^5.31.0",
+		"@tanstack/query-sync-storage-persister": "^5.32.0",
-    "@tanstack/react-query": "^5.31.0",
+		"@tanstack/react-query": "^5.32.0",
-    "@tanstack/react-query-persist-client": "^5.31.0",
+		"@tanstack/react-query-persist-client": "^5.32.0",
-    "@tanstack/react-router": "^1.29.2",
+		"@tanstack/react-router": "1.29.2",
-    "i18next": "^23.11.2",
+		"i18next": "^23.11.3",
 		"i18next-resources-to-backend": "^1.2.1",
 		"minidenticons": "^4.2.1",
 		"nanoid": "^5.0.7",
-    "nostr-tools": "^2.5.0",
+		"nostr-tools": "^2.5.1",
-    "react": "^18.2.0",
+		"react": "^18.3.1",
 		"react-currency-input-field": "^3.8.0",
-    "react-dom": "^18.2.0",
+		"react-dom": "^18.3.1",
 		"react-hook-form": "^7.51.3",
 		"react-hotkeys-hook": "^4.5.0",
-    "react-i18next": "^14.1.0",
+		"react-i18next": "^14.1.1",
 		"slate": "^0.102.0",
 		"slate-react": "^0.102.0",
 		"sonner": "^1.4.41",
@@ -45,10 +45,10 @@
 		"@lume/tailwindcss": "workspace:^",
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
-    "@tanstack/router-devtools": "^1.29.2",
+		"@tanstack/router-devtools": "^1.31.3",
 		"@tanstack/router-vite-plugin": "^1.30.0",
-    "@types/react": "^18.2.79",
+		"@types/react": "^18.3.1",
-    "@types/react-dom": "^18.2.25",
+		"@types/react-dom": "^18.3.0",
 		"@vitejs/plugin-react-swc": "^3.6.0",
 		"autoprefixer": "^10.4.19",
 		"postcss": "^8.4.38",

apps/desktop2/src/app.tsx

@@ -1,19 +1,21 @@
+import { Ark } from "@lume/ark";
+import { CancelCircleIcon, CheckCircleIcon, InfoCircleIcon } from "@lume/icons";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { QueryClient } from "@tanstack/react-query";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { platform } from "@tauri-apps/plugin-os";
 import React, { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
+import { Toaster } from "sonner";
 import "./app.css";
 import i18n from "./locale";
-import { Toaster } from "sonner";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { routeTree } from "./router.gen"; // auto generated file
-import { CancelCircleIcon, CheckCircleIcon, InfoCircleIcon } from "@lume/icons";
-import { Ark } from "@lume/ark";
 
 const ark = new Ark();
 const queryClient = new QueryClient();
+const platformName = await platform();
 
 const persister = createSyncStoragePersister({
 	storage: window.localStorage,
@@ -25,6 +27,7 @@ const router = createRouter({
 	context: {
 		ark,
 		queryClient,
+		platform: platformName,
 	},
 });
 

apps/desktop2/src/components/accounts.tsx

@@ -1,69 +0,0 @@
-import { Account } from "@lume/types";
-import { User } from "@lume/ui";
-import {
-  useNavigate,
-  useParams,
-  useRouteContext,
-} from "@tanstack/react-router";
-import { useEffect, useState } from "react";
-
-export function Accounts() {
-  const { ark } = useRouteContext({ strict: false });
-  const params = useParams({ strict: false });
-
-  const [accounts, setAccounts] = useState<Account[]>(null);
-
-  useEffect(() => {
-    async function getAllAccounts() {
-      const data = await ark.get_all_accounts();
-      if (data) setAccounts(data);
-    }
-
-    getAllAccounts();
-  }, []);
-
-  return (
-    <div data-tauri-drag-region className="flex items-center gap-3">
-      {accounts
-        ? accounts.map((account) =>
-            // @ts-ignore, useless
-            account.npub === params.account ? (
-              <Active key={account.npub} pubkey={account.npub} />
-            ) : (
-              <Inactive key={account.npub} pubkey={account.npub} />
-            ),
-          )
-        : null}
-    </div>
-  );
-}
-
-function Inactive({ pubkey }: { pubkey: string }) {
-  const { ark } = useRouteContext({ strict: false });
-  const navigate = useNavigate();
-
-  const changeAccount = async (npub: string) => {
-    const select = await ark.load_selected_account(npub);
-    if (select) navigate({ to: "/$account/home", params: { account: npub } });
-  };
-
-  return (
-    <button type="button" onClick={() => changeAccount(pubkey)}>
-      <User.Provider pubkey={pubkey}>
-        <User.Root className="rounded-full">
-          <User.Avatar className="aspect-square h-auto w-8 rounded-full object-cover" />
-        </User.Root>
-      </User.Provider>
-    </button>
-  );
-}
-
-function Active({ pubkey }: { pubkey: string }) {
-  return (
-    <User.Provider pubkey={pubkey}>
-      <User.Root className="rounded-full ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950">
-        <User.Avatar className="aspect-square h-auto w-7 rounded-full object-cover" />
-      </User.Root>
-    </User.Provider>
-  );
-}

apps/desktop2/src/components/avatarUploader.tsx

@@ -1,7 +1,12 @@
 import { Spinner } from "@lume/ui";
 import { cn } from "@lume/utils";
 import { useRouteContext } from "@tanstack/react-router";
-import { Dispatch, ReactNode, SetStateAction, useState } from "react";
+import {
+	type Dispatch,
+	type ReactNode,
+	type SetStateAction,
+	useState,
+} from "react";
 import { toast } from "sonner";
 
 export function AvatarUploader({

apps/desktop2/src/components/col.tsx

@@ -1,6 +1,9 @@
-import { useEffect, useRef, useState } from "react";
+import { CancelIcon, CheckIcon } from "@lume/icons";
 import type { LumeColumn } from "@lume/types";
+import { cn } from "@lume/utils";
 import { invoke } from "@tauri-apps/api/core";
+import { getCurrent } from "@tauri-apps/api/webviewWindow";
+import { useEffect, useRef, useState } from "react";
 
 export function Col({
 	column,
@@ -52,9 +55,7 @@ export function Col({
 
 			const rect = container.current.getBoundingClientRect();
 			const windowLabel = `column-${column.label}`;
-      const url =
+			const url = `${column.content}?account=${account}&label=${column.label}&name=${column.name}`;
-        column.content +
-        `?account=${account}&label=${column.label}&name=${column.name}`;
 
 			// create new webview
 			const label: string = await invoke("create_column", {
@@ -79,5 +80,81 @@ export function Col({
 		};
 	}, [webview]);
 
-  return <div ref={container} className="h-full w-[440px] shrink-0 p-2" />;
+	return (
+		<div className="h-full w-[440px] shrink-0 p-2">
+			<div
+				className={cn(
+					"flex flex-col w-full h-full rounded-xl",
+					column.label !== "open"
+						? "bg-black/5 dark:bg-white/5 backdrop-blur-sm"
+						: "",
+				)}
+			>
+				{column.label !== "open" ? (
+					<Header label={column.label} name={column.name} />
+				) : null}
+				<div ref={container} className="flex-1 w-full h-full" />
+			</div>
+		</div>
+	);
+}
+
+function Header({ label, name }: { label: string; name: string }) {
+	const [title, setTitle] = useState(name);
+	const [isChanged, setIsChanged] = useState(false);
+
+	const saveNewTitle = async () => {
+		const mainWindow = getCurrent();
+		await mainWindow.emit("columns", { type: "set_title", label, title });
+
+		// update search params
+		// @ts-ignore, hahaha
+		search.name = title;
+
+		// reset state
+		setIsChanged(false);
+	};
+
+	const close = async () => {
+		const mainWindow = getCurrent();
+		await mainWindow.emit("columns", { type: "remove", label });
+	};
+
+	useEffect(() => {
+		if (title.length !== name.length) setIsChanged(true);
+	}, [title]);
+
+	return (
+		<div className="h-9 w-full flex items-center justify-between shrink-0 px-1">
+			<div className="size-7" />
+			<div className="shrink-0 h-9 flex items-center justify-center">
+				<div className="relative flex gap-2 items-center">
+					<div
+						contentEditable
+						suppressContentEditableWarning={true}
+						onBlur={(e) => setTitle(e.currentTarget.textContent)}
+						className="text-sm font-medium focus:outline-none"
+					>
+						{name}
+					</div>
+					{isChanged ? (
+						<button
+							type="button"
+							onClick={() => saveNewTitle()}
+							className="text-teal-500 hover:text-teal-600"
+						>
+							<CheckIcon className="size-4" />
+						</button>
+					) : null}
+				</div>
+			</div>
+			<button
+				type="button"
+				onClick={() => close()}
+				className="size-7 inline-flex hover:bg-black/10 rounded-lg dark:hover:bg-white/10 items-center justify-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
+			>
+				<CancelIcon className="size-4" />
+			</button>
+		</div>
+	);
 }

apps/desktop2/src/components/conversation.tsx

@@ -0,0 +1,55 @@
+import { ThreadIcon } from "@lume/icons";
+import type { Event } from "@lume/types";
+import { Note } from "@lume/ui";
+import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+
+export function Conversation({
+	event,
+	className,
+}: {
+	event: Event;
+	className?: string;
+}) {
+	const { ark } = useRouteContext({ strict: false });
+	const thread = ark.parse_event_thread({
+		content: event.content,
+		tags: event.tags,
+	});
+
+	return (
+		<Note.Provider event={event}>
+			<Note.Root
+				className={cn(
+					"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
+					className,
+				)}
+			>
+				<div className="flex flex-col gap-3">
+					{thread?.rootEventId ? (
+						<Note.Child eventId={thread?.rootEventId} isRoot />
+					) : null}
+					<div className="flex items-center gap-2 px-3">
+						<div className="inline-flex items-center gap-1.5 shrink-0 text-sm font-medium text-neutral-600 dark:text-neutral-400">
+							<ThreadIcon className="size-4" />
+							Thread
+						</div>
+						<div className="flex-1 h-px bg-neutral-100 dark:bg-white/5" />
+					</div>
+					{thread?.replyEventId ? (
+						<Note.Child eventId={thread?.replyEventId} />
+					) : null}
+					<div>
+						<div className="px-3 h-14 flex items-center justify-between">
+							<Note.User />
+						</div>
+						<Note.Content className="px-3" />
+					</div>
+				</div>
+				<div className="flex items-center h-14 px-3">
+					<Note.Open />
+				</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}

apps/desktop2/src/components/quote.tsx

@@ -0,0 +1,47 @@
+import { QuoteIcon } from "@lume/icons";
+import type { Event } from "@lume/types";
+import { Note } from "@lume/ui";
+import { cn } from "@lume/utils";
+
+export function Quote({
+	event,
+	className,
+}: {
+	event: Event;
+	className?: string;
+}) {
+	const quoteEventId = event.tags.find(
+		(tag) => tag[0] === "q" || tag[3] === "mention",
+	)?.[1];
+
+	return (
+		<Note.Provider event={event}>
+			<Note.Root
+				className={cn(
+					"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
+					className,
+				)}
+			>
+				<div className="flex flex-col gap-3">
+					<Note.Child eventId={quoteEventId} isRoot />
+					<div className="flex items-center gap-2 px-3">
+						<div className="inline-flex items-center gap-1.5 shrink-0 text-sm font-medium text-neutral-600 dark:text-neutral-400">
+							<QuoteIcon className="size-4" />
+							Quote
+						</div>
+						<div className="flex-1 h-px bg-neutral-100 dark:bg-white/5" />
+					</div>
+					<div>
+						<div className="px-3 h-14 flex items-center justify-between">
+							<Note.User />
+						</div>
+						<Note.Content className="px-3" quote={false} clean />
+					</div>
+				</div>
+				<div className="flex items-center h-14 px-3">
+					<Note.Open />
+				</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}

apps/desktop2/src/components/repost.tsx

@@ -1,9 +1,7 @@
-import { RepostIcon } from "@lume/icons";
+import type { Event } from "@lume/types";
-import { Event } from "@lume/types";
+import { Note, Spinner, User } from "@lume/ui";
 import { cn } from "@lume/utils";
 import { useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-import { Note, Spinner, User } from "@lume/ui";
 import { useRouteContext } from "@tanstack/react-router";
 
 export function RepostNote({
@@ -13,8 +11,7 @@ export function RepostNote({
 	event: Event;
 	className?: string;
 }) {
-  const { ark, settings } = useRouteContext({ strict: false });
+	const { ark } = useRouteContext({ strict: false });
-  const { t } = useTranslation();
 	const {
 		isLoading,
 		isError,
@@ -27,8 +24,11 @@ export function RepostNote({
 					const embed: Event = JSON.parse(event.content);
 					return embed;
 				}
+
 				const id = event.tags.find((el) => el[0] === "e")?.[1];
-        if (id) return await ark.get_event(id);
+				const repostEvent = await ark.get_event(id);
+
+				return repostEvent;
 			} catch (e) {
 				throw new Error(e);
 			}
@@ -40,50 +40,42 @@ export function RepostNote({
 	return (
 		<Note.Root
 			className={cn(
-        "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
+				"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl mb-3 shadow-primary dark:ring-1 ring-neutral-800/50",
 				className,
 			)}
 		>
 			<User.Provider pubkey={event.pubkey}>
-        <User.Root className="flex gap-3">
+				<User.Root className="flex items-center gap-2 px-3 py-3 border-b border-neutral-100 dark:border-neutral-800/50 rounded-t-xl">
-          <div className="inline-flex w-11 shrink-0 items-center justify-center">
+					<div className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
-            <RepostIcon className="h-5 w-5 text-blue-500" />
+						Reposted by
-          </div>
-          <div className="inline-flex items-center gap-2">
-            <User.Avatar className="size-6 shrink-0 rounded-full object-cover" />
-            <div className="inline-flex items-baseline gap-1">
-              <User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
-              <span className="text-blue-500">{t("note.reposted")}</span>
-            </div>
 					</div>
+					<User.Avatar className="size-6 shrink-0 rounded-full object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
 				</User.Root>
 			</User.Provider>
 			{isLoading ? (
+				<div className="flex h-20 items-center justify-center gap-2">
 					<Spinner />
-      ) : isError ? (
+					Loading event...
-        <div className="w-full h-16 flex items-center px-3 border border-neutral-100 dark:border-neutral-900">
+				</div>
-          <p>Event not found</p>
+			) : isError || !repostEvent ? (
+				<div className="flex h-20 items-center justify-center">
+					Event not found within your current relay set
 				</div>
 			) : (
 				<Note.Provider event={repostEvent}>
-          <div className="flex flex-col gap-2">
+					<Note.Root>
+						<div className="px-3 h-14 flex items-center justify-between">
 							<Note.User />
-            <div className="flex gap-3">
-              <div className="size-11 shrink-0" />
-              <div className="min-w-0 flex-1">
-                <Note.Content />
-                <div className="mt-4 flex items-center justify-between">
-                  <div className="-ml-1 inline-flex items-center gap-4">
-                    <Note.Reply />
-                    <Note.Repost />
-                    <Note.Pin />
-                    {settings.zap ? <Note.Zap /> : null}
-                  </div>
 							<Note.Menu />
 						</div>
+						<Note.Content className="px-3" />
+						<div className="mt-3 flex items-center gap-4 h-14 px-3">
+							<Note.Open />
+							<Note.Reply />
+							<Note.Repost />
+							<Note.Zap />
 						</div>
-            </div>
+					</Note.Root>
-          </div>
 				</Note.Provider>
 			)}
 		</Note.Root>

apps/desktop2/src/components/text.tsx

@@ -1,7 +1,6 @@
-import { Event } from "@lume/types";
+import type { Event } from "@lume/types";
 import { Note } from "@lume/ui";
 import { cn } from "@lume/utils";
-import { useRouteContext } from "@tanstack/react-router";
 
 export function TextNote({
 	event,
@@ -10,31 +9,24 @@ export function TextNote({
 	event: Event;
 	className?: string;
 }) {
-  const { settings } = useRouteContext({ strict: false });
-
 	return (
 		<Note.Provider event={event}>
 			<Note.Root
 				className={cn(
-          "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
+					"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50",
 					className,
 				)}
 			>
+				<div className="px-3 h-14 flex items-center justify-between">
 					<Note.User />
-        <div className="flex gap-3">
-          <div className="size-11 shrink-0" />
-          <div className="min-w-0 flex-1">
-            <Note.Content className="mb-2" />
-            <Note.Thread />
-            <div className="mt-4 flex items-center justify-between">
-              <div className="-ml-1 inline-flex items-center gap-4">
-                <Note.Reply />
-                <Note.Repost />
-                {settings.zap ? <Note.Zap /> : null}
-              </div>
 					<Note.Menu />
 				</div>
-          </div>
+				<Note.Content className="px-3" />
+				<div className="mt-3 flex items-center gap-4 h-14 px-3">
+					<Note.Open />
+					<Note.Reply />
+					<Note.Repost />
+					<Note.Zap />
 				</div>
 			</Note.Root>
 		</Note.Provider>

apps/desktop2/src/components/toolbar.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "@tanstack/react-router";
+import type { ReactNode } from "@tanstack/react-router";
 import { useLayoutEffect, useState } from "react";
 import { createPortal } from "react-dom";
 

apps/desktop2/src/routes/$account.home.tsx

@@ -2,7 +2,6 @@ import { Col } from "@/components/col";
 import { Toolbar } from "@/components/toolbar";
 import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
 import type { EventColumns, LumeColumn } from "@lume/types";
-import { Spinner } from "@lume/ui";
 import { createFileRoute } from "@tanstack/react-router";
 import { listen } from "@tauri-apps/api/event";
 import { resolveResource } from "@tauri-apps/api/path";
@@ -14,8 +13,6 @@ import { useDebouncedCallback } from "use-debounce";
 import { VList, type VListHandle } from "virtua";
 
 export const Route = createFileRoute("/$account/home")({
-  component: Screen,
-  pendingComponent: Pending,
 	beforeLoad: async ({ context }) => {
 		const ark = context.ark;
 		const resourcePath = await resolveResource("resources/system_columns.json");
@@ -28,6 +25,7 @@ export const Route = createFileRoute("/$account/home")({
 			storedColumns: !userColumns.length ? systemColumns : userColumns,
 		};
 	},
+	component: Screen,
 });
 
 function Screen() {
@@ -71,20 +69,24 @@ function Screen() {
 		];
 
 		setColumns(newCols);
-    setSelectedIndex(cols.length - 1);
+		setSelectedIndex(newCols.length);
+		setIsScroll(true);
 
 		// scroll to the newest column
-    vlistRef.current.scrollToIndex(cols.length - 1, {
+		vlistRef.current.scrollToIndex(newCols.length - 1, {
 			align: "end",
 		});
 	}, 150);
 
 	const remove = useDebouncedCallback((label: string) => {
-    setColumns((state) => state.filter((t) => t.label !== label));
+		const newCols = columns.filter((t) => t.label !== label);
-    setSelectedIndex(columns.length - 1);
+
+		setColumns(newCols);
+		setSelectedIndex(newCols.length);
+		setIsScroll(true);
 
 		// scroll to the first column
-    vlistRef.current.scrollToIndex(0, {
+		vlistRef.current.scrollToIndex(newCols.length - 1, {
 			align: "start",
 		});
 	}, 150);
@@ -165,14 +167,14 @@ function Screen() {
 					<button
 						type="button"
 						onClick={() => goLeft()}
-            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+						className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
 					>
 						<ArrowLeftIcon className="size-5" />
 					</button>
 					<button
 						type="button"
 						onClick={() => goRight()}
-            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+						className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
 					>
 						<ArrowRightIcon className="size-5" />
 					</button>
@@ -181,13 +183,3 @@ function Screen() {
 		</div>
 	);
 }
-
-function Pending() {
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <button type="button" className="size-5" disabled>
-        <Spinner className="size-5" />
-      </button>
-    </div>
-  );
-}

apps/desktop2/src/routes/$account.tsx

@@ -1,19 +1,16 @@
 import { ComposeFilledIcon, PlusIcon, SearchIcon } from "@lume/icons";
-import { Outlet, createFileRoute, useNavigate } from "@tanstack/react-router";
+import type { Account } from "@lume/types";
+import { User } from "@lume/ui";
 import { cn } from "@lume/utils";
-import { Accounts } from "@/components/accounts";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { platform } from "@tauri-apps/plugin-os";
+import { useEffect, useState } from "react";
 
 export const Route = createFileRoute("/$account")({
-  component: App,
+	component: Screen,
-  beforeLoad: async () => {
-    const platformName = await platform();
-    return { platform: platformName };
-  },
 });
 
-function App() {
+function Screen() {
-  const navigate = useNavigate();
+	const navigate = Route.useNavigate();
 	const { ark, platform } = Route.useRouteContext();
 
 	return (
@@ -30,16 +27,16 @@ function App() {
 					<button
 						type="button"
 						onClick={() => navigate({ to: "/landing" })}
-            className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
+						className="inline-flex size-8 items-center justify-center rounded-full bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20"
 					>
 						<PlusIcon className="size-5" />
 					</button>
 					<button
 						type="button"
 						onClick={() => ark.open_search()}
-            className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
+						className="inline-flex size-8 items-center justify-center rounded-full bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20"
 					>
-            <SearchIcon className="size-5" />
+						<SearchIcon className="size-4" />
 					</button>
 				</div>
 				<div className="flex items-center gap-3">
@@ -60,3 +57,57 @@ function App() {
 		</div>
 	);
 }
+
+export function Accounts() {
+	const navigate = Route.useNavigate();
+	const { ark } = Route.useRouteContext();
+	const { account } = Route.useParams();
+
+	const [accounts, setAccounts] = useState<Account[]>([]);
+
+	const changeAccount = async (npub: string) => {
+		if (npub === account) return;
+		const select = await ark.load_selected_account(npub);
+		if (select)
+			return navigate({ to: "/$account/home", params: { account: npub } });
+	};
+
+	useEffect(() => {
+		async function getAllAccounts() {
+			const data = await ark.get_all_accounts();
+			if (data) setAccounts(data);
+		}
+
+		getAllAccounts();
+	}, []);
+
+	return (
+		<div data-tauri-drag-region className="flex items-center gap-3">
+			{accounts.map((user) => (
+				<button
+					key={user.npub}
+					type="button"
+					onClick={() => changeAccount(user.npub)}
+				>
+					<User.Provider pubkey={user.npub}>
+						<User.Root
+							className={cn(
+								"rounded-full",
+								user.npub === account
+									? "ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950"
+									: "",
+							)}
+						>
+							<User.Avatar
+								className={cn(
+									"aspect-square h-auto rounded-full object-cover",
+									user.npub === account ? "w-7" : "w-8",
+								)}
+							/>
+						</User.Root>
+					</User.Provider>
+				</button>
+			))}
+		</div>
+	);
+}

apps/desktop2/src/routes/__root.tsx

@@ -1,16 +1,10 @@
-import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import type { Ark } from "@lume/ark";
-import { type Ark } from "@lume/ark";
+import type { Account, Interests, Metadata, Settings } from "@lume/types";
-import { type QueryClient } from "@tanstack/react-query";
-import { type Platform } from "@tauri-apps/plugin-os";
-import type {
-  Account,
-  Contact,
-  Interests,
-  Metadata,
-  Settings,
-} from "@lume/types";
 import { Spinner } from "@lume/ui";
-import { type Descendant } from "slate";
+import type { QueryClient } from "@tanstack/react-query";
+import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import type { Platform } from "@tauri-apps/plugin-os";
+import type { Descendant } from "slate";
 
 type EditorElement = {
 	type: string;
@@ -19,16 +13,20 @@ type EditorElement = {
 };
 
 interface RouterContext {
+	// System
 	ark: Ark;
 	queryClient: QueryClient;
+	// App info
 	platform?: Platform;
 	locale?: string;
+	// Settings
 	settings?: Settings;
 	interests?: Interests;
+	// Profile
 	accounts?: Account[];
-  initialValue?: EditorElement[];
 	profile?: Metadata;
-  contacts?: Contact[];
+	// Editor
+	initialValue?: EditorElement[];
 }
 
 export const Route = createRootRouteWithContext<RouterContext>()({
@@ -40,9 +38,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 function Pending() {
 	return (
 		<div className="flex h-screen w-screen flex-col items-center justify-center">
-      <button type="button" className="size-5" disabled>
 			<Spinner className="size-5" />
-      </button>
 		</div>
 	);
 }

apps/desktop2/src/routes/antenas.tsx

@@ -1,119 +0,0 @@
-import { RepostNote } from "@/components/repost";
-import { TextNote } from "@/components/text";
-import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
-import { ColumnRouteSearch, Event, Kind } from "@lume/types";
-import { Column, Spinner } from "@lume/ui";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { Link, createFileRoute } from "@tanstack/react-router";
-import { Virtualizer } from "virtua";
-
-export const Route = createFileRoute("/antenas")({
-  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
-    return {
-      account: search.account,
-      label: search.label,
-      name: search.name,
-    };
-  },
-  component: Screen,
-});
-
-export function Screen() {
-  const { label, name, account } = Route.useSearch();
-  const { ark } = Route.useRouteContext();
-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
-    useInfiniteQuery({
-      queryKey: [name, account],
-      initialPageParam: 0,
-      queryFn: async ({ pageParam }: { pageParam: number }) => {
-        const events = await ark.get_events(20, pageParam);
-        return events;
-      },
-      getNextPageParam: (lastPage) => {
-        const lastEvent = lastPage?.at(-1);
-        return lastEvent ? lastEvent.created_at - 1 : null;
-      },
-      select: (data) => data?.pages.flatMap((page) => page),
-      refetchOnWindowFocus: false,
-    });
-
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default:
-        return <TextNote key={event.id} event={event} />;
-    }
-  };
-
-  return (
-    <Column.Root>
-      <Column.Header label={label} name={name} />
-      <Column.Content>
-        {isLoading ? (
-          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-            <Spinner className="size-5" />
-          </div>
-        ) : !data.length ? (
-          <Empty />
-        ) : (
-          <Virtualizer overscan={3}>
-            {data.map((item) => renderItem(item))}
-          </Virtualizer>
-        )}
-        <div className="flex h-20 items-center justify-center">
-          {hasNextPage ? (
-            <button
-              type="button"
-              onClick={() => fetchNextPage()}
-              disabled={!hasNextPage || isFetchingNextPage}
-              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
-            >
-              {isFetchingNextPage ? (
-                <Spinner className="size-5" />
-              ) : (
-                <>
-                  <ArrowRightCircleIcon className="size-5" />
-                  Load more
-                </>
-              )}
-            </button>
-          ) : null}
-        </div>
-      </Column.Content>
-    </Column.Root>
-  );
-}
-
-function Empty() {
-  return (
-    <div className="flex flex-col py-10 gap-10">
-      <div className="text-center flex flex-col items-center justify-center">
-        <div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
-          <div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
-        </div>
-        <p className="text-lg font-medium">Your newsfeed is empty</p>
-        <p className="leading-tight text-neutral-700 dark:text-neutral-300">
-          Here are few suggestions to get started.
-        </p>
-      </div>
-      <div className="flex flex-col px-3 gap-2">
-        <Link
-          to="/trending/notes"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Show trending notes
-        </Link>
-        <Link
-          to="/trending/users"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Discover trending users
-        </Link>
-      </div>
-    </div>
-  );
-}

apps/desktop2/src/routes/auth/new/backup.tsx

@@ -1,13 +1,13 @@
+import { CheckIcon } from "@lume/icons";
+import type { AppRouteSearch } from "@lume/types";
 import { displayNsec } from "@lume/utils";
+import * as Checkbox from "@radix-ui/react-checkbox";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import * as Checkbox from "@radix-ui/react-checkbox";
-import { CheckIcon } from "@lume/icons";
-import { AppRouteSearch } from "@lume/types";
 
 export const Route = createFileRoute("/auth/new/backup")({
 	validateSearch: (search: Record<string, string>): AppRouteSearch => {
@@ -34,13 +34,13 @@ function Screen() {
 			if (key) {
 				if (!confirm.c1 || !confirm.c2 || !confirm.c3) {
 					return toast.warning("You need to confirm before continue");
-        } else {
+				}
+
 				return navigate({
 					to: "/auth/settings",
 					search: { account },
 				});
 			}
-      }
 
 			const encrypted: string = await invoke("get_encrypted_key", {
 				npub: account,
@@ -82,7 +82,7 @@ function Screen() {
 							type="password"
 							value={passphase}
 							onChange={(e) => setPassphase(e.target.value)}
-              className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
+							className="w-full h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 						/>
 					</div>
 				</div>
@@ -98,12 +98,12 @@ function Screen() {
 									type="text"
 									value={displayNsec(key, 36)}
 									readOnly
-                  className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
+									className="w-full h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 								/>
 								<button
 									type="button"
-                  onClick={copyKey}
+									onClick={() => copyKey()}
-                  className="inline-flex h-11 w-24 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+									className="inline-flex h-11 w-24 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-white/20 dark:hover:bg-white/30"
 								>
 									{copied ? "Copied" : "Copy"}
 								</button>
@@ -118,7 +118,7 @@ function Screen() {
 										onCheckedChange={() =>
 											setConfirm((state) => ({ ...state, c1: !state.c1 }))
 										}
-                    className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-neutral-900"
+										className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-white/10 dark:hover:bg-white/20"
 										id="confirm1"
 									>
 										<Checkbox.Indicator className="text-blue-500">
@@ -138,7 +138,7 @@ function Screen() {
 										onCheckedChange={() =>
 											setConfirm((state) => ({ ...state, c2: !state.c2 }))
 										}
-                    className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-neutral-900"
+										className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-white/10 dark:hover:bg-white/20"
 										id="confirm2"
 									>
 										<Checkbox.Indicator className="text-blue-500">
@@ -158,7 +158,7 @@ function Screen() {
 										onCheckedChange={() =>
 											setConfirm((state) => ({ ...state, c3: !state.c3 }))
 										}
-                    className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-neutral-900"
+										className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-white/10 dark:hover:bg-white/20"
 										id="confirm3"
 									>
 										<Checkbox.Indicator className="text-blue-500">
@@ -179,7 +179,7 @@ function Screen() {
 				<div>
 					<button
 						type="button"
-            onClick={submit}
+						onClick={() => submit()}
 						className="inline-flex h-11 w-full shrink-0  items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
 					>
 						{t("global.continue")}

apps/desktop2/src/routes/auth/new/profile.tsx

@@ -1,6 +1,6 @@
 import { AvatarUploader } from "@/components/avatarUploader";
 import { PlusIcon } from "@lume/icons";
-import { Metadata } from "@lume/types";
+import type { Metadata } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
@@ -74,7 +74,7 @@ function Screen() {
 					) : null}
 					<AvatarUploader
 						setPicture={setPicture}
-            className="absolute inset-0 z-20 flex h-full w-full items-center justify-center rounded-full bg-black/10 text-white hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+						className="absolute inset-0 z-20 flex h-full w-full items-center justify-center rounded-full dark:text-black bg-black/10 text-white hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
 					>
 						<PlusIcon className="size-8" />
 					</AvatarUploader>
@@ -93,7 +93,7 @@ function Screen() {
 						{...register("display_name", { required: true, minLength: 1 })}
 						placeholder="e.g. Alice in Nostrland"
 						spellCheck={false}
-            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<div className="flex flex-col gap-1">
@@ -105,7 +105,7 @@ function Screen() {
 						{...register("name")}
 						placeholder="e.g. alice"
 						spellCheck={false}
-            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<div className="flex flex-col gap-1">
@@ -116,7 +116,7 @@ function Screen() {
 						{...register("about")}
 						placeholder="e.g. Artist, anime-lover, and k-pop fan"
 						spellCheck={false}
-            className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<div className="flex flex-col gap-1">
@@ -128,7 +128,7 @@ function Screen() {
 						{...register("website")}
 						placeholder="e.g. https://alice.me"
 						spellCheck={false}
-            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<button

apps/desktop2/src/routes/auth/privkey.lazy.tsx

@@ -58,7 +58,7 @@ function Screen() {
 						placeholder="nsec or ncryptsec..."
 						value={key}
 						onChange={(e) => setKey(e.target.value)}
-            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<div className="flex flex-col gap-1">
@@ -73,12 +73,12 @@ function Screen() {
 						type="password"
 						value={password}
 						onChange={(e) => setPassword(e.target.value)}
-            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<button
 					type="button"
-          onClick={submit}
+					onClick={() => submit()}
 					disabled={loading}
 					className="mt-3 inline-flex h-11 w-full shrink-0  items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
 				>

apps/desktop2/src/routes/auth/remote.lazy.tsx

@@ -57,12 +57,12 @@ function Screen() {
 						placeholder="bunker://..."
 						value={uri}
 						onChange={(e) => setUri(e.target.value)}
-            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<button
 					type="button"
-          onClick={submit}
+					onClick={() => submit()}
 					disabled={loading}
 					className="mt-3 inline-flex h-11 w-full shrink-0  items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
 				>

apps/desktop2/src/routes/auth/settings.tsx

@@ -1,15 +1,15 @@
 import { LaurelIcon } from "@lume/icons";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import type { AppRouteSearch, Settings } from "@lume/types";
-import { useTranslation } from "react-i18next";
+import { Spinner } from "@lume/ui";
 import * as Switch from "@radix-ui/react-switch";
-import { useState } from "react";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { AppRouteSearch, Settings } from "@lume/types";
 import {
 	isPermissionGranted,
 	requestPermission,
 } from "@tauri-apps/plugin-notification";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { Spinner } from "@lume/ui";
 
 export const Route = createFileRoute("/auth/settings")({
 	validateSearch: (search: Record<string, string>): AppRouteSearch => {
@@ -97,7 +97,7 @@ function Screen() {
 	return (
 		<div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-6 px-5 xl:max-w-xl">
 			<div className="flex flex-col items-center gap-5 text-center">
-        <div className="flex size-20 items-center justify-center rounded-full bg-teal-100 text-teal-500">
+				<div className="flex size-20 items-center justify-center rounded-full bg-teal-100 dark:bg-teal-950 text-teal-500">
 					<LaurelIcon className="size-8" />
 				</div>
 				<div>
@@ -111,14 +111,7 @@ function Screen() {
 			</div>
 			<div className="flex flex-col gap-5">
 				<div className="flex flex-col gap-3">
-          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+					<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-white/10">
-            <Switch.Root
-              checked={newSettings.notification}
-              onClick={() => toggleNofitication()}
-              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
-            >
-              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
-            </Switch.Root>
 						<div className="flex-1">
 							<h3 className="font-semibold">Push Notification</h3>
 							<p className="text-sm text-neutral-700 dark:text-neutral-300">
@@ -126,15 +119,15 @@ function Screen() {
 								notifications from Lume.
 							</p>
 						</div>
-          </div>
-          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
 						<Switch.Root
-              checked={newSettings.enhancedPrivacy}
+							checked={newSettings.notification}
-              onClick={() => toggleEnhancedPrivacy()}
+							onClick={() => toggleNofitication()}
-              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+							className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/20"
 						>
 							<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
 						</Switch.Root>
+					</div>
+					<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-white/10">
 						<div className="flex-1">
 							<h3 className="font-semibold">Enhanced Privacy</h3>
 							<p className="text-sm text-neutral-700 dark:text-neutral-300">
@@ -142,30 +135,30 @@ function Screen() {
 								preview as plain text.
 							</p>
 						</div>
-          </div>
-          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
 						<Switch.Root
-              checked={newSettings.autoUpdate}
+							checked={newSettings.enhancedPrivacy}
-              onClick={() => toggleAutoUpdate()}
+							onClick={() => toggleEnhancedPrivacy()}
-              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+							className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/20"
 						>
 							<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
 						</Switch.Root>
+					</div>
+					<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-white/10">
 						<div className="flex-1">
 							<h3 className="font-semibold">Auto Update</h3>
 							<p className="text-sm text-neutral-700 dark:text-neutral-300">
 								Automatically download and install new version.
 							</p>
 						</div>
-          </div>
-          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
 						<Switch.Root
-              checked={newSettings.zap}
+							checked={newSettings.autoUpdate}
-              onClick={() => toggleZap()}
+							onClick={() => toggleAutoUpdate()}
-              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+							className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/20"
 						>
 							<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
 						</Switch.Root>
+					</div>
+					<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-white/10">
 						<div className="flex-1">
 							<h3 className="font-semibold">Zap</h3>
 							<p className="text-sm text-neutral-700 dark:text-neutral-300">
@@ -173,15 +166,15 @@ function Screen() {
 								for send Bitcoin tip to other users.
 							</p>
 						</div>
-          </div>
-          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
 						<Switch.Root
-              checked={newSettings.nsfw}
+							checked={newSettings.zap}
-              onClick={() => toggleNsfw()}
+							onClick={() => toggleZap()}
-              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+							className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/20"
 						>
 							<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
 						</Switch.Root>
+					</div>
+					<div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-white/10">
 						<div className="flex-1">
 							<h3 className="font-semibold">Filter sensitive content</h3>
 							<p className="text-sm text-neutral-700 dark:text-neutral-300">
@@ -189,11 +182,18 @@ function Screen() {
 								Warning tag, it's may include NSFW content.
 							</p>
 						</div>
+						<Switch.Root
+							checked={newSettings.nsfw}
+							onClick={() => toggleNsfw()}
+							className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/20"
+						>
+							<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+						</Switch.Root>
 					</div>
 				</div>
 				<button
 					type="button"
-          onClick={submit}
+					onClick={() => submit()}
 					disabled={loading}
 					className="mb-1 inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
 				>

apps/desktop2/src/routes/create-group.tsx

@@ -1,6 +1,6 @@
 import { CheckCircleIcon } from "@lume/icons";
-import { ColumnRouteSearch } from "@lume/types";
+import type { ColumnRouteSearch } from "@lume/types";
-import { Column, Spinner, User } from "@lume/ui";
+import { Spinner, User } from "@lume/ui";
 import { createFileRoute, useRouter } from "@tanstack/react-router";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -26,7 +26,7 @@ function Screen() {
 	const router = useRouter();
 
 	const { ark } = Route.useRouteContext();
-  const { label, name, redirect } = Route.useSearch();
+	const { label, redirect } = Route.useSearch();
 
 	const [title, setTitle] = useState<string>("Just a new group");
 	const [users, setUsers] = useState<Array<string>>([]);
@@ -65,9 +65,7 @@ function Screen() {
 	};
 
 	return (
-    <Column.Root>
+		<div className="h-full overflow-y-auto scrollbar-none">
-      <Column.Header label={label} name={name} />
-      <Column.Content>
 			<div className="flex flex-col gap-5 p-3">
 				<div className="flex flex-col gap-1">
 					<label htmlFor="name" className="font-medium">
@@ -78,13 +76,13 @@ function Screen() {
 						value={title}
 						onChange={(e) => setTitle(e.target.value)}
 						placeholder="Nostrichs..."
-              className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+						className="h-10 rounded-lg bg-transparent border border-neutral-300 dark:border-neutral-700 px-3 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<div className="flex flex-col gap-1">
 					<div className="inline-flex items-center justify-between">
 						<span className="font-medium">Pick user</span>
-              <span className="text-xs text-neutral-600 dark:text-neutral-400">{`${users.length} / ∞`}</span>
+						<span className="text-neutral-600 dark:text-neutral-400">{`${users.length} / ∞`}</span>
 					</div>
 					<div className="flex flex-col gap-2">
 						{contacts.map((item: string) => (
@@ -92,14 +90,14 @@ function Screen() {
 								key={item}
 								type="button"
 								onClick={() => toggleUser(item)}
-                  className="inline-flex items-center justify-between px-3 py-2 rounded-xl bg-neutral-50 dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900"
+								className="inline-flex items-center justify-between px-3 py-2 rounded-lg bg-black/10 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20"
 							>
 								<User.Provider pubkey={item}>
 									<User.Root className="flex items-center gap-2.5">
 										<User.Avatar className="size-10 rounded-full object-cover" />
-                      <div className="flex flex-col items-start">
+										<div className="flex items-center gap-1">
 											<User.Name className="font-medium" />
-                        <User.NIP05 className="text-neutral-700 dark:text-neutral-300" />
+											<User.NIP05 />
 										</div>
 									</User.Root>
 								</User.Provider>
@@ -112,16 +110,17 @@ function Screen() {
 				</div>
 			</div>
 			<div className="fixed z-10 flex items-center justify-center w-full bottom-6">
+				{users.length >= 1 ? (
 					<button
 						type="button"
-            onClick={submit}
+						onClick={() => submit()}
 						disabled={users.length < 1}
-            className="inline-flex items-center justify-center px-4 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-26 h-9 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
+						className="inline-flex items-center justify-center px-4 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-32 h-10 hover:bg-blue-600 focus:outline-none"
 					>
 						{isDone ? "Back" : loading ? <Spinner /> : "Update"}
 					</button>
+				) : null}
+			</div>
 		</div>
-      </Column.Content>
-    </Column.Root>
 	);
 }

apps/desktop2/src/routes/editor/-components/media.tsx

@@ -1,13 +1,13 @@
 import { AddMediaIcon } from "@lume/icons";
+import { Spinner } from "@lume/ui";
 import { cn, insertImage, isImagePath } from "@lume/utils";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useRouteContext } from "@tanstack/react-router";
+import type { UnlistenFn } from "@tauri-apps/api/event";
+import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useState } from "react";
 import { useSlateStatic } from "slate-react";
 import { toast } from "sonner";
-import { getCurrent } from "@tauri-apps/api/window";
-import { UnlistenFn } from "@tauri-apps/api/event";
-import { useRouteContext } from "@tanstack/react-router";
-import { Spinner } from "@lume/ui";
-import * as Tooltip from "@radix-ui/react-tooltip";
 
 export function MediaButton({ className }: { className?: string }) {
 	const { ark } = useRouteContext({ strict: false });

apps/desktop2/src/routes/editor/-components/nsfw.tsx

@@ -1,7 +1,7 @@
 import { NsfwIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 
 export function NsfwToggle({
 	nsfw,

apps/desktop2/src/routes/editor/index.tsx

@@ -1,4 +1,6 @@
 import { ComposeFilledIcon, TrashIcon } from "@lume/icons";
+import { Spinner, User } from "@lume/ui";
+import { MentionNote } from "@lume/ui/src/note/mentions/note";
 import {
 	Portal,
 	cn,
@@ -9,12 +11,11 @@ import {
 	sendNativeNotification,
 } from "@lume/utils";
 import { createFileRoute } from "@tanstack/react-router";
+import { nip19 } from "nostr-tools";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MediaButton } from "./-components/media";
-import { MentionNote } from "@lume/ui/src/note/mentions/note";
 import {
-  Descendant,
+	type Descendant,
 	Editor,
 	Node,
 	Range,
@@ -22,18 +23,15 @@ import {
 	createEditor,
 } from "slate";
 import {
-  ReactEditor,
-  useSlateStatic,
-  useSelected,
-  useFocused,
-  withReact,
-  Slate,
 	Editable,
+	ReactEditor,
+	Slate,
+	useFocused,
+	useSelected,
+	useSlateStatic,
+	withReact,
 } from "slate-react";
-import { Contact } from "@lume/types";
+import { MediaButton } from "./-components/media";
-import { Spinner, User } from "@lume/ui";
-import { nip19 } from "nostr-tools";
-import { invoke } from "@tauri-apps/api/core";
 import { NsfwToggle } from "./-components/nsfw";
 
 type EditorSearch = {
@@ -49,10 +47,7 @@ export const Route = createFileRoute("/editor/")({
 		};
 	},
 	beforeLoad: async ({ search }) => {
-    const contacts: Contact[] = await invoke("get_contact_metadata");
-
 		return {
-      contacts,
 			initialValue: search.quote
 				? [
 						{
@@ -97,11 +92,12 @@ function Screen() {
 		withMentions(withNostrEvent(withImages(withReact(createEditor())))),
 	);
 
-  const filters = contacts
+	const filters =
+		contacts
 			?.filter((c) =>
 				c?.profile.name?.toLowerCase().startsWith(search.toLowerCase()),
 			)
-    ?.slice(0, 5);
+			?.slice(0, 5) ?? [];
 
 	const reset = () => {
 		// @ts-expect-error, backlog
@@ -209,7 +205,7 @@ function Screen() {
 					<MediaButton className="size-8 rounded-full bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700" />
 					<button
 						type="button"
-            onClick={publish}
+						onClick={() => publish()}
 						className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
 					>
 						{loading ? (

apps/desktop2/src/routes/events/$eventId.lazy.tsx

@@ -1,71 +0,0 @@
-import { useEvent } from "@lume/ark";
-import { Box, Container, Note, Spinner, User } from "@lume/ui";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { ReplyList } from "./-components/replyList";
-import { WindowVirtualizer } from "virtua";
-import { type Event } from "@lume/types";
-
-export const Route = createLazyFileRoute("/events/$eventId")({
-  component: Event,
-});
-
-function Event() {
-  const { eventId } = Route.useParams();
-  const { isLoading, isError, data } = useEvent(eventId);
-
-  if (isLoading) {
-    return (
-      <div className="flex h-full w-full items-center justify-center">
-        <Spinner className="size-5 animate-spin" />
-      </div>
-    );
-  }
-
-  if (isError) {
-    <div className="flex h-full w-full items-center justify-center">
-      <p>Not found.</p>
-    </div>;
-  }
-
-  return (
-    <Container withDrag>
-      <Box className="px-3 pt-3 scrollbar-none">
-        <WindowVirtualizer>
-          <MainNote data={data} />
-          {data ? <ReplyList eventId={eventId} /> : null}
-        </WindowVirtualizer>
-      </Box>
-    </Container>
-  );
-}
-
-function MainNote({ data }: { data: Event }) {
-  return (
-    <Note.Provider event={data}>
-      <Note.Root className="flex flex-col pb-3">
-        <User.Provider pubkey={data.pubkey}>
-          <User.Root className="mb-3 flex flex-1 items-center gap-3">
-            <User.Avatar className="size-11 shrink-0 rounded-full object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
-            <div className="flex flex-1 flex-col">
-              <User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
-              <div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
-                <User.Time time={data.created_at} />
-                <span>·</span>
-                <User.NIP05 />
-              </div>
-            </div>
-          </User.Root>
-        </User.Provider>
-        <Note.Thread className="mb-2" />
-        <Note.Content className="min-w-0" />
-        <div className="mt-4 flex items-center justify-between">
-          <div className="-ml-1 inline-flex items-center gap-4">
-            <Note.Repost />
-            <Note.Zap />
-          </div>
-          <Note.Menu />
-        </div>
-      </Note.Root>
-    </Note.Provider>
-  );
-}

apps/desktop2/src/routes/events/$eventId.tsx

@@ -0,0 +1,71 @@
+import { useEvent } from "@lume/ark";
+import type { Event } from "@lume/types";
+import { Box, Container, Note, Spinner } from "@lume/ui";
+import { createFileRoute } from "@tanstack/react-router";
+import { WindowVirtualizer } from "virtua";
+import { ReplyList } from "./-components/replyList";
+
+export const Route = createFileRoute("/events/$eventId")({
+	beforeLoad: async ({ context }) => {
+		const ark = context.ark;
+		const settings = await ark.get_settings();
+
+		return { settings };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { eventId } = Route.useParams();
+	const { isLoading, isError, data } = useEvent(eventId);
+
+	if (isLoading) {
+		return (
+			<div className="flex h-full w-full items-center justify-center">
+				<Spinner className="size-5" />
+			</div>
+		);
+	}
+
+	if (isError) {
+		<div className="flex h-full w-full items-center justify-center">
+			<p>Not found.</p>
+		</div>;
+	}
+
+	return (
+		<Container withDrag>
+			<Box className="scrollbar-none">
+				<WindowVirtualizer>
+					<MainNote data={data} />
+					{data ? (
+						<ReplyList eventId={eventId} />
+					) : (
+						<div className="flex h-full w-full items-center justify-center">
+							<Spinner className="size-5" />
+						</div>
+					)}
+				</WindowVirtualizer>
+			</Box>
+		</Container>
+	);
+}
+
+function MainNote({ data }: { data: Event }) {
+	return (
+		<Note.Provider event={data}>
+			<Note.Root>
+				<div className="px-3 h-14 flex items-center justify-between">
+					<Note.User />
+					<Note.Menu />
+				</div>
+				<Note.ContentLarge className="px-3" />
+				<div className="mt-4 h-11 gap-2 flex items-center justify-end px-3">
+					<Note.Reply large />
+					<Note.Repost large />
+					<Note.Zap large />
+				</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}

apps/desktop2/src/routes/events/-components/reply.tsx

@@ -1,37 +1,26 @@
-import { EventWithReplies } from "@lume/types";
+import type { EventWithReplies } from "@lume/types";
-import { cn } from "@lume/utils";
 import { Note, User } from "@lume/ui";
+import { cn } from "@lume/utils";
 import { SubReply } from "./subReply";
 
 export function Reply({ event }: { event: EventWithReplies }) {
 	return (
 		<Note.Provider event={event}>
-      <Note.Root className="border-t border-neutral-100 pt-3 dark:border-neutral-900">
+			<Note.Root className="border-t border-neutral-100 dark:border-neutral-900">
-        <User.Provider pubkey={event.pubkey}>
+				<div className="px-3 h-14 flex items-center justify-between">
-          <User.Root className="mb-2 flex items-center justify-between">
+					<Note.User />
-            <div className="inline-flex gap-2">
+					<Note.Menu />
-              <User.Avatar className="size-6 rounded-full" />
-              <div className="inline-flex items-center gap-2">
-                <User.Name className="font-semibold" />
-                <User.NIP05 className="text-base lowercase text-neutral-600 dark:text-neutral-400" />
 				</div>
-            </div>
+				<Note.ContentLarge className="px-3" />
-            <User.Time time={event.created_at} />
+				<div className="mt-3 flex items-center gap-4 px-3 h-14">
-          </User.Root>
-        </User.Provider>
-        <Note.Content />
-        <div className="mt-4 flex items-center justify-between">
-          <div className="-ml-1 inline-flex items-center gap-4">
 					<Note.Reply />
 					<Note.Repost />
 					<Note.Zap />
 				</div>
-          <Note.Menu />
-        </div>
 				<div
 					className={cn(
 						event.replies?.length > 0
-              ? "my-3 mt-6 flex flex-col gap-3 divide-y divide-neutral-100 border-l-2 border-neutral-100 pl-6 dark:divide-neutral-900 dark:border-neutral-900"
+							? "py-2 pl-3 flex flex-col gap-3 divide-y divide-neutral-100 bg-neutral-50 dark:bg-white/5 border-l-2 border-blue-500 dark:divide-neutral-900"
 							: "",
 					)}
 				>

apps/desktop2/src/routes/events/-components/replyList.tsx

@@ -1,10 +1,10 @@
+import type { EventWithReplies } from "@lume/types";
+import { Spinner } from "@lume/ui";
 import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { EventWithReplies } from "@lume/types";
 import { Reply } from "./reply";
-import { useRouteContext } from "@tanstack/react-router";
-import { Spinner } from "@lume/ui";
 
 export function ReplyList({
 	eventId,
@@ -26,13 +26,16 @@ export function ReplyList({
 	}, [eventId]);
 
 	return (
-    <div className={cn("flex flex-col gap-3", className)}>
+		<div className={cn("flex flex-col", className)}>
+			<div className="h-11 flex px-3 items-center text-sm font-semibold text-neutral-700 dark:text-neutral-300 border-t border-neutral-100 dark:border-neutral-900">
+				Replies ({data?.length ?? 0})
+			</div>
 			{!data ? (
-        <div className="mt-4 flex h-16 items-center justify-center p-3">
+				<div className="flex h-16 items-center justify-center p-3">
 					<Spinner className="size-5" />
 				</div>
 			) : data.length === 0 ? (
-        <div className="mt-4 flex w-full items-center justify-center">
+				<div className="flex w-full items-center justify-center">
 					<div className="flex flex-col items-center justify-center gap-2 py-6">
 						<h3 className="text-3xl">👋</h3>
 						<p className="leading-none text-neutral-600 dark:text-neutral-400">

apps/desktop2/src/routes/events/-components/subReply.tsx

@@ -1,31 +1,20 @@
-import { Event } from "@lume/types";
+import type { Event } from "@lume/types";
-import { Note, User } from "@lume/ui";
+import { Note } from "@lume/ui";
 
 export function SubReply({ event }: { event: Event; rootEventId?: string }) {
 	return (
 		<Note.Provider event={event}>
-      <Note.Root className="pt-3">
+			<Note.Root>
-        <User.Provider pubkey={event.pubkey}>
+				<div className="px-3 h-14 flex items-center justify-between">
-          <User.Root className="mb-2 flex items-center justify-between">
+					<Note.User />
-            <div className="inline-flex gap-2">
+					<Note.Menu />
-              <User.Avatar className="size-6 rounded-full" />
-              <div className="inline-flex items-center gap-2">
-                <User.Name className="font-semibold" />
-                <User.NIP05 className="text-base lowercase text-neutral-600 dark:text-neutral-400" />
 				</div>
-            </div>
+				<Note.ContentLarge className="px-3" />
-            <User.Time time={event.created_at} />
+				<div className="mt-3 flex items-center gap-4 px-3">
-          </User.Root>
-        </User.Provider>
-        <Note.Content />
-        <div className="mt-4 flex items-center justify-between">
-          <div className="-ml-1 inline-flex items-center gap-4">
 					<Note.Reply />
 					<Note.Repost />
 					<Note.Zap />
 				</div>
-          <Note.Menu />
-        </div>
 			</Note.Root>
 		</Note.Provider>
 	);

apps/desktop2/src/routes/foryou.tsx

@@ -1,8 +1,8 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
 import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
-import { ColumnRouteSearch, Event, Kind } from "@lume/types";
+import { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
-import { Column, Spinner } from "@lume/ui";
+import { Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute, redirect } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -39,10 +39,16 @@ export const Route = createFileRoute("/foryou")({
 });
 
 export function Screen() {
-  const { label, name, account } = Route.useSearch();
+	const { name, account } = Route.useSearch();
 	const { ark, interests } = Route.useRouteContext();
-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+	const {
-    useInfiniteQuery({
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
 		queryKey: [name, account],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
@@ -72,14 +78,19 @@ export function Screen() {
 	};
 
 	return (
-    <Column.Root>
+		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-      <Column.Header label={label} name={name} />
+			{isFetching && !isLoading && !isFetchingNextPage ? (
-      <Column.Content>
+				<div className="w-full h-11 flex items-center justify-center">
-        {isLoading ? (
+					<div className="flex items-center justify-center gap-2">
-          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-            <button type="button" className="size-5" disabled>
 						<Spinner className="size-5" />
-            </button>
+						<span className="text-sm font-medium">Fetching new notes...</span>
+					</div>
+				</div>
+			) : null}
+			{isLoading ? (
+				<div className="flex h-16 w-full items-center justify-center gap-2">
+					<Spinner className="size-5" />
+					<span className="text-sm font-medium">Loading...</span>
 				</div>
 			) : !data.length ? (
 				<Empty />
@@ -89,12 +100,12 @@ export function Screen() {
 				</Virtualizer>
 			)}
 			{data?.length && hasNextPage ? (
-          <div className="flex h-20 items-center justify-center">
+				<div>
 					<button
 						type="button"
 						onClick={() => fetchNextPage()}
-              disabled={isFetchingNextPage}
+						disabled={isFetchingNextPage || isLoading}
-              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+						className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 px-3 font-medium hover:bg-neutral-50 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
 					>
 						{isFetchingNextPage ? (
 							<Spinner className="size-5" />
@@ -107,8 +118,7 @@ export function Screen() {
 					</button>
 				</div>
 			) : null}
-      </Column.Content>
+		</div>
-    </Column.Root>
 	);
 }
 

apps/desktop2/src/routes/global.tsx

@@ -1,8 +1,10 @@
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
 import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
-import { ColumnRouteSearch, Event, Kind } from "@lume/types";
+import { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
-import { Column, Spinner } from "@lume/ui";
+import { Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -25,10 +27,16 @@ export const Route = createFileRoute("/global")({
 });
 
 export function Screen() {
-  const { label, name, account } = Route.useSearch();
+	const { account } = Route.useSearch();
 	const { ark } = Route.useRouteContext();
-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+	const {
-    useInfiniteQuery({
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
 		queryKey: ["global", account],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
@@ -48,20 +56,39 @@ export function Screen() {
 		switch (event.kind) {
 			case Kind.Repost:
 				return <RepostNote key={event.id} event={event} />;
-      default:
+			default: {
-        return <TextNote key={event.id} event={event} />;
+				const isConversation =
+					event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
+						.length > 0;
+				const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
+
+				if (isConversation) {
+					return <Conversation key={event.id} event={event} className="mb-3" />;
+				}
+
+				if (isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
+
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
 		}
 	};
 
 	return (
-    <Column.Root>
+		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-      <Column.Header label={label} name={name} />
+			{isFetching && !isLoading && !isFetchingNextPage ? (
-      <Column.Content>
+				<div className="w-full h-11 flex items-center justify-center">
-        {isLoading ? (
+					<div className="flex items-center justify-center gap-2">
-          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-            <button type="button" className="size-5" disabled>
 						<Spinner className="size-5" />
-            </button>
+						<span className="text-sm font-medium">Fetching new notes...</span>
+					</div>
+				</div>
+			) : null}
+			{isLoading ? (
+				<div className="flex h-16 w-full items-center justify-center gap-2">
+					<Spinner className="size-5" />
+					<span className="text-sm font-medium">Loading...</span>
 				</div>
 			) : !data.length ? (
 				<Empty />
@@ -71,12 +98,12 @@ export function Screen() {
 				</Virtualizer>
 			)}
 			{data?.length && hasNextPage ? (
-          <div className="flex h-20 items-center justify-center">
+				<div>
 					<button
 						type="button"
 						onClick={() => fetchNextPage()}
 						disabled={isFetchingNextPage || isLoading}
-              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+						className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-black/5 px-3 font-medium hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
 					>
 						{isFetchingNextPage ? (
 							<Spinner className="size-5" />
@@ -89,8 +116,7 @@ export function Screen() {
 					</button>
 				</div>
 			) : null}
-      </Column.Content>
+		</div>
-    </Column.Root>
 	);
 }
 

apps/desktop2/src/routes/group.tsx

@@ -1,8 +1,8 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
 import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
-import { ColumnRouteSearch, Event, Kind } from "@lume/types";
+import { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
-import { Column, Spinner } from "@lume/ui";
+import { Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute, redirect } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -41,10 +41,16 @@ export const Route = createFileRoute("/group")({
 });
 
 export function Screen() {
-  const { label, name, account } = Route.useSearch();
+	const { name, account } = Route.useSearch();
 	const { ark, groups } = Route.useRouteContext();
-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+	const {
-    useInfiniteQuery({
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
 		queryKey: [name, account],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
@@ -55,7 +61,8 @@ export function Screen() {
 			const lastEvent = lastPage?.at(-1);
 			return lastEvent ? lastEvent.created_at - 1 : null;
 		},
-      select: (data) => data?.pages.flatMap((page) => page),
+		select: (data) =>
+			data?.pages.flatMap((page) => page.filter((ev) => ev.kind === Kind.Text)),
 		refetchOnWindowFocus: false,
 	});
 
@@ -70,12 +77,19 @@ export function Screen() {
 	};
 
 	return (
-    <Column.Root>
+		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-      <Column.Header label={label} name={name} />
+			{isFetching && !isLoading && !isFetchingNextPage ? (
-      <Column.Content>
+				<div className="w-full h-11 flex items-center justify-center">
-        {isLoading ? (
+					<div className="flex items-center justify-center gap-2">
-          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
 						<Spinner className="size-5" />
+						<span className="text-sm font-medium">Fetching new notes...</span>
+					</div>
+				</div>
+			) : null}
+			{isLoading ? (
+				<div className="flex h-16 w-full items-center justify-center gap-2">
+					<Spinner className="size-5" />
+					<span className="text-sm font-medium">Loading...</span>
 				</div>
 			) : !data.length ? (
 				<Empty />
@@ -84,13 +98,13 @@ export function Screen() {
 					{data.map((item) => renderItem(item))}
 				</Virtualizer>
 			)}
-        <div className="flex h-20 items-center justify-center">
+			{data?.length && hasNextPage ? (
-          {hasNextPage ? (
+				<div>
 					<button
 						type="button"
 						onClick={() => fetchNextPage()}
-              disabled={!hasNextPage || isFetchingNextPage}
+						disabled={isFetchingNextPage || isLoading}
-              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+						className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 px-3 font-medium hover:bg-neutral-50 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
 					>
 						{isFetchingNextPage ? (
 							<Spinner className="size-5" />
@@ -101,10 +115,9 @@ export function Screen() {
 							</>
 						)}
 					</button>
+				</div>
 			) : null}
 		</div>
-      </Column.Content>
-    </Column.Root>
 	);
 }
 

apps/desktop2/src/routes/index.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from "@lume/icons";
 import { Spinner, User } from "@lume/ui";
 import { Link } from "@tanstack/react-router";
-import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { useState } from "react";
 
 export const Route = createFileRoute("/")({
@@ -17,7 +17,7 @@ export const Route = createFileRoute("/")({
 					replace: true,
 				});
 			// Only 1 account, skip account selection screen
-      case 1:
+			case 1: {
 				const account = accounts[0].npub;
 				const loadedAccount = await ark.load_selected_account(account);
 
@@ -28,6 +28,9 @@ export const Route = createFileRoute("/")({
 						replace: true,
 					});
 				}
+
+				break;
+			}
 			// Account selection
 			default:
 				return { accounts };
@@ -37,7 +40,7 @@ export const Route = createFileRoute("/")({
 });
 
 function Screen() {
-  const navigate = useNavigate();
+	const navigate = Route.useNavigate();
 	const context = Route.useRouteContext();
 
 	const [loading, setLoading] = useState(false);
@@ -115,6 +118,7 @@ function Screen() {
 					href="https://njump.me/nprofile1qqs9tuz9jpn57djg7nxunhyvuvk69g5zqaxdpvpqt9hwqv7395u9rpg6zq5uw"
 					target="_blank"
 					className="absolute bottom-3 right-3 z-50 rounded-md bg-white/20 px-2 py-1 text-xs font-medium text-white dark:bg-black/20"
+					rel="noreferrer"
 				>
 					Design by NoGood
 				</a>

apps/desktop2/src/routes/interests.tsx

@@ -1,5 +1,4 @@
-import { ColumnRouteSearch } from "@lume/types";
+import type { ColumnRouteSearch } from "@lume/types";
-import { Column } from "@lume/ui";
 import { TOPICS, cn } from "@lume/utils";
 import { createFileRoute, useRouter } from "@tanstack/react-router";
 import { useState } from "react";
@@ -56,10 +55,8 @@ function Screen() {
 	};
 
 	return (
-    <Column.Root>
+		<div className="h-full flex flex-col px-2">
-      <Column.Header label={label} name={name} />
+			<div className="shrink-0 flex h-16 items-center justify-between">
-      <Column.Content>
-        <div className="sticky left-0 top-0 flex h-16 w-full items-center justify-between border-b border-neutral-100 bg-white px-3 dark:border-neutral-900 dark:bg-black">
 				<div className="flex flex-1 flex-col">
 					<h3 className="font-semibold">Interests</h3>
 					<p className="text-sm leading-tight text-neutral-700 dark:text-neutral-300">
@@ -74,11 +71,13 @@ function Screen() {
 					{isDone ? t("global.back") : t("global.update")}
 				</button>
 			</div>
-        <div className="flex w-full flex-col p-3">
+			<div className="flex-1 flex flex-col gap-3 pb-2 scrollbar-none overflow-y-auto">
-          <div className="flex flex-col gap-8">
 				{TOPICS.map((topic) => (
-              <div key={topic.title} className="flex flex-col gap-4">
+					<div
-                <div className="flex w-full items-center justify-between">
+						key={topic.title}
+						className="flex flex-col gap-4 bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50"
+					>
+						<div className="px-3 flex w-full items-center justify-between h-14 shrink-0 border-b border-neutral-100 dark:border-neutral-900">
 							<div className="inline-flex items-center gap-2.5">
 								<img
 									src={topic.icon}
@@ -95,7 +94,7 @@ function Screen() {
 								{t("interests.followAll")}
 							</button>
 						</div>
-                <div className="flex flex-wrap items-center gap-3">
+						<div className="px-3 pb-3 flex flex-wrap items-center gap-3">
 							{topic.content.map((hashtag) => (
 								<button
 									key={hashtag}
@@ -116,7 +115,5 @@ function Screen() {
 				))}
 			</div>
 		</div>
-      </Column.Content>
-    </Column.Root>
 	);
 }

apps/desktop2/src/routes/landing/index.tsx

@@ -20,8 +20,8 @@ function Screen() {
 				<div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-10">
 					<div className="flex flex-col items-center text-center">
 						<img
-              src={`/heading-en.png`}
+							src="/heading-en.png"
-              srcSet={`/heading-en@2x.png 2x`}
+							srcSet="/heading-en@2x.png 2x"
 							alt="lume"
 							className="xl:w-2/3"
 						/>
@@ -61,7 +61,7 @@ function Screen() {
 						</div>
 					</div>
 				</div>
-        <div className="flex h-11 items-center justify-center"></div>
+				<div className="flex h-11 items-center justify-center" />
 			</div>
 			<div className="absolute z-10 h-full w-full bg-black/5 backdrop-blur-sm" />
 			<div className="absolute inset-0 h-full w-full">
@@ -75,6 +75,7 @@ function Screen() {
 					href="https://njump.me/nprofile1qqs9tuz9jpn57djg7nxunhyvuvk69g5zqaxdpvpqt9hwqv7395u9rpg6zq5uw"
 					target="_blank"
 					className="absolute bottom-3 right-3 z-50 rounded-md bg-white/20 px-2 py-1 text-xs font-medium text-white backdrop-blur-md dark:bg-black/20"
+					rel="noreferrer"
 				>
 					Design by NoGood
 				</a>

apps/desktop2/src/routes/newsfeed.tsx

@@ -1,8 +1,10 @@
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
 import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
-import { ColumnRouteSearch, Event, Kind } from "@lume/types";
+import { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
-import { Column, Spinner } from "@lume/ui";
+import { Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
@@ -25,7 +27,7 @@ export const Route = createFileRoute("/newsfeed")({
 });
 
 export function Screen() {
-  const { label, name, account } = Route.useSearch();
+	const { label, account } = Route.useSearch();
 	const { ark } = Route.useRouteContext();
 	const {
 		data,
@@ -54,17 +56,29 @@ export function Screen() {
 		switch (event.kind) {
 			case Kind.Repost:
 				return <RepostNote key={event.id} event={event} />;
-      default:
+			default: {
-        return <TextNote key={event.id} event={event} />;
+				const isConversation =
+					event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
+						.length > 0;
+				const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
+
+				if (isConversation) {
+					return <Conversation key={event.id} event={event} className="mb-3" />;
+				}
+
+				if (isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
+
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
 		}
 	};
 
 	return (
-    <Column.Root>
+		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-      <Column.Header label={label} name={name} />
-      <Column.Content>
 			{isFetching && !isLoading && !isFetchingNextPage ? (
-          <div className="w-full h-16 flex items-center justify-center border-b border-neutral-100 dark:border-neutral-900">
+				<div className="w-full h-11 flex items-center justify-center">
 					<div className="flex items-center justify-center gap-2">
 						<Spinner className="size-5" />
 						<span className="text-sm font-medium">Fetching new notes...</span>
@@ -84,12 +98,12 @@ export function Screen() {
 				</Virtualizer>
 			)}
 			{data?.length && hasNextPage ? (
-          <div className="flex h-20 items-center justify-center">
+				<div>
 					<button
 						type="button"
 						onClick={() => fetchNextPage()}
 						disabled={isFetchingNextPage || isLoading}
-              className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+						className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-black/5 px-3 font-medium hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
 					>
 						{isFetchingNextPage ? (
 							<Spinner className="size-5" />
@@ -102,8 +116,7 @@ export function Screen() {
 					</button>
 				</div>
 			) : null}
-      </Column.Content>
+		</div>
-    </Column.Root>
 	);
 }
 
@@ -125,26 +138,26 @@ function Empty() {
 				<Link
 					to="/global"
 					search={search}
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+					className="h-11 w-full flex items-center justify-between bg-black/10 hover:bg-black/20 text-sm font-medium dark:bg-white/10 dark:hover:bg-white/20 gap-2 rounded-lg px-3"
 				>
-          <ArrowRightIcon className="size-5" />
 					Show global newsfeed
+					<ArrowRightIcon className="size-5" />
 				</Link>
 				<Link
 					to="/trending/notes"
 					search={search}
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+					className="h-11 w-full flex items-center justify-between bg-black/10 hover:bg-black/20 text-sm font-medium dark:bg-white/10 dark:hover:bg-white/20 gap-2 rounded-lg px-3"
 				>
-          <ArrowRightIcon className="size-5" />
 					Show trending notes
+					<ArrowRightIcon className="size-5" />
 				</Link>
 				<Link
 					to="/trending/users"
 					search={search}
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+					className="h-11 w-full flex items-center justify-between bg-black/10 hover:bg-black/20 text-sm font-medium dark:bg-white/10 dark:hover:bg-white/20 gap-2 rounded-lg px-3"
 				>
-          <ArrowRightIcon className="size-5" />
 					Discover trending users
+					<ArrowRightIcon className="size-5" />
 				</Link>
 			</div>
 		</div>

apps/desktop2/src/routes/open.lazy.tsx

@@ -1,6 +1,5 @@
 import { PlusIcon } from "@lume/icons";
-import { LumeColumn } from "@lume/types";
+import type { LumeColumn } from "@lume/types";
-import { Column } from "@lume/ui";
 import { createLazyRoute } from "@tanstack/react-router";
 import { getCurrent } from "@tauri-apps/api/window";
 
@@ -15,8 +14,7 @@ function Screen() {
 	};
 
 	return (
-    <Column.Root shadow={false} background={false}>
+		<div className="relative flex h-full w-full items-center justify-center">
-      <Column.Content className="relative flex h-full w-full items-center justify-center">
 			<div className="group absolute left-0 top-0 z-10 h-full w-12">
 				<button
 					type="button"
@@ -45,7 +43,6 @@ function Screen() {
 			>
 				<PlusIcon className="size-8" />
 			</button>
-      </Column.Content>
+		</div>
-    </Column.Root>
 	);
 }

apps/desktop2/src/routes/search.tsx

@@ -1,8 +1,8 @@
 import { SearchIcon } from "@lume/icons";
-import { Event, Kind } from "@lume/types";
+import { type Event, Kind } from "@lume/types";
 import { Note, Spinner, User } from "@lume/ui";
 import { createFileRoute } from "@tanstack/react-router";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useDebounce } from "use-debounce";
 
 export const Route = createFileRoute("/search")({
@@ -41,8 +41,12 @@ function Screen() {
 		>
 			<div
 				data-tauri-drag-region
-        className="h-24 shrink-0 flex items-end border-neutral-300 border dark:border-neutral-700"
+				className="relative h-24 shrink-0 flex items-end border-neutral-300 border-b dark:border-neutral-700"
 			>
+				<div
+					data-tauri-drag-region
+					className="absolute top-0 left-0 w-full h-4"
+				/>
 				<input
 					value={search}
 					onChange={(e) => setSearch(e.target.value)}
@@ -50,7 +54,7 @@ function Screen() {
 						if (e.key === "Enter") searchEvents();
 					}}
 					placeholder="Search anything..."
-          className="w-full h-20 pt-10 px-6 text-lg bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
+					className="z-10 w-full h-20 pt-10 px-6 text-lg bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
 				/>
 			</div>
 			<div className="flex-1 p-3 overflow-y-auto scrollbar-none">
@@ -70,9 +74,9 @@ function Screen() {
 							</div>
 							<div className="flex-1 flex flex-col gap-3">
 								{events
-                  .filter((ev) => ev.kind === Kind["Metadata"])
+									.filter((ev) => ev.kind === Kind.Metadata)
 									.map((event) => (
-                    <SearchUser event={event} />
+										<SearchUser key={event.id} event={event} />
 									))}
 							</div>
 						</div>
@@ -82,9 +86,9 @@ function Screen() {
 							</div>
 							<div className="flex-1 flex flex-col gap-3">
 								{events
-                  .filter((ev) => ev.kind === Kind["Text"])
+									.filter((ev) => ev.kind === Kind.Text)
 									.map((event) => (
-                    <SearchNote event={event} />
+										<SearchNote key={event.id} event={event} />
 									))}
 							</div>
 						</div>
@@ -132,7 +136,8 @@ function SearchNote({ event }: { event: Event }) {
 	return (
 		<div
 			key={event.id}
-      onClick={() => ark.open_thread(event.id)}
+			onClick={() => ark.open_event(event)}
+			onKeyDown={() => ark.open_event(event)}
 			className="p-3 bg-white rounded-lg dark:bg-black"
 		>
 			<Note.Provider event={event}>

apps/desktop2/src/routes/settings.tsx

@@ -1,4 +1,4 @@
-import { SettingsIcon, UserIcon, ZapIcon, SecureIcon } from "@lume/icons";
+import { SecureIcon, SettingsIcon, UserIcon, ZapIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { Link } from "@tanstack/react-router";
 import { Outlet, createFileRoute } from "@tanstack/react-router";

apps/desktop2/src/routes/settings/backup.tsx

@@ -1,4 +1,4 @@
-import { type Account } from "@lume/types";
+import type { Account } from "@lume/types";
 import { User } from "@lume/ui";
 import { displayNsec } from "@lume/utils";
 import { createFileRoute } from "@tanstack/react-router";
@@ -13,7 +13,7 @@ export const Route = createFileRoute("/settings/backup")({
 		const ark = context.ark;
 		const npubs = await ark.get_all_accounts();
 
-    let accounts: Account[] = [];
+		const accounts: Account[] = [];
 
 		for (const account of npubs) {
 			const nsec: string = await invoke("get_stored_nsec", {
@@ -33,14 +33,14 @@ function Screen() {
 		<div className="mx-auto w-full max-w-xl">
 			<div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
 				{accounts.map((account) => (
-          <Account account={account} />
+					<NostrAccount key={account.npub} account={account} />
 				))}
 			</div>
 		</div>
 	);
 }
 
-function Account({ account }: { account: Account }) {
+function NostrAccount({ account }: { account: Account }) {
 	const [key, setKey] = useState(account.nsec);
 	const [copied, setCopied] = useState(false);
 	const [passphase, setPassphase] = useState("");
@@ -69,7 +69,7 @@ function Account({ account }: { account: Account }) {
 					<User.Avatar className="size-8 rounded-full object-cover" />
 					<div className="flex flex-col">
 						<User.Name className="text-sm leading-tight" />
-            <User.NIP05 className="text-sm leading-tight text-neutral-700 dark:text-neutral-300" />
+						<User.NIP05 />
 					</div>
 				</User.Root>
 			</User.Provider>
@@ -91,7 +91,7 @@ function Account({ account }: { account: Account }) {
 						/>
 						<button
 							type="button"
-              onClick={copyKey}
+							onClick={() => copyKey()}
 							className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
 						>
 							{copied ? "Copied" : "Copy"}
@@ -115,7 +115,7 @@ function Account({ account }: { account: Account }) {
 						/>
 						<button
 							type="button"
-              onClick={encrypt}
+							onClick={() => encrypt()}
 							className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
 						>
 							Update

apps/desktop2/src/routes/settings/general.tsx

@@ -1,11 +1,11 @@
-import { Settings } from "@lume/types";
+import type { Settings } from "@lume/types";
+import * as Switch from "@radix-ui/react-switch";
 import { createFileRoute } from "@tanstack/react-router";
 import {
 	isPermissionGranted,
 	requestPermission,
 } from "@tauri-apps/plugin-notification";
 import { useEffect, useState } from "react";
-import * as Switch from "@radix-ui/react-switch";
 import { useDebouncedCallback } from "use-debounce";
 
 export const Route = createFileRoute("/settings/general")({

apps/desktop2/src/routes/settings/user.tsx

@@ -1,6 +1,6 @@
 import { AvatarUploader } from "@/components/avatarUploader";
 import { PlusIcon } from "@lume/icons";
-import { Metadata } from "@lume/types";
+import type { Metadata } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { Link } from "@tanstack/react-router";
 import { createFileRoute } from "@tanstack/react-router";

apps/desktop2/src/routes/settings/zap.lazy.tsx

@@ -55,7 +55,7 @@ function Connection() {
 						/>
 						<button
 							type="button"
-              onClick={connect}
+							onClick={() => connect()}
 							className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
 						>
 							Connect

apps/desktop2/src/routes/store.official.tsx

@@ -1,4 +1,4 @@
-import { LumeColumn } from "@lume/types";
+import type { LumeColumn } from "@lume/types";
 import { createFileRoute } from "@tanstack/react-router";
 import { resolveResource } from "@tauri-apps/api/path";
 import { getCurrent } from "@tauri-apps/api/window";

apps/desktop2/src/routes/store.tsx

@@ -1,6 +1,5 @@
 import { GlobalIcon, LaurelIcon } from "@lume/icons";
-import { ColumnRouteSearch } from "@lume/types";
+import type { ColumnRouteSearch } from "@lume/types";
-import { Column } from "@lume/ui";
 import { cn } from "@lume/utils";
 import { Link } from "@tanstack/react-router";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
@@ -17,20 +16,16 @@ export const Route = createFileRoute("/store")({
 });
 
 function Screen() {
-  const { label, name } = Route.useSearch();
-
 	return (
-    <Column.Root>
+		<div className="flex flex-col h-full">
-      <Column.Header label={label} name={name}>
+			<div className="px-3 my-2">
-        <div className="inline-flex h-full w-full items-center gap-1">
+				<div className="p-1 shrink-0 inline-flex w-full rounded-lg items-center gap-1 bg-black/10 dark:bg-white/10">
-          <Link to="/store/official">
+					<Link to="/store/official" className="flex-1">
 						{({ isActive }) => (
 							<div
 								className={cn(
-                  "inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+									"inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
-                  isActive
+									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-                    ? "bg-neutral-100 dark:bg-neutral-900"
-                    : "opacity-50",
 								)}
 							>
 								<LaurelIcon className="size-4" />
@@ -38,14 +33,12 @@ function Screen() {
 							</div>
 						)}
 					</Link>
-          <Link to="/store/community">
+					<Link to="/store/community" className="flex-1">
 						{({ isActive }) => (
 							<div
 								className={cn(
-                  "inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+									"inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
-                  isActive
+									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-                    ? "bg-neutral-100 dark:bg-neutral-900"
-                    : "opacity-50",
 								)}
 							>
 								<GlobalIcon className="size-4" />
@@ -54,10 +47,10 @@ function Screen() {
 						)}
 					</Link>
 				</div>
-      </Column.Header>
+			</div>
-      <Column.Content>
+			<div className="flex-1 overflow-y-auto scrollbar-none">
 				<Outlet />
-      </Column.Content>
+			</div>
-    </Column.Root>
+		</div>
 	);
 }

apps/desktop2/src/routes/trending.notes.tsx

@@ -1,11 +1,11 @@
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { Event, Kind } from "@lume/types";
+import { type Event, Kind } from "@lume/types";
+import { Spinner } from "@lume/ui";
 import { Await, createFileRoute } from "@tanstack/react-router";
-import { Virtualizer } from "virtua";
 import { defer } from "@tanstack/react-router";
 import { Suspense } from "react";
-import { Spinner } from "@lume/ui";
+import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/trending/notes")({
 	loader: async ({ abortController }) => {
@@ -29,16 +29,6 @@ export const Route = createFileRoute("/trending/notes")({
 export function Screen() {
 	const { data } = Route.useLoaderData();
 
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default:
-        return <TextNote key={event.id} event={event} />;
-    }
-  };
-
 	return (
 		<div className="w-full h-full">
 			<Virtualizer overscan={3}>
@@ -57,7 +47,11 @@ export function Screen() {
 					}
 				>
 					<Await promise={data}>
-            {(notes) => notes.map((event) => renderItem(event))}
+						{(notes) =>
+							notes.map((event) => (
+								<TextNote key={event.id} event={event} className="mb-3" />
+							))
+						}
 					</Await>
 				</Suspense>
 			</Virtualizer>

apps/desktop2/src/routes/trending.tsx

@@ -1,6 +1,5 @@
 import { ArticleIcon, GroupFeedsIcon } from "@lume/icons";
-import { ColumnRouteSearch } from "@lume/types";
+import type { ColumnRouteSearch } from "@lume/types";
-import { Column } from "@lume/ui";
 import { cn } from "@lume/utils";
 import { Link, Outlet } from "@tanstack/react-router";
 import { createFileRoute } from "@tanstack/react-router";
@@ -23,20 +22,16 @@ export const Route = createFileRoute("/trending")({
 });
 
 export function Screen() {
-  const { label, name } = Route.useSearch();
-
 	return (
-    <Column.Root>
+		<div className="flex flex-col h-full">
-      <Column.Header label={label} name={name}>
+			<div className="h-11 shrink-0 inline-flex w-full items-center gap-1 px-3">
 				<div className="inline-flex h-full w-full items-center gap-1">
 					<Link to="/trending/notes">
 						{({ isActive }) => (
 							<div
 								className={cn(
 									"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
-                  isActive
+									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-                    ? "bg-neutral-100 dark:bg-neutral-900"
-                    : "opacity-50",
 								)}
 							>
 								<ArticleIcon className="size-4" />
@@ -49,9 +44,7 @@ export function Screen() {
 							<div
 								className={cn(
 									"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
-                  isActive
+									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-                    ? "bg-neutral-100 dark:bg-neutral-900"
-                    : "opacity-50",
 								)}
 							>
 								<GroupFeedsIcon className="size-4" />
@@ -60,10 +53,10 @@ export function Screen() {
 						)}
 					</Link>
 				</div>
-      </Column.Header>
+			</div>
-      <Column.Content>
+			<div className="p-2 flex-1 overflow-y-auto w-full h-full scrollbar-none">
 				<Outlet />
-      </Column.Content>
+			</div>
-    </Column.Root>
+		</div>
 	);
 }

apps/desktop2/src/routes/trending.users.tsx

@@ -24,7 +24,7 @@ export function Screen() {
 	const { data } = Route.useLoaderData();
 
 	return (
-    <div className="w-full h-full px-3">
+		<div className="w-full h-full">
 			<Suspense
 				fallback={
 					<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
@@ -44,7 +44,7 @@ export function Screen() {
 						users.profiles.map((item) => (
 							<div
 								key={item.pubkey}
-                className="h-max w-full overflow-hidden py-5 border-b border-neutral-100 dark:border-neutral-900"
+								className="h-max w-full overflow-hidden mb-3 p-2 bg-black/5 dark:bg-white/5 backdrop-blur-lg rounded-xl"
 							>
 								<User.Provider pubkey={item.pubkey}>
 									<User.Root>
@@ -54,7 +54,7 @@ export function Screen() {
 													<User.Avatar className="size-10 shrink-0 rounded-full object-cover" />
 													<User.Name className="leadning-tight max-w-[15rem] truncate font-semibold" />
 												</div>
-                        <User.Button className="inline-flex h-8 w-20 items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800" />
+												<User.Button className="inline-flex h-8 w-20 items-center justify-center rounded-lg bg-black/10 text-sm font-medium hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20" />
 											</div>
 											<User.About className="mt-1 line-clamp-3 max-w-none select-text text-neutral-800 dark:text-neutral-400" />
 										</div>

apps/desktop2/src/routes/users/$pubkey.lazy.tsx

@@ -1,6 +1,6 @@
+import { Box, Container, User } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { WindowVirtualizer } from "virtua";
-import { Box, Container, User } from "@lume/ui";
 import { EventList } from "./-components/eventList";
 
 export const Route = createLazyFileRoute("/users/$pubkey")({

apps/desktop2/src/routes/users/-components/eventList.tsx

@@ -1,11 +1,11 @@
-import { TextNote } from "@/components/text";
 import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
 import { ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
-import { Event, Kind } from "@lume/types";
+import { type Event, Kind } from "@lume/types";
+import { Spinner } from "@lume/ui";
 import { FETCH_LIMIT } from "@lume/utils";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useRouteContext } from "@tanstack/react-router";
-import { Spinner } from "@lume/ui";
 
 export function EventList({ id }: { id: string }) {
 	const { ark } = useRouteContext({ strict: false });

apps/desktop2/src/routes/zap.$id.lazy.tsx

@@ -1,11 +1,11 @@
 import { Balance } from "@/components/balance";
 import { Box, Container, User } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { getCurrent } from "@tauri-apps/api/webviewWindow";
-import { toast } from "sonner";
+import { useState } from "react";
 import CurrencyInput from "react-currency-input-field";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 const DEFAULT_VALUES = [69, 100, 200, 500];
 
@@ -79,6 +79,7 @@ function Screen() {
 							<div className="inline-flex items-center justify-center gap-2">
 								{DEFAULT_VALUES.map((value) => (
 									<button
+										key={value}
 										type="button"
 										onClick={() => setAmount(value)}
 										className="w-max rounded-full bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"

apps/web/astro.config.mjs

@@ -1,8 +1,8 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+	integrations: [tailwind()],
 });

apps/web/package.json

@@ -13,14 +13,14 @@
 		"@astrojs/check": "^0.5.10",
 		"@astrojs/tailwind": "^5.1.0",
 		"@fontsource/geist-mono": "^5.0.3",
-		"astro": "^4.6.3",
+		"astro": "^4.7.0",
-		"astro-seo-meta": "^4.1.0",
+		"astro-seo-meta": "^4.1.1",
-		"astro-seo-schema": "^4.0.0",
+		"astro-seo-schema": "^4.0.2",
 		"schema-dts": "^1.1.2",
 		"tailwindcss": "^3.4.3",
 		"typescript": "^5.4.5"
 	},
 	"devDependencies": {
-		"@tailwindcss/typography": "^0.5.12"
+		"@tailwindcss/typography": "^0.5.13"
 	}
 }

biome.json

@@ -2,6 +2,9 @@
 	"$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
 	"organizeImports": {
 		"enabled": true
+	},
+	"files": {
+    "ignore": ["apps/desktop2/src/router.gen.ts"]
   },
 	"linter": {
 		"enabled": true,

package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@biomejs/biome": "^1.7.1",
     "@tauri-apps/cli": "2.0.0-beta.12",
-    "turbo": "^1.13.2"
+    "turbo": "^1.13.3"
   },
   "packageManager": "pnpm@8.9.0",
   "engines": {

packages/ark/package.json

@@ -5,13 +5,13 @@
 	"main": "./src/index.ts",
 	"dependencies": {
 		"@lume/utils": "workspace:^",
-		"@tanstack/react-query": "^5.31.0",
+		"@tanstack/react-query": "^5.32.0",
-		"react": "^18.2.0"
+		"react": "^18.3.1"
 	},
 	"devDependencies": {
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
-		"@types/react": "^18.2.79",
+		"@types/react": "^18.3.1",
 		"typescript": "^5.4.5"
 	}
 }

packages/ark/src/ark.ts

@@ -1,4 +1,3 @@
-import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import type {
 	Account,
 	Contact,
@@ -10,10 +9,11 @@ import type {
 	Metadata,
 	Settings,
 } from "@lume/types";
+import { generateContentTags } from "@lume/utils";
 import { invoke } from "@tauri-apps/api/core";
+import type { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { open } from "@tauri-apps/plugin-dialog";
 import { readFile } from "@tauri-apps/plugin-fs";
-import { generateContentTags } from "@lume/utils";
 
 enum NSTORE_KEYS {
 	settings = "lume_user_settings",
@@ -86,7 +86,7 @@ export class Ark {
 		}
 	}
 
-	public async save_account(nsec: string, password: string = "") {
+	public async save_account(nsec: string, password = "") {
 		try {
 			const cmd: string = await invoke("save_key", {
 				nsec,
@@ -118,6 +118,7 @@ export class Ark {
 			const event: Event = JSON.parse(cmd);
 			return event;
 		} catch (e) {
+			console.error(id, String(e));
 			throw new Error(String(e));
 		}
 	}
@@ -163,7 +164,7 @@ export class Ark {
 	) {
 		try {
 			let until: string = undefined;
-			let isGlobal = global ?? false;
+			const isGlobal = global ?? false;
 
 			if (asOf && asOf > 0) until = asOf.toString();
 
@@ -178,17 +179,17 @@ export class Ark {
 			});
 
 			for (const event of nostrEvents) {
-				const tags = event.tags
+				const eventIds = event.tags
-					.filter((el) => el[0] === "e")
+					.filter((el) => el[3] === "root" || el[3] === "reply")
 					?.map((item) => item[1]);
 
-				if (tags.length) {
+				if (eventIds.length) {
-					for (const tag of tags) {
+					for (const id of eventIds) {
-						if (seenIds.has(tag)) {
+						if (seenIds.has(id)) {
 							dedupQueue.add(event.id);
 							break;
 						}
-						seenIds.add(tag);
+						seenIds.add(id);
 					}
 				}
 			}
@@ -380,14 +381,13 @@ export class Ark {
 	public parse_event_thread({
 		content,
 		tags,
-	}: { content: string; tags: string[][] }) {
+	}: {
+		content: string;
+		tags: string[][];
+	}) {
 		let rootEventId: string = null;
 		let replyEventId: string = null;
 
-		// Ignore quote repost
-		if (content.includes("nostr:note1") || content.includes("nostr:nevent1"))
-			return null;
-
 		// Get all event references from tags, ignore mention
 		const events = tags.filter((el) => el[0] === "e" && el[3] !== "mention");
 
@@ -420,7 +420,8 @@ export class Ark {
 			const cmd: Metadata = await invoke("get_profile", { id });
 
 			return cmd;
-		} catch {
+		} catch (e) {
+			console.error(pubkey, String(e));
 			return null;
 		}
 	}
@@ -561,7 +562,6 @@ export class Ark {
 	}
 
 	public async upload(filePath?: string) {
-		try {
 		const allowExts = [
 			"png",
 			"jpeg",
@@ -589,8 +589,10 @@ export class Ark {
 				})
 			).path;
 
+		// User cancelled action
 		if (!selected) return null;
 
+		try {
 			const file = await readFile(selected);
 			const blob = new Blob([file]);
 
@@ -640,11 +642,15 @@ export class Ark {
 
 	public async get_settings() {
 		try {
+			if (this.settings) return this.settings;
+
 			const cmd: string = await invoke("get_nstore", {
 				key: NSTORE_KEYS.settings,
 			});
 			const settings: Settings = cmd ? JSON.parse(cmd) : null;
+
 			this.settings = settings;
+
 			return settings;
 		} catch {
 			const defaultSettings: Settings = {
@@ -729,44 +735,69 @@ export class Ark {
 		}
 	}
 
-	public open_thread(id: string) {
+	public async open_event_id(id: string) {
 		try {
-			const window = new WebviewWindow(`event-${id}`, {
+			const label = `event-${id}`;
+			const url = `/events/${id}`;
+
+			await invoke("open_window", {
+				label,
 				title: "Thread",
-				url: `/events/${id}`,
+				url,
-				minWidth: 500,
-				minHeight: 800,
 				width: 500,
 				height: 800,
-				titleBarStyle: "overlay",
-				center: false,
 			});
-
-			this.windows.push(window);
 		} catch (e) {
 			throw new Error(String(e));
 		}
 	}
 
-	public open_profile(pubkey: string) {
+	public async open_event(event: Event) {
 		try {
-			const window = new WebviewWindow(`user-${pubkey}`, {
+			let root: string = undefined;
+			let reply: string = undefined;
+
+			const eTags = event.tags.filter(
+				(tag) => tag[0] === "e" || tag[0] === "q",
+			);
+
+			root = eTags.find((el) => el[3] === "root")?.[1];
+			reply = eTags.find((el) => el[3] === "reply")?.[1];
+
+			if (!root) root = eTags[0]?.[1];
+			if (!reply) reply = eTags[1]?.[1];
+
+			const label = `event-${event.id}`;
+			const url = `/events/${root ?? reply ?? event.id}`;
+
+			await invoke("open_window", {
+				label,
+				title: "Thread",
+				url,
+				width: 500,
+				height: 800,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_profile(pubkey: string) {
+		try {
+			const label = `user-${pubkey}`;
+			await invoke("open_window", {
+				label,
 				title: "Profile",
 				url: `/users/${pubkey}`,
-				minWidth: 500,
-				minHeight: 800,
 				width: 500,
 				height: 800,
-				titleBarStyle: "overlay",
 			});
-
-			this.windows.push(window);
 		} catch (e) {
 			throw new Error(String(e));
 		}
 	}
 
-	public open_editor(reply_to?: string, quote: boolean = false) {
+	public async open_editor(reply_to?: string, quote = false) {
 		try {
 			let url: string;
 
@@ -776,91 +807,75 @@ export class Ark {
 				url = "/editor";
 			}
 
-			const window = new WebviewWindow(`editor-${reply_to ? reply_to : 0}`, {
+			const label = `editor-${reply_to ? reply_to : 0}`;
+
+			await invoke("open_window", {
+				label,
 				title: "Editor",
 				url,
-				minWidth: 500,
+				width: 500,
-				minHeight: 400,
+				height: 360,
-				width: 600,
-				height: 400,
-				hiddenTitle: true,
-				titleBarStyle: "overlay",
 			});
-
-			this.windows.push(window);
 		} catch (e) {
 			throw new Error(String(e));
 		}
 	}
 
-	public open_nwc() {
+	public async open_nwc() {
 		try {
-			const window = new WebviewWindow("nwc", {
+			const label = "nwc";
+			await invoke("open_window", {
+				label,
 				title: "Nostr Wallet Connect",
 				url: "/nwc",
-				minWidth: 400,
-				minHeight: 600,
 				width: 400,
 				height: 600,
-				hiddenTitle: true,
-				titleBarStyle: "overlay",
 			});
-
-			this.windows.push(window);
 		} catch (e) {
 			throw new Error(String(e));
 		}
 	}
 
-	public open_zap(id: string, pubkey: string, account: string) {
+	public async open_zap(id: string, pubkey: string, account: string) {
 		try {
-			const window = new WebviewWindow(`zap-${id}`, {
+			const label = `zap-${id}`;
+			await invoke("open_window", {
+				label,
 				title: "Zap",
 				url: `/zap/${id}?pubkey=${pubkey}&account=${account}`,
-				minWidth: 400,
-				minHeight: 500,
 				width: 400,
 				height: 500,
-				titleBarStyle: "overlay",
 			});
-
-			this.windows.push(window);
 		} catch (e) {
 			throw new Error(String(e));
 		}
 	}
 
-	public open_settings() {
+	public async open_settings() {
 		try {
-			const window = new WebviewWindow("settings", {
+			const label = "settings";
+			await invoke("open_window", {
+				label,
 				title: "Settings",
 				url: "/settings",
-				minWidth: 600,
-				minHeight: 500,
 				width: 800,
 				height: 500,
-				titleBarStyle: "overlay",
 			});
-
-			this.windows.push(window);
 		} catch (e) {
 			throw new Error(String(e));
 		}
 	}
 
-	public open_search() {
+	public async open_search() {
 		try {
-			const window = new WebviewWindow("search", {
+			const label = "search";
+			await invoke("open_window", {
+				label,
 				title: "Search",
 				url: "/search",
 				width: 750,
 				height: 470,
-				minimizable: false,
-				resizable: false,
-				titleBarStyle: "overlay",
 			});
-
-			this.windows.push(window);
 		} catch (e) {
 			throw new Error(String(e));
 		}

packages/ark/src/hooks/useEvent.ts

@@ -1,4 +1,4 @@
-import { Event } from "@lume/types";
+import type { Event } from "@lume/types";
 import { useQuery } from "@tanstack/react-query";
 import { invoke } from "@tauri-apps/api/core";
 
@@ -21,7 +21,7 @@ export function useEvent(id: string) {
 		refetchOnWindowFocus: false,
 		refetchOnMount: false,
 		refetchOnReconnect: false,
-		staleTime: Infinity,
+		staleTime: Number.POSITIVE_INFINITY,
 		retry: 2,
 	});
 

packages/ark/src/hooks/usePreview.ts

@@ -16,7 +16,7 @@ export function usePreview(url: string) {
 		refetchOnWindowFocus: false,
 		refetchOnMount: false,
 		refetchOnReconnect: false,
-		staleTime: Infinity,
+		staleTime: Number.POSITIVE_INFINITY,
 		retry: 2,
 	});
 

packages/ark/src/hooks/useProfile.ts

@@ -1,5 +1,5 @@
+import type { Metadata } from "@lume/types";
 import { useQuery } from "@tanstack/react-query";
-import { Metadata } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
 
 export function useProfile(pubkey: string, embed?: string) {
@@ -27,7 +27,7 @@ export function useProfile(pubkey: string, embed?: string) {
 		refetchOnMount: false,
 		refetchOnWindowFocus: false,
 		refetchOnReconnect: false,
-		staleTime: Infinity,
+		staleTime: Number.POSITIVE_INFINITY,
 		retry: 2,
 	});
 

packages/icons/index.ts

@@ -124,3 +124,4 @@ export * from "./src/quote";
 export * from "./src/key";
 export * from "./src/remote";
 export * from "./src/nsfw";
+export * from "./src/visit";

packages/icons/package.json

@@ -4,11 +4,11 @@
 	"private": true,
 	"main": "./index.ts",
 	"dependencies": {
-    "react": "^18.2.0"
+		"react": "^18.3.1"
 	},
 	"devDependencies": {
 		"@lume/tsconfig": "workspace:*",
-    "@types/react": "^18.2.79",
+		"@types/react": "^18.3.1",
 		"typescript": "^5.4.5"
 	}
 }

packages/icons/src/addWidget.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function AddWidgetIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function AddWidgetIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/advancedSettings.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
 export function AdvancedSettingsIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
 	return (
 		<svg

packages/icons/src/alby.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function AlbyIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function AlbyIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/announcement.tsx

@@ -1,4 +1,4 @@
-export function AnnouncementIcon(props: JSX.IntrinsicElements['svg']) {
+export function AnnouncementIcon(props: JSX.IntrinsicElements["svg"]) {
 	return (
 		<svg
 			{...props}

packages/icons/src/arrowDown.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ArrowDownIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/arrowRightCircle.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
 export function ArrowRightCircleIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
 	return (
 		<svg

packages/icons/src/arrowUp.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ArrowUpIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/arrowUpSquare.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ArrowUpSquareIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/article.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ArticleIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/bell.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function BellIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/bellFilled.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function BellFilledIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/bold.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function BoldIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function BoldIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/chats.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ChatsIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/check.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function CheckIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/checkCircle.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function CheckCircleIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/chevronDown.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ChevronDownIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/chevronRight.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
 export function ChevronRightIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
 	return (
 		<svg

packages/icons/src/chevronUp.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ChevronUpIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/cmd.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function CommandIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function CommandIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/community.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function CommunityIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function CommunityIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/compose.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ComposeIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/composeFilled.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ComposeFilledIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/copy.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function CopyIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function CopyIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			width={24}

packages/icons/src/dark.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function DarkIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function DarkIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/dots.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function DotsPattern(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function DotsPattern(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg {...props}>
 			<pattern
@@ -14,7 +16,13 @@ export function DotsPattern(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElem
 			>
 				<circle cx="2" cy="2" r="1.626" fill="currentColor"></circle>
 			</pattern>
-      <rect width="100%" height="100%" x="0" y="0" fill="url(#pattern-circles)"></rect>
+			<rect
+				width="100%"
+				height="100%"
+				x="0"
+				y="0"
+				fill="url(#pattern-circles)"
+			></rect>
 		</svg>
 	);
 }

packages/icons/src/download.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function DownloadIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/edit.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function EditIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function EditIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			width={24}

packages/icons/src/editInterest.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function EditInterestIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/empty.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function EmptyIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function EmptyIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -50,7 +52,10 @@ export function EmptyIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElemen
 				>
 					<feFlood floodOpacity="0" result="BackgroundImageFix" />
 					<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feGaussianBlur result="effect1_foregroundBlur_110_63" stdDeviation="5.5" />
+					<feGaussianBlur
+						result="effect1_foregroundBlur_110_63"
+						stdDeviation="5.5"
+					/>
 				</filter>
 				<clipPath id="clip0_110_63">
 					<path fill="#fff" d="M0 0H120V120H0z" />

packages/icons/src/enter.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function EnterIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function EnterIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			width={24}

packages/icons/src/expand.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 export function ExpandIcon(
 	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,

packages/icons/src/explore.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function ExploreIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function ExploreIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/explore2.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function Explore2Icon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function Explore2Icon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/eyeOff.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function EyeOffIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function EyeOffIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			width={24}

packages/icons/src/eyeOn.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function EyeOnIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function EyeOnIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			width={24}

packages/icons/src/feed.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function FeedIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function FeedIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			width={24}

packages/icons/src/file.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function FileIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function FileIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/focus.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function FocusIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function FocusIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

packages/icons/src/follow.tsx

@@ -1,6 +1,8 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from "react";
 
-export function FollowIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function FollowIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"