chore: bump version

fix: build on linux
feat: add keyring support for linux and windows
2024-07-31 12:51:41 +07:00 · 2024-07-31 12:51:17 +07:00 · 2024-07-31 10:59:54 +07:00 · 2024-07-19 13:58:32 +07:00 · 2024-07-19 13:10:29 +07:00 · 2024-07-19 10:01:20 +07:00
254 changed files with 27492 additions and 23189 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -16,10 +16,12 @@ jobs:
            args: "--target aarch64-apple-darwin"
          - platform: "macos-latest" # for Intel based macs.
            args: "--target x86_64-apple-darwin"
-            #- platform: 'ubuntu-22.04'
-            #  args: ''
-            #- platform: 'windows-latest'
-            #  args: '--target x86_64-pc-windows-msvc'
+          - platform: "macos-latest" # for Intel based macs.
+            args: "--target universal-apple-darwin"
+          - platform: 'ubuntu-22.04'
+            args: ''
+          - platform: 'windows-latest'
+            args: '--target x86_64-pc-windows-msvc'
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@v4
--- a/.gitignore
+++ b/.gitignore
@@ -35,4 +35,4 @@ dist/
 .DS_Store
 *.pem
 .vscode/
-ndb/
+.idea/
--- a/README.md
+++ b/README.md
@@ -1,18 +1,14 @@
-_Note_: Lume is under rewrite to using Rust Nostr as back-end and more lightweight front-end. If you need stable version, you can download v3 and below.
-
-Source code for v3 is stored here: https://github.com/lumehq/lume/tree/old
-
--
-
 ## Introduction

 Lume is a Nostr client for desktop include Linux, Windows and macOS. It is free and open source, you can look at source code on Github. Lume is actively improving the app and adding new features, you can expect new update every month.

 ## Usage

-Download Lume v3 (v3.0.1-stable) for your platform here: [https://github.com/lumehq/lume/releases](https://github.com/lumehq/lume/releases)
+Download Lume v4 for your platform here: [https://github.com/lumehq/lume/releases](https://github.com/lumehq/lume/releases)

-Supported platform: macOS, Windows and Linux
+Supported platform: macOS. Windows and Linux are coming soon.
+
+Windows and Linux are availabel on v3 and below.

 ## Prerequisites

--- 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,53 +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-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-popover": "^1.0.7",
-		"@radix-ui/react-switch": "^1.0.3",
-		"@radix-ui/react-tooltip": "^1.0.7",
-		"@tanstack/query-sync-storage-persister": "^5.32.0",
-		"@tanstack/react-query": "^5.32.0",
-		"@tanstack/react-query-persist-client": "^5.32.0",
-		"@tanstack/react-router": "1.29.2",
-		"i18next": "^23.11.3",
+		"@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.51.9",
+		"@tanstack/react-query": "^5.51.9",
+		"@tanstack/react-router": "^1.45.4",
+		"embla-carousel-react": "^8.1.6",
+		"i18next": "^23.12.1",
 		"i18next-resources-to-backend": "^1.2.1",
 		"minidenticons": "^4.2.1",
 		"nanoid": "^5.0.7",
-		"nostr-tools": "^2.5.1",
+		"nostr-tools": "^2.7.1",
 		"react": "^18.3.1",
 		"react-currency-input-field": "^3.8.0",
 		"react-dom": "^18.3.1",
-		"react-hook-form": "^7.51.3",
-		"react-hotkeys-hook": "^4.5.0",
-		"react-i18next": "^14.1.1",
-		"slate": "^0.102.0",
-		"slate-react": "^0.102.0",
-		"sonner": "^1.4.41",
-		"use-debounce": "^10.0.0",
-		"virtua": "^0.30.2"
+		"react-hook-form": "^7.52.1",
+		"react-i18next": "^14.1.3",
+		"react-string-replace": "^1.1.1",
+		"slate": "^0.103.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.31.3",
-		"@tanstack/router-vite-plugin": "^1.30.0",
-		"@types/react": "^18.3.1",
+		"@tanstack/router-devtools": "^1.45.4",
+		"@tanstack/router-vite-plugin": "^1.45.3",
+		"@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.10",
-		"vite-plugin-top-level-await": "^1.4.1",
+		"postcss": "^8.4.39",
+		"tailwindcss": "^3.4.6",
+		"typescript": "^5.5.3",
+		"vite": "^5.3.4",
 		"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,33 +1,20 @@
-import { Ark } from "@lume/ark";
-import { CancelCircleIcon, CheckCircleIcon, InfoCircleIcon } from "@lume/icons";
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import { QueryClient } from "@tanstack/react-query";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { 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 { Toaster } from "sonner";
-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 (
+			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+		);
 	},
 });

@@ -48,25 +35,8 @@ const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
 	const root = ReactDOM.createRoot(rootElement);
 	root.render(
-		<I18nextProvider i18n={i18n} defaultNS={"translation"}>
-			<PersistQueryClientProvider
-				client={queryClient}
-				persistOptions={{ persister }}
-			>
-				<StrictMode>
-					<Toaster
-						position="bottom-right"
-						icons={{
-							success: <CheckCircleIcon className="size-5" />,
-							info: <InfoCircleIcon className="size-5" />,
-							error: <CancelCircleIcon className="size-5" />,
-						}}
-						closeButton
-						theme="system"
-					/>
-					<App />
-				</StrictMode>
-			</PersistQueryClientProvider>
-		</I18nextProvider>,
+		<StrictMode>
+			<App />
+		</StrictMode>,
 	);
 }
