feat: add force quit command

Revert "chore: update ci"
This reverts commit 04706a6d7c.
2024-07-02 17:24:55 +07:00 · 2024-07-02 15:54:00 +07:00 · 2024-07-02 14:58:00 +07:00 · 2024-07-02 14:36:16 +07:00 · 2024-07-02 14:07:12 +07:00 · 2024-07-02 13:03:45 +07:00
218 changed files with 25858 additions and 21490 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -16,6 +16,8 @@ jobs:
            args: "--target aarch64-apple-darwin"
          - platform: "macos-latest" # for Intel based macs.
            args: "--target x86_64-apple-darwin"
+          - platform: "macos-latest" # for Intel based macs.
+            args: "--target universal-apple-darwin"
            #- platform: 'ubuntu-22.04'
            #  args: ''
            #- platform: 'windows-latest'
--- a/.gitignore
+++ b/.gitignore
@@ -35,4 +35,4 @@ dist/
 .DS_Store
 *.pem
 .vscode/
-ndb/
+.idea/
--- a/apps/desktop2/index.html
+++ b/apps/desktop2/index.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lume Desktop</title>
-  </head>
-  <body
-    class="relative h-screen w-screen cursor-default select-none overflow-hidden font-sans text-black antialiased dark:text-white"
-  >
-    <div id="root" class="h-full w-full"></div>
-    <script type="module" src="/src/app.tsx"></script>
-  </body>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Lume Desktop</title>
+	</head>
+	<body
+		class="relative h-screen w-screen cursor-default select-none overflow-hidden font-sans text-black antialiased dark:text-white"
+	>
+		<div id="root" class="h-full w-full"></div>
+		<script type="module" src="/src/app.tsx"></script>
+	</body>
 </html>
--- a/apps/desktop2/package.json
+++ b/apps/desktop2/package.json
@@ -9,55 +9,52 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@lume/ark": "workspace:^",
+		"@getalby/bitcoin-connect-react": "^3.5.3",
 		"@lume/icons": "workspace:^",
+		"@lume/system": "workspace:^",
 		"@lume/ui": "workspace:^",
 		"@lume/utils": "workspace:^",
-		"@radix-ui/react-avatar": "^1.0.4",
-		"@radix-ui/react-checkbox": "^1.0.4",
-		"@radix-ui/react-collapsible": "^1.0.3",
-		"@radix-ui/react-dialog": "^1.0.5",
-		"@radix-ui/react-dropdown-menu": "^2.0.6",
-		"@radix-ui/react-hover-card": "^1.0.7",
-		"@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.36.0",
-		"@tanstack/react-query": "^5.36.0",
-		"@tanstack/react-query-persist-client": "^5.36.0",
-		"@tanstack/react-router": "1.32.5",
-		"i18next": "^23.11.4",
+		"@radix-ui/react-avatar": "^1.1.0",
+		"@radix-ui/react-checkbox": "^1.1.1",
+		"@radix-ui/react-popover": "^1.1.1",
+		"@radix-ui/react-scroll-area": "^1.1.0",
+		"@radix-ui/react-switch": "^1.1.0",
+		"@radix-ui/react-tabs": "^1.1.0",
+		"@radix-ui/react-tooltip": "^1.1.2",
+		"@tanstack/query-persist-client-core": "^5.49.1",
+		"@tanstack/react-query": "^5.49.2",
+		"@tanstack/react-router": "^1.43.3",
+		"embla-carousel-react": "^8.1.5",
+		"i18next": "^23.11.5",
 		"i18next-resources-to-backend": "^1.2.1",
 		"minidenticons": "^4.2.1",
 		"nanoid": "^5.0.7",
-		"nostr-tools": "^2.5.2",
+		"nostr-tools": "^2.7.0",
 		"react": "^18.3.1",
 		"react-currency-input-field": "^3.8.0",
 		"react-dom": "^18.3.1",
-		"react-hook-form": "^7.51.4",
-		"react-hotkeys-hook": "^4.5.0",
-		"react-i18next": "^14.1.1",
+		"react-hook-form": "^7.52.0",
+		"react-i18next": "^14.1.2",
 		"react-string-replace": "^1.1.1",
 		"slate": "^0.103.0",
-		"slate-react": "^0.102.0",
-		"sonner": "^1.4.41",
-		"use-debounce": "^10.0.0",
+		"slate-react": "^0.105.0",
+		"use-debounce": "^10.0.1",
 		"virtua": "^0.31.0"
 	},
 	"devDependencies": {
 		"@lume/tailwindcss": "workspace:^",
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
-		"@tanstack/router-devtools": "^1.32.5",
-		"@tanstack/router-vite-plugin": "^1.32.2",
-		"@types/react": "^18.3.2",
+		"@tanstack/router-devtools": "^1.43.3",
+		"@tanstack/router-vite-plugin": "^1.43.1",
+		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
-		"@vitejs/plugin-react-swc": "^3.6.0",
+		"@vitejs/plugin-react-swc": "^3.7.0",
 		"autoprefixer": "^10.4.19",
-		"postcss": "^8.4.38",
-		"tailwindcss": "^3.4.3",
-		"typescript": "^5.4.5",
-		"vite": "^5.2.11",
+		"postcss": "^8.4.39",
+		"tailwindcss": "^3.4.4",
+		"typescript": "^5.5.2",
+		"vite": "^5.3.2",
 		"vite-plugin-top-level-await": "^1.4.1",
 		"vite-tsconfig-paths": "^4.3.2"
 	}
--- a/apps/desktop2/public/404.jpg
+++ b/apps/desktop2/public/404.jpg
--- a/apps/desktop2/public/ai.jpg
+++ b/apps/desktop2/public/ai.jpg
--- a/apps/desktop2/public/anime.jpg
+++ b/apps/desktop2/public/anime.jpg
--- a/apps/desktop2/public/art.jpg
+++ b/apps/desktop2/public/art.jpg
--- a/apps/desktop2/public/gaming.jpg
+++ b/apps/desktop2/public/gaming.jpg
--- a/apps/desktop2/public/heading-en.png
+++ b/apps/desktop2/public/heading-en.png
--- a/apps/desktop2/public/heading-en@2x.png
+++ b/apps/desktop2/public/heading-en@2x.png
--- a/apps/desktop2/public/heading-fr.png
+++ b/apps/desktop2/public/heading-fr.png
--- a/apps/desktop2/public/heading-fr@2x.png
+++ b/apps/desktop2/public/heading-fr@2x.png
--- a/apps/desktop2/public/heading-ja.png
+++ b/apps/desktop2/public/heading-ja.png
--- a/apps/desktop2/public/heading-ja@2x.png
+++ b/apps/desktop2/public/heading-ja@2x.png
--- a/apps/desktop2/public/icon.jpeg
+++ b/apps/desktop2/public/icon.jpeg
--- a/apps/desktop2/public/lock-screen.jpg
+++ b/apps/desktop2/public/lock-screen.jpg
--- a/apps/desktop2/public/lock-screen@2x.jpg
+++ b/apps/desktop2/public/lock-screen@2x.jpg
--- a/apps/desktop2/public/movie.jpg
+++ b/apps/desktop2/public/movie.jpg
--- a/apps/desktop2/public/music.jpg
+++ b/apps/desktop2/public/music.jpg
--- a/apps/desktop2/public/nsfw.jpg
+++ b/apps/desktop2/public/nsfw.jpg
--- a/apps/desktop2/public/photography.jpg
+++ b/apps/desktop2/public/photography.jpg
--- a/apps/desktop2/public/poster_1.jpeg
+++ b/apps/desktop2/public/poster_1.jpeg
--- a/apps/desktop2/public/poster_2.jpeg
+++ b/apps/desktop2/public/poster_2.jpeg
--- a/apps/desktop2/public/poster_3.jpeg
+++ b/apps/desktop2/public/poster_3.jpeg
--- a/apps/desktop2/public/poster_4.jpeg
+++ b/apps/desktop2/public/poster_4.jpeg
--- a/apps/desktop2/public/technology.jpg
+++ b/apps/desktop2/public/technology.jpg
--- a/apps/desktop2/public/waifu.png
+++ b/apps/desktop2/public/waifu.png
--- a/apps/desktop2/public/waifu@2x.png
+++ b/apps/desktop2/public/waifu@2x.png
--- a/apps/desktop2/src/app.css
+++ b/apps/desktop2/src/app.css
@@ -2,18 +2,6 @@
@tailwind utilities;
@tailwind components;

