feat: rework multi account

2024-10-24 15:50:45 +07:00
parent 469296790e
commit 055d73c829
31 changed files with 979 additions and 1207 deletions
--- a/src/commands.gen.ts
+++ b/src/commands.gen.ts
@@ -96,6 +96,22 @@ async resetPassword(key: string, password: string) : Promise<Result<null, string
    else return { status: "error", error: e  as any };
 }
 },
+async isNewAccount(id: string) : Promise<Result<boolean, string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("is_new_account", { id }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
+async toggleNewAccount(id: string) : Promise<Result<null, string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("toggle_new_account", { id }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
 async hasSigner(id: string) : Promise<Result<boolean, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("has_signer", { id }) };
@@ -168,7 +184,7 @@ async getAllProfiles() : Promise<Result<Mention[], string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async setGroup(title: string, description: string | null, image: string | null, users: string[]) : Promise<Result<boolean, string>> {
+async setGroup(title: string, description: string | null, image: string | null, users: string[]) : Promise<Result<string, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("set_group", { title, description, image, users }) };
 } catch (e) {
@@ -192,7 +208,7 @@ async getAllGroups() : Promise<Result<RichEvent[], string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async setInterest(title: string, description: string | null, image: string | null, hashtags: string[]) : Promise<Result<boolean, string>> {
+async setInterest(title: string, description: string | null, image: string | null, hashtags: string[]) : Promise<Result<string, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("set_interest", { title, description, image, hashtags }) };
 } catch (e) {
@@ -384,7 +400,7 @@ async search(query: string) : Promise<Result<RichEvent[], string>> {
    else return { status: "error", error: e  as any };
 }
 },
-async publish(content: string, warning: string | null, difficulty: number | null) : Promise<Result<boolean, string>> {
+async publish(content: string, warning: string | null, difficulty: number | null) : Promise<Result<string, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("publish", { content, warning, difficulty }) };
 } catch (e) {
@@ -392,7 +408,7 @@ async publish(content: string, warning: string | null, difficulty: number | null
    else return { status: "error", error: e  as any };
 }
 },
-async reply(content: string, to: string, root: string | null) : Promise<Result<boolean, string>> {
+async reply(content: string, to: string, root: string | null) : Promise<Result<string, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("reply", { content, to, root }) };
 } catch (e) {
@@ -400,7 +416,7 @@ async reply(content: string, to: string, root: string | null) : Promise<Result<b
    else return { status: "error", error: e  as any };
 }
 },