--- 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 "@lume/ui";
-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/col.tsx
+++ b/apps/desktop2/src/components/col.tsx
@@ -1,160 +0,0 @@
-import { CancelIcon, CheckIcon } from "@lume/icons";
-import type { LumeColumn } from "@lume/types";
-import { cn } from "@lume/utils";
-import { invoke } from "@tauri-apps/api/core";
-import { getCurrent } from "@tauri-apps/api/webviewWindow";
-import { useEffect, useRef, useState } from "react";
-
-export function Col({
-	column,
-	account,
-	isScroll,
-	isResize,
-}: {
-	column: LumeColumn;
-	account: string;
-	isScroll: boolean;
-	isResize: boolean;
-}) {
-	const container = useRef<HTMLDivElement>(null);
-	const [webview, setWebview] = useState<string | undefined>(undefined);
-
-	const repositionWebview = async () => {
-		if (webview && webview.length > 1) {
-			const newRect = container.current.getBoundingClientRect();
-			await invoke("reposition_column", {
-				label: webview,
-				x: newRect.x,
-				y: newRect.y,
-			});
-		}
-	};
-
-	const resizeWebview = async () => {
-		if (webview && webview.length > 1) {
-			const newRect = container.current.getBoundingClientRect();
-			await invoke("resize_column", {
-				label: webview,
-				width: newRect.width,
-				height: newRect.height,
-			});
-		}
-	};
-
-	useEffect(() => {
-		resizeWebview();
-	}, [isResize]);
-
-	useEffect(() => {
-		if (isScroll) repositionWebview();
-	}, [isScroll]);
-
-	useEffect(() => {
-		(async () => {
-			if (webview && webview.length > 1) return;
-
-			const rect = container.current.getBoundingClientRect();
-			const windowLabel = `column-${column.label}`;
-			const url = `${column.content}?account=${account}&label=${column.label}&name=${column.name}`;
-
-			// create new webview
-			const label: string = await invoke("create_column", {
-				label: windowLabel,
-				x: rect.x,
-				y: rect.y,
-				width: rect.width,
-				height: rect.height,
-				url,
-			});
-
-			setWebview(label);
-		})();
-
-		// close webview when unmounted
-		return () => {
-			if (webview && webview.length > 1) {
-				invoke("close_column", {
-					label: webview,
-				});
-			}
-		};
-	}, [webview]);
-
-	return (
-		<div className="h-full w-[440px] shrink-0 p-2">
-			<div
-				className={cn(
-					"flex flex-col w-full h-full rounded-xl",
-					column.label !== "open"
-						? "bg-black/5 dark:bg-white/5 backdrop-blur-sm"
-						: "",
-				)}
-			>
-				{column.label !== "open" ? (
-					<Header label={column.label} name={column.name} />
-				) : null}
-				<div ref={container} className="flex-1 w-full h-full" />
-			</div>
-		</div>
-	);
-}
-
-function Header({ label, name }: { label: string; name: string }) {
-	const [title, setTitle] = useState(name);
-	const [isChanged, setIsChanged] = useState(false);
-
-	const saveNewTitle = async () => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "set_title", label, title });
-
-		// update search params
-		// @ts-ignore, hahaha
-		search.name = title;
-
-		// reset state
-		setIsChanged(false);
-	};
-
-	const close = async () => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "remove", label });
-	};
-
-	useEffect(() => {
-		if (title.length !== name.length) setIsChanged(true);
-	}, [title]);
-
-	return (
-		<div className="h-9 w-full flex items-center justify-between shrink-0 px-1">
-			<div className="size-7" />
-			<div className="shrink-0 h-9 flex items-center justify-center">
-				<div className="relative flex gap-2 items-center">
-					<div
-						contentEditable
-						suppressContentEditableWarning={true}
-						onBlur={(e) => setTitle(e.currentTarget.textContent)}
-						className="text-sm font-medium focus:outline-none"
-					>
-						{name}
-					</div>
-					{isChanged ? (
-						<button
-							type="button"
-							onClick={() => saveNewTitle()}
-							className="text-teal-500 hover:text-teal-600"
-						>
-							<CheckIcon className="size-4" />
-						</button>
-					) : null}
-				</div>
-			</div>
-			<button
-				type="button"
-				onClick={() => close()}
-				className="size-7 inline-flex hover:bg-black/10 rounded-lg dark:hover:bg-white/10 items-center justify-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
-			>
-				<CancelIcon className="size-4" />
-			</button>
-		</div>
-	);
-}
--- a/apps/desktop2/src/components/column.tsx
+++ b/apps/desktop2/src/components/column.tsx
@@ -0,0 +1,211 @@
+import { CheckIcon, HorizontalDotsIcon } from "@lume/icons";
+import type { LumeColumn } from "@lume/types";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+
+type WindowEvent = {
+	scroll: boolean;
+	resize: boolean;
+};
+
+export const Column = memo(function Column({
+	column,
+	account,
+}: {
+	column: LumeColumn;
+	account: string;
+}) {
+	const container = useRef<HTMLDivElement>(null);
+	const webviewLabel = `column-${account}_${column.label}`;
+
+	const [isCreated, setIsCreated] = useState(false);
+
+	const repositionWebview = useCallback(async () => {
+		const newRect = container.current.getBoundingClientRect();
+		await invoke("reposition_column", {
+			label: webviewLabel,
+			x: newRect.x,
+			y: newRect.y,
+		});
+	}, []);
+
+	const resizeWebview = useCallback(async () => {
+		const newRect = container.current.getBoundingClientRect();
+		await invoke("resize_column", {
+			label: webviewLabel,
+			width: newRect.width,
+			height: newRect.height,
+		});
+	}, []);
+
+	useEffect(() => {
+		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 (!container?.current) return;
+
+		const rect = container.current.getBoundingClientRect();
+		const url = `${column.content}?account=${account}&label=${column.label}&name=${column.name}`;
+
+		const prop = {
+			label: webviewLabel,
+			x: rect.x,
+			y: rect.y,
+			width: rect.width,
+			height: rect.height,
+			url,
+		};
+
+		// 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 }).then(() => {
+				console.log("closed: ", webviewLabel);
+			});
+		};
+	}, [account]);
+
+	return (
+		<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,
+	webview,
+	name,
+}: { label: string; webview: string; name: string }) {
+	const [title, setTitle] = useState(name);
+	const [isChanged, setIsChanged] = useState(false);
+
+	const saveNewTitle = async () => {
+		const mainWindow = getCurrentWindow();
+		await mainWindow.emit("columns", { type: "set_title", label, title });
+
+		// update search params
+		// @ts-ignore, hahaha
+		search.name = title;
+
+		// reset state
+		setIsChanged(false);
+	};
+
+	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 getCurrentWindow().emit("columns", {
+						type: "move",
+						label,
+						direction: "left",
+					});
+				},
+			}),
+			MenuItem.new({
+				text: "Move right",
+				action: async () => {
+					await getCurrentWindow().emit("columns", {
+						type: "move",
+						label,
+						direction: "right",
+					});
+				},
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Close",
+				action: async () => {
+					await getCurrentWindow().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="flex items-center justify-between w-full px-1 h-9 shrink-0">
+			<div className="size-7" />
+			<div className="flex items-center justify-center shrink-0 h-7">
+				<div className="relative flex items-center gap-2">
+					<div
+						contentEditable
+						suppressContentEditableWarning={true}
+						onBlur={(e) => setTitle(e.currentTarget.textContent)}
+						className="text-sm font-medium focus:outline-none"
+					>
+						{name}
+					</div>
+					{isChanged ? (
+						<button
+							type="button"
+							onClick={() => saveNewTitle()}
+							className="text-teal-500 hover:text-teal-600"
+						>
+							<CheckIcon className="size-4" />
+						</button>
+					) : null}
+				</div>
+			</div>
+			<button
+				type="button"
+				onClick={(e) => showContextMenu(e)}
+				className="inline-flex items-center justify-center rounded-lg size-7 hover:bg-black/10 dark:hover:bg-white/10"
+			>
+				<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 { Note } from "@/components/note";
 import { ThreadIcon } from "@lume/icons";
-import type { Event } from "@lume/types";
-import { Note } from "@lume/ui";
+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/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
@@ -0,0 +1,81 @@
+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 event = useNoteContext();
+	const { settings } = useRouteContext({ strict: false });
+
+	const [loading, setLoading] = useState(false);
+	const [isRepost, setIsRepost] = useState(false);
+
+	const repost = async () => {
+		if (isRepost) return;
+
+		try {
+			setLoading(true);
+
+			// repost
+			await event.repost();
+
+			// update state
+			setLoading(false);
+			setIsRepost(true);
+		} catch {
+			setLoading(false);
+			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 (
+		<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
@@ -0,0 +1,28 @@
+import { ZapIcon } from "@lume/icons";
+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 { settings } = useRouteContext({ strict: false });
+
+	if (!settings.display_zap_button) return null;
+
+	return (
+		<button
+			type="button"
+			onClick={() => LumeWindow.openZap(event.id)}
+			className={cn(
+				"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
+				large
+					? "rounded-full h-7 gap-1.5 w-20 text-sm font-medium hover:bg-black/10 dark:hover:bg-white/10"
+					: "size-7",
+			)}
+		>
+			<ZapIcon className="size-4" />
+			{large ? "Zap" : null}
+		</button>
+	);
+}
--- a/apps/desktop2/src/components/note/child.tsx
+++ b/apps/desktop2/src/components/note/child.tsx
@@ -0,0 +1,48 @@
+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({
+	event,
+	isRoot,
+}: {
+	event: EventTag;
+	isRoot?: boolean;
+}) {
+	const { isLoading, isError, data } = useEvent(event.id, event.relayHint);
+
+	if (isLoading) {
+		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 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="flex items-center justify-between px-3 h-14">
+					<Note.User />
+				</div>
+				<Note.Content className="px-3" />
+			</Note.Root>
+		</Note.Provider>
+	);
+}
--- a/apps/desktop2/src/components/note/content.tsx
+++ b/apps/desktop2/src/components/note/content.tsx
@@ -0,0 +1,141 @@
+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";
+import { MentionUser } from "./mentions/user";
+import { Images } from "./preview/images";
+import { Videos } from "./preview/videos";
+import { useNoteContext } from "./provider";
+
+export function NoteContent({
+	quote = true,
+	mention = true,
+	clean,
+	className,
+}: {
+	quote?: boolean;
+	mention?: boolean;
+	clean?: boolean;
+	className?: string;
+}) {
+	const { settings } = useRouteContext({ strict: false });
+	const event = useNoteContext();
+
+	const warning = useMemo(() => event.warning, [event]);
+	const content = useMemo(() => {
+		try {
+			// 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);
+				}
+			}
+
+			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);
+				}
+			}
+
+			richContent = reactStringReplace(
+				richContent,
+				/(https?:\/\/\S+)/gi,
+				(match, index) => (
+					<a
+						key={match + index}
+						href={match}
+						target="_blank"
+						rel="noreferrer"
+						className="inline text-blue-500 hover:text-blue-600"
+					>
+						{match}
+					</a>
+				),
+			);
+
+			richContent = reactStringReplace(richContent, /(\r\n|\r|\n)+/g, () => (
+				<div key={nanoid()} className="h-3" />
+			));
+
+			return richContent;
+		} catch {
+			return event.content;
+		}
+	}, [event.content]);
+
+	const [blurred, setBlurred] = useState(() => warning?.length > 0);
+
+	return (
+		<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-pretty content-break overflow-hidden",
+					event.meta?.content.length > 500
+						? "max-h-[250px] gradient-mask-b-0"
+						: "",
+					className,
+				)}
+			>
+				{content}
+			</div>
+			{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
@@ -0,0 +1,94 @@
+import { cn } from "@lume/utils";
+import { nanoid } from "nanoid";
+import { type ReactNode, useMemo } from "react";
+import reactStringReplace from "react-string-replace";
+import { Hashtag } from "./mentions/hashtag";
+import { MentionNote } from "./mentions/note";
+import { MentionUser } from "./mentions/user";
+import { ImagePreview } from "./preview/image";
+import { VideoPreview } from "./preview/video";
+import { useNoteContext } from "./provider";
+
+export function NoteContentLarge({
+	className,
+}: {
+	className?: string;
+}) {
+	const event = useNoteContext();
+	const content = useMemo(() => {
+		try {
+			// Get parsed meta
+			const { images, videos, hashtags, events, mentions } = event.meta;
+
+			// Define rich content
+			let richContent: ReactNode[] | string = event.content;
+
+			for (const hashtag of hashtags) {
+				const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
+				richContent = reactStringReplace(richContent, regex, () => (
+					<Hashtag key={nanoid()} tag={hashtag} />
+				));
+			}
+
+			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>
+				),
+			);
+
+			richContent = reactStringReplace(richContent, /(\r\n|\r|\n)+/g, () => (
+				<div key={nanoid()} className="h-3" />
+			));
+
+			return richContent;
+		} catch (e) {
+			console.log("[parser]: ", e);
+			return event.content;
+		}
+	}, [event.content]);
+
+	return (
+		<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";
@@ -9,7 +8,6 @@ import { NoteContentLarge } from "./contentLarge";
 import { NoteMenu } from "./menu";
 import { NoteProvider } from "./provider";
 import { NoteRoot } from "./root";
-import { NoteThread } from "./thread";
 import { NoteUser } from "./user";

 export const Note = {
@@ -24,6 +22,4 @@ export const Note = {
 	Zap: NoteZap,
 	Open: NoteOpenThread,
 	Child: NoteChild,
-	Thread: NoteThread,
-	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
@@ -0,0 +1,76 @@
+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,
+	openable = true,
+}: {
+	eventId: string;
+	openable?: boolean;
+}) {
+	const { isLoading, isError, data } = useEvent(eventId);
+
+	if (isLoading) {
+		return (
+			<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="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="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>
+				{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
@@ -0,0 +1,62 @@
+import { HorizontalDotsIcon } from "@lume/icons";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { useNoteContext } from "./provider";
+import { useCallback } from "react";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
+
+export function NoteMenu() {
+	const event = useNoteContext();
+
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		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 menu = await Menu.new({
+			items: menuItems,
+		});
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
+
+	return (
+		<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
@@ -0,0 +1,48 @@
+import { useRouteContext } from "@tanstack/react-router";
+import { open } from "@tauri-apps/plugin-shell";
+import { useMemo } from "react";
+
+export function ImagePreview({ url }: { url: string }) {
+	const { settings } = useRouteContext({ strict: false });
+
+	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]);
+
+	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">
+			<img
+				src={imageUrl}
+				alt={url}
+				loading="lazy"
+				decoding="async"
+				style={{ contentVisibility: "auto" }}
+				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";
+				}}
+			/>
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/note/preview/images.tsx
+++ b/apps/desktop2/src/components/note/preview/images.tsx
@@ -0,0 +1,176 @@
+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 { settings } = useRouteContext({ strict: false });
+
+	const [slidesInView, setSlidesInView] = useState([]);
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		dragFree: true,
+		align: "start",
+		watchSlides: false,
+	});
+
+	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 () => {
+			emblaApi?.off("slidesInView", updateSlidesInView);
+			emblaApi?.off("reInit", updateSlidesInView);
+		};
+	}, [emblaApi, updateSlidesInView]);
+
+	if (urls.length === 1) {
+		return (
+			<div className="px-3 group">
+				<img
+					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={() => urls[0]}
+					onKeyDown={() => urls[0]}
+					onError={({ currentTarget }) => {
+						currentTarget.onerror = null;
+						currentTarget.src = "/404.jpg";
+					}}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<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/video.tsx
+++ b/apps/desktop2/src/components/note/preview/video.tsx
@@ -0,0 +1,32 @@
+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">
+			<video
+				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}#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
@@ -0,0 +1,18 @@
+export function Videos({ urls }: { urls: string[] }) {
+	return (
+		<div className="group px-3">
+			{urls.map((url) => (
+				<video
+					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]}#t=0.1`} type="video/mp4" />
+					Your browser does not support the video tag.
+				</video>
+			))}
+		</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/root.tsx
+++ b/apps/desktop2/src/components/note/root.tsx
--- a/apps/desktop2/src/components/note/user.tsx
+++ b/apps/desktop2/src/components/note/user.tsx
@@ -0,0 +1,62 @@
+import { LumeWindow } from "@lume/system";
+import { cn } from "@lume/utils";
+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 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}>
+			<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"
+					>
+						<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>
+						<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 "@lume/ui";
-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 { Note } from "@/components/note";
 import { QuoteIcon } from "@lume/icons";
