feat: Multi Accounts (#237)

* wip: new sync * wip: restructure routes * update * feat: improve sync * feat: repost with multi-account * feat: improve sync * feat: publish with multi account * fix: settings screen * feat: add zap for multi accounts
2024-10-22 16:00:06 +07:00
parent ba9c81a10a
commit cc7de41bfd
89 changed files with 2695 additions and 2911 deletions
--- a/src/commands.gen.ts
+++ b/src/commands.gen.ts
@@ -5,9 +5,9 @@


 export const commands = {
-async getRelays() : Promise<Result<Relays, string>> {
+async getRelays(id: string) : Promise<Result<Relays, string>> {
    try {
-    return { status: "ok", data: await TAURI_INVOKE("get_relays") };
+    return { status: "ok", data: await TAURI_INVOKE("get_relays", { id }) };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
@@ -48,9 +48,9 @@ async saveBootstrapRelays(relays: string) : Promise<Result<null, string>> {
 async getAccounts() : Promise<string[]> {
    return await TAURI_INVOKE("get_accounts");
 },
-async createAccount(name: string, about: string, picture: string, password: string) : Promise<Result<string, string>> {
+async watchAccount(key: string) : Promise<Result<string, string>> {
    try {
-    return { status: "ok", data: await TAURI_INVOKE("create_account", { name, about, picture, password }) };
+    return { status: "ok", data: await TAURI_INVOKE("watch_account", { key }) };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
@@ -96,15 +96,17 @@ async resetPassword(key: string, password: string) : Promise<Result<null, string
    else return { status: "error", error: e  as any };
 }
 },
-async isAccountSync(id: string) : Promise<boolean> {
-    return await TAURI_INVOKE("is_account_sync", { id });
-},
-async createSyncFile(id: string) : Promise<boolean> {
-    return await TAURI_INVOKE("create_sync_file", { id });
-},
-async login(account: string, password: string) : Promise<Result<string, string>> {
+async hasSigner(id: string) : Promise<Result<boolean, string>> {
    try {
-    return { status: "ok", data: await TAURI_INVOKE("login", { account, password }) };
+    return { status: "ok", data: await TAURI_INVOKE("has_signer", { id }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
+async setSigner(account: string, password: string) : Promise<Result<null, string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("set_signer", { account, password }) };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
@@ -126,9 +128,9 @@ async setProfile(profile: Profile) : Promise<Result<string, string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async getContactList() : Promise<Result<string[], string>> {
+async getContactList(id: string) : Promise<Result<string[], string>> {
    try {
-    return { status: "ok", data: await TAURI_INVOKE("get_contact_list") };
+    return { status: "ok", data: await TAURI_INVOKE("get_contact_list", { id }) };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
@@ -142,9 +144,9 @@ async setContactList(publicKeys: string[]) : Promise<Result<boolean, string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async checkContact(id: string) : Promise<Result<boolean, string>> {
+async isContact(id: string) : Promise<Result<boolean, string>> {
    try {
-    return { status: "ok", data: await TAURI_INVOKE("check_contact", { id }) };
+    return { status: "ok", data: await TAURI_INVOKE("is_contact", { id }) };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
@@ -158,9 +160,9 @@ async toggleContact(id: string, alias: string | null) : Promise<Result<string, s
    else return { status: "error", error: e  as any };
 }
 },
-async getMentionList() : Promise<Result<Mention[], string>> {
+async getAllProfiles() : Promise<Result<Mention[], string>> {
    try {
-    return { status: "ok", data: await TAURI_INVOKE("get_mention_list") };
+    return { status: "ok", data: await TAURI_INVOKE("get_all_profiles") };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
@@ -222,7 +224,7 @@ async setWallet(uri: string) : Promise<Result<boolean, string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async loadWallet() : Promise<Result<string, string>> {
+async loadWallet() : Promise<Result<null, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("load_wallet") };
 } catch (e) {
@@ -238,7 +240,7 @@ async removeWallet() : Promise<Result<null, string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async zapProfile(id: string, amount: string, message: string) : Promise<Result<boolean, string>> {
+async zapProfile(id: string, amount: string, message: string | null) : Promise<Result<null, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("zap_profile", { id, amount, message }) };
 } catch (e) {
@@ -246,7 +248,7 @@ async zapProfile(id: string, amount: string, message: string) : Promise<Result<b
    else return { status: "error", error: e  as any };
 }
 },
-async zapEvent(id: string, amount: string, message: string) : Promise<Result<boolean, string>> {
+async zapEvent(id: string, amount: string, message: string | null) : Promise<Result<null, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("zap_event", { id, amount, message }) };
 } catch (e) {
@@ -262,9 +264,9 @@ async copyFriend(npub: string) : Promise<Result<boolean, string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async getNotifications() : Promise<Result<string[], string>> {
+async getNotifications(id: string) : Promise<Result<string[], string>> {
    try {
-    return { status: "ok", data: await TAURI_INVOKE("get_notifications") };
+    return { status: "ok", data: await TAURI_INVOKE("get_notifications", { id }) };
 } catch (e) {
    if(e instanceof Error) throw e;
    else return { status: "error", error: e  as any };
@@ -294,14 +296,6 @@ async verifyNip05(id: string, nip05: string) : Promise<Result<boolean, string>>
    else return { status: "error", error: e  as any };
 }
 },
-async isTrustedUser(id: string) : Promise<Result<boolean, string>> {
-    try {
-    return { status: "ok", data: await TAURI_INVOKE("is_trusted_user", { id }) };
-} catch (e) {
-    if(e instanceof Error) throw e;
-    else return { status: "error", error: e  as any };
-}
-},
 async getEventMeta(content: string) : Promise<Result<Meta, null>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("get_event_meta", { content }) };
@@ -382,22 +376,6 @@ async getGlobalEvents(until: string | null) : Promise<Result<RichEvent[], string
    else return { status: "error", error: e  as any };
 }
 },
-async isDeletedEvent(id: string) : Promise<Result<boolean, string>> {
-    try {
-    return { status: "ok", data: await TAURI_INVOKE("is_deleted_event", { id }) };
-} catch (e) {
-    if(e instanceof Error) throw e;
-    else return { status: "error", error: e  as any };
-}
-},
-async requestDelete(id: string) : Promise<Result<null, string>> {
-    try {
-    return { status: "ok", data: await TAURI_INVOKE("request_delete", { id }) };
-} catch (e) {
-    if(e instanceof Error) throw e;
-    else return { status: "error", error: e  as any };
-}
-},
 async search(query: string) : Promise<Result<RichEvent[], string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("search", { query }) };
@@ -430,6 +408,30 @@ async repost(raw: string) : Promise<Result<string, string>> {
    else return { status: "error", error: e  as any };
 }
 },
+async isReposted(id: string) : Promise<Result<boolean, string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("is_reposted", { id }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
+async requestDelete(id: string) : Promise<Result<null, string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("request_delete", { id }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
+async isDeletedEvent(id: string) : Promise<Result<boolean, string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("is_deleted_event", { id }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
 async eventToBech32(id: string) : Promise<Result<string, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("event_to_bech32", { id }) };
@@ -478,7 +480,7 @@ async closeColumn(label: string) : Promise<Result<boolean, string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async openWindow(window: Window) : Promise<Result<null, string>> {
+async openWindow(window: Window) : Promise<Result<string, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("open_window", { window }) };
 } catch (e) {
@@ -498,9 +500,11 @@ async quit() : Promise<void> {


 export const events = __makeEvents__<{
+negentropyEvent: NegentropyEvent,
 newSettings: NewSettings,
 subscription: Subscription
 }>({
+negentropyEvent: "negentropy-event",
 newSettings: "new-settings",
 subscription: "subscription"
 })
@@ -514,14 +518,16 @@ subscription: "subscription"
 export type Column = { label: string; url: string; x: number; y: number; width: number; height: number }
 export type Mention = { pubkey: string; avatar: string; display_name: string; name: string }
 export type Meta = { content: string; images: string[]; events: string[]; mentions: string[]; hashtags: string[] }
+export type NegentropyEvent = { kind: NegentropyKind; total_event: number }
+export type NegentropyKind = "Profile" | "Metadata" | "Events" | "EventIds" | "Global" | "Notification" | "Others"
 export type NewSettings = Settings
 export type Profile = { name: string; display_name: string; about: string | null; picture: string; banner: string | null; nip05: string | null; lud16: string | null; website: string | null }
 export type Relays = { connected: string[]; read: string[] | null; write: string[] | null; both: string[] | null }
 export type RichEvent = { raw: string; parsed: Meta | null }
 export type Settings = { proxy: string | null; image_resize_service: string | null; use_relay_hint: boolean; content_warning: boolean; trusted_only: boolean; display_avatar: boolean; display_zap_button: boolean; display_repost_button: boolean; display_media: boolean; transparent: boolean }
 export type SubKind = "Subscribe" | "Unsubscribe"
-export type Subscription = { label: string; kind: SubKind; event_id: string | null }
-export type Window = { label: string; title: string; url: string; width: number; height: number; maximizable: boolean; minimizable: boolean; hidden_title: boolean }
+export type Subscription = { label: string; kind: SubKind; event_id: string | null; contacts: string[] | null }
+export type Window = { label: string; title: string; url: string; width: number; height: number; maximizable: boolean; minimizable: boolean; hidden_title: boolean; closable: boolean }

 /** tauri-specta globals **/

--- a/src/commons.ts
+++ b/src/commons.ts
@@ -155,7 +155,7 @@ export function decodeZapInvoice(tags?: string[][]) {
 	);

 	// @ts-ignore, its fine.
-	const amount = Number.parseInt(amountSection.value);
+	const amount = Number.parseInt(amountSection.value) / 1000;
 	const displayValue = getBitcoinDisplayValues(amount);

 	return displayValue;
--- a/src/components/column.tsx
+++ b/src/components/column.tsx
@@ -1,23 +1,17 @@
 import { commands } from "@/commands.gen";
-import { appColumns } from "@/commons";
 import { useRect } from "@/system";
 import type { LumeColumn } from "@/types";
 import { CaretDown, Check } from "@phosphor-icons/react";
-import { useParams } from "@tanstack/react-router";
-import { useStore } from "@tanstack/react-store";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { User } from "./user";

 export function Column({ column }: { column: LumeColumn }) {
-	const params = useParams({ strict: false });
-	const webviewLabel = useMemo(
-		() => `column-${params.account}_${column.label}`,
-		[params.account, column.label],
-	);
+	const webviewLabel = useMemo(() => `column-${column.label}`, [column.label]);

 	const [rect, ref] = useRect();
-	const [error, setError] = useState<string>(null);
+	const [_error, setError] = useState<string>(null);

 	useEffect(() => {
 		(async () => {
@@ -52,7 +46,7 @@ export function Column({ column }: { column: LumeColumn }) {
 					y: initialRect.y,
 					width: initialRect.width,
 					height: initialRect.height,
-					url: `${column.url}?account=${params.account}&label=${column.label}&name=${column.name}`,
+					url: `${column.url}?label=${column.label}&name=${column.name}`,
 				})
 				.then((res) => {
 					if (res.status === "ok") {
@@ -73,42 +67,35 @@ export function Column({ column }: { column: LumeColumn }) {
 				});
 			};
 		}
-	}, [params.account]);
+	}, []);

 	return (
 		<div className="h-full w-[440px] shrink-0 border-r border-black/5 dark:border-white/5">
 			<div className="flex flex-col gap-px size-full">
-				<Header label={column.label} />
+				<Header
+					label={column.label}
+					name={column.name}
+					account={column.account}
+				/>
 				<div ref={ref} className="flex-1 size-full" />
 			</div>
 		</div>
 	);
 }

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

-	const column = useStore(appColumns, (state) =>
-		state.find((col) => col.label === label),
-	);
-
-	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 window = getCurrentWindow();
+
 		const menuItems = await Promise.all([
 			MenuItem.new({
 				text: "Reload",
@@ -116,10 +103,6 @@ function Header({ label }: { label: string }) {
 					await commands.reloadColumn(label);
 				},
 			}),
-			MenuItem.new({
-				text: "Open in new window",
-				action: () => console.log("not implemented."),
-			}),
 			PredefinedMenuItem.new({ item: "Separator" }),
 			MenuItem.new({
 				text: "Move left",
@@ -160,6 +143,15 @@ function Header({ label }: { label: string }) {
 		await menu.popup().catch((e) => console.error(e));
 	}, []);

+	const saveNewTitle = async () => {
+		await getCurrentWindow().emit("columns", {
+			type: "set_title",
+			label,
+			title,
+		});
+		setIsChanged(false);
+	};
+
 	useEffect(() => {
 		if (title.length > 0) setIsChanged(true);
 	}, [title.length]);
@@ -168,13 +160,20 @@ function Header({ label }: { label: string }) {
 		<div className="group flex items-center justify-center gap-2 w-full h-9 shrink-0">
 			<div className="flex items-center justify-center shrink-0 h-7">
 				<div className="relative flex items-center gap-2">
+					{account?.length ? (
+						<User.Provider pubkey={account}>
+							<User.Root>
+								<User.Avatar className="size-6 rounded-full" />
+							</User.Root>
+						</User.Provider>
+					) : null}
 					<div
 						contentEditable
 						suppressContentEditableWarning={true}
 						onBlur={(e) => setTitle(e.currentTarget.textContent)}
 						className="text-[12px] font-semibold focus:outline-none"
 					>
-						{column.name}
+						{name}
 					</div>
 					{isChanged ? (
 						<button
--- a/src/components/conversation.tsx
+++ b/src/components/conversation.tsx
@@ -1,47 +0,0 @@
-import { cn } from "@/commons";
-import { Note } from "@/components/note";
-import type { LumeEvent } from "@/system";
-import { ChatsTeardrop } from "@phosphor-icons/react";
-import { memo, useMemo } from "react";
-
-export const Conversation = memo(function Conversation({
-	event,
-	className,
-}: {
-	event: LumeEvent;
-	className?: string;
-}) {
-	const thread = useMemo(() => event.thread, [event]);
-
-	return (
-		<Note.Provider event={event}>
-			<Note.Root
-				className={cn(
-					"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?.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">
-							<ChatsTeardrop className="size-4" />
-							Thread
-						</div>
-						<div className="flex-1 h-px bg-neutral-100 dark:bg-white/5" />
-					</div>
-					{thread?.reply?.id ? <Note.Child event={thread?.reply} /> : null}
-					<div>
-						<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 px-3 h-14">
-					<Note.Open />
-				</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-});
--- a/src/components/frame.tsx
+++ b/src/components/frame.tsx
@@ -1,5 +1,4 @@
 import { cn } from "@/commons";
-import { useRouteContext } from "@tanstack/react-router";
 import type { ReactNode } from "react";

 export function Frame({
@@ -7,17 +6,13 @@ export function Frame({
 	shadow,
 	className,
 }: { children: ReactNode; shadow?: boolean; className?: string }) {
-	const { platform } = useRouteContext({ strict: false });
-
 	return (
 		<div
 			className={cn(
 				className,
-				platform === "linux"
-					? "bg-white dark:bg-neutral-950"
-					: "bg-white dark:bg-white/10",
+				"bg-white dark:bg-neutral-800",
 				shadow
-					? "shadow-lg shadow-neutral-500/10 dark:shadow-none dark:ring-1 dark:ring-white/20"
+					? "shadow-primary dark:shadow-none dark:ring-1 dark:ring-neutral-700/50"
 					: "",
 			)}
 		>
--- a/src/components/icons/publish.tsx
+++ b/src/components/icons/publish.tsx
@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+export const PublishIcon = (props: SVGProps<SVGSVGElement>) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		fill="none"
+		viewBox="0 0 24 24"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			fillRule="evenodd"
+			d="M19.432 2.738c.505.54.728 1.327.443 2.133-.606 1.713-1.798 3.124-2.797 4.087a15.74 15.74 0 01-1.045.921l.137.1c.93.684 1.416 1.975.757 3.118-1.221 2.12-4.356 5.803-11.192 5.803a.753.753 0 01-.15-.015A32.702 32.702 0 005.5 21.25a.75.75 0 01-1.5 0c0-4.43.821-8.93 2.909-12.485 2.106-3.587 5.49-6.182 10.492-6.749a2.404 2.404 0 012.031.722z"
+			clipRule="evenodd"
+		/>
+	</svg>
+);
--- a/src/components/icons/quote.tsx
+++ b/src/components/icons/quote.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from "react";
+
+export const QuoteIcon = (props: SVGProps<SVGSVGElement>) => (
+	<svg
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
+		<path
+			d="M2.75 5.75a2 2 0 0 1 2-2h14.5a2 2 0 0 1 2 2v10.5a2 2 0 0 1-2 2h-3.874a1 1 0 0 0-.638.23l-2.098 1.738a1 1 0 0 1-1.28-.003l-2.066-1.731a1 1 0 0 0-.642-.234H4.75a2 2 0 0 1-2-2z"
+			stroke="currentColor"
+			strokeWidth={1.5}
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M9.523 8C8.406 8 7.5 8.91 7.5 10.033a2.028 2.028 0 0 0 2.81 1.874q-.072.132-.157.251c-.353.502-.875.885-1.554 1.34a.453.453 0 0 0-.125.626.45.45 0 0 0 .624.125c.67-.449 1.328-.913 1.79-1.569.474-.674.716-1.51.658-2.66A2.03 2.03 0 0 0 9.523 8m4.945 0c-1.117 0-2.023.91-2.023 2.033a2.028 2.028 0 0 0 2.81 1.874q-.072.132-.156.251c-.353.502-.876.885-1.554 1.34a.453.453 0 0 0-.125.626.45.45 0 0 0 .623.125c.67-.449 1.328-.913 1.79-1.569.474-.674.717-1.51.658-2.66A2.03 2.03 0 0 0 14.468 8"
+			fill="currentColor"
+		/>
+	</svg>
+);
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,10 +4,8 @@ export * from "./spinner";
 export * from "./column";

 // Newsfeed
-export * from "./repost";
-export * from "./conversation";
-export * from "./quote";
 export * from "./text";
+export * from "./repost";
 export * from "./reply";

 // Global components
@@ -18,3 +16,5 @@ export * from "./user";
 export * from "./icons/reply";
 export * from "./icons/repost";
 export * from "./icons/zap";
+export * from "./icons/quote";
+export * from "./icons/publish";
--- a/src/components/note/buttons/open.tsx
+++ b/src/components/note/buttons/open.tsx
@@ -8,7 +8,7 @@ export function NoteOpenThread() {

 	return (
 		<Tooltip.Provider>
-			<Tooltip.Root delayDuration={150}>
+			<Tooltip.Root delayDuration={300}>
 				<Tooltip.Trigger asChild>
 					<button
 						type="button"
--- a/src/components/note/buttons/quote.tsx
+++ b/src/components/note/buttons/quote.tsx
@@ -0,0 +1,40 @@
+import { cn } from "@/commons";
+import { QuoteIcon } from "@/components";
+import { LumeWindow } from "@/system";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useNoteContext } from "../provider";
+
+export function NoteQuote({
+	label = false,
+	smol = false,
+}: { label?: boolean; smol?: boolean }) {
+	const event = useNoteContext();
+
+	return (
+		<Tooltip.Provider>
+			<Tooltip.Root delayDuration={150}>
+				<Tooltip.Trigger asChild>
+					<button
+						type="button"
+						onClick={() => LumeWindow.openEditor(null, event.id)}
+						className={cn(
+							"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
+							label
+								? "rounded-full h-7 gap-1.5 w-20 text-sm font-medium hover:bg-black/10 dark:hover:bg-white/10"
+								: "size-7",
+						)}
+					>
+						<QuoteIcon className={cn("shrink-0", smol ? "size-4" : "size-5")} />
+						{label ? "Quote" : null}
+					</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">
+						Quote
+						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	);
+}
--- a/src/components/note/buttons/reply.tsx
+++ b/src/components/note/buttons/reply.tsx
@@ -18,10 +18,8 @@ export function NoteReply({
 						type="button"
 						onClick={() => LumeWindow.openEditor(event.id)}
 						className={cn(
-							"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
-							label
-								? "rounded-full h-7 gap-1.5 w-20 text-sm font-medium hover:bg-black/10 dark:hover:bg-white/10"
-								: "size-7",
+							"h-7 rounded-full inline-flex items-center justify-center text-neutral-800 hover:bg-black/5 dark:hover:bg-white/5 dark:text-neutral-200 text-sm font-medium",
+							label ? "w-24 gap-1.5" : "w-14",
 						)}
 					>
 						<ReplyIcon className={cn("shrink-0", smol ? "size-4" : "size-5")} />
--- a/src/components/note/buttons/repost.tsx
+++ b/src/components/note/buttons/repost.tsx
@@ -1,88 +1,174 @@
-import { appSettings, cn } from "@/commons";
+import { commands } from "@/commands.gen";
+import { appSettings, cn, displayNpub } from "@/commons";
 import { RepostIcon, Spinner } from "@/components";
 import { LumeWindow } from "@/system";
+import type { Metadata } from "@/types";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useStore } from "@tanstack/react-store";
 import { Menu, MenuItem } from "@tauri-apps/api/menu";
-import { message } from "@tauri-apps/plugin-dialog";
-import { useCallback, useState } from "react";
+import type { Window } from "@tauri-apps/api/window";
+import { useCallback, useEffect, useState, useTransition } from "react";
 import { useNoteContext } from "../provider";

 export function NoteRepost({
 	label = false,
 	smol = false,
 }: { label?: boolean; smol?: boolean }) {
-	const visible = useStore(appSettings, (state) => state.display_repost_button);
 	const event = useNoteContext();
+	const visible = useStore(appSettings, (state) => state.display_repost_button);
+	const queryClient = useQueryClient();

-	const [loading, setLoading] = useState(false);
-	const [isRepost, setIsRepost] = useState(false);
+	const { isLoading, data: status } = useQuery({
+		queryKey: ["is-reposted", event.id],
+		queryFn: async () => {
+			const res = await commands.isReposted(event.id);
+			if (res.status === "ok") {
+				return res.data;
+			} else {
+				return false;
+			}
+		},
+		enabled: visible,
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+		staleTime: Number.POSITIVE_INFINITY,
+		retry: 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 [isPending, startTransition] = useTransition();
+	const [popup, setPopup] = useState<Window>(null);

 	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
 		e.preventDefault();

-		const menuItems = await Promise.all([
-			MenuItem.new({
-				text: "Repost",
-				action: async () => repost(),
-			}),
-			MenuItem.new({
-				text: "Quote",
-				action: () => LumeWindow.openEditor(null, event.id),
-			}),
-		]);
+		const accounts = await commands.getAccounts();
+		const list = [];

-		const menu = await Menu.new({
-			items: menuItems,
-		});
+		for (const account of accounts) {
+			const res = await commands.getProfile(account);
+			let name = "unknown";
+
+			if (res.status === "ok") {
+				const profile: Metadata = JSON.parse(res.data);
+				name = profile.display_name ?? profile.name;
+			}
+
+			list.push(
+				MenuItem.new({
+					text: `Repost as ${name} (${displayNpub(account, 16)})`,
+					action: async () => submit(account),
+				}),
+			);
+		}
+
+		const items = await Promise.all(list);
+		const menu = await Menu.new({ items });

 		await menu.popup().catch((e) => console.error(e));
 	}, []);

+	const repost = useMutation({
+		mutationFn: async () => {
+			// Cancel any outgoing refetches
+			await queryClient.cancelQueries({ queryKey: ["is-reposted", event.id] });
+
+			// Optimistically update to the new value
+			queryClient.setQueryData(["is-reposted", event.id], true);
+
+			const res = await commands.repost(JSON.stringify(event.raw));
+
+			if (res.status === "ok") {
+				return;
+			} else {
+				throw new Error(res.error);
+			}
+		},
+		onError: () => {
+			queryClient.setQueryData(["is-reposted", event.id], false);
+		},
+		onSettled: async () => {
+			return await queryClient.invalidateQueries({
+				queryKey: ["is-reposted", event.id],
+			});
+		},
+	});
+
+	const submit = (account: string) => {
+		startTransition(async () => {
+			if (!status) {
+				const signer = await commands.hasSigner(account);
+
+				if (signer.status === "ok") {
+					if (!signer.data) {
+						const newPopup = await LumeWindow.openPopup(
+							`/set-signer/${account}`,
+							undefined,
+							false,
+						);
+
+						setPopup(newPopup);
+						return;
+					}
+
+					repost.mutate();
+				} else {
+					return;
+				}
+			} else {
+				return;
+			}
+		});
+	};
+
+	useEffect(() => {
+		if (!visible) return;
+		if (!popup) return;
+
+		const unlisten = popup.listen("signer-updated", async () => {
+			repost.mutate();
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, [popup]);
+
 	if (!visible) 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",
-				label
-					? "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(
-						smol ? "size-4" : "size-5",
-						isRepost ? "text-blue-500" : "",
-					)}
-				/>
-			)}
-			{label ? "Repost" : null}
-		</button>
+		<Tooltip.Provider>
+			<Tooltip.Root delayDuration={300}>
+				<Tooltip.Trigger asChild>
+					<button
+						type="button"
+						onClick={(e) => showContextMenu(e)}
+						className={cn(
+							"h-7 rounded-full inline-flex items-center justify-center text-neutral-800 hover:bg-black/5 dark:hover:bg-white/5 dark:text-neutral-200 text-sm font-medium",
+							label ? "w-24 gap-1.5" : "w-14",
+						)}
+					>
+						{isPending || isLoading ? (
+							<Spinner className="size-4" />
+						) : (
+							<RepostIcon
+								className={cn(
+									smol ? "size-4" : "size-5",
+									status ? "text-blue-500" : "",
+								)}
+							/>
+						)}
+						{label ? "Repost" : null}
+					</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">
+						Repost
+						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
 	);
 }
--- a/src/components/note/buttons/zap.tsx
+++ b/src/components/note/buttons/zap.tsx
@@ -20,10 +20,8 @@ export function NoteZap({
 			type="button"
 			onClick={() => LumeWindow.openZap(event.id, search.account)}
 			className={cn(
-				"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
-				label
-					? "rounded-full h-7 gap-1.5 w-20 text-sm font-medium hover:bg-black/10 dark:hover:bg-white/10"
-					: "size-7",
+				"h-7 rounded-full inline-flex items-center justify-center text-neutral-800 hover:bg-black/5 dark:hover:bg-white/5 dark:text-neutral-200 text-sm font-medium",
+				label ? "w-24 gap-1.5" : "w-14",
 			)}
 		>
 			<ZapIcon className={smol ? "size-4" : "size-5"} />
--- a/src/components/note/index.ts
+++ b/src/components/note/index.ts
@@ -1,4 +1,5 @@
 import { NoteOpenThread } from "./buttons/open";
+import { NoteQuote } from "./buttons/quote";
 import { NoteReply } from "./buttons/reply";
 import { NoteRepost } from "./buttons/repost";
 import { NoteZap } from "./buttons/zap";
@@ -16,6 +17,7 @@ export const Note = {
 	User: NoteUser,
 	Menu: NoteMenu,
 	Reply: NoteReply,
+	Quote: NoteQuote,
 	Repost: NoteRepost,
 	Content: NoteContent,
 	ContentLarge: NoteContentLarge,
--- a/src/components/note/mentions/note.tsx
+++ b/src/components/note/mentions/note.tsx
@@ -51,11 +51,11 @@ export const MentionNote = memo(function MentionNote({
 									<span className="text-sm text-neutral-500">
 										{replyTime(event.created_at)}
 									</span>
-									<div className="invisible group-hover:visible flex items-center justify-end gap-3">
+									<div className="invisible group-hover:visible flex items-center justify-end">
 										<button
 											type="button"
 											onClick={() => LumeWindow.openEvent(event)}
-											className="text-sm font-medium text-blue-500 hover:text-blue-600"
+											className="mr-3 text-sm font-medium text-blue-500 hover:text-blue-600"
 										>
 											Show all
 										</button>
--- a/src/components/quote.tsx
+++ b/src/components/quote.tsx
@@ -1,39 +0,0 @@
-import { cn } from "@/commons";
-import { Note } from "@/components/note";
-import type { LumeEvent } from "@/system";
-import { Quotes } from "@phosphor-icons/react";
-import { memo } from "react";
-
-export const Quote = memo(function Quote({
-	event,
-	className,
-}: {
-	event: LumeEvent;
-	className?: string;
-}) {
-	return (
-		<Note.Provider event={event}>
-			<Note.Root className={cn("", className)}>
-				<div className="flex flex-col gap-3">
-					<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">
-							<Quotes className="size-4" />
-							Quote
-						</div>
-						<div className="flex-1 h-px bg-neutral-100 dark:bg-white/5" />
-					</div>
-					<div>
-						<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 px-3 h-14">
-					<Note.Open />
-				</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-});
--- a/src/components/reply.tsx
+++ b/src/components/reply.tsx
@@ -1,21 +1,12 @@
-import { commands } from "@/commands.gen";
-import { appSettings, cn, replyTime } from "@/commons";
+import { cn, replyTime } from "@/commons";
 import { Note } from "@/components/note";
 import { type LumeEvent, LumeWindow } from "@/system";
 import { CaretDown } from "@phosphor-icons/react";
 import { Link, useSearch } from "@tanstack/react-router";
-import { useStore } from "@tanstack/react-store";
 import { Menu, MenuItem } from "@tauri-apps/api/menu";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { nip19 } from "nostr-tools";
-import {
-	type ReactNode,
-	memo,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from "react";
+import { type ReactNode, memo, useCallback, useMemo } from "react";
 import reactStringReplace from "react-string-replace";
 import { Hashtag } from "./note/mentions/hashtag";
 import { MentionUser } from "./note/mentions/user";
@@ -28,11 +19,7 @@ export const ReplyNote = memo(function ReplyNote({
 	event: LumeEvent;
 	className?: string;
 }) {
-	const trustedOnly = useStore(appSettings, (state) => state.trusted_only);
 	const search = useSearch({ strict: false });
-
-	const [isTrusted, setIsTrusted] = useState<boolean>(null);
-
 	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
 		e.preventDefault();

@@ -57,24 +44,6 @@ export const ReplyNote = memo(function ReplyNote({
 		await menu.popup().catch((e) => console.error(e));
 	}, []);

-	useEffect(() => {
-		async function check() {
-			const res = await commands.isTrustedUser(event.pubkey);
-
-			if (res.status === "ok") {
-				setIsTrusted(res.data);
-			}
-		}
-
-		if (trustedOnly) {
-			check();
-		}
-	}, []);
-
-	if (isTrusted !== null && isTrusted === false) {
-		return null;
-	}
-
 	return (
 		<Note.Provider event={event}>
 			<User.Provider pubkey={event.pubkey}>
@@ -99,7 +68,7 @@ export const ReplyNote = memo(function ReplyNote({
 							<span className="text-sm text-neutral-500">
 								{replyTime(event.created_at)}
 							</span>
-							<div className="flex items-center justify-end gap-5">
+							<div className="flex items-center justify-end">
 								<Note.Reply smol />
 								<Note.Repost smol />
 								<Note.Zap smol />
@@ -180,7 +149,7 @@ function ChildReply({ event }: { event: LumeEvent }) {
 						<span className="text-sm text-neutral-500">
 							{replyTime(event.created_at)}
 						</span>
-						<div className="invisible group-hover:visible flex items-center justify-end gap-5">
+						<div className="invisible group-hover:visible flex items-center justify-end">
 							<Note.Reply smol />
 							<Note.Repost smol />
 							<Note.Zap smol />
--- a/src/components/repost.tsx
+++ b/src/components/repost.tsx
@@ -36,7 +36,7 @@ export const RepostNote = memo(function RepostNote({
 						</div>
 						<Note.Content className="px-3" />
 						<div className="flex items-center justify-between px-3 mt-3 h-14">
-							<div className="inline-flex items-center gap-6">
+							<div className="inline-flex items-center gap-2">
 								<Note.Open />
 								<Note.Reply />
 								<Note.Repost />
--- a/src/components/text.tsx
+++ b/src/components/text.tsx
@@ -18,7 +18,7 @@ export const TextNote = memo(function TextNote({
 					<Note.Menu />
 				</div>
 				<Note.Content className="px-3" />
-				<div className="flex items-center gap-6 px-3 mt-3 h-14">
+				<div className="flex items-center gap-2 px-3 mt-3 h-14">
 					<Note.Open />
 					<Note.Reply />
 					<Note.Repost />
--- a/src/components/user/followButton.tsx
+++ b/src/components/user/followButton.tsx
@@ -7,7 +7,7 @@ import { message } from "@tauri-apps/plugin-dialog";
 import { useTransition } from "react";
 import { useUserContext } from "./provider";

-export function UserFollowButton({ className }: { className?: string }) {
+export function UserButton({ className }: { className?: string }) {
 	const user = useUserContext();

 	const { queryClient } = useRouteContext({ strict: false });
@@ -18,7 +18,7 @@ export function UserFollowButton({ className }: { className?: string }) {
 	} = useQuery({
 		queryKey: ["status", user.pubkey],
 		queryFn: async () => {
-			const res = await commands.checkContact(user.pubkey);
+			const res = await commands.isContact(user.pubkey);

 			if (res.status === "ok") {
 				return res.data;
--- a/src/components/user/index.ts
+++ b/src/components/user/index.ts
@@ -1,7 +1,7 @@
 import { UserAbout } from "./about";
 import { UserAvatar } from "./avatar";
+import { UserButton } from "./button";
 import { UserCover } from "./cover";
-import { UserFollowButton } from "./followButton";
 import { UserName } from "./name";
 import { UserNip05 } from "./nip05";
 import { UserProvider } from "./provider";
@@ -17,5 +17,5 @@ export const User = {
 	NIP05: UserNip05,
 	Time: UserTime,
 	About: UserAbout,
-	Button: UserFollowButton,
+	Button: UserButton,
 };
--- a/src/routes.gen.ts
+++ b/src/routes.gen.ts
--- a/src/routes/$account/_app.lazy.tsx
+++ b/src/routes/$account/_app.lazy.tsx
@@ -1,117 +0,0 @@
-import { cn } from "@/commons";
-import { User } from "@/components/user";
-import { LumeWindow } from "@/system";
-import { CaretDown, Feather, MagnifyingGlass } from "@phosphor-icons/react";
-import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
-import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
-import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { memo, useCallback } from "react";
-
-export const Route = createLazyFileRoute("/$account/_app")({
-	component: Screen,
-});
-
-function Screen() {
-	const context = Route.useRouteContext();
-
-	return (
-		<div className="flex flex-col w-screen h-screen">
-			<div
-				data-tauri-drag-region
-				className={cn(
-					"flex h-10 shrink-0 items-center justify-between",
-					context.platform === "macos" ? "pl-[72px] pr-3" : "pr-[156px] pl-3",
-				)}
-			>
-				<div
-					data-tauri-drag-region
-					className="relative z-[200] flex-1 flex items-center gap-4"
-				>
-					<Account />
-					<div className="flex items-center gap-2">
-						<button
-							type="button"
-							onClick={() => LumeWindow.openSearch()}
-							className="inline-flex items-center justify-center size-7 bg-black/5 dark:bg-white/5 rounded-full hover:bg-blue-500 hover:text-white"
-						>
-							<MagnifyingGlass className="size-4" />
-						</button>
-						<button
-							type="button"
-							onClick={() => LumeWindow.openEditor()}
-							className="inline-flex items-center justify-center h-7 gap-1.5 px-2 text-sm font-medium bg-black/5 dark:bg-white/5 rounded-full w-max hover:bg-blue-500 hover:text-white"
-						>
-							<Feather className="size-4" weight="fill" />
-							New Post
-						</button>
-					</div>
-				</div>
-				<div
-					id="toolbar"
-					data-tauri-drag-region
-					className="relative z-[200] flex-1 flex items-center justify-end gap-1"
-				/>
-			</div>
-			<div className="flex-1 bg-neutral-100 dark:bg-neutral-900 border-t-[.5px] border-black/20 dark:border-white/20">
-				<Outlet />
-			</div>
-		</div>
-	);
-}
-
-const Account = memo(function Account() {
-	const params = Route.useParams();
-	const navigate = Route.useNavigate();
-
-	const showContextMenu = useCallback(
-		async (e: React.MouseEvent) => {
-			e.preventDefault();
-
-			const menuItems = await Promise.all([
-				MenuItem.new({
-					text: "New Post",
-					action: () => LumeWindow.openEditor(),
-				}),
-				MenuItem.new({
-					text: "Profile",
-					action: () => LumeWindow.openProfile(params.account),
-				}),
-				MenuItem.new({
-					text: "Settings",
-					action: () => LumeWindow.openSettings(params.account),
-				}),
-				PredefinedMenuItem.new({ item: "Separator" }),
-				MenuItem.new({
-					text: "Copy Public Key",
-					action: async () => await writeText(params.account),
-				}),
-				MenuItem.new({
-					text: "Logout",
-					action: () => navigate({ to: "/" }),
-				}),
-			]);
-
-			const menu = await Menu.new({
-				items: menuItems,
-			});
-
-			await menu.popup().catch((e) => console.error(e));
-		},
-		[params.account],
-	);
-
-	return (
-		<button
-			type="button"
-			onClick={(e) => showContextMenu(e)}
-			className="inline-flex items-center gap-1.5"
-		>
-			<User.Provider pubkey={params.account}>
-				<User.Root className="shrink-0 rounded-full">
-					<User.Avatar className="rounded-full size-7" />
-				</User.Root>
-			</User.Provider>
-			<CaretDown className="size-3" />
-		</button>
-	);
-});
--- a/src/routes/$account/_app.tsx
+++ b/src/routes/$account/_app.tsx
@@ -1,3 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/$account/_app")();
--- a/src/routes/$account/_settings/bitcoin-connect.lazy.tsx
+++ b/src/routes/$account/_settings/bitcoin-connect.lazy.tsx
@@ -1,40 +0,0 @@
-import { commands } from "@/commands.gen";
-import { NostrAccount } from "@/system";
-import { Button } from "@getalby/bitcoin-connect-react";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-
-export const Route = createLazyFileRoute("/$account/_settings/bitcoin-connect")(
-	{
-		component: Screen,
-	},
-);
-
-function Screen() {
-	const setNwcUri = async (uri: string) => {
-		const res = await commands.setWallet(uri);
-
-		if (res.status === "ok") {
-			await getCurrentWebviewWindow().close();
-		} else {
-			throw new Error(res.error);
-		}
-	};
-
-	return (
-		<div className="flex items-center justify-center size-full">
-			<div className="flex flex-col items-center justify-center gap-3 text-center">
-				<div>
-					<p className="text-sm text-black/70 dark:text-white/70">
-						Click to the button below to connect with your Bitcoin wallet.
-					</p>
-				</div>
-				<Button
-					onConnected={(provider) =>
-						setNwcUri(provider.client.nostrWalletConnectUrl)
-					}
-				/>
-			</div>
-		</div>
-	);
-}
--- a/src/routes/$account/_settings/general.lazy.tsx
+++ b/src/routes/$account/_settings/general.lazy.tsx
@@ -1,185 +0,0 @@
-import { commands } from "@/commands.gen";
-import { appSettings } from "@/commons";
-import { Spinner } from "@/components";
-import * as Switch from "@radix-ui/react-switch";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { useStore } from "@tanstack/react-store";
-import { invoke } from "@tauri-apps/api/core";
-import { message } from "@tauri-apps/plugin-dialog";
-import { useCallback, useEffect, useState, useTransition } from "react";
-
-type Theme = "auto" | "light" | "dark";
-
-export const Route = createLazyFileRoute("/$account/_settings/general")({
-	component: Screen,
-});
-
-function Screen() {
-	const [theme, setTheme] = useState<Theme>(null);
-	const [isPending, startTransition] = useTransition();
-
-	const changeTheme = useCallback(async (theme: string) => {
-		if (theme === "auto" || theme === "light" || theme === "dark") {
-			invoke("plugin:theme|set_theme", {
-				theme: theme,
-			}).then(() => setTheme(theme));
-		}
-	}, []);
-
-	const updateSettings = () => {
-		startTransition(async () => {
-			const newSettings = JSON.stringify(appSettings.state);
-			const res = await commands.setUserSettings(newSettings);
-
-			if (res.status === "error") {
-				await message(res.error, { kind: "error" });
-			}
-
-			return;
-		});
-	};
-
-	useEffect(() => {
-		invoke("plugin:theme|get_theme").then((data) => setTheme(data as Theme));
-	}, []);
-
-	return (
-		<div className="relative w-full">
-			<div className="flex flex-col gap-6 px-3 pb-3">
-				<div className="flex flex-col gap-2">
-					<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
-						General
-					</h2>
-					<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
-						<Setting
-							name="Relay Hint"
-							description="Use the relay hint if necessary."
-							label="use_relay_hint"
-						/>
-						<Setting
-							name="Content Warning"
-							description="Shows a warning for notes that have a content warning."
-							label="content_warning"
-						/>
-						<Setting
-							name="Trusted Only"
-							description="Only shows note's replies from your inner circle."
-							label="trusted_only"
-						/>
-					</div>
-				</div>
-				<div className="flex flex-col gap-2">
-					<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
-						Appearance
-					</h2>
-					<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
-						<div className="flex items-start justify-between w-full gap-4 py-3">
-							<div className="flex-1">
-								<h3 className="font-medium">Appearance</h3>
-								<p className="text-sm text-neutral-700 dark:text-neutral-300">
-									Change app theme
-								</p>
-							</div>
-							<div className="flex justify-end w-36 shrink-0">
-								<select
-									name="theme"
-									className="w-24 py-1 bg-transparent rounded-lg shadow-none outline-none border-1 border-black/10 dark:border-white/10"
-									defaultValue={theme}
-									onChange={(e) => changeTheme(e.target.value)}
-								>
-									<option value="auto">Auto</option>
-									<option value="light">Light</option>
-									<option value="dark">Dark</option>
-								</select>
-							</div>
-						</div>
-						<Setting
-							name="Transparent Effect"
-							description="Use native window transparent effect."
-							label="transparent"
-						/>
-						<Setting
-							name="Show Zap Button"
-							description="Shows the Zap button when viewing a note."
-							label="display_zap_button"
-						/>
-						<Setting
-							name="Show Repost Button"
-							description="Shows the Repost button when viewing a note."
-							label="display_repost_button"
-						/>
-					</div>
-				</div>
-				<div className="flex flex-col gap-2">
-					<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
-						Privacy & Performance
-					</h2>
-					<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
-						<Setting
-							name="Proxy"
-							description="Set proxy address."
-							label="proxy"
-						/>
-						<Setting
-							name="Image Resize Service"
-							description="Use weserv/images for resize image on-the-fly."
-							label="image_resize_service"
-						/>
-						<Setting
-							name="Load Remote Media"
-							description="View the remote media directly."
-							label="display_media"
-						/>
-					</div>
-				</div>
-			</div>
-			<div className="sticky bottom-0 left-0 w-full h-16 flex items-center justify-end px-3">
-				<div className="absolute left-0 bottom-0 w-full h-11 gradient-mask-t-0 bg-neutral-100 dark:bg-neutral-900" />
-				<button
-					type="button"
-					onClick={() => updateSettings()}
-					className="relative z-10 inline-flex items-center justify-center w-20 rounded-md shadow h-8 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium"
-				>
-					{isPending ? <Spinner className="size-4" /> : "Update"}
-				</button>
-			</div>
-		</div>
-	);
-}
-
-function Setting({
-	label,
-	name,
-	description,
-}: { label: string; name: string; description: string }) {
-	const state = useStore(appSettings, (state) => state[label]);
-
-	const toggle = useCallback(() => {
-		appSettings.setState((state) => {
-			return {
-				...state,
-				[label]: !state[label],
-			};
-		});
-	}, []);
-
-	return (
-		<div className="flex items-start justify-between w-full gap-4 py-3">
-			<div className="flex-1">
-				<h3 className="font-medium">{name}</h3>
-				<p className="text-sm text-neutral-700 dark:text-neutral-300">
-					{description}
-				</p>
-			</div>
-			<div className="flex justify-end w-36 shrink-0">
-				<Switch.Root
-					checked={state}
-					onClick={() => toggle()}
-					className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
-				>
-					<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>
-	);
-}
--- a/src/routes/$account/_settings/general.tsx
+++ b/src/routes/$account/_settings/general.tsx
@@ -1,17 +0,0 @@
-import { commands } from "@/commands.gen";
-import { appSettings } from "@/commons";
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/$account/_settings/general")({
-	beforeLoad: async () => {
-		const res = await commands.getUserSettings();
-
-		if (res.status === "ok") {
-			appSettings.setState((state) => {
-				return { ...state, ...res.data };
-			});
-		} else {
-			throw new Error(res.error);
-		}
-	},
-});
--- a/src/routes/$account/_settings/relay.tsx
+++ b/src/routes/$account/_settings/relay.tsx
@@ -1,15 +0,0 @@
-import { commands } from "@/commands.gen";
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/$account/_settings/relay")({
-	beforeLoad: async () => {
-		const res = await commands.getRelays();
-
-		if (res.status === "ok") {
-			const relayList = res.data;
-			return { relayList };
-		} else {
-			throw new Error(res.error);
-		}
-	},
-});
--- a/src/routes/$account/_settings/wallet.lazy.tsx
+++ b/src/routes/$account/_settings/wallet.lazy.tsx
@@ -1,55 +0,0 @@
-import { commands } from "@/commands.gen";
-import { createLazyFileRoute, redirect } from "@tanstack/react-router";
-
-export const Route = createLazyFileRoute("/$account/_settings/wallet")({
-	component: Screen,
-});
-
-function Screen() {
-	const { account } = Route.useParams();
-	const { balance } = Route.useRouteContext();
-
-	const disconnect = async () => {
-		const res = await commands.removeWallet();
-
-		if (res.status === "ok") {
-			window.localStorage.removeItem("bc:config");
-			return redirect({ to: "/$account/bitcoin-connect", params: { account } });
-		} else {
-			throw new Error(res.error);
-		}
-	};
-
-	return (
-		<div className="w-full px-3 pb-3">
-			<div className="flex flex-col w-full gap-3">
-				<div className="flex flex-col w-full px-3 bg-black/5 dark:bg-white/5 rounded-xl">
-					<div className="flex items-center justify-between w-full gap-4 py-3">
-						<div className="flex-1">
-							<h3 className="font-medium">Connection</h3>
-						</div>
-						<div className="flex justify-end w-36 shrink-0">
-							<button
-								type="button"
-								onClick={() => disconnect()}
-								className="h-8 w-max px-2.5 text-sm rounded-lg inline-flex items-center justify-center bg-black/10 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20"
-							>
-								Disconnect
-							</button>
-						</div>
-					</div>
-				</div>
-				<div className="flex flex-col w-full px-3 bg-black/5 dark:bg-white/5 rounded-xl">
-					<div className="flex items-center justify-between w-full gap-4 py-3">
-						<div className="flex-1">
-							<h3 className="font-medium">Current Balance</h3>
-						</div>
-						<div className="flex justify-end w-36 shrink-0">
-							₿ {balance.bitcoinFormatted}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
--- a/src/routes/$account/_settings/wallet.tsx
+++ b/src/routes/$account/_settings/wallet.tsx
@@ -1,21 +0,0 @@
-import { commands } from "@/commands.gen";
-import { getBitcoinDisplayValues } from "@/commons";
-import { createFileRoute, redirect } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/$account/_settings/wallet")({
-	beforeLoad: async ({ params }) => {
-		const query = await commands.loadWallet();
-
-		if (query.status === "ok") {
-			const wallet = Number.parseInt(query.data);
-			const balance = getBitcoinDisplayValues(wallet);
-
-			return { balance };
-		} else {
-			throw redirect({
-				to: "/$account/bitcoin-connect",
-				params: { account: params.account },
-			});
-		}
-	},
-});
--- a/src/routes/$account/backup.tsx
+++ b/src/routes/$account/backup.tsx
@@ -1,177 +0,0 @@
-import { displayNsec } from "@/commons";
-import { Spinner } from "@/components";
-import { Check } from "@phosphor-icons/react";
-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";
-
-export const Route = createFileRoute("/$account/backup")({
-	component: Screen,
-});
-
-function Screen() {
-	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 });
-
-	const submit = async () => {
-		try {
-			if (key) {
-				if (!confirm.c1 || !confirm.c2) {
-					return await message("You need to confirm before continue", {
-						title: "Backup",
-						kind: "info",
-					});
-				}
-
-				navigate({ to: "/", replace: true });
-			}
-
-			// start loading
-			setLoading(true);
-
-			invoke("get_encrypted_key", {
-				npub: account,
-				password: passphase,
-			}).then((encrypted: string) => {
-				// update state
-				setKey(encrypted);
-				setLoading(false);
-			});
-		} catch (e) {
-			setLoading(false);
-			await message(String(e), {
-				title: "Backup",
-				kind: "error",
-			});
-		}
-	};
-
-	const copyKey = async () => {
-		try {
-			await writeText(key);
-			setCopied(true);
-		} catch (e) {
-			await message(String(e), {
-				title: "Backup",
-				kind: "error",
-			});
-		}
-	};
-
-	return (
-		<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">
-					It's use for login to Lume or other Nostr clients. You will lost
-					access to your account if you lose this key.
-				</p>
-			</div>
-			<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
-					</label>
-					<div className="relative">
-						<input
-							name="passphase"
-							type="password"
-							value={passphase}
-							onChange={(e) => setPassphase(e.target.value)}
-							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>
-				{key ? (
-					<>
-						<div className="flex flex-col gap-2">
-							<label htmlFor="nsec" className="font-medium">
-								Copy this key and keep it in safe place
-							</label>
-							<div className="flex items-center gap-2">
-								<input
-									name="nsec"
-									type="text"
-									value={key}
-									readOnly
-									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 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>
-							</div>
-						</div>
-						<div className="flex flex-col gap-2">
-							<div className="font-medium">Before you continue:</div>
-							<div className="flex flex-col gap-2">
-								<div className="flex items-center gap-2">
-									<Checkbox.Root
-										checked={confirm.c1}
-										onCheckedChange={() =>
-											setConfirm((state) => ({ ...state, c1: !state.c1 }))
-										}
-										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">
-											<Check className="size-4" />
-										</Checkbox.Indicator>
-									</Checkbox.Root>
-									<label
-										className="text-sm leading-none text-neutral-800 dark:text-neutral-200"
-										htmlFor="confirm1"
-									>
-										I will make sure keep it safe and not sharing with anyone.
-									</label>
-								</div>
-								<div className="flex items-center gap-2">
-									<Checkbox.Root
-										checked={confirm.c2}
-										onCheckedChange={() =>
-											setConfirm((state) => ({ ...state, c2: !state.c2 }))
-										}
-										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">
-											<Check className="size-4" />
-										</Checkbox.Indicator>
-									</Checkbox.Root>
-									<label
-										className="text-sm leading-none text-neutral-800 dark:text-neutral-200"
-										htmlFor="confirm2"
-									>
-										I understand I cannot recover private key.
-									</label>
-								</div>
-							</div>
-						</div>
-					</>
-				) : null}
-				<div>
-					<button
-						type="button"
-						onClick={() => submit()}
-						disabled={loading}
-						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 /> : "Continue"}
-					</button>
-				</div>
-			</div>
-		</div>
-	);
-}
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -3,13 +3,13 @@ import { appSettings } from "@/commons";
 import { Spinner } from "@/components";
 import type { QueryClient } from "@tanstack/react-query";
 import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
-import { listen } from "@tauri-apps/api/event";
 import type { OsType } from "@tauri-apps/plugin-os";
 import { useEffect } from "react";

 interface RouterContext {
 	queryClient: QueryClient;
 	platform: OsType;
+	accounts: string[];
 }

 export const Route = createRootRouteWithContext<RouterContext>()({
@@ -33,8 +33,9 @@ function Screen() {
 	}, []);

 	useEffect(() => {
-		const unlisten = listen("synchronized", async () => {
-			await queryClient.invalidateQueries();
+		const unlisten = events.negentropyEvent.listen(async (data) => {
+			const queryKey = [data.payload.kind.toLowerCase()];
+			await queryClient.invalidateQueries({ queryKey });
 		});

 		return () => {
--- a/src/routes/_layout.lazy.tsx
+++ b/src/routes/_layout.lazy.tsx
@@ -0,0 +1,195 @@
+import { commands } from "@/commands.gen";
+import { cn } from "@/commons";
+import { PublishIcon } from "@/components";
+import { User } from "@/components/user";
+import { LumeWindow } from "@/system";
+import { MagnifyingGlass, Plus } from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import { Link, Outlet, createLazyFileRoute } from "@tanstack/react-router";
+import { listen } from "@tauri-apps/api/event";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { memo, useCallback, useEffect, useState } from "react";
+
+export const Route = createLazyFileRoute("/_layout")({
+	component: Layout,
+});
+
+function Layout() {
+	return (
+		<div className="flex flex-col w-screen h-screen">
+			<Topbar />
+			<div className="flex-1 bg-neutral-100 dark:bg-neutral-900 border-t-[.5px] border-black/20 dark:border-white/20">
+				<Outlet />
+			</div>
+		</div>
+	);
+}
+
+function Topbar() {
+	const { platform, accounts } = Route.useRouteContext();
+
+	return (
+		<div
+			data-tauri-drag-region
+			className={cn(
+				"flex h-10 shrink-0 items-center justify-between",
+				platform === "macos" ? "pl-[72px] pr-3" : "pr-[156px] pl-3",
+			)}
+		>
+			<div
+				data-tauri-drag-region
+				className="relative z-[200] h-10 flex-1 flex items-center gap-2"
+			>
+				{accounts?.map((account) => (
+					<Account key={account} pubkey={account} />
+				))}
+				<Link
+					to="/new"
+					className="inline-flex items-center justify-center size-7 bg-black/5 dark:bg-white/5 rounded-full hover:bg-blue-500 hover:text-white"
+				>
+					<Plus className="size-4" weight="bold" />
+				</Link>
+			</div>
+			<div
+				data-tauri-drag-region
+				className="relative z-[200] flex-1 flex items-center justify-end gap-4"
+			>
+				{accounts?.length ? (
+					<div className="inline-flex items-center gap-2">
+						<button
+							type="button"
+							onClick={() => LumeWindow.openEditor()}
+							className="inline-flex items-center justify-center h-7 gap-1 px-2 text-sm font-medium bg-black/5 dark:bg-white/5 rounded-full w-max hover:bg-blue-500 hover:text-white"
+						>
+							<PublishIcon className="size-4" />
+							New Post
+						</button>
+						<button
+							type="button"
+							onClick={() => LumeWindow.openSearch()}
+							className="inline-flex items-center justify-center size-7 bg-black/5 dark:bg-white/5 rounded-full hover:bg-blue-500 hover:text-white"
+						>
+							<MagnifyingGlass className="size-4" />
+						</button>
+					</div>
+				) : null}
+				<div id="toolbar" className="inline-flex items-center gap-2" />
+			</div>
+		</div>
+	);
+}
+
+const NegentropyBadge = memo(function NegentropyBadge() {
+	const [process, setProcess] = useState(null);
+
+	useEffect(() => {
+		const unlisten = listen("negentropy", async (data) => {
+			if (data.payload === "Ok") {
+				setProcess(null);
+			} else {
+				setProcess(data.payload);
+			}
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, []);
+
+	if (!process) {
+		return null;
+	}
+
+	return (
+		<div className="h-7 w-max px-3 inline-flex items-center justify-center text-[9px] font-medium rounded-full bg-black/5 dark:bg-white/5">
+			{process ? (
+				<span>
+					{process.message}
+					{process.total_event > 0 ? ` / ${process.total_event}` : null}
+				</span>
+			) : (
+				"Syncing"
+			)}
+		</div>
+	);
+});
+
+function Account({ pubkey }: { pubkey: string }) {
+	const navigate = Route.useNavigate();
+	const context = Route.useRouteContext();
+
+	const { data: isActive } = useQuery({
+		queryKey: ["signer", pubkey],
+		queryFn: async () => {
+			const res = await commands.hasSigner(pubkey);
+
+			if (res.status === "ok") {
+				return res.data;
+			} else {
+				return false;
+			}
+		},
+	});
+
+	const showContextMenu = useCallback(
+		async (e: React.MouseEvent) => {
+			e.preventDefault();
+
+			const items = await Promise.all([
+				MenuItem.new({
+					text: "View Profile",
+					action: () => LumeWindow.openProfile(pubkey),
+				}),
+				MenuItem.new({
+					text: "Copy Public Key",
+					action: async () => await writeText(pubkey),
+				}),
+				PredefinedMenuItem.new({ item: "Separator" }),
+				MenuItem.new({
+					text: "Settings",
+					action: () => LumeWindow.openSettings(pubkey),
+				}),
+				PredefinedMenuItem.new({ item: "Separator" }),
+				MenuItem.new({
+					text: "Logout",
+					action: async () => {
+						const res = await commands.deleteAccount(pubkey);
+
+						if (res.status === "ok") {
+							const newAccounts = context.accounts.filter(
+								(account) => account !== pubkey,
+							);
+
+							if (newAccounts.length < 1) {
+								navigate({ to: "/", replace: true });
+							}
+						}
+					},
+				}),
+			]);
+
+			const menu = await Menu.new({ items });
+
+			await menu.popup().catch((e) => console.error(e));
+		},
+		[pubkey],
+	);
+
+	return (
+		<button
+			type="button"
+			onClick={(e) => showContextMenu(e)}
+			className="h-10 relative"
+		>
+			<User.Provider pubkey={pubkey}>
+				<User.Root className="shrink-0 rounded-full">
+					<User.Avatar className="rounded-full size-7" />
+				</User.Root>
+			</User.Provider>
+			{isActive ? (
+				<div className="h-px w-full absolute bottom-0 left-0 bg-green-500 rounded-full" />
+			) : null}
+		</button>
+	);
+}
--- a/src/routes/_layout.tsx
+++ b/src/routes/_layout.tsx
@@ -0,0 +1,14 @@
+import { commands } from "@/commands.gen";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_layout")({
+	beforeLoad: async () => {
+		const accounts = await commands.getAccounts();
+
+		if (!accounts.length) {
+			throw redirect({ to: "/new", replace: true });
+		}
+
+		return { accounts };
+	},
+});
--- a/src/routes/$account/_app.home.lazy.tsx
+++ b/src/routes/$account/_app.home.lazy.tsx
@@ -1,13 +1,11 @@
 import { appColumns } from "@/commons";
-import { Spinner } from "@/components";
-import { Column } from "@/components/column";
+import { Column, Spinner } from "@/components";
 import { LumeWindow } from "@/system";
 import type { ColumnEvent, LumeColumn } from "@/types";
 import { ArrowLeft, ArrowRight, Plus, StackPlus } from "@phosphor-icons/react";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { useStore } from "@tanstack/react-store";
 import { listen } from "@tauri-apps/api/event";
-import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { resolveResource } from "@tauri-apps/api/path";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { readTextFile } from "@tauri-apps/plugin-fs";
@@ -23,12 +21,11 @@ import {
 import { createPortal } from "react-dom";
 import { useDebouncedCallback } from "use-debounce";

-export const Route = createLazyFileRoute("/$account/_app/home")({
+export const Route = createLazyFileRoute("/_layout/")({
 	component: Screen,
 });

 function Screen() {
-	const params = Route.useParams();
 	const columns = useStore(appColumns, (state) => state);

 	const [emblaRef, emblaApi] = useEmblaCarousel({
@@ -158,9 +155,7 @@ function Screen() {
 		}

 		if (!columns.length) {
-			const prevColumns = window.localStorage.getItem(
-				`${params.account}_columns`,
-			);
+			const prevColumns = window.localStorage.getItem("columns");

 			if (!prevColumns) {
 				getSystemColumns();
@@ -169,10 +164,7 @@ function Screen() {
 				appColumns.setState(() => parsed);
 			}
 		} else {
-			window.localStorage.setItem(
-				`${params.account}_columns`,
-				JSON.stringify(columns),
-			);
+			window.localStorage.setItem("columns", JSON.stringify(columns));
 		}
 	}, [columns.length]);

@@ -193,7 +185,7 @@ function Screen() {
 						<div className="size-full flex items-center justify-center">
 							<button
 								type="button"
-								onClick={() => LumeWindow.openColumnsGallery()}
+								onClick={() => LumeWindow.openLaunchpad()}
 								className="inline-flex items-center justify-center gap-1 rounded-full text-sm font-medium h-8 w-max pl-2 pr-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
 							>
 								<Plus className="size-4" />
@@ -204,7 +196,13 @@ function Screen() {
 				</div>
 			</div>
 			<Toolbar>
-				<ManageButton />
+				<button
+					type="button"
+					onClick={() => LumeWindow.openLaunchpad()}
+					className="inline-flex items-center justify-center rounded-full size-7 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<StackPlus className="size-4" />
+				</button>
 				<button
 					type="button"
 					onClick={() => scrollPrev()}
@@ -224,44 +222,6 @@ function Screen() {
 	);
 }

-function ManageButton() {
-	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
-		e.preventDefault();
-
-		const menuItems = await Promise.all([
-			MenuItem.new({
-				text: "Open Launchpad",
-				action: () => LumeWindow.openColumnsGallery(),
-			}),
-			PredefinedMenuItem.new({ item: "Separator" }),
-			MenuItem.new({
-				text: "Open Newsfeed",
-				action: () => LumeWindow.openLocalFeeds(),
-			}),
-			MenuItem.new({
-				text: "Open Notification",
-				action: () => LumeWindow.openNotification(),
-			}),
-		]);
-
-		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 rounded-full size-7 hover:bg-black/5 dark:hover:bg-white/5"
-		>
-			<StackPlus className="size-4" />
-		</button>
-	);
-}
-
 function Toolbar({ children }: { children: ReactNode[] }) {
 	const [domReady, setDomReady] = useState(false);

--- a/src/routes/_layout/index.tsx
+++ b/src/routes/_layout/index.tsx
@@ -0,0 +1,3 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/')()
--- a/src/routes/auth/connect.lazy.tsx
+++ b/src/routes/auth/connect.lazy.tsx
@@ -44,20 +44,22 @@ function Screen() {
 	return (
 		<div
 			data-tauri-drag-region
-			className="size-full flex items-center justify-center"
+			className="bg-white/50 dark:bg-black/50 size-full flex items-center justify-center"
 		>
-			<div className="w-[320px] flex flex-col gap-8">
+			<div className="w-[340px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">
-					<h1 className="leading-tight text-xl font-semibold">Nostr Connect</h1>
+					<h1 className="leading-tight text-xl font-semibold">
+						Continue with Nostr Connect
+					</h1>
 				</div>
-				<div className="flex flex-col gap-3">
+				<div className="flex flex-col gap-5">
 					<Frame
-						className="flex flex-col gap-1 p-3 rounded-xl overflow-hidden"
+						className="flex flex-col gap-3 p-4 rounded-xl overflow-hidden"
 						shadow
 					>
 						<label
 							htmlFor="uri"
-							className="font-medium text-neutral-900 dark:text-neutral-100"
+							className="text-sm font-semibold text-neutral-800 dark:text-neutral-200"
 						>
 							Connection String
 						</label>
@@ -68,7 +70,7 @@ function Screen() {
 								placeholder="bunker://..."
 								value={uri}
 								onChange={(e) => setUri(e.target.value)}
-								className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
+								className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-700 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
 							/>
 							<button
 								type="button"
--- a/src/routes/auth/import.lazy.tsx
+++ b/src/routes/auth/import.lazy.tsx
@@ -46,7 +46,6 @@ function Screen() {
 				navigate({ to: "/", replace: true });
 			} else {
 				await message(res.error, {
-					title: "Import Private Ket",
 					kind: "error",
 				});
 				return;
@@ -57,23 +56,23 @@ function Screen() {
 	return (
 		<div
 			data-tauri-drag-region
-			className="size-full flex items-center justify-center"
+			className="bg-white/50 dark:bg-black/50 size-full flex items-center justify-center"
 		>
-			<div className="w-[320px] flex flex-col gap-8">
+			<div className="w-[340px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">
 					<h1 className="leading-tight text-xl font-semibold">
-						Import Private Key
+						Continue with Secret Key
 					</h1>
 				</div>
-				<div className="flex flex-col gap-3">
+				<div className="flex flex-col gap-5">
 					<Frame
-						className="flex flex-col gap-3 p-3 rounded-xl overflow-hidden"
+						className="flex flex-col gap-3 p-4 rounded-xl overflow-hidden"
 						shadow
 					>
-						<div className="flex flex-col gap-1.5">
+						<div className="flex flex-col gap-2.5">
 							<label
 								htmlFor="key"
-								className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
+								className="text-sm font-semibold text-neutral-800 dark:text-neutral-200"
 							>
 								Private Key
 							</label>
@@ -84,7 +83,7 @@ function Screen() {
 									placeholder="nsec or ncryptsec..."
 									value={key}
 									onChange={(e) => setKey(e.target.value)}
-									className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
+									className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-700 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
 								/>
 								<button
 									type="button"
@@ -110,7 +109,7 @@ function Screen() {
 									type="password"
 									value={password}
 									onChange={(e) => setPassword(e.target.value)}
-									className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
+									className="px-3 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-700 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
 								/>
 							</div>
 						) : null}
--- a/src/routes/auth/new.lazy.tsx
+++ b/src/routes/auth/new.lazy.tsx
@@ -1,166 +0,0 @@
-import { commands } from "@/commands.gen";
-import { upload } from "@/commons";
-import { Frame, GoBack, Spinner } from "@/components";
-import { Plus } from "@phosphor-icons/react";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { message } from "@tauri-apps/plugin-dialog";
-import { useState, useTransition } from "react";
-
-export const Route = createLazyFileRoute("/auth/new")({
-	component: Screen,
-});
-
-function Screen() {
-	const navigate = Route.useNavigate();
-
-	const [password, setPassword] = useState("");
-	const [picture, setPicture] = useState<string>("");
-	const [name, setName] = useState("");
-	const [about, setAbout] = useState("");
-	const [isPending, startTransition] = useTransition();
-
-	const uploadAvatar = async () => {
-		const file = await upload();
-
-		if (file) {
-			setPicture(file);
-		} else {
-			return;
-		}
-	};
-
-	const submit = () => {
-		startTransition(async () => {
-			if (!name.length) {
-				await message("Please add your name", {
-					title: "New Identity",
-					kind: "info",
-				});
-				return;
-			}
-
-			if (!password.length) {
-				await message("You must set password to secure your account", {
-					title: "New Identity",
-					kind: "info",
-				});
-				return;
-			}
-
-			const res = await commands.createAccount(name, picture, about, password);
-
-			if (res.status === "ok") {
-				navigate({
-					to: "/",
-					replace: true,
-				});
-			} else {
-				await message(res.error, {
-					title: "New Identity",
-					kind: "error",
-				});
-				return;
-			}
-		});
-	};
-
-	return (
-		<div
-			data-tauri-drag-region
-			className="size-full flex items-center justify-center"
-		>
-			<div className="w-[320px] flex flex-col gap-8">
-				<div className="flex flex-col gap-1 text-center">
-					<h1 className="leading-tight text-xl font-semibold">New Identity</h1>
-				</div>
-				<div className="flex flex-col gap-3">
-					<Frame
-						className="flex flex-col gap-3 p-3 rounded-xl overflow-hidden"
-						shadow
-					>
-						<div className="self-center relative rounded-full size-20 bg-neutral-100 dark:bg-white/10 my-3">
-							{picture.length ? (
-								<img
-									src={picture}
-									alt="avatar"
-									loading="lazy"
-									decoding="async"
-									className="absolute inset-0 z-10 object-cover w-full h-full rounded-full"
-								/>
-							) : null}
-							<button
-								type="button"
-								onClick={() => uploadAvatar()}
-								className="absolute inset-0 z-20 flex items-center justify-center w-full h-full rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
-							>
-								<Plus className="size-5" />
-							</button>
-						</div>
-						<div className="flex flex-col gap-1">
-							<label
-								htmlFor="name"
-								className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
-							>
-								Name *
-							</label>
-							<input
-								name="name"
-								type="text"
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-								placeholder="e.g. Alice"
-								spellCheck={false}
-								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
-							/>
-						</div>
-						<div className="flex flex-col gap-1">
-							<label
-								htmlFor="about"
-								className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
-							>
-								About
-							</label>
-							<textarea
-								name="about"
-								value={about}
-								onChange={(e) => setAbout(e.target.value)}
-								placeholder="e.g. Artist, anime-lover, and k-pop fan"
-								spellCheck={false}
-								className="px-3 py-1.5 rounded-lg min-h-16 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
-							/>
-						</div>
-						<div className="h-px w-full mt-2 bg-neutral-100 dark:bg-neutral-900" />
-						<div className="flex flex-col gap-1">
-							<label
-								htmlFor="password"
-								className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
-							>
-								Set password to secure your account *
-							</label>
-							<input
-								name="password"
-								type="password"
-								value={password}
-								onChange={(e) => setPassword(e.target.value)}
-								className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
-							/>
-						</div>
-					</Frame>
-					<div className="flex flex-col items-center gap-1">
-						<button
-							type="button"
-							onClick={() => submit()}
-							disabled={isPending}
-							className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
-						>
-							{isPending ? <Spinner /> : "Continue"}
-						</button>
-						<GoBack className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
-							Go back to previous screen
-						</GoBack>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
--- a/src/routes/auth/watch.lazy.tsx
+++ b/src/routes/auth/watch.lazy.tsx
@@ -0,0 +1,106 @@
+import { commands } from "@/commands.gen";
+import { Frame, GoBack } from "@/components";
+import { Spinner } from "@/components/spinner";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { readText } from "@tauri-apps/plugin-clipboard-manager";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState, useTransition } from "react";
+
+export const Route = createLazyFileRoute("/auth/watch")({
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+
+	const [key, setKey] = useState("");
+	const [isPending, startTransition] = useTransition();
+
+	const pasteFromClipboard = async () => {
+		const val = await readText();
+		setKey(val);
+	};
+
+	const submit = () => {
+		startTransition(async () => {
+			if (!key.startsWith("npub") && !key.startsWith("nprofile")) {
+				await message(
+					"You need to enter a valid public key starts with npub or nprofile",
+					{ title: "Login", kind: "info" },
+				);
+				return;
+			}
+
+			const res = await commands.watchAccount(key);
+
+			if (res.status === "ok") {
+				navigate({ to: "/", replace: true });
+			} else {
+				await message(res.error, {
+					kind: "error",
+				});
+				return;
+			}
+		});
+	};
+
+	return (
+		<div
+			data-tauri-drag-region
+			className="bg-white/50 dark:bg-black/50 size-full flex items-center justify-center"
+		>
+			<div className="w-[340px] flex flex-col gap-8">
+				<div className="flex flex-col gap-1 text-center">
+					<h1 className="leading-tight text-xl font-semibold">
+						Continue with Public Key (Watch Mode)
+					</h1>
+				</div>
+				<div className="flex flex-col gap-5">
+					<Frame
+						className="flex flex-col gap-3 p-4 rounded-xl overflow-hidden"
+						shadow
+					>
+						<div className="flex flex-col gap-2.5">
+							<label
+								htmlFor="key"
+								className="text-sm font-semibold text-neutral-800 dark:text-neutral-200"
+							>
+								Public Key
+							</label>
+							<div className="relative">
+								<input
+									name="key"
+									type="password"
+									placeholder="npub or nprofile..."
+									value={key}
+									onChange={(e) => setKey(e.target.value)}
+									className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-700 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
+								/>
+								<button
+									type="button"
+									onClick={() => pasteFromClipboard()}
+									className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500 dark:text-blue-300"
+								>
+									Paste
+								</button>
+							</div>
+						</div>
+					</Frame>
+					<div className="flex flex-col items-center gap-1">
+						<button
+							type="button"
+							onClick={() => submit()}
+							disabled={isPending}
+							className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
+						>
+							{isPending ? <Spinner /> : "Continue"}
+						</button>
+						<GoBack className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
+							Go back to previous screen
+						</GoBack>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/src/routes/columns/_layout.tsx
+++ b/src/routes/columns/_layout.tsx
@@ -1,12 +1,16 @@
 import { commands } from "@/commands.gen";
 import { appSettings } from "@/commons";
-import type { ColumnRouteSearch } from "@/types";
 import { Outlet, createFileRoute } from "@tanstack/react-router";

+export interface RouteSearch {
+	label?: string;
+	name?: string;
+	redirect?: string;
+}
+
 export const Route = createFileRoute("/columns/_layout")({
-	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+	validateSearch: (search: Record<string, string>): RouteSearch => {
 		return {
-			account: search.account,
 			label: search.label,
 			name: search.name,
 		};
--- a/src/routes/columns/_layout/global.tsx
+++ b/src/routes/columns/_layout/global.tsx
@@ -15,7 +15,7 @@ export const Route = createFileRoute("/columns/_layout/global")({
 });

 export function Screen() {
-	const { label, account } = Route.useSearch();
+	const { label } = Route.useSearch();
 	const {
 		data,
 		isLoading,
@@ -24,7 +24,7 @@ export function Screen() {
 		hasNextPage,
 		fetchNextPage,
 	} = useInfiniteQuery({
-		queryKey: [label, account],
+		queryKey: ["events", "global", label],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
 			const until = pageParam > 0 ? pageParam.toString() : undefined;
--- a/src/routes/columns/_layout/groups.$id.lazy.tsx
+++ b/src/routes/columns/_layout/groups.$id.lazy.tsx
@@ -26,7 +26,7 @@ export function Screen() {
 		hasNextPage,
 		fetchNextPage,
 	} = useInfiniteQuery({
-		queryKey: ["groups", params.id],
+		queryKey: ["events", "groups", params.id],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
 			const until = pageParam > 0 ? pageParam.toString() : undefined;
--- a/src/routes/columns/_layout/interests.$id.lazy.tsx
+++ b/src/routes/columns/_layout/interests.$id.lazy.tsx
@@ -26,7 +26,7 @@ export function Screen() {
 		hasNextPage,
 		fetchNextPage,
 	} = useInfiniteQuery({
-		queryKey: ["hashtags", params.id],
+		queryKey: ["events", "hashtags", params.id],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
 			const tags = hashtags.map((tag) => tag.toLowerCase().replace("#", ""));
--- a/src/routes/columns/_layout/launchpad.lazy.tsx
+++ b/src/routes/columns/_layout/launchpad.lazy.tsx
@@ -26,6 +26,7 @@ function Screen() {
 			<ScrollArea.Viewport className="relative h-full px-3 pb-3">
 				<Groups />
 				<Interests />
+				<Accounts />
 				<Core />
 			</ScrollArea.Viewport>
 			<ScrollArea.Scrollbar
@@ -39,66 +40,9 @@ function Screen() {
 	);
 }

-function Core() {
-	const { isLoading, data } = useQuery({
-		queryKey: ["core"],
-		queryFn: async () => {
-			const systemPath = "resources/columns.json";
-			const resourcePath = await resolveResource(systemPath);
-			const resourceFile = await readTextFile(resourcePath);
-
-			const systemColumns: LumeColumn[] = JSON.parse(resourceFile);
-			const columns = systemColumns.filter((col) => !col.default);
-
-			return columns;
-		},
-		refetchOnWindowFocus: false,
-	});
-
-	return (
-		<div className="flex flex-col gap-3">
-			<div className="flex items-center justify-between px-2">
-				<h3 className="font-semibold">Core</h3>
-			</div>
-			<div className="flex flex-col gap-3">
-				{isLoading ? (
-					<div className="inline-flex items-center gap-1.5">
-						<Spinner className="size-4" />
-						Loading...
-					</div>
-				) : (
-					data.map((column) => (
-						<div
-							key={column.label}
-							className="group flex px-4 items-center justify-between h-16 rounded-xl bg-white dark:bg-black border-[.5px] border-neutral-300 dark:border-neutral-700"
-						>
-							<div className="text-sm">
-								<div className="mb-px leading-tight font-semibold">
-									{column.name}
-								</div>
-								<div className="leading-tight text-neutral-500 dark:text-neutral-400">
-									{column.description}
-								</div>
-							</div>
-							<button
-								type="button"
-								onClick={() => LumeWindow.openColumn(column)}
-								className="text-xs uppercase font-semibold w-16 h-7 hidden group-hover:inline-flex items-center justify-center rounded-full bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-black/10"
-							>
-								Open
-							</button>
-						</div>
-					))
-				)}
-			</div>
-		</div>
-	);
-}
-
 function Groups() {
-	const { account } = Route.useSearch();
 	const { isLoading, data, refetch, isRefetching } = useQuery({
-		queryKey: ["groups", account],
+		queryKey: ["others", "groups"],
 		queryFn: async () => {
 			const res = await commands.getAllGroups();

@@ -125,23 +69,32 @@ function Groups() {
 			return (
 				<div
 					key={item.id}
-					className="group flex flex-col rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50 border-[.5px] border-neutral-300 dark:border-neutral-700"
+					className="group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
 				>
-					<div className="p-3 h-16 flex flex-wrap items-center justify-center gap-2 overflow-y-auto">
-						{item.tags
-							.filter((tag) => tag[0] === "p")
-							.map((tag) => (
-								<div key={tag[1]}>
-									<User.Provider pubkey={tag[1]}>
-										<User.Root>
-											<User.Avatar className="size-8 rounded-full" />
-										</User.Root>
-									</User.Provider>
-								</div>
-							))}
+					<div className="px-2 pt-2">
+						<div className="p-3 h-16 bg-neutral-100 rounded-lg flex flex-wrap items-center justify-center gap-2 overflow-y-auto">
+							{item.tags
+								.filter((tag) => tag[0] === "p")
+								.map((tag) => (
+									<div key={tag[1]}>
+										<User.Provider pubkey={tag[1]}>
+											<User.Root>
+												<User.Avatar className="size-8 rounded-full" />
+											</User.Root>
+										</User.Provider>
+									</div>
+								))}
+						</div>
 					</div>
-					<div className="p-3 flex items-center justify-between">
-						<div className="text-sm font-medium">{name}</div>
+					<div className="p-2 flex items-center justify-between">
+						<div className="inline-flex items-center gap-2">
+							<User.Provider pubkey={item.pubkey}>
+								<User.Root>
+									<User.Avatar className="size-7 rounded-full" />
+								</User.Root>
+							</User.Provider>
+							<h5 className="text-xs font-medium">{name}</h5>
+						</div>
 						<div className="flex items-center gap-3">
 							<button
 								type="button"
@@ -181,9 +134,7 @@ function Groups() {
 					</button>
 					<button
 						type="button"
-						onClick={() =>
-							LumeWindow.openPopup("New group", `/set-group?account=${account}`)
-						}
+						onClick={() => LumeWindow.openPopup("/set-group", "New group")}
 						className="h-7 w-max px-2 inline-flex items-center justify-center gap-1 text-sm font-medium rounded-full bg-neutral-300 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
 					>
 						<Plus className="size-3" weight="bold" />
@@ -210,9 +161,8 @@ function Groups() {
 }

 function Interests() {
-	const { account } = Route.useSearch();
 	const { isLoading, data, refetch, isRefetching } = useQuery({
-		queryKey: ["interests", account],
+		queryKey: ["others", "interests"],
 		queryFn: async () => {
 			const res = await commands.getAllInterests();

@@ -240,19 +190,28 @@ function Interests() {
 			return (
 				<div
 					key={item.id}
-					className="group flex flex-col rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50 border-[.5px] border-neutral-300 dark:border-neutral-700"
+					className="group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
 				>
-					<div className="p-3 h-16 flex flex-wrap items-center justify-center gap-2 overflow-y-auto">
-						{item.tags
-							.filter((tag) => tag[0] === "t")
-							.map((tag) => (
-								<div key={tag[1]} className="text-sm font-medium">
-									{tag[1]}
-								</div>
-							))}
+					<div className="px-2 pt-2">
+						<div className="p-3 h-16 bg-neutral-100 rounded-lg flex flex-wrap items-center justify-center gap-4 overflow-y-auto">
+							{item.tags
+								.filter((tag) => tag[0] === "t")
+								.map((tag) => (
+									<div key={tag[1]} className="text-sm font-medium">
+										{tag[1]}
+									</div>
+								))}
+						</div>
 					</div>
 					<div className="p-3 flex items-center justify-between">
-						<div className="text-sm font-medium">{name}</div>
+						<div className="inline-flex items-center gap-2">
+							<User.Provider pubkey={item.pubkey}>
+								<User.Root>
+									<User.Avatar className="size-7 rounded-full" />
+								</User.Root>
+							</User.Provider>
+							<h5 className="text-xs font-medium">{name}</h5>
+						</div>
 						<div className="flex items-center gap-3">
 							<button
 								type="button"
@@ -293,10 +252,7 @@ function Interests() {
 					<button
 						type="button"
 						onClick={() =>
-							LumeWindow.openPopup(
-								"New interest",
-								`/set-interest?account=${account}`,
-							)
+							LumeWindow.openPopup("/set-interest", "New interest")
 						}
 						className="h-7 w-max px-2 inline-flex items-center justify-center gap-1 text-sm font-medium rounded-full bg-neutral-300 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
 					>
@@ -322,3 +278,134 @@ function Interests() {
 		</div>
 	);
 }
+
+function Accounts() {
+	const { isLoading, data: accounts } = useQuery({
+		queryKey: ["accounts"],
+		queryFn: async () => {
+			const res = await commands.getAccounts();
+			return res;
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	return (
+		<div className="mb-12 flex flex-col gap-3">
+			<div className="flex items-center justify-between px-2">
+				<h3 className="font-semibold">Accounts</h3>
+			</div>
+			<div className="flex flex-col gap-3">
+				{isLoading ? (
+					<div className="inline-flex items-center gap-1.5 text-sm">
+						<Spinner className="size-4" />
+						Loading...
+					</div>
+				) : (
+					accounts.map((account) => (
+						<div
+							key={account}
+							className="group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
+						>
+							<div className="px-2 pt-2">
+								<User.Provider pubkey={account}>
+									<User.Root className="inline-flex items-center gap-2">
+										<User.Avatar className="size-7 rounded-full" />
+										<User.Name className="text-xs font-medium" />
+									</User.Root>
+								</User.Provider>
+							</div>
+							<div className="flex flex-col gap-2 p-2">
+								<div className="px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800">
+									<div className="text-sm font-medium">Newsfeed</div>
+									<button
+										type="button"
+										onClick={() => LumeWindow.openNewsfeed(account)}
+										className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
+									>
+										Add
+									</button>
+								</div>
+								<div className="px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800">
+									<div className="text-sm font-medium">Stories</div>
+									<button
+										type="button"
+										onClick={() => LumeWindow.openStory(account)}
+										className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
+									>
+										Add
+									</button>
+								</div>
+								<div className="px-3 flex items-center justify-between h-11 rounded-lg bg-neutral-100 dark:bg-neutral-800">
+									<div className="text-sm font-medium">Notification</div>
+									<button
+										type="button"
+										onClick={() => LumeWindow.openNotification(account)}
+										className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
+									>
+										Add
+									</button>
+								</div>
+							</div>
+						</div>
+					))
+				)}
+			</div>
+		</div>
+	);
+}
+
+function Core() {
+	const { isLoading, data } = useQuery({
+		queryKey: ["other-columns"],
+		queryFn: async () => {
+			const systemPath = "resources/columns.json";
+			const resourcePath = await resolveResource(systemPath);
+			const resourceFile = await readTextFile(resourcePath);
+
+			const systemColumns: LumeColumn[] = JSON.parse(resourceFile);
+			const columns = systemColumns.filter((col) => !col.default);
+
+			return columns;
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	return (
+		<div className="flex flex-col gap-3">
+			<div className="flex items-center justify-between px-2">
+				<h3 className="font-semibold">Others</h3>
+			</div>
+			<div className="flex flex-col gap-3">
+				{isLoading ? (
+					<div className="inline-flex items-center gap-1.5 text-sm">
+						<Spinner className="size-4" />
+						Loading...
+					</div>
+				) : (
+					data.map((column) => (
+						<div
+							key={column.label}
+							className="group flex px-4 items-center justify-between h-16 rounded-xl bg-white dark:bg-black border-[.5px] border-neutral-300 dark:border-neutral-700"
+						>
+							<div className="text-sm">
+								<div className="mb-px leading-tight font-semibold">
+									{column.name}
+								</div>
+								<div className="leading-tight text-neutral-500 dark:text-neutral-400">
+									{column.description}
+								</div>
+							</div>
+							<button
+								type="button"
+								onClick={() => LumeWindow.openColumn(column)}
+								className="text-xs font-semibold w-16 h-7 hidden group-hover:inline-flex items-center justify-center rounded-full bg-neutral-200 hover:bg-blue-500 hover:text-white dark:bg-black/10"
+							>
+								Add
+							</button>
+						</div>
+					))
+				)}
+			</div>
+		</div>
+	);
+}
--- a/src/routes/columns/_layout/newsfeed.$id.lazy.tsx
+++ b/src/routes/columns/_layout/newsfeed.$id.lazy.tsx
@@ -1,35 +1,23 @@
 import { events, commands } from "@/commands.gen";
 import { toLumeEvents } from "@/commons";
 import { RepostNote, Spinner, TextNote } from "@/components";
-import { LumeEvent } from "@/system";
-import { Kind, type Meta } from "@/types";
-import { ArrowDown, ArrowUp } from "@phosphor-icons/react";
+import type { LumeEvent } from "@/system";
+import { Kind } from "@/types";
+import { ArrowDown } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { type InfiniteData, useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { getCurrentWindow } from "@tauri-apps/api/window";
-import {
-	memo,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-	useTransition,
-} from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { Virtualizer } from "virtua";

-type Payload = {
-	raw: string;
-	parsed: Meta;
-};
-
-export const Route = createLazyFileRoute("/columns/_layout/newsfeed")({
+export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
 	component: Screen,
 });

 export function Screen() {
 	const contacts = Route.useLoaderData();
-	const { label, account } = Route.useSearch();
+	const search = Route.useSearch();
+
 	const {
 		data,
 		isLoading,
@@ -38,7 +26,7 @@ export function Screen() {
 		hasNextPage,
 		fetchNextPage,
 	} = useInfiniteQuery({
-		queryKey: [label, account],
+		queryKey: ["events", "newsfeed", search.label],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
 			const until = pageParam > 0 ? pageParam.toString() : undefined;
@@ -59,7 +47,10 @@ export function Screen() {

 	const renderItem = useCallback(
 		(event: LumeEvent) => {
-			if (!event) return;
+			if (!event) {
+				return;
+			}
+
 			switch (event.kind) {
 				case Kind.Repost:
 					return (
@@ -82,6 +73,28 @@ export function Screen() {
 		[data],
 	);

+	useEffect(() => {
+		events.subscription
+			.emit({
+				label: search.label,
+				kind: "Subscribe",
+				event_id: undefined,
+				contacts,
+			})
+			.then(() => console.log("Subscribe: ", search.label));
+
+		return () => {
+			events.subscription
+				.emit({
+					label: search.label,
+					kind: "Unsubscribe",
+					event_id: undefined,
+					contacts,
+				})
+				.then(() => console.log("Unsubscribe: ", search.label));
+		};
+	}, []);
+
 	return (
 		<ScrollArea.Root
 			type={"scroll"}
@@ -92,7 +105,6 @@ export function Screen() {
 				ref={ref}
 				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
-				<Listener />
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
 						<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
@@ -145,85 +157,3 @@ export function Screen() {
 		</ScrollArea.Root>
 	);
 }
-
-const Listener = memo(function Listerner() {
-	const { queryClient } = Route.useRouteContext();
-	const { label, account } = Route.useSearch();
-
-	const [lumeEvents, setLumeEvents] = useState<LumeEvent[]>([]);
-	const [isPending, startTransition] = useTransition();
-
-	const queryStatus = queryClient.getQueryState([label, account]);
-
-	const pushNewEvents = () => {
-		startTransition(() => {
-			queryClient.setQueryData(
-				[label, account],
-				(oldData: InfiniteData<LumeEvent[], number> | undefined) => {
-					if (oldData) {
-						const firstPage = oldData.pages[0];
-						const newPage = [...lumeEvents, ...firstPage];
-
-						return {
-							...oldData,
-							pages: [newPage, ...oldData.pages.slice(1)],
-						};
-					}
-				},
-			);
-
-			// Reset array
-			setLumeEvents([]);
-
-			return;
-		});
-	};
-
-	useEffect(() => {
-		events.subscription
-			.emit({ label, kind: "Subscribe", event_id: undefined })
-			.then(() => console.log("Subscribe: ", label));
-
-		return () => {
-			events.subscription
-				.emit({
-					label,
-					kind: "Unsubscribe",
-					event_id: undefined,
-				})
-				.then(() => console.log("Unsubscribe: ", label));
-		};
-	}, []);
-
-	useEffect(() => {
-		const unlisten = getCurrentWindow().listen<Payload>("event", (data) => {
-			const event = LumeEvent.from(data.payload.raw, data.payload.parsed);
-			setLumeEvents((prev) => [event, ...prev]);
-		});
-
-		return () => {
-			unlisten.then((f) => f());
-		};
-	}, []);
-
-	if (lumeEvents.length && queryStatus.fetchStatus !== "fetching") {
-		return (
-			<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
-				<button
-					type="button"
-					onClick={() => pushNewEvents()}
-					className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white"
-				>
-					{isPending ? (
-						<Spinner className="size-4" />
-					) : (
-						<ArrowUp className="size-4" />
-					)}
-					{lumeEvents.length} new notes
-				</button>
-			</div>
-		);
-	}
-
-	return null;
-});
--- a/src/routes/columns/_layout/newsfeed.$id.tsx
+++ b/src/routes/columns/_layout/newsfeed.$id.tsx
@@ -1,9 +1,9 @@
 import { commands } from "@/commands.gen";
 import { createFileRoute } from "@tanstack/react-router";

-export const Route = createFileRoute("/columns/_layout/stories")({
-	loader: async () => {
-		const res = await commands.getContactList();
+export const Route = createFileRoute("/columns/_layout/newsfeed/$id")({
+	loader: async ({ params }) => {
+		const res = await commands.getContactList(params.id);

 		if (res.status === "ok") {
 			return res.data;
--- a/src/routes/columns/_layout/notification.$id.lazy.tsx
+++ b/src/routes/columns/_layout/notification.$id.lazy.tsx
@@ -13,17 +13,17 @@ import { nip19 } from "nostr-tools";
 import { type ReactNode, useEffect, useMemo, useRef } from "react";
 import { Virtualizer } from "virtua";

-export const Route = createLazyFileRoute("/columns/_layout/notification")({
+export const Route = createLazyFileRoute("/columns/_layout/notification/$id")({
 	component: Screen,
 });

 function Screen() {
-	const { account } = Route.useSearch();
+	const { id } = Route.useParams();
 	const { queryClient } = Route.useRouteContext();
 	const { isLoading, data } = useQuery({
-		queryKey: ["notification", account],
+		queryKey: ["notification", id],
 		queryFn: async () => {
-			const res = await commands.getNotifications();
+			const res = await commands.getNotifications(id);

 			if (res.status === "error") {
 				throw new Error(res.error);
@@ -37,7 +37,7 @@ function Screen() {
 		select: (events) => {
 			const zaps = new Map<string, LumeEvent[]>();
 			const reactions = new Map<string, LumeEvent[]>();
-			const hex = nip19.decode(account).data;
+			const hex = nip19.decode(id).data;

 			const texts = events.filter(
 				(ev) => ev.kind === Kind.Text && ev.pubkey !== hex,
@@ -80,7 +80,7 @@ function Screen() {
 		const unlisten = getCurrentWindow().listen("event", async (data) => {
 			const event: LumeEvent = JSON.parse(data.payload as string);
 			await queryClient.setQueryData(
-				["notification", account],
+				["notification", id],
 				(data: LumeEvent[]) => [event, ...data],
 			);
 		});
@@ -88,7 +88,7 @@ function Screen() {
 		return () => {
 			unlisten.then((f) => f());
 		};
-	}, [account]);
+	}, [id]);

 	if (isLoading) {
 		return (
@@ -130,8 +130,8 @@ function Screen() {
 					className="min-h-0 flex-1 overflow-x-hidden"
 				>
 					<Tab value="replies">
-						{data.texts.map((event, index) => (
-							<TextNote key={event.id + index} event={event} />
+						{data.texts.map((event) => (
+							<TextNote key={event.id} event={event} />
 						))}
 					</Tab>
 					<Tab value="reactions">
--- a/src/routes/columns/_layout/stories.$id.lazy.tsx
+++ b/src/routes/columns/_layout/stories.$id.lazy.tsx
@@ -14,7 +14,7 @@ import { type ReactNode, memo, useMemo, useRef } from "react";
 import reactStringReplace from "react-string-replace";
 import { Virtualizer } from "virtua";

-export const Route = createLazyFileRoute("/columns/_layout/stories")({
+export const Route = createLazyFileRoute("/columns/_layout/stories/$id")({
 	component: Screen,
 });

@@ -59,7 +59,7 @@ function StoryItem({ contact }: { contact: string }) {
 		error,
 		data: events,
 	} = useQuery({
-		queryKey: ["stories", contact],
+		queryKey: ["events", "story", contact],
 		queryFn: async () => {
 			const res = await commands.getAllEventsByAuthor(contact, 10);

@@ -113,7 +113,7 @@ function StoryItem({ contact }: { contact: string }) {
 							</div>
 						) : !events.length ? (
 							<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
-								This user didn't have any new notes.
+								This user didn't have any new notes in the last few days.
 							</div>
 						) : (
 							events.map((event) => <StoryEvent key={event.id} event={event} />)
--- a/src/routes/columns/_layout/stories.$id.tsx
+++ b/src/routes/columns/_layout/stories.$id.tsx
@@ -1,9 +1,9 @@
 import { commands } from "@/commands.gen";
 import { createFileRoute } from "@tanstack/react-router";

-export const Route = createFileRoute("/columns/_layout/newsfeed")({
-	loader: async () => {
-		const res = await commands.getContactList();
+export const Route = createFileRoute("/columns/_layout/stories/$id")({
+	loader: async ({ params }) => {
+		const res = await commands.getContactList(params.id);

 		if (res.status === "ok") {
 			return res.data;
--- a/src/routes/columns/_layout/trending.lazy.tsx
+++ b/src/routes/columns/_layout/trending.lazy.tsx
@@ -13,7 +13,7 @@ export const Route = createLazyFileRoute("/columns/_layout/trending")({

 function Screen() {
 	const { isLoading, data } = useQuery({
-		queryKey: ["trending-notes"],
+		queryKey: ["trending"],
 		queryFn: async ({ signal }) => {
 			const res = await fetch("https://api.nostr.band/v0/trending/notes", {
 				signal,
--- a/src/routes/columns/_layout/users.$id.lazy.tsx
+++ b/src/routes/columns/_layout/users.$id.lazy.tsx
@@ -16,7 +16,7 @@ export const Route = createLazyFileRoute("/columns/_layout/users/$id")({
 function Screen() {
 	const { id } = Route.useParams();
 	const { isLoading, data: events } = useQuery({
-		queryKey: ["stories", id],
+		queryKey: ["events", "story", id],
 		queryFn: async () => {
 			const res = await commands.getAllEventsByAuthor(id, 100);

--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.lazy.tsx
@@ -1,236 +0,0 @@
-import { commands } from "@/commands.gen";
-import { appSettings, displayNpub } from "@/commons";
-import { Frame, Spinner, User } from "@/components";
-import { ArrowRight, DotsThree, GearSix, Plus } from "@phosphor-icons/react";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { Menu, MenuItem } from "@tauri-apps/api/menu";
-import { message } from "@tauri-apps/plugin-dialog";
-import {
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-	useTransition,
-} from "react";
-
-export const Route = createLazyFileRoute("/")({
-	component: Screen,
-});
-
-function Screen() {
-	const context = Route.useRouteContext();
-	const navigate = Route.useNavigate();
-
-	const currentDate = useMemo(
-		() =>
-			new Date().toLocaleString("default", {
-				weekday: "long",
-				month: "long",
-				day: "numeric",
-			}),
-		[],
-	);
-
-	const [accounts, setAccounts] = useState([]);
-	const [value, setValue] = useState("");
-	const [autoLogin, setAutoLogin] = useState(false);
-	const [password, setPassword] = useState("");
-	const [isPending, startTransition] = useTransition();
-
-	const showContextMenu = useCallback(
-		async (e: React.MouseEvent, account: string) => {
-			e.stopPropagation();
-
-			const menuItems = await Promise.all([
-				MenuItem.new({
-					text: "Reset password",
-					enabled: !account.includes("_nostrconnect"),
-					// @ts-ignore, this is tanstack router bug
-					action: () => navigate({ to: "/reset", search: { account } }),
-				}),
-				MenuItem.new({
-					text: "Delete account",
-					action: async () => await deleteAccount(account),
-				}),
-			]);
-
-			const menu = await Menu.new({
-				items: menuItems,
-			});
-
-			await menu.popup().catch((e) => console.error(e));
-		},
-		[],
-	);
-
-	const deleteAccount = async (account: string) => {
-		const res = await commands.deleteAccount(account);
-
-		if (res.status === "ok") {
-			setAccounts((prev) => prev.filter((item) => item !== account));
-		}
-	};
-
-	const selectAccount = (account: string) => {
-		setValue(account);
-
-		if (account.includes("_nostrconnect")) {
-			setAutoLogin(true);
-		}
-	};
-
-	const loginWith = () => {
-		startTransition(async () => {
-			const res = await commands.login(value, password);
-
-			if (res.status === "ok") {
-				const settings = await commands.getUserSettings();
-
-				if (settings.status === "ok") {
-					appSettings.setState(() => settings.data);
-				}
-
-				const status = await commands.isAccountSync(res.data);
-
-				if (status) {
-					navigate({
-						to: "/$account/home",
-						// @ts-ignore, this is tanstack router bug
-						params: { account: res.data },
-						replace: true,
-					});
-				} else {
-					navigate({
-						to: "/loading",
-						// @ts-ignore, this is tanstack router bug
-						search: { account: res.data },
-						replace: true,
-					});
-				}
-			} else {
-				await message(res.error, { title: "Login", kind: "error" });
-				return;
-			}
-		});
-	};
-
-	useEffect(() => {
-		if (autoLogin) {
-			loginWith();
-		}
-	}, [autoLogin, value]);
-
-	useEffect(() => {
-		setAccounts(context.accounts);
-	}, [context.accounts]);
-
-	return (
-		<div
-			data-tauri-drag-region
-			className="relative size-full flex items-center justify-center"
-		>
-			<div className="w-[320px] flex flex-col gap-8">
-				<div className="flex flex-col gap-1 text-center">
-					<h3 className="leading-tight text-neutral-700 dark:text-neutral-300">
-						{currentDate}
-					</h3>
-					<h1 className="leading-tight text-xl font-semibold">Welcome back!</h1>
-				</div>
-				<Frame
-					className="flex flex-col w-full divide-y divide-neutral-100 dark:divide-white/5 rounded-xl overflow-hidden"
-					shadow
-				>
-					{accounts.map((account) => (
-						<div
-							key={account}
-							onClick={() => selectAccount(account)}
-							onKeyDown={() => selectAccount(account)}
-							className="group flex items-center gap-2 hover:bg-black/5 dark:hover:bg-white/5 p-3"
-						>
-							<User.Provider pubkey={account.replace("_nostrconnect", "")}>
-								<User.Root className="flex-1 flex items-center gap-2.5">
-									<User.Avatar className="rounded-full size-10" />
-									{value === account && !value.includes("_nostrconnect") ? (
-										<div className="flex-1 flex items-center gap-2">
-											<input
-												name="password"
-												type="password"
-												value={password}
-												onChange={(e) => setPassword(e.target.value)}
-												onKeyDown={(e) => {
-													if (e.key === "Enter") loginWith();
-												}}
-												disabled={isPending}
-												placeholder="Password"
-												className="px-3 rounded-full w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
-											/>
-										</div>
-									) : (
-										<div className="inline-flex flex-col items-start">
-											<div className="inline-flex items-center gap-1.5">
-												<User.Name className="max-w-[6rem] truncate font-medium leading-tight" />
-												{account.includes("_nostrconnect") ? (
-													<div className="text-[8px] border border-blue-500 text-blue-500 px-1.5 rounded-full">
-														Nostr Connect
-													</div>
-												) : null}
-											</div>
-											<span className="text-sm text-neutral-700 dark:text-neutral-300">
-												{displayNpub(account.replace("_nostrconnect", ""), 16)}
-											</span>
-										</div>
-									)}
-								</User.Root>
-							</User.Provider>
-							<div className="inline-flex items-center justify-center size-8 shrink-0">
-								{value === account ? (
-									isPending ? (
-										<Spinner />
-									) : (
-										<button
-											type="button"
-											onClick={() => loginWith()}
-											className="rounded-full size-10 inline-flex items-center justify-center"
-										>
-											<ArrowRight className="size-5" />
-										</button>
-									)
-								) : (
-									<button
-										type="button"
-										onClick={(e) => showContextMenu(e, account)}
-										className="rounded-full size-10 hidden group-hover:inline-flex items-center justify-center"
-									>
-										<DotsThree className="size-5" />
-									</button>
-								)}
-							</div>
-						</div>
-					))}
-					<a
-						href="/new"
-						className="flex items-center justify-between hover:bg-black/5 dark:hover:bg-white/5"
-					>
-						<div className="flex items-center gap-2.5 p-3">
-							<div className="inline-flex items-center justify-center rounded-full size-10 bg-neutral-200 dark:bg-white/10">
-								<Plus className="size-5" />
-							</div>
-							<span className="truncate text-sm font-medium leading-tight">
-								New account
-							</span>
-						</div>
-					</a>
-				</Frame>
-			</div>
-			<div className="absolute bottom-2 right-2">
-				<a
-					href="/bootstrap-relays"
-					className="h-8 w-max text-xs px-3 inline-flex items-center justify-center gap-1.5 bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10 rounded-full"
-				>
-					<GearSix className="size-4" />
-					Manage Relays
-				</a>
-			</div>
-		</div>
-	);
-}
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,24 +0,0 @@
-import { commands } from "@/commands.gen";
-import { checkForAppUpdates } from "@/commons";
-import { createFileRoute, redirect } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/")({
-	beforeLoad: async () => {
-		// Check for app updates
-		await checkForAppUpdates(true);
-
-		// Get all accounts
-		const accounts = await commands.getAccounts();
-
-		if (accounts.length < 1) {
-			throw redirect({
-				to: "/new",
-				replace: true,
-			});
-		}
-
-		return {
-			accounts: accounts.filter((account) => !account.endsWith("Lume")),
-		};
-	},
-});
--- a/src/routes/loading.tsx
+++ b/src/routes/loading.tsx
@@ -1,58 +0,0 @@
-import { commands } from "@/commands.gen";
-import { Frame, Spinner } from "@/components";
-import { createFileRoute } from "@tanstack/react-router";
-import { listen } from "@tauri-apps/api/event";
-import { useEffect } from "react";
-
-type RouteSearch = {
-	account: string;
-};
-
-export const Route = createFileRoute("/loading")({
-	validateSearch: (search: Record<string, string>): RouteSearch => {
-		return {
-			account: search.account,
-		};
-	},
-	component: Screen,
-});
-
-function Screen() {
-	const navigate = Route.useNavigate();
-	const search = Route.useSearch();
-
-	useEffect(() => {
-		const unlisten = listen("neg_synchronized", async () => {
-			const status = await commands.createSyncFile(search.account);
-
-			if (status) {
-				navigate({
-					to: "/$account/home",
-					// @ts-ignore, this is tanstack router bug
-					params: { account: search.account },
-					replace: true,
-				});
-			} else {
-				throw new Error("System error.");
-			}
-		});
-
-		return () => {
-			unlisten.then((f) => f());
-		};
-	}, []);
-
-	return (
-		<div className="size-full flex items-center justify-center">
-			<Frame
-				className="p-6 h-36 flex flex-col gap-2 items-center justify-center text-center rounded-xl overflow-hidden"
-				shadow
-			>
-				<Spinner />
-				<p className="text-sm text-neutral-600 dark:text-neutral-40">
-					Syncing all necessary data for the first time login...
-				</p>
-			</Frame>
-		</div>
-	);
-}
--- a/src/routes/new-post/-components/media.tsx
+++ b/src/routes/new-post/-components/media.tsx
@@ -12,10 +12,8 @@ import {

 export function MediaButton({
 	setText,
-	setAttaches,
 }: {
 	setText: Dispatch<SetStateAction<string>>;
-	setAttaches: Dispatch<SetStateAction<string[]>>;
 }) {
 	const [isPending, startTransition] = useTransition();

@@ -24,8 +22,6 @@ export function MediaButton({
 			try {
 				const image = await upload();
 				setText((prev) => `${prev}\n${image}`);
-				setAttaches((prev) => [...prev, image]);
-				return;
 			} catch (e) {
 				await message(String(e), { title: "Upload", kind: "error" });
 				return;
@@ -44,7 +40,6 @@ export function MediaButton({
 					if (isImagePath(item)) {
 						const image = await upload(item);
 						setText((prev) => `${prev}\n${image}`);
-						setAttaches((prev) => [...prev, image]);
 					}
 				}

--- a/src/routes/new-post/-components/pow.tsx
+++ b/src/routes/new-post/-components/pow.tsx
--- a/src/routes/new-post/-components/warning.tsx
+++ b/src/routes/new-post/-components/warning.tsx
--- a/src/routes/new-post/index.tsx
+++ b/src/routes/new-post/index.tsx
@@ -1,15 +1,23 @@
-// @ts-nocheck
-import { type Mention, commands } from "@/commands.gen";
-import { cn } from "@/commons";
-import { Spinner } from "@/components";
+import { type Mention, type Result, commands } from "@/commands.gen";
+import { cn, displayNpub } from "@/commons";
+import { PublishIcon, Spinner } from "@/components";
 import { Note } from "@/components/note";
 import { User } from "@/components/user";
-import { LumeEvent, useEvent } from "@/system";
-import { Feather } from "@phosphor-icons/react";
+import { LumeWindow, useEvent } from "@/system";
+import type { Metadata } from "@/types";
+import { CaretDown } from "@phosphor-icons/react";
 import { createFileRoute } from "@tanstack/react-router";
-import { getCurrentWindow } from "@tauri-apps/api/window";
+import { Menu, MenuItem } from "@tauri-apps/api/menu";
+import type { Window } from "@tauri-apps/api/window";
 import { nip19 } from "nostr-tools";
-import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	useTransition,
+} from "react";
 import { createPortal } from "react-dom";
 import {
 	RichTextarea,
@@ -45,7 +53,15 @@ const renderer = createRegexRenderer([
 	],
 	[
 		/(?:^|\W)nostr:(\w+)(?!\w)/g,
-		({ children, key, value }) => (
+		({ children, key }) => (
+			<span key={key} className="text-blue-500">
+				{children}
+			</span>
+		),
+	],
+	[
+		/(?:^|\W)#(\w+)(?!\w)/g,
+		({ children, key }) => (
 			<span key={key} className="text-blue-500">
 				{children}
 			</span>
@@ -53,7 +69,7 @@ const renderer = createRegexRenderer([
 	],
 ]);

-export const Route = createFileRoute("/editor/")({
+export const Route = createFileRoute("/new-post/")({
 	validateSearch: (search: Record<string, string>): EditorSearch => {
 		return {
 			reply_to: search.reply_to,
@@ -70,25 +86,28 @@ export const Route = createFileRoute("/editor/")({
 			initialValue = "";
 		}

-		const res = await commands.getMentionList();
+		const res = await commands.getAllProfiles();
+		const accounts = await commands.getAccounts();

 		if (res.status === "ok") {
 			users = res.data;
 		}

-		return { users, initialValue };
+		return { accounts, users, initialValue };
 	},
 	component: Screen,
 });

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

 	const [text, setText] = useState("");
+	const [currentUser, setCurrentUser] = useState<string>(null);
+	const [popup, setPopup] = useState<Window>(null);
+	const [isPublish, setIsPublish] = useState(false);
 	const [error, setError] = useState("");
 	const [isPending, startTransition] = useTransition();
-	const [attaches, setAttaches] = useState<string[]>(null);
 	const [warning, setWarning] = useState({ enable: false, reason: "" });
 	const [difficulty, setDifficulty] = useState({ enable: false, num: 21 });
 	const [index, setIndex] = useState<number>(0);
@@ -110,6 +129,34 @@ function Screen() {
 		[name],
 	);

+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const list = [];
+
+		for (const account of accounts) {
+			const res = await commands.getProfile(account);
+			let name = "unknown";
+
+			if (res.status === "ok") {
+				const profile: Metadata = JSON.parse(res.data);
+				name = profile.display_name ?? profile.name;
+			}
+
+			list.push(
+				MenuItem.new({
+					text: `Publish as ${name} (${displayNpub(account, 16)})`,
+					action: async () => setCurrentUser(account),
+				}),
+			);
+		}
+
+		const items = await Promise.all(list);
+		const menu = await Menu.new({ items });
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
+
 	const insert = (i: number) => {
 		if (!ref.current || !pos) return;

@@ -126,41 +173,84 @@ function Screen() {
 		setIndex(0);
 	};

-	const publish = async () => {
+	const publish = () => {
 		startTransition(async () => {
-			try {
-				// Temporary hide window
-				await getCurrentWindow().hide();
+			const content = text.trim();
+			const warn = warning.enable ? warning.reason : undefined;
+			const diff = difficulty.enable ? difficulty.num : undefined;

-				let res: Result<string, string>;
+			let res: Result<string, string>;

-				if (reply_to) {
-					res = await commands.reply(content, reply_to, root_to);
-				} else {
-					res = await commands.publish(content, warning, difficulty);
-				}
+			if (reply_to?.length) {
+				res = await commands.reply(content, reply_to, undefined);
+			} else {
+				res = await commands.publish(content, warn, diff);
+			}

-				if (res.status === "ok") {
-					setText("");
-					// Close window
-					await getCurrentWindow().close();
-				} else {
-					setError(res.error);
-					// Focus window
-					await getCurrentWindow().setFocus();
-				}
-			} catch {
-				return;
+			if (res.status === "ok") {
+				setText("");
+				setIsPublish(true);
+			} else {
+				setError(res.error);
 			}
 		});
 	};

+	const submit = async () => {
+		if (currentUser) {
+			const signer = await commands.hasSigner(currentUser);
+
+			if (signer.status === "ok") {
+				if (!signer.data) {
+					const newPopup = await LumeWindow.openPopup(
+						`/set-signer/${currentUser}`,
+						undefined,
+						false,
+					);
+
+					setPopup(newPopup);
+					return;
+				}
+
+				publish();
+			}
+		}
+	};
+
+	useEffect(() => {
+		if (!popup) return;
+
+		const unlisten = popup.listen("signer-updated", () => {
+			publish();
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, [popup]);
+
+	useEffect(() => {
+		if (isPublish) {
+			const timer = setTimeout(() => setIsPublish((prev) => !prev), 5000);
+
+			return () => {
+				clearTimeout(timer);
+			};
+		}
+	}, [isPublish]);
+
 	useEffect(() => {
 		if (initialValue?.length) {
 			setText(initialValue);
 		}
 	}, [initialValue]);

+	useEffect(() => {
+		if (accounts?.length) {
+			setCurrentUser(accounts[0]);
+		}
+	}, [accounts]);
+
 	return (
 		<div className="flex flex-col w-full h-full">
 			<div data-tauri-drag-region className="h-11 shrink-0" />
@@ -229,21 +319,24 @@ function Screen() {
 								setIndex(0);
 							}
 						}}
+						disabled={isPending}
 					>
 						{renderer}
 					</RichTextarea>
-					{pos
-						? createPortal(
-								<Menu
-									top={pos.top}
-									left={pos.left}
-									users={filtered}
-									index={index}
-									insert={insert}
-								/>,
-								document.body,
-							)
-						: null}
+					{pos ? (
+						createPortal(
+							<MentionPopup
+								top={pos.top}
+								left={pos.left}
+								users={filtered}
+								index={index}
+								insert={insert}
+							/>,
+							document.body,
+						)
+					) : (
+						<></>
+					)}
 				</div>
 			</div>
 			{warning.enable ? (
@@ -289,20 +382,44 @@ function Screen() {
 				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"
-				>
-					{isPending ? (
-						<Spinner className="size-4" />
-					) : (
-						<Feather className="size-4" weight="fill" />
-					)}
-					Publish
-				</button>
-				<div className="inline-flex items-center flex-1 gap-2 pl-4">
-					<MediaButton setText={setText} setAttaches={setAttaches} />
+				<div className="inline-flex items-center gap-3">
+					<button
+						type="button"
+						onClick={() => submit()}
+						className={cn(
+							"inline-flex items-center justify-center h-8 gap-1 px-2.5 text-sm font-medium rounded-lg w-max",
+							isPublish
+								? "bg-green-500 hover:bg-green-600 dark:hover:bg-green-400 text-white"
+								: "bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20",
+						)}
+					>
+						{isPending ? (
+							<Spinner className="size-4" />
+						) : (
+							<PublishIcon className="size-4" />
+						)}
+						{isPublish ? "Published" : "Publish"}
+					</button>
+					{currentUser ? (
+						<button
+							type="button"
+							onClick={(e) => showContextMenu(e)}
+							className="inline-flex items-center gap-1.5"
+						>
+							<User.Provider pubkey={currentUser}>
+								<User.Root>
+									<User.Avatar className="size-6 rounded-full" />
+								</User.Root>
+							</User.Provider>
+							<CaretDown
+								className="mt-px size-3 text-neutral-500"
+								weight="bold"
+							/>
+						</button>
+					) : null}
+				</div>
+				<div className="inline-flex items-center flex-1 gap-2 pl-2">
+					<MediaButton setText={setText} />
 					<WarningButton setWarning={setWarning} />
 					<PowButton setDifficulty={setDifficulty} />
 				</div>
@@ -311,7 +428,7 @@ function Screen() {
 	);
 }

-function Menu({
+function MentionPopup({
 	users,
 	index,
 	top,
--- a/src/routes/new.lazy.tsx
+++ b/src/routes/new.lazy.tsx
@@ -19,24 +19,36 @@ function Screen() {
 				<div className="flex flex-col gap-4">
 					<a
 						href="/auth/connect"
-						className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-900 ring-1 ring-black/5 dark:ring-white/5"
+						className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
 					>
 						<h3 className="mb-1 font-medium">Continue with Nostr Connect</h3>
-						<p className="text-xs text-neutral-500 dark:text-neutral-600">
+						<p className="text-xs text-neutral-500 dark:text-neutral-500">
 							Your account will be handled by a remote signer. Lume will not
 							store your account keys.
 						</p>
 					</a>
 					<a
 						href="/auth/import"
-						className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-900 ring-1 ring-black/5 dark:ring-white/5"
+						className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
 					>
 						<h3 className="mb-1 font-medium">Continue with Secret Key</h3>
-						<p className="text-xs text-neutral-500 dark:text-neutral-600">
+						<p className="text-xs text-neutral-500 dark:text-neutral-500">
 							Lume will store your keys in secure storage. You can provide a
 							password to add extra security.
 						</p>
 					</a>
+					<a
+						href="/auth/watch"
+						className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-800 ring-1 ring-black/5 dark:ring-white/5"
+					>
+						<h3 className="mb-1 font-medium">
+							Continue with Public Key (Watch Mode)
+						</h3>
+						<p className="text-xs text-neutral-500 dark:text-neutral-500">
+							Use for experience without provide your private key, you can add
+							it later to publish new note.
+						</p>
+					</a>
 					<div className="flex items-center justify-between gap-2">
 						<div className="flex-1 h-px bg-black/5 dark:bg-white/5" />
 						<div className="shrink-0 text-sm text-neutral-500 dark:text-neutral-400">
--- a/src/routes/set-signer.$id.lazy.tsx
+++ b/src/routes/set-signer.$id.lazy.tsx
@@ -0,0 +1,92 @@
+import { commands } from "@/commands.gen";
+import { Spinner, User } from "@/components";
+import { Lock } from "@phosphor-icons/react";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState, useTransition } from "react";
+
+export const Route = createLazyFileRoute("/set-signer/$id")({
+	component: Screen,
+});
+
+function Screen() {
+	const { id } = Route.useParams();
+
+	const [password, setPassword] = useState("");
+	const [isPending, startTransition] = useTransition();
+
+	const unlock = () => {
+		startTransition(async () => {
+			if (!password.length) {
+				await message("Password is required", { kind: "info" });
+				return;
+			}
+
+			const window = getCurrentWindow();
+			const res = await commands.setSigner(id, password);
+
+			if (res.status === "ok") {
+				await window.close();
+			} else {
+				await message(res.error, { kind: "error" });
+				return;
+			}
+		});
+	};
+
+	return (
+		<div
+			data-tauri-drag-region
+			className="size-full flex flex-col items-center justify-between gap-6 p-3"
+		>
+			<div
+				data-tauri-drag-region
+				className="flex-1 w-full px-10 flex flex-col gap-6 items-center justify-center"
+			>
+				<User.Provider pubkey={id}>
+					<User.Root className="flex flex-col text-center gap-2">
+						<User.Avatar className="size-12 rounded-full" />
+						<User.Name className="font-semibold" />
+					</User.Root>
+				</User.Provider>
+				<div className="w-full flex flex-col gap-2 items-center justify-center">
+					<input
+						name="password"
+						type="password"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") unlock();
+						}}
+						disabled={isPending}
+						placeholder="Enter password to unlock"
+						className="px-3 w-full rounded-lg h-10 text-center bg-transparent border border-black/10 dark:border-white/10 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
+					/>
+					<button
+						type="button"
+						onClick={() => unlock()}
+						disabled={isPending}
+						className="shrink-0 h-9 w-full rounded-lg inline-flex items-center justify-center gap-2 bg-blue-500 hover:bg-blue-600 dark:hover:bg-blue-400 text-white text-sm font-medium"
+					>
+						{isPending ? (
+							<Spinner className="size-4" />
+						) : (
+							<Lock className="size-4" weight="bold" />
+						)}
+						Unlock
+					</button>
+				</div>
+			</div>
+			<div className="mt-auto">
+				<button
+					type="button"
+					onClick={() => getCurrentWindow().close()}
+					className="text-sm font-medium text-red-500"
+				>
+					Cancel
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/src/routes/$account/_settings.lazy.tsx
+++ b/src/routes/$account/_settings.lazy.tsx
@@ -4,12 +4,12 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Link } from "@tanstack/react-router";
 import { Outlet, createLazyFileRoute } from "@tanstack/react-router";

-export const Route = createLazyFileRoute("/$account/_settings")({
+export const Route = createLazyFileRoute("/settings/$id")({
 	component: Screen,
 });

 function Screen() {
-	const { account } = Route.useParams();
+	const { id } = Route.useParams();
 	const { platform } = Route.useRouteContext();

 	return (
@@ -17,11 +17,14 @@ function Screen() {
 			<div
 				data-tauri-drag-region
 				className={cn(
-					"w-[250px] shrink-0 flex flex-col gap-1 border-r border-black/10 dark:border-white/10 p-2",
+					"w-[200px] shrink-0 flex flex-col gap-1 border-r border-black/10 dark:border-white/10 p-2",
 					platform === "macos" ? "pt-11" : "",
 				)}
 			>
-				<Link to="/$account/general" params={{ account }}>
+				<div className="h-8 px-1.5">
+					<h1 className="text-lg font-semibold">Settings</h1>
+				</div>
+				<Link to="/settings/$id/general" params={{ id }}>
 					{({ isActive }) => {
 						return (
 							<div
@@ -38,7 +41,7 @@ function Screen() {
 						);
 					}}
 				</Link>
-				<Link to="/$account/profile" params={{ account }}>
+				<Link to="/settings/$id/profile" params={{ id }}>
 					{({ isActive }) => {
 						return (
 							<div
@@ -55,7 +58,7 @@ function Screen() {
 						);
 					}}
 				</Link>
-				<Link to="/$account/relay" params={{ account }}>
+				<Link to="/settings/$id/relay" params={{ id }}>
 					{({ isActive }) => {
 						return (
 							<div
@@ -72,7 +75,7 @@ function Screen() {
 						);
 					}}
 				</Link>
-				<Link to="/$account/wallet" params={{ account }}>
+				<Link to="/settings/$id/wallet" params={{ id }}>
 					{({ isActive }) => {
 						return (
 							<div
--- a/src/routes/settings.$id/general.lazy.tsx
+++ b/src/routes/settings.$id/general.lazy.tsx
@@ -0,0 +1,189 @@
+import { commands } from '@/commands.gen'
+import { appSettings } from '@/commons'
+import { Spinner } from '@/components'
+import * as Switch from '@radix-ui/react-switch'
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { useStore } from '@tanstack/react-store'
+import { invoke } from '@tauri-apps/api/core'
+import { message } from '@tauri-apps/plugin-dialog'
+import { useCallback, useEffect, useState, useTransition } from 'react'
+
+type Theme = 'auto' | 'light' | 'dark'
+
+export const Route = createLazyFileRoute('/settings/$id/general')({
+  component: Screen,
+})
+
+function Screen() {
+  const [theme, setTheme] = useState<Theme>(null)
+  const [isPending, startTransition] = useTransition()
+
+  const changeTheme = useCallback(async (theme: string) => {
+    if (theme === 'auto' || theme === 'light' || theme === 'dark') {
+      invoke('plugin:theme|set_theme', {
+        theme: theme,
+      }).then(() => setTheme(theme))
+    }
+  }, [])
+
+  const updateSettings = () => {
+    startTransition(async () => {
+      const newSettings = JSON.stringify(appSettings.state)
+      const res = await commands.setUserSettings(newSettings)
+
+      if (res.status === 'error') {
+        await message(res.error, { kind: 'error' })
+      }
+
+      return
+    })
+  }
+
+  useEffect(() => {
+    invoke('plugin:theme|get_theme').then((data) => setTheme(data as Theme))
+  }, [])
+
+  return (
+    <div className="relative w-full">
+      <div className="flex flex-col gap-6 px-3 pb-3">
+        <div className="flex flex-col gap-2">
+          <h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            General
+          </h2>
+          <div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
+            <Setting
+              name="Relay Hint"
+              description="Use the relay hint if necessary."
+              label="use_relay_hint"
+            />
+            <Setting
+              name="Content Warning"
+              description="Shows a warning for notes that have a content warning."
+              label="content_warning"
+            />
+            <Setting
+              name="Trusted Only"
+              description="Only shows note's replies from your inner circle."
+              label="trusted_only"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            Appearance
+          </h2>
+          <div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
+            <div className="flex items-start justify-between w-full gap-4 py-3">
+              <div className="flex-1">
+                <h3 className="font-medium">Appearance</h3>
+                <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                  Change app theme
+                </p>
+              </div>
+              <div className="flex justify-end w-36 shrink-0">
+                <select
+                  name="theme"
+                  className="w-24 py-1 bg-transparent rounded-lg shadow-none outline-none border-1 border-black/10 dark:border-white/10"
+                  defaultValue={theme}
+                  onChange={(e) => changeTheme(e.target.value)}
+                >
+                  <option value="auto">Auto</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </div>
+            </div>
+            <Setting
+              name="Transparent Effect"
+              description="Use native window transparent effect."
+              label="transparent"
+            />
+            <Setting
+              name="Show Zap Button"
+              description="Shows the Zap button when viewing a note."
+              label="display_zap_button"
+            />
+            <Setting
+              name="Show Repost Button"
+              description="Shows the Repost button when viewing a note."
+              label="display_repost_button"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            Privacy & Performance
+          </h2>
+          <div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
+            <Setting
+              name="Proxy"
+              description="Set proxy address."
+              label="proxy"
+            />
+            <Setting
+              name="Image Resize Service"
+              description="Use weserv/images for resize image on-the-fly."
+              label="image_resize_service"
+            />
+            <Setting
+              name="Load Remote Media"
+              description="View the remote media directly."
+              label="display_media"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="sticky bottom-0 left-0 w-full h-16 flex items-center justify-end px-3">
+        <div className="absolute left-0 bottom-0 w-full h-11 gradient-mask-t-0 bg-neutral-100 dark:bg-neutral-900" />
+        <button
+          type="button"
+          onClick={() => updateSettings()}
+          className="relative z-10 inline-flex items-center justify-center w-20 rounded-md shadow h-8 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium"
+        >
+          {isPending ? <Spinner className="size-4" /> : 'Update'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function Setting({
+  label,
+  name,
+  description,
+}: {
+  label: string
+  name: string
+  description: string
+}) {
+  const state = useStore(appSettings, (state) => state[label])
+
+  const toggle = useCallback(() => {
+    appSettings.setState((state) => {
+      return {
+        ...state,
+        [label]: !state[label],
+      }
+    })
+  }, [])
+
+  return (
+    <div className="flex items-start justify-between w-full gap-4 py-3">
+      <div className="flex-1">
+        <h3 className="font-medium">{name}</h3>
+        <p className="text-sm text-neutral-700 dark:text-neutral-300">
+          {description}
+        </p>
+      </div>
+      <div className="flex justify-end w-36 shrink-0">
+        <Switch.Root
+          checked={state}
+          onClick={() => toggle()}
+          className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
+        >
+          <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>
+  )
+}
--- a/src/routes/settings.$id/general.tsx
+++ b/src/routes/settings.$id/general.tsx
@@ -0,0 +1,17 @@
+import { commands } from '@/commands.gen'
+import { appSettings } from '@/commons'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/settings/$id/general')({
+  beforeLoad: async () => {
+    const res = await commands.getUserSettings()
+
+    if (res.status === 'ok') {
+      appSettings.setState((state) => {
+        return { ...state, ...res.data }
+      })
+    } else {
+      throw new Error(res.error)
+    }
+  },
+})
--- a/src/routes/$account/_settings/profile.lazy.tsx
+++ b/src/routes/$account/_settings/profile.lazy.tsx
@@ -14,7 +14,7 @@ import {
 } from "react";
 import { useForm } from "react-hook-form";

-export const Route = createLazyFileRoute("/$account/_settings/profile")({
+export const Route = createLazyFileRoute("/settings/$id/profile")({
 	component: Screen,
 });

@@ -174,14 +174,14 @@ function Screen() {
 }

 function PrivkeyButton() {
-	const { account } = Route.useParams();
+	const { id } = Route.useParams();

 	const [isPending, startTransition] = useTransition();
 	const [isCopy, setIsCopy] = useState(false);

 	const copyPrivateKey = () => {
 		startTransition(async () => {
-			const res = await commands.getPrivateKey(account);
+			const res = await commands.getPrivateKey(id);

 			if (res.status === "ok") {
 				await writeText(res.data);
--- a/src/routes/$account/_settings/profile.tsx
+++ b/src/routes/$account/_settings/profile.tsx
@@ -1,9 +1,9 @@
 import { type Profile, commands } from "@/commands.gen";
 import { createFileRoute } from "@tanstack/react-router";

-export const Route = createFileRoute("/$account/_settings/profile")({
+export const Route = createFileRoute("/settings/$id/profile")({
 	beforeLoad: async ({ params }) => {
-		const res = await commands.getProfile(params.account);
+		const res = await commands.getProfile(params.id);

 		if (res.status === "ok") {
 			const profile: Profile = JSON.parse(res.data);
--- a/src/routes/$account/_settings/relay.lazy.tsx
+++ b/src/routes/$account/_settings/relay.lazy.tsx
@@ -4,7 +4,7 @@ import { createLazyFileRoute } from "@tanstack/react-router";
 import { message } from "@tauri-apps/plugin-dialog";
 import { useEffect, useState, useTransition } from "react";

-export const Route = createLazyFileRoute("/$account/_settings/relay")({
+export const Route = createLazyFileRoute("/settings/$id/relay")({
 	component: Screen,
 });

@@ -12,7 +12,7 @@ function Screen() {
 	const { relayList } = Route.useRouteContext();

 	const [relays, setRelays] = useState<string[]>([]);
-	const [newRelay, setNewRelay] = useState("");
+	const [newRelay, setNewRelay] = useState<string>("");
 	const [isPending, startTransition] = useTransition();

 	const removeRelay = async (relay: string) => {
@@ -93,6 +93,7 @@ function Screen() {
 									onChange={(e) => setNewRelay(e.target.value)}
 									name="url"
 									placeholder="wss://..."
+									disabled={isPending}
 									spellCheck={false}
 									className="flex-1 px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring-0 dark:border-neutral-700 dark:placeholder:text-neutral-400"
 								/>
--- a/src/routes/settings.$id/relay.tsx
+++ b/src/routes/settings.$id/relay.tsx
@@ -0,0 +1,14 @@
+import { commands } from "@/commands.gen";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/settings/$id/relay")({
+	beforeLoad: async ({ params }) => {
+		const res = await commands.getRelays(params.id);
+
+		if (res.status === "ok") {
+			return { relayList: res.data };
+		} else {
+			throw new Error(res.error);
+		}
+	},
+});
--- a/src/routes/settings.$id/wallet.lazy.tsx
+++ b/src/routes/settings.$id/wallet.lazy.tsx
@@ -0,0 +1,50 @@
+import { commands } from "@/commands.gen";
+import { Button } from "@getalby/bitcoin-connect-react";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+
+export const Route = createLazyFileRoute("/settings/$id/wallet")({
+	component: Screen,
+});
+
+function Screen() {
+	const [_isConnect, setIsConnect] = useState(false);
+
+	const setWallet = async (uri: string) => {
+		const res = await commands.setWallet(uri);
+
+		if (res.status === "ok") {
+			setIsConnect((prev) => !prev);
+		} else {
+			throw new Error(res.error);
+		}
+	};
+
+	const removeWallet = async () => {
+		const res = await commands.removeWallet();
+
+		if (res.status === "ok") {
+			window.localStorage.removeItem("bc:config");
+		} else {
+			throw new Error(res.error);
+		}
+	};
+
+	return (
+		<div className="w-full px-3 pb-3">
+			<div className="flex flex-col w-full gap-2">
+				<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+					Wallet
+				</h2>
+				<div className="w-full h-44 flex items-center justify-center bg-black/5 dark:bg-white/5 rounded-xl">
+					<Button
+						onConnected={(provider) =>
+							setWallet(provider.client.nostrWalletConnectUrl)
+						}
+						onDisconnected={() => removeWallet()}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/src/routes/$account/_settings/bitcoin-connect.tsx
+++ b/src/routes/$account/_settings/bitcoin-connect.tsx
@@ -1,8 +1,8 @@
 import { init } from "@getalby/bitcoin-connect-react";
 import { createFileRoute } from "@tanstack/react-router";

-export const Route = createFileRoute("/$account/_settings/bitcoin-connect")({
-	beforeLoad: () => {
+export const Route = createFileRoute("/settings/$id/wallet")({
+	beforeLoad: async () => {
 		init({
 			appName: "Lume",
 			filters: ["nwc"],
--- a/src/routes/zap.$id.lazy.tsx
+++ b/src/routes/zap.$id.lazy.tsx
@@ -1,8 +1,14 @@
-import { User } from "@/components/user";
+import { commands } from "@/commands.gen";
+import { displayNpub } from "@/commons";
+import { User } from "@/components";
+import { LumeWindow } from "@/system";
+import type { Metadata } from "@/types";
+import { CaretDown } from "@phosphor-icons/react";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { Menu, MenuItem } from "@tauri-apps/api/menu";
+import { type Window, getCurrentWindow } from "@tauri-apps/api/window";
 import { message } from "@tauri-apps/plugin-dialog";
-import { useState, useTransition } from "react";
+import { useCallback, useEffect, useState, useTransition } from "react";
 import CurrencyInput from "react-currency-input-field";

 const DEFAULT_VALUES = [21, 50, 100, 200];
@@ -12,38 +18,102 @@ export const Route = createLazyFileRoute("/zap/$id")({
 });

 function Screen() {
-	const { event } = Route.useRouteContext();
+	const { accounts, event } = Route.useRouteContext();

+	const [currentUser, setCurrentUser] = useState<string>(null);
+	const [popup, setPopup] = useState<Window>(null);
 	const [amount, setAmount] = useState(21);
-	const [content, setContent] = useState("");
+	const [content, setContent] = useState<string>("");
 	const [isCompleted, setIsCompleted] = useState(false);
 	const [isPending, startTransition] = useTransition();

-	const submit = () => {
-		startTransition(async () => {
-			try {
-				const val = await event.zap(amount, content);
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();

-				if (val) {
-					setIsCompleted(true);
-					// close current window
-					await getCurrentWebviewWindow().close();
-				}
-			} catch (e) {
-				await message(String(e), {
-					title: "Zap",
-					kind: "error",
-				});
+		const list = [];
+
+		for (const account of accounts) {
+			const res = await commands.getProfile(account);
+			let name = "unknown";
+
+			if (res.status === "ok") {
+				const profile: Metadata = JSON.parse(res.data);
+				name = profile.display_name ?? profile.name;
+			}
+
+			list.push(
+				MenuItem.new({
+					text: `Zap as ${name} (${displayNpub(account, 16)})`,
+					action: async () => setCurrentUser(account),
+				}),
+			);
+		}
+
+		const items = await Promise.all(list);
+		const menu = await Menu.new({ items });
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
+
+	const zap = () => {
+		startTransition(async () => {
+			const res = await commands.zapEvent(event.id, amount.toString(), content);
+
+			if (res.status === "ok") {
+				setIsCompleted(true);
+				// close current window
+				await getCurrentWindow().close();
+			} else {
+				await message(res.error, { kind: "error" });
 				return;
 			}
 		});
 	};

+	const submit = async () => {
+		if (currentUser) {
+			const signer = await commands.hasSigner(currentUser);
+
+			if (signer.status === "ok") {
+				if (!signer.data) {
+					const newPopup = await LumeWindow.openPopup(
+						`/set-signer/${currentUser}`,
+						undefined,
+						false,
+					);
+
+					setPopup(newPopup);
+					return;
+				}
+
+				zap();
+			}
+		}
+	};
+
+	useEffect(() => {
+		if (!popup) return;
+
+		const unlisten = popup.listen("signer-updated", () => {
+			zap();
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, [popup]);
+
+	useEffect(() => {
+		if (accounts?.length) {
+			setCurrentUser(accounts[0]);
+		}
+	}, [accounts]);
+
 	return (
 		<div data-tauri-drag-region className="flex flex-col pb-5 size-full">
 			<div
 				data-tauri-drag-region
-				className="flex items-center justify-center h-24 gap-2 shrink-0"
+				className="flex items-center justify-center h-32 gap-2 shrink-0"
 			>
 				<p className="text-sm">Send zap to </p>
 				<User.Provider pubkey={event.pubkey}>
@@ -95,15 +165,34 @@ function Screen() {
 							autoCorrect="off"
 							autoCapitalize="off"
 							placeholder="Enter message (optional)"
-							className="h-11 w-full resize-none rounded-xl border-transparent bg-black/5 px-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/5"
+							className="h-10 w-full resize-none rounded-lg border-transparent bg-black/5 px-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/5"
 						/>
-						<button
-							type="button"
-							onClick={() => submit()}
-							className="inline-flex items-center justify-center w-full h-10 font-medium rounded-xl bg-neutral-950 text-neutral-50 hover:bg-neutral-900 dark:bg-white/20 dark:hover:bg-white/30"
-						>
-							{isCompleted ? "Zapped" : isPending ? "Processing..." : "Zap"}
-						</button>
+						<div className="inline-flex items-center gap-3">
+							<button
+								type="button"
+								onClick={() => submit()}
+								className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold rounded-lg bg-blue-500 text-white hover:bg-blue-600 dark:hover:bg-blue-400"
+							>
+								{isCompleted ? "Zapped" : isPending ? "Processing..." : "Zap"}
+							</button>
+							{currentUser ? (
+								<button
+									type="button"
+									onClick={(e) => showContextMenu(e)}
+									className="inline-flex items-center gap-1.5"
+								>
+									<User.Provider pubkey={currentUser}>
+										<User.Root>
+											<User.Avatar className="size-6 rounded-full" />
+										</User.Root>
+									</User.Provider>
+									<CaretDown
+										className="mt-px size-3 text-neutral-500"
+										weight="bold"
+									/>
+								</button>
+							) : null}
+						</div>
 					</div>
 				</div>
 			</div>
--- a/src/routes/zap.$id.tsx
+++ b/src/routes/zap.$id.tsx
@@ -5,6 +5,7 @@ import { createFileRoute } from "@tanstack/react-router";

 export const Route = createFileRoute("/zap/$id")({
 	beforeLoad: async ({ params }) => {
+		const accounts = await commands.getAccounts();
 		const res = await commands.getEvent(params.id);

 		if (res.status === "ok") {
@@ -15,7 +16,7 @@ export const Route = createFileRoute("/zap/$id")({
 				raw.meta = data.parsed;
 			}

-			return { event: new LumeEvent(raw) };
+			return { accounts, event: new LumeEvent(raw) };
 		} else {
 			throw new Error(res.error);
 		}
--- a/src/system/event.ts
+++ b/src/system/event.ts
@@ -12,10 +12,10 @@ export class LumeEvent {
 	public meta: Meta;
 	public relay?: string;
 	public replies?: LumeEvent[];
-	#raw: NostrEvent;
+	public raw: NostrEvent;

 	constructor(event: NostrEvent) {
-		this.#raw = event;
+		this.raw = event;
 		Object.assign(this, event);
 	}

@@ -134,16 +134,6 @@ export class LumeEvent {
 		}
 	}

-	public async repost() {
-		const query = await commands.repost(JSON.stringify(this.#raw));
-
-		if (query.status === "ok") {
-			return query.data;
-		} else {
-			throw new Error(query.error);
-		}
-	}
-
 	static async publish(
 		content: string,
 		warning?: string,
--- a/src/system/useEvent.ts
+++ b/src/system/useEvent.ts
@@ -6,7 +6,7 @@ import { LumeEvent } from "./event";

 export function useEvent(id: string, repost?: string) {
 	const { isLoading, isError, error, data } = useQuery({
-		queryKey: ["event", id],
+		queryKey: ["ids", "event", id],
 		queryFn: async () => {
 			try {
 				if (repost?.length) {
--- a/src/system/useProfile.ts
+++ b/src/system/useProfile.ts
@@ -9,7 +9,7 @@ export function useProfile(pubkey: string, embed?: string) {
 		isError,
 		data: profile,
 	} = useQuery({
-		queryKey: ["profile", pubkey],
+		queryKey: ["metadata", "profile", pubkey],
 		queryFn: async () => {
 			if (embed) {
 				const metadata: Metadata = JSON.parse(embed);
--- a/src/system/window.ts
+++ b/src/system/window.ts
@@ -1,6 +1,6 @@
 import { commands } from "@/commands.gen";
 import type { LumeColumn, NostrEvent } from "@/types";
-import { getCurrentWindow } from "@tauri-apps/api/window";
+import { Window, getCurrentWindow } from "@tauri-apps/api/window";
 import { nanoid } from "nanoid";
 import type { LumeEvent } from "./event";

@@ -11,7 +11,7 @@ export const LumeWindow = {
 			column,
 		});
 	},
-	openColumnsGallery: async () => {
+	openLaunchpad: async () => {
 		await getCurrentWindow().emit("columns", {
 			type: "add",
 			column: {
@@ -21,23 +21,36 @@ export const LumeWindow = {
 			},
 		});
 	},
-	openLocalFeeds: async () => {
+	openNewsfeed: async (account: string) => {
 		await getCurrentWindow().emit("columns", {
 			type: "add",
 			column: {
 				label: "newsfeed",
 				name: "Newsfeed",
-				url: "/columns/newsfeed",
+				url: `/columns/newsfeed/${account}`,
+				account,
 			},
 		});
 	},
-	openNotification: async () => {
+	openStory: async (account: string) => {
+		await getCurrentWindow().emit("columns", {
+			type: "add",
+			column: {
+				label: "stories",
+				name: "Stories",
+				url: `/columns/stories/${account}`,
+				account,
+			},
+		});
+	},
+	openNotification: async (account: string) => {
 		await getCurrentWindow().emit("columns", {
 			type: "add",
 			column: {
 				label: "notification",
 				name: "Notification",
-				url: "/columns/notification",
+				url: `/columns/notification/${account}`,
+				account,
 			},
 		});
 	},
@@ -86,27 +99,28 @@ export const LumeWindow = {
 		let url: string;

 		if (reply_to) {
-			url = `/editor?reply_to=${reply_to}`;
+			url = `/new-post?reply_to=${reply_to}`;
 		}

 		if (quote?.length) {
-			url = `/editor?quote=${quote}`;
+			url = `/new-post?quote=${quote}`;
 		}

 		if (!reply_to?.length && !quote?.length) {
-			url = "/editor";
+			url = "/new-post";
 		}

 		const label = `editor-${reply_to ? reply_to : 0}`;
 		const query = await commands.openWindow({
 			label,
 			url,
-			title: "Editor",
+			title: "New Post",
 			width: 560,
 			height: 340,
 			maximizable: false,
 			minimizable: false,
 			hidden_title: true,
+			closable: true,
 		});

 		if (query.status === "ok") {
@@ -128,21 +142,25 @@ export const LumeWindow = {
 				maximizable: false,
 				minimizable: false,
 				hidden_title: true,
+				closable: true,
 			});
 		} else {
-			await LumeWindow.openSettings(account, "bitcoin-connect");
+			await LumeWindow.openSettings(account, "wallet");
 		}
 	},
 	openSettings: async (account: string, path?: string) => {
 		const query = await commands.openWindow({
 			label: "settings",
-			url: path ? `${account}/${path}` : `${account}/general`,
+			url: path
+				? `/settings/${account}/${path}`
+				: `/settings/${account}/general`,
 			title: "Settings",
-			width: 800,
+			width: 700,
 			height: 500,
 			maximizable: false,
 			minimizable: false,
 			hidden_title: true,
+			closable: true,
 		});

 		if (query.status === "ok") {
@@ -151,20 +169,21 @@ export const LumeWindow = {
 			throw new Error(query.error);
 		}
 	},
-	openPopup: async (title: string, url: string) => {
+	openPopup: async (url: string, title?: string, closable = true) => {
 		const query = await commands.openWindow({
 			label: `popup-${nanoid()}`,
 			url,
-			title,
+			title: title ?? "",
 			width: 400,
 			height: 500,
 			maximizable: false,
 			minimizable: false,
-			hidden_title: false,
+			hidden_title: !!title,
+			closable,
 		});

 		if (query.status === "ok") {
-			return query.data;
+			return await Window.getByLabel(query.data);
 		} else {
 			throw new Error(query.error);
 		}
--- a/src/types.ts
+++ b/src/types.ts
@@ -50,21 +50,13 @@ export interface Metadata {
 	lud16?: string;
 }

-export interface ColumnRouteSearch {
-	account?: string;
-	label?: string;
-	name?: string;
-	redirect?: string;
-}
-
 export interface LumeColumn {
 	label: string;
 	name: string;
-	description?: string;
 	url: string;
-	picture?: string;
+	description?: string;
 	default?: boolean;
-	official?: boolean;
+	account?: string;
 }

 export interface ColumnEvent {