-async repost(raw: string) : Promise<Result<boolean, string>> {
+async repost(raw: string) : Promise<Result<string, string>> {
    try {
    return { status: "ok", data: await TAURI_INVOKE("repost", { raw }) };
 } catch (e) {
--- a/src/components/note/buttons/repost.tsx
+++ b/src/components/note/buttons/repost.tsx
@@ -1,14 +1,13 @@
 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 type { Window } from "@tauri-apps/api/window";
-import { useCallback, useEffect, useState, useTransition } from "react";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useCallback, useTransition } from "react";
 import { useNoteContext } from "../provider";

 export function NoteRepost({
@@ -38,13 +37,12 @@ export function NoteRepost({
 	});

 	const [isPending, startTransition] = useTransition();
-	const [popup, setPopup] = useState<Window>(null);

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

 		const accounts = await commands.getAccounts();
-		const list = [];
+		const list: Promise<MenuItem>[] = [];

 		for (const account of accounts) {
 			const res = await commands.getProfile(account);
@@ -52,7 +50,7 @@ export function NoteRepost({

 			if (res.status === "ok") {
 				const profile: Metadata = JSON.parse(res.data);
-				name = profile.display_name ?? profile.name;
+				name = profile.display_name ?? profile.name ?? "unknown";
 			}

 			list.push(
@@ -102,14 +100,14 @@ export function NoteRepost({

 				if (signer.status === "ok") {
 					if (!signer.data) {
-						const newPopup = await LumeWindow.openPopup(
-							`/set-signer/${account}`,
-							undefined,
-							false,
-						);
+						if (!signer.data) {
+							const res = await commands.setSigner(account);

-						setPopup(newPopup);
-						return;
+							if (res.status === "error") {
+								await message(res.error, { kind: "error" });
+								return;
+							}
+						}
 					}

 					repost.mutate();
@@ -122,19 +120,6 @@ export function NoteRepost({
 		});
 	};

-	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 (
--- a/src/routes.gen.ts
+++ b/src/routes.gen.ts
@@ -16,9 +16,9 @@ import { Route as rootRoute } from './routes/__root'
 import { Route as SetInterestImport } from './routes/set-interest'
 import { Route as SetGroupImport } from './routes/set-group'
 import { Route as BootstrapRelaysImport } from './routes/bootstrap-relays'
-import { Route as LayoutImport } from './routes/_layout'
+import { Route as AppImport } from './routes/_app'
 import { Route as NewPostIndexImport } from './routes/new-post/index'
-import { Route as LayoutIndexImport } from './routes/_layout/index'
+import { Route as AppIndexImport } from './routes/_app/index'
 import { Route as ZapIdImport } from './routes/zap.$id'
 import { Route as ColumnsLayoutImport } from './routes/columns/_layout'
 import { Route as SettingsIdWalletImport } from './routes/settings.$id/wallet'
@@ -37,13 +37,11 @@ import { Route as ColumnsLayoutCreateNewsfeedF2fImport } from './routes/columns/
 // Create Virtual Routes

 const ColumnsImport = createFileRoute('/columns')()
-const ResetLazyImport = createFileRoute('/reset')()
 const NewLazyImport = createFileRoute('/new')()
 const SettingsIdLazyImport = createFileRoute('/settings/$id')()
-const SetSignerIdLazyImport = createFileRoute('/set-signer/$id')()
-const AuthWatchLazyImport = createFileRoute('/auth/watch')()
-const AuthImportLazyImport = createFileRoute('/auth/import')()
-const AuthConnectLazyImport = createFileRoute('/auth/connect')()
+const NewAccountWatchLazyImport = createFileRoute('/new-account/watch')()
+const NewAccountImportLazyImport = createFileRoute('/new-account/import')()
+const NewAccountConnectLazyImport = createFileRoute('/new-account/connect')()
 const ColumnsLayoutTrendingLazyImport = createFileRoute(
  '/columns/_layout/trending',
 )()
@@ -76,11 +74,6 @@ const ColumnsRoute = ColumnsImport.update({
  getParentRoute: () => rootRoute,
 } as any)

-const ResetLazyRoute = ResetLazyImport.update({
-  path: '/reset',
-  getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/reset.lazy').then((d) => d.Route))
-
 const NewLazyRoute = NewLazyImport.update({
  path: '/new',
  getParentRoute: () => rootRoute,
@@ -103,47 +96,48 @@ const BootstrapRelaysRoute = BootstrapRelaysImport.update({
  import('./routes/bootstrap-relays.lazy').then((d) => d.Route),
 )

-const LayoutRoute = LayoutImport.update({
-  id: '/_layout',
+const AppRoute = AppImport.update({
+  id: '/_app',
  getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/_layout.lazy').then((d) => d.Route))
+} as any).lazy(() => import('./routes/_app.lazy').then((d) => d.Route))

 const NewPostIndexRoute = NewPostIndexImport.update({
  path: '/new-post/',
  getParentRoute: () => rootRoute,
-} as any)
+} as any).lazy(() =>
+  import('./routes/new-post/index.lazy').then((d) => d.Route),
+)

-const LayoutIndexRoute = LayoutIndexImport.update({
+const AppIndexRoute = AppIndexImport.update({
  path: '/',
-  getParentRoute: () => LayoutRoute,
-} as any).lazy(() => import('./routes/_layout/index.lazy').then((d) => d.Route))
+  getParentRoute: () => AppRoute,
+} as any).lazy(() => import('./routes/_app/index.lazy').then((d) => d.Route))

 const SettingsIdLazyRoute = SettingsIdLazyImport.update({
  path: '/settings/$id',
  getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/settings.$id.lazy').then((d) => d.Route))

-const SetSignerIdLazyRoute = SetSignerIdLazyImport.update({
-  path: '/set-signer/$id',
+const NewAccountWatchLazyRoute = NewAccountWatchLazyImport.update({
+  path: '/new-account/watch',
  getParentRoute: () => rootRoute,
 } as any).lazy(() =>
-  import('./routes/set-signer.$id.lazy').then((d) => d.Route),
+  import('./routes/new-account/watch.lazy').then((d) => d.Route),
 )

-const AuthWatchLazyRoute = AuthWatchLazyImport.update({
-  path: '/auth/watch',
+const NewAccountImportLazyRoute = NewAccountImportLazyImport.update({
+  path: '/new-account/import',
  getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/auth/watch.lazy').then((d) => d.Route))
+} as any).lazy(() =>
+  import('./routes/new-account/import.lazy').then((d) => d.Route),
+)

-const AuthImportLazyRoute = AuthImportLazyImport.update({
-  path: '/auth/import',
+const NewAccountConnectLazyRoute = NewAccountConnectLazyImport.update({
+  path: '/new-account/connect',
  getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/auth/import.lazy').then((d) => d.Route))
-
-const AuthConnectLazyRoute = AuthConnectLazyImport.update({
-  path: '/auth/connect',
-  getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/auth/connect.lazy').then((d) => d.Route))
+} as any).lazy(() =>
+  import('./routes/new-account/connect.lazy').then((d) => d.Route),
+)

 const ZapIdRoute = ZapIdImport.update({
  path: '/zap/$id',
@@ -302,11 +296,11 @@ const ColumnsLayoutCreateNewsfeedF2fRoute =

 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
-    '/_layout': {
-      id: '/_layout'
+    '/_app': {
+      id: '/_app'
      path: ''
      fullPath: ''
-      preLoaderRoute: typeof LayoutImport
+      preLoaderRoute: typeof AppImport
      parentRoute: typeof rootRoute
    }
    '/bootstrap-relays': {
@@ -337,13 +331,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof NewLazyImport
      parentRoute: typeof rootRoute
    }
-    '/reset': {
-      id: '/reset'
-      path: '/reset'
-      fullPath: '/reset'
-      preLoaderRoute: typeof ResetLazyImport
-      parentRoute: typeof rootRoute
-    }
    '/columns': {
      id: '/columns'
      path: '/columns'
@@ -365,32 +352,25 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof ZapIdImport
      parentRoute: typeof rootRoute
    }
-    '/auth/connect': {
-      id: '/auth/connect'
-      path: '/auth/connect'
-      fullPath: '/auth/connect'
-      preLoaderRoute: typeof AuthConnectLazyImport
+    '/new-account/connect': {
+      id: '/new-account/connect'
+      path: '/new-account/connect'
+      fullPath: '/new-account/connect'
+      preLoaderRoute: typeof NewAccountConnectLazyImport
      parentRoute: typeof rootRoute
    }
-    '/auth/import': {
-      id: '/auth/import'
-      path: '/auth/import'
-      fullPath: '/auth/import'
-      preLoaderRoute: typeof AuthImportLazyImport
+    '/new-account/import': {
+      id: '/new-account/import'
+      path: '/new-account/import'
+      fullPath: '/new-account/import'
+      preLoaderRoute: typeof NewAccountImportLazyImport
      parentRoute: typeof rootRoute
    }
-    '/auth/watch': {
-      id: '/auth/watch'
-      path: '/auth/watch'
-      fullPath: '/auth/watch'
-      preLoaderRoute: typeof AuthWatchLazyImport
-      parentRoute: typeof rootRoute
-    }
-    '/set-signer/$id': {
-      id: '/set-signer/$id'
-      path: '/set-signer/$id'
-      fullPath: '/set-signer/$id'
-      preLoaderRoute: typeof SetSignerIdLazyImport
+    '/new-account/watch': {
+      id: '/new-account/watch'
+      path: '/new-account/watch'
+      fullPath: '/new-account/watch'
+      preLoaderRoute: typeof NewAccountWatchLazyImport
      parentRoute: typeof rootRoute
    }
    '/settings/$id': {
@@ -400,12 +380,12 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof SettingsIdLazyImport
      parentRoute: typeof rootRoute
    }
-    '/_layout/': {
-      id: '/_layout/'
+    '/_app/': {
+      id: '/_app/'
      path: '/'
      fullPath: '/'
-      preLoaderRoute: typeof LayoutIndexImport
-      parentRoute: typeof LayoutImport
+      preLoaderRoute: typeof AppIndexImport
+      parentRoute: typeof AppImport
    }
    '/new-post/': {
      id: '/new-post/'
@@ -559,16 +539,15 @@ declare module '@tanstack/react-router' {

 // Create and export the route tree

-interface LayoutRouteChildren {
-  LayoutIndexRoute: typeof LayoutIndexRoute
+interface AppRouteChildren {
+  AppIndexRoute: typeof AppIndexRoute
 }

-const LayoutRouteChildren: LayoutRouteChildren = {
-  LayoutIndexRoute: LayoutIndexRoute,
+const AppRouteChildren: AppRouteChildren = {
+  AppIndexRoute: AppIndexRoute,
 }

-const LayoutRouteWithChildren =
-  LayoutRoute._addFileChildren(LayoutRouteChildren)
+const AppRouteWithChildren = AppRoute._addFileChildren(AppRouteChildren)

 interface ColumnsLayoutCreateNewsfeedRouteChildren {
  ColumnsLayoutCreateNewsfeedF2fRoute: typeof ColumnsLayoutCreateNewsfeedF2fRoute
@@ -656,20 +635,18 @@ const SettingsIdLazyRouteWithChildren = SettingsIdLazyRoute._addFileChildren(
 )

 export interface FileRoutesByFullPath {
-  '': typeof LayoutRouteWithChildren
+  '': typeof AppRouteWithChildren
  '/bootstrap-relays': typeof BootstrapRelaysRoute
  '/set-group': typeof SetGroupRoute
  '/set-interest': typeof SetInterestRoute
  '/new': typeof NewLazyRoute
-  '/reset': typeof ResetLazyRoute
  '/columns': typeof ColumnsLayoutRouteWithChildren
  '/zap/$id': typeof ZapIdRoute
-  '/auth/connect': typeof AuthConnectLazyRoute
-  '/auth/import': typeof AuthImportLazyRoute
-  '/auth/watch': typeof AuthWatchLazyRoute
-  '/set-signer/$id': typeof SetSignerIdLazyRoute
+  '/new-account/connect': typeof NewAccountConnectLazyRoute
+  '/new-account/import': typeof NewAccountImportLazyRoute
+  '/new-account/watch': typeof NewAccountWatchLazyRoute
  '/settings/$id': typeof SettingsIdLazyRouteWithChildren
-  '/': typeof LayoutIndexRoute
+  '/': typeof AppIndexRoute
  '/new-post': typeof NewPostIndexRoute
  '/columns/create-newsfeed': typeof ColumnsLayoutCreateNewsfeedRouteWithChildren
  '/columns/global': typeof ColumnsLayoutGlobalRoute
@@ -698,15 +675,13 @@ export interface FileRoutesByTo {
  '/set-group': typeof SetGroupRoute
  '/set-interest': typeof SetInterestRoute
  '/new': typeof NewLazyRoute
-  '/reset': typeof ResetLazyRoute
  '/columns': typeof ColumnsLayoutRouteWithChildren
  '/zap/$id': typeof ZapIdRoute
-  '/auth/connect': typeof AuthConnectLazyRoute
-  '/auth/import': typeof AuthImportLazyRoute
-  '/auth/watch': typeof AuthWatchLazyRoute
-  '/set-signer/$id': typeof SetSignerIdLazyRoute
+  '/new-account/connect': typeof NewAccountConnectLazyRoute
+  '/new-account/import': typeof NewAccountImportLazyRoute
+  '/new-account/watch': typeof NewAccountWatchLazyRoute
  '/settings/$id': typeof SettingsIdLazyRouteWithChildren
-  '/': typeof LayoutIndexRoute
+  '/': typeof AppIndexRoute
  '/new-post': typeof NewPostIndexRoute
  '/columns/create-newsfeed': typeof ColumnsLayoutCreateNewsfeedRouteWithChildren
  '/columns/global': typeof ColumnsLayoutGlobalRoute
@@ -732,21 +707,19 @@ export interface FileRoutesByTo {

 export interface FileRoutesById {
  __root__: typeof rootRoute
-  '/_layout': typeof LayoutRouteWithChildren
+  '/_app': typeof AppRouteWithChildren
  '/bootstrap-relays': typeof BootstrapRelaysRoute
  '/set-group': typeof SetGroupRoute
  '/set-interest': typeof SetInterestRoute
  '/new': typeof NewLazyRoute
-  '/reset': typeof ResetLazyRoute
  '/columns': typeof ColumnsRouteWithChildren
  '/columns/_layout': typeof ColumnsLayoutRouteWithChildren
  '/zap/$id': typeof ZapIdRoute
-  '/auth/connect': typeof AuthConnectLazyRoute
-  '/auth/import': typeof AuthImportLazyRoute
-  '/auth/watch': typeof AuthWatchLazyRoute
-  '/set-signer/$id': typeof SetSignerIdLazyRoute
+  '/new-account/connect': typeof NewAccountConnectLazyRoute
+  '/new-account/import': typeof NewAccountImportLazyRoute
+  '/new-account/watch': typeof NewAccountWatchLazyRoute
  '/settings/$id': typeof SettingsIdLazyRouteWithChildren
-  '/_layout/': typeof LayoutIndexRoute
+  '/_app/': typeof AppIndexRoute
  '/new-post/': typeof NewPostIndexRoute
  '/columns/_layout/create-newsfeed': typeof ColumnsLayoutCreateNewsfeedRouteWithChildren
  '/columns/_layout/global': typeof ColumnsLayoutGlobalRoute
@@ -778,13 +751,11 @@ export interface FileRouteTypes {
    | '/set-group'
    | '/set-interest'
    | '/new'
-    | '/reset'
    | '/columns'
    | '/zap/$id'
-    | '/auth/connect'
-    | '/auth/import'
-    | '/auth/watch'
-    | '/set-signer/$id'
+    | '/new-account/connect'
+    | '/new-account/import'
+    | '/new-account/watch'
    | '/settings/$id'
    | '/'
    | '/new-post'
@@ -814,13 +785,11 @@ export interface FileRouteTypes {
    | '/set-group'
    | '/set-interest'
    | '/new'
-    | '/reset'
    | '/columns'
    | '/zap/$id'
-    | '/auth/connect'
-    | '/auth/import'
-    | '/auth/watch'
-    | '/set-signer/$id'
+    | '/new-account/connect'
+    | '/new-account/import'
+    | '/new-account/watch'
    | '/settings/$id'
    | '/'
    | '/new-post'
@@ -846,21 +815,19 @@ export interface FileRouteTypes {
    | '/columns/users/$id'
  id:
    | '__root__'
-    | '/_layout'
+    | '/_app'
    | '/bootstrap-relays'
    | '/set-group'
    | '/set-interest'
    | '/new'
-    | '/reset'
    | '/columns'
    | '/columns/_layout'
    | '/zap/$id'
-    | '/auth/connect'
-    | '/auth/import'
-    | '/auth/watch'
-    | '/set-signer/$id'
+    | '/new-account/connect'
+    | '/new-account/import'
+    | '/new-account/watch'
    | '/settings/$id'
-    | '/_layout/'
+    | '/_app/'
    | '/new-post/'
    | '/columns/_layout/create-newsfeed'
    | '/columns/_layout/global'
@@ -886,35 +853,31 @@ export interface FileRouteTypes {
 }

 export interface RootRouteChildren {
-  LayoutRoute: typeof LayoutRouteWithChildren
+  AppRoute: typeof AppRouteWithChildren
  BootstrapRelaysRoute: typeof BootstrapRelaysRoute
  SetGroupRoute: typeof SetGroupRoute
  SetInterestRoute: typeof SetInterestRoute
  NewLazyRoute: typeof NewLazyRoute
-  ResetLazyRoute: typeof ResetLazyRoute
  ColumnsRoute: typeof ColumnsRouteWithChildren
  ZapIdRoute: typeof ZapIdRoute
-  AuthConnectLazyRoute: typeof AuthConnectLazyRoute
-  AuthImportLazyRoute: typeof AuthImportLazyRoute
-  AuthWatchLazyRoute: typeof AuthWatchLazyRoute
-  SetSignerIdLazyRoute: typeof SetSignerIdLazyRoute
+  NewAccountConnectLazyRoute: typeof NewAccountConnectLazyRoute
+  NewAccountImportLazyRoute: typeof NewAccountImportLazyRoute
+  NewAccountWatchLazyRoute: typeof NewAccountWatchLazyRoute
  SettingsIdLazyRoute: typeof SettingsIdLazyRouteWithChildren
  NewPostIndexRoute: typeof NewPostIndexRoute
 }

 const rootRouteChildren: RootRouteChildren = {
-  LayoutRoute: LayoutRouteWithChildren,
+  AppRoute: AppRouteWithChildren,
  BootstrapRelaysRoute: BootstrapRelaysRoute,
  SetGroupRoute: SetGroupRoute,
  SetInterestRoute: SetInterestRoute,
  NewLazyRoute: NewLazyRoute,
-  ResetLazyRoute: ResetLazyRoute,
  ColumnsRoute: ColumnsRouteWithChildren,
  ZapIdRoute: ZapIdRoute,
-  AuthConnectLazyRoute: AuthConnectLazyRoute,
-  AuthImportLazyRoute: AuthImportLazyRoute,
-  AuthWatchLazyRoute: AuthWatchLazyRoute,
-  SetSignerIdLazyRoute: SetSignerIdLazyRoute,
+  NewAccountConnectLazyRoute: NewAccountConnectLazyRoute,
+  NewAccountImportLazyRoute: NewAccountImportLazyRoute,
+  NewAccountWatchLazyRoute: NewAccountWatchLazyRoute,
  SettingsIdLazyRoute: SettingsIdLazyRouteWithChildren,
  NewPostIndexRoute: NewPostIndexRoute,
 }
@@ -931,26 +894,24 @@ export const routeTree = rootRoute
    "__root__": {
      "filePath": "__root.tsx",
      "children": [
-        "/_layout",
+        "/_app",
        "/bootstrap-relays",
        "/set-group",
        "/set-interest",
        "/new",
-        "/reset",
        "/columns",
        "/zap/$id",
-        "/auth/connect",
-        "/auth/import",
-        "/auth/watch",
-        "/set-signer/$id",
+        "/new-account/connect",
+        "/new-account/import",
+        "/new-account/watch",
        "/settings/$id",
        "/new-post/"
      ]
    },
-    "/_layout": {
-      "filePath": "_layout.tsx",
+    "/_app": {
+      "filePath": "_app.tsx",
      "children": [
-        "/_layout/"
+        "/_app/"
      ]
    },
    "/bootstrap-relays": {
@@ -965,9 +926,6 @@ export const routeTree = rootRoute
    "/new": {
      "filePath": "new.lazy.tsx"
    },
-    "/reset": {
-      "filePath": "reset.lazy.tsx"
-    },
    "/columns": {
      "filePath": "columns",
      "children": [
@@ -997,17 +955,14 @@ export const routeTree = rootRoute
    "/zap/$id": {
      "filePath": "zap.$id.tsx"
    },
-    "/auth/connect": {
-      "filePath": "auth/connect.lazy.tsx"
+    "/new-account/connect": {
+      "filePath": "new-account/connect.lazy.tsx"
    },
-    "/auth/import": {
-      "filePath": "auth/import.lazy.tsx"
+    "/new-account/import": {
+      "filePath": "new-account/import.lazy.tsx"
    },
-    "/auth/watch": {
-      "filePath": "auth/watch.lazy.tsx"
-    },
-    "/set-signer/$id": {
-      "filePath": "set-signer.$id.lazy.tsx"
+    "/new-account/watch": {
+      "filePath": "new-account/watch.lazy.tsx"
    },
    "/settings/$id": {
      "filePath": "settings.$id.lazy.tsx",
@@ -1018,9 +973,9 @@ export const routeTree = rootRoute
        "/settings/$id/wallet"
      ]
    },
-    "/_layout/": {
-      "filePath": "_layout/index.tsx",
-      "parent": "/_layout"
+    "/_app/": {
+      "filePath": "_app/index.tsx",
+      "parent": "/_app"
    },
    "/new-post/": {
      "filePath": "new-post/index.tsx"
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,5 +1,4 @@
 import { events } from "@/commands.gen";
-import { appSettings } from "@/commons";
 import { Spinner } from "@/components";
 import type { QueryClient } from "@tanstack/react-query";
 import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
@@ -20,24 +19,12 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 function Screen() {
 	const { queryClient } = Route.useRouteContext();

-	/*
-	useEffect(() => {
-		const unlisten = events.newSettings.listen((data) => {
-			appSettings.setState((state) => {
-				return { ...state, ...data.payload };
-			});
-		});
-
-		return () => {
-			unlisten.then((f) => f());
-		};
-	}, []);
-	*/
-
 	useEffect(() => {
 		const unlisten = events.negentropyEvent.listen(async (data) => {
 			const queryKey = [data.payload.kind.toLowerCase()];
-			await queryClient.invalidateQueries({ queryKey });
+			console.info("invalidate: ", queryKey);
+
+			await queryClient.refetchQueries({ queryKey });
 		});

 		return () => {
--- a/src/routes/_layout.lazy.tsx
+++ b/src/routes/_layout.lazy.tsx
@@ -1,17 +1,22 @@
 import { commands } from "@/commands.gen";
-import { cn } from "@/commons";
+import { appColumns, 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 {
+	Link,
+	Outlet,
+	createLazyFileRoute,
+	useRouter,
+} 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 { useCallback, useEffect } from "react";

-export const Route = createLazyFileRoute("/_layout")({
+export const Route = createLazyFileRoute("/_app")({
 	component: Layout,
 });

@@ -83,6 +88,7 @@ function Topbar() {
 function Account({ pubkey }: { pubkey: string }) {
 	const navigate = Route.useNavigate();
 	const context = Route.useRouteContext();
+	const router = useRouter();

 	const { data: isActive } = useQuery({
 		queryKey: ["signer", pubkey],
@@ -103,10 +109,9 @@ function Account({ pubkey }: { pubkey: string }) {

 			const items = await Promise.all([
 				MenuItem.new({
-					text: "Unlock",
+					text: "Activate",
 					enabled: !isActive || true,
-					action: () =>
-						LumeWindow.openPopup(`/set-signer/${pubkey}`, undefined, false),
+					action: async () => await commands.setSigner(pubkey),
 				}),
 				PredefinedMenuItem.new({ item: "Separator" }),
 				MenuItem.new({
@@ -124,17 +129,28 @@ function Account({ pubkey }: { pubkey: string }) {
 				}),
 				PredefinedMenuItem.new({ item: "Separator" }),
 				MenuItem.new({
-					text: "Logout",
+					text: "Delete Account",
 					action: async () => {
 						const res = await commands.deleteAccount(pubkey);

 						if (res.status === "ok") {
+							router.invalidate();
+
+							// Delete column associate with this account
+							appColumns.setState((prev) =>
+								prev.filter((col) =>
+									col.account ? col.account !== pubkey : col,
+								),
+							);
+
+							// Check remain account
 							const newAccounts = context.accounts.filter(
 								(account) => account !== pubkey,
 							);

+							// Redirect to new account screen
 							if (newAccounts.length < 1) {
-								navigate({ to: "/", replace: true });
+								navigate({ to: "/new", replace: true });
 							}
 						}
 					},
--- a/src/routes/_app.tsx
+++ b/src/routes/_app.tsx
@@ -0,0 +1,14 @@
+import { commands } from '@/commands.gen'
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_app')({
+  beforeLoad: async () => {
+    const accounts = await commands.getAccounts()
+
+    if (!accounts.length) {
+      throw redirect({ to: '/new', replace: true })
+    }
+
+    return { accounts }
+  },
+})
--- a/src/routes/_layout/index.lazy.tsx
+++ b/src/routes/_layout/index.lazy.tsx
@@ -6,9 +6,7 @@ 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 { resolveResource } from "@tauri-apps/api/path";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { readTextFile } from "@tauri-apps/plugin-fs";
 import useEmblaCarousel from "embla-carousel-react";
 import { nanoid } from "nanoid";
 import {
@@ -21,12 +19,12 @@ import {
 import { createPortal } from "react-dom";
 import { useDebouncedCallback } from "use-debounce";

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

 function Screen() {
-	const { accounts } = Route.useRouteContext();
+	const initialAppColumns = Route.useLoaderData();
 	const columns = useStore(appColumns, (state) => state);

 	const [emblaRef, emblaApi] = useEmblaCarousel({
@@ -43,7 +41,7 @@ function Screen() {
 	}, [emblaApi]);

 	const emitScrollEvent = useCallback(() => {
-		getCurrentWindow().emit("column_scroll", {});
+		getCurrentWindow().emit("scrolling", {});
 	}, []);

 	const add = useDebouncedCallback((column: LumeColumn) => {
@@ -62,16 +60,18 @@ function Screen() {
 	const move = useDebouncedCallback(
 		(label: string, direction: "left" | "right") => {
 			const newCols = [...columns];
+			const existColumn = newCols.find((el) => el.label === label);

-			const col = newCols.find((el) => el.label === label);
-			const colIndex = newCols.findIndex((el) => el.label === label);
+			if (existColumn) {
+				const colIndex = newCols.findIndex((el) => el.label === label);

-			newCols.splice(colIndex, 1);
+				newCols.splice(colIndex, 1);

-			if (direction === "left") newCols.splice(colIndex - 1, 0, col);
-			if (direction === "right") newCols.splice(colIndex + 1, 0, col);
+				if (direction === "left") newCols.splice(colIndex - 1, 0, existColumn);
+				if (direction === "right") newCols.splice(colIndex + 1, 0, existColumn);

-			appColumns.setState(() => newCols);
+				appColumns.setState(() => newCols);
+			}
 		},
 		150,
 	);
@@ -90,23 +90,6 @@ function Screen() {

 	const reset = useDebouncedCallback(() => appColumns.setState(() => []), 150);

-	const handleKeyDown = useDebouncedCallback((event) => {
-		if (event.defaultPrevented) return;
-
-		switch (event.code) {
-			case "ArrowLeft":
-				if (emblaApi) emblaApi.scrollPrev();
-				break;
-			case "ArrowRight":
-				if (emblaApi) emblaApi.scrollNext();
-				break;
-			default:
-				break;
-		}
-
-		event.preventDefault();
-	}, 150);
-
 	useEffect(() => {
 		if (emblaApi) {
 			emblaApi.on("scroll", emitScrollEvent);
@@ -119,16 +102,6 @@ function Screen() {
 		};
 	}, [emblaApi, emitScrollEvent]);

-	// Listen for keyboard event
-	useEffect(() => {
-		window.addEventListener("keydown", handleKeyDown);
-
-		return () => {
-			window.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [handleKeyDown]);
-
-	// Listen for columns event
 	useEffect(() => {
 		const unlisten = listen<ColumnEvent>("columns", (data) => {
 			if (data.payload.type === "reset") reset();
@@ -146,31 +119,14 @@ function Screen() {
 	}, []);

 	useEffect(() => {
-		async function getSystemColumns() {
-			const systemPath = "resources/columns.json";
-			const resourcePath = await resolveResource(systemPath);
-			const resourceFile = await readTextFile(resourcePath);
-			const cols: LumeColumn[] = JSON.parse(resourceFile);
-
-			appColumns.setState(() => cols.filter((col) => col.default));
+		if (initialAppColumns) {
+			appColumns.setState(() => initialAppColumns);
 		}
+	}, [initialAppColumns]);

-		if (!columns.length) {
-			const prevColumns = window.localStorage.getItem("columns");
-
-			if (!prevColumns) {
-				getSystemColumns();
-			} else {
-				const parsed: LumeColumn[] = JSON.parse(prevColumns);
-				const fil = parsed.filter((item) =>
-					item.account ? accounts.includes(item.account) : item,
-				);
-				appColumns.setState(() => fil);
-			}
-		} else {
-			window.localStorage.setItem("columns", JSON.stringify(columns));
-		}
-	}, [columns.length]);
+	useEffect(() => {
+		window.localStorage.setItem("columns", JSON.stringify(columns));
+	}, [columns]);

 	return (
 		<div className="size-full">
--- a/src/routes/_app/index.tsx
+++ b/src/routes/_app/index.tsx
@@ -0,0 +1,26 @@
+import type { LumeColumn } from '@/types'
+import { createFileRoute } from '@tanstack/react-router'
+import { resolveResource } from '@tauri-apps/api/path'
+import { readTextFile } from '@tauri-apps/plugin-fs'
+
+export const Route = createFileRoute('/_app/')({
+  loader: async ({ context }) => {
+    const prevColumns = window.localStorage.getItem('columns')
+
+    if (!prevColumns) {
+      const resourcePath = await resolveResource('resources/columns.json')
+      const resourceFile = await readTextFile(resourcePath)
+      const content: LumeColumn[] = JSON.parse(resourceFile)
+      const initialAppColumns = content.filter((col) => col.default)
+
+      return initialAppColumns
+    } else {
+      const parsed: LumeColumn[] = JSON.parse(prevColumns)
+      const initialAppColumns = parsed.filter((item) =>
+        item.account ? context.accounts.includes(item.account) : item,
+      )
+
+      return initialAppColumns
+    }
+  },
+})
--- a/src/routes/_layout.tsx
+++ b/src/routes/_layout.tsx
@@ -1,14 +0,0 @@
-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/_layout/index.tsx
+++ b/src/routes/_layout/index.tsx
@@ -1,3 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/_layout/")();
--- a/src/routes/columns/_layout.tsx
+++ b/src/routes/columns/_layout.tsx
@@ -1,8 +1,7 @@
-import { commands } from "@/commands.gen";
-import { appSettings } from "@/commons";
 import { Outlet, createFileRoute } from "@tanstack/react-router";

 export interface RouteSearch {
+	account?: string;
 	label?: string;
 	name?: string;
 	redirect?: string;
@@ -11,21 +10,11 @@ export interface RouteSearch {
 export const Route = createFileRoute("/columns/_layout")({
 	validateSearch: (search: Record<string, string>): RouteSearch => {
 		return {
+			account: search.account,
 			label: search.label,
 			name: search.name,
 		};
 	},
-	beforeLoad: async () => {
-		const res = await commands.getUserSettings();
-
-		if (res.status === "ok") {
-			appSettings.setState((state) => {
-				return { ...state, ...res.data };
-			});
-		} else {
-			throw new Error(res.error);
-		}
-	},
 	component: Layout,
 });

--- a/src/routes/new-account/connect.lazy.tsx
+++ b/src/routes/new-account/connect.lazy.tsx
@@ -5,7 +5,7 @@ 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/connect")({
+export const Route = createLazyFileRoute("/new-account/connect")({
 	component: Screen,
 });

--- a/src/routes/new-account/import.lazy.tsx
+++ b/src/routes/new-account/import.lazy.tsx
@@ -6,7 +6,7 @@ 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/import")({
+export const Route = createLazyFileRoute("/new-account/import")({
 	component: Screen,
 });

--- a/src/routes/new-account/watch.lazy.tsx
+++ b/src/routes/new-account/watch.lazy.tsx
@@ -6,7 +6,7 @@ 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")({
+export const Route = createLazyFileRoute("/new-account/watch")({
 	component: Screen,
 });

--- a/src/routes/new-post/index.lazy.tsx
+++ b/src/routes/new-post/index.lazy.tsx
@@ -0,0 +1,459 @@
+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 { useEvent } from "@/system";
+import type { Metadata } from "@/types";
+import { CaretDown } from "@phosphor-icons/react";
+import { createLazyFileRoute, useAwaited } from "@tanstack/react-router";
+import { Menu, MenuItem } from "@tauri-apps/api/menu";
+import { message } from "@tauri-apps/plugin-dialog";
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	useTransition,
+} from "react";
+import { createPortal } from "react-dom";
+import {
+	RichTextarea,
+	type RichTextareaHandle,
+	createRegexRenderer,
+} from "rich-textarea";
+import { MediaButton } from "./-components/media";
+import { PowButton } from "./-components/pow";
+import { WarningButton } from "./-components/warning";
+
+const MENTION_REG = /\B@([\-+\w]*)$/;
+const MAX_LIST_LENGTH = 5;
+
+const renderer = createRegexRenderer([
+	[
+		/https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+/g,
+		({ children, key, value }) => (
+			<a
+				key={key}
+				href={value}
+				target="_blank"
+				rel="noreferrer"
+				className="text-blue-500 !underline"
+			>
+				{children}
+			</a>
+		),
+	],
+	[
+		/(?:^|\W)nostr:(\w+)(?!\w)/g,
+		({ 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>
+		),
+	],
+]);
+
+export const Route = createLazyFileRoute("/new-post/")({
+	component: Screen,
+});
+
+function Screen() {
+	const { reply_to } = Route.useSearch();
+	const { accounts, initialValue } = Route.useRouteContext();
+	const { deferMentionList } = Route.useLoaderData();
+	const users = useAwaited({ promise: deferMentionList })[0];
+
+	const [text, setText] = useState("");
+	const [currentUser, setCurrentUser] = useState<string | null>(null);
+	const [isPublish, setIsPublish] = useState(false);
+	const [error, setError] = useState("");
+	const [isPending, startTransition] = useTransition();
+	const [warning, setWarning] = useState({ enable: false, reason: "" });
+	const [difficulty, setDifficulty] = useState({ enable: false, num: 21 });
+	const [index, setIndex] = useState<number>(0);
+	const [pos, setPos] = useState<{
+		top: number;
+		left: number;
+		caret: number;
+	} | null>(null);
+
+	const ref = useRef<RichTextareaHandle>(null);
+	const targetText = pos ? text.slice(0, pos.caret) : text;
+	const match = pos && targetText.match(MENTION_REG);
+	const name = match?.[1] ?? "";
+	const filtered = useMemo(() => {
+		if (!users?.length) return [];
+		return users
+			.filter((u) => u?.name?.toLowerCase().startsWith(name.toLowerCase()))
+			.slice(0, MAX_LIST_LENGTH);
+	}, [users, name]);
+
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const list: Promise<MenuItem>[] = [];
+
+		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 ?? "unknown";
+			}
+
+			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;
+
+		const selected = filtered[i];
+
+		ref.current.setRangeText(
+			`nostr:${selected.pubkey} `,
+			pos.caret - name.length - 1,
+			pos.caret,
+			"end",
+		);
+
+		setPos(null);
+		setIndex(0);
+	};
+
+	const submit = () => {
+		startTransition(async () => {
+			if (!text.length) return;
+			if (!currentUser) return;
+
+			const signer = await commands.hasSigner(currentUser);
+
+			if (signer.status === "ok") {
+				if (!signer.data) {
+					const res = await commands.setSigner(currentUser);
+
+					if (res.status === "error") {
+						await message(res.error, { kind: "error" });
+						return;
+					}
+				}
+
+				const content = text.trim();
+				const warn = warning.enable ? warning.reason : null;
+				const diff = difficulty.enable ? difficulty.num : null;
+
+				let res: Result<string, string>;
+
+				if (reply_to?.length) {
+					res = await commands.reply(content, reply_to, null);
+				} else {
+					res = await commands.publish(content, warn, diff);
+				}
+
+				if (res.status === "ok") {
+					setText("");
+					setIsPublish(true);
+				} else {
+					setError(res.error);
+				}
+			}
+		});
+	};
+
+	useEffect(() => {
+		if (isPublish) {
+			const timer = setTimeout(() => setIsPublish((prev) => !prev), 3000);
+
+			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" />
+			<div className="flex flex-col flex-1 overflow-y-auto">
+				{reply_to?.length ? (
+					<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
+						<span className="text-sm font-semibold">Reply to:</span>
+						<EmbedNote id={reply_to} />
+					</div>
+				) : error?.length ? (
+					<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
+						<p className="text-sm font-medium text-red-600">{error}</p>
+					</div>
+				) : null}
+				<div className="p-4 overflow-y-auto h-full">
+					<RichTextarea
+						ref={ref}
+						value={text}
+						placeholder={reply_to ? "Type your reply..." : "What're you up to?"}
+						style={{ width: "100%", height: "100%" }}
+						className="text-[15px] leading-normal resize-none border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 placeholder:pt-[1.5px] placeholder:pl-2"
+						onChange={(e) => setText(e.target.value)}
+						onKeyDown={(e) => {
+							if (!pos || !filtered.length) return;
+							switch (e.code) {
+								case "ArrowUp": {
+									e.preventDefault();
+									const nextIndex =
+										index <= 0 ? filtered.length - 1 : index - 1;
+									setIndex(nextIndex);
+									break;
+								}
+								case "ArrowDown": {
+									e.preventDefault();
+									const prevIndex =
+										index >= filtered.length - 1 ? 0 : index + 1;
+									setIndex(prevIndex);
+									break;
+								}
+								case "Enter":
+									e.preventDefault();
+									insert(index);
+									break;
+								case "Escape":
+									e.preventDefault();
+									setPos(null);
+									setIndex(0);
+									break;
+								default:
+									break;
+							}
+						}}
+						onSelectionChange={(r) => {
+							if (
+								r.focused &&
+								MENTION_REG.test(text.slice(0, r.selectionStart))
+							) {
+								setPos({
+									top: r.top + r.height,
+									left: r.left,
+									caret: r.selectionStart,
+								});
+								setIndex(0);
+							} else {
+								setPos(null);
+								setIndex(0);
+							}
+						}}
+						disabled={isPending}
+					>
+						{renderer}
+					</RichTextarea>
+					{pos ? (
+						createPortal(
+							<MentionPopup
+								top={pos.top}
+								left={pos.left}
+								users={filtered}
+								index={index}
+								insert={insert}
+							/>,
+							document.body,
+						)
+					) : (
+						<></>
+					)}
+				</div>
+			</div>
+			{warning.enable ? (
+				<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
+					<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
+						Reason:
+					</span>
+					<input
+						type="text"
+						placeholder="NSFW..."
+						value={warning.reason}
+						onChange={(e) =>
+							setWarning((prev) => ({ ...prev, reason: e.target.value }))
+						}
+						className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
+					/>
+				</div>
+			) : null}
+			{difficulty.enable ? (
+				<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
+					<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
+						Difficulty:
+					</span>
+					<input
+						type="text"
+						inputMode="numeric"
+						pattern="[0-9]"
+						onKeyDown={(event) => {
+							if (!/[0-9]/.test(event.key)) {
+								event.preventDefault();
+							}
+						}}
+						placeholder="21"
+						defaultValue={difficulty.num}
+						onChange={(e) =>
+							setWarning((prev) => ({ ...prev, num: Number(e.target.value) }))
+						}
+						className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
+					/>
+				</div>
+			) : null}
+			<div
+				data-tauri-drag-region
+				className="flex items-center w-full h-16 gap-4 px-4 border-t divide-x divide-black/5 dark:divide-white/5 shrink-0 border-black/5 dark:border-white/5"
+			>
+				<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>
+			</div>
+		</div>
+	);
+}
+
+function MentionPopup({
+	users,
+	index,
+	top,
+	left,
+	insert,
+}: {
+	users: Mention[];
+	index: number;
+	top: number;
+	left: number;
+	insert: (index: number) => void;
+}) {
+	return (
+		<div
+			style={{
+				top: top,
+				left: left,
+			}}
+			className="fixed w-[200px] text-sm bg-white dark:bg-black shadow-lg shadow-neutral-500/20 dark:shadow-none dark:ring-1 dark:ring-neutral-700 rounded-lg overflow-hidden"
+		>
+			{users.map((u, i) => (
+				<div
+					key={u.pubkey}
+					className={cn(
+						"flex items-center gap-1.5 p-2",
+						index === i ? "bg-neutral-100 dark:bg-neutral-900" : null,
+					)}
+					onMouseDown={(e) => {
+						e.preventDefault();
+						insert(i);
+					}}
+				>
+					<div className="size-7 shrink-0">
+						{u.avatar?.length ? (
+							<img
+								src={u.avatar}
+								alt=""
+								className="size-7 rounded-full outline outline-1 -outline-offset-1 outline-black/15"
+								loading="lazy"
+								decoding="async"
+							/>
+						) : (
+							<div className="size-7 rounded-full bg-blue-500" />
+						)}
+					</div>
+					{u.name}
+				</div>
+			))}
+		</div>
+	);
+}
+
+function EmbedNote({ id }: { id: string }) {
+	const { isLoading, isError, data } = useEvent(id);
+
+	if (isLoading) {
+		return <Spinner className="size-5" />;
+	}
+
+	if (isError || !data) {
+		return <div>Event not found with your current relay set.</div>;
+	}
+
+	return (
+		<Note.Provider event={data}>
+			<Note.Root className="flex items-center gap-2">
+				<User.Provider pubkey={data.pubkey}>
+					<User.Root className="shrink-0">
+						<User.Avatar className="rounded-full size-7" />
+					</User.Root>
+				</User.Provider>
+				<div className="content-break line-clamp-1 text-sm">{data.content}</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}
--- a/src/routes/new-post/index.tsx
+++ b/src/routes/new-post/index.tsx
@@ -1,74 +1,13 @@
-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 { LumeWindow, useEvent } from "@/system";
-import type { Metadata } from "@/types";
-import { CaretDown } from "@phosphor-icons/react";
-import { createFileRoute } from "@tanstack/react-router";
-import { Menu, MenuItem } from "@tauri-apps/api/menu";
-import type { Window } from "@tauri-apps/api/window";
+import { type Mention, commands } from "@/commands.gen";
+import { createFileRoute, defer } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
 import { nip19 } from "nostr-tools";
-import {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-	useTransition,
-} from "react";
-import { createPortal } from "react-dom";
-import {
-	RichTextarea,
-	type RichTextareaHandle,
-	createRegexRenderer,
-} from "rich-textarea";
-import { MediaButton } from "./-components/media";
-import { PowButton } from "./-components/pow";
-import { WarningButton } from "./-components/warning";

 type EditorSearch = {
 	reply_to: string;
 	quote: string;
 };

-const MENTION_REG = /\B@([\-+\w]*)$/;
-const MAX_LIST_LENGTH = 5;
-
-const renderer = createRegexRenderer([
-	[
-		/https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+/g,
-		({ children, key, value }) => (
-			<a
-				key={key}
-				href={value}
-				target="_blank"
-				rel="noreferrer"
-				className="text-blue-500 !underline"
-			>
-				{children}
-			</a>
-		),
-	],
-	[
-		/(?:^|\W)nostr:(\w+)(?!\w)/g,
-		({ 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>
-		),
-	],
-]);
-
 export const Route = createFileRoute("/new-post/")({
 	validateSearch: (search: Record<string, string>): EditorSearch => {
 		return {
@@ -77,7 +16,6 @@ export const Route = createFileRoute("/new-post/")({
 		};
 	},
 	beforeLoad: async ({ search }) => {
-		let users: Mention[] = [];
 		let initialValue: string;

 		if (search?.quote?.length) {
@@ -86,426 +24,12 @@ export const Route = createFileRoute("/new-post/")({
 			initialValue = "";
 		}

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

-		if (res.status === "ok") {
-			users = res.data;
-		}
-
-		return { accounts, users, initialValue };
+		return { accounts, initialValue };
+	},
+	loader: async () => {
+		const query: Promise<Array<Mention>> = invoke("get_all_profiles");
+		return { deferMentionList: defer(query) };
 	},
-	component: Screen,
 });
-
-function Screen() {
-	const { reply_to } = Route.useSearch();
-	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 [warning, setWarning] = useState({ enable: false, reason: "" });
-	const [difficulty, setDifficulty] = useState({ enable: false, num: 21 });
-	const [index, setIndex] = useState<number>(0);
-	const [pos, setPos] = useState<{
-		top: number;
-		left: number;
-		caret: number;
-	} | null>(null);
-
-	const ref = useRef<RichTextareaHandle>(null);
-	const targetText = pos ? text.slice(0, pos.caret) : text;
-	const match = pos && targetText.match(MENTION_REG);
-	const name = match?.[1] ?? "";
-	const filtered = useMemo(
-		() =>
-			users
-				.filter((u) => u.name.toLowerCase().startsWith(name.toLowerCase()))
-				.slice(0, MAX_LIST_LENGTH),
-		[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;
-
-		const selected = filtered[i];
-
-		ref.current.setRangeText(
-			`nostr:${selected.pubkey} `,
-			pos.caret - name.length - 1,
-			pos.caret,
-			"end",
-		);
-
-		setPos(null);
-		setIndex(0);
-	};
-
-	const publish = () => {
-		startTransition(async () => {
-			const content = text.trim();
-			const warn = warning.enable ? warning.reason : undefined;
-			const diff = difficulty.enable ? difficulty.num : undefined;
-
-			let res: Result<string, string>;
-
-			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("");
-				setIsPublish(true);
-			} else {
-				setError(res.error);
-			}
-		});
-	};
-
-	const submit = async () => {
-		if (!text.length) {
-			return;
-		}
-
-		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" />
-			<div className="flex flex-col flex-1 overflow-y-auto">
-				{reply_to?.length ? (
-					<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
-						<span className="text-sm font-semibold">Reply to:</span>
-						<EmbedNote id={reply_to} />
-					</div>
-				) : error?.length ? (
-					<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
-						<p className="text-sm font-medium text-red-600">{error}</p>
-					</div>
-				) : null}
-				<div className="p-4 overflow-y-auto h-full">
-					<RichTextarea
-						ref={ref}
-						value={text}
-						placeholder={reply_to ? "Type your reply..." : "What're you up to?"}
-						style={{ width: "100%", height: "100%" }}
-						className="text-[15px] leading-normal resize-none border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 placeholder:pt-[1.5px] placeholder:pl-2"
-						onChange={(e) => setText(e.target.value)}
-						onKeyDown={(e) => {
-							if (!pos || !filtered.length) return;
-							switch (e.code) {
-								case "ArrowUp": {
-									e.preventDefault();
-									const nextIndex =
-										index <= 0 ? filtered.length - 1 : index - 1;
-									setIndex(nextIndex);
-									break;
-								}
-								case "ArrowDown": {
-									e.preventDefault();
-									const prevIndex =
-										index >= filtered.length - 1 ? 0 : index + 1;
-									setIndex(prevIndex);
-									break;
-								}
-								case "Enter":
-									e.preventDefault();
-									insert(index);
-									break;
-								case "Escape":
-									e.preventDefault();
-									setPos(null);
-									setIndex(0);
-									break;
-								default:
-									break;
-							}
-						}}
-						onSelectionChange={(r) => {
-							if (
-								r.focused &&
-								MENTION_REG.test(text.slice(0, r.selectionStart))
-							) {
-								setPos({
-									top: r.top + r.height,
-									left: r.left,
-									caret: r.selectionStart,
-								});
-								setIndex(0);
-							} else {
-								setPos(null);
-								setIndex(0);
-							}
-						}}
-						disabled={isPending}
-					>
-						{renderer}
-					</RichTextarea>
-					{pos ? (
-						createPortal(
-							<MentionPopup
-								top={pos.top}
-								left={pos.left}
-								users={filtered}
-								index={index}
-								insert={insert}
-							/>,
-							document.body,
-						)
-					) : (
-						<></>
-					)}
-				</div>
-			</div>
-			{warning.enable ? (
-				<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
-					<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
-						Reason:
-					</span>
-					<input
-						type="text"
-						placeholder="NSFW..."
-						value={warning.reason}
-						onChange={(e) =>
-							setWarning((prev) => ({ ...prev, reason: e.target.value }))
-						}
-						className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
-					/>
-				</div>
-			) : null}
-			{difficulty.enable ? (
-				<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
-					<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
-						Difficulty:
-					</span>
-					<input
-						type="text"
-						inputMode="numeric"
-						pattern="[0-9]"
-						onKeyDown={(event) => {
-							if (!/[0-9]/.test(event.key)) {
-								event.preventDefault();
-							}
-						}}
-						placeholder="21"
-						defaultValue={difficulty.num}
-						onChange={(e) =>
-							setWarning((prev) => ({ ...prev, num: Number(e.target.value) }))
-						}
-						className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
-					/>
-				</div>
-			) : null}
-			<div
-				data-tauri-drag-region
-				className="flex items-center w-full h-16 gap-4 px-4 border-t divide-x divide-black/5 dark:divide-white/5 shrink-0 border-black/5 dark:border-white/5"
-			>
-				<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>
-			</div>
-		</div>
-	);
-}
-
-function MentionPopup({
-	users,
-	index,
-	top,
-	left,
-	insert,
-}: {
-	users: Mention[];
-	index: number;
-	top: number;
-	left: number;
-	insert: (index: number) => void;
-}) {
-	return (
-		<div
-			style={{
-				top: top,
-				left: left,
-			}}
-			className="fixed w-[200px] text-sm bg-white dark:bg-black shadow-lg shadow-neutral-500/20 dark:shadow-none dark:ring-1 dark:ring-neutral-700 rounded-lg overflow-hidden"
-		>
-			{users.map((u, i) => (
-				<div
-					key={u.pubkey}
-					className={cn(
-						"flex items-center gap-1.5 p-2",
-						index === i ? "bg-neutral-100 dark:bg-neutral-900" : null,
-					)}
-					onMouseDown={(e) => {
-						e.preventDefault();
-						insert(i);
-					}}
-				>
-					<div className="size-7 shrink-0">
-						{u.avatar?.length ? (
-							<img
-								src={u.avatar}
-								alt=""
-								className="size-7 rounded-full outline outline-1 -outline-offset-1 outline-black/15"
-								loading="lazy"
-								decoding="async"
-							/>
-						) : (
-							<div className="size-7 rounded-full bg-blue-500" />
-						)}
-					</div>
-					{u.name}
-				</div>
-			))}
-		</div>
-	);
-}
-
-function EmbedNote({ id }: { id: string }) {
-	const { isLoading, isError, data } = useEvent(id);
-
-	if (isLoading) {
-		return <Spinner className="size-5" />;
-	}
-
-	if (isError || !data) {
-		return <div>Event not found with your current relay set.</div>;
-	}
-
-	return (
-		<Note.Provider event={data}>
-			<Note.Root className="flex items-center gap-2">
-				<User.Provider pubkey={data.pubkey}>
-					<User.Root className="shrink-0">
-						<User.Avatar className="rounded-full size-7" />
-					</User.Root>
-				</User.Provider>
-				<div className="content-break line-clamp-1 text-sm">{data.content}</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-}
--- a/src/routes/new.lazy.tsx
+++ b/src/routes/new.lazy.tsx
@@ -18,7 +18,7 @@ function Screen() {
 				</div>
 				<div className="flex flex-col gap-4">
 					<a
-						href="/auth/connect"
+						href="/new-account/connect"
 						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>
@@ -28,7 +28,7 @@ function Screen() {
 						</p>
 					</a>
 					<a
-						href="/auth/import"
+						href="/new-account/import"
 						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>
@@ -38,7 +38,7 @@ function Screen() {
 						</p>
 					</a>
 					<a
-						href="/auth/watch"
+						href="/new-account/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">
--- a/src/routes/reset.lazy.tsx
+++ b/src/routes/reset.lazy.tsx
@@ -1,130 +0,0 @@
-import { commands } from "@/commands.gen";
-import { Frame, GoBack, Spinner } from "@/components";
-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("/reset")({
-	component: Screen,
-});
-
-function Screen() {
-	const navigate = Route.useNavigate();
-
-	const [key, setKey] = useState("");
-	const [password, setPassword] = useState("");
-	const [isPending, startTransition] = useTransition();
-
-	const pasteFromClipboard = async () => {
-		const val = await readText();
-		setKey(val);
-	};
-
-	const submit = () => {
-		startTransition(async () => {
-			if (!key.startsWith("nsec1")) {
-				await message(
-					"You need to enter a valid private key starts with nsec",
-					{ title: "Reset Password", kind: "info" },
-				);
-				return;
-			}
-
-			if (!password.length) {
-				await message("You must set password to secure your key", {
-					title: "Reset Password",
-					kind: "info",
-				});
-				return;
-			}
-
-			const res = await commands.resetPassword(key, password);
-
-			if (res.status === "ok") {
-				navigate({ to: "/", replace: true });
-			} else {
-				await message(res.error, {
-					title: "Import Private Ket",
-					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">
-						Reset password
-					</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="flex flex-col gap-1.5">
-							<label
-								htmlFor="key"
-								className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
-							>
-								Private Key
-							</label>
-							<div className="relative">
-								<input
-									name="key"
-									type="password"
-									placeholder="nsec..."
-									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 dark:placeholder:text-neutral-600"
-								/>
-								<button
-									type="button"
-									onClick={() => pasteFromClipboard()}
-									className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
-								>
-									Paste
-								</button>
-							</div>
-						</div>
-						<div className="flex flex-col gap-1">
-							<label
-								htmlFor="password"
-								className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
-							>
-								Set a new password
-							</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:border-blue-500 focus:outline-none"
-							/>
-						</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/set-group.lazy.tsx
+++ b/src/routes/set-group.lazy.tsx
@@ -40,6 +40,22 @@ function Screen() {

 	const submit = () => {
 		startTransition(async () => {
+			const signer = await commands.hasSigner(account);
+
+			if (signer.status === "ok") {
+				if (!signer.data) {
+					const res = await commands.setSigner(account);
+
+					if (res.status === "error") {
+						await message(res.error, { kind: "error" });
+						return;
+					}
+				}
+			} else {
+				await message(signer.error, { kind: "error" });
+				return;
+			}
+
 			const res = await commands.setGroup(title, null, null, users);

 			if (res.status === "ok") {
--- a/src/routes/set-interest.lazy.tsx
+++ b/src/routes/set-interest.lazy.tsx
@@ -52,9 +52,26 @@ function Screen() {

 	const submit = () => {
 		startTransition(async () => {
+			const signer = await commands.hasSigner(account);
+
+			if (signer.status === "ok") {
+				if (!signer.data) {
+					const res = await commands.setSigner(account);
+
+					if (res.status === "error") {
+						await message(res.error, { kind: "error" });
+						return;
+					}
+				}
+			} else {
+				await message(signer.error, { kind: "error" });
+				return;
+			}
+
 			const content = hashtags.map((tag) =>
 				tag.toLowerCase().replace(" ", "-").replace("#", ""),
 			);
+
 			const res = await commands.setInterest(title, null, null, content);

 			if (res.status === "ok") {
--- a/src/routes/set-signer.$id.lazy.tsx
+++ b/src/routes/set-signer.$id.lazy.tsx
@@ -1,92 +0,0 @@
-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/zap.$id.lazy.tsx
+++ b/src/routes/zap.$id.lazy.tsx
@@ -1,12 +1,11 @@
 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 { Menu, MenuItem } from "@tauri-apps/api/menu";
-import { type Window, getCurrentWindow } from "@tauri-apps/api/window";
+import { getCurrentWindow } from "@tauri-apps/api/window";
 import { message } from "@tauri-apps/plugin-dialog";
 import { useCallback, useEffect, useState, useTransition } from "react";
 import CurrencyInput from "react-currency-input-field";
@@ -20,8 +19,7 @@ export const Route = createLazyFileRoute("/zap/$id")({
 function Screen() {
 	const { accounts, event } = Route.useRouteContext();

-	const [currentUser, setCurrentUser] = useState<string>(null);
-	const [popup, setPopup] = useState<Window>(null);
+	const [currentUser, setCurrentUser] = useState<string | null>(null);
 	const [amount, setAmount] = useState(21);
 	const [content, setContent] = useState<string>("");
 	const [isCompleted, setIsCompleted] = useState(false);
@@ -30,7 +28,7 @@ function Screen() {
 	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
 		e.preventDefault();

-		const list = [];
+		const list: Promise<MenuItem>[] = [];

 		for (const account of accounts) {
 			const res = await commands.getProfile(account);
@@ -38,7 +36,7 @@ function Screen() {

 			if (res.status === "ok") {
 				const profile: Metadata = JSON.parse(res.data);
-				name = profile.display_name ?? profile.name;
+				name = profile.display_name ?? profile.name ?? "unknown";
 			}

 			list.push(
@@ -57,51 +55,39 @@ function Screen() {

 	const zap = () => {
 		startTransition(async () => {
-			const res = await commands.zapEvent(event.id, amount.toString(), content);
+			if (!currentUser) return;

-			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,
-					);
+					const res = await commands.setSigner(currentUser);

-					setPopup(newPopup);
-					return;
+					if (res.status === "error") {
+						await message(res.error, { kind: "error" });
+						return;
+					}
 				}

-				zap();
+				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;
+				}
+			} else {
+				return;
 			}
-		}
-	};
-
-	useEffect(() => {
-		if (!popup) return;
-
-		const unlisten = popup.listen("signer-updated", () => {
-			zap();
 		});
-
-		return () => {
-			unlisten.then((f) => f());
-		};
-	}, [popup]);
+	};

 	useEffect(() => {
 		if (accounts?.length) {
@@ -170,7 +156,7 @@ function Screen() {
 						<div className="inline-flex items-center gap-3">
 							<button
 								type="button"
-								onClick={() => submit()}
+								onClick={() => zap()}
 								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"}
--- a/src/system/useEvent.ts
+++ b/src/system/useEvent.ts
@@ -1,7 +1,6 @@
-import { type Result, type RichEvent, commands } from "@/commands.gen";
+import { commands } from "@/commands.gen";
 import type { NostrEvent } from "@/types";
 import { useQuery } from "@tanstack/react-query";
-import { nip19 } from "nostr-tools";
 import { LumeEvent } from "./event";

 export function useEvent(id: string, repost?: string) {
@@ -21,32 +20,14 @@ export function useEvent(id: string, repost?: string) {
 				}

 				// Validate ID
-				let normalizeId: string = id
+				const normalizeId: string = id
 					.replace("nostr:", "")
 					.replace(/[^\w\s]/gi, "");

-				// Define query
-				let query: Result<RichEvent, string>;
-				let relayHint: string = null;
+				const res = await commands.getEvent(normalizeId);

-				if (normalizeId.startsWith("nevent1")) {
-					const decoded = nip19.decode(normalizeId);
-
-					if (decoded.type === "nevent") {
-						relayHint = decoded.data.relays[0];
-						normalizeId = decoded.data.id;
-					}
-				}
-
-				// Build query
-				if (relayHint?.length) {
-					query = await commands.getEventFrom(normalizeId, relayHint);
-				} else {
-					query = await commands.getEvent(normalizeId);
-				}
-
-				if (query.status === "ok") {
-					const data = query.data;
+				if (res.status === "ok") {
+					const data = res.data;
 					const raw: NostrEvent = JSON.parse(data.raw);

 					if (data.parsed) {
@@ -55,7 +36,7 @@ export function useEvent(id: string, repost?: string) {

 					return new LumeEvent(raw);
 				} else {
-					throw new Error(query.error);
+					throw new Error(res.error);
 				}
 			} catch (e) {
 				throw new Error(String(e));
@@ -64,8 +45,6 @@ export function useEvent(id: string, repost?: string) {
 		refetchOnWindowFocus: false,
 		refetchOnMount: false,
 		refetchOnReconnect: false,
-		staleTime: Number.POSITIVE_INFINITY,
-		retry: 2,
 	});

 	return { isLoading, isError, error, data };
--- a/src/system/useProfile.ts
+++ b/src/system/useProfile.ts
@@ -37,8 +37,6 @@ export function useProfile(pubkey: string, embed?: string) {
 		refetchOnMount: false,
 		refetchOnWindowFocus: false,
 		refetchOnReconnect: false,
-		staleTime: Number.POSITIVE_INFINITY,
-		retry: 2,
 	});

 	return { isLoading, isError, profile };
--- a/src/system/useRect.ts
+++ b/src/system/useRect.ts
@@ -23,7 +23,7 @@ const useEffectInEvent = <K extends keyof WindowEventMap>(
 const useTauriInEvent = (set: () => void) => {
 	useEffect(() => {
 		if (set) {
-			const unlisten = listen("column_scroll", () => {
+			const unlisten = listen("scrolling", () => {
 				set();
 			});

--- a/src/types.ts
+++ b/src/types.ts
@@ -61,10 +61,10 @@ export interface LumeColumn {

 export interface ColumnEvent {
 	type: "reset" | "add" | "remove" | "update" | "move" | "set_title";
-	label?: string;
-	title?: string;
-	column?: LumeColumn;
-	direction?: "left" | "right";
+	column: LumeColumn;
+	label: string;
+	title: string;
+	direction: "left" | "right";
 }

 export interface Relays {