-import type { Event } from "@lume/types";
-import { Note } from "@lume/ui";
+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,83 +1,82 @@
-import type { Event } from "@lume/types";
-import { Note, Spinner, User } 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 { Note } from "@lume/ui";
+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/about.tsx
+++ b/apps/desktop2/src/components/user/about.tsx
--- a/apps/desktop2/src/components/user/avatar.tsx
+++ b/apps/desktop2/src/components/user/avatar.tsx
@@ -0,0 +1,76 @@
+import { cn } from "@lume/utils";
+import * as Avatar from "@radix-ui/react-avatar";
+import { useRouteContext } from "@tanstack/react-router";
+import { minidenticon } from "minidenticons";
+import { useMemo } from "react";
+import { useUserContext } from "./provider";
+
+export function UserAvatar({ className }: { className?: string }) {
+	const user = useUserContext();
+	const { settings } = useRouteContext({ strict: false });
+
+	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, 60, 50),
+			)}`,
+		[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={cn(
+				"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
+				className,
+			)}
+		>
+			<Avatar.Image
+				src={picture}
+				alt={user.pubkey}
+				loading="lazy"
+				decoding="async"
+				className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
+			/>
+			<Avatar.Fallback>
+				<img
+					src={fallback}
+					alt={user.pubkey}
+					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
@@ -0,0 +1,60 @@
+import { cn } from "@lume/utils";
+import { useEffect, useState } from "react";
+import { Spinner } from "@lume/ui";
+import { useUserContext } from "./provider";
+import { NostrAccount } from "@lume/system";
+
+export function UserFollowButton({
+	simple = false,
+	className,
+}: {
+	simple?: boolean;
+	className?: string;
+}) {
+	const user = useUserContext();
+
+	const [loading, setLoading] = useState(false);
+	const [followed, setFollowed] = useState(false);
+
+	const toggleFollow = async () => {
+		setLoading(true);
+
+		const toggle = await NostrAccount.toggleContact(user.pubkey);
+
+		if (toggle) {
+			setFollowed((prev) => !prev);
+			setLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		let mounted = true;
+
+		NostrAccount.checkContact(user.pubkey).then((status) => {
+			if (mounted) setFollowed(status);
+		});
+
+		return () => {
+			mounted = false;
+		};
+	}, []);
+
+	return (
+		<button
+			type="button"
+			disabled={loading}
+			onClick={() => toggleFollow()}
+			className={cn("w-max", className)}
+		>
+			{loading ? (
+				<Spinner className="size-4" />
+			) : followed ? (
+				!simple ? (
+					"Unfollow"
+				) : null
+			) : (
+				"Follow"
+			)}
+		</button>
+	);
+}
--- a/apps/desktop2/src/components/user/index.ts
+++ b/apps/desktop2/src/components/user/index.ts
--- a/apps/desktop2/src/components/user/name.tsx
+++ b/apps/desktop2/src/components/user/name.tsx
--- 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/components/user/root.tsx
+++ b/apps/desktop2/src/components/user/root.tsx
--- a/apps/desktop2/src/components/user/time.tsx
+++ b/apps/desktop2/src/components/user/time.tsx
--- a/apps/desktop2/src/routes/$account.home.tsx
+++ b/apps/desktop2/src/routes/$account.home.tsx
@@ -1,102 +1,87 @@
-import { Col } from "@/components/col";
+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 { getCurrentWindow } from "@tauri-apps/api/window";
+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")({
-	beforeLoad: async ({ context }) => {
-		try {
-			const ark = context.ark;
-			const resourcePath = await resolveResource(
-				"resources/system_columns.json",
-			);
-			const systemColumns: LumeColumn[] = JSON.parse(
-				await readTextFile(resourcePath),
-			);
-			const userColumns = await ark.get_columns();
-
-			return {
-				storedColumns: !userColumns.length ? systemColumns : userColumns,
-			};
-		} catch (e) {
-			console.error(String(e));
-		}
+	loader: async () => {
+		const columns = await NostrQuery.getColumns();
+		return columns;
 	},
 	component: Screen,
 });

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

-	const [selectedIndex, setSelectedIndex] = useState(-1);
-	const [columns, setColumns] = useState(storedColumns);
-	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();
+	}, [emblaApi]);
+
+	const scrollNext = useCallback(() => {
+		if (emblaApi) emblaApi.scrollNext();
+	}, [emblaApi]);
+
+	const emitScrollEvent = useCallback(() => {
+		getCurrentWindow().emit("child_webview", { scroll: true });
+	}, []);
+
+	const emitResizeEvent = useCallback(() => {
+		getCurrentWindow().emit("child_webview", { resize: true, direction: "x" });
+	}, []);
+
+	const openLumeStore = useCallback(async () => {
+		await getCurrentWindow().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,73 +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();
+				break;
+			case "ArrowRight":
+				if (emblaApi) emblaApi.scrollNext();
+				break;
+			default:
+				break;
+		}
+
+		event.preventDefault();
+	}, 150);

 	useEffect(() => {
-		// save state
-		ark.set_columns(columns);
+		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(() => {
+		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"
-			>
-				{columns.map((column) => (
-					<Col
-						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,178 +1,233 @@
-import { BellIcon, ComposeFilledIcon, PlusIcon, SearchIcon } from "@lume/icons";
-import { Event, Kind } from "@lume/types";
-import { User } from "@lume/ui";
+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 { getCurrent } from "@tauri-apps/api/window";
-import { useEffect, useState } from "react";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+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 getCurrentWindow().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;
+	const navigate = Route.useNavigate();

-		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 } });
-		}
-	};
+			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 getCurrentWindow().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",
-								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",
-									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,44 +1,21 @@
-import type { Ark } from "@lume/ark";
-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";
-
-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: () => <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.messages.tsx
+++ b/apps/desktop2/src/routes/activity.$account.messages.tsx
@@ -1,5 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/activity/$account/messages")({
-	component: () => <div>Hello /activity/$account/messages!</div>,
-});
--- a/apps/desktop2/src/routes/activity.$account.texts.tsx
+++ b/apps/desktop2/src/routes/activity.$account.texts.tsx
@@ -1,60 +0,0 @@
-import { Note, Spinner } from "@lume/ui";
-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,64 +0,0 @@
-import { Note, Spinner, User } 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.lazy.tsx
+++ b/apps/desktop2/src/routes/auth.lazy.tsx
@@ -1,4 +1,4 @@
-import { Box, Container } from "@lume/ui";
+import { Container } from "@lume/ui";
 import { Outlet, createLazyFileRoute } from "@tanstack/react-router";

 export const Route = createLazyFileRoute("/auth")({
@@ -8,9 +8,9 @@ export const Route = createLazyFileRoute("/auth")({
 function Screen() {
 	return (
 		<Container withDrag>
-			<Box className="px-3 pt-3">
+			<div className="max-w-sm mx-auto size-full">
 				<Outlet />
-			</Box>
+			</div>
 		</Container>
 	);
 }
--- 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
@@ -0,0 +1,139 @@
+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";
+
+export const Route = createFileRoute("/auth/create-profile")({
+	loader: async () => {
+		const account = await NostrAccount.createAccount();
+		return account;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const account = Route.useLoaderData();
+	const navigate = useNavigate();
+	const { register, handleSubmit } = useForm();
+
+	const [picture, setPicture] = useState<string>("");
+	const [loading, setLoading] = useState(false);
+
+	const onSubmit = async (data: {
+		name: string;
+		about: string;
+		website: string;
+	}) => {
+		setLoading(true);
+
+		try {
+			// Save account keys
+			const save = await NostrAccount.saveAccount(account.nsec);
+
+			// Then create profile
+			if (save) {
+				const profile: Metadata = { ...data, picture };
+				const eventId = await NostrAccount.createProfile(profile);
+
+				if (eventId) {
+					navigate({
+						to: "/auth/$account/backup",
+						params: { account: account.npub },
+						replace: true,
+					});
+				}
+			}
+		} catch (e) {
+			setLoading(false);
+			await message(String(e), { title: "Create Profile", kind: "error" });
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center size-full gap-4">
+			<div className="text-center">
+				<h3 className="text-xl font-semibold">Let's set up your profile.</h3>
+			</div>
+			<form onSubmit={handleSubmit(onSubmit)} className="w-full mb-0">
+				<div className="flex flex-col gap-3 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					<div className="self-center relative rounded-full size-20 bg-neutral-200 dark:bg-white/70 my-3">
+						{picture ? (
+							<img
+								src={picture}
+								alt="avatar"
+								loading="lazy"
+								decoding="async"
+								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 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>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label htmlFor="display_name" className="font-medium">
+							Display Name *
+						</label>
+						<input
+							type={"text"}
+							{...register("display_name", { required: true, minLength: 1 })}
+							placeholder="e.g. Alice in Nostrland"
+							spellCheck={false}
+							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">
+							Name
+						</label>
+						<input
+							type={"text"}
+							{...register("name")}
+							placeholder="e.g. alice"
+							spellCheck={false}
+							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">
+							Bio
+						</label>
+						<textarea
+							{...register("about")}
+							placeholder="e.g. Artist, anime-lover, and k-pop fan"
+							spellCheck={false}
+							className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label htmlFor="website" className="font-medium">
+							Website
+						</label>
+						<input
+							type="url"
+							{...register("website")}
+							placeholder="e.g. https://alice.me"
+							spellCheck={false}
+							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>
+				</div>
+				<button
+					type="submit"
+					disabled={loading}
+					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"
+				>
+					{loading ? <Spinner /> : "Continue"}
+				</button>
+			</form>
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/auth/import.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/import.lazy.tsx
@@ -0,0 +1,90 @@
+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";
+
+export const Route = createLazyFileRoute("/auth/import")({
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+
+	const [key, setKey] = useState("");
+	const [password, setPassword] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	const submit = async () => {
+		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 NostrAccount.saveAccount(key, password);
+
+			if (npub) {
+				navigate({ to: "/", replace: true });
+			}
+		} catch (e) {
+			setLoading(false);
+			await message(String(e), { title: "Import Key", kind: "error" });
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center size-full gap-4">
+			<div className="text-center">
+				<h3 className="text-xl font-semibold">Continue with Private Key</h3>
+			</div>
+			<div className="flex flex-col w-full">
+				<div className="flex flex-col gap-3 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="key"
+							className="font-medium text-neutral-900 dark:text-neutral-100"
+						>
+							Private Key
+						</label>
+						<input
+							name="key"
+							type="text"
+							placeholder="nsec or ncryptsec..."
+							value={key}
+							onChange={(e) => setKey(e.target.value)}
+							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="password"
+							className="font-medium text-neutral-900 dark:text-neutral-100"
+						>
+							Password (Optional)
+						</label>
+						<input
+							name="password"
+							type="password"
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							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>
+				<button
+					type="button"
+					onClick={() => submit()}
+					disabled={loading}
+					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"
+				>
+					{loading ? <Spinner /> : "Login"}
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/auth/new/profile.tsx
+++ b/apps/desktop2/src/routes/auth/new/profile.tsx
@@ -1,143 +0,0 @@
-import { AvatarUploader } from "@/components/avatarUploader";
-import { PlusIcon } from "@lume/icons";
-import type { Metadata } from "@lume/types";
-import { Spinner } from "@lume/ui";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
-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();
-	},
-});
-
-function Screen() {
-	const keys = Route.useLoaderData();
-	const navigate = useNavigate();
-
-	const { t } = useTranslation();
-	const { ark } = Route.useRouteContext();
-	const { register, handleSubmit } = useForm();
-
-	const [picture, setPicture] = useState<string>("");
-	const [loading, setLoading] = useState(false);
-
-	const onSubmit = async (data: {
-		name: string;
-		about: string;
-		website: string;
-	}) => {
-		setLoading(true);
-
-		try {
-			// Save account keys
-			const save = await ark.save_account(keys.nsec);
-
-			// Then create profile
-			if (save) {
-				const profile: Metadata = { ...data, picture };
-				const eventId = await ark.create_profile(profile);
-
-				if (eventId) {
-					navigate({
-						to: "/auth/new/backup",
-						search: { account: keys.npub },
-						replace: true,
-					});
-				}
-			}
-		} catch (e) {
-			setLoading(false);
-			toast.error(String(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="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">
-					{picture ? (
-						<img
-							src={picture}
-							alt="avatar"
-							loading="lazy"
-							decoding="async"
-							className="absolute inset-0 z-10 h-full w-full rounded-full object-cover"
-						/>
-					) : 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"
-					>
-						<PlusIcon className="size-8" />
-					</AvatarUploader>
-				</div>
-			</div>
-			<form
-				onSubmit={handleSubmit(onSubmit)}
-				className="flex w-full flex-col gap-3"
-			>
-				<div className="flex flex-col gap-1">
-					<label htmlFor="display_name" className="font-medium">
-						{t("user.displayName")} *
-					</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"
-					/>
-				</div>
-				<div className="flex flex-col gap-1">
-					<label htmlFor="name" className="font-medium">
-						{t("user.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"
-					/>
-				</div>
-				<div className="flex flex-col gap-1">
-					<label htmlFor="about" className="font-medium">
-						{t("user.bio")}
-					</label>
-					<textarea
-						{...register("about")}
-						placeholder="e.g. Artist, anime-lover, and k-pop fan"
-						spellCheck={false}
-						className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
-					/>
-				</div>
-				<div className="flex flex-col gap-1">
-					<label htmlFor="website" className="font-medium">
-						{t("user.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"
-					/>
-				</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"
-				>
-					{loading ? <Spinner /> : t("global.continue")}
-				</button>
-			</form>
-		</div>
-	);
-}
--- a/apps/desktop2/src/routes/auth/privkey.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/privkey.lazy.tsx
@@ -1,90 +0,0 @@
-import { Spinner } from "@lume/ui";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
-import { toast } from "sonner";
-
-export const Route = createLazyFileRoute("/auth/privkey")({
-	component: Screen,
-});
-
-function Screen() {
-	const { ark } = Route.useRouteContext();
-	const navigate = Route.useNavigate();
-
-	const [key, setKey] = useState("");
-	const [password, setPassword] = useState("");
-	const [loading, setLoading] = useState(false);
-
-	const submit = async () => {
-		if (!key.startsWith("nsec1"))
-			return toast.warning(
-				"You need to enter a valid private key starts with nsec or ncryptsec",
-			);
-
-		try {
-			setLoading(true);
-
-			const npub = await ark.save_account(key, password);
-
-			if (npub) {
-				navigate({
-					to: "/auth/settings",
-					search: { account: npub },
-					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="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 gap-1">
-					<label
-						htmlFor="key"
-						className="font-medium text-neutral-900 dark:text-neutral-100"
-					>
-						Private Key
-					</label>
-					<input
-						name="key"
-						type="text"
-						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"
-					/>
-				</div>
-				<div className="flex flex-col gap-1">
-					<label
-						htmlFor="password"
-						className="font-medium text-neutral-900 dark:text-neutral-100"
-					>
-						Password (Optional)
-					</label>
-					<input
-						name="password"
-						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"
-					/>
-				</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>
-		</div>
-	);
-}
--- a/apps/desktop2/src/routes/auth/remote.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/remote.lazy.tsx
@@ -1,50 +1,48 @@
+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 size-full gap-4">
 			<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 gap-1">
+			<div className="flex flex-col w-full">
+				<div className="flex flex-col gap-1 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
 					<label
 						htmlFor="uri"
 						className="font-medium text-neutral-900 dark:text-neutral-100"
@@ -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 h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg 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-4">
+				<div className="text-center">
+					<h2 className="text-xl 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,9 +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, User } from "@lume/ui";
-import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { Spinner } from "@lume/ui";
+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 => {
@@ -13,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 { getCurrentWindow } 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" });
 		}
 	};

@@ -34,7 +32,7 @@ export function MediaButton({ className }: { className?: string }) {
 		let unlisten: UnlistenFn = undefined;

 		async function listenFileDrop() {
-			const window = getCurrent();
+			const window = getCurrentWindow();
 			if (!unlisten) {
 				unlisten = await window.listen("tauri://file-drop", async (event) => {
 					// @ts-ignore, lfg !!!
@@ -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 { User } from "@lume/ui";
-import { useSlateStatic } from "slate-react";
-import type { Contact } from "@lume/types";
-import { toast } from "sonner";
-
-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,17 +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 { MentionNote } from "@lume/ui/src/note/mentions/note";
-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,
@@ -23,58 +19,65 @@ import {
 	withReact,
 } from "slate-react";
 import { MediaButton } from "./-components/media";
-import { NsfwToggle } from "./-components/nsfw";
-import { MentionButton } from "./-components/mention";
+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())))),
 	);
@@ -115,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}
@@ -177,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;

@@ -199,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);
@@ -251,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>
 	);
 };
@@ -294,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>
 	);
 };
@@ -306,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,71 +0,0 @@
-import { useEvent } from "@lume/ark";
-import type { Event } from "@lume/types";
-import { Box, Container, Note, Spinner } from "@lume/ui";
-import { createFileRoute } from "@tanstack/react-router";
-import { WindowVirtualizer } from "virtua";
-import { ReplyList } from "./-components/replyList";
-
-export const Route = createFileRoute("/events/$eventId")({
-	beforeLoad: async ({ context }) => {
-		const ark = context.ark;
-		const settings = await ark.get_settings();
-
-		return { settings };
-	},
-	component: Screen,
-});
-
-function Screen() {
-	const { eventId } = Route.useParams();
-	const { isLoading, isError, data } = useEvent(eventId);
-
-	if (isLoading) {
-		return (
-			<div className="flex h-full w-full items-center justify-center">
-				<Spinner className="size-5" />
-			</div>
-		);
-	}
-
-	if (isError) {
-		<div className="flex h-full w-full items-center justify-center">
-			<p>Not found.</p>
-		</div>;
-	}
-
-	return (
-		<Container withDrag>
-			<Box className="scrollbar-none">
-				<WindowVirtualizer>
-					<MainNote data={data} />
-					{data ? (
-						<ReplyList eventId={eventId} />
-					) : (
-						<div className="flex h-full w-full items-center justify-center">
-							<Spinner className="size-5" />
-						</div>
-					)}
-				</WindowVirtualizer>
-			</Box>
-		</Container>
-	);
-}
-
-function MainNote({ data }: { data: Event }) {
-	return (
-		<Note.Provider event={data}>
-			<Note.Root>
-				<div className="px-3 h-14 flex items-center justify-between">
-					<Note.User />
-					<Note.Menu />
-				</div>
-				<Note.ContentLarge className="px-3" />
-				<div className="mt-4 h-11 gap-2 flex items-center justify-end px-3">
-					<Note.Reply large />
-					<Note.Repost large />
-					<Note.Zap large />
-				</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-}
--- a/apps/desktop2/src/routes/events/$id.tsx
+++ b/apps/desktop2/src/routes/events/$id.tsx
@@ -0,0 +1,146 @@
+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 { getCurrentWindow } 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 = getCurrentWindow().listen<Payload>(
+			"new_reply",
+			(data) => {
+				const event = LumeEvent.from(data.payload.raw, data.payload.parsed);
+				setReplies((prev) => [event, ...prev]);
+			},
+		);
+
+		const unlistenWindow = getCurrentWindow().onCloseRequested(async () => {
+			await event.unlistenEventReply();
+			await getCurrentWindow().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/Show More
+++ b/Show More
Author	SHA1	Message	Date
reya	a5255fa503	chore: bump version	2024-07-31 12:51:41 +07:00
reya	954a17b541	fix: build on linux	2024-07-31 12:51:17 +07:00
reya	a55b31b0e6	feat: add keyring support for linux and windows	2024-07-31 10:59:54 +07:00
reya	bdf3ffd7bf	fix: tray panel is missing	2024-07-19 13:58:32 +07:00
reya	07ce253f5b	fix: child webview is not reposition after scroll	2024-07-19 13:10:29 +07:00
reya	f3db010c74	chore: update tauri config	2024-07-19 10:01:20 +07:00
reya	dcf2791fe5	fix: build	2024-07-19 09:28:03 +07:00
reya	8fcf3551d8	chore: bump version	2024-07-19 08:33:46 +07:00
reya	2d987849d8	feat: use native border in macos	2024-07-19 08:33:16 +07:00
reya	3b99926f3b	feat: adapt latest changes in tauri v2	2024-07-19 08:25:36 +07:00
reya	113d69a4df	chore: update deps	2024-07-18 18:57:28 +07:00
reya	5d12ba7216	fix: some screen too large	2024-07-03 14:36:54 +07:00
reya	72b59020b4	fix: build on linux and windows	2024-07-03 14:09:07 +07:00
XIAO YU	4c323b9daa	chore: Refactor code to use HashSet for account search results (#222 )	2024-07-03 07:33:16 +07:00
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
reya	d84647bc6b	chore: bump version	2024-05-15 13:58:39 +07:00
reya	7724eccd72	feat: improve tauri commands	2024-05-15 13:58:03 +07:00
reya	8ea2335225	chore: update deps	2024-05-15 10:50:35 +07:00
reya	b60d4db0df	feat: improve multi-account switching	2024-05-15 10:14:21 +07:00
reya	f1e17ff3c4	fix: allow app auto restart after update	2024-05-13 15:36:47 +07:00
reya	32954f17b6	chore: bump version and update readme	2024-05-13 15:21:05 +07:00
雨宮蓮	cf70b0f882	fix: context issue in production (#187 )	2024-05-13 15:18:23 +07:00