-*::-webkit-scrollbar {
-  @apply w-[5px];
-}
-
-*::-webkit-scrollbar-track {
-  @apply bg-transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  @apply rounded bg-black dark:bg-white;
-}
-
@layer utilities {
  .content-break {
    word-break: break-word;
--- a/apps/desktop2/src/app.tsx
+++ b/apps/desktop2/src/app.tsx
@@ -1,42 +1,19 @@
-import { Ark } from "@lume/ark";
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import { QueryClient } from "@tanstack/react-query";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { platform } from "@tauri-apps/plugin-os";
-import React, { StrictMode } from "react";
+import { type } from "@tauri-apps/plugin-os";
+import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
-import { I18nextProvider } from "react-i18next";
-import "./app.css";
-import i18n from "./locale";
 import { routeTree } from "./router.gen"; // auto generated file
+import "./app.css";

-const ark = new Ark();
 const queryClient = new QueryClient();
-const platformName = await platform();
-
-const persister = createSyncStoragePersister({
-	storage: window.localStorage,
-});
-
-// Set up a Router instance
+const platform = type();
 const router = createRouter({
 	routeTree,
-	context: {
-		ark,
-		queryClient,
-		platform: platformName,
-	},
+	context: { queryClient, platform },
 	Wrap: ({ children }) => {
 		return (
-			<I18nextProvider i18n={i18n} defaultNS={"translation"}>
-				<PersistQueryClientProvider
-					client={queryClient}
-					persistOptions={{ persister }}
-				>
-					{children}
-				</PersistQueryClientProvider>
-			</I18nextProvider>
+			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 		);
 	},
 });
--- a/apps/desktop2/src/components/avatarUploader.tsx
+++ b/apps/desktop2/src/components/avatarUploader.tsx
@@ -1,13 +1,13 @@
+import { NostrQuery } from "@lume/system";
 import { Spinner } from "@lume/ui";
 import { cn } from "@lume/utils";
-import { useRouteContext } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
 import {
 	type Dispatch,
 	type ReactNode,
 	type SetStateAction,
 	useState,
 } from "react";
-import { toast } from "sonner";

 export function AvatarUploader({
 	setPicture,
@@ -18,21 +18,17 @@ export function AvatarUploader({
 	children: ReactNode;
 	className?: string;
 }) {
-	const { ark } = useRouteContext({ strict: false });
 	const [loading, setLoading] = useState(false);

 	const uploadAvatar = async () => {
-		// start loading
-		setLoading(true);
 		try {
-			const image = await ark.upload();
+			setLoading(true);
+			const image = await NostrQuery.upload();
 			setPicture(image);
 		} catch (e) {
-			toast.error(String(e));
+			setLoading(false);
+			await message(String(e), { title: "Lume", kind: "error" });
 		}
-
-		// stop loading
-		setLoading(false);
 	};

 	return (
--- a/apps/desktop2/src/components/balance.tsx
+++ b/apps/desktop2/src/components/balance.tsx
@@ -1,42 +0,0 @@
-import { User } from "@/components/user";
-import { getBitcoinDisplayValues } from "@lume/utils";
-import { useRouteContext } from "@tanstack/react-router";
-import { useEffect, useMemo, useState } from "react";
-
-export function Balance({ account }: { account: string }) {
-	const { ark } = useRouteContext({ strict: false });
-	const [balance, setBalance] = useState(0);
-	const value = useMemo(() => getBitcoinDisplayValues(balance), [balance]);
-
-	useEffect(() => {
-		async function getBalance() {
-			const val = await ark.get_balance();
-			setBalance(val);
-		}
-
-		getBalance();
-	}, []);
-
-	return (
-		<div
-			data-tauri-drag-region
-			className="flex h-16 items-center justify-end px-3"
-		>
-			<div className="flex items-center gap-2">
-				<div className="text-end">
-					<div className="text-sm leading-tight text-neutral-700 dark:text-neutral-300">
-						Your balance
-					</div>
-					<div className="font-medium leading-tight">
-						₿ {value.bitcoinFormatted}
-					</div>
-				</div>
-				<User.Provider pubkey={account}>
-					<User.Root>
-						<User.Avatar className="size-9 rounded-full" />
-					</User.Root>
-				</User.Provider>
-			</div>
-		</div>
-	);
-}
--- a/apps/desktop2/src/components/column.tsx
+++ b/apps/desktop2/src/components/column.tsx
@@ -1,92 +1,107 @@
-import { CancelIcon, CheckIcon } from "@lume/icons";
+import { CheckIcon, HorizontalDotsIcon } from "@lume/icons";
 import type { LumeColumn } from "@lume/types";
-import { cn } from "@lume/utils";
 import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrent } from "@tauri-apps/api/webviewWindow";
-import { useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";

-export function Column({
+type WindowEvent = {
+	scroll: boolean;
+	resize: boolean;
+};
+
+export const Column = memo(function Column({
 	column,
 	account,
-	isScroll,
-	isResize,
 }: {
 	column: LumeColumn;
 	account: string;
-	isScroll: boolean;
-	isResize: boolean;
 }) {
 	const container = useRef<HTMLDivElement>(null);
 	const webviewLabel = `column-${account}_${column.label}`;

 	const [isCreated, setIsCreated] = useState(false);

-	const repositionWebview = async () => {
+	const repositionWebview = useCallback(async () => {
 		const newRect = container.current.getBoundingClientRect();
 		await invoke("reposition_column", {
 			label: webviewLabel,
 			x: newRect.x,
 			y: newRect.y,
 		});
-	};
+	}, []);

-	const resizeWebview = async () => {
+	const resizeWebview = useCallback(async () => {
 		const newRect = container.current.getBoundingClientRect();
 		await invoke("resize_column", {
 			label: webviewLabel,
 			width: newRect.width,
 			height: newRect.height,
 		});
-	};
+	}, []);

 	useEffect(() => {
-		if (isCreated) resizeWebview();
-	}, [isResize]);
+		if (!isCreated) return;
+
+		const unlisten = listen<WindowEvent>("child_webview", (data) => {
+			if (data.payload.scroll) repositionWebview();
+			if (data.payload.resize) repositionWebview().then(() => resizeWebview());
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, [isCreated]);

 	useEffect(() => {
-		if (isScroll && isCreated) repositionWebview();
-	}, [isScroll]);
+		if (!container?.current) return;

-	useEffect(() => {
 		const rect = container.current.getBoundingClientRect();
 		const url = `${column.content}?account=${account}&label=${column.label}&name=${column.name}`;

-		// create new webview
-		invoke("create_column", {
+		const prop = {
 			label: webviewLabel,
 			x: rect.x,
 			y: rect.y,
 			width: rect.width,
 			height: rect.height,
 			url,
-		}).then(() => setIsCreated(true));
+		};
+
+		// create new webview
+		invoke("create_column", { column: prop }).then(() => {
+			console.log("created: ", webviewLabel);
+			setIsCreated(true);
+		});

 		// close webview when unmounted
 		return () => {
-			invoke("close_column", { label: webviewLabel });
+			invoke("close_column", { label: webviewLabel }).then(() => {
+				console.log("closed: ", webviewLabel);
+			});
 		};
 	}, [account]);

 	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 className="h-full w-[480px] shrink-0 p-2">
+			<div className="flex flex-col w-full h-full rounded-xl bg-black/5 dark:bg-white/10">
+				<Header
+					label={column.label}
+					webview={webviewLabel}
+					name={column.name}
+				/>
 				<div ref={container} className="flex-1 w-full h-full" />
 			</div>
 		</div>
 	);
-}
+});

-function Header({ label, name }: { label: string; name: string }) {
+function Header({
+	label,
+	webview,
+	name,
+}: { label: string; webview: string; name: string }) {
 	const [title, setTitle] = useState(name);
 	const [isChanged, setIsChanged] = useState(false);

@@ -102,20 +117,66 @@ function Header({ label, name }: { label: string; name: string }) {
 		setIsChanged(false);
 	};

-	const close = async () => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "remove", label });
-	};
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Reload",
+				action: async () => {
+					await invoke("reload_column", { label: webview });
+				},
+			}),
+			MenuItem.new({
+				text: "Open in new window",
+				action: () => console.log("not implemented."),
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Move left",
+				action: async () => {
+					await getCurrent().emit("columns", {
+						type: "move",
+						label,
+						direction: "left",
+					});
+				},
+			}),
+			MenuItem.new({
+				text: "Move right",
+				action: async () => {
+					await getCurrent().emit("columns", {
+						type: "move",
+						label,
+						direction: "right",
+					});
+				},
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Close",
+				action: async () => {
+					await getCurrent().emit("columns", { type: "remove", label });
+				},
+			}),
+		]);
+
+		const menu = await Menu.new({
+			items: menuItems,
+		});
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);

 	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="flex items-center justify-between w-full px-1 h-9 shrink-0">
 			<div className="size-7" />
-			<div className="shrink-0 h-9 flex items-center justify-center">
-				<div className="relative flex gap-2 items-center">
+			<div className="flex items-center justify-center shrink-0 h-7">
+				<div className="relative flex items-center gap-2">
 					<div
 						contentEditable
 						suppressContentEditableWarning={true}
@@ -137,10 +198,10 @@ function Header({ label, name }: { label: string; name: string }) {
 			</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"
+				onClick={(e) => showContextMenu(e)}
+				className="inline-flex items-center justify-center rounded-lg size-7 hover:bg-black/10 dark:hover:bg-white/10"
 			>
-				<CancelIcon className="size-4" />
+				<HorizontalDotsIcon className="size-5" />
 			</button>
 		</div>
 	);
--- a/apps/desktop2/src/components/conversation.tsx
+++ b/apps/desktop2/src/components/conversation.tsx
@@ -1,29 +1,28 @@
-import { ThreadIcon } from "@lume/icons";
-import type { Event } from "@lume/types";
 import { Note } from "@/components/note";
+import { ThreadIcon } from "@lume/icons";
+import type { LumeEvent } from "@lume/system";
 import { cn } from "@lume/utils";
-import { useRouteContext } from "@tanstack/react-router";
+import { memo, useMemo } from "react";

-export function Conversation({
+export const Conversation = memo(function Conversation({
 	event,
 	className,
 }: {
-	event: Event;
+	event: LumeEvent;
 	className?: string;
 }) {
-	const { ark } = useRouteContext({ strict: false });
-	const thread = ark.parse_event_thread(event.tags);
+	const thread = useMemo(() => event.thread, [event]);

 	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",
+					"bg-white dark:bg-black/20 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?.root ? <Note.Child eventId={thread?.root} isRoot /> : null}
+					{thread?.root?.id ? <Note.Child event={thread?.root} 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" />
@@ -31,18 +30,18 @@ export function Conversation({
 						</div>
 						<div className="flex-1 h-px bg-neutral-100 dark:bg-white/5" />
 					</div>
-					{thread?.reply ? <Note.Child eventId={thread?.reply} /> : null}
+					{thread?.reply?.id ? <Note.Child event={thread?.reply} /> : null}
 					<div>
-						<div className="px-3 h-14 flex items-center justify-between">
+						<div className="flex items-center justify-between px-3 h-14">
 							<Note.User />
 						</div>
 						<Note.Content className="px-3" />
 					</div>
 				</div>
-				<div className="flex items-center h-14 px-3">
+				<div className="flex items-center px-3 h-14">
 					<Note.Open />
 				</div>
 			</Note.Root>
 		</Note.Provider>
 	);
-}
+});
--- a/apps/desktop2/src/components/note/activity.tsx
+++ b/apps/desktop2/src/components/note/activity.tsx
@@ -1,26 +0,0 @@
-import { cn } from "@lume/utils";
-import { useNoteContext } from "./provider";
-import { User } from "../user";
-
-export function NoteActivity({ className }: { className?: string }) {
-	const event = useNoteContext();
-	const mentions = event.tags
-		.filter((tag) => tag[0] === "p")
-		.map((tag) => tag[1]);
-
-	return (
-		<div className={cn("-mt-3 mb-2", className)}>
-			<div className="text-neutral-700 dark:text-neutral-300 inline-flex items-baseline gap-2 w-full overflow-hidden">
-				<div className="shrink-0 text-sm font-medium">To:</div>
-				{mentions.splice(0, 4).map((mention) => (
-					<User.Provider key={mention} pubkey={mention}>
-						<User.Root>
-							<User.Name className="text-sm font-medium" prefix="@" />
-						</User.Root>
-					</User.Provider>
-				))}
-				{mentions.length > 4 ? "..." : ""}
-			</div>
-		</div>
-	);
-}
--- a/apps/desktop2/src/components/note/buttons/open.tsx
+++ b/apps/desktop2/src/components/note/buttons/open.tsx
@@ -1,11 +1,10 @@
 import { VisitIcon } from "@lume/icons";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { useRouteContext } from "@tanstack/react-router";
 import { useNoteContext } from "../provider";
+import { LumeWindow } from "@lume/system";

 export function NoteOpenThread() {
 	const event = useNoteContext();
-	const { ark } = useRouteContext({ strict: false });

 	return (
 		<Tooltip.Provider>
@@ -13,7 +12,7 @@ export function NoteOpenThread() {
 				<Tooltip.Trigger asChild>
 					<button
 						type="button"
-						onClick={() => ark.open_event(event)}
+						onClick={() => LumeWindow.openEvent(event)}
 						className="group inline-flex h-7 w-14 bg-neutral-100 dark:bg-white/10 rounded-full items-center justify-center text-sm font-medium text-neutral-800 dark:text-neutral-200 hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
 					>
 						<VisitIcon className="shrink-0 size-4" />
--- a/apps/desktop2/src/components/note/buttons/reply.tsx
+++ b/apps/desktop2/src/components/note/buttons/reply.tsx
@@ -1,12 +1,11 @@
 import { ReplyIcon } from "@lume/icons";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { useRouteContext } from "@tanstack/react-router";
 import { useNoteContext } from "../provider";
 import { cn } from "@lume/utils";
+import { LumeWindow } from "@lume/system";

 export function NoteReply({ large = false }: { large?: boolean }) {
 	const event = useNoteContext();
-	const { ark } = useRouteContext({ strict: false });

 	return (
 		<Tooltip.Provider>
@@ -14,11 +13,11 @@ export function NoteReply({ large = false }: { large?: boolean }) {
 				<Tooltip.Trigger asChild>
 					<button
 						type="button"
-						onClick={() => ark.open_editor(event.id)}
+						onClick={() => LumeWindow.openEditor(event.id)}
 						className={cn(
 							"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
 							large
-								? "rounded-full bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
+								? "rounded-full h-7 gap-1.5 w-20 text-sm font-medium hover:bg-black/10 dark:hover:bg-white/10"
 								: "size-7",
 						)}
 					>
--- a/apps/desktop2/src/components/note/buttons/repost.tsx
+++ b/apps/desktop2/src/components/note/buttons/repost.tsx
@@ -1,101 +1,81 @@
-import { QuoteIcon, RepostIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import { useRouteContext } from "@tanstack/react-router";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
+import { RepostIcon } from "@lume/icons";
+import { LumeWindow } from "@lume/system";
 import { Spinner } from "@lume/ui";
+import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+import { Menu, MenuItem } from "@tauri-apps/api/menu";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useCallback, useState } from "react";
 import { useNoteContext } from "../provider";

 export function NoteRepost({ large = false }: { large?: boolean }) {
-	const { ark } = useRouteContext({ strict: false });
 	const event = useNoteContext();
+	const { settings } = useRouteContext({ strict: false });

-	const [t] = useTranslation();
 	const [loading, setLoading] = useState(false);
 	const [isRepost, setIsRepost] = useState(false);

 	const repost = async () => {
+		if (isRepost) return;
+
 		try {
-			if (isRepost) return;
 			setLoading(true);

 			// repost
-			await ark.repost(event.id, event.pubkey);
+			await event.repost();

 			// update state
 			setLoading(false);
 			setIsRepost(true);
-
-			// notify
-			toast.success("You've reposted this post successfully");
-		} catch (e) {
+		} catch {
 			setLoading(false);
-			toast.error("Repost failed, try again later");
+			await message("Repost failed, try again later", {
+				title: "Lume",
+				kind: "info",
+			});
 		}
 	};

+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Quote",
+				action: async () => repost(),
+			}),
+			MenuItem.new({
+				text: "Repost",
+				action: () => LumeWindow.openEditor(null, event.id),
+			}),
+		]);
+
+		const menu = await Menu.new({
+			items: menuItems,
+		});
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
+
+	if (!settings.display_repost_button) return null;
+
 	return (
-		<DropdownMenu.Root>
-			<Tooltip.Provider>
-				<Tooltip.Root delayDuration={150}>
-					<DropdownMenu.Trigger asChild>
-						<Tooltip.Trigger asChild>
-							<button
-								type="button"
-								className={cn(
-									"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200 rounded-full",
-									large
-										? "bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
-										: "size-7",
-								)}
-							>
-								{loading ? (
-									<Spinner className="size-4" />
-								) : (
-									<RepostIcon
-										className={cn("size-4", isRepost ? "text-blue-500" : "")}
-									/>
-								)}
-								{large ? "Repost" : null}
-							</button>
-						</Tooltip.Trigger>
-					</DropdownMenu.Trigger>
-					<Tooltip.Portal>
-						<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
-							{t("note.buttons.repost")}
-							<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
-						</Tooltip.Content>
-					</Tooltip.Portal>
-				</Tooltip.Root>
-			</Tooltip.Provider>
-			<DropdownMenu.Portal>
-				<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl bg-black p-1 shadow-md shadow-neutral-500/20 focus:outline-none dark:bg-white">
-					<DropdownMenu.Item asChild>
-						<button
-							type="button"
-							onClick={() => repost()}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
-						>
-							<RepostIcon className="size-4" />
-							{t("note.buttons.repost")}
-						</button>
-					</DropdownMenu.Item>
-					<DropdownMenu.Item asChild>
-						<button
-							type="button"
-							onClick={() => ark.open_editor(event.id, true)}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
-						>
-							<QuoteIcon className="size-4" />
-							{t("note.buttons.quote")}
-						</button>
-					</DropdownMenu.Item>
-					<DropdownMenu.Arrow className="fill-black dark:fill-white" />
-				</DropdownMenu.Content>
-			</DropdownMenu.Portal>
-		</DropdownMenu.Root>
+		<button
+			type="button"
+			onClick={(e) => showContextMenu(e)}
+			className={cn(
+				"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
+				large
+					? "rounded-full h-7 gap-1.5 w-24 text-sm font-medium hover:bg-black/10 dark:hover:bg-white/10"
+					: "size-7",
+			)}
+		>
+			{loading ? (
+				<Spinner className="size-4" />
+			) : (
+				<RepostIcon className={cn("size-4", isRepost ? "text-blue-500" : "")} />
+			)}
+			{large ? "Repost" : null}
+		</button>
 	);
 }
--- a/apps/desktop2/src/components/note/buttons/zap.tsx
+++ b/apps/desktop2/src/components/note/buttons/zap.tsx
@@ -1,37 +1,23 @@
 import { ZapIcon } from "@lume/icons";
-import { useRouteContext, useSearch } from "@tanstack/react-router";
-import { toast } from "sonner";
-import { useNoteContext } from "../provider";
+import { LumeWindow } from "@lume/system";
 import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+import { useNoteContext } from "../provider";

 export function NoteZap({ large = false }: { large?: boolean }) {
 	const event = useNoteContext();
-	const { ark, settings } = useRouteContext({ strict: false });
-	const { account } = useSearch({ strict: false });
+	const { settings } = useRouteContext({ strict: false });

-	const zap = async () => {
-		try {
-			const nwc = await ark.load_nwc();
-			if (!nwc) {
-				ark.open_nwc();
-			} else {
-				ark.open_zap(event.id, event.pubkey, account);
-			}
-		} catch (e) {
-			toast.error(String(e));
-		}
-	};
-
-	if (!settings.zap) return null;
+	if (!settings.display_zap_button) return null;

 	return (
 		<button
 			type="button"
-			onClick={() => zap()}
+			onClick={() => LumeWindow.openZap(event.id)}
 			className={cn(
 				"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
 				large
-					? "rounded-full bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
+					? "rounded-full h-7 gap-1.5 w-20 text-sm font-medium hover:bg-black/10 dark:hover:bg-white/10"
 					: "size-7",
 			)}
 		>
--- a/apps/desktop2/src/components/note/child.tsx
+++ b/apps/desktop2/src/components/note/child.tsx
@@ -1,28 +1,44 @@
-import { useEvent } from "@lume/ark";
+import { useEvent } from "@lume/system";
 import { cn } from "@lume/utils";
 import { Note } from ".";
+import { InfoIcon } from "@lume/icons";
+import type { EventTag } from "@lume/types";

 export function NoteChild({
-	eventId,
+	event,
 	isRoot,
 }: {
-	eventId: string;
+	event: EventTag;
 	isRoot?: boolean;
 }) {
-	const { isLoading, isError, data } = useEvent(eventId);
+	const { isLoading, isError, data } = useEvent(event.id, event.relayHint);

 	if (isLoading) {
-		return <div>Loading...</div>;
+		return (
+			<div className="flex items-center gap-2 px-3 pt-3">
+				<div className="rounded-full size-8 shrink-0 bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
+				<div className="w-2/3 h-4 rounded-md animate-pulse bg-neutral-200 dark:bg-neutral-800" />
+			</div>
+		);
 	}

 	if (isError || !data) {
-		return <div>Error</div>;
+		return (
+			<div className="flex items-center gap-2 px-3 pt-3">
+				<div className="inline-flex items-center justify-center text-white bg-red-500 rounded-full size-8 shrink-0">
+					<InfoIcon className="size-5" />
+				</div>
+				<p className="text-sm text-red-500">
+					Event not found with your current relay set
+				</p>
+			</div>
+		);
 	}

 	return (
 		<Note.Provider event={data}>
 			<Note.Root className={cn(isRoot ? "mb-3" : "")}>
-				<div className="h-14 px-3 flex items-center justify-between">
+				<div className="flex items-center justify-between px-3 h-14">
 					<Note.User />
 				</div>
 				<Note.Content className="px-3" />
--- a/apps/desktop2/src/components/note/content.tsx
+++ b/apps/desktop2/src/components/note/content.tsx
@@ -1,5 +1,7 @@
-import { NOSTR_EVENTS, NOSTR_MENTIONS, cn, parser } from "@lume/utils";
-import { type ReactNode, useMemo } from "react";
+import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+import { nanoid } from "nanoid";
+import { type ReactNode, useMemo, useState } from "react";
 import reactStringReplace from "react-string-replace";
 import { Hashtag } from "./mentions/hashtag";
 import { MentionNote } from "./mentions/note";
@@ -7,7 +9,6 @@ import { MentionUser } from "./mentions/user";
 import { Images } from "./preview/images";
 import { Videos } from "./preview/videos";
 import { useNoteContext } from "./provider";
-import { nanoid } from "nanoid";

 export function NoteContent({
 	quote = true,
@@ -20,55 +21,48 @@ export function NoteContent({
 	clean?: boolean;
 	className?: string;
 }) {
+	const { settings } = useRouteContext({ strict: false });
 	const event = useNoteContext();
-	const data = useMemo(() => {
-		const { content, images, videos } = parser(event.content);
-		const words = content.split(/( |\n)/);
-		const hashtags = words.filter((word) => word.startsWith("#"));
-		const events = words.filter((word) =>
-			NOSTR_EVENTS.some((el) => word.startsWith(el)),
-		);
-		const mentions = words.filter((word) =>
-			NOSTR_MENTIONS.some((el) => word.startsWith(el)),
-		);
-
-		let richContent: ReactNode[] | string = content;

+	const warning = useMemo(() => event.warning, [event]);
+	const content = useMemo(() => {
 		try {
-			if (hashtags.length) {
-				for (const hashtag of hashtags) {
-					const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
-					richContent = reactStringReplace(richContent, regex, (_, index) => {
-						return <Hashtag key={hashtag + index} tag={hashtag} />;
-					});
+			// Get parsed meta
+			const { content, hashtags, events, mentions } = event.meta;
+
+			// Define rich content
+			let richContent: ReactNode[] | string = settings.display_media
+				? content
+				: event.content;
+
+			for (const hashtag of hashtags) {
+				const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
+				richContent = reactStringReplace(richContent, regex, (_, index) => {
+					return <Hashtag key={hashtag + index} tag={hashtag} />;
+				});
+			}
+
+			for (const event of events) {
+				if (quote) {
+					richContent = reactStringReplace(richContent, event, (_, index) => (
+						<MentionNote key={event + index} eventId={event} />
+					));
+				}
+
+				if (!quote && clean) {
+					richContent = reactStringReplace(richContent, event, () => null);
 				}
 			}

-			if (events.length) {
-				for (const event of events) {
-					if (quote) {
-						richContent = reactStringReplace(richContent, event, (_, index) => (
-							<MentionNote key={event + index} eventId={event} />
-						));
-					}
-
-					if (!quote && clean) {
-						richContent = reactStringReplace(richContent, event, () => null);
-					}
+			for (const user of mentions) {
+				if (mention) {
+					richContent = reactStringReplace(richContent, user, (_, index) => (
+						<MentionUser key={user + index} pubkey={user} />
+					));
 				}
-			}

-			if (mentions.length) {
-				for (const user of mentions) {
-					if (mention) {
-						richContent = reactStringReplace(richContent, user, (_, index) => (
-							<MentionUser key={user + index} pubkey={user} />
-						));
-					}
-
-					if (!mention && clean) {
-						richContent = reactStringReplace(richContent, user, () => null);
-					}
+				if (!mention && clean) {
+					richContent = reactStringReplace(richContent, user, () => null);
 				}
 			}

@@ -81,7 +75,7 @@ export function NoteContent({
 						href={match}
 						target="_blank"
 						rel="noreferrer"
-						className="line-clamp-1 text-blue-500 hover:text-blue-600"
+						className="inline text-blue-500 hover:text-blue-600"
 					>
 						{match}
 					</a>
@@ -92,25 +86,56 @@ export function NoteContent({
 				<div key={nanoid()} className="h-3" />
 			));

-			return { content: richContent, images, videos };
-		} catch (e) {
-			return { content, images, videos };
+			return richContent;
+		} catch {
+			return event.content;
 		}
-	}, []);
+	}, [event.content]);
+
+	const [blurred, setBlurred] = useState(() => warning?.length > 0);

 	return (
-		<div className="flex flex-col gap-2">
+		<div className="relative flex flex-col gap-2">
+			{blurred ? (
+				<div className="absolute inset-0 z-10 flex items-center justify-center w-full h-full bg-black/80 backdrop-blur-lg">
+					<div className="flex flex-col items-center justify-center gap-2 text-center">
+						<p className="text-sm text-white/60">
+							The content is hidden because the author
+							<br />
+							marked it with a warning for a reason:
+						</p>
+						<p className="text-sm font-medium text-white">{warning}</p>
+						<button
+							type="button"
+							onClick={() => setBlurred(false)}
+							className="inline-flex items-center justify-center px-2 mt-4 text-sm font-medium border rounded-lg text-white/70 h-9 w-max bg-white/20 hover:bg-white/30 border-white/5"
+						>
+							View anyway
+						</button>
+					</div>
+				</div>
+			) : null}
 			<div
 				className={cn(
-					"select-text text-[15px] text-balance break-words overflow-hidden",
-					event.content.length > 500 ? "max-h-[300px] gradient-mask-b-0" : "",
+					"select-text text-pretty content-break overflow-hidden",
+					event.meta?.content.length > 500
+						? "max-h-[250px] gradient-mask-b-0"
+						: "",
 					className,
 				)}
 			>
-				{data.content}
+				{content}
 			</div>
-			{data.images.length ? <Images urls={data.images} /> : null}
-			{data.videos.length ? <Videos urls={data.videos} /> : null}
+			{settings.display_media ? (
+				<>
+					{event.meta?.images.length ? (
+						<Images urls={event.meta.images} />
+					) : null}
+					{event.meta?.videos.length ? (
+						<Videos urls={event.meta.videos} />
+					) : null}
+				</>
+			) : null}
 		</div>
 	);
 }
--- a/apps/desktop2/src/components/note/contentLarge.tsx
+++ b/apps/desktop2/src/components/note/contentLarge.tsx
@@ -1,13 +1,4 @@
-import type { Settings } from "@lume/types";
-import {
-	AUDIOS,
-	IMAGES,
-	NOSTR_EVENTS,
-	NOSTR_MENTIONS,
-	VIDEOS,
-	cn,
-} from "@lume/utils";
-import { useRouteContext } from "@tanstack/react-router";
+import { cn } from "@lume/utils";
 import { nanoid } from "nanoid";
 import { type ReactNode, useMemo } from "react";
 import reactStringReplace from "react-string-replace";
@@ -19,135 +10,85 @@ import { VideoPreview } from "./preview/video";
 import { useNoteContext } from "./provider";

 export function NoteContentLarge({
-	compact = true,
 	className,
 }: {
-	compact?: boolean;
 	className?: string;
 }) {
-	const { settings }: { settings: Settings } = useRouteContext({
-		strict: false,
-	});
 	const event = useNoteContext();
 	const content = useMemo(() => {
-		const text = event.content.trim();
-		const words = text.split(/( |\n)/);
-
-		// @ts-ignore, kaboom !!!
-		let parsedContent: ReactNode[] = compact
-			? text.replace(/\n\s*\n/g, "\n")
-			: text;
-
-		const hashtags = words.filter((word) => word.startsWith("#"));
-		const events = words.filter((word) =>
-			NOSTR_EVENTS.some((el) => word.startsWith(el)),
-		);
-		const mentions = words.filter((word) =>
-			NOSTR_MENTIONS.some((el) => word.startsWith(el)),
-		);
-
 		try {
-			if (hashtags.length) {
-				for (const hashtag of hashtags) {
-					const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
-					parsedContent = reactStringReplace(parsedContent, regex, () => {
-						return <Hashtag key={nanoid()} tag={hashtag} />;
-					});
-				}
-			}
+			// Get parsed meta
+			const { images, videos, hashtags, events, mentions } = event.meta;

-			if (events.length) {
-				for (const event of events) {
-					parsedContent = reactStringReplace(
-						parsedContent,
-						event,
-						(match, i) => <MentionNote key={match + i} eventId={event} />,
-					);
-				}
-			}
+			// Define rich content
+			let richContent: ReactNode[] | string = event.content;

-			if (mentions.length) {
-				for (const mention of mentions) {
-					parsedContent = reactStringReplace(
-						parsedContent,
-						mention,
-						(match, i) => <MentionUser key={match + i} pubkey={mention} />,
-					);
-				}
-			}
-
-			parsedContent = reactStringReplace(
-				parsedContent,
-				/(https?:\/\/\S+)/gi,
-				(match, i) => {
-					try {
-						const url = new URL(match);
-						const ext = url.pathname.split(".")[1];
-
-						if (!settings.enhancedPrivacy) {
-							if (IMAGES.includes(ext)) {
-								return <ImagePreview key={match + i} url={url.toString()} />;
-							}
-
-							if (VIDEOS.includes(ext)) {
-								return <VideoPreview key={match + i} url={url.toString()} />;
-							}
-
-							if (AUDIOS.includes(ext)) {
-								return <VideoPreview key={match + i} url={url.toString()} />;
-							}
-						}
-
-						return (
-							<a
-								key={match + i}
-								href={match}
-								target="_blank"
-								rel="noreferrer"
-								className="content-break w-full font-normal text-blue-500 hover:text-blue-600"
-							>
-								{match}
-							</a>
-						);
-					} catch {
-						return (
-							<a
-								key={match + i}
-								href={match}
-								target="_blank"
-								rel="noreferrer"
-								className="content-break w-full font-normal text-blue-500 hover:text-blue-600"
-							>
-								{match}
-							</a>
-						);
-					}
-				},
-			);
-
-			if (compact) {
-				parsedContent = reactStringReplace(parsedContent, /\n*\n/g, () => (
-					<div key={nanoid()} className="h-1.5" />
+			for (const hashtag of hashtags) {
+				const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
+				richContent = reactStringReplace(richContent, regex, () => (
+					<Hashtag key={nanoid()} tag={hashtag} />
 				));
 			}

-			parsedContent = reactStringReplace(
-				parsedContent,
-				/[\r]?\n[\r]?\n/g,
-				(_, index) => <br key={event.id + "_br_" + index} />,
+			for (const event of events) {
+				richContent = reactStringReplace(richContent, event, (match, i) => (
+					<MentionNote key={match + i} eventId={event} />
+				));
+			}
+
+			for (const mention of mentions) {
+				richContent = reactStringReplace(richContent, mention, (match, i) => (
+					<MentionUser key={match + i} pubkey={mention} />
+				));
+			}
+
+			for (const image of images) {
+				richContent = reactStringReplace(richContent, image, (match, i) => (
+					<ImagePreview key={match + i} url={match} />
+				));
+			}
+
+			for (const video of videos) {
+				richContent = reactStringReplace(richContent, video, (match, i) => (
+					<VideoPreview key={match + i} url={match} />
+				));
+			}
+
+			richContent = reactStringReplace(
+				richContent,
+				/(https?:\/\/\S+)/gi,
+				(match, i) => (
+					<a
+						key={match + i}
+						href={match}
+						target="_blank"
+						rel="noreferrer"
+						className="text-blue-500 line-clamp-1 hover:text-blue-600"
+					>
+						{match}
+					</a>
+				),
 			);

-			return parsedContent;
+			richContent = reactStringReplace(richContent, /(\r\n|\r|\n)+/g, () => (
+				<div key={nanoid()} className="h-3" />
+			));
+
+			return richContent;
 		} catch (e) {
-			return text;
+			console.log("[parser]: ", e);
+			return event.content;
 		}
-	}, []);
+	}, [event.content]);

 	return (
-		<div className={cn("select-text", className)}>
-			<div className="text-[15px] text-balance content-break leading-normal">
-				{content}
-			</div>
+		<div
+			className={cn(
+				"select-text leading-normal text-pretty content-break",
+				className,
+			)}
+		>
+			{content}
 		</div>
 	);
 }
--- a/apps/desktop2/src/components/note/index.ts
+++ b/apps/desktop2/src/components/note/index.ts
@@ -1,4 +1,3 @@
-import { NoteActivity } from "./activity";
 import { NoteOpenThread } from "./buttons/open";
 import { NoteReply } from "./buttons/reply";
 import { NoteRepost } from "./buttons/repost";
@@ -23,5 +22,4 @@ export const Note = {
 	Zap: NoteZap,
 	Open: NoteOpenThread,
 	Child: NoteChild,
-	Activity: NoteActivity,
 };
--- a/apps/desktop2/src/components/note/mentions/hashtag.tsx
+++ b/apps/desktop2/src/components/note/mentions/hashtag.tsx
@@ -1,13 +1,10 @@
 export function Hashtag({ tag }: { tag: string }) {
 	return (
-		<button
-			type="button"
-			className="break-all cursor-default leading-normal group"
-		>
+		<span className="leading-normal break-all cursor-default group text-start">
 			<span className="text-blue-500">#</span>
-			<span className="underline-offset-1 underline decoration-2 decoration-blue-200 dark:decoration-blue-800 group-hover:decoration-blue-500">
+			<span className="underline underline-offset-1 decoration-2 decoration-blue-200 dark:decoration-blue-800 group-hover:decoration-blue-500">
 				{tag.replace("#", "")}
 			</span>
-		</button>
+		</span>
 	);
 }
--- a/apps/desktop2/src/components/note/mentions/note.tsx
+++ b/apps/desktop2/src/components/note/mentions/note.tsx
@@ -1,9 +1,7 @@
-import { useEvent } from "@lume/ark";
-import { LinkIcon } from "@lume/icons";
-import { useRouteContext } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
-import { cn } from "@lume/utils";
 import { User } from "@/components/user";
+import { LinkIcon } from "@lume/icons";
+import { LumeWindow, useEvent } from "@lume/system";
+import { Spinner } from "@lume/ui";

 export function MentionNote({
 	eventId,
@@ -12,66 +10,67 @@ export function MentionNote({
 	eventId: string;
 	openable?: boolean;
 }) {
-	const { ark } = useRouteContext({ strict: false });
-	const { t } = useTranslation();
 	const { isLoading, isError, data } = useEvent(eventId);

 	if (isLoading) {
 		return (
-			<div className="flex w-full cursor-default items-center justify-between rounded-xl border border-black/10 p-3 dark:border-white/10">
-				<p>Loading...</p>
+			<div className="py-2">
+				<div className="pl-4 py-3 flex flex-col w-full border-l-2 border-black/5 dark:border-white/5">
+					<Spinner className="size-5" />
+				</div>
 			</div>
 		);
 	}

 	if (isError || !data) {
 		return (
-			<div className="w-full cursor-default rounded-xl border border-black/10 p-3 dark:border-white/10">
-				{t("note.error")}
+			<div className="py-2">
+				<div className="pl-4 py-3 flex flex-col w-full border-l-2 border-black/5 dark:border-white/5">
+					<p className="text-sm font-medium text-red-500">
+						Event not found with your current relay set
+					</p>
+				</div>
 			</div>
 		);
 	}

 	return (
-		<div className="mt-2 flex w-full cursor-default flex-col rounded-xl border border-black/10 dark:border-white/10">
-			<User.Provider pubkey={data.pubkey}>
-				<User.Root className="flex h-12 items-center gap-2 px-3">
-					<User.Avatar className="size-6 shrink-0 rounded-full object-cover" />
-					<div className="inline-flex flex-1 items-center gap-2">
-						<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
-						<span className="text-neutral-600 dark:text-neutral-400">·</span>
-						<User.Time
-							time={data.created_at}
-							className="text-neutral-600 dark:text-neutral-400"
-						/>
-					</div>
-				</User.Root>
-			</User.Provider>
-			<div
-				className={cn(
-					"px-3 select-text content-break whitespace-normal text-balance leading-normal",
-					data.content.length > 100 ? "max-h-[150px] gradient-mask-b-0" : "",
-				)}
-			>
-				{data.content}
-			</div>
-			{openable ? (
-				<div className="flex h-14 items-center justify-end px-3">
-					<button
-						type="button"
-						onClick={(e) => {
-							e.stopPropagation();
-							ark.open_event_id(data.id);
-						}}
-						className="z-10 h-7 w-28 inline-flex items-center justify-center gap-1 text-sm bg-neutral-100 dark:bg-white/10 rounded-full text-neutral-600 hover:text-blue-500 dark:text-neutral-400"
-					>
-						View post
-						<LinkIcon className="size-4" />
-					</button>
+		<div className="py-2">
+			<div className="pl-4 py-3 flex flex-col w-full border-l-2 border-black/5 dark:border-white/5">
+				<User.Provider pubkey={data.pubkey}>
+					<User.Root className="flex items-center gap-2 h-8">
+						<User.Avatar className="rounded-full size-6" />
+						<div className="inline-flex items-center flex-1 gap-2">
+							<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
+							<span className="text-neutral-600 dark:text-neutral-400">·</span>
+							<User.Time
+								time={data.created_at}
+								className="text-neutral-600 dark:text-neutral-400"
+							/>
+						</div>
+					</User.Root>
+				</User.Provider>
+				<div className="select-text text-pretty line-clamp-3 content-break leading-normal">
+					{data.content}
 				</div>
-			) : (
-				<div className="h-3" />
-			)}
+				{openable ? (
+					<div className="flex items-center justify-start mt-3">
+						<button
+							type="button"
+							onClick={(e) => {
+								e.stopPropagation();
+								LumeWindow.openEvent(data);
+							}}
+							className="inline-flex items-center gap-1 text-blue-500 text-sm"
+						>
+							View post
+							<LinkIcon className="size-3" />
+						</button>
+					</div>
+				) : (
+					<div className="h-3" />
+				)}
+			</div>
 		</div>
 	);
 }
--- a/apps/desktop2/src/components/note/mentions/user.tsx
+++ b/apps/desktop2/src/components/note/mentions/user.tsx
@@ -1,24 +1,20 @@
-import { useProfile } from "@lume/ark";
+import { LumeWindow, useProfile } from "@lume/system";
 import { displayNpub } from "@lume/utils";
-import { useRouteContext } from "@tanstack/react-router";

 export function MentionUser({ pubkey }: { pubkey: string }) {
-	const { ark } = useRouteContext({ strict: false });
 	const { isLoading, isError, profile } = useProfile(pubkey);

 	return (
 		<button
 			type="button"
-			onClick={() => ark.open_profile(pubkey)}
+			onClick={() => LumeWindow.openProfile(pubkey)}
 			className="break-words text-start text-blue-500 hover:text-blue-600"
 		>
 			{isLoading
 				? "@anon"
 				: isError
 					? displayNpub(pubkey, 16)
-					: `@${
-							profile?.name || profile?.display_name || profile?.name || "anon"
-						}`}
+					: `@${profile?.name || profile?.display_name || "anon"}`}
 		</button>
 	);
 }
--- a/apps/desktop2/src/components/note/menu.tsx
+++ b/apps/desktop2/src/components/note/menu.tsx
@@ -1,108 +1,62 @@
 import { HorizontalDotsIcon } from "@lume/icons";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { useRouteContext } from "@tanstack/react-router";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import { useNoteContext } from "./provider";
+import { useCallback } from "react";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";

 export function NoteMenu() {
 	const event = useNoteContext();

-	const { ark } = useRouteContext({ strict: false });
-	const { t } = useTranslation();
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();

-	const copyID = async () => {
-		await writeText(await ark.event_to_bech32(event.id, [""]));
-		toast.success("Copied");
-	};
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Copy Sharable Link",
+				action: async () => {
+					const eventId = await event.idAsBech32();
+					await writeText(`https://njump.me/${eventId}`);
+				},
+			}),
+			MenuItem.new({
+				text: "Copy Event ID",
+				action: async () => {
+					const eventId = await event.idAsBech32();
+					await writeText(eventId);
+				},
+			}),
+			MenuItem.new({
+				text: "Copy Public Key",
+				action: async () => {
+					const pubkey = await event.pubkeyAsBech32();
+					await writeText(pubkey);
+				},
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Copy Raw Event",
+				action: async () => {
+					event.meta = undefined;
+					const raw = JSON.stringify(event);
+					await writeText(raw);
+				},
+			}),
+		]);

-	const copyRaw = async () => {
-		await writeText(JSON.stringify(event));
-		toast.success("Copied");
-	};
+		const menu = await Menu.new({
+			items: menuItems,
+		});

-	const copyNpub = async () => {
-		await writeText(await ark.user_to_bech32(event.pubkey, [""]));
-		toast.success("Copied");
-	};
-
-	const copyLink = async () => {
-		await writeText(
-			`https://njump.me/${await ark.event_to_bech32(event.id, [""])}`,
-		);
-		toast.success("Copied");
-	};
+		await menu.popup().catch((e) => console.error(e));
+	}, []);

 	return (
-		<DropdownMenu.Root>
-			<DropdownMenu.Trigger asChild>
-				<button
-					type="button"
-					className="group inline-flex size-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
-				>
-					<HorizontalDotsIcon className="size-5" />
-				</button>
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Portal>
-				<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl bg-black p-1 shadow-md shadow-neutral-500/20 focus:outline-none dark:bg-white">
-					<DropdownMenu.Item asChild>
-						<button
-							type="button"
-							onClick={() => ark.open_event(event)}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
-						>
-							{t("note.menu.viewThread")}
-						</button>
-					</DropdownMenu.Item>
-					<DropdownMenu.Item asChild>
-						<button
-							type="button"
-							onClick={() => copyLink()}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
-						>
-							{t("note.menu.copyLink")}
-						</button>
-					</DropdownMenu.Item>
-					<DropdownMenu.Item asChild>
-						<button
-							type="button"
-							onClick={() => copyID()}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
-						>
-							{t("note.menu.copyNoteId")}
-						</button>
-					</DropdownMenu.Item>
-					<DropdownMenu.Item asChild>
-						<button
-							type="button"
-							onClick={() => copyNpub()}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
-						>
-							{t("note.menu.copyAuthorId")}
-						</button>
-					</DropdownMenu.Item>
-					<DropdownMenu.Item asChild>
-						<button
-							onClick={() => ark.open_profile(event.pubkey)}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
-						>
-							{t("note.menu.viewAuthor")}
-						</button>
-					</DropdownMenu.Item>
-					<DropdownMenu.Separator className="my-1 h-px bg-neutral-900 dark:bg-neutral-100" />
-					<DropdownMenu.Item asChild>
-						<button
-							type="button"
-							onClick={() => copyRaw()}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
-						>
-							{t("note.menu.copyRaw")}
-						</button>
-					</DropdownMenu.Item>
-					<DropdownMenu.Arrow className="fill-black dark:fill-white" />
-				</DropdownMenu.Content>
-			</DropdownMenu.Portal>
-		</DropdownMenu.Root>
+		<button
+			type="button"
+			onClick={(e) => showContextMenu(e)}
+			className="inline-flex items-center justify-center group size-7 text-neutral-600 dark:text-neutral-400"
+		>
+			<HorizontalDotsIcon className="size-5" />
+		</button>
 	);
 }
--- a/apps/desktop2/src/components/note/preview/image.tsx
+++ b/apps/desktop2/src/components/note/preview/image.tsx
@@ -1,61 +1,48 @@
-import { CheckCircleIcon, DownloadIcon } from "@lume/icons";
-import { downloadDir } from "@tauri-apps/api/path";
-import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { download } from "@tauri-apps/plugin-upload";
-import { type SyntheticEvent, useState } from "react";
+import { useRouteContext } from "@tanstack/react-router";
+import { open } from "@tauri-apps/plugin-shell";
+import { useMemo } from "react";

 export function ImagePreview({ url }: { url: string }) {
-	const [downloaded, setDownloaded] = useState(false);
+	const { settings } = useRouteContext({ strict: false });

-	const downloadImage = async (e: { stopPropagation: () => void }) => {
-		try {
-			e.stopPropagation();
-
-			const downloadDirPath = await downloadDir();
-			const filename = url.substring(url.lastIndexOf("/") + 1);
-			await download(url, `${downloadDirPath}/${filename}`);
-
-			setDownloaded(true);
-		} catch (e) {
-			console.error(e);
+	const imageUrl = useMemo(() => {
+		if (settings.image_resize_service.length) {
+			const newUrl = `${settings.image_resize_service}?url=${url}&ll&af&default=1&n=-1`;
+			return newUrl;
+		} else {
+			return url;
 		}
-	};
+	}, [settings.image_resize_service]);

-	const open = async () => {
-		const name = new URL(url).pathname.split("/").pop();
-		return new WebviewWindow("image-viewer", {
-			url,
-			title: name,
-		});
-	};
-
-	const fallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
-		event.currentTarget.src = "/fallback-image.jpg";
-	};
+	if (!settings.display_media) {
+		return (
+			<a
+				href={url}
+				target="_blank"
+				rel="noreferrer"
+				className="inline text-blue-500 hover:text-blue-600"
+			>
+				{url}
+			</a>
+		);
+	}

 	return (
-		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
-		<div onClick={() => open()} className="group relative my-1">
+		<div className="my-1">
 			<img
-				src={url}
+				src={imageUrl}
 				alt={url}
 				loading="lazy"
 				decoding="async"
 				style={{ contentVisibility: "auto" }}
-				onError={fallback}
-				className="max-h-[600px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+				className="max-h-[400px] max-w-[400px] h-auto w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+				onClick={() => open(url)}
+				onKeyDown={() => open(url)}
+				onError={({ currentTarget }) => {
+					currentTarget.onerror = null;
+					currentTarget.src = "/404.jpg";
+				}}
 			/>
-			<button
-				type="button"
-				onClick={(e) => downloadImage(e)}
-				className="absolute right-2 top-2 z-20 hidden size-8 items-center justify-center rounded-md bg-white/10 text-white/70 backdrop-blur-2xl hover:bg-blue-500 hover:text-white group-hover:inline-flex"
-			>
-				{downloaded ? (
-					<CheckCircleIcon className="size-4" />
-				) : (
-					<DownloadIcon className="size-4" />
-				)}
-			</button>
 		</div>
 	);
 }
--- a/apps/desktop2/src/components/note/preview/images.tsx
+++ b/apps/desktop2/src/components/note/preview/images.tsx
@@ -1,62 +1,176 @@
-import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { Carousel, CarouselItem } from "@lume/ui";
+import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
+import { Spinner } from "@lume/ui";
+import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+import { open } from "@tauri-apps/plugin-shell";
+import useEmblaCarousel from "embla-carousel-react";
+import { useCallback, useEffect, useMemo, useState } from "react";

 export function Images({ urls }: { urls: string[] }) {
-	const open = async (url: string) => {
-		const name = new URL(url).pathname
-			.split("/")
-			.pop()
-			.replace(/[^a-zA-Z ]/g, "");
-		const label = `viewer-${name}`;
-		const window = WebviewWindow.getByLabel(label);
+	const { settings } = useRouteContext({ strict: false });

-		if (!window) {
-			const newWindow = new WebviewWindow(label, {
-				url,
-				title: "Image Viewer",
-				width: 800,
-				height: 800,
-				titleBarStyle: "overlay",
-			});
+	const [slidesInView, setSlidesInView] = useState([]);
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		dragFree: true,
+		align: "start",
+		watchSlides: false,
+	});

-			return newWindow;
+	const imageUrls = useMemo(() => {
+		if (settings.image_resize_service.length) {
+			let newUrls: string[];
+
+			if (urls.length === 1) {
+				newUrls = urls.map(
+					(url) =>
+						`${settings.image_resize_service}?url=${url}&ll&af&default=1&n=-1`,
+				);
+			} else {
+				newUrls = urls.map(
+					(url) =>
+						`${settings.image_resize_service}?url=${url}&w=480&h=640&ll&af&default=1&n=-1`,
+				);
+			}
+
+			return newUrls;
+		} else {
+			return urls;
+		}
+	}, [settings.image_resize_service]);
+
+	const scrollPrev = useCallback(() => {
+		if (emblaApi) emblaApi.scrollPrev();
+	}, [emblaApi]);
+
+	const scrollNext = useCallback(() => {
+		if (emblaApi) emblaApi.scrollNext();
+	}, [emblaApi]);
+
+	const updateSlidesInView = useCallback((emblaApi) => {
+		setSlidesInView((slidesInView) => {
+			if (slidesInView.length === emblaApi.slideNodes().length) {
+				emblaApi.off("slidesInView", updateSlidesInView);
+			}
+
+			const inView = emblaApi
+				.slidesInView()
+				.filter((index) => !slidesInView.includes(index));
+
+			return slidesInView.concat(inView);
+		});
+	}, []);
+
+	useEffect(() => {
+		if (emblaApi && urls.length > 1) {
+			updateSlidesInView(emblaApi);
+
+			emblaApi.on("slidesInView", updateSlidesInView);
+			emblaApi.on("reInit", updateSlidesInView);
 		}

-		return await window.setFocus();
-	};
+		return () => {
+			emblaApi?.off("slidesInView", updateSlidesInView);
+			emblaApi?.off("reInit", updateSlidesInView);
+		};
+	}, [emblaApi, updateSlidesInView]);

 	if (urls.length === 1) {
 		return (
-			<div className="group px-3">
+			<div className="px-3 group">
 				<img
-					src={urls[0]}
+					src={imageUrls[0]}
 					alt={urls[0]}
 					loading="lazy"
 					decoding="async"
 					style={{ contentVisibility: "auto" }}
 					className="max-h-[400px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
-					onClick={() => open(urls[0])}
+					onClick={() => urls[0]}
+					onKeyDown={() => urls[0]}
+					onError={({ currentTarget }) => {
+						currentTarget.onerror = null;
+						currentTarget.src = "/404.jpg";
+					}}
 				/>
 			</div>
 		);
 	}

 	return (
-		<Carousel
-			items={urls}
-			renderItem={({ item, isSnapPoint }) => (
-				<CarouselItem key={item} isSnapPoint={isSnapPoint}>
-					<img
-						src={item}
-						alt={item}
-						loading="lazy"
-						decoding="async"
-						style={{ contentVisibility: "auto" }}
-						className="w-full h-full object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
-						onClick={() => open(item)}
-					/>
-				</CarouselItem>
-			)}
-		/>
+		<div className="relative px-3 overflow-hidden group">
+			<div ref={emblaRef} className="w-full h-[320px]">
+				<div className="flex w-full gap-2 scrollbar-none">
+					{imageUrls.map((url, index) => (
+						<LazyImage
+							/* biome-ignore lint/suspicious/noArrayIndexKey: url can be duplicated */
+							key={url + index}
+							url={url}
+							inView={slidesInView.indexOf(index) > -1}
+						/>
+					))}
+				</div>
+			</div>
+			<div className="absolute z-10 items-center justify-between hidden w-full px-5 transform -translate-x-1/2 -translate-y-1/2 group-hover:flex left-1/2 top-1/2">
+				<button
+					type="button"
+					disabled={!emblaApi?.canScrollPrev}
+					className={cn(
+						"size-11 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center text-white",
+						!emblaApi?.canScrollPrev ? "opacity-50" : "",
+					)}
+					onClick={() => scrollPrev()}
+				>
+					<ArrowLeftIcon className="size-6" />
+				</button>
+				<button
+					type="button"
+					disabled={!emblaApi?.canScrollNext}
+					className={cn(
+						"size-11 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center text-white",
+						!emblaApi?.canScrollNext ? "opacity-50" : "",
+					)}
+					onClick={() => scrollNext()}
+				>
+					<ArrowRightIcon className="size-6" />
+				</button>
+			</div>
+		</div>
+	);
+}
+
+function LazyImage({ url, inView }: { url: string; inView: boolean }) {
+	const [hasLoaded, setHasLoaded] = useState(false);
+
+	const setLoaded = useCallback(() => {
+		if (inView) setHasLoaded(true);
+	}, [inView, setHasLoaded]);
+
+	return (
+		<div className="w-[240px] h-[320px] shrink-0 relative rounded-lg overflow-hidden">
+			{!hasLoaded ? (
+				<div className="flex items-center justify-center size-full bg-black/5 dark:bg-white/5">
+					<Spinner className="size-4" />
+				</div>
+			) : null}
+			<img
+				src={
+					inView
+						? url
+						: "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
+				}
+				data-src={url}
+				alt={url}
+				loading="lazy"
+				decoding="async"
+				style={{ contentVisibility: "auto" }}
+				className="object-cover w-full h-full rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+				onClick={() => open(url)}
+				onKeyDown={() => open(url)}
+				onLoad={setLoaded}
+				onError={({ currentTarget }) => {
+					currentTarget.onerror = null;
+					currentTarget.src = "/404.jpg";
+				}}
+			/>
+		</div>
 	);
 }
--- a/apps/desktop2/src/components/note/preview/link.tsx
+++ b/apps/desktop2/src/components/note/preview/link.tsx
@@ -1,87 +0,0 @@
-import { useOpenGraph } from "@lume/utils";
-
-function isImage(url: string) {
-	return /^https?:\/\/.+\.(jpg|jpeg|png|webp|avif)$/.test(url);
-}
-
-export function LinkPreview({ url }: { url: string }) {
-	const domain = new URL(url);
-	const { isLoading, isError, data } = useOpenGraph(url);
-
-	if (isLoading) {
-		return (
-			<div className="my-1.5 flex w-full flex-col overflow-hidden rounded-2xl border border-black/10 p-3 dark:border-white/10">
-				<div className="h-48 w-full shrink-0 animate-pulse bg-neutral-300 dark:bg-neutral-700" />
-				<div className="flex flex-col gap-2 px-3 py-3">
-					<div className="h-3 w-2/3 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-					<div className="h-3 w-3/4 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-					<span className="mt-2.5 text-sm leading-none text-neutral-600 dark:text-neutral-400">
-						{domain.hostname}
-					</span>
-				</div>
-			</div>
-		);
-	}
-
-	if (!data.title && !data.image && !data.description) {
-		return (
-			<a
-				href={url}
-				target="_blank"
-				rel="noreferrer"
-				className="inline-block text-blue-500 hover:text-blue-600"
-			>
-				{url}
-			</a>
-		);
-	}
-
-	if (isError) {
-		return (
-			<a
-				href={url}
-				target="_blank"
-				rel="noreferrer"
-				className="inline-block text-blue-500 hover:text-blue-600"
-			>
-				{url}
-			</a>
-		);
-	}
-
-	return (
-		<a
-			href={url}
-			target="_blank"
-			rel="noreferrer"
-			className="my-1 flex w-full flex-col overflow-hidden rounded-2xl border border-black/10 dark:border-white/10"
-		>
-			{isImage(data.image) ? (
-				<img
-					src={data.image}
-					alt={url}
-					loading="lazy"
-					decoding="async"
-					className="h-48 w-full shrink-0 rounded-t-lg bg-white object-cover"
-				/>
-			) : null}
-			<div className="flex flex-col items-start p-3">
-				<div className="flex flex-col items-start text-left">
-					{data.title ? (
-						<div className="content-break line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
-							{data.title}
-						</div>
-					) : null}
-					{data.description ? (
-						<div className="content-break mb-2 line-clamp-3 text-balance text-sm text-neutral-700 dark:text-neutral-400">
-							{data.description}
-						</div>
-					) : null}
-				</div>
-				<div className="break-all text-sm font-semibold text-blue-500">
-					{domain.hostname}
-				</div>
-			</div>
-		</a>
-	);
-}
--- a/apps/desktop2/src/components/note/preview/video.tsx
+++ b/apps/desktop2/src/components/note/preview/video.tsx
@@ -1,12 +1,30 @@
+import { useRouteContext } from "@tanstack/react-router";
+
 export function VideoPreview({ url }: { url: string }) {
+	const { settings } = useRouteContext({ strict: false });
+
+	if (settings.display_media) {
+		return (
+			<a
+				href={url}
+				target="_blank"
+				rel="noreferrer"
+				className="inline text-blue-500 hover:text-blue-600"
+			>
+				{url}
+			</a>
+		);
+	}
+
 	return (
-		<div className="my-1 overflow-hidden rounded-xl">
+		<div className="my-1">
 			<video
-				className="h-auto w-full bg-neutral-100 text-sm dark:bg-neutral-900"
+				className="max-h-[600px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+				preload="metadata"
 				controls
 				muted
 			>
-				<source src={url} type="video/mp4" />
+				<source src={`${url}#t=0.1`} type="video/mp4" />
 				Your browser does not support the video tag.
 			</video>
 		</div>
--- a/apps/desktop2/src/components/note/preview/videos.tsx
+++ b/apps/desktop2/src/components/note/preview/videos.tsx
@@ -1,36 +1,18 @@
-import { Carousel, CarouselItem } from "@lume/ui";
-
 export function Videos({ urls }: { urls: string[] }) {
-	if (urls.length === 1) {
-		return (
-			<div className="group px-3">
+	return (
+		<div className="group px-3">
+			{urls.map((url) => (
 				<video
-					className="w-full h-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+					key={url}
+					className="max-h-[400px] w-auto  object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+					preload="metadata"
 					controls
 					muted
 				>
-					<source src={urls[0]} type="video/mp4" />
+					<source src={`${urls[0]}#t=0.1`} type="video/mp4" />
 					Your browser does not support the video tag.
 				</video>
-			</div>
-		);
-	}
-
-	return (
-		<Carousel
-			items={urls}
-			renderItem={({ item, isSnapPoint }) => (
-				<CarouselItem key={item} isSnapPoint={isSnapPoint}>
-					<video
-						className="w-full h-full object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
-						controls={false}
-						muted
-					>
-						<source src={item} type="video/mp4" />
-						Your browser does not support the video tag.
-					</video>
-				</CarouselItem>
-			)}
-		/>
+			))}
+		</div>
 	);
 }
--- a/apps/desktop2/src/components/note/provider.tsx
+++ b/apps/desktop2/src/components/note/provider.tsx
@@ -1,19 +1,20 @@
-import type { Event } from "@lume/types";
+import type { LumeEvent } from "@lume/system";
 import { type ReactNode, createContext, useContext } from "react";

-const EventContext = createContext<Event>(null);
+const NoteContext = createContext<LumeEvent>(null);

 export function NoteProvider({
 	event,
 	children,
-}: { event: Event; children: ReactNode }) {
-	return (
-		<EventContext.Provider value={event}>{children}</EventContext.Provider>
-	);
+}: {
+	event: LumeEvent;
+	children: ReactNode;
+}) {
+	return <NoteContext.Provider value={event}>{children}</NoteContext.Provider>;
 }

 export function useNoteContext() {
-	const context = useContext(EventContext);
+	const context = useContext(NoteContext);
 	if (!context) {
 		throw new Error("Please import Note Provider to use useNoteContext() hook");
 	}
--- a/apps/desktop2/src/components/note/user.tsx
+++ b/apps/desktop2/src/components/note/user.tsx
@@ -1,62 +1,62 @@
+import { LumeWindow } from "@lume/system";
 import { cn } from "@lume/utils";
-import * as HoverCard from "@radix-ui/react-hover-card";
-import { useRouteContext } from "@tanstack/react-router";
+import { Menu, MenuItem } from "@tauri-apps/api/menu";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { useCallback } from "react";
 import { User } from "../user";
 import { useNoteContext } from "./provider";

 export function NoteUser({ className }: { className?: string }) {
-	const { ark } = useRouteContext({ strict: false });
 	const event = useNoteContext();

+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "View Profile",
+				action: () => LumeWindow.openProfile(event.pubkey),
+			}),
+			MenuItem.new({
+				text: "Copy Public Key",
+				action: async () => {
+					const pubkey = await event.pubkeyAsBech32();
+					await writeText(pubkey);
+				},
+			}),
+		]);
+
+		const menu = await Menu.new({
+			items: menuItems,
+		});
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
+
 	return (
 		<User.Provider pubkey={event.pubkey}>
-			<HoverCard.Root>
-				<User.Root
-					className={cn("flex items-start justify-between", className)}
-				>
-					<div className="flex w-full gap-2">
-						<HoverCard.Trigger className="shrink-0">
-							<User.Avatar className="size-8 rounded-full object-cover outline outline-1 -outline-offset-1 outline-black/15" />
-						</HoverCard.Trigger>
-						<div className="flex w-full items-center gap-3">
-							<div className="flex items-center gap-1">
-								<User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
-								<User.NIP05 />
-							</div>
-							<div className="text-neutral-600 dark:text-neutral-400">·</div>
-							<User.Time
-								time={event.created_at}
-								className="text-neutral-600 dark:text-neutral-400"
-							/>
-						</div>
-					</div>
-				</User.Root>
-				<HoverCard.Portal>
-					<HoverCard.Content
-						className="w-[300px] rounded-xl bg-black p-3 data-[side=bottom]:animate-slideUpAndFade data-[state=open]:transition-all dark:bg-white dark:shadow-none"
-						sideOffset={5}
-						side="right"
+			<User.Root className={cn("flex items-start justify-between", className)}>
+				<div className="flex w-full gap-2">
+					<button
+						type="button"
+						onClick={(e) => showContextMenu(e)}
+						className="shrink-0"
 					>
-						<div className="flex flex-col gap-2">
-							<User.Avatar className="size-11 rounded-lg object-cover" />
-							<div className="flex flex-col gap-2">
-								<div className="inline-flex items-center gap-1">
-									<User.Name className="font-semibold leading-tight text-white dark:text-neutral-900" />
-									<User.NIP05 />
-								</div>
-								<User.About className="line-clamp-3 text-sm text-white dark:text-neutral-900" />
-								<button
-									onClick={() => ark.open_profile(event.pubkey)}
-									className="mt-2 inline-flex h-9 w-full items-center justify-center rounded-lg bg-white text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200"
-								>
-									View profile
-								</button>
-							</div>
+						<User.Avatar className="rounded-full size-8" />
+					</button>
+					<div className="flex items-center w-full gap-3">
+						<div className="flex items-center gap-1">
+							<User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
+							<User.NIP05 />
 						</div>
-						<HoverCard.Arrow className="fill-black dark:fill-white" />
-					</HoverCard.Content>
-				</HoverCard.Portal>
-			</HoverCard.Root>
+						<div className="text-neutral-600 dark:text-neutral-400">·</div>
+						<User.Time
+							time={event.created_at}
+							className="text-neutral-600 dark:text-neutral-400"
+						/>
+					</div>
+				</div>
+			</User.Root>
 		</User.Provider>
 	);
 }
--- a/apps/desktop2/src/components/notification.tsx
+++ b/apps/desktop2/src/components/notification.tsx
@@ -1,32 +0,0 @@
-import type { Event } from "@lume/types";
-import { Note } from "@/components/note";
-import { cn } from "@lume/utils";
-
-export function Notification({
-	event,
-	className,
-}: {
-	event: Event;
-	className?: string;
-}) {
-	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>
-					<div className="px-3 h-14 flex items-center justify-between">
-						<Note.User />
-					</div>
-					<Note.Content className="px-3" />
-				</div>
-				<div className="flex items-center h-14 px-3">
-					<Note.Open />
-				</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-}
--- a/apps/desktop2/src/components/quote.tsx
+++ b/apps/desktop2/src/components/quote.tsx
@@ -1,29 +1,26 @@
-import { QuoteIcon } from "@lume/icons";
-import type { Event } from "@lume/types";
 import { Note } from "@/components/note";
+import { QuoteIcon } from "@lume/icons";
+import type { LumeEvent } from "@lume/system";
 import { cn } from "@lume/utils";
+import { memo } from "react";

-export function Quote({
+export const Quote = memo(function Quote({
 	event,
 	className,
 }: {
-	event: Event;
+	event: LumeEvent;
 	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",
+					"bg-white dark:bg-black/20 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 />
+					<Note.Child event={event.quote} 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" />
@@ -32,16 +29,16 @@ export function Quote({
 						<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">
+						<div className="flex items-center justify-between px-3 h-14">
 							<Note.User />
 						</div>
 						<Note.Content className="px-3" quote={false} clean />
 					</div>
 				</div>
-				<div className="flex items-center h-14 px-3">
+				<div className="flex items-center px-3 h-14">
 					<Note.Open />
 				</div>
 			</Note.Root>
 		</Note.Provider>
 	);
-}
+});
--- a/apps/desktop2/src/components/repost.tsx
+++ b/apps/desktop2/src/components/repost.tsx
@@ -1,85 +1,82 @@
-import type { Event } from "@lume/types";
-import { Spinner } from "@lume/ui";
 import { Note } from "@/components/note";
 import { User } from "@/components/user";
+import { type LumeEvent, NostrQuery } from "@lume/system";
+import { Spinner } from "@lume/ui";
 import { cn } from "@lume/utils";
 import { useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
+import { memo } from "react";

-export function RepostNote({
+export const RepostNote = memo(function RepostNote({
 	event,
 	className,
 }: {
-	event: Event;
+	event: LumeEvent;
 	className?: string;
 }) {
-	const { ark } = useRouteContext({ strict: false });
-	const {
-		isLoading,
-		isError,
-		data: repostEvent,
-	} = useQuery({
-		queryKey: ["repost", event.id],
+	const { isLoading, isError, data } = useQuery({
+		queryKey: ["event", event.repostId],
 		queryFn: async () => {
 			try {
-				if (event.content.length > 50) {
-					const embed: Event = JSON.parse(event.content);
-					return embed;
-				}
-
-				const id = event.tags.find((el) => el[0] === "e")?.[1];
-				const repostEvent = await ark.get_event(id);
-
-				return repostEvent;
+				const data = await NostrQuery.getRepostEvent(event);
+				return data;
 			} catch (e) {
 				throw new Error(e);
 			}
 		},
 		refetchOnWindowFocus: false,
 		refetchOnMount: false,
+		refetchOnReconnect: false,
+		staleTime: Number.POSITIVE_INFINITY,
+		retry: 2,
 	});

 	return (
 		<Note.Root
 			className={cn(
-				"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl mb-3 shadow-primary dark:ring-1 ring-neutral-800/50",
+				"bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50",
 				className,
 			)}
 		>
-			<User.Provider pubkey={event.pubkey}>
-				<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="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
-						Reposted by
-					</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">
+				<div className="flex items-center justify-center h-20 gap-2">
 					<Spinner />
-					Loading event...
+					<span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+						Loading event...
+					</span>
 				</div>
-			) : isError || !repostEvent ? (
-				<div className="flex h-20 items-center justify-center">
+			) : isError || !data ? (
+				<div className="flex items-center justify-center h-20">
 					Event not found within your current relay set
 				</div>
 			) : (
-				<Note.Provider event={repostEvent}>
+				<Note.Provider event={data}>
 					<Note.Root>
-						<div className="px-3 h-14 flex items-center justify-between">
+						<div className="flex items-center justify-between px-3 h-14">
 							<Note.User />
 							<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 className="flex items-center justify-between px-3 mt-3 h-14">
+							<div className="inline-flex items-center gap-3">
+								<Note.Open />
+								<Note.Reply />
+								<Note.Repost />
+								<Note.Zap />
+							</div>
+							<div>
+								<User.Provider pubkey={event.pubkey}>
+									<User.Root className="flex items-center gap-2">
+										<div className="text-sm font-medium text-neutral-800 dark:text-neutral-200">
+											Reposted by
+										</div>
+										<User.Avatar className="rounded-full size-6" />
+									</User.Root>
+								</User.Provider>
+							</div>
 						</div>
 					</Note.Root>
 				</Note.Provider>
 			)}
 		</Note.Root>
 	);
-}
+});
--- a/apps/desktop2/src/components/text.tsx
+++ b/apps/desktop2/src/components/text.tsx
@@ -1,28 +1,29 @@
-import type { Event } from "@lume/types";
-import { cn } from "@lume/utils";
 import { Note } from "@/components/note";
+import type { LumeEvent } from "@lume/system";
+import { cn } from "@lume/utils";
+import { memo } from "react";

-export function TextNote({
+export const TextNote = memo(function TextNote({
 	event,
 	className,
 }: {
-	event: Event;
+	event: LumeEvent;
 	className?: string;
 }) {
 	return (
 		<Note.Provider event={event}>
 			<Note.Root
 				className={cn(
-					"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50",
+					"bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5",
 					className,
 				)}
 			>
-				<div className="px-3 h-14 flex items-center justify-between">
+				<div className="flex items-center justify-between px-3 h-14">
 					<Note.User />
 					<Note.Menu />
 				</div>
 				<Note.Content className="px-3" />
-				<div className="mt-3 flex items-center gap-4 h-14 px-3">
+				<div className="flex items-center gap-4 px-3 mt-3 h-14">
 					<Note.Open />
 					<Note.Reply />
 					<Note.Repost />
@@ -31,4 +32,4 @@ export function TextNote({
 			</Note.Root>
 		</Note.Provider>
 	);
-}
+});
--- a/apps/desktop2/src/components/user/avatar.tsx
+++ b/apps/desktop2/src/components/user/avatar.tsx
@@ -1,35 +1,74 @@
 import { cn } from "@lume/utils";
 import * as Avatar from "@radix-ui/react-avatar";
+import { useRouteContext } from "@tanstack/react-router";
 import { minidenticon } from "minidenticons";
-import { nanoid } from "nanoid";
 import { useMemo } from "react";
 import { useUserContext } from "./provider";

 export function UserAvatar({ className }: { className?: string }) {
 	const user = useUserContext();
+	const { settings } = useRouteContext({ strict: false });

-	const fallbackAvatar = useMemo(
+	const picture = useMemo(() => {
+		if (
+			settings?.image_resize_service?.length &&
+			user.profile?.picture?.length
+		) {
+			const url = `${settings.image_resize_service}?url=${user.profile?.picture}&w=100&h=100&default=1&n=-1`;
+			return url;
+		} else {
+			return user.profile?.picture;
+		}
+	}, [user.profile?.picture]);
+
+	const fallback = useMemo(
 		() =>
 			`data:image/svg+xml;utf8,${encodeURIComponent(
-				minidenticon(user.pubkey || nanoid(), 90, 50),
+				minidenticon(user.pubkey, 60, 50),
 			)}`,
-		[user],
+		[user.pubkey],
 	);

+	if (settings && !settings.display_avatar) {
+		return (
+			<Avatar.Root
+				className={cn(
+					"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
+					className,
+				)}
+			>
+				<Avatar.Fallback delayMs={120}>
+					<img
+						src={fallback}
+						alt={user.pubkey}
+						loading="lazy"
+						decoding="async"
+						className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
+					/>
+				</Avatar.Fallback>
+			</Avatar.Root>
+		);
+	}
+
 	return (
-		<Avatar.Root className="shrink-0">
+		<Avatar.Root
+			className={cn(
+				"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
+				className,
+			)}
+		>
 			<Avatar.Image
-				src={user.profile?.picture}
+				src={picture}
 				alt={user.pubkey}
-				loading="eager"
+				loading="lazy"
 				decoding="async"
-				className={cn("outline-[.5px] outline-black/5", className)}
+				className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
 			/>
-			<Avatar.Fallback delayMs={120}>
+			<Avatar.Fallback>
 				<img
-					src={fallbackAvatar}
+					src={fallback}
 					alt={user.pubkey}
-					className={cn("bg-black dark:bg-white", className)}
+					className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
 				/>
 			</Avatar.Fallback>
 		</Avatar.Root>
--- a/apps/desktop2/src/components/user/cover.tsx
+++ b/apps/desktop2/src/components/user/cover.tsx
@@ -15,7 +15,7 @@ export function UserCover({ className }: { className?: string }) {
 		);
 	}

-	if (user && !user.profile.banner) {
+	if (user && !user.profile?.banner) {
 		return (
 			<div
 				className={cn("bg-gradient-to-b from-blue-400 to-teal-200", className)}
@@ -25,7 +25,7 @@ export function UserCover({ className }: { className?: string }) {

 	return (
 		<img
-			src={user.profile.banner}
+			src={user?.profile?.banner}
 			alt="banner"
 			loading="lazy"
 			decoding="async"
--- a/apps/desktop2/src/components/user/followButton.tsx
+++ b/apps/desktop2/src/components/user/followButton.tsx
@@ -1,9 +1,8 @@
 import { cn } from "@lume/utils";
-import { useRouteContext } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Spinner } from "@lume/ui";
 import { useUserContext } from "./provider";
+import { NostrAccount } from "@lume/system";

 export function UserFollowButton({
 	simple = false,
@@ -12,37 +11,32 @@ export function UserFollowButton({
 	simple?: boolean;
 	className?: string;
 }) {
-	const { ark } = useRouteContext({ strict: false });
 	const user = useUserContext();

-	const [t] = useTranslation();
 	const [loading, setLoading] = useState(false);
 	const [followed, setFollowed] = useState(false);

 	const toggleFollow = async () => {
 		setLoading(true);
-		if (!followed) {
-			const add = await ark.follow(user.pubkey);
-			if (add) setFollowed(true);
-		} else {
-			const remove = await ark.unfollow(user.pubkey);
-			if (remove) setFollowed(false);
+
+		const toggle = await NostrAccount.toggleContact(user.pubkey);
+
+		if (toggle) {
+			setFollowed((prev) => !prev);
+			setLoading(false);
 		}
-		setLoading(false);
 	};

 	useEffect(() => {
-		async function status() {
-			setLoading(true);
+		let mounted = true;

-			const contacts = await ark.get_contact_list();
-			if (contacts?.includes(user.pubkey)) {
-				setFollowed(true);
-			}
+		NostrAccount.checkContact(user.pubkey).then((status) => {
+			if (mounted) setFollowed(status);
+		});

-			setLoading(false);
-		}
-		status();
+		return () => {
+			mounted = false;
+		};
 	}, []);

 	return (
@@ -56,10 +50,10 @@ export function UserFollowButton({
 				<Spinner className="size-4" />
 			) : followed ? (
 				!simple ? (
-					t("user.unfollow")
+					"Unfollow"
 				) : null
 			) : (
-				t("user.follow")
+				"Follow"
 			)}
 		</button>
 	);
--- a/apps/desktop2/src/components/user/nip05.tsx
+++ b/apps/desktop2/src/components/user/nip05.tsx
@@ -2,21 +2,34 @@ import { VerifiedIcon } from "@lume/icons";
 import { displayLongHandle, displayNpub } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
 import { useUserContext } from "./provider";
+import { NostrQuery } from "@lume/system";
+import { experimental_createPersister } from "@tanstack/query-persist-client-core";

 export function UserNip05() {
 	const user = useUserContext();
-
-	const { ark } = useRouteContext({ strict: false });
 	const { isLoading, data: verified } = useQuery({
 		queryKey: ["nip05", user?.pubkey],
 		queryFn: async () => {
-			if (!user.profile?.nip05) return false;
-			const verify = await ark.verify_nip05(user.pubkey, user.profile?.nip05);
+			if (!user.profile?.nip05?.length) return false;
+
+			const verify = await NostrQuery.verifyNip05(
+				user.pubkey,
+				user.profile?.nip05,
+			);
+
 			return verify;
 		},
-		enabled: !!user.profile,
+		enabled: !!user.profile?.nip05,
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+		staleTime: Number.POSITIVE_INFINITY,
+		retry: false,
+		persister: experimental_createPersister({
+			storage: localStorage,
+			maxAge: 1000 * 60 * 60 * 72, // 72 hours
+		}),
 	});

 	if (!user.profile?.nip05?.length) return;
@@ -26,7 +39,7 @@ export function UserNip05() {
 			<Tooltip.Root delayDuration={150}>
 				<Tooltip.Trigger>
 					{!isLoading && verified ? (
-						<VerifiedIcon className="size-4 text-teal-500" />
+						<VerifiedIcon className="text-teal-500 size-4" />
 					) : null}
 				</Tooltip.Trigger>
 				<Tooltip.Portal>
--- a/apps/desktop2/src/components/user/provider.tsx
+++ b/apps/desktop2/src/components/user/provider.tsx
@@ -1,12 +1,12 @@
-import { useProfile } from "@lume/ark";
+import { useProfile } from "@lume/system";
 import type { Metadata } from "@lume/types";
 import { type ReactNode, createContext, useContext } from "react";

 const UserContext = createContext<{
 	pubkey: string;
+	profile: Metadata;
 	isError: boolean;
 	isLoading: boolean;
-	profile: Metadata;
 }>(null);

 export function UserProvider({
@@ -21,7 +21,7 @@ export function UserProvider({
 	const { isLoading, isError, profile } = useProfile(pubkey, embedProfile);

 	return (
-		<UserContext.Provider value={{ pubkey, isError, isLoading, profile }}>
+		<UserContext.Provider value={{ pubkey, profile, isError, isLoading }}>
 			{children}
 		</UserContext.Provider>
 	);
--- a/apps/desktop2/src/routes/$account.home.tsx
+++ b/apps/desktop2/src/routes/$account.home.tsx
@@ -1,102 +1,87 @@
 import { Column } from "@/components/column";
 import { Toolbar } from "@/components/toolbar";
-import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
-import type { EventColumns, LumeColumn } from "@lume/types";
+import { ArrowLeftIcon, ArrowRightIcon, PlusIcon } from "@lume/icons";
+import { NostrQuery } from "@lume/system";
+import type { ColumnEvent, LumeColumn } from "@lume/types";
 import { createFileRoute } from "@tanstack/react-router";
 import { listen } from "@tauri-apps/api/event";
-import { resolveResource } from "@tauri-apps/api/path";
 import { getCurrent } from "@tauri-apps/api/window";
-import { readTextFile } from "@tauri-apps/plugin-fs";
+import useEmblaCarousel from "embla-carousel-react";
 import { nanoid } from "nanoid";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { VList, type VListHandle } from "virtua";

 export const Route = createFileRoute("/$account/home")({
-	loader: async ({ context }) => {
-		try {
-			const userColumns = await context.ark.get_columns();
-			if (userColumns.length > 0) {
-				return userColumns;
-			} else {
-				const systemPath = "resources/system_columns.json";
-				const resourcePath = await resolveResource(systemPath);
-				const resourceFile = await readTextFile(resourcePath);
-				const systemColumns: LumeColumn[] = JSON.parse(resourceFile);
-
-				return systemColumns;
-			}
-		} catch (e) {
-			console.error(String(e));
-		}
+	loader: async () => {
+		const columns = await NostrQuery.getColumns();
+		return columns;
 	},
 	component: Screen,
 });

 function Screen() {
-	const userSavedColumns = Route.useLoaderData();
-	const vlistRef = useRef<VListHandle>(null);
-
 	const { account } = Route.useParams();
-	const { ark } = Route.useRouteContext();
+	const initialColumnList = Route.useLoaderData();

-	const [selectedIndex, setSelectedIndex] = useState(-1);
-	const [columns, setColumns] = useState([]);
-	const [isScroll, setIsScroll] = useState(false);
-	const [isResize, setIsResize] = useState(false);
+	const [columns, setColumns] = useState<LumeColumn[]>([]);
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		watchDrag: false,
+		loop: false,
+	});

-	const goLeft = () => {
-		const prevIndex = Math.max(selectedIndex - 1, 0);
-		setSelectedIndex(prevIndex);
-		vlistRef.current.scrollToIndex(prevIndex, {
-			align: "center",
+	const scrollPrev = useCallback(() => {
+		if (emblaApi) emblaApi.scrollPrev(true);
+	}, [emblaApi]);
+
+	const scrollNext = useCallback(() => {
+		if (emblaApi) emblaApi.scrollNext(true);
+	}, [emblaApi]);
+
+	const emitScrollEvent = useCallback(() => {
+		getCurrent().emit("child_webview", { scroll: true });
+	}, []);
+
+	const emitResizeEvent = useCallback(() => {
+		getCurrent().emit("child_webview", { resize: true, direction: "x" });
+	}, []);
+
+	const openLumeStore = useCallback(async () => {
+		await getCurrent().emit("columns", {
+			type: "add",
+			column: {
+				label: "store",
+				name: "Column Gallery",
+				content: "/store",
+			},
 		});
-	};
-
-	const goRight = () => {
-		const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
-		setSelectedIndex(nextIndex);
-		vlistRef.current.scrollToIndex(nextIndex, {
-			align: "center",
-		});
-	};
+	}, []);

 	const add = useDebouncedCallback((column: LumeColumn) => {
-		// update col label
-		column.label = `${column.label}-${nanoid()}`;
-
-		// create new cols
-		const cols = [...columns];
-		const openColIndex = cols.findIndex((col) => col.label === "open");
-		const newCols = [
-			...cols.slice(0, openColIndex),
-			column,
-			...cols.slice(openColIndex),
-		];
-
-		setColumns(newCols);
-		setSelectedIndex(newCols.length);
-		setIsScroll(true);
-
-		// scroll to the newest column
-		vlistRef.current.scrollToIndex(newCols.length - 1, {
-			align: "end",
-		});
+		column.label = `${column.label}-${nanoid()}`; // update col label
+		setColumns((prev) => [column, ...prev]);
 	}, 150);

 	const remove = useDebouncedCallback((label: string) => {
-		const newCols = columns.filter((t) => t.label !== label);
-
-		setColumns(newCols);
-		setSelectedIndex(newCols.length);
-		setIsScroll(true);
-
-		// scroll to the first column
-		vlistRef.current.scrollToIndex(newCols.length - 1, {
-			align: "start",
-		});
+		setColumns((prev) => prev.filter((t) => t.label !== label));
 	}, 150);

+	const move = useDebouncedCallback(
+		(label: string, direction: "left" | "right") => {
+			const newCols = [...columns];
+
+			const col = newCols.find((el) => el.label === label);
+			const colIndex = newCols.findIndex((el) => el.label === label);
+
+			newCols.splice(colIndex, 1);
+
+			if (direction === "left") newCols.splice(colIndex - 1, 0, col);
+			if (direction === "right") newCols.splice(colIndex + 1, 0, col);
+
+			setColumns(newCols);
+		},
+		150,
+	);
+
 	const updateName = useDebouncedCallback((label: string, title: string) => {
 		const currentColIndex = columns.findIndex((col) => col.label === label);

@@ -109,78 +94,115 @@ function Screen() {
 		setColumns(newCols);
 	}, 150);

-	const startResize = useDebouncedCallback(
-		() => setIsResize((prev) => !prev),
-		150,
-	);
+	const reset = useDebouncedCallback(() => setColumns([]), 150);
+
+	const handleKeyDown = useDebouncedCallback((event) => {
+		if (event.defaultPrevented) return;
+
+		switch (event.code) {
+			case "ArrowLeft":
+				if (emblaApi) emblaApi.scrollPrev(true);
+				break;
+			case "ArrowRight":
+				if (emblaApi) emblaApi.scrollNext(true);
+				break;
+			default:
+				break;
+		}
+
+		event.preventDefault();
+	}, 150);

 	useEffect(() => {
-		setColumns(userSavedColumns);
-	}, [userSavedColumns]);
+		if (emblaApi) {
+			emblaApi.on("scroll", emitScrollEvent);
+			emblaApi.on("resize", emitResizeEvent);
+			emblaApi.on("slidesChanged", emitScrollEvent);
+		}
+
+		return () => {
+			emblaApi?.off("scroll", emitScrollEvent);
+			emblaApi?.off("resize", emitResizeEvent);
+			emblaApi?.off("slidesChanged", emitScrollEvent);
+		};
+	}, [emblaApi, emitScrollEvent, emitResizeEvent]);

 	useEffect(() => {
-		// save state
-		ark.set_columns(columns);
+		if (columns?.length) {
+			NostrQuery.setColumns(columns).then(() => console.log("saved"));
+		}
 	}, [columns]);

 	useEffect(() => {
-		const unlistenColEvent = listen<EventColumns>("columns", (data) => {
+		setColumns(initialColumnList);
+	}, [initialColumnList]);
+
+	// Listen for keyboard event
+	useEffect(() => {
+		window.addEventListener("keydown", handleKeyDown);
+
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleKeyDown]);
+
+	// Listen for columns event
+	useEffect(() => {
+		const unlisten = listen<ColumnEvent>("columns", (data) => {
+			if (data.payload.type === "reset") reset();
 			if (data.payload.type === "add") add(data.payload.column);
 			if (data.payload.type === "remove") remove(data.payload.label);
+			if (data.payload.type === "move")
+				move(data.payload.label, data.payload.direction);
 			if (data.payload.type === "set_title")
 				updateName(data.payload.label, data.payload.title);
 		});

-		const unlistenWindowResize = getCurrent().listen("tauri://resize", () => {
-			startResize();
-		});
-
 		return () => {
-			unlistenColEvent.then((f) => f());
-			unlistenWindowResize.then((f) => f());
+			unlisten.then((f) => f());
 		};
 	}, []);

 	return (
-		<div className="h-full w-full">
-			<VList
-				ref={vlistRef}
-				horizontal
-				tabIndex={-1}
-				itemSize={440}
-				overscan={3}
-				onScroll={() => setIsScroll(true)}
-				onScrollEnd={() => setIsScroll(false)}
-				className="scrollbar-none h-full w-full overflow-x-auto focus:outline-none"
-				cache={null}
-			>
-				{columns.map((column) => (
-					<Column
-						key={column.label}
-						column={column}
-						account={account}
-						isScroll={isScroll}
-						isResize={isResize}
-					/>
-				))}
-			</VList>
-			<Toolbar>
-				<div className="flex items-center gap-1">
-					<button
-						type="button"
-						onClick={() => goLeft()}
-						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-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
-					>
-						<ArrowRightIcon className="size-5" />
-					</button>
+		<div className="size-full">
+			<div ref={emblaRef} className="overflow-hidden size-full">
+				<div className="flex size-full">
+					{columns?.map((column) => (
+						<Column
+							key={account + column.label}
+							column={column}
+							account={account}
+						/>
+					))}
+					<div className="shrink-0 p-2 h-full w-[480px]">
+						<div className="size-full bg-black/5 dark:bg-white/5 rounded-xl flex items-center justify-center">
+							<button
+								type="button"
+								onClick={() => openLumeStore()}
+								className="inline-flex items-center justify-center gap-0.5 rounded-full text-sm font-medium h-8 w-max pl-1.5 pr-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+							>
+								<PlusIcon className="size-5" />
+								Add Column
+							</button>
+						</div>
+					</div>
 				</div>
+			</div>
+			<Toolbar>
+				<button
+					type="button"
+					onClick={() => scrollPrev()}
+					className="inline-flex items-center justify-center rounded-full size-8 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<ArrowLeftIcon className="size-4" />
+				</button>
+				<button
+					type="button"
+					onClick={() => scrollNext()}
+					className="inline-flex items-center justify-center rounded-full size-8 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<ArrowRightIcon className="size-4" />
+				</button>
 			</Toolbar>
 		</div>
 	);
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@@ -1,184 +1,233 @@
-import { BellIcon, ComposeFilledIcon, PlusIcon, SearchIcon } from "@lume/icons";
-import { Event, Kind } from "@lume/types";
 import { User } from "@/components/user";
 import {
-	cn,
-	decodeZapInvoice,
-	displayNpub,
-	sendNativeNotification,
-} from "@lume/utils";
+	ChevronDownIcon,
+	ComposeFilledIcon,
+	PlusIcon,
+	SearchIcon,
+} from "@lume/icons";
+import { LumeWindow, NostrAccount, NostrQuery } from "@lume/system";
+import { cn } from "@lume/utils";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { invoke } from "@tauri-apps/api/core";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrent } from "@tauri-apps/api/window";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
+import { message } from "@tauri-apps/plugin-dialog";
+import { memo, useCallback, useState } from "react";

 export const Route = createFileRoute("/$account")({
-	beforeLoad: async ({ context }) => {
-		const ark = context.ark;
-		const accounts = await ark.get_all_accounts();
+	beforeLoad: async ({ params }) => {
+		const settings = await NostrQuery.getUserSettings();
+		const accounts = await NostrAccount.getAccounts();
+		const otherAccounts = accounts.filter(
+			(account) => account !== params.account,
+		);

-		return { accounts };
+		return { otherAccounts, settings };
 	},
 	component: Screen,
 });

 function Screen() {
-	const { ark, platform } = Route.useRouteContext();
-	const navigate = Route.useNavigate();
+	const { settings, platform } = Route.useRouteContext();
+
+	const openLumeStore = async () => {
+		await getCurrent().emit("columns", {
+			type: "add",
+			column: {
+				label: "store",
+				name: "Column Gallery",
+				content: "/store",
+			},
+		});
+	};

 	return (
-		<div className="flex h-screen w-screen flex-col">
+		<div className="flex flex-col w-screen h-screen">
 			<div
 				data-tauri-drag-region
-				className={cn(
-					"flex h-11 shrink-0 items-center justify-between pr-2",
-					platform === "macos" ? "ml-2 pl-20" : "pl-4",
-				)}
+				className="flex h-11 shrink-0 items-center justify-between px-3"
 			>
-				<div className="flex items-center gap-3">
-					<Accounts />
+				<div
+					data-tauri-drag-region
+					className={cn(
+						"flex-1 flex items-center gap-2",
+						platform === "macos" ? "pl-[64px]" : "",
+					)}
+				>
 					<button
 						type="button"
-						onClick={() => navigate({ to: "/landing" })}
-						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"
+						onClick={() => openLumeStore()}
+						className="inline-flex items-center justify-center gap-0.5 rounded-full text-sm font-medium h-8 w-max pl-1.5 pr-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
 					>
 						<PlusIcon className="size-5" />
+						Column
 					</button>
+					<div id="toolbar" />
 				</div>
-				<div className="flex items-center gap-2">
+				<div data-tauri-drag-region className="hidden md:flex md:flex-1">
+					<Search />
+				</div>
+				<div
+					data-tauri-drag-region
+					className="flex-1 flex items-center justify-end gap-3"
+				>
 					<button
 						type="button"
-						onClick={() => ark.open_editor()}
-						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"
+						onClick={() => LumeWindow.openEditor()}
+						className="inline-flex items-center justify-center h-8 gap-1 px-3 text-sm font-medium bg-black/5 dark:bg-white/5 rounded-full w-max hover:bg-blue-500 hover:text-white"
 					>
 						<ComposeFilledIcon className="size-4" />
 						New Post
 					</button>
-					<Bell />
-					<button
-						type="button"
-						onClick={() => ark.open_search()}
-						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"
-					>
-						<SearchIcon className="size-5" />
-					</button>
-					<div id="toolbar" />
+					<Accounts />
 				</div>
 			</div>
-			<div className="flex-1">
+			<div
+				className={cn(
+					"flex-1",
+					settings.vibrancy
+						? ""
+						: "bg-white dark:bg-black border-t border-black/20 dark:border-white/20",
+				)}
+			>
 				<Outlet />
 			</div>
 		</div>
 	);
 }

-function Accounts() {
-	const navigate = Route.useNavigate();
-	const { ark, accounts } = Route.useRouteContext();
+const Accounts = memo(function Accounts() {
+	const { otherAccounts } = Route.useRouteContext();
 	const { account } = Route.useParams();

-	const changeAccount = async (npub: string) => {
-		if (npub === account) {
-			return await ark.open_profile(account);
-		}
+	const navigate = Route.useNavigate();

-		// change current account and update signer
-		const select = await ark.load_selected_account(npub);
+	const showContextMenu = useCallback(
+		async (e: React.MouseEvent) => {
+			e.preventDefault();

-		if (select) {
-			return navigate({ to: "/$account/home", params: { account: npub } });
-		} else {
-			toast.warning("Something wrong.");
-		}
-	};
+			const menuItems = await Promise.all([
+				MenuItem.new({
+					text: "New Post",
+					action: () => LumeWindow.openEditor(),
+				}),
+				PredefinedMenuItem.new({ item: "Separator" }),
+				MenuItem.new({
+					text: "View Profile",
+					action: () => LumeWindow.openProfile(account),
+				}),
+				MenuItem.new({
+					text: "Open Settings",
+					action: () => LumeWindow.openSettings(),
+				}),
+			]);
+
+			const menu = await Menu.new({
+				items: menuItems,
+			});
+
+			await menu.popup().catch((e) => console.error(e));
+		},
+		[account],
+	);
+
+	const changeAccount = useCallback(
+		async (npub: string) => {
+			// Change current account and update signer
+			const select = await NostrAccount.loadAccount(npub);
+
+			if (select) {
+				// Reset current columns
+				await getCurrent().emit("columns", { type: "reset" });
+
+				// Redirect to new account
+				return navigate({
+					to: "/$account/home",
+					params: { account: npub },
+					resetScroll: true,
+					replace: true,
+				});
+			} else {
+				await message("Something wrong.", { title: "Accounts", kind: "error" });
+			}
+		},
+		[otherAccounts],
+	);

 	return (
-		<div data-tauri-drag-region className="flex items-center gap-3">
-			{accounts.map((user) => (
-				<button key={user} type="button" onClick={() => changeAccount(user)}>
-					<User.Provider pubkey={user}>
-						<User.Root
-							className={cn(
-								"rounded-full transition-all ease-in-out duration-150 will-change-auto",
-								user === 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 transition-all ease-in-out duration-150 will-change-auto",
-									user === account ? "w-7" : "w-8",
-								)}
-							/>
+		<div data-tauri-drag-region className="hidden md:flex items-center gap-3">
+			{otherAccounts.map((npub) => (
+				<button key={npub} type="button" onClick={(e) => changeAccount(npub)}>
+					<User.Provider pubkey={npub}>
+						<User.Root className="shrink-0 rounded-full transition-all ease-in-out duration-150 will-change-auto hover:ring-1 hover:ring-blue-500">
+							<User.Avatar className="rounded-full size-8" />
 						</User.Root>
 					</User.Provider>
 				</button>
 			))}
+			<button
+				type="button"
+				onClick={(e) => showContextMenu(e)}
+				className="inline-flex items-center gap-1.5"
+			>
+				<User.Provider pubkey={account}>
+					<User.Root className="shrink-0 rounded-full">
+						<User.Avatar className="rounded-full size-8" />
+					</User.Root>
+				</User.Provider>
+				<ChevronDownIcon className="size-3" />
+			</button>
 		</div>
 	);
-}
+});

-function Bell() {
-	const { ark } = Route.useRouteContext();
-	const { account } = Route.useParams();
+const Search = memo(function Search() {
+	const [searchType, setSearchType] = useState<"notes" | "users">("notes");
+	const [query, setQuery] = useState("");

-	const [count, setCount] = useState(0);
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();

-	useEffect(() => {
-		const unlisten = getCurrent().listen<string>(
-			"activity",
-			async (payload) => {
-				setCount((prevCount) => prevCount + 1);
-				await invoke("set_badge", { count });
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Notes",
+				action: () => setSearchType("notes"),
+			}),
+			MenuItem.new({
+				text: "Users",
+				action: () => setSearchType("users"),
+			}),
+		]);

-				const event: Event = JSON.parse(payload.payload);
-				const user = await ark.get_profile(event.pubkey);
-				const userName =
-					user.display_name || user.name || displayNpub(event.pubkey, 16);
+		const menu = await Menu.new({
+			items: menuItems,
+		});

-				switch (event.kind) {
-					case Kind.Text: {
-						sendNativeNotification("Mentioned you in a note", userName);
-						break;
-					}
-					case Kind.Repost: {
-						sendNativeNotification("Reposted your note", userName);
-						break;
-					}
-					case Kind.ZapReceipt: {
-						const amount = decodeZapInvoice(event.tags);
-						sendNativeNotification(
-							`Zapped ₿ ${amount.bitcoinFormatted}`,
-							userName,
-						);
-						break;
-					}
-					default:
-						break;
-				}
-			},
-		);
-
-		return () => {
-			unlisten.then((f) => f());
-		};
+		await menu.popup().catch((e) => console.error(e));
 	}, []);

 	return (
-		<button
-			type="button"
-			onClick={() => {
-				setCount(0);
-				ark.open_activity(account);
-			}}
-			className="relative 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"
-		>
-			<BellIcon className="size-5" />
-			{count > 0 ? (
-				<span className="absolute right-0 top-0 block size-2 rounded-full bg-teal-500 ring-1 ring-black/5" />
-			) : null}
-		</button>
+		<div className="h-8 w-full px-3 text-sm rounded-full inline-flex items-center bg-black/5 dark:bg-white/5">
+			<button
+				type="button"
+				onClick={(e) => showContextMenu(e)}
+				className="inline-flex items-center gap-1 capitalize text-sm font-medium pr-2 border-r border-black/10 dark:border-white/10 text-black/50 dark:text-white/50"
+			>
+				{searchType}
+				<ChevronDownIcon className="size-3" />
+			</button>
+			<input
+				type="text"
+				name="search"
+				placeholder="Search..."
+				onChange={(e) => setQuery(e.target.value)}
+				onKeyDown={(event) => {
+					if (event.key === "Enter") {
+						LumeWindow.openSearch(searchType, query);
+					}
+				}}
+				className="h-full w-full px-3 text-sm rounded-full border-none ring-0 focus:ring-0 focus:outline-none bg-transparent placeholder:text-black/50 dark:placeholder:text-white/50"
+			/>
+			<SearchIcon className="size-5" />
+		</div>
 	);
-}
+});
--- a/apps/desktop2/src/routes/__root.tsx
+++ b/apps/desktop2/src/routes/__root.tsx
@@ -1,60 +1,22 @@
-import type { Ark } from "@lume/ark";
-import { CheckCircleIcon, InfoCircleIcon, CancelCircleIcon } from "@lume/icons";
-import type { Interests, Metadata, Settings } from "@lume/types";
 import { Spinner } from "@lume/ui";
 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";
-import { Toaster } from "sonner";
-
-type EditorElement = {
-	type: string;
-	children: Descendant[];
-	eventId?: string;
-};
+import type { OsType } from "@tauri-apps/plugin-os";

 interface RouterContext {
-	// System
-	ark: Ark;
 	queryClient: QueryClient;
-	// App info
-	platform?: Platform;
-	locale?: string;
-	// Settings
-	settings?: Settings;
-	interests?: Interests;
-	// Profile
-	accounts?: string[];
-	profile?: Metadata;
-	isNewUser?: boolean;
-	// Editor
-	initialValue?: EditorElement[];
+	platform: OsType;
 }

 export const Route = createRootRouteWithContext<RouterContext>()({
-	component: () => (
-		<>
-			<Toaster
-				position="bottom-right"
-				icons={{
-					success: <CheckCircleIcon className="size-5" />,
-					info: <InfoCircleIcon className="size-5" />,
-					error: <CancelCircleIcon className="size-5" />,
-				}}
-				closeButton
-				theme="system"
-			/>
-			<Outlet />
-		</>
-	),
+	component: () => <Outlet />,
 	pendingComponent: Pending,
 	wrapInSuspense: true,
 });

 function Pending() {
 	return (
-		<div className="flex h-screen w-screen flex-col items-center justify-center">
+		<div className="flex flex-col items-center justify-center w-screen h-screen">
 			<Spinner className="size-5" />
 		</div>
 	);
--- a/apps/desktop2/src/routes/activity.$account.texts.tsx
+++ b/apps/desktop2/src/routes/activity.$account.texts.tsx
@@ -1,61 +0,0 @@
-import { Spinner } from "@lume/ui";
-import { Note } from "@/components/note";
-import { Await, createFileRoute, defer } from "@tanstack/react-router";
-import { Suspense } from "react";
-import { Virtualizer } from "virtua";
-
-export const Route = createFileRoute("/activity/$account/texts")({
-	loader: async ({ context, params }) => {
-		const ark = context.ark;
-		return { data: defer(ark.get_activities(params.account, "1")) };
-	},
-	component: Screen,
-});
-
-function Screen() {
-	const { data } = Route.useLoaderData();
-
-	return (
-		<Virtualizer overscan={3}>
-			<Suspense
-				fallback={
-					<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-						<button
-							type="button"
-							className="inline-flex items-center gap-2 text-sm font-medium"
-							disabled
-						>
-							<Spinner className="size-5" />
-							Loading...
-						</button>
-					</div>
-				}
-			>
-				<Await promise={data}>
-					{(events) =>
-						events.map((event) => (
-							<div
-								key={event.id}
-								className="flex flex-col gap-2 mb-3 bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50"
-							>
-								<Note.Provider event={event}>
-									<Note.Root>
-										<div className="px-3 h-14 flex items-center justify-between">
-											<Note.User />
-											<Note.Menu />
-										</div>
-										<Note.Activity className="px-3" />
-										<Note.Content className="px-3" quote={false} clean />
-										<div className="mt-3 flex items-center gap-4 h-14 px-3">
-											<Note.Open />
-										</div>
-									</Note.Root>
-								</Note.Provider>
-							</div>
-						))
-					}
-				</Await>
-			</Suspense>
-		</Virtualizer>
-	);
-}
--- a/apps/desktop2/src/routes/activity.$account.tsx
+++ b/apps/desktop2/src/routes/activity.$account.tsx
@@ -1,50 +0,0 @@
-import { Box, Container } from "@lume/ui";
-import { cn } from "@lume/utils";
-import { Link, Outlet } from "@tanstack/react-router";
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/activity/$account")({
-	component: Screen,
-});
-
-function Screen() {
-	const { account } = Route.useParams();
-
-	return (
-		<Container withDrag withNavigate={false}>
-			<Box className="scrollbar-none shadow-none bg-black/5 dark:bg-white/5 backdrop-blur-sm flex flex-col overflow-y-auto">
-				<div className="h-14 shrink-0 flex w-full items-center gap-1 px-3">
-					<div className="inline-flex h-full w-full items-center gap-1">
-						<Link to="/activity/$account/texts" params={{ account }}>
-							{({ 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 ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-									)}
-								>
-									Notes
-								</div>
-							)}
-						</Link>
-						<Link to="/activity/$account/zaps" params={{ account }}>
-							{({ 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 ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-									)}
-								>
-									Zaps
-								</div>
-							)}
-						</Link>
-					</div>
-				</div>
-				<div className="px-2 flex-1 overflow-y-auto w-full h-full scrollbar-none">
-					<Outlet />
-				</div>
-			</Box>
-		</Container>
-	);
-}
--- a/apps/desktop2/src/routes/activity.$account.zaps.tsx
+++ b/apps/desktop2/src/routes/activity.$account.zaps.tsx
@@ -1,65 +0,0 @@
-import { User } from "@/components/user";
-import { Spinner } from "@lume/ui";
-import { decodeZapInvoice } from "@lume/utils";
-import { Await, createFileRoute, defer } from "@tanstack/react-router";
-import { Suspense } from "react";
-import { Virtualizer } from "virtua";
-
-export const Route = createFileRoute("/activity/$account/zaps")({
-	loader: async ({ context, params }) => {
-		const ark = context.ark;
-		return { data: defer(ark.get_activities(params.account, "9735")) };
-	},
-	component: Screen,
-});
-
-function Screen() {
-	const { data } = Route.useLoaderData();
-
-	return (
-		<Virtualizer overscan={3}>
-			<Suspense
-				fallback={
-					<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-						<button
-							type="button"
-							className="inline-flex items-center gap-2 text-sm font-medium"
-							disabled
-						>
-							<Spinner className="size-5" />
-							Loading...
-						</button>
-					</div>
-				}
-			>
-				<Await promise={data}>
-					{(events) =>
-						events.map((event) => (
-							<div
-								key={event.id}
-								className="flex flex-col gap-2 mb-3 bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50"
-							>
-								<User.Provider pubkey={event.pubkey}>
-									<User.Root className="flex flex-col">
-										<div className="text-lg h-20 font-medium leading-tight flex w-full items-center justify-center">
-											₿ {decodeZapInvoice(event.tags).bitcoinFormatted}
-										</div>
-										<div className="h-11 border-t border-neutral-100 dark:border-neutral-900 flex items-center gap-1 px-2">
-											<div className="inline-flex items-center gap-2">
-												<User.Avatar className="size-7 rounded-full shrink-0" />
-												<User.Name className="text-sm font-medium" />
-											</div>
-											<div className="text-sm text-neutral-700 dark:text-neutral-300">
-												zapped you
-											</div>
-										</div>
-									</User.Root>
-								</User.Provider>
-							</div>
-						))
-					}
-				</Await>
-			</Suspense>
-		</Virtualizer>
-	);
-}
--- a/apps/desktop2/src/routes/auth/$account.backup.tsx
+++ b/apps/desktop2/src/routes/auth/$account.backup.tsx
@@ -1,47 +1,38 @@
 import { CheckIcon } from "@lume/icons";
-import type { AppRouteSearch } from "@lume/types";
 import { Spinner } from "@lume/ui";
 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 { message } from "@tauri-apps/plugin-dialog";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";

-export const Route = createFileRoute("/auth/new/backup")({
-	validateSearch: (search: Record<string, string>): AppRouteSearch => {
-		return {
-			account: search.account,
-		};
-	},
+export const Route = createFileRoute("/auth/$account/backup")({
 	component: Screen,
 });

 function Screen() {
-	const { account } = Route.useSearch();
-	const { t } = useTranslation();
+	const { account } = Route.useParams();
+	const navigate = useNavigate();

 	const [key, setKey] = useState(null);
 	const [passphase, setPassphase] = useState("");
 	const [copied, setCopied] = useState(false);
 	const [loading, setLoading] = useState(false);
-	const [confirm, setConfirm] = useState({ c1: false, c2: false, c3: false });
-
-	const navigate = useNavigate();
+	const [confirm, setConfirm] = useState({ c1: false, c2: false });

 	const submit = async () => {
 		try {
 			if (key) {
-				if (!confirm.c1 || !confirm.c2 || !confirm.c3) {
-					return toast.warning("You need to confirm before continue");
+				if (!confirm.c1 || !confirm.c2) {
+					return await message("You need to confirm before continue", {
+						title: "Backup",
+						kind: "info",
+					});
 				}

-				return navigate({
-					to: "/auth/settings",
-					search: { account },
-				});
+				navigate({ to: "/", replace: true });
 			}

 			// start loading
@@ -57,7 +48,10 @@ function Screen() {
 			});
 		} catch (e) {
 			setLoading(false);
-			toast.error(String(e));
+			await message(String(e), {
+				title: "Backup",
+				kind: "error",
+			});
 		}
 	};

@@ -66,12 +60,15 @@ function Screen() {
 			await writeText(key);
 			setCopied(true);
 		} catch (e) {
-			toast.error(e);
+			await message(String(e), {
+				title: "Backup",
+				kind: "error",
+			});
 		}
 	};

 	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 justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
 			<div className="flex flex-col text-center">
 				<h3 className="text-xl font-semibold">Backup your sign in keys</h3>
 				<p className="text-neutral-700 dark:text-neutral-300">
@@ -79,7 +76,7 @@ function Screen() {
 					access to your account if you lose this key.
 				</p>
 			</div>
-			<div className="flex w-full flex-col gap-5">
+			<div className="flex flex-col w-full gap-5">
 				<div className="flex flex-col gap-2">
 					<label htmlFor="passphase" className="font-medium">
 						Set a passphase to secure your key
@@ -90,7 +87,7 @@ function Screen() {
 							type="password"
 							value={passphase}
 							onChange={(e) => setPassphase(e.target.value)}
-							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"
+							className="w-full px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 						/>
 					</div>
 				</div>
@@ -106,12 +103,12 @@ function Screen() {
 									type="text"
 									value={displayNsec(key, 36)}
 									readOnly
-									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"
+									className="w-full px-3 border-transparent rounded-lg h-11 bg-neutral-100 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()}
-									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"
+									className="inline-flex items-center justify-center w-24 rounded-lg h-11 bg-neutral-200 hover:bg-neutral-300 dark:bg-white/20 dark:hover:bg-white/30"
 								>
 									{copied ? "Copied" : "Copy"}
 								</button>
@@ -126,7 +123,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-white/10 dark:hover:bg-white/20"
+										className="flex items-center justify-center rounded-md outline-none appearance-none size-6 bg-neutral-100 dark:bg-white/10 dark:hover:bg-white/20"
 										id="confirm1"
 									>
 										<Checkbox.Indicator className="text-blue-500">
@@ -137,7 +134,7 @@ function Screen() {
 										className="text-sm leading-none text-neutral-800 dark:text-neutral-200"
 										htmlFor="confirm1"
 									>
-										{t("backup.confirm1")}
+										I will make sure keep it safe and not sharing with anyone.
 									</label>
 								</div>
 								<div className="flex items-center gap-2">
@@ -146,7 +143,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-white/10 dark:hover:bg-white/20"
+										className="flex items-center justify-center rounded-md outline-none appearance-none size-6 bg-neutral-100 dark:bg-white/10 dark:hover:bg-white/20"
 										id="confirm2"
 									>
 										<Checkbox.Indicator className="text-blue-500">
@@ -157,27 +154,7 @@ function Screen() {
 										className="text-sm leading-none text-neutral-800 dark:text-neutral-200"
 										htmlFor="confirm2"
 									>
-										{t("backup.confirm2")}
-									</label>
-								</div>
-								<div className="flex items-center gap-2">
-									<Checkbox.Root
-										checked={confirm.c3}
-										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-white/10 dark:hover:bg-white/20"
-										id="confirm3"
-									>
-										<Checkbox.Indicator className="text-blue-500">
-											<CheckIcon className="size-4" />
-										</Checkbox.Indicator>
-									</Checkbox.Root>
-									<label
-										className="text-sm leading-none text-neutral-800 dark:text-neutral-200"
-										htmlFor="confirm3"
-									>
-										{t("backup.confirm3")}
+										I understand I cannot recover private key.
 									</label>
 								</div>
 							</div>
@@ -189,9 +166,9 @@ function Screen() {
 						type="button"
 						onClick={() => submit()}
 						disabled={loading}
-						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"
+						className="inline-flex items-center justify-center w-full font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
 					>
-						{loading ? <Spinner /> : t("global.continue")}
+						{loading ? <Spinner /> : "Continue"}
 					</button>
 				</div>
 			</div>
--- a/apps/desktop2/src/routes/auth/create-profile.tsx
+++ b/apps/desktop2/src/routes/auth/create-profile.tsx
@@ -1,26 +1,24 @@
 import { AvatarUploader } from "@/components/avatarUploader";
 import { PlusIcon } from "@lume/icons";
+import { NostrAccount } from "@lume/system";
 import type { Metadata } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";

-export const Route = createFileRoute("/auth/new/profile")({
-	component: Screen,
-	loader: ({ context }) => {
-		return context.ark.create_keys();
+export const Route = createFileRoute("/auth/create-profile")({
+	loader: async () => {
+		const account = await NostrAccount.createAccount();
+		return account;
 	},
+	component: Screen,
 });

 function Screen() {
-	const keys = Route.useLoaderData();
+	const account = Route.useLoaderData();
 	const navigate = useNavigate();
-
-	const { t } = useTranslation();
-	const { ark } = Route.useRouteContext();
 	const { register, handleSubmit } = useForm();

 	const [picture, setPicture] = useState<string>("");
@@ -35,46 +33,46 @@ function Screen() {

 		try {
 			// Save account keys
-			const save = await ark.save_account(keys.nsec);
+			const save = await NostrAccount.saveAccount(account.nsec);

 			// Then create profile
 			if (save) {
 				const profile: Metadata = { ...data, picture };
-				const eventId = await ark.create_profile(profile);
+				const eventId = await NostrAccount.createProfile(profile);

 				if (eventId) {
 					navigate({
-						to: "/auth/new/backup",
-						search: { account: keys.npub },
+						to: "/auth/$account/backup",
+						params: { account: account.npub },
 						replace: true,
 					});
 				}
 			}
 		} catch (e) {
 			setLoading(false);
-			toast.error(String(e));
+			await message(String(e), { title: "Create Profile", kind: "error" });
 		}
 	};

 	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 justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
 			<div className="text-center">
 				<h3 className="text-xl font-semibold">Let's set up your profile.</h3>
 			</div>
 			<div>
-				<div className="relative size-24 rounded-full bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
+				<div className="relative rounded-full size-24 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
 					{picture ? (
 						<img
 							src={picture}
 							alt="avatar"
 							loading="lazy"
 							decoding="async"
-							className="absolute inset-0 z-10 h-full w-full rounded-full object-cover"
+							className="absolute inset-0 z-10 object-cover w-full h-full rounded-full"
 						/>
 					) : null}
 					<AvatarUploader
 						setPicture={setPicture}
-						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"
+						className="absolute inset-0 z-20 flex items-center justify-center w-full h-full text-white rounded-full dark:text-black bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
 					>
 						<PlusIcon className="size-8" />
 					</AvatarUploader>
@@ -82,35 +80,35 @@ function Screen() {
 			</div>
 			<form
 				onSubmit={handleSubmit(onSubmit)}
-				className="flex w-full flex-col gap-3"
+				className="flex flex-col w-full gap-3"
 			>
 				<div className="flex flex-col gap-1">
 					<label htmlFor="display_name" className="font-medium">
-						{t("user.displayName")} *
+						Display Name *
 					</label>
 					<input
 						type={"text"}
 						{...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-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 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">
 					<label htmlFor="name" className="font-medium">
-						{t("user.name")}
+						Name
 					</label>
 					<input
 						type={"text"}
 						{...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-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 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">
 					<label htmlFor="about" className="font-medium">
-						{t("user.bio")}
+						Bio
 					</label>
 					<textarea
 						{...register("about")}
@@ -121,21 +119,21 @@ function Screen() {
 				</div>
 				<div className="flex flex-col gap-1">
 					<label htmlFor="website" className="font-medium">
-						{t("user.website")}
+						Website
 					</label>
 					<input
 						type="url"
 						{...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-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-500 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 					/>
 				</div>
 				<button
 					type="submit"
-					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"
+					className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
 				>
-					{loading ? <Spinner /> : t("global.continue")}
+					{loading ? <Spinner /> : "Continue"}
 				</button>
 			</form>
 		</div>
--- a/apps/desktop2/src/routes/auth/privkey.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/privkey.lazy.tsx
@@ -1,14 +1,14 @@
+import { NostrAccount } from "@lume/system";
 import { Spinner } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
 import { useState } from "react";
-import { toast } from "sonner";

-export const Route = createLazyFileRoute("/auth/privkey")({
+export const Route = createLazyFileRoute("/auth/import")({
 	component: Screen,
 });

 function Screen() {
-	const { ark } = Route.useRouteContext();
 	const navigate = Route.useNavigate();

 	const [key, setKey] = useState("");
@@ -16,35 +16,33 @@ function Screen() {
 	const [loading, setLoading] = useState(false);

 	const submit = async () => {
-		if (!key.startsWith("nsec1"))
-			return toast.warning(
+		if (!key.startsWith("nsec1")) {
+			return await message(
 				"You need to enter a valid private key starts with nsec or ncryptsec",
+				{ title: "Import Key", kind: "info" },
 			);
+		}

 		try {
 			setLoading(true);

-			const npub = await ark.save_account(key, password);
+			const npub = await NostrAccount.saveAccount(key, password);

 			if (npub) {
-				navigate({
-					to: "/auth/settings",
-					search: { account: npub },
-					replace: true,
-				});
+				navigate({ to: "/", replace: true });
 			}
 		} catch (e) {
 			setLoading(false);
-			toast.error(e);
+			await message(String(e), { title: "Import Key", kind: "error" });
 		}
 	};

 	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 justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
 			<div className="text-center">
 				<h3 className="text-xl font-semibold">Continue with Private Key</h3>
 			</div>
-			<div className="flex w-full flex-col gap-3">
+			<div className="flex flex-col w-full gap-3">
 				<div className="flex flex-col gap-1">
 					<label
 						htmlFor="key"
@@ -58,7 +56,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-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 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,14 +71,14 @@ 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-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 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()}
 					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"
+					className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
 				>
 					{loading ? <Spinner /> : "Login"}
 				</button>
--- a/apps/desktop2/src/routes/auth/remote.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/remote.lazy.tsx
@@ -1,49 +1,47 @@
+import { NostrAccount } from "@lume/system";
 import { Spinner } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
 import { useState } from "react";
-import { toast } from "sonner";

 export const Route = createLazyFileRoute("/auth/remote")({
 	component: Screen,
 });

 function Screen() {
-	const { ark } = Route.useRouteContext();
 	const navigate = Route.useNavigate();

 	const [uri, setUri] = useState("");
 	const [loading, setLoading] = useState(false);

 	const submit = async () => {
-		if (!uri.startsWith("bunker://"))
-			return toast.warning(
+		if (!uri.startsWith("bunker://")) {
+			return await message(
 				"You need to enter a valid Connect URI starts with bunker://",
+				{ title: "Nostr Connect", kind: "info" },
 			);
+		}

 		try {
 			setLoading(true);

-			const npub = await ark.nostr_connect(uri);
+			const remoteAccount = await NostrAccount.connectRemoteAccount(uri);

-			if (npub) {
-				navigate({
-					to: "/auth/settings",
-					search: { account: npub },
-					replace: true,
-				});
+			if (remoteAccount?.length) {
+				navigate({ to: "/", replace: true });
 			}
 		} catch (e) {
 			setLoading(false);
-			toast.error(e);
+			await message(String(e), { title: "Nostr Connect", kind: "error" });
 		}
 	};

 	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 justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
 			<div className="text-center">
 				<h3 className="text-xl font-semibold">Continue with Nostr Connect</h3>
 			</div>
-			<div className="flex w-full flex-col gap-3">
+			<div className="flex flex-col w-full gap-3">
 				<div className="flex flex-col gap-1">
 					<label
 						htmlFor="uri"
@@ -57,17 +55,24 @@ 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-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 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()}
-					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"
-				>
-					{loading ? <Spinner /> : "Login"}
-				</button>
+				<div className="flex flex-col items-center gap-1">
+					<button
+						type="button"
+						onClick={() => submit()}
+						disabled={loading}
+						className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
+					>
+						{loading ? <Spinner /> : "Login"}
+					</button>
+					{loading ? (
+						<p className="text-sm text-center text-neutral-600 dark:text-neutral-400">
+							Waiting confirmation...
+						</p>
+					) : null}
+				</div>
 			</div>
 		</div>
 	);
--- a/apps/desktop2/src/routes/auth/settings.tsx
+++ b/apps/desktop2/src/routes/auth/settings.tsx
@@ -1,218 +0,0 @@
-import { LaurelIcon } from "@lume/icons";
-import type { AppRouteSearch, Settings } from "@lume/types";
-import { Spinner } from "@lume/ui";
-import * as Switch from "@radix-ui/react-switch";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import {
-	isPermissionGranted,
-	requestPermission,
-} from "@tauri-apps/plugin-notification";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-export const Route = createFileRoute("/auth/settings")({
-	validateSearch: (search: Record<string, string>): AppRouteSearch => {
-		return {
-			account: search.account,
-		};
-	},
-	beforeLoad: async ({ context }) => {
-		const permissionGranted = await isPermissionGranted(); // get notification permission
-		const ark = context.ark;
-		const settings = await ark.get_settings();
-
-		return {
-			settings: { ...settings, notification: permissionGranted },
-		};
-	},
-	component: Screen,
-	pendingComponent: Pending,
-});
-
-function Screen() {
-	const navigate = useNavigate();
-
-	const { account } = Route.useSearch();
-	const { t } = useTranslation();
-	const { ark, settings } = Route.useRouteContext();
-
-	const [newSettings, setNewSettings] = useState<Settings>(settings);
-	const [loading, setLoading] = useState(false);
-
-	const toggleNofitication = async () => {
-		await requestPermission();
-		setNewSettings((prev) => ({
-			...prev,
-			notification: !newSettings.notification,
-		}));
-	};
-
-	const toggleAutoUpdate = () => {
-		setNewSettings((prev) => ({
-			...prev,
-			autoUpdate: !newSettings.autoUpdate,
-		}));
-	};
-
-	const toggleEnhancedPrivacy = () => {
-		setNewSettings((prev) => ({
-			...prev,
-			enhancedPrivacy: !newSettings.enhancedPrivacy,
-		}));
-	};
-
-	const toggleZap = () => {
-		setNewSettings((prev) => ({
-			...prev,
-			zap: !newSettings.zap,
-		}));
-	};
-
-	const toggleNsfw = () => {
-		setNewSettings((prev) => ({
-			...prev,
-			nsfw: !newSettings.nsfw,
-		}));
-	};
-
-	const submit = async () => {
-		try {
-			// start loading
-			setLoading(true);
-
-			// publish settings
-			const eventId = await ark.set_settings(newSettings);
-
-			if (eventId) {
-				return navigate({
-					to: "/$account/home",
-					params: { account },
-					replace: true,
-				});
-			}
-		} catch (e) {
-			setLoading(false);
-			toast.error(e);
-		}
-	};
-
-	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 dark:bg-teal-950 text-teal-500">
-					<LaurelIcon className="size-8" />
-				</div>
-				<div>
-					<h1 className="text-xl font-semibold">
-						{t("onboardingSettings.title")}
-					</h1>
-					<p className="leading-snug text-neutral-600 dark:text-neutral-400">
-						{t("onboardingSettings.subtitle")}
-					</p>
-				</div>
-			</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-white/10">
-						<div className="flex-1">
-							<h3 className="font-semibold">Push Notification</h3>
-							<p className="text-sm text-neutral-700 dark:text-neutral-300">
-								Enabling push notifications will allow you to receive
-								notifications from Lume.
-							</p>
-						</div>
-						<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-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">
-								Lume will display external resources like image, video or link
-								preview as plain text.
-							</p>
-						</div>
-						<Switch.Root
-							checked={newSettings.enhancedPrivacy}
-							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-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>
-						<Switch.Root
-							checked={newSettings.autoUpdate}
-							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-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">
-								Show the Zap button in each note and user's profile screen, use
-								for send Bitcoin tip to other users.
-							</p>
-						</div>
-						<Switch.Root
-							checked={newSettings.zap}
-							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-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">
-								By default, Lume will display all content which have Content
-								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()}
-					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"
-				>
-					{t("global.continue")}
-				</button>
-			</div>
-		</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>
-	);
-}
--- a/apps/desktop2/src/routes/bootstrap-relays.tsx
+++ b/apps/desktop2/src/routes/bootstrap-relays.tsx
@@ -0,0 +1,150 @@
+import { CancelIcon, PlusIcon } from "@lume/icons";
+import { NostrQuery } from "@lume/system";
+import type { Relay } from "@lume/types";
+import { Spinner } from "@lume/ui";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+export const Route = createFileRoute("/bootstrap-relays")({
+	loader: async () => {
+		const bootstrapRelays = await NostrQuery.getBootstrapRelays();
+		return bootstrapRelays;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const bootstrapRelays = Route.useLoaderData();
+	const { register, reset, handleSubmit } = useForm();
+
+	const [relays, setRelays] = useState<Relay[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const removeRelay = (url: string) => {
+		setRelays((prev) => prev.filter((relay) => relay.url !== url));
+	};
+
+	const onSubmit = async (data: { url: string; purpose: string }) => {
+		try {
+			if (!data.url.startsWith("wss://") || !data.url.startsWith("ws://")) {
+				return await message("Relay must be starts with wss:// or ws://", {
+					title: "Bootstrap Relays",
+					kind: "info",
+				});
+			}
+
+			const relay: Relay = { url: data.url, purpose: data.purpose };
+			setRelays((prev) => [...prev, relay]);
+			reset();
+		} catch (e) {
+			await message(String(e), { title: "Bootstrap Relays", kind: "error" });
+		}
+	};
+
+	const save = async () => {
+		try {
+			setIsLoading(true);
+			await NostrQuery.saveBootstrapRelays(relays);
+		} catch (e) {
+			await message(String(e), { title: "Bootstrap Relays", kind: "error" });
+		}
+	};
+
+	useEffect(() => {
+		setRelays(bootstrapRelays);
+	}, [bootstrapRelays]);
+
+	return (
+		<div
+			data-tauri-drag-region
+			className="relative flex flex-col items-center justify-between w-full h-full"
+		>
+			<div
+				data-tauri-drag-region
+				className="absolute top-0 left-0 h-14 w-full"
+			/>
+			<div className="flex items-end justify-center flex-1 w-full px-4 pb-10">
+				<div className="text-center">
+					<h2 className="text-2xl font-semibold">Customize Bootstrap Relays</h2>
+				</div>
+			</div>
+			<div className="flex flex-col items-center flex-1 w-full">
+				<div className="flex flex-col w-full max-w-sm mx-auto p-3 overflow-hidden bg-white divide-y divide-neutral-100 dark:divide-white/5 rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					{relays.map((relay) => (
+						<div
+							key={relay.url}
+							className="flex items-center justify-between h-11"
+						>
+							<div className="inline-flex items-center gap-2 text-sm font-medium">
+								{relay.url}
+							</div>
+							<div className="flex items-center gap-2">
+								{relay.purpose?.length ? (
+									<button
+										type="button"
+										className="inline-flex items-center justify-center px-2 text-xs font-medium uppercase rounded-md h-7 w-max hover:bg-black/10 dark:hover:bg-white/10"
+									>
+										{relay.purpose}
+									</button>
+								) : null}
+								<button
+									type="button"
+									onClick={() => removeRelay(relay.url)}
+									className="inline-flex items-center justify-center rounded-md size-7 text-neutral-700 dark:text-white/20 hover:bg-black/10 dark:hover:bg-white/10"
+								>
+									<CancelIcon className="size-3" />
+								</button>
+							</div>
+						</div>
+					))}
+					<div className="flex items-center border-t h-14 border-neutral-100 dark:border-white/5">
+						<form
+							onSubmit={handleSubmit(onSubmit)}
+							className="flex items-center w-full gap-2 mb-0"
+						>
+							<div className="flex items-center flex-1 gap-2 border rounded-lg border-neutral-300 dark:border-white/20">
+								<input
+									{...register("url", {
+										required: true,
+										minLength: 1,
+									})}
+									name="url"
+									placeholder="wss://..."
+									spellCheck={false}
+									className="flex-1 px-3 bg-transparent border-none rounded-l-lg h-9 placeholder:text-neutral-500 dark:placeholder:text-neutral-400"
+								/>
+								<select
+									{...register("purpose")}
+									className="flex-1 p-0 m-0 text-sm bg-transparent border-none outline-none h-9 ring-0 focus:outline-none focus:ring-0"
+								>
+									<option value="read">Read</option>
+									<option value="write">Write</option>
+									<option value="">Both</option>
+								</select>
+							</div>
+							<button
+								type="submit"
+								className="inline-flex items-center justify-center px-2 text-sm font-medium text-white rounded-lg shrink-0 h-9 w-14 bg-black/20 dark:bg-white/20 hover:bg-blue-500 disabled:opacity-50"
+							>
+								<PlusIcon className="size-7" />
+							</button>
+						</form>
+					</div>
+				</div>
+				<div className="w-full max-w-sm mx-auto">
+					<button
+						type="button"
+						onClick={() => save()}
+						disabled={isLoading}
+						className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
+					>
+						{isLoading ? <Spinner /> : "Save & Relaunch"}
+					</button>
+				</div>
+			</div>
+			<div className="flex-1" />
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/create-group.tsx
+++ b/apps/desktop2/src/routes/create-group.tsx
@@ -1,10 +1,11 @@
-import { CheckCircleIcon } from "@lume/icons";
+import { User } from "@/components/user";
+import { CancelIcon, PlusIcon } from "@lume/icons";
+import { NostrAccount, NostrQuery } from "@lume/system";
 import type { ColumnRouteSearch } from "@lume/types";
 import { Spinner } from "@lume/ui";
-import { User } from "@/components/user";
-import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
 import { useState } from "react";
-import { toast } from "sonner";

 export const Route = createFileRoute("/create-group")({
 	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
@@ -14,113 +15,183 @@ export const Route = createFileRoute("/create-group")({
 			name: search.name,
 		};
 	},
-	loader: async ({ context }) => {
-		const ark = context.ark;
-		const contacts = await ark.get_contact_list();
+	loader: async () => {
+		const contacts = await NostrAccount.getContactList();
 		return contacts;
 	},
 	component: Screen,
 });

 function Screen() {
+	const [title, setTitle] = useState("");
+	const [npub, setNpub] = useState("");
+	const [users, setUsers] = useState<string[]>([
+		"npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445", // reya
+	]);
+	const [isLoading, setIsLoading] = useState(false);
+
 	const contacts = Route.useLoaderData();
-	const router = useRouter();
-
-	const { ark } = Route.useRouteContext();
-	const { label, redirect } = Route.useSearch();
-
-	const [title, setTitle] = useState<string>("Just a new group");
-	const [users, setUsers] = useState<Array<string>>([]);
-	const [loading, setLoading] = useState(false);
-	const [isDone, setIsDone] = useState(false);
+	const search = Route.useSearch();
+	const navigate = Route.useNavigate();

 	const toggleUser = (pubkey: string) => {
-		const arr = users.includes(pubkey)
-			? users.filter((i) => i !== pubkey)
-			: [...users, pubkey];
-		setUsers(arr);
+		setUsers((prev) =>
+			prev.includes(pubkey)
+				? prev.filter((i) => i !== pubkey)
+				: [...prev, pubkey],
+		);
+	};
+
+	const addUser = () => {
+		if (!npub.startsWith("npub1")) return;
+		if (users.includes(npub)) return;
+
+		setUsers((prev) => [...prev, npub]);
+		setNpub("");
 	};

 	const submit = async () => {
 		try {
-			if (isDone) return router.history.push(redirect);
+			setIsLoading(true);

-			// start loading
-			setLoading(true);
-
-			const groups = await ark.set_nstore(
-				`lume_group_${label}`,
+			const key = `lume_group_${search.label}`;
+			const createGroup = await NostrQuery.setNstore(
+				key,
 				JSON.stringify(users),
 			);

-			if (groups) {
-				toast.success("Group has been created successfully.");
-				// start loading
-				setIsDone(true);
-				setLoading(false);
+			if (createGroup) {
+				return navigate({ to: search.redirect, search: { ...search } });
 			}
 		} catch (e) {
-			setLoading(false);
-			toast.error(e);
+			setIsLoading(false);
+			await message(String(e), { title: "Create Group", kind: "error" });
 		}
 	};

 	return (
-		<div className="h-full overflow-y-auto scrollbar-none">
-			<div className="flex flex-col gap-5 p-3">
-				<div className="flex flex-col gap-1">
-					<label htmlFor="name" className="font-medium">
+		<div className="flex flex-col items-center justify-center w-full h-full gap-4">
+			<div className="flex flex-col items-center justify-center text-center">
+				<h1 className="font-serif text-2xl font-medium">
+					Focus feeds for people you like
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Add some people for custom feeds.
+				</p>
+			</div>
+			<div className="flex flex-col w-4/5 max-w-full gap-3">
+				<div className="flex items-center w-full rounded-lg h-9 shrink-0 bg-black/5 dark:bg-white/5">
+					<label
+						htmlFor="name"
+						className="w-16 text-sm font-semibold text-center border-r border-black/10 dark:border-white/10 shrink-0"
+					>
 						Name
 					</label>
 					<input
 						name="name"
 						value={title}
 						onChange={(e) => setTitle(e.target.value)}
-						placeholder="Nostrichs..."
-						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"
+						placeholder="Enter a name for this group"
+						className="h-full px-3 text-sm bg-transparent border-none 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-neutral-600 dark:text-neutral-400">{`${users.length} / ∞`}</span>
-					</div>
-					<div className="flex flex-col gap-2">
-						{contacts.map((item: string) => (
+				<div className="flex flex-col items-center w-full gap-3">
+					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] flex flex-col gap-3 bg-black/5 dark:bg-white/5 rounded-xl">
+						<div className="flex gap-2">
+							<input
+								name="npub"
+								value={npub}
+								onChange={(e) => setNpub(e.target.value)}
+								placeholder="npub1..."
+								className="w-full px-3 text-sm border-none rounded-lg h-9 bg-black/10 dark:bg-white/10 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
+							/>
 							<button
-								key={item}
 								type="button"
-								onClick={() => toggleUser(item)}
-								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"
+								onClick={() => addUser()}
+								className="inline-flex items-center justify-center text-white rounded-lg size-9 bg-black/20 dark:bg-white/20 shrink-0 hover:bg-blue-500"
 							>
-								<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 items-center gap-1">
-											<User.Name className="font-medium" />
-											<User.NIP05 />
-										</div>
-									</User.Root>
-								</User.Provider>
-								{users.includes(item) ? (
-									<CheckCircleIcon className="size-5 text-teal-500" />
-								) : null}
+								<PlusIcon className="size-6" />
 							</button>
-						))}
+						</div>
+						<div className="flex flex-col gap-2">
+							<span className="text-sm font-semibold">Added</span>
+							<div className="flex flex-col gap-2">
+								{users.length ? (
+									users.map((item: string) => (
+										<button
+											key={item}
+											type="button"
+											onClick={() => toggleUser(item)}
+											className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
+										>
+											<User.Provider pubkey={item}>
+												<User.Root className="flex items-center gap-2.5">
+													<User.Avatar className="rounded-full size-8" />
+													<div className="flex items-center gap-1">
+														<User.Name className="text-sm font-medium" />
+													</div>
+												</User.Root>
+											</User.Provider>
+											<div>
+												<CancelIcon className="size-4" />
+											</div>
+										</button>
+									))
+								) : (
+									<div className="flex items-center justify-center text-sm rounded-lg bg-black/5 dark:bg-white/5 h-14">
+										Empty.
+									</div>
+								)}
+							</div>
+						</div>
+						<div className="flex flex-col gap-2">
+							<span className="text-sm font-semibold">Contacts</span>
+							<div className="flex flex-col gap-2">
+								{contacts.length ? (
+									contacts.map((item: string) => (
+										<button
+											key={item}
+											type="button"
+											onClick={() => toggleUser(item)}
+											className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
+										>
+											<User.Provider pubkey={item}>
+												<User.Root className="flex items-center gap-2.5">
+													<User.Avatar className="rounded-full size-8" />
+													<div className="flex items-center gap-1">
+														<User.Name className="text-sm font-medium" />
+													</div>
+												</User.Root>
+											</User.Provider>
+										</button>
+									))
+								) : (
+									<div className="flex items-center justify-center text-sm rounded-lg bg-black/5 dark:bg-white/5 h-14">
+										<p>
+											Find more user at{" "}
+											<a
+												href="https://www.nostr.directory/"
+												target="_blank"
+												className="text-blue-600 after:content-['_↗']"
+												rel="noreferrer"
+											>
+												Nostr Directory
+											</a>
+										</p>
+									</div>
+								)}
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div className="fixed z-10 flex items-center justify-center w-full bottom-6">
-				{users.length >= 1 ? (
 					<button
 						type="button"
 						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-32 h-10 hover:bg-blue-600 focus:outline-none"
+						disabled={isLoading || users.length < 1}
+						className="inline-flex items-center justify-center text-sm font-medium text-white bg-blue-500 rounded-full w-36 h-9 hover:bg-blue-600 disabled:opacity-50"
 					>
-						{isDone ? "Back" : loading ? <Spinner /> : "Update"}
+						{isLoading ? <Spinner /> : "Confirm"}
 					</button>
-				) : null}
+				</div>
 			</div>
 		</div>
 	);
--- a/apps/desktop2/src/routes/create-newsfeed.f2f.tsx
+++ b/apps/desktop2/src/routes/create-newsfeed.f2f.tsx
@@ -0,0 +1,93 @@
+import { NostrAccount } from "@lume/system";
+import type { ColumnRouteSearch } from "@lume/types";
+import { Spinner } from "@lume/ui";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+
+export const Route = createFileRoute("/create-newsfeed/f2f")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+	const { redirect } = Route.useSearch();
+
+	const [npub, setNpub] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const submit = async () => {
+		if (!npub.startsWith("npub1")) {
+			return await message("You must enter a valid npub.", {
+				title: "Create Newsfeed",
+				kind: "info",
+			});
+		}
+
+		try {
+			setIsLoading(true);
+
+			const sync = await NostrAccount.f2f(npub);
+
+			if (sync) {
+				return navigate({ to: redirect });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), {
+				title: "Create Newsfeed",
+				kind: "error",
+			});
+		}
+	};
+
+	return (
+		<div className="overflow-y-auto scrollbar-none p-2 shrink-0 h-[450px] bg-white dark:bg-white/20 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+			<div className="flex flex-col justify-between h-full">
+				<div className="flex-1 flex flex-col gap-1.5 justify-center px-5">
+					<p className="font-semibold text-neutral-500">
+						You already have a friend on Nostr?
+					</p>
+					<p>Instead of building the timeline by yourself.</p>
+					<p className="font-semibold text-neutral-500">
+						Just enter your friend's{" "}
+						<span className="text-blue-500">npub.</span>
+					</p>
+					<p>
+						You will have the same experience as your friend. Of course, you
+						always can edit your network later.
+					</p>
+				</div>
+				<div className="flex flex-col gap-2">
+					<div className="flex flex-col gap-1">
+						<label htmlFor="npub" className="text-sm font-medium">
+							NPUB
+						</label>
+						<input
+							name="npub"
+							placeholder="npub1..."
+							value={npub}
+							onChange={(e) => setNpub(e.target.value)}
+							spellCheck={false}
+							className="px-3 bg-transparent border rounded-lg h-11 border-neutral-200 dark:border-neutral-800 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+					<button
+						type="button"
+						onClick={() => submit()}
+						className="inline-flex items-center justify-center w-full text-sm font-medium text-white bg-blue-500 rounded-lg h-9 hover:bg-blue-600"
+					>
+						{isLoading ? <Spinner /> : "Confirm"}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/create-newsfeed.tsx
+++ b/apps/desktop2/src/routes/create-newsfeed.tsx
@@ -0,0 +1,70 @@
+import type { ColumnRouteSearch } from "@lume/types";
+import { cn } from "@lume/utils";
+import { Link, Outlet } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/create-newsfeed")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const search = Route.useSearch();
+	return (
+		<div className="flex flex-col items-center justify-center w-full h-full gap-4">
+			<div className="flex flex-col items-center justify-center text-center">
+				<h1 className="font-serif text-2xl font-medium">
+					Build up your timeline.
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Follow some people to keep up to date with them.
+				</p>
+			</div>
+			<div className="flex flex-col w-4/5 max-w-full gap-3">
+				<div className="w-full h-9 shrink-0 flex items-center justify-between bg-black/5 dark:bg-white/5 rounded-lg px-0.5">
+					<Link
+						to="/create-newsfeed/users"
+						search={search}
+						className="flex-1 h-8"
+					>
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"text-sm font-medium rounded-md h-full flex items-center justify-center",
+									isActive
+										? "bg-white dark:bg-white/20 shadow"
+										: "bg-transparent",
+								)}
+							>
+								Users
+							</div>
+						)}
+					</Link>
+					<Link
+						to="/create-newsfeed/f2f"
+						search={search}
+						className="flex-1 h-8"
+					>
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"rounded-md h-full flex items-center justify-center",
+									isActive ? "bg-white dark:bg-white/20" : "bg-transparent",
+								)}
+							>
+								Friend to Friend
+							</div>
+						)}
+					</Link>
+				</div>
+				<Outlet />
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/create-newsfeed.users.tsx
+++ b/apps/desktop2/src/routes/create-newsfeed.users.tsx
@@ -0,0 +1,131 @@
+import { User } from "@/components/user";
+import { NostrAccount } from "@lume/system";
+import type { ColumnRouteSearch } from "@lume/types";
+import { Spinner } from "@lume/ui";
+import { createFileRoute } from "@tanstack/react-router";
+import { Await, defer } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { Suspense, useState } from "react";
+
+export const Route = createFileRoute("/create-newsfeed/users")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	loader: async ({ abortController }) => {
+		try {
+			return {
+				data: defer(
+					fetch("https://api.nostr.band/v0/trending/profiles", {
+						signal: abortController.signal,
+					}).then((res) => res.json()),
+				),
+			};
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { data } = Route.useLoaderData();
+	const { redirect } = Route.useSearch();
+
+	const [isLoading, setIsLoading] = useState(false);
+	const [follows, setFollows] = useState<string[]>([]);
+
+	const navigate = Route.useNavigate();
+
+	const toggleFollow = (pubkey: string) => {
+		setFollows((prev) =>
+			prev.includes(pubkey)
+				? prev.filter((i) => i !== pubkey)
+				: [...prev, pubkey],
+		);
+	};
+
+	const submit = async () => {
+		try {
+			setIsLoading(true);
+
+			const newContactList = await NostrAccount.setContactList(follows);
+
+			if (newContactList) {
+				return navigate({ to: redirect });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), {
+				title: "Create Group",
+				kind: "error",
+			});
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center w-full gap-3">
+			<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] bg-black/5 dark:bg-white/5 rounded-xl">
+				<Suspense
+					fallback={
+						<div className="flex flex-col items-center justify-center w-full h-20 gap-1">
+							<button
+								type="button"
+								className="inline-flex items-center gap-2 text-sm font-medium"
+								disabled
+							>
+								<Spinner className="size-5" />
+								Loading...
+							</button>
+						</div>
+					}
+				>
+					<Await promise={data}>
+						{(users) =>
+							users.profiles.map((item: { pubkey: string }) => (
+								<div
+									key={item.pubkey}
+									className="w-full p-2 mb-2 overflow-hidden bg-white rounded-lg h-max dark:bg-black/20shadow-primary dark:ring-1 ring-neutral-800/50"
+								>
+									<User.Provider pubkey={item.pubkey}>
+										<User.Root>
+											<div className="flex flex-col w-full h-full gap-2">
+												<div className="flex items-center justify-between">
+													<div className="flex items-center gap-2">
+														<User.Avatar className="rounded-full size-7" />
+														<User.Name className="text-sm leadning-tight max-w-[15rem] truncate font-semibold" />
+													</div>
+													<button
+														type="button"
+														onClick={() => toggleFollow(item.pubkey)}
+														className="inline-flex items-center justify-center w-20 text-sm font-medium rounded-lg h-7 bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+													>
+														{follows.includes(item.pubkey)
+															? "Unfollow"
+															: "Follow"}
+													</button>
+												</div>
+												<User.About className="select-text line-clamp-3 max-w-none text-neutral-800 dark:text-neutral-400" />
+											</div>
+										</User.Root>
+									</User.Provider>
+								</div>
+							))
+						}
+					</Await>
+				</Suspense>
+			</div>
+			<button
+				type="button"
+				onClick={() => submit()}
+				disabled={isLoading || follows.length < 1}
+				className="inline-flex items-center justify-center text-sm font-medium text-white bg-blue-500 rounded-full w-36 h-9 hover:bg-blue-600 disabled:opacity-50"
+			>
+				{isLoading ? <Spinner /> : "Confirm"}
+			</button>
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/create-topic.tsx
+++ b/apps/desktop2/src/routes/create-topic.tsx
@@ -0,0 +1,115 @@
+import { CheckCircleIcon } from "@lume/icons";
+import { NostrQuery } from "@lume/system";
+import type { ColumnRouteSearch } from "@lume/types";
+import { Spinner } from "@lume/ui";
+import { TOPICS } from "@lume/utils";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+
+type Topic = {
+	title: string;
+	content: string[];
+};
+
+export const Route = createFileRoute("/create-topic")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const [topics, setTopics] = useState<Topic[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const search = Route.useSearch();
+	const navigate = Route.useNavigate();
+
+	const toggleTopic = (topic: Topic) => {
+		setTopics((prev) =>
+			prev.find((item) => item.title === topic.title)
+				? prev.filter((i) => i.title !== topic.title)
+				: [...prev, topic],
+		);
+	};
+
+	const submit = async () => {
+		try {
+			setIsLoading(true);
+
+			const key = `lume_topic_${search.label}`;
+			const createTopic = await NostrQuery.setNstore(
+				key,
+				JSON.stringify(topics),
+			);
+
+			if (createTopic) {
+				return navigate({ to: search.redirect, search: { ...search } });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), {
+				title: "Create Topic",
+				kind: "error",
+			});
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center w-full h-full gap-4">
+			<div className="flex flex-col items-center justify-center text-center">
+				<h1 className="font-serif text-2xl font-medium">
+					What are your interests?
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Add some topics you want to focus on.
+				</p>
+			</div>
+			<div className="flex flex-col w-4/5 max-w-full gap-3">
+				<div className="flex items-center justify-between w-full px-3 rounded-lg h-9 shrink-0 bg-black/5 dark:bg-white/5">
+					<span className="text-sm font-medium">Added: {topics.length}</span>
+				</div>
+				<div className="flex flex-col items-center w-full gap-3">
+					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] bg-black/5 dark:bg-white/5 rounded-xl">
+						<div className="flex flex-col gap-3">
+							{TOPICS.map((topic) => (
+								<button
+									key={topic.title}
+									type="button"
+									onClick={() => toggleTopic(topic)}
+									className="flex items-center justify-between px-3 bg-white border border-transparent rounded-lg h-11 dark:bg-black/20 hover:border-blue-500 shadow-primary dark:ring-1 ring-neutral-800/50"
+								>
+									<div className="inline-flex items-center gap-1">
+										<div>{topic.icon}</div>
+										<div className="text-sm font-medium">
+											<span>{topic.title}</span>
+											<span className="ml-1 italic font-normal text-neutral-400 dark:text-neutral-600">
+												{topic.content.length} hashtags
+											</span>
+										</div>
+									</div>
+									{topics.find((item) => item.title === topic.title) ? (
+										<CheckCircleIcon className="text-teal-500 size-4" />
+									) : null}
+								</button>
+							))}
+						</div>
+					</div>
+					<button
+						type="button"
+						onClick={() => submit()}
+						disabled={isLoading || topics.length < 1}
+						className="inline-flex items-center justify-center text-sm font-medium text-white bg-blue-500 rounded-full w-36 h-9 hover:bg-blue-600 disabled:opacity-50"
+					>
+						{isLoading ? <Spinner /> : "Confirm"}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/editor/-components/media.tsx
+++ b/apps/desktop2/src/routes/editor/-components/media.tsx
@@ -1,32 +1,30 @@
 import { AddMediaIcon } from "@lume/icons";
+import { NostrQuery } from "@lume/system";
 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 { insertImage, isImagePath } from "@lume/utils";
 import type { UnlistenFn } from "@tauri-apps/api/event";
 import { getCurrent } from "@tauri-apps/api/window";
+import { message } from "@tauri-apps/plugin-dialog";
 import { useEffect, useState } from "react";
 import { useSlateStatic } from "slate-react";
-import { toast } from "sonner";

-export function MediaButton({ className }: { className?: string }) {
+export function MediaButton() {
 	const editor = useSlateStatic();
-	const { ark } = useRouteContext({ strict: false });
 	const [loading, setLoading] = useState(false);

-	const uploadToNostrBuild = async () => {
+	const upload = async () => {
 		try {
 			// start loading
 			setLoading(true);

-			const image = await ark.upload();
+			const image = await NostrQuery.upload();
 			insertImage(editor, image);

 			// reset loading
 			setLoading(false);
 		} catch (e) {
 			setLoading(false);
-			toast.error(`Upload failed, error: ${e}`);
+			await message(String(e), { title: "Upload", kind: "error" });
 		}
 	};

@@ -44,7 +42,7 @@ export function MediaButton({ className }: { className?: string }) {
 					// upload all images
 					for (const item of items) {
 						if (isImagePath(item)) {
-							const image = await ark.upload(item);
+							const image = await NostrQuery.upload(item);
 							insertImage(editor, image);
 						}
 					}
@@ -62,29 +60,18 @@ export function MediaButton({ className }: { className?: string }) {
 	}, []);

 	return (
-		<Tooltip.Provider>
-			<Tooltip.Root delayDuration={150}>
-				<Tooltip.Trigger asChild>
-					<button
-						type="button"
-						onClick={() => uploadToNostrBuild()}
-						disabled={loading}
-						className={cn("inline-flex items-center justify-center", className)}
-					>
-						{loading ? (
-							<Spinner className="size-4" />
-						) : (
-							<AddMediaIcon className="size-4" />
-						)}
-					</button>
-				</Tooltip.Trigger>
-				<Tooltip.Portal>
-					<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
-						Upload media
-						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
-					</Tooltip.Content>
-				</Tooltip.Portal>
-			</Tooltip.Root>
-		</Tooltip.Provider>
+		<button
+			type="button"
+			onClick={() => upload()}
+			disabled={loading}
+			className="inline-flex items-center h-8 gap-2 px-2.5 text-sm rounded-lg text-black/70 dark:text-white/70 w-max hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			{loading ? (
+				<Spinner className="size-4" />
+			) : (
+				<AddMediaIcon className="size-4" />
+			)}
+			Add media
+		</button>
 	);
 }
--- a/apps/desktop2/src/routes/editor/-components/mention.tsx
+++ b/apps/desktop2/src/routes/editor/-components/mention.tsx
@@ -1,83 +0,0 @@
-import { MentionIcon } from "@lume/icons";
-import { cn, insertMention } from "@lume/utils";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { useEffect, useState } from "react";
-import { useRouteContext } from "@tanstack/react-router";
-import { useSlateStatic } from "slate-react";
-import type { Contact } from "@lume/types";
-import { toast } from "sonner";
-import { User } from "@/components/user";
-
-export function MentionButton({ className }: { className?: string }) {
-	const editor = useSlateStatic();
-	const { ark } = useRouteContext({ strict: false });
-	const [contacts, setContacts] = useState<string[]>([]);
-
-	const select = async (user: string) => {
-		try {
-			const metadata = await ark.get_profile(user);
-			const contact: Contact = { pubkey: user, profile: metadata };
-
-			insertMention(editor, contact);
-		} catch (e) {
-			toast.error(String(e));
-		}
-	};
-
-	useEffect(() => {
-		async function getContacts() {
-			const data = await ark.get_contact_list();
-			setContacts(data);
-		}
-
-		getContacts();
-	}, []);
-
-	return (
-		<DropdownMenu.Root>
-			<Tooltip.Provider>
-				<Tooltip.Root delayDuration={150}>
-					<DropdownMenu.Trigger asChild>
-						<Tooltip.Trigger asChild>
-							<button
-								type="button"
-								className={cn(
-									"inline-flex items-center justify-center",
-									className,
-								)}
-							>
-								<MentionIcon className="size-4" />
-							</button>
-						</Tooltip.Trigger>
-					</DropdownMenu.Trigger>
-					<Tooltip.Portal>
-						<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
-							Mention
-							<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
-						</Tooltip.Content>
-					</Tooltip.Portal>
-				</Tooltip.Root>
-			</Tooltip.Provider>
-			<DropdownMenu.Portal>
-				<DropdownMenu.Content className="flex w-[220px] h-[220px] scrollbar-none flex-col overflow-y-auto rounded-xl bg-black py-1 shadow-md shadow-neutral-500/20 focus:outline-none dark:bg-white">
-					{contacts.map((contact) => (
-						<DropdownMenu.Item
-							key={contact}
-							onClick={() => select(contact)}
-							className="shrink-0 h-11 flex items-center hover:bg-white/10 px-2"
-						>
-							<User.Provider pubkey={contact}>
-								<User.Root className="flex items-center gap-2">
-									<User.Avatar className="shrink-0 size-8 rounded-full" />
-									<User.Name className="text-sm font-medium text-white dark:text-black" />
-								</User.Root>
-							</User.Provider>
-						</DropdownMenu.Item>
-					))}
-					<DropdownMenu.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
-				</DropdownMenu.Content>
-			</DropdownMenu.Portal>
-		</DropdownMenu.Root>
-	);
-}
--- a/apps/desktop2/src/routes/editor/-components/nsfw.tsx
+++ b/apps/desktop2/src/routes/editor/-components/nsfw.tsx
@@ -1,40 +0,0 @@
-import { NsfwIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import type { Dispatch, SetStateAction } from "react";
-
-export function NsfwToggle({
-	nsfw,
-	setNsfw,
-	className,
-}: {
-	nsfw: boolean;
-	setNsfw: Dispatch<SetStateAction<boolean>>;
-	className?: string;
-}) {
-	return (
-		<Tooltip.Provider>
-			<Tooltip.Root delayDuration={150}>
-				<Tooltip.Trigger asChild>
-					<button
-						type="button"
-						onClick={() => setNsfw((prev) => !prev)}
-						className={cn(
-							"inline-flex items-center justify-center",
-							className,
-							nsfw ? "bg-blue-500 text-white" : "",
-						)}
-					>
-						<NsfwIcon className="size-4" />
-					</button>
-				</Tooltip.Trigger>
-				<Tooltip.Portal>
-					<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
-						Mark as sensitive content
-						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
-					</Tooltip.Content>
-				</Tooltip.Portal>
-			</Tooltip.Root>
-		</Tooltip.Provider>
-	);
-}
--- a/apps/desktop2/src/routes/editor/-components/pow.tsx
+++ b/apps/desktop2/src/routes/editor/-components/pow.tsx
@@ -1,40 +1,21 @@
-import { NsfwIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import * as Tooltip from "@radix-ui/react-tooltip";
+import { PowIcon } from "@lume/icons";
 import type { Dispatch, SetStateAction } from "react";

-export function PowToggle({
-	pow,
-	setPow,
-	className,
+export function PowButton({
+	setDifficulty,
 }: {
-	pow: boolean;
-	setPow: Dispatch<SetStateAction<boolean>>;
-	className?: string;
+	setDifficulty: Dispatch<SetStateAction<{ enable: boolean; num: number }>>;
 }) {
 	return (
-		<Tooltip.Provider>
-			<Tooltip.Root delayDuration={150}>
-				<Tooltip.Trigger asChild>
-					<button
-						type="button"
-						onClick={() => setPow((prev) => !prev)}
-						className={cn(
-							"inline-flex items-center justify-center",
-							className,
-							pow ? "bg-blue-500 text-white" : "",
-						)}
-					>
-						<NsfwIcon className="size-4" />
-					</button>
-				</Tooltip.Trigger>
-				<Tooltip.Portal>
-					<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
-						Proof of Work
-						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
-					</Tooltip.Content>
-				</Tooltip.Portal>
-			</Tooltip.Root>
-		</Tooltip.Provider>
+		<button
+			type="button"
+			onClick={() =>
+				setDifficulty((prev) => ({ ...prev, enable: !prev.enable }))
+			}
+			className="inline-flex items-center h-8 gap-2 px-2.5 text-sm rounded-lg text-black/70 dark:text-white/70 w-max hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<PowIcon className="size-4" />
+			PoW
+		</button>
 	);
 }
--- a/apps/desktop2/src/routes/editor/-components/warning.tsx
+++ b/apps/desktop2/src/routes/editor/-components/warning.tsx
@@ -0,0 +1,19 @@
+import { NsfwIcon } from "@lume/icons";
+import type { Dispatch, SetStateAction } from "react";
+
+export function WarningButton({
+	setWarning,
+}: {
+	setWarning: Dispatch<SetStateAction<{ enable: boolean; reason: string }>>;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={() => setWarning((prev) => ({ ...prev, enable: !prev.enable }))}
+			className="inline-flex items-center h-8 gap-2 px-2.5 text-sm rounded-lg text-black/70 dark:text-white/70 w-max hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<NsfwIcon className="size-4" />
+			Mark as sensitive
+		</button>
+	);
+}
--- a/apps/desktop2/src/routes/editor/index.tsx
+++ b/apps/desktop2/src/routes/editor/index.tsx
@@ -1,16 +1,13 @@
-import { ComposeFilledIcon, TrashIcon } from "@lume/icons";
+import { Note } from "@/components/note";
+import { MentionNote } from "@/components/note/mentions/note";
+import { User } from "@/components/user";
+import { ComposeFilledIcon } from "@lume/icons";
+import { LumeEvent, useEvent } from "@lume/system";
 import { Spinner } from "@lume/ui";
-import {
-	cn,
-	insertImage,
-	insertNostrEvent,
-	isImageUrl,
-	sendNativeNotification,
-} from "@lume/utils";
+import { cn, insertImage, insertNostrEvent, isImageUrl } from "@lume/utils";
 import { createFileRoute } from "@tanstack/react-router";
 import { nip19 } from "nostr-tools";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
 import { type Descendant, Node, Transforms, createEditor } from "slate";
 import {
 	Editable,
@@ -22,60 +19,65 @@ import {
 	withReact,
 } from "slate-react";
 import { MediaButton } from "./-components/media";
-import { NsfwToggle } from "./-components/nsfw";
-import { MentionButton } from "./-components/mention";
-import { MentionNote } from "@/components/note/mentions/note";
-import { toast } from "sonner";
+import { PowButton } from "./-components/pow";
+import { WarningButton } from "./-components/warning";

 type EditorSearch = {
 	reply_to: string;
-	quote: boolean;
+	quote: string;
+};
+
+type EditorElement = {
+	type: string;
+	children: Descendant[];
+	eventId?: string;
 };

 export const Route = createFileRoute("/editor/")({
 	validateSearch: (search: Record<string, string>): EditorSearch => {
 		return {
 			reply_to: search.reply_to,
-			quote: search.quote === "true" || false,
+			quote: search.quote,
 		};
 	},
-	beforeLoad: async ({ search }) => {
-		return {
-			initialValue: search.quote
-				? [
-						{
-							type: "paragraph",
-							children: [{ text: "" }],
-						},
-						{
-							type: "event",
-							eventId: `nostr:${nip19.noteEncode(search.reply_to)}`,
-							children: [{ text: "" }],
-						},
-						{
-							type: "paragraph",
-							children: [{ text: "" }],
-						},
-					]
-				: [
-						{
-							type: "paragraph",
-							children: [{ text: "" }],
-						},
-					],
-		};
+	beforeLoad: ({ search }) => {
+		let initialValue: EditorElement[];
+
+		if (search?.quote?.length) {
+			const eventId = nip19.noteEncode(search.quote);
+			initialValue = [
+				{
+					type: "paragraph",
+					children: [{ text: "" }],
+				},
+				{
+					type: "event",
+					eventId: `nostr:${eventId}`,
+					children: [{ text: "" }],
+				},
+			];
+		} else {
+			initialValue = [
+				{
+					type: "paragraph",
+					children: [{ text: "" }],
+				},
+			];
+		}
+
+		return { initialValue };
 	},
 	component: Screen,
 });

 function Screen() {
-	const { reply_to, quote } = Route.useSearch();
-	const { ark, initialValue } = Route.useRouteContext();
+	const { reply_to } = Route.useSearch();
+	const { initialValue } = Route.useRouteContext();

-	const [t] = useTranslation();
-	const [editorValue, setEditorValue] = useState(initialValue);
+	const [editorValue, setEditorValue] = useState<EditorElement[]>(null);
 	const [loading, setLoading] = useState(false);
-	const [nsfw, setNsfw] = useState(false);
+	const [warning, setWarning] = useState({ enable: false, reason: "" });
+	const [difficulty, setDifficulty] = useState({ enable: false, num: 21 });
 	const [editor] = useState(() =>
 		withMentions(withNostrEvent(withImages(withReact(createEditor())))),
 	);
@@ -116,60 +118,42 @@ function Screen() {
 			setLoading(true);

 			const content = serialize(editor.children);
-			const eventId = await ark.publish(content, reply_to, quote);
+			const eventId = await LumeEvent.publish(
+				content,
+				warning.enable && warning.reason.length ? warning.reason : null,
+				difficulty.enable && difficulty.num > 0 ? difficulty.num : null,
+				reply_to,
+			);

 			if (eventId) {
-				await sendNativeNotification(
-					"Your note has been published successfully.",
-					"Lume",
-				);
+				// stop loading
+				setLoading(false);
+				// reset form
+				reset();
 			}
-
-			// stop loading
-			setLoading(false);
-
-			// reset form
-			reset();
 		} catch (e) {
 			setLoading(false);
-			await sendNativeNotification(String(e));
 		}
 	};

+	useEffect(() => {
+		setEditorValue(initialValue);
+	}, [initialValue]);
+
+	if (!editorValue) return null;
+
 	return (
-		<div className="w-full h-full">
+		<div className="flex flex-col w-full h-full">
 			<Slate editor={editor} initialValue={editorValue}>
-				<div
-					data-tauri-drag-region
-					className="flex h-14 w-full shrink-0 items-center justify-end gap-2 px-2 border-b border-black/10 dark:border-white/10"
-				>
-					<NsfwToggle
-						nsfw={nsfw}
-						setNsfw={setNsfw}
-						className="size-8 rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
-					/>
-					<MentionButton className="size-8 rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20" />
-					<MediaButton className="size-8 rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20" />
-					<button
-						type="button"
-						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 ? (
-							<Spinner className="size-4" />
-						) : (
-							<ComposeFilledIcon className="size-4" />
-						)}
-						{t("global.post")}
-					</button>
-				</div>
-				<div className="flex h-full w-full flex-1 flex-col">
-					{reply_to && !quote ? (
-						<div className="px-4 py-2">
-							<MentionNote eventId={reply_to} />
+				<div data-tauri-drag-region className="h-9 shrink-0" />
+				<div className="flex flex-col flex-1 overflow-y-auto">
+					{reply_to?.length ? (
+						<div className="flex items-center gap-3 px-2.5 pb-3 border-b border-black/5 dark:border-white/5">
+							<div className="text-sm font-semibold shrink-0">Reply to:</div>
+							<ChildNote id={reply_to} />
 						</div>
 					) : null}
-					<div className="overflow-y-auto p-4">
+					<div className="px-4 py-4 overflow-y-auto">
 						<Editable
 							key={JSON.stringify(editorValue)}
 							autoFocus={true}
@@ -178,17 +162,103 @@ function Screen() {
 							spellCheck={false}
 							renderElement={(props) => <Element {...props} />}
 							placeholder={
-								reply_to ? "Type your reply..." : t("editor.placeholder")
+								reply_to ? "Type your reply..." : "What're you up to?"
 							}
 							className="focus:outline-none"
 						/>
 					</div>
 				</div>
+				{warning.enable ? (
+					<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
+						<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
+							Reason:
+						</span>
+						<input
+							type="text"
+							placeholder="NSFW..."
+							value={warning.reason}
+							onChange={(e) =>
+								setWarning((prev) => ({ ...prev, reason: e.target.value }))
+							}
+							className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
+						/>
+					</div>
+				) : null}
+				{difficulty.enable ? (
+					<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
+						<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
+							Difficulty:
+						</span>
+						<input
+							type="text"
+							inputMode="numeric"
+							pattern="[0-9]"
+							onKeyDown={(event) => {
+								if (!/[0-9]/.test(event.key)) {
+									event.preventDefault();
+								}
+							}}
+							placeholder="21"
+							defaultValue={difficulty.num}
+							onChange={(e) =>
+								setWarning((prev) => ({ ...prev, num: Number(e.target.value) }))
+							}
+							className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
+						/>
+					</div>
+				) : null}
+				<div
+					data-tauri-drag-region
+					className="flex items-center w-full h-16 gap-4 px-4 border-t divide-x divide-black/5 dark:divide-white/5 shrink-0 border-black/5 dark:border-white/5"
+				>
+					<button
+						type="button"
+						onClick={() => publish()}
+						className="inline-flex items-center justify-center h-8 gap-1 px-2.5 text-sm font-medium rounded-lg bg-black/10 w-max hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+					>
+						{loading ? (
+							<Spinner className="size-4" />
+						) : (
+							<ComposeFilledIcon className="size-4" />
+						)}
+						Publish
+					</button>
+					<div className="inline-flex items-center flex-1 gap-2 pl-4">
+						<MediaButton />
+						<WarningButton setWarning={setWarning} />
+						<PowButton setDifficulty={setDifficulty} />
+					</div>
+				</div>
 			</Slate>
 		</div>
 	);
 }

+function ChildNote({ id }: { id: string }) {
+	const { isLoading, isError, data } = useEvent(id);
+
+	if (isLoading) {
+		return <Spinner className="size-5" />;
+	}
+
+	if (isError || !data) {
+		return <div>Event not found with your current relay set.</div>;
+	}
+
+	return (
+		<Note.Provider event={data}>
+			<Note.Root className="flex items-center gap-2">
+				<User.Provider pubkey={data.pubkey}>
+					<User.Root className="shrink-0">
+						<User.Avatar className="rounded-full size-8" />
+					</User.Root>
+				</User.Provider>
+				<div className="content-break line-clamp-1">{data.content}</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}
+
 const withNostrEvent = (editor: ReactEditor) => {
 	const { insertData, isVoid } = editor;

@@ -200,7 +270,7 @@ const withNostrEvent = (editor: ReactEditor) => {
 	editor.insertData = (data) => {
 		const text = data.getData("text/plain");

-		if (text.startsWith("nevent1") || text.startsWith("note1")) {
+		if (text.startsWith("nevent") || text.startsWith("note")) {
 			insertNostrEvent(editor, text);
 		} else {
 			insertData(data);
@@ -252,35 +322,25 @@ const withImages = (editor: ReactEditor) => {
 	return editor;
 };

-const Image = ({ attributes, children, element }) => {
+const Image = ({ attributes, element, children }) => {
 	const editor = useSlateStatic();
-	const path = ReactEditor.findPath(editor as ReactEditor, element);
-
 	const selected = useSelected();
 	const focused = useFocused();
+	const path = ReactEditor.findPath(editor as ReactEditor, element);

 	return (
 		<div {...attributes}>
 			{children}
-			<div contentEditable={false} className="relative my-2">
-				<img
-					src={element.url}
-					alt={element.url}
-					className={cn(
-						"h-auto w-full rounded-lg border border-neutral-100 object-cover ring-2 dark:border-neutral-900",
-						selected && focused ? "ring-blue-500" : "ring-transparent",
-					)}
-					contentEditable={false}
-				/>
-				<button
-					type="button"
-					contentEditable={false}
-					onClick={() => Transforms.removeNodes(editor, { at: path })}
-					className="absolute right-2 top-2 inline-flex size-8 items-center justify-center rounded-lg bg-red-500 text-white hover:bg-red-600"
-				>
-					<TrashIcon className="size-4" />
-				</button>
-			</div>
+			<img
+				src={element.url}
+				alt={element.url}
+				className={cn(
+					"my-2 h-auto w-1/2 rounded-lg object-cover ring-2 outline outline-1 -outline-offset-1 outline-black/15",
+					selected && focused ? "ring-blue-500" : "ring-transparent",
+				)}
+				onClick={() => Transforms.removeNodes(editor, { at: path })}
+				onKeyDown={() => Transforms.removeNodes(editor, { at: path })}
+			/>
 		</div>
 	);
 };
@@ -295,7 +355,7 @@ const Mention = ({ attributes, element }) => {
 			type="button"
 			contentEditable={false}
 			onClick={() => Transforms.removeNodes(editor, { at: path })}
-			className="inline-block align-baseline text-blue-500 hover:text-blue-600"
+			className="inline-block text-blue-500 align-baseline hover:text-blue-600"
 		>{`@${element.name}`}</span>
 	);
 };
@@ -307,16 +367,13 @@ const Event = ({ attributes, element, children }) => {
 	return (
 		<div {...attributes}>
 			{children}
-			{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
 			<div
 				contentEditable={false}
+				className="relative my-2 user-select-none"
 				onClick={() => Transforms.removeNodes(editor, { at: path })}
-				className="user-select-none relative my-2"
+				onKeyDown={() => Transforms.removeNodes(editor, { at: path })}
 			>
-				<MentionNote
-					eventId={element.eventId.replace("nostr:", "")}
-					openable={false}
-				/>
+				<MentionNote eventId={element.eventId} openable={false} />
 			</div>
 		</div>
 	);
--- a/apps/desktop2/src/routes/events/$eventId.tsx
+++ b/apps/desktop2/src/routes/events/$eventId.tsx
@@ -1,72 +0,0 @@
-import { useEvent } from "@lume/ark";
-import type { Event } from "@lume/types";
-import { Box, Container, Spinner } from "@lume/ui";
-import { Note } from "@/components/note";
-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>
-	);
-}
--- a/apps/desktop2/src/routes/events/$id.tsx
+++ b/apps/desktop2/src/routes/events/$id.tsx
@@ -0,0 +1,143 @@
+import { Note } from "@/components/note";
+import { LumeEvent, NostrQuery } from "@lume/system";
+import type { Meta } from "@lume/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { createFileRoute } from "@tanstack/react-router";
+import { getCurrent } from "@tauri-apps/api/window";
+import { useEffect, useRef, useState } from "react";
+import { Virtualizer } from "virtua";
+import NoteParent from "./-components/parent";
+
+type Payload = {
+	raw: string;
+	parsed: Meta;
+};
+
+export const Route = createFileRoute("/events/$id")({
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getUserSettings();
+		return { settings };
+	},
+	loader: async ({ params }) => {
+		const event = await NostrQuery.getEvent(params.id);
+		return event;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const ref = useRef<HTMLDivElement>(null);
+
+	return (
+		<div className="h-full flex flex-col">
+			<div
+				data-tauri-drag-region
+				className="shrink-0 h-8 w-full border-b border-black/5 dark:border-white/5"
+			/>
+			<ScrollArea.Root
+				type={"scroll"}
+				scrollHideDelay={300}
+				className="overflow-hidden size-full flex-1"
+			>
+				<ScrollArea.Viewport ref={ref} className="h-full p-3">
+					<RootEvent />
+					<Virtualizer scrollRef={ref}>
+						<ReplyList />
+					</Virtualizer>
+				</ScrollArea.Viewport>
+				<ScrollArea.Scrollbar
+					className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+					orientation="vertical"
+				>
+					<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+				</ScrollArea.Scrollbar>
+				<ScrollArea.Corner className="bg-transparent" />
+			</ScrollArea.Root>
+		</div>
+	);
+}
+
+function RootEvent() {
+	const event = Route.useLoaderData();
+
+	return (
+		<Note.Provider event={event}>
+			<Note.Root className="bg-white dark:bg-black/10 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5">
+				<div className="flex items-center justify-between px-3 h-14">
+					<Note.User />
+					<Note.Menu />
+				</div>
+				<Note.ContentLarge className="px-3" />
+				<div className="flex items-center gap-2 px-3 mt-6 h-12 rounded-b-xl bg-neutral-50 dark:bg-white/5">
+					<Note.Reply large />
+					<Note.Repost large />
+					<Note.Zap large />
+				</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}
+
+function ReplyList() {
+	const event = Route.useLoaderData();
+	const [replies, setReplies] = useState<LumeEvent[]>([]);
+
+	useEffect(() => {
+		const unlistenEvent = getCurrent().listen<Payload>("new_reply", (data) => {
+			const event = LumeEvent.from(data.payload.raw, data.payload.parsed);
+			setReplies((prev) => [event, ...prev]);
+		});
+
+		const unlistenWindow = getCurrent().onCloseRequested(async () => {
+			await event.unlistenEventReply();
+			await getCurrent().destroy();
+		});
+
+		return () => {
+			unlistenEvent.then((f) => f());
+			unlistenWindow.then((f) => f());
+		};
+	}, []);
+
+	useEffect(() => {
+		let mounted = true;
+
+		async function getReplies() {
+			const data = await event.getEventReplies();
+
+			if (mounted) {
+				setReplies(data);
+				// Start listen for new reply
+				event.listenEventReply();
+			}
+		}
+
+		getReplies();
+
+		return () => {
+			mounted = false;
+		};
+	}, []);
+
+	return (
+		<div>
+			<div className="flex items-center text-sm font-semibold h-14 text-neutral-600 dark:text-white/30">
+				All replies
+			</div>
+			<div className="flex flex-col gap-3">
+				{!replies.length ? (
+					<div className="flex items-center justify-center w-full">
+						<div className="flex flex-col items-center justify-center gap-2 py-4">
+							<h3 className="text-3xl">👋</h3>
+							<p className="leading-none text-neutral-600 dark:text-neutral-400">
+								Be the first to Reply!
+							</p>
+						</div>
+					</div>
+				) : (
+					replies.map((event) => <NoteParent key={event.id} event={event} />)
+				)}
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/events/-components/child.tsx
+++ b/apps/desktop2/src/routes/events/-components/child.tsx
@@ -0,0 +1,41 @@
+import { Note } from "@/components/note";
+import type { LumeEvent } from "@lume/system";
+import NoteParent from "./parent";
+import { memo } from "react";
+
+const NoteChild = memo(function NoteChild({ event }: { event: LumeEvent }) {
+	return (
+		<Note.Provider event={event}>
+			<Note.Root className="flex flex-col gap-6 mb-3">
+				<div>
+					<div className="flex items-center justify-between">
+						<Note.User />
+						<Note.Menu />
+					</div>
+					<div className="flex gap-2">
+						<div className="w-8 shrink-0" />
+						<div className="flex-1 flex flex-col gap-2">
+							<Note.ContentLarge />
+							<div className="flex items-center gap-1">
+								<Note.Reply />
+								<Note.Repost />
+								<Note.Zap />
+							</div>
+						</div>
+					</div>
+				</div>
+				{event.replies?.length ? (
+					<div className="flex flex-col gap-3 pl-4">
+						<div className="flex flex-col pl-6 border-l border-black/10 dark:border-white/10">
+							{event.replies?.map((childEvent) => (
+								<NoteParent key={childEvent.id} event={childEvent} />
+							))}
+						</div>
+					</div>
+				) : null}
+			</Note.Root>
+		</Note.Provider>
+	);
+});
+
+export default NoteChild;
--- a/apps/desktop2/src/routes/events/-components/parent.tsx
+++ b/apps/desktop2/src/routes/events/-components/parent.tsx
@@ -0,0 +1,41 @@
+import { Note } from "@/components/note";
+import type { LumeEvent } from "@lume/system";
+import NoteChild from "./child";
+import { memo } from "react";
+
+const NoteParent = memo(function NoteParent({ event }: { event: LumeEvent }) {
+	return (
+		<Note.Provider event={event}>
+			<Note.Root className="flex flex-col gap-6 mb-3">
+				<div>
+					<div className="flex items-center justify-between">
+						<Note.User />
+						<Note.Menu />
+					</div>
+					<div className="flex gap-2">
+						<div className="w-8 shrink-0" />
+						<div className="flex-1 flex flex-col gap-2">
+							<Note.ContentLarge />
+							<div className="flex items-center gap-1">
+								<Note.Reply />
+								<Note.Repost />
+								<Note.Zap />
+							</div>
+						</div>
+					</div>
+				</div>
+				{event.replies?.length ? (
+					<div className="flex flex-col gap-3 pl-4">
+						<div className="flex flex-col gap-3 pl-6 border-l border-black/10 dark:border-white/10">
+							{event.replies?.map((childEvent) => (
+								<NoteChild key={childEvent.id} event={childEvent} />
+							))}
+						</div>
+					</div>
+				) : null}
+			</Note.Root>
+		</Note.Provider>
+	);
+});
+
+export default NoteParent;
--- a/apps/desktop2/src/routes/events/-components/reply.tsx
+++ b/apps/desktop2/src/routes/events/-components/reply.tsx
@@ -1,36 +0,0 @@
-import type { EventWithReplies } from "@lume/types";
-import { cn } from "@lume/utils";
-import { SubReply } from "./subReply";
-import { Note } from "@/components/note";
-
-export function Reply({ event }: { event: EventWithReplies }) {
-	return (
-		<Note.Provider event={event}>
-			<Note.Root className="border-t border-neutral-100 dark:border-neutral-900">
-				<div className="px-3 h-14 flex items-center justify-between">
-					<Note.User />
-					<Note.Menu />
-				</div>
-				<Note.ContentLarge className="px-3" />
-				<div className="mt-3 flex items-center gap-4 px-3 h-14">
-					<Note.Reply />
-					<Note.Repost />
-					<Note.Zap />
-				</div>
-				<div
-					className={cn(
-						event.replies?.length > 0
-							? "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"
-							: "",
-					)}
-				>
-					{event.replies?.length > 0
-						? event.replies?.map((childEvent) => (
-								<SubReply key={childEvent.id} event={childEvent} />
-							))
-						: null}
-				</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-}
--- a/apps/desktop2/src/routes/events/-components/replyList.tsx
+++ b/apps/desktop2/src/routes/events/-components/replyList.tsx
@@ -1,51 +0,0 @@
-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 { Reply } from "./reply";
-
-export function ReplyList({
-	eventId,
-	className,
-}: {
-	eventId: string;
-	className?: string;
-}) {
-	const { ark } = useRouteContext({ strict: false });
-	const [t] = useTranslation();
-	const [data, setData] = useState<null | EventWithReplies[]>(null);
-
-	useEffect(() => {
-		async function getReplies() {
-			const events = await ark.get_event_thread(eventId);
-			setData(events);
-		}
-		getReplies();
-	}, [eventId]);
-
-	return (
-		<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="flex h-16 items-center justify-center p-3">
-					<Spinner className="size-5" />
-				</div>
-			) : data.length === 0 ? (
-				<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">
-							{t("note.reply.empty")}
-						</p>
-					</div>
-				</div>
-			) : (
-				data.map((event) => <Reply key={event.id} event={event} />)
-			)}
-		</div>
-	);
-}
--- a/apps/desktop2/src/routes/events/-components/subReply.tsx
+++ b/apps/desktop2/src/routes/events/-components/subReply.tsx
@@ -1,21 +0,0 @@
-import type { Event } from "@lume/types";
-import { Note } from "@/components/note";
-
-export function SubReply({ event }: { event: Event; rootEventId?: string }) {
-	return (
-		<Note.Provider event={event}>
-			<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-3 flex items-center gap-4 px-3">
-					<Note.Reply />
-					<Note.Repost />
-					<Note.Zap />
-				</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-}
--- a/apps/desktop2/src/routes/foryou.tsx
+++ b/apps/desktop2/src/routes/foryou.tsx
@@ -1,155 +0,0 @@
-import { RepostNote } from "@/components/repost";
-import { TextNote } from "@/components/text";
-import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
-import { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
-import { Spinner } from "@lume/ui";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { Link, createFileRoute, redirect } from "@tanstack/react-router";
-import { Virtualizer } from "virtua";
-
-export const Route = createFileRoute("/foryou")({
-	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
-		return {
-			account: search.account,
-			label: search.label,
-			name: search.name,
-		};
-	},
-	beforeLoad: async ({ search, context }) => {
-		const ark = context.ark;
-		const interests = await ark.get_interest();
-		const settings = await ark.get_settings();
-
-		if (!interests) {
-			throw redirect({
-				to: "/interests",
-				search: {
-					...search,
-					redirect: "/foryou",
-				},
-			});
-		}
-
-		return {
-			interests,
-			settings,
-		};
-	},
-	component: Screen,
-});
-
-export function Screen() {
-	const { name, account } = Route.useSearch();
-	const { ark, interests } = Route.useRouteContext();
-	const {
-		data,
-		isLoading,
-		isFetching,
-		isFetchingNextPage,
-		hasNextPage,
-		fetchNextPage,
-	} = useInfiniteQuery({
-		queryKey: [name, account],
-		initialPageParam: 0,
-		queryFn: async ({ pageParam }: { pageParam: number }) => {
-			const events = await ark.get_events_from_interests(
-				interests.hashtags,
-				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 (
-		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-			{isFetching && !isLoading && !isFetchingNextPage ? (
-				<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>
-					</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 />
-			) : (
-				<Virtualizer overscan={3}>
-					{data.map((item) => renderItem(item))}
-				</Virtualizer>
-			)}
-			{data?.length && hasNextPage ? (
-				<div>
-					<button
-						type="button"
-						onClick={() => fetchNextPage()}
-						disabled={isFetchingNextPage || isLoading}
-						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" />
-						) : (
-							<>
-								<ArrowRightCircleIcon className="size-5" />
-								Load more
-							</>
-						)}
-					</button>
-				</div>
-			) : null}
-		</div>
-	);
-}
-
-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>
-	);
-}
--- a/apps/desktop2/src/routes/global.tsx
+++ b/apps/desktop2/src/routes/global.tsx
@@ -2,11 +2,14 @@ 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 { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
+import { ArrowRightCircleIcon } from "@lume/icons";
+import { type LumeEvent, NostrQuery } from "@lume/system";
+import { type ColumnRouteSearch, Kind } from "@lume/types";
 import { Spinner } from "@lume/ui";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { Link, createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";

 export const Route = createFileRoute("/global")({
@@ -17,18 +20,15 @@ export const Route = createFileRoute("/global")({
 			name: search.name,
 		};
 	},
-	beforeLoad: async ({ context }) => {
-		const ark = context.ark;
-		const settings = await ark.get_settings();
-
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getUserSettings();
 		return { settings };
 	},
 	component: Screen,
 });

 export function Screen() {
-	const { account } = Route.useSearch();
-	const { ark } = Route.useRouteContext();
+	const { label, account } = Route.useSearch();
 	const {
 		data,
 		isLoading,
@@ -37,117 +37,99 @@ export function Screen() {
 		hasNextPage,
 		fetchNextPage,
 	} = useInfiniteQuery({
-		queryKey: ["global", account],
+		queryKey: [label, account],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
-			const events = await ark.get_events(20, pageParam, undefined, true);
+			const events = await NostrQuery.getGlobalEvents(pageParam);
 			return events;
 		},
-		getNextPageParam: (lastPage) => {
-			const lastEvent = lastPage?.at(-1);
-			return lastEvent ? lastEvent.created_at - 1 : null;
-		},
-		select: (data) => data?.pages.flatMap((page) => page),
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flat(),
 		refetchOnWindowFocus: false,
 	});

-	const renderItem = (event: Event) => {
-		if (!event) return;
-		switch (event.kind) {
-			case Kind.Repost:
-				return <RepostNote key={event.id} event={event} />;
-			default: {
-				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;
+	const ref = useRef<HTMLDivElement>(null);

-				if (isConversation) {
-					return <Conversation key={event.id} event={event} className="mb-3" />;
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) return;
+			switch (event.kind) {
+				case Kind.Repost:
+					return <RepostNote key={event.id} event={event} className="mb-3" />;
+				default: {
+					if (event.isConversation) {
+						return (
+							<Conversation key={event.id} className="mb-3" event={event} />
+						);
+					}
+					if (event.isQuote) {
+						return <Quote key={event.id} event={event} className="mb-3" />;
+					}
+					return <TextNote 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" />;
 			}
-		}
-	};
+		},
+		[data],
+	);

 	return (
-		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-			{isFetching && !isLoading && !isFetchingNextPage ? (
-				<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>
-					</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 />
-			) : (
-				<Virtualizer overscan={3}>
-					{data.map((item) => renderItem(item))}
-				</Virtualizer>
-			)}
-			{data?.length && hasNextPage ? (
-				<div>
-					<button
-						type="button"
-						onClick={() => fetchNextPage()}
-						disabled={isFetchingNextPage || isLoading}
-						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 ? (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full"
+		>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
+				<Virtualizer scrollRef={ref}>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
+							<div className="flex items-center justify-center gap-2">
+								<Spinner className="size-5" />
+								<span className="text-sm font-medium">
+									Getting new notes...
+								</span>
+							</div>
+						</div>
+					) : null}
+					{isLoading ? (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
 							<Spinner className="size-5" />
-						) : (
-							<>
-								<ArrowRightCircleIcon className="size-5" />
-								Load more
-							</>
-						)}
-					</button>
-				</div>
-			) : null}
-		</div>
-	);
-}
-
-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>
+							<span className="text-sm font-medium">Loading...</span>
+						</div>
+					) : !data.length ? (
+						<div className="flex items-center justify-center">
+							Yo. You're catching up on all the things happening around you.
+						</div>
+					) : (
+						data.map((item) => renderItem(item))
+					)}
+					{data?.length && hasNextPage ? (
+						<div>
+							<button
+								type="button"
+								onClick={() => fetchNextPage()}
+								disabled={isFetchingNextPage || isLoading}
+								className="inline-flex items-center justify-center w-full gap-2 px-3 font-medium h-9 rounded-xl bg-black/5 hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+							>
+								{isFetchingNextPage ? (
+									<Spinner className="size-5" />
+								) : (
+									<>
+										<ArrowRightCircleIcon className="size-5" />
+										Load more
+									</>
+								)}
+							</button>
+						</div>
+					) : null}
+				</Virtualizer>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar
+				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+				orientation="vertical"
+			>
+				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner className="bg-transparent" />
+		</ScrollArea.Root>
 	);
 }
--- a/apps/desktop2/src/routes/group.tsx
+++ b/apps/desktop2/src/routes/group.tsx
@@ -1,10 +1,15 @@
+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 { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
+import { ArrowRightCircleIcon } from "@lume/icons";
+import { type LumeEvent, NostrQuery } from "@lume/system";
+import { type ColumnRouteSearch, Kind } from "@lume/types";
 import { Spinner } from "@lume/ui";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { Link, createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";

 export const Route = createFileRoute("/group")({
@@ -15,14 +20,12 @@ export const Route = createFileRoute("/group")({
 			name: search.name,
 		};
 	},
-	beforeLoad: async ({ search, context }) => {
-		const ark = context.ark;
-		const groups = (await ark.get_nstore(
-			`lume_group_${search.label}`,
-		)) as string[];
-		const settings = await ark.get_settings();
+	beforeLoad: async ({ search }) => {
+		const key = `lume:group:${search.label}`;
+		const groups: string[] = await NostrQuery.getNstore(key);
+		const settings = await NostrQuery.getUserSettings();

-		if (!groups) {
+		if (!groups?.length) {
 			throw redirect({
 				to: "/create-group",
 				search: {
@@ -32,17 +35,14 @@ export const Route = createFileRoute("/group")({
 			});
 		}

-		return {
-			groups,
-			settings,
-		};
+		return { groups, settings };
 	},
 	component: Screen,
 });

 export function Screen() {
-	const { name, account } = Route.useSearch();
-	const { ark, groups } = Route.useRouteContext();
+	const { label, account } = Route.useSearch();
+	const { groups } = Route.useRouteContext();
 	const {
 		data,
 		isLoading,
@@ -51,104 +51,99 @@ export function Screen() {
 		hasNextPage,
 		fetchNextPage,
 	} = useInfiniteQuery({
-		queryKey: [name, account],
+		queryKey: [label, account],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
-			const events = await ark.get_events(20, pageParam, groups);
+			const events = await NostrQuery.getGroupEvents(groups, pageParam);
 			return events;
 		},
-		getNextPageParam: (lastPage) => {
-			const lastEvent = lastPage?.at(-1);
-			return lastEvent ? lastEvent.created_at - 1 : null;
-		},
-		select: (data) =>
-			data?.pages.flatMap((page) => page.filter((ev) => ev.kind === Kind.Text)),
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flat(),
 		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} />;
-		}
-	};
+	const ref = useRef<HTMLDivElement>(null);
+
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) return;
+			switch (event.kind) {
+				case Kind.Repost:
+					return <RepostNote key={event.id} event={event} className="mb-3" />;
+				default: {
+					if (event.isConversation) {
+						return (
+							<Conversation key={event.id} className="mb-3" event={event} />
+						);
+					}
+					if (event.isQuote) {
+						return <Quote key={event.id} event={event} className="mb-3" />;
+					}
+					return <TextNote key={event.id} event={event} className="mb-3" />;
+				}
+			}
+		},
+		[data],
+	);

 	return (
-		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-			{isFetching && !isLoading && !isFetchingNextPage ? (
-				<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>
-					</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 />
-			) : (
-				<Virtualizer overscan={3}>
-					{data.map((item) => renderItem(item))}
-				</Virtualizer>
-			)}
-			{data?.length && hasNextPage ? (
-				<div>
-					<button
-						type="button"
-						onClick={() => fetchNextPage()}
-						disabled={isFetchingNextPage || isLoading}
-						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 ? (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full"
+		>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
+				<Virtualizer scrollRef={ref}>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
+							<div className="flex items-center justify-center gap-2">
+								<Spinner className="size-5" />
+								<span className="text-sm font-medium">
+									Getting new notes...
+								</span>
+							</div>
+						</div>
+					) : null}
+					{isLoading ? (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
 							<Spinner className="size-5" />
-						) : (
-							<>
-								<ArrowRightCircleIcon className="size-5" />
-								Load more
-							</>
-						)}
-					</button>
-				</div>
-			) : null}
-		</div>
-	);
-}
-
-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>
+							<span className="text-sm font-medium">Loading...</span>
+						</div>
+					) : !data.length ? (
+						<div className="flex items-center justify-center">
+							Yo. You're catching up on all the things happening around you.
+						</div>
+					) : (
+						data.map((item) => renderItem(item))
+					)}
+					{data?.length && hasNextPage ? (
+						<div>
+							<button
+								type="button"
+								onClick={() => fetchNextPage()}
+								disabled={isFetchingNextPage || isLoading}
+								className="inline-flex items-center justify-center w-full gap-2 px-3 font-medium h-9 rounded-xl bg-black/5 hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+							>
+								{isFetchingNextPage ? (
+									<Spinner className="size-5" />
+								) : (
+									<>
+										<ArrowRightCircleIcon className="size-5" />
+										Load more
+									</>
+								)}
+							</button>
+						</div>
+					) : null}
+				</Virtualizer>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar
+				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+				orientation="vertical"
+			>
+				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner className="bg-transparent" />
+		</ScrollArea.Root>
 	);
 }
--- a/apps/desktop2/src/routes/index.tsx
+++ b/apps/desktop2/src/routes/index.tsx
@@ -1,31 +1,30 @@
-import { PlusIcon } from "@lume/icons";
-import { Spinner } from "@lume/ui";
 import { User } from "@/components/user";
-import { checkForAppUpdates } from "@lume/utils";
+import { PlusIcon, RelayIcon } from "@lume/icons";
+import { NostrAccount } from "@lume/system";
+import { Spinner } from "@lume/ui";
+import { checkForAppUpdates, displayNpub } from "@lume/utils";
 import { Link } from "@tanstack/react-router";
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { invoke } from "@tauri-apps/api/core";
+import { message } from "@tauri-apps/plugin-dialog";
 import { useState } from "react";
-import { toast } from "sonner";

 export const Route = createFileRoute("/")({
-	beforeLoad: async ({ context }) => {
-		// check for app updates
+	beforeLoad: async () => {
+		// Check for app updates
+		// TODO: move this function to rust
 		await checkForAppUpdates(true);

-		const ark = context.ark;
-		const accounts = await ark.get_all_accounts();
+		// Get all accounts
+		// TODO: use emit & listen
+		const accounts = await NostrAccount.getAccounts();

-		if (!accounts.length) {
+		if (accounts.length < 1) {
 			throw redirect({
 				to: "/landing",
 				replace: true,
 			});
 		}

-		// Run notification service
-		await invoke("run_notification", { accounts });
-
 		return { accounts };
 	},
 	component: Screen,
@@ -33,16 +32,17 @@ export const Route = createFileRoute("/")({

 function Screen() {
 	const navigate = Route.useNavigate();
-	const { ark, accounts } = Route.useRouteContext();
+	const context = Route.useRouteContext();

-	const [loading, setLoading] = useState(false);
+	const [loading, setLoading] = useState({ npub: "", status: false });

 	const select = async (npub: string) => {
 		try {
-			setLoading(true);
+			setLoading({ npub, status: true });

-			const loadAccount = await ark.load_selected_account(npub);
-			if (loadAccount) {
+			const status = await NostrAccount.loadAccount(npub);
+
+			if (status) {
 				return navigate({
 					to: "/$account/home",
 					params: { account: npub },
@@ -50,8 +50,11 @@ function Screen() {
 				});
 			}
 		} catch (e) {
-			setLoading(false);
-			toast.error(String(e));
+			setLoading({ npub: "", status: false });
+			await message(String(e), {
+				title: "Account",
+				kind: "error",
+			});
 		}
 	};

@@ -62,62 +65,76 @@ function Screen() {
 	});

 	return (
-		<div className="relative flex h-full w-full items-center justify-center">
-			<div className="relative z-20 flex flex-col items-center gap-16">
-				<div className="text-center text-white">
-					<h2 className="mb-1 text-2xl">{currentDate}</h2>
+		<div
+			data-tauri-drag-region
+			className="relative flex flex-col items-center justify-between w-full h-full"
+		>
+			<div
+				data-tauri-drag-region
+				className="absolute top-0 left-0 h-14 w-full"
+			/>
+			<div className="flex items-end justify-center flex-1 w-full px-4 pb-10">
+				<div className="text-center">
+					<h2 className="mb-1 text-lg text-neutral-700 dark:text-neutral-300">
+						{currentDate}
+					</h2>
 					<h2 className="text-2xl font-semibold">Welcome back!</h2>
 				</div>
-				<div className="flex items-center justify-center gap-6">
-					{loading ? (
-						<div className="inline-flex size-6 items-center justify-center">
-							<Spinner className="size-6 text-white" />
-						</div>
-					) : (
-						<>
-							{accounts.map((account) => (
-								<button
-									type="button"
-									key={account}
-									onClick={() => select(account)}
-								>
-									<User.Provider pubkey={account}>
-										<User.Root className="flex h-36 w-32 flex-col items-center justify-center gap-4 rounded-2xl p-2 hover:bg-white/10 dark:hover:bg-black/10">
-											<User.Avatar className="size-20 rounded-full object-cover" />
-											<User.Name className="max-w-[5rem] truncate text-lg font-medium leading-tight text-white" />
-										</User.Root>
-									</User.Provider>
-								</button>
-							))}
-							<Link to="/landing">
-								<div className="flex h-36 w-32 flex-col items-center justify-center gap-4 rounded-2xl p-2 text-white hover:bg-white/10 dark:hover:bg-black/10">
-									<div className="flex size-20 items-center justify-center rounded-full bg-white/20 dark:bg-black/20">
-										<PlusIcon className="size-5" />
+			</div>
+			<div className="flex flex-col items-center flex-1 w-full gap-3">
+				<div className="flex flex-col w-full max-w-sm mx-auto overflow-hidden bg-white divide-y divide-neutral-100 dark:divide-white/5 rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					{context.accounts.map((account) => (
+						<div
+							key={account}
+							onClick={() => select(account)}
+							onKeyDown={() => select(account)}
+							className="flex items-center justify-between hover:bg-black/5 dark:hover:bg-white/5"
+						>
+							<User.Provider pubkey={account}>
+								<User.Root className="flex items-center gap-2.5 p-3">
+									<User.Avatar className="rounded-full size-10" />
+									<div className="inline-flex flex-col items-start">
+										<User.Name className="max-w-[6rem] truncate font-medium leading-tight" />
+										<span className="text-sm text-neutral-700 dark:text-neutral-300">
+											{displayNpub(account, 16)}
+										</span>
 									</div>
-									<p className="text-lg font-medium leading-tight">Add</p>
-								</div>
-							</Link>
-						</>
-					)}
+								</User.Root>
+							</User.Provider>
+							<div className="inline-flex items-center justify-center size-10">
+								{loading.npub === account ? (
+									loading.status ? (
+										<Spinner />
+									) : null
+								) : null}
+							</div>
+						</div>
+					))}
+					<Link
+						to="/landing"
+						className="flex items-center justify-between hover:bg-black/5 dark:hover:bg-white/5"
+					>
+						<div className="flex items-center gap-2.5 p-3">
+							<div className="inline-flex items-center justify-center rounded-full size-10 bg-neutral-200 dark:bg-white/10">
+								<PlusIcon className="size-5" />
+							</div>
+							<span className="max-w-[6rem] truncate text-sm font-medium leading-tight">
+								Add account
+							</span>
+						</div>
+					</Link>
+				</div>
+				<div className="w-full max-w-sm mx-auto">
+					<Link
+						to="/bootstrap-relays"
+						className="inline-flex items-center justify-center w-full h-8 gap-2 px-2 text-xs font-medium rounded-lg bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 text-neutral-700 dark:text-white/40"
+					>
+						<RelayIcon className="size-4" />
+						Custom Bootstrap Relays
+					</Link>
 				</div>
 			</div>
-			<div className="absolute z-10 h-full w-full bg-white/10 backdrop-blur-lg dark:bg-black/10" />
-			<div className="absolute inset-0 h-full w-full">
-				<img
-					src="/lock-screen.jpg"
-					srcSet="/lock-screen@2x.jpg 2x"
-					alt="Lock Screen Background"
-					className="h-full w-full object-cover"
-				/>
-				<a
-					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>
-			</div>
+			<div className="flex-1" />
 		</div>
 	);
 }
--- a/apps/desktop2/src/routes/interests.tsx
+++ b/apps/desktop2/src/routes/interests.tsx
@@ -1,119 +0,0 @@
-import type { ColumnRouteSearch } from "@lume/types";
-import { TOPICS, cn } from "@lume/utils";
-import { createFileRoute, useRouter } from "@tanstack/react-router";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-export const Route = createFileRoute("/interests")({
-	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
-		return {
-			account: search.account,
-			label: search.label,
-			name: search.name,
-		};
-	},
-	component: Screen,
-});
-
-function Screen() {
-	const { t } = useTranslation();
-	const { label, name, redirect } = Route.useSearch();
-	const { ark } = Route.useRouteContext();
-
-	const [hashtags, setHashtags] = useState<string[]>([]);
-	const [isDone, setIsDone] = useState(false);
-
-	const router = useRouter();
-
-	const toggleHashtag = (item: string) => {
-		const arr = hashtags.includes(item)
-			? hashtags.filter((i) => i !== item)
-			: [...hashtags, item];
-		setHashtags(arr);
-	};
-
-	const toggleAll = (item: string[]) => {
-		const sets = new Set([...hashtags, ...item]);
-		setHashtags([...sets]);
-	};
-
-	const submit = async () => {
-		try {
-			if (isDone) {
-				return router.history.push(redirect);
-			}
-
-			const eventId = await ark.set_interest(undefined, undefined, hashtags);
-			if (eventId) {
-				setIsDone(true);
-				toast.success("Interest has been updated successfully.");
-			}
-		} catch (e) {
-			toast.error(String(e));
-		}
-	};
-
-	return (
-		<div className="h-full flex flex-col px-2">
-			<div className="shrink-0 flex h-16 items-center justify-between">
-				<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">
-						Pick things you'd like to see.
-					</p>
-				</div>
-				<button
-					type="button"
-					onClick={submit}
-					className="inline-flex h-8 w-20 items-center justify-center rounded-full bg-blue-500 px-2 text-sm font-medium text-white hover:bg-blue-600 disabled:opacity-50"
-				>
-					{isDone ? t("global.back") : t("global.update")}
-				</button>
-			</div>
-			<div className="flex-1 flex flex-col gap-3 pb-2 scrollbar-none overflow-y-auto">
-				{TOPICS.map((topic) => (
-					<div
-						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}
-									alt={topic.title}
-									className="size-8 rounded-lg object-cover"
-								/>
-								<h3 className="text-lg font-semibold">{topic.title}</h3>
-							</div>
-							<button
-								type="button"
-								onClick={() => toggleAll(topic.content)}
-								className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-							>
-								{t("interests.followAll")}
-							</button>
-						</div>
-						<div className="px-3 pb-3 flex flex-wrap items-center gap-3">
-							{topic.content.map((hashtag) => (
-								<button
-									key={hashtag}
-									type="button"
-									onClick={() => toggleHashtag(hashtag)}
-									className={cn(
-										"inline-flex items-center rounded-full border border-transparent bg-neutral-100 px-2 py-1 text-sm font-medium dark:bg-neutral-900",
-										hashtags.includes(hashtag)
-											? "border-blue-500 text-blue-500"
-											: "",
-									)}
-								>
-									{hashtag}
-								</button>
-							))}
-						</div>
-					</div>
-				))}
-			</div>
-		</div>
-	);
-}
--- a/apps/desktop2/src/routes/landing.lazy.tsx
+++ b/apps/desktop2/src/routes/landing.lazy.tsx
@@ -0,0 +1,62 @@
+import { KeyIcon, RemoteIcon } from "@lume/icons";
+import { Link, createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/landing")({
+	component: Screen,
+});
+
+function Screen() {
+	return (
+		<div
+			data-tauri-drag-region
+			className="flex flex-col items-center justify-center w-screen h-screen"
+		>
+			<div className="w-full max-w-xs mx-auto lg:max-w-md">
+				<div className="flex flex-col w-full gap-2 px-2 bg-white rounded-xl shadow-primary dark:bg-white/20 dark:ring-1 ring-neutral-800/50">
+					<div className="flex items-center h-20 border-b border-neutral-100 dark:border-white/5">
+						<Link
+							to="/auth/create-profile"
+							className="flex items-center justify-center w-full gap-2 px-2 rounded-lg h-14 hover:bg-neutral-100 dark:hover:bg-white/10"
+						>
+							<div className="inline-flex items-center justify-center rounded-full size-9 shrink-0">
+								<img
+									src="/icon.jpeg"
+									alt="App Icon"
+									className="object-cover rounded-full size-9"
+								/>
+							</div>
+							<div className="inline-flex flex-col flex-1">
+								<span className="font-semibold leading-tight">
+									Create new account
+								</span>
+								<span className="text-sm leading-tight text-neutral-500">
+									Use everywhere
+								</span>
+							</div>
+						</Link>
+					</div>
+					<div className="flex flex-col gap-1 pb-2.5">
+						<Link
+							to="/auth/import"
+							className="inline-flex items-center w-full gap-2 px-2 rounded-lg h-11 hover:bg-neutral-100 dark:hover:bg-white/10"
+						>
+							<div className="inline-flex items-center justify-center size-9">
+								<KeyIcon className="size-5 text-neutral-600 dark:text-neutral-400" />
+							</div>
+							Login with Private Key
+						</Link>
+						<Link
+							to="/auth/remote"
+							className="inline-flex items-center w-full gap-2 px-2 rounded-lg h-11 hover:bg-neutral-100 dark:hover:bg-white/10"
+						>
+							<div className="inline-flex items-center justify-center size-9">
+								<RemoteIcon className="size-5 text-neutral-600 dark:text-neutral-400" />
+							</div>
+							Nostr Connect
+						</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
reya	72da83d648	feat: add force quit command	2024-07-02 17:24:55 +07:00
reya	783a4538a4	Revert "chore: update ci" This reverts commit `04706a6d7c`.	2024-07-02 15:54:00 +07:00
reya	15e62cad11	fix: temporary include devtools in release build	2024-07-02 14:58:00 +07:00
reya	c52b20ca80	chore: bump version	2024-07-02 14:36:16 +07:00
reya	04706a6d7c	chore: update ci	2024-07-02 14:07:12 +07:00
reya	0755cbeb6c	chore: bump version	2024-07-02 13:03:45 +07:00
雨宮蓮	8eb01c8bbf	Improve column management (#221 ) * wip: redesign store * feat: update trending column * feat: add more functions	2024-07-02 12:51:50 +07:00
reya	ed4f89ff66	feat: add option to toggle window transparent	2024-07-02 08:49:52 +07:00
reya	d9fe647f8e	feat: few improvements	2024-07-01 14:41:33 +07:00
reya	843c2d52e7	refactor: tray panel	2024-07-01 13:04:32 +07:00
reya	017a3676a4	feat: optimize spawn thread	2024-06-30 21:06:04 +07:00
reya	fcb70c0e9a	chore: update deps	2024-06-30 14:37:26 +07:00
雨宮蓮	0fec21b9ce	Some improments and Negentropy (#219 ) * feat: adjust default window size * feat: save window state * feat: add window state plugin * feat: add search * feat: use negentropy for newsfeed * feat: live feeds * feat: add search user	2024-06-30 14:26:02 +07:00
XIAO YU	968b1ada94	refactor: improve relay management code structure (#220 )	2024-06-29 07:41:16 +07:00
reya	5c9b599b1e	feat: use memo for some components	2024-06-26 17:49:36 +07:00
雨宮蓮	717c3e17df	Event Subscriptions (#218 ) * feat: improve create column command * refactor: thread * feat: add window virtualized to event screen * chore: update deps * fix: window decoration * feat: improve mention ntoe * feat: add subscription to event screen	2024-06-26 14:51:50 +07:00
XIAO YU	a4540a0802	refactor: improve error handling in event.rs (#217 )	2024-06-26 07:57:53 +07:00
reya	31bacc2646	chore: remove unused code	2024-06-24 11:09:32 +07:00
reya	6e5d0f0e76	chore: bump version	2024-06-24 10:06:12 +07:00
XIAO YU	f0712e5961	refactor: improve error handling (#216 )	2024-06-24 07:19:36 +07:00
雨宮蓮	3fbd66dece	Add bitcoin connect (#215 ) * feat: add bitcoin connect * feat: improve zap screen	2024-06-21 14:56:10 +07:00
reya	1283432632	feat: use native feature instead of react	2024-06-21 10:24:09 +07:00
reya	59eaaec903	feat: support content warning	2024-06-21 08:57:49 +07:00
雨宮蓮	4f0f210076	Add lazy carousel (#214 ) * refactor: carousel * feat: improve image carousel	2024-06-21 07:51:11 +07:00
reya	e4a317f038	chore: bump version	2024-06-20 13:23:05 +07:00
reya	9779d020c7	feat: improve list virtualization	2024-06-20 13:22:28 +07:00
雨宮蓮	f8280ec8ee	fix: get replies function (#213 )	2024-06-19 21:02:33 +07:00
XIAO YU	6c26f8967b	chore: Refactor code for better performance and reliability (#212 )	2024-06-19 14:36:59 +07:00
reya	e1424b851c	fix: routes	2024-06-19 14:22:45 +07:00
reya	d14e609579	chore: bump version	2024-06-19 14:14:34 +07:00
reya	8c0627ff27	fix: crash on startup	2024-06-19 14:14:03 +07:00
雨宮蓮	18c133d096	Settings Manager (#211 ) * refactor: landing screen * fix: code debt * feat: add settings screen * chore: clean up * feat: settings * feat: small updates	2024-06-19 14:00:58 +07:00
reya	0061ecea78	feat: use native context menu in tray panel	2024-06-18 09:07:58 +07:00
reya	d01cf8319d	feat: native context menu	2024-06-17 15:31:59 +07:00
雨宮蓮	843895d876	Make Lume Faster (#208 ) * chore: fix some lint issues * feat: refactor contact list * feat: refactor relay hint * feat: add missing commands * feat: use new cache layer for react query * feat: refactor column * feat: improve relay hint * fix: replace break with continue in parser * refactor: publish function * feat: add reply command * feat: improve editor * fix: quote * chore: update deps * refactor: note component * feat: improve repost * feat: improve cache * fix: backup screen * refactor: column manager	2024-06-17 13:52:06 +07:00
XIAO YU	7c99ed39e4	chore: handle unwrap err (#210 )	2024-06-16 08:11:48 +07:00
雨宮蓮	71be59b2e9	Move the event parser and dedup functions to Rust (#206 ) * feat: improve js parser * feat: move parser and dedup to rust * fix: parser * fix: get event function * feat: improve parser performance (#207) * feat: improve parser performance * feat: add test for video parsing * feat: finish new parser --------- Co-authored-by: XIAO YU <xyzmhx@gmail.com>	2024-06-12 08:27:53 +07:00
reya	1c20512ecc	chore: update deps	2024-06-10 13:15:57 +07:00
雨宮蓮	90342c552f	Customize Bootstrap Relays (#205 ) * feat: add bootstrap relays file * feat: add save bootstrap relays command * feat: add customize bootstrap relays screen	2024-06-10 10:48:39 +07:00
reya	b396c8a695	feat: upgrade to rust-nostr 0.32	2024-06-08 08:00:02 +07:00
reya	6996e30889	chore: update github ci	2024-06-07 11:26:20 +07:00
reya	7ba793fad8	chore: bump version	2024-06-07 10:03:04 +07:00
reya	f11f836518	chore: update tray icon	2024-06-07 09:56:57 +07:00
reya	04fe0fcec8	feat: respect the relay hint	2024-06-07 09:07:33 +07:00
雨宮蓮	799835a629	Notification Panel (#200 ) * feat: add tauri nspanel * feat: add notification panel * feat: move notification service to backend * feat: add sync notification job * feat: enable panel to join all spaces including fullscreen (#203) * feat: fetch notification * feat: listen for new notification * feat: finish panel --------- Co-authored-by: Victor Aremu <me@victorare.mu>	2024-06-06 14:32:30 +07:00
XIAO YU	4e7da4108b	feat: Add get user following function (#202 ) * feat: Add get user following function * refactor: Refactor get_following function to use state and string public key * feat: Update get_following function to use timeout duration * feat: Fix connect_remote_account function to return remote_npub without conversion * feat: Refactor get_following function to handle public key parsing errors * Refactor get_followers function to handle public key parsing errors and use timeout duration	2024-06-05 13:24:32 +07:00
reya	7c7b082b3a	fix: memory leak in image component	2024-06-03 07:32:34 +07:00
reya	38d6c51921	feat: use nostrdb for unix and rocksdb for windows	2024-06-02 08:16:59 +07:00
reya	1738cbdd97	chore: upgrade tauri	2024-06-01 14:54:35 +07:00
reya	2e885b76a1	feat: improve text wrap	2024-06-01 08:27:22 +07:00
reya	f94680e487	fix: column overlapped after change account	2024-05-31 15:25:47 +07:00
XIAO YU	c682a58842	chore: Remove unused modules and update metadata.rs (#199 )	2024-05-31 12:53:35 +07:00
reya	921cf871ee	chore: bump version	2024-05-31 08:54:53 +07:00
reya	d5b1593aca	feat: improve nostr connect flow	2024-05-31 08:54:17 +07:00
reya	6676b4e2a4	Revert "chore: Update dependencies and add `thiserror` crate (#196 )" This reverts commit `e254ee3203`.	2024-05-30 15:40:44 +07:00
reya	5f30ddcfca	Merge branch 'main' of github.com:lumehq/lume	2024-05-30 15:23:11 +07:00
reya	41d0de539d	feat: revamp nostr connect flow	2024-05-30 15:21:33 +07:00
XIAO YU	e254ee3203	chore: Update dependencies and add `thiserror` crate (#196 )	2024-05-30 07:12:46 +07:00
reya	6d42360549	chore: bump version	2024-05-29 14:47:22 +07:00
reya	70c5143445	feat: redirect to index after add account	2024-05-29 14:41:33 +07:00
reya	41b66b18f5	feat: lazy load onboarding videos	2024-05-29 14:11:30 +07:00
雨宮蓮	dda0720ed4	chore: update deps (#195 )	2024-05-29 12:54:58 +07:00
reya	4b60b39119	chore: bump version	2024-05-29 10:34:32 +07:00
reya	d2e5122d5a	feat: improve splash screen and notification service	2024-05-29 10:33:38 +07:00
reya	32f3315344	fix: editor crash on open	2024-05-28 14:43:34 +07:00
reya	5ca9444358	feat: add theme switcher	2024-05-26 16:11:27 +07:00
reya	4dc13385a5	feat: add option for relay hint	2024-05-26 08:23:29 +07:00
XIAO YU	b90ad1421f	chore: update `keys.rs` and `relay.rs` (#193 )	2024-05-26 07:28:16 +07:00
雨宮蓮	bba324ea53	refactor: use specta for commands (#192 ) * feat: add tauri-specta * refactor: system library * chore: format	2024-05-25 15:21:40 +07:00
reya	7449000f5f	chore: bump version	2024-05-23 08:01:04 +07:00
reya	dc7762ca11	fix: column lose state when navigate back	2024-05-23 08:00:33 +07:00
XIAO YU	3a3f960dde	refactor: use borrowed references for adding and connecting relays (#191 )	2024-05-23 07:08:39 +07:00
reya	12e066ff2e	fix: web	2024-05-22 15:36:41 +07:00
reya	fe4f965ed5	chore: update website	2024-05-22 15:35:41 +07:00
reya	5d3f2264e9	chore: bump version	2024-05-22 13:26:08 +07:00
雨宮蓮	407fe40b67	refactor: account managements (#190 ) * feat: add keyring-search * feat: improve nostr connect	2024-05-22 13:24:58 +07:00
雨宮蓮	1f38eba2cc	feat: immersive onboarding (#189 ) * feat: change the default onboarding column * feat: add newsfeed onboarding * feat: add topic onboarding * feat: add group onboarding * chore: polish and format * feat: rename foryou to topic * fix: array	2024-05-22 10:44:19 +07:00
reya	9b5867f80c	feat: improve tauri commands	2024-05-20 07:05:30 +07:00
reya	cac774a0c1	feat: small ui improve	2024-05-19 08:48:29 +07:00
reya	82689bf3c3	feat: add windows support for v4	2024-05-18 21:02:04 +07:00
reya	f60e438a64	feat: add custom titlebar	2024-05-18 19:07:34 +07:00
reya	ca06f2b6ed	chore: clean up tauri commands	2024-05-18 14:59:34 +07:00
reya	99d9c70826	feat: improve event discovery	2024-05-18 08:16:05 +07:00
reya	60afbf090b	chore: update to rust-nostr 0.31	2024-05-18 07:52:28 +07:00
reya	10ca4e6ff4	chore: bump version	2024-05-17 15:32:14 +07:00
reya	b0f387d029	fix: wrong permissions for dialog	2024-05-17 15:31:35 +07:00
reya	1a8f750640	fix: profile is not show on edit screen	2024-05-17 14:45:17 +07:00
reya	25523229a2	fix: copy to clipboard is not working properly	2024-05-16 14:24:55 +07:00
雨宮蓮	47835ed857	feat: improve ui for multi-account (#188 )	2024-05-16 14:13:07 +07:00