wip: restructure routes

src-tauri/resources/columns.json

@@ -1,74 +1,37 @@
 [
 	{
 		"default": true,
-		"official": true,
 		"label": "onboarding",
 		"name": "Onboarding",
 		"description": "Tips for Mastering Lume.",
-		"url": "/columns/onboarding",
-		"picture": ""
+		"url": "/columns/onboarding"
 	},
 	{
 		"default": true,
-		"official": true,
 		"label": "Launchpad",
 		"name": "Launchpad",
 		"description": "Expand your experiences.",
-		"url": "/columns/launchpad",
-		"picture": ""
+		"url": "/columns/launchpad"
 	},
 	{
 		"default": false,
-		"official": true,
-		"label": "newsfeed",
-		"name": "Newsfeed",
-		"description": "All notes from you're following.",
-		"url": "/columns/newsfeed",
-		"picture": ""
-	},
-	{
-		"default": false,
-		"official": true,
-		"label": "notification",
-		"name": "Notification",
-		"description": "All things around you.",
-		"url": "/columns/notification",
-		"picture": ""
-	},
-	{
-		"default": false,
-		"official": true,
 		"label": "search",
 		"name": "Search",
 		"description": "Find anything.",
-		"url": "/columns/search",
-		"picture": ""
+		"url": "/columns/search"
 	},
 	{
 		"default": false,
-		"official": true,
-		"label": "stories",
-		"name": "Stories",
-		"description": "Keep up to date with your follows.",
-		"url": "/columns/stories",
-		"picture": ""
-	},
-	{
-		"default": false,
-		"official": true,
 		"label": "global_feeds",
 		"name": "Global Feeds",
 		"description": "All global notes from all connected relays.",
-		"url": "/columns/global",
-		"picture": ""
+		"url": "/columns/global"
 	},
 	{
 		"default": false,
-		"official": true,
 		"label": "trending",
 		"name": "Trending",
 		"description": "Discover all trending notes.",
-		"url": "/columns/trending",
-		"picture": ""
+		"url": "/columns/trending"
 	}
 ]

src-tauri/src/commands/account.rs

@@ -1,5 +1,4 @@
 use keyring::Entry;
-use keyring_search::{Limit, List, Search};
 use nostr_sdk::prelude::*;
 use serde::{Deserialize, Serialize};
 use specta::Type;
@@ -11,7 +10,7 @@ use std::{
 };
 use tauri::{Emitter, Manager, State};
 
-use crate::{Nostr, NOTIFICATION_SUB_ID};
+use crate::{common::get_all_accounts, Nostr, NOTIFICATION_SUB_ID};
 
 #[derive(Debug, Clone, Serialize, Deserialize, Type)]
 struct Account {
@@ -22,16 +21,7 @@ struct Account {
 #[tauri::command]
 #[specta::specta]
 pub fn get_accounts() -> Vec<String> {
-    let search = Search::new().expect("Unexpected.");
-    let results = search.by_service("Lume Secret Storage");
-    let list = List::list_credentials(&results, Limit::All);
-    let accounts: HashSet<String> = list
-        .split_whitespace()
-        .filter(|v| v.starts_with("npub1"))
-        .map(String::from)
-        .collect();
-
-    accounts.into_iter().collect()
+    get_all_accounts()
 }
 
 #[tauri::command]
@@ -235,7 +225,7 @@ pub async fn login(
     password: String,
     state: State<'_, Nostr>,
     handle: tauri::AppHandle,
-) -> Result<String, String> {
+) -> Result<(), String> {
     let client = &state.client;
     let keyring = Entry::new("Lume Secret Storage", &account).map_err(|e| e.to_string())?;
 
@@ -255,7 +245,7 @@ pub async fn login(
                 .to_secret_key(password)
                 .map_err(|_| "Wrong password.")?;
             let keys = Keys::new(secret_key);
-            let public_key = keys.public_key().to_bech32().unwrap();
+            let public_key = keys.public_key();
             let signer = NostrSigner::Keys(keys);
 
             // Update signer
@@ -265,7 +255,7 @@ pub async fn login(
         }
         Some(bunker) => {
             let uri = NostrConnectURI::parse(bunker).map_err(|e| e.to_string())?;
-            let public_key = uri.signer_public_key().unwrap().to_bech32().unwrap();
+            let public_key = uri.signer_public_key().unwrap();
             let app_keys = Keys::from_str(&account.password).map_err(|e| e.to_string())?;
 
             match Nip46Signer::new(uri, app_keys, Duration::from_secs(120), None) {
@@ -285,22 +275,25 @@ pub async fn login(
     // NIP-03: Get user's contact list
     let contact_list = {
         if let Ok(contacts) = client.get_contact_list(Some(Duration::from_secs(5))).await {
-            state.contact_list.lock().unwrap().clone_from(&contacts);
+            state
+                .contact_list
+                .lock()
+                .unwrap()
+                .insert(public_key, contacts.clone());
+
             contacts
         } else {
             Vec::new()
         }
     };
 
-    let public_key_clone = public_key.clone();
-
     // Run seperate thread for sync
     tauri::async_runtime::spawn(async move {
         let state = handle.state::<Nostr>();
         let client = &state.client;
 
+        let author = public_key;
         let bootstrap_relays: Vec<Url> = client.pool().all_relays().await.into_keys().collect();
-        let author = PublicKey::from_str(&public_key).unwrap();
 
         // Subscribe for new notification
         if let Ok(e) = client
@@ -453,5 +446,5 @@ pub async fn login(
             .expect("Something wrong!");
     });
 
-    Ok(public_key_clone)
+    Ok(())
 }

src-tauri/src/commands/metadata.rs

@@ -7,7 +7,7 @@ use tauri::{Emitter, Manager, State};
 use tauri_specta::Event;
 
 use crate::{
-    common::{get_latest_event, process_event},
+    common::{get_all_accounts, get_latest_event, process_event},
     NewSettings, Nostr, RichEvent, Settings,
 };
 
@@ -104,14 +104,17 @@ pub async fn set_contact_list(
 
 #[tauri::command]
 #[specta::specta]
-pub fn get_contact_list(state: State<'_, Nostr>) -> Result<Vec<String>, String> {
-    let contact_list = state.contact_list.lock().unwrap().clone();
-    let vec: Vec<String> = contact_list
-        .into_iter()
-        .map(|f| f.public_key.to_hex())
-        .collect();
+pub fn get_contact_list(id: String, state: State<'_, Nostr>) -> Result<Vec<String>, String> {
+    let contact_state = state.contact_list.lock().unwrap().clone();
+    let public_key = PublicKey::parse(&id).map_err(|e| e.to_string())?;
 
-    Ok(vec)
+    match contact_state.get(&public_key) {
+        Some(contact_list) => {
+            let vec: Vec<String> = contact_list.iter().map(|f| f.public_key.to_hex()).collect();
+            Ok(vec)
+        }
+        None => Err("Contact list is empty.".into()),
+    }
 }
 
 #[tauri::command]
@@ -150,12 +153,15 @@ pub async fn set_profile(profile: Profile, state: State<'_, Nostr>) -> Result<St
 #[tauri::command]
 #[specta::specta]
 pub fn check_contact(id: String, state: State<'_, Nostr>) -> Result<bool, String> {
-    let contact_list = &state.contact_list.lock().unwrap();
+    let contact_state = &state.contact_list.lock().unwrap();
     let public_key = PublicKey::from_str(&id).map_err(|e| e.to_string())?;
 
-    match contact_list.iter().position(|x| x.public_key == public_key) {
-        Some(_) => Ok(true),
-        None => Ok(false),
+    match contact_state.get(&public_key) {
+        Some(contact_list) => match contact_list.iter().position(|x| x.public_key == public_key) {
+            Some(_) => Ok(true),
+            None => Ok(false),
+        },
+        None => Err("Contact list is empty.".into()),
     }
 }
 
@@ -267,9 +273,18 @@ pub async fn get_group(id: String, state: State<'_, Nostr>) -> Result<String, St
 #[specta::specta]
 pub async fn get_all_groups(state: State<'_, Nostr>) -> Result<Vec<RichEvent>, String> {
     let client = &state.client;
-    let signer = client.signer().await.map_err(|e| e.to_string())?;
-    let public_key = signer.public_key().await.map_err(|e| e.to_string())?;
-    let filter = Filter::new().kind(Kind::FollowSet).author(public_key);
+    let accounts = get_all_accounts();
+    let authors: Vec<PublicKey> = accounts
+        .iter()
+        .filter_map(|acc| {
+            if let Ok(pk) = PublicKey::from_str(acc) {
+                Some(pk)
+            } else {
+                None
+            }
+        })
+        .collect();
+    let filter = Filter::new().kind(Kind::FollowSet).authors(authors);
 
     match client.database().query(vec![filter]).await {
         Ok(events) => Ok(process_event(client, events).await),
@@ -347,11 +362,20 @@ pub async fn get_interest(id: String, state: State<'_, Nostr>) -> Result<String,
 #[specta::specta]
 pub async fn get_all_interests(state: State<'_, Nostr>) -> Result<Vec<RichEvent>, String> {
     let client = &state.client;
-    let signer = client.signer().await.map_err(|e| e.to_string())?;
-    let public_key = signer.public_key().await.map_err(|e| e.to_string())?;
+    let accounts = get_all_accounts();
+    let authors: Vec<PublicKey> = accounts
+        .iter()
+        .filter_map(|acc| {
+            if let Ok(pk) = PublicKey::from_str(acc) {
+                Some(pk)
+            } else {
+                None
+            }
+        })
+        .collect();
     let filter = Filter::new()
         .kinds(vec![Kind::InterestSet, Kind::Interests])
-        .author(public_key);
+        .authors(authors);
 
     match client.database().query(vec![filter]).await {
         Ok(events) => Ok(process_event(client, events).await),

src-tauri/src/commands/sync.rs

@@ -151,13 +151,6 @@ pub fn run_sync(handle: tauri::AppHandle, reader: Channel<NegentropyEvent>) {
             };
         };
 
-        reader
-            .send(NegentropyEvent::Progress {
-                message: "Ok".to_string(),
-                total_event: 0,
-            })
-            .unwrap();
-
         let tagged = Filter::new()
             .pubkeys(public_keys)
             .kinds(vec![Kind::TextNote, Kind::Repost, Kind::ZapReceipt])
@@ -170,10 +163,17 @@ pub fn run_sync(handle: tauri::AppHandle, reader: Channel<NegentropyEvent>) {
         {
             reader
                 .send(NegentropyEvent::Progress {
-                    message: "Syncing all tagged events for your accounts.".to_string(),
+                    message: "Syncing all tagged events for your accounts".to_string(),
                     total_event: report.received.len() as i32,
                 })
                 .unwrap();
         }
+
+        reader
+            .send(NegentropyEvent::Progress {
+                message: "Ok".to_string(),
+                total_event: 0,
+            })
+            .unwrap();
     });
 }

src-tauri/src/main.rs

@@ -12,7 +12,7 @@ use serde::{Deserialize, Serialize};
 use specta::Type;
 use specta_typescript::Typescript;
 use std::{
-    collections::HashSet,
+    collections::{HashMap, HashSet},
     fs,
     io::{self, BufRead},
     str::FromStr,
@@ -30,7 +30,7 @@ pub mod common;
 pub struct Nostr {
     client: Client,
     settings: Mutex<Settings>,
-    contact_list: Mutex<Vec<Contact>>,
+    contact_list: Mutex<HashMap<PublicKey, Vec<Contact>>>,
     trusted_list: Mutex<HashSet<PublicKey>>,
 }
 
@@ -287,10 +287,11 @@ fn main() {
             app.manage(Nostr {
                 client,
                 settings: Mutex::new(Settings::default()),
-                contact_list: Mutex::new(Vec::new()),
+                contact_list: Mutex::new(HashMap::new()),
                 trusted_list: Mutex::new(HashSet::new()),
             });
 
+            /*
             Subscription::listen_any(app, move |event| {
                 let handle = handle_clone_child.to_owned();
                 let payload = event.payload;
@@ -318,6 +319,7 @@ fn main() {
                                 }
                                 None => {
                                     let contact_list = state.contact_list.lock().unwrap().clone();
+
                                     if !contact_list.is_empty() {
                                         let authors: Vec<PublicKey> =
                                             contact_list.iter().map(|f| f.public_key).collect();
@@ -344,6 +346,7 @@ fn main() {
                     }
                 });
             });
+            */
 
             // Run local relay thread
             //tauri::async_runtime::spawn(async move {

src/commands.gen.ts

@@ -105,7 +105,7 @@ async isAccountSync(id: string) : Promise<boolean> {
 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 login(account: string, password: string) : Promise<Result<null, string>> {
     try {
     return { status: "ok", data: await TAURI_INVOKE("login", { account, password }) };
 } catch (e) {
@@ -129,9 +129,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 };

src/components/column.tsx

@@ -3,21 +3,16 @@ 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";
 
 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 +47,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,7 +68,7 @@ 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">
@@ -94,14 +89,11 @@ function Header({ label }: { label: string }) {
 	);
 
 	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
+		await getCurrentWindow().emit("columns", {
+			type: "set_title",
+			label,
+			title,
+		});
 		setIsChanged(false);
 	};
 

src/routes/$account/_app.home.lazy.tsx

@@ -1,278 +0,0 @@
-import { appColumns } from "@/commons";
-import { Spinner } from "@/components";
-import { Column } from "@/components/column";
-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";
-import useEmblaCarousel from "embla-carousel-react";
-import { nanoid } from "nanoid";
-import {
-	type ReactNode,
-	useCallback,
-	useEffect,
-	useLayoutEffect,
-	useState,
-} from "react";
-import { createPortal } from "react-dom";
-import { useDebouncedCallback } from "use-debounce";
-
-export const Route = createLazyFileRoute("/$account/_app/home")({
-	component: Screen,
-});
-
-function Screen() {
-	const params = Route.useParams();
-	const columns = useStore(appColumns, (state) => state);
-
-	const [emblaRef, emblaApi] = useEmblaCarousel({
-		watchDrag: false,
-		loop: false,
-	});
-
-	const scrollPrev = useCallback(() => {
-		if (emblaApi) emblaApi.scrollPrev(true);
-	}, [emblaApi]);
-
-	const scrollNext = useCallback(() => {
-		if (emblaApi) emblaApi.scrollNext(true);
-	}, [emblaApi]);
-
-	const emitScrollEvent = useCallback(() => {
-		getCurrentWindow().emit("column_scroll", {});
-	}, []);
-
-	const add = useDebouncedCallback((column: LumeColumn) => {
-		column.label = `${column.label}-${nanoid()}`; // update col label
-		appColumns.setState((prev) => [column, ...prev]);
-
-		if (emblaApi) {
-			emblaApi.scrollTo(0, true);
-		}
-	}, 150);
-
-	const remove = useDebouncedCallback((label: string) => {
-		appColumns.setState((prev) => prev.filter((t) => t.label !== label));
-	}, 150);
-
-	const move = useDebouncedCallback(
-		(label: string, direction: "left" | "right") => {
-			const newCols = [...columns];
-
-			const col = newCols.find((el) => el.label === label);
-			const colIndex = newCols.findIndex((el) => el.label === label);
-
-			newCols.splice(colIndex, 1);
-
-			if (direction === "left") newCols.splice(colIndex - 1, 0, col);
-			if (direction === "right") newCols.splice(colIndex + 1, 0, col);
-
-			appColumns.setState(() => newCols);
-		},
-		150,
-	);
-
-	const update = useDebouncedCallback((label: string, title: string) => {
-		const currentColIndex = columns.findIndex((col) => col.label === label);
-
-		const updatedCol = Object.assign({}, columns[currentColIndex]);
-		updatedCol.name = title;
-
-		const newCols = columns.slice();
-		newCols[currentColIndex] = updatedCol;
-
-		appColumns.setState(() => newCols);
-	}, 150);
-
-	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);
-			emblaApi.on("slidesChanged", emitScrollEvent);
-		}
-
-		return () => {
-			emblaApi?.off("scroll", emitScrollEvent);
-			emblaApi?.off("slidesChanged", emitScrollEvent);
-		};
-	}, [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();
-			if (data.payload.type === "add") add(data.payload.column);
-			if (data.payload.type === "remove") remove(data.payload.label);
-			if (data.payload.type === "move")
-				move(data.payload.label, data.payload.direction);
-			if (data.payload.type === "set_title")
-				update(data.payload.label, data.payload.title);
-		});
-
-		return () => {
-			unlisten.then((f) => f());
-		};
-	}, []);
-
-	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 (!columns.length) {
-			const prevColumns = window.localStorage.getItem(
-				`${params.account}_columns`,
-			);
-
-			if (!prevColumns) {
-				getSystemColumns();
-			} else {
-				const parsed: LumeColumn[] = JSON.parse(prevColumns);
-				appColumns.setState(() => parsed);
-			}
-		} else {
-			window.localStorage.setItem(
-				`${params.account}_columns`,
-				JSON.stringify(columns),
-			);
-		}
-	}, [columns.length]);
-
-	return (
-		<div className="size-full">
-			<div ref={emblaRef} className="overflow-hidden size-full">
-				<div className="flex size-full">
-					{!columns ? (
-						<div className="size-full flex items-center justify-center">
-							<Spinner />
-						</div>
-					) : (
-						columns.map((column) => (
-							<Column key={column.label} column={column} />
-						))
-					)}
-					<div className="shrink-0 p-2 h-full w-[440px]">
-						<div className="size-full flex items-center justify-center">
-							<button
-								type="button"
-								onClick={() => LumeWindow.openColumnsGallery()}
-								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" />
-								Add Column
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-			<Toolbar>
-				<ManageButton />
-				<button
-					type="button"
-					onClick={() => scrollPrev()}
-					className="inline-flex items-center justify-center rounded-full size-7 hover:bg-black/5 dark:hover:bg-white/5"
-				>
-					<ArrowLeft className="size-4" />
-				</button>
-				<button
-					type="button"
-					onClick={() => scrollNext()}
-					className="inline-flex items-center justify-center rounded-full size-7 hover:bg-black/5 dark:hover:bg-white/5"
-				>
-					<ArrowRight className="size-4" />
-				</button>
-			</Toolbar>
-		</div>
-	);
-}
-
-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);
-
-	useLayoutEffect(() => {
-		setDomReady(true);
-	}, []);
-
-	return domReady ? (
-		// @ts-ignore, react bug ???
-		createPortal(children, document.getElementById("toolbar"))
-	) : (
-		<></>
-	);
-}

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>
-	);
-});

src/routes/$account/_settings.lazy.tsx

@@ -1,111 +0,0 @@
-import { cn } from "@/commons";
-import { CurrencyBtc, GearSix, HardDrives, User } from "@phosphor-icons/react";
-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")({
-	component: Screen,
-});
-
-function Screen() {
-	const { account } = Route.useParams();
-	const { platform } = Route.useRouteContext();
-
-	return (
-		<div className="flex size-full">
-			<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",
-					platform === "macos" ? "pt-11" : "",
-				)}
-			>
-				<Link to="/$account/general" params={{ account }}>
-					{({ isActive }) => {
-						return (
-							<div
-								className={cn(
-									"h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2",
-									isActive
-										? "bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20"
-										: "text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10",
-								)}
-							>
-								<GearSix className="size-5 shrink-0" />
-								<p className="text-sm font-medium">General</p>
-							</div>
-						);
-					}}
-				</Link>
-				<Link to="/$account/profile" params={{ account }}>
-					{({ isActive }) => {
-						return (
-							<div
-								className={cn(
-									"h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2",
-									isActive
-										? "bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20"
-										: "text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10",
-								)}
-							>
-								<User className="size-5 shrink-0" />
-								<p className="text-sm font-medium">Profile</p>
-							</div>
-						);
-					}}
-				</Link>
-				<Link to="/$account/relay" params={{ account }}>
-					{({ isActive }) => {
-						return (
-							<div
-								className={cn(
-									"h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2",
-									isActive
-										? "bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20"
-										: "text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10",
-								)}
-							>
-								<HardDrives className="size-5 shrink-0" />
-								<p className="text-sm font-medium">Relay</p>
-							</div>
-						);
-					}}
-				</Link>
-				<Link to="/$account/wallet" params={{ account }}>
-					{({ isActive }) => {
-						return (
-							<div
-								className={cn(
-									"h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2",
-									isActive
-										? "bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20"
-										: "text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10",
-								)}
-							>
-								<CurrencyBtc className="size-5 shrink-0" />
-								<p className="text-sm font-medium">Wallet</p>
-							</div>
-						);
-					}}
-				</Link>
-			</div>
-			<ScrollArea.Root
-				type={"scroll"}
-				scrollHideDelay={300}
-				className="flex-1 overflow-hidden size-full"
-			>
-				<ScrollArea.Viewport className="relative h-full pt-12">
-					<Outlet />
-				</ScrollArea.Viewport>
-				<ScrollArea.Scrollbar
-					className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
-					orientation="vertical"
-				>
-					<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
-				</ScrollArea.Scrollbar>
-				<ScrollArea.Corner className="bg-transparent" />
-			</ScrollArea.Root>
-		</div>
-	);
-}

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>
-	);
-}

src/routes/$account/_settings/bitcoin-connect.tsx

@@ -1,12 +0,0 @@
-import { init } from "@getalby/bitcoin-connect-react";
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/$account/_settings/bitcoin-connect")({
-	beforeLoad: () => {
-		init({
-			appName: "Lume",
-			filters: ["nwc"],
-			showBalance: true,
-		});
-	},
-});

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>
-	);
-}

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);
-		}
-	},
-});

src/routes/$account/_settings/profile.lazy.tsx

@@ -1,245 +0,0 @@
-import { type Profile, commands } from "@/commands.gen";
-import { cn, upload } from "@/commons";
-import { Spinner } from "@/components";
-import { Plus } from "@phosphor-icons/react";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { message } from "@tauri-apps/plugin-dialog";
-import {
-	type Dispatch,
-	type ReactNode,
-	type SetStateAction,
-	useState,
-	useTransition,
-} from "react";
-import { useForm } from "react-hook-form";
-
-export const Route = createLazyFileRoute("/$account/_settings/profile")({
-	component: Screen,
-});
-
-function Screen() {
-	const { profile } = Route.useRouteContext();
-	const { register, handleSubmit } = useForm({ defaultValues: profile });
-
-	const [isPending, startTransition] = useTransition();
-	const [picture, setPicture] = useState<string>("");
-
-	const onSubmit = (data: Profile) => {
-		startTransition(async () => {
-			const newProfile: Profile = { ...profile, ...data, picture };
-			const res = await commands.setProfile(newProfile);
-
-			if (res.status === "error") {
-				await message(res.error, { title: "Profile", kind: "error" });
-			}
-
-			return;
-		});
-	};
-
-	return (
-		<div className="relative flex flex-col gap-6 px-3 pb-3">
-			<div className="flex items-center flex-1 h-full gap-3">
-				<div className="relative rounded-full size-20 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
-					{profile.picture ? (
-						<img
-							src={picture || profile.picture}
-							alt="avatar"
-							loading="lazy"
-							decoding="async"
-							className="absolute inset-0 z-10 object-cover size-20 rounded-full"
-						/>
-					) : null}
-					<AvatarUploader
-						setPicture={setPicture}
-						className="absolute inset-0 z-20 flex items-center justify-center size-full text-white rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
-					>
-						<Plus className="size-5" />
-					</AvatarUploader>
-				</div>
-				<div className="flex-1 flex items-center justify-between">
-					<div>
-						<div className="text-lg font-semibold">{profile.display_name}</div>
-						<div className="text-neutral-700 dark:text-neutral-300">
-							{profile.nip05}
-						</div>
-					</div>
-					<PrivkeyButton />
-				</div>
-			</div>
-			<form
-				onSubmit={handleSubmit(onSubmit)}
-				className="flex flex-col gap-3 mb-0"
-			>
-				<div className="flex flex-col w-full gap-1">
-					<label
-						htmlFor="display_name"
-						className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-					>
-						Display Name
-					</label>
-					<input
-						name="display_name"
-						{...register("display_name")}
-						spellCheck={false}
-						className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
-					/>
-				</div>
-				<div className="flex flex-col w-full gap-1">
-					<label
-						htmlFor="name"
-						className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-					>
-						Name
-					</label>
-					<input
-						name="name"
-						{...register("name")}
-						spellCheck={false}
-						className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
-					/>
-				</div>
-				<div className="flex flex-col w-full gap-1">
-					<label
-						htmlFor="website"
-						className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-					>
-						Website
-					</label>
-					<input
-						name="website"
-						type="url"
-						{...register("website")}
-						spellCheck={false}
-						className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
-					/>
-				</div>
-				<div className="flex flex-col w-full gap-1">
-					<label
-						htmlFor="banner"
-						className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-					>
-						Cover
-					</label>
-					<input
-						name="banner"
-						type="url"
-						{...register("banner")}
-						spellCheck={false}
-						className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
-					/>
-				</div>
-				<div className="flex flex-col w-full gap-1">
-					<label
-						htmlFor="nip05"
-						className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-					>
-						NIP-05
-					</label>
-					<input
-						name="nip05"
-						type="email"
-						{...register("nip05")}
-						spellCheck={false}
-						className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
-					/>
-				</div>
-				<div className="flex flex-col w-full gap-1">
-					<label
-						htmlFor="lnaddress"
-						className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-					>
-						Lightning Address
-					</label>
-					<input
-						name="lnaddress"
-						type="email"
-						{...register("lud16")}
-						className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
-					/>
-				</div>
-				<div className="flex items-center justify-end">
-					<button
-						type="submit"
-						disabled={isPending}
-						className="inline-flex items-center justify-center w-32 px-2 text-sm font-medium text-white bg-blue-500 rounded-lg h-9 hover:bg-blue-600 disabled:opacity-50"
-					>
-						{isPending ? <Spinner className="size-4" /> : "Update Profile"}
-					</button>
-				</div>
-			</form>
-		</div>
-	);
-}
-
-function PrivkeyButton() {
-	const { account } = Route.useParams();
-
-	const [isPending, startTransition] = useTransition();
-	const [isCopy, setIsCopy] = useState(false);
-
-	const copyPrivateKey = () => {
-		startTransition(async () => {
-			const res = await commands.getPrivateKey(account);
-
-			if (res.status === "ok") {
-				await writeText(res.data);
-				setIsCopy(true);
-			} else {
-				await message(res.error, { kind: "error" });
-				return;
-			}
-		});
-	};
-
-	return (
-		<button
-			type="button"
-			onClick={() => copyPrivateKey()}
-			className="inline-flex items-center justify-center px-3 text-sm font-medium text-blue-500 bg-blue-100 border border-blue-300 rounded-full h-7 hover:bg-blue-200 dark:bg-blue-900 dark:border-blue-800 dark:text-blue-300 dark:hover:bg-blue-800"
-		>
-			{isPending ? (
-				<Spinner className="size-4" />
-			) : isCopy ? (
-				"Copied"
-			) : (
-				"Copy Private Key"
-			)}
-		</button>
-	);
-}
-
-function AvatarUploader({
-	setPicture,
-	children,
-	className,
-}: {
-	setPicture: Dispatch<SetStateAction<string>>;
-	children: ReactNode;
-	className?: string;
-}) {
-	const [isPending, startTransition] = useTransition();
-
-	const uploadAvatar = () => {
-		startTransition(async () => {
-			try {
-				const image = await upload();
-				setPicture(image);
-			} catch (e) {
-				await message(String(e));
-				return;
-			}
-		});
-	};
-
-	return (
-		<button
-			type="button"
-			onClick={() => uploadAvatar()}
-			className={cn("size-4", className)}
-		>
-			{isPending ? <Spinner className="size-4" /> : children}
-		</button>
-	);
-}

src/routes/$account/_settings/profile.tsx

@@ -1,15 +0,0 @@
-import { type Profile, commands } from "@/commands.gen";
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/$account/_settings/profile")({
-	beforeLoad: async ({ params }) => {
-		const res = await commands.getProfile(params.account);
-
-		if (res.status === "ok") {
-			const profile: Profile = JSON.parse(res.data);
-			return { profile };
-		} else {
-			throw new Error(res.error);
-		}
-	},
-});

src/routes/$account/_settings/relay.lazy.tsx

@@ -1,155 +0,0 @@
-import { commands } from "@/commands.gen";
-import { Plus, X } from "@phosphor-icons/react";
-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")({
-	component: Screen,
-});
-
-function Screen() {
-	const { relayList } = Route.useRouteContext();
-
-	const [relays, setRelays] = useState<string[]>([]);
-	const [newRelay, setNewRelay] = useState("");
-	const [isPending, startTransition] = useTransition();
-
-	const removeRelay = async (relay: string) => {
-		const res = await commands.removeRelay(relay);
-
-		if (res.status === "ok") {
-			return res.data;
-		} else {
-			throw new Error(res.error);
-		}
-	};
-
-	const addNewRelay = () => {
-		startTransition(async () => {
-			try {
-				let url = newRelay;
-
-				if (!url.startsWith("wss://")) {
-					url = `wss://${url}`;
-				}
-
-				const relay = new URL(url);
-				const res = await commands.connectRelay(relay.toString());
-
-				if (res.status === "ok") {
-					setRelays((prev) => [...prev, newRelay]);
-					setNewRelay("");
-				} else {
-					await message(res.error, { title: "Relay", kind: "error" });
-					return;
-				}
-			} catch {
-				await message("URL is not valid.", { kind: "error" });
-				return;
-			}
-		});
-	};
-
-	useEffect(() => {
-		setRelays(relayList.connected);
-	}, [relayList]);
-
-	return (
-		<div className="w-full px-3 pb-3">
-			<div className="flex flex-col gap-6">
-				<div className="flex flex-col gap-2">
-					<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
-						Connected Relays
-					</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">
-						{relays.map((relay) => (
-							<div
-								key={relay}
-								className="flex items-center justify-between h-11"
-							>
-								<div className="inline-flex items-center gap-2 text-sm font-medium">
-									<span className="relative flex size-2">
-										<span className="absolute inline-flex w-full h-full bg-teal-400 rounded-full opacity-75 animate-ping" />
-										<span className="relative inline-flex bg-teal-500 rounded-full size-2" />
-									</span>
-									{relay}
-								</div>
-								<div>
-									<button
-										type="button"
-										onClick={() => removeRelay(relay)}
-										className="inline-flex items-center justify-center rounded-md size-7 hover:bg-black/10 dark:hover:bg-white/10"
-									>
-										<X className="size-4" />
-									</button>
-								</div>
-							</div>
-						))}
-						<div className="flex items-center h-14">
-							<div className="flex items-center w-full gap-2 mb-0">
-								<input
-									value={newRelay}
-									onChange={(e) => setNewRelay(e.target.value)}
-									name="url"
-									placeholder="wss://..."
-									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"
-								/>
-								<button
-									type="button"
-									disabled={isPending}
-									onClick={() => addNewRelay()}
-									className="inline-flex items-center justify-center w-16 px-2 text-sm font-medium text-white rounded-lg shrink-0 h-9 bg-black/20 dark:bg-white/20 hover:bg-blue-500 disabled:opacity-50"
-								>
-									<Plus className="size-5" />
-								</button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div className="flex flex-col gap-2">
-					<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
-						User Relays (NIP-65)
-					</h2>
-					<div className="flex flex-col px-3 py-2 bg-black/5 dark:bg-white/5 rounded-xl">
-						<p className="text-sm text-yellow-500">
-							Lume will automatically connect to the user's relay list, but the
-							manager function (like adding, removing, changing relay purpose)
-							is not yet available.
-						</p>
-					</div>
-					<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">
-						{relayList.read?.map((relay) => (
-							<div
-								key={relay}
-								className="flex items-center justify-between h-11"
-							>
-								<div className="text-sm font-medium">{relay}</div>
-								<div className="text-xs font-semibold">READ</div>
-							</div>
-						))}
-						{relayList.write?.map((relay) => (
-							<div
-								key={relay}
-								className="flex items-center justify-between h-11"
-							>
-								<div className="text-sm font-medium">{relay}</div>
-								<div className="text-xs font-semibold">WRITE</div>
-							</div>
-						))}
-						{relayList.both?.map((relay) => (
-							<div
-								key={relay}
-								className="flex items-center justify-between h-11"
-							>
-								<div className="text-sm font-medium">{relay}</div>
-								<div className="text-xs font-semibold">READ + WRITE</div>
-							</div>
-						))}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

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);
-		}
-	},
-});

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>
-	);
-}

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 },
-			});
-		}
-	},
-});

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>
-	);
-}

src/routes/_layout.lazy.tsx

@@ -0,0 +1,165 @@
+import { type NegentropyEvent, commands } from "@/commands.gen";
+import { cn } from "@/commons";
+import { User } from "@/components/user";
+import { LumeWindow } from "@/system";
+import { Feather, MagnifyingGlass } from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
+import { Channel } from "@tauri-apps/api/core";
+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 context = Route.useRouteContext();
+	const { data: accounts } = useQuery({
+		queryKey: ["accounts"],
+		queryFn: async () => {
+			return await commands.getAccounts();
+		},
+	});
+
+	return (
+		<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"
+			>
+				<NegentropyBadge />
+				{accounts?.map((account) => (
+					<Account key={account} pubkey={account} />
+				))}
+			</div>
+			<div
+				data-tauri-drag-region
+				className="relative z-[200] flex-1 flex items-center justify-end gap-1"
+			>
+				{accounts?.length ? (
+					<>
+						<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>
+						<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>
+					</>
+				) : null}
+				<div id="toolbar" className="inline-flex items-center gap-1" />
+			</div>
+		</div>
+	);
+}
+
+const NegentropyBadge = memo(function NegentropyBadge() {
+	const [process, setProcess] = useState<NegentropyEvent>(null);
+
+	useEffect(() => {
+		const channel = new Channel<NegentropyEvent>();
+
+		channel.onmessage = (message) => {
+			if (message.Progress.message === "Ok") {
+				setProcess(null);
+			} else {
+				setProcess(message);
+			}
+		};
+
+		(async () => {
+			await commands.runSync(channel);
+		})();
+	}, []);
+
+	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.Progress.message}
+					{process.Progress.total_event > 0
+						? ` / ${process.Progress.total_event}`
+						: null}
+				</span>
+			) : (
+				"Syncing"
+			)}
+		</div>
+	);
+});
+
+const Account = memo(function Account({ pubkey }: { pubkey: string }) {
+	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(pubkey),
+				}),
+				MenuItem.new({
+					text: "Settings",
+					action: () => LumeWindow.openSettings(pubkey),
+				}),
+				PredefinedMenuItem.new({ item: "Separator" }),
+				MenuItem.new({
+					text: "Copy Public Key",
+					action: async () => await writeText(pubkey),
+				}),
+			]);
+
+			const menu = await Menu.new({
+				items: menuItems,
+			});
+
+			await menu.popup().catch((e) => console.error(e));
+		},
+		[pubkey],
+	);
+
+	return (
+		<button type="button" onClick={(e) => showContextMenu(e)}>
+			<User.Provider pubkey={pubkey}>
+				<User.Root className="shrink-0 rounded-full">
+					<User.Avatar className="rounded-full size-7" />
+				</User.Root>
+			</User.Provider>
+		</button>
+	);
+});

src/routes/_layout.tsx

@@ -1,3 +1,3 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/$account/_app")();
+export const Route = createFileRoute("/_layout")();

src/routes/_layout/index.lazy.tsx

@@ -0,0 +1,458 @@
+import { appColumns } from "@/commons";
+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 { 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 {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { useDebouncedCallback } from "use-debounce";
+
+export const Route = createLazyFileRoute("/_layout/")({
+	component: Screen,
+});
+
+function Screen() {
+	const columns = useStore(appColumns, (state) => state);
+
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		watchDrag: false,
+		loop: false,
+	});
+
+	const scrollPrev = useCallback(() => {
+		if (emblaApi) emblaApi.scrollPrev(true);
+	}, [emblaApi]);
+
+	const scrollNext = useCallback(() => {
+		if (emblaApi) emblaApi.scrollNext(true);
+	}, [emblaApi]);
+
+	const emitScrollEvent = useCallback(() => {
+		getCurrentWindow().emit("column_scroll", {});
+	}, []);
+
+	const add = useDebouncedCallback((column: LumeColumn) => {
+		column.label = `${column.label}-${nanoid()}`; // update col label
+		appColumns.setState((prev) => [column, ...prev]);
+
+		if (emblaApi) {
+			emblaApi.scrollTo(0, true);
+		}
+	}, 150);
+
+	const remove = useDebouncedCallback((label: string) => {
+		appColumns.setState((prev) => prev.filter((t) => t.label !== label));
+	}, 150);
+
+	const move = useDebouncedCallback(
+		(label: string, direction: "left" | "right") => {
+			const newCols = [...columns];
+
+			const col = newCols.find((el) => el.label === label);
+			const colIndex = newCols.findIndex((el) => el.label === label);
+
+			newCols.splice(colIndex, 1);
+
+			if (direction === "left") newCols.splice(colIndex - 1, 0, col);
+			if (direction === "right") newCols.splice(colIndex + 1, 0, col);
+
+			appColumns.setState(() => newCols);
+		},
+		150,
+	);
+
+	const update = useDebouncedCallback((label: string, title: string) => {
+		const currentColIndex = columns.findIndex((col) => col.label === label);
+
+		const updatedCol = Object.assign({}, columns[currentColIndex]);
+		updatedCol.name = title;
+
+		const newCols = columns.slice();
+		newCols[currentColIndex] = updatedCol;
+
+		appColumns.setState(() => newCols);
+	}, 150);
+
+	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);
+			emblaApi.on("slidesChanged", emitScrollEvent);
+		}
+
+		return () => {
+			emblaApi?.off("scroll", emitScrollEvent);
+			emblaApi?.off("slidesChanged", emitScrollEvent);
+		};
+	}, [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();
+			if (data.payload.type === "add") add(data.payload.column);
+			if (data.payload.type === "remove") remove(data.payload.label);
+			if (data.payload.type === "move")
+				move(data.payload.label, data.payload.direction);
+			if (data.payload.type === "set_title")
+				update(data.payload.label, data.payload.title);
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, []);
+
+	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 (!columns.length) {
+			const prevColumns = window.localStorage.getItem("columns");
+
+			if (!prevColumns) {
+				getSystemColumns();
+			} else {
+				const parsed: LumeColumn[] = JSON.parse(prevColumns);
+				appColumns.setState(() => parsed);
+			}
+		} else {
+			window.localStorage.setItem("columns", JSON.stringify(columns));
+		}
+	}, [columns.length]);
+
+	return (
+		<div className="size-full">
+			<div ref={emblaRef} className="overflow-hidden size-full">
+				<div className="flex size-full">
+					{!columns ? (
+						<div className="size-full flex items-center justify-center">
+							<Spinner />
+						</div>
+					) : (
+						columns.map((column) => (
+							<Column key={column.label} column={column} />
+						))
+					)}
+					<div className="shrink-0 p-2 h-full w-[440px]">
+						<div className="size-full flex items-center justify-center">
+							<button
+								type="button"
+								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" />
+								Add Column
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Toolbar>
+				<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()}
+					className="inline-flex items-center justify-center rounded-full size-7 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<ArrowLeft className="size-4" />
+				</button>
+				<button
+					type="button"
+					onClick={() => scrollNext()}
+					className="inline-flex items-center justify-center rounded-full size-7 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<ArrowRight className="size-4" />
+				</button>
+			</Toolbar>
+		</div>
+	);
+}
+
+function Toolbar({ children }: { children: ReactNode[] }) {
+	const [domReady, setDomReady] = useState(false);
+
+	useLayoutEffect(() => {
+		setDomReady(true);
+	}, []);
+
+	return domReady ? (
+		// @ts-ignore, react bug ???
+		createPortal(children, document.getElementById("toolbar"))
+	) : (
+		<></>
+	);
+}
+
+/*
+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>
+  )
+}
+*/

src/routes/_layout/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/')()

src/routes/_settings.lazy.tsx

@@ -0,0 +1,111 @@
+import { cn } from '@/commons'
+import { CurrencyBtc, GearSix, HardDrives, User } from '@phosphor-icons/react'
+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('/_settings')({
+  component: Screen,
+})
+
+function Screen() {
+  const { account } = Route.useParams()
+  const { platform } = Route.useRouteContext()
+
+  return (
+    <div className="flex size-full">
+      <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',
+          platform === 'macos' ? 'pt-11' : '',
+        )}
+      >
+        <Link to="/$account/general" params={{ account }}>
+          {({ isActive }) => {
+            return (
+              <div
+                className={cn(
+                  'h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2',
+                  isActive
+                    ? 'bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20'
+                    : 'text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10',
+                )}
+              >
+                <GearSix className="size-5 shrink-0" />
+                <p className="text-sm font-medium">General</p>
+              </div>
+            )
+          }}
+        </Link>
+        <Link to="/$account/profile" params={{ account }}>
+          {({ isActive }) => {
+            return (
+              <div
+                className={cn(
+                  'h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2',
+                  isActive
+                    ? 'bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20'
+                    : 'text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10',
+                )}
+              >
+                <User className="size-5 shrink-0" />
+                <p className="text-sm font-medium">Profile</p>
+              </div>
+            )
+          }}
+        </Link>
+        <Link to="/$account/relay" params={{ account }}>
+          {({ isActive }) => {
+            return (
+              <div
+                className={cn(
+                  'h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2',
+                  isActive
+                    ? 'bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20'
+                    : 'text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10',
+                )}
+              >
+                <HardDrives className="size-5 shrink-0" />
+                <p className="text-sm font-medium">Relay</p>
+              </div>
+            )
+          }}
+        </Link>
+        <Link to="/$account/wallet" params={{ account }}>
+          {({ isActive }) => {
+            return (
+              <div
+                className={cn(
+                  'h-9 w-full inline-flex items-center gap-1.5 rounded-lg p-2',
+                  isActive
+                    ? 'bg-black/10 hover:bg-black/20 dark:bg-white/10 text-neutral-900 dark:text-neutral-100 dark:hover:bg-bg-white/20'
+                    : 'text-neutral-700 hover:bg-black/10 dark:text-neutral-300 dark:hover:bg-white/10',
+                )}
+              >
+                <CurrencyBtc className="size-5 shrink-0" />
+                <p className="text-sm font-medium">Wallet</p>
+              </div>
+            )
+          }}
+        </Link>
+      </div>
+      <ScrollArea.Root
+        type={'scroll'}
+        scrollHideDelay={300}
+        className="flex-1 overflow-hidden size-full"
+      >
+        <ScrollArea.Viewport className="relative h-full pt-12">
+          <Outlet />
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar
+          className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+          orientation="vertical"
+        >
+          <ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+        </ScrollArea.Scrollbar>
+        <ScrollArea.Corner className="bg-transparent" />
+      </ScrollArea.Root>
+    </div>
+  )
+}

src/routes/_settings/bitcoin-connect.lazy.tsx

@@ -0,0 +1,38 @@
+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('/_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>
+  )
+}

src/routes/_settings/bitcoin-connect.tsx

@@ -0,0 +1,12 @@
+import { init } from '@getalby/bitcoin-connect-react'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_settings/bitcoin-connect')({
+  beforeLoad: () => {
+    init({
+      appName: 'Lume',
+      filters: ['nwc'],
+      showBalance: true,
+    })
+  },
+})

src/routes/_settings/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/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>
+  )
+}

src/routes/_settings/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/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)
+    }
+  },
+})

src/routes/_settings/profile.lazy.tsx

@@ -0,0 +1,245 @@
+import { type Profile, commands } from '@/commands.gen'
+import { cn, upload } from '@/commons'
+import { Spinner } from '@/components'
+import { Plus } from '@phosphor-icons/react'
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { writeText } from '@tauri-apps/plugin-clipboard-manager'
+import { message } from '@tauri-apps/plugin-dialog'
+import {
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  useState,
+  useTransition,
+} from 'react'
+import { useForm } from 'react-hook-form'
+
+export const Route = createLazyFileRoute('/_settings/profile')({
+  component: Screen,
+})
+
+function Screen() {
+  const { profile } = Route.useRouteContext()
+  const { register, handleSubmit } = useForm({ defaultValues: profile })
+
+  const [isPending, startTransition] = useTransition()
+  const [picture, setPicture] = useState<string>('')
+
+  const onSubmit = (data: Profile) => {
+    startTransition(async () => {
+      const newProfile: Profile = { ...profile, ...data, picture }
+      const res = await commands.setProfile(newProfile)
+
+      if (res.status === 'error') {
+        await message(res.error, { title: 'Profile', kind: 'error' })
+      }
+
+      return
+    })
+  }
+
+  return (
+    <div className="relative flex flex-col gap-6 px-3 pb-3">
+      <div className="flex items-center flex-1 h-full gap-3">
+        <div className="relative rounded-full size-20 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
+          {profile.picture ? (
+            <img
+              src={picture || profile.picture}
+              alt="avatar"
+              loading="lazy"
+              decoding="async"
+              className="absolute inset-0 z-10 object-cover size-20 rounded-full"
+            />
+          ) : null}
+          <AvatarUploader
+            setPicture={setPicture}
+            className="absolute inset-0 z-20 flex items-center justify-center size-full text-white rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+          >
+            <Plus className="size-5" />
+          </AvatarUploader>
+        </div>
+        <div className="flex-1 flex items-center justify-between">
+          <div>
+            <div className="text-lg font-semibold">{profile.display_name}</div>
+            <div className="text-neutral-700 dark:text-neutral-300">
+              {profile.nip05}
+            </div>
+          </div>
+          <PrivkeyButton />
+        </div>
+      </div>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex flex-col gap-3 mb-0"
+      >
+        <div className="flex flex-col w-full gap-1">
+          <label
+            htmlFor="display_name"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Display Name
+          </label>
+          <input
+            name="display_name"
+            {...register('display_name')}
+            spellCheck={false}
+            className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col w-full gap-1">
+          <label
+            htmlFor="name"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Name
+          </label>
+          <input
+            name="name"
+            {...register('name')}
+            spellCheck={false}
+            className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col w-full gap-1">
+          <label
+            htmlFor="website"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Website
+          </label>
+          <input
+            name="website"
+            type="url"
+            {...register('website')}
+            spellCheck={false}
+            className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col w-full gap-1">
+          <label
+            htmlFor="banner"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Cover
+          </label>
+          <input
+            name="banner"
+            type="url"
+            {...register('banner')}
+            spellCheck={false}
+            className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col w-full gap-1">
+          <label
+            htmlFor="nip05"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            NIP-05
+          </label>
+          <input
+            name="nip05"
+            type="email"
+            {...register('nip05')}
+            spellCheck={false}
+            className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col w-full gap-1">
+          <label
+            htmlFor="lnaddress"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Lightning Address
+          </label>
+          <input
+            name="lnaddress"
+            type="email"
+            {...register('lud16')}
+            className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex items-center justify-end">
+          <button
+            type="submit"
+            disabled={isPending}
+            className="inline-flex items-center justify-center w-32 px-2 text-sm font-medium text-white bg-blue-500 rounded-lg h-9 hover:bg-blue-600 disabled:opacity-50"
+          >
+            {isPending ? <Spinner className="size-4" /> : 'Update Profile'}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function PrivkeyButton() {
+  const { account } = Route.useParams()
+
+  const [isPending, startTransition] = useTransition()
+  const [isCopy, setIsCopy] = useState(false)
+
+  const copyPrivateKey = () => {
+    startTransition(async () => {
+      const res = await commands.getPrivateKey(account)
+
+      if (res.status === 'ok') {
+        await writeText(res.data)
+        setIsCopy(true)
+      } else {
+        await message(res.error, { kind: 'error' })
+        return
+      }
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => copyPrivateKey()}
+      className="inline-flex items-center justify-center px-3 text-sm font-medium text-blue-500 bg-blue-100 border border-blue-300 rounded-full h-7 hover:bg-blue-200 dark:bg-blue-900 dark:border-blue-800 dark:text-blue-300 dark:hover:bg-blue-800"
+    >
+      {isPending ? (
+        <Spinner className="size-4" />
+      ) : isCopy ? (
+        'Copied'
+      ) : (
+        'Copy Private Key'
+      )}
+    </button>
+  )
+}
+
+function AvatarUploader({
+  setPicture,
+  children,
+  className,
+}: {
+  setPicture: Dispatch<SetStateAction<string>>
+  children: ReactNode
+  className?: string
+}) {
+  const [isPending, startTransition] = useTransition()
+
+  const uploadAvatar = () => {
+    startTransition(async () => {
+      try {
+        const image = await upload()
+        setPicture(image)
+      } catch (e) {
+        await message(String(e))
+        return
+      }
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => uploadAvatar()}
+      className={cn('size-4', className)}
+    >
+      {isPending ? <Spinner className="size-4" /> : children}
+    </button>
+  )
+}

src/routes/_settings/profile.tsx

@@ -0,0 +1,15 @@
+import { type Profile, commands } from '@/commands.gen'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_settings/profile')({
+  beforeLoad: async ({ params }) => {
+    const res = await commands.getProfile(params.account)
+
+    if (res.status === 'ok') {
+      const profile: Profile = JSON.parse(res.data)
+      return { profile }
+    } else {
+      throw new Error(res.error)
+    }
+  },
+})

src/routes/_settings/relay.lazy.tsx

@@ -0,0 +1,155 @@
+import { commands } from '@/commands.gen'
+import { Plus, X } from '@phosphor-icons/react'
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { message } from '@tauri-apps/plugin-dialog'
+import { useEffect, useState, useTransition } from 'react'
+
+export const Route = createLazyFileRoute('/_settings/relay')({
+  component: Screen,
+})
+
+function Screen() {
+  const { relayList } = Route.useRouteContext()
+
+  const [relays, setRelays] = useState<string[]>([])
+  const [newRelay, setNewRelay] = useState('')
+  const [isPending, startTransition] = useTransition()
+
+  const removeRelay = async (relay: string) => {
+    const res = await commands.removeRelay(relay)
+
+    if (res.status === 'ok') {
+      return res.data
+    } else {
+      throw new Error(res.error)
+    }
+  }
+
+  const addNewRelay = () => {
+    startTransition(async () => {
+      try {
+        let url = newRelay
+
+        if (!url.startsWith('wss://')) {
+          url = `wss://${url}`
+        }
+
+        const relay = new URL(url)
+        const res = await commands.connectRelay(relay.toString())
+
+        if (res.status === 'ok') {
+          setRelays((prev) => [...prev, newRelay])
+          setNewRelay('')
+        } else {
+          await message(res.error, { title: 'Relay', kind: 'error' })
+          return
+        }
+      } catch {
+        await message('URL is not valid.', { kind: 'error' })
+        return
+      }
+    })
+  }
+
+  useEffect(() => {
+    setRelays(relayList.connected)
+  }, [relayList])
+
+  return (
+    <div className="w-full px-3 pb-3">
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-2">
+          <h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            Connected Relays
+          </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">
+            {relays.map((relay) => (
+              <div
+                key={relay}
+                className="flex items-center justify-between h-11"
+              >
+                <div className="inline-flex items-center gap-2 text-sm font-medium">
+                  <span className="relative flex size-2">
+                    <span className="absolute inline-flex w-full h-full bg-teal-400 rounded-full opacity-75 animate-ping" />
+                    <span className="relative inline-flex bg-teal-500 rounded-full size-2" />
+                  </span>
+                  {relay}
+                </div>
+                <div>
+                  <button
+                    type="button"
+                    onClick={() => removeRelay(relay)}
+                    className="inline-flex items-center justify-center rounded-md size-7 hover:bg-black/10 dark:hover:bg-white/10"
+                  >
+                    <X className="size-4" />
+                  </button>
+                </div>
+              </div>
+            ))}
+            <div className="flex items-center h-14">
+              <div className="flex items-center w-full gap-2 mb-0">
+                <input
+                  value={newRelay}
+                  onChange={(e) => setNewRelay(e.target.value)}
+                  name="url"
+                  placeholder="wss://..."
+                  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"
+                />
+                <button
+                  type="button"
+                  disabled={isPending}
+                  onClick={() => addNewRelay()}
+                  className="inline-flex items-center justify-center w-16 px-2 text-sm font-medium text-white rounded-lg shrink-0 h-9 bg-black/20 dark:bg-white/20 hover:bg-blue-500 disabled:opacity-50"
+                >
+                  <Plus className="size-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
+            User Relays (NIP-65)
+          </h2>
+          <div className="flex flex-col px-3 py-2 bg-black/5 dark:bg-white/5 rounded-xl">
+            <p className="text-sm text-yellow-500">
+              Lume will automatically connect to the user's relay list, but the
+              manager function (like adding, removing, changing relay purpose)
+              is not yet available.
+            </p>
+          </div>
+          <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">
+            {relayList.read?.map((relay) => (
+              <div
+                key={relay}
+                className="flex items-center justify-between h-11"
+              >
+                <div className="text-sm font-medium">{relay}</div>
+                <div className="text-xs font-semibold">READ</div>
+              </div>
+            ))}
+            {relayList.write?.map((relay) => (
+              <div
+                key={relay}
+                className="flex items-center justify-between h-11"
+              >
+                <div className="text-sm font-medium">{relay}</div>
+                <div className="text-xs font-semibold">WRITE</div>
+              </div>
+            ))}
+            {relayList.both?.map((relay) => (
+              <div
+                key={relay}
+                className="flex items-center justify-between h-11"
+              >
+                <div className="text-sm font-medium">{relay}</div>
+                <div className="text-xs font-semibold">READ + WRITE</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/routes/_settings/relay.tsx

@@ -0,0 +1,15 @@
+import { commands } from '@/commands.gen'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_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)
+    }
+  },
+})

src/routes/_settings/wallet.lazy.tsx

@@ -0,0 +1,55 @@
+import { commands } from '@/commands.gen'
+import { createLazyFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/_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>
+  )
+}

src/routes/_settings/wallet.tsx

@@ -0,0 +1,21 @@
+import { commands } from '@/commands.gen'
+import { getBitcoinDisplayValues } from '@/commons'
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_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 },
+      })
+    }
+  },
+})

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,
 		};

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: [label],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
 			const until = pageParam > 0 ? pageParam.toString() : undefined;

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: ["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("New group", "/set-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: ["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("New interest", "/set-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>
+	);
+}

src/routes/columns/_layout/newsfeed.$id.lazy.tsx

@@ -0,0 +1,229 @@
+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 * as ScrollArea from '@radix-ui/react-scroll-area'
+import { type InfiniteData, 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 { Virtualizer } from 'virtua'
+
+type Payload = {
+  raw: string
+  parsed: Meta
+}
+
+export const Route = createLazyFileRoute('/columns/_layout/newsfeed/$id')({
+  component: Screen,
+})
+
+export function Screen() {
+  const contacts = Route.useLoaderData()
+  const { label } = Route.useSearch()
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+  } = useInfiniteQuery({
+    queryKey: [label],
+    initialPageParam: 0,
+    queryFn: async ({ pageParam }: { pageParam: number }) => {
+      const until = pageParam > 0 ? pageParam.toString() : undefined
+      const res = await commands.getAllEventsByAuthors(contacts, until)
+
+      if (res.status === 'error') {
+        throw new Error(res.error)
+      }
+
+      return toLumeEvents(res.data)
+    },
+    getNextPageParam: (lastPage) => lastPage?.at?.(-1)?.created_at - 1,
+    select: (data) => data?.pages.flat(),
+    enabled: contacts?.length > 0,
+  })
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  const renderItem = useCallback(
+    (event: LumeEvent) => {
+      if (!event) return
+      switch (event.kind) {
+        case Kind.Repost:
+          return (
+            <RepostNote
+              key={event.id}
+              event={event}
+              className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
+            />
+          )
+        default:
+          return (
+            <TextNote
+              key={event.id}
+              event={event}
+              className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
+            />
+          )
+      }
+    },
+    [data],
+  )
+
+  return (
+    <ScrollArea.Root
+      type={'scroll'}
+      scrollHideDelay={300}
+      className="overflow-hidden size-full px-3"
+    >
+      <ScrollArea.Viewport
+        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">
+              <div 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">
+                <Spinner className="size-4" />
+                Getting new notes...
+              </div>
+            </div>
+          ) : null}
+          {isLoading ? (
+            <div className="flex items-center justify-center w-full h-16 gap-2">
+              <Spinner className="size-4" />
+              <span className="text-sm font-medium">Loading...</span>
+            </div>
+          ) : !data.length ? (
+            <div className="mb-3 flex items-center justify-center h-20 text-sm">
+              🎉 Yo. You're catching up on all latest notes.
+            </div>
+          ) : (
+            data.map((item) => renderItem(item))
+          )}
+          {hasNextPage ? (
+            <div>
+              <button
+                type="button"
+                onClick={() => fetchNextPage()}
+                disabled={isFetchingNextPage || isLoading}
+                className="inline-flex items-center justify-center w-full gap-2 px-3 text-sm font-medium text-blue-500 h-11 focus:outline-none"
+              >
+                {isFetchingNextPage ? (
+                  <Spinner className="size-4" />
+                ) : (
+                  <>
+                    <ArrowDown className="size-4" />
+                    Load more
+                  </>
+                )}
+              </button>
+            </div>
+          ) : null}
+        </Virtualizer>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar
+        className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+        orientation="vertical"
+      >
+        <ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+      </ScrollArea.Scrollbar>
+      <ScrollArea.Corner className="bg-transparent" />
+    </ScrollArea.Root>
+  )
+}
+
+const Listener = memo(function Listerner() {
+  const { queryClient } = Route.useRouteContext()
+  const { label } = Route.useSearch()
+
+  const [lumeEvents, setLumeEvents] = useState<LumeEvent[]>([])
+  const [isPending, startTransition] = useTransition()
+
+  const queryStatus = queryClient.getQueryState([label])
+
+  const pushNewEvents = () => {
+    startTransition(() => {
+      queryClient.setQueryData(
+        [label],
+        (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
+})

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/newsfeed")({
-	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;

src/routes/columns/_layout/newsfeed.lazy.tsx

@@ -1,229 +0,0 @@
-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 * as ScrollArea from "@radix-ui/react-scroll-area";
-import { type InfiniteData, 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 { Virtualizer } from "virtua";
-
-type Payload = {
-	raw: string;
-	parsed: Meta;
-};
-
-export const Route = createLazyFileRoute("/columns/_layout/newsfeed")({
-	component: Screen,
-});
-
-export function Screen() {
-	const contacts = Route.useLoaderData();
-	const { label, account } = Route.useSearch();
-	const {
-		data,
-		isLoading,
-		isFetching,
-		isFetchingNextPage,
-		hasNextPage,
-		fetchNextPage,
-	} = useInfiniteQuery({
-		queryKey: [label, account],
-		initialPageParam: 0,
-		queryFn: async ({ pageParam }: { pageParam: number }) => {
-			const until = pageParam > 0 ? pageParam.toString() : undefined;
-			const res = await commands.getAllEventsByAuthors(contacts, until);
-
-			if (res.status === "error") {
-				throw new Error(res.error);
-			}
-
-			return toLumeEvents(res.data);
-		},
-		getNextPageParam: (lastPage) => lastPage?.at?.(-1)?.created_at - 1,
-		select: (data) => data?.pages.flat(),
-		enabled: contacts?.length > 0,
-	});
-
-	const ref = useRef<HTMLDivElement>(null);
-
-	const renderItem = useCallback(
-		(event: LumeEvent) => {
-			if (!event) return;
-			switch (event.kind) {
-				case Kind.Repost:
-					return (
-						<RepostNote
-							key={event.id}
-							event={event}
-							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
-						/>
-					);
-				default:
-					return (
-						<TextNote
-							key={event.id}
-							event={event}
-							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
-						/>
-					);
-			}
-		},
-		[data],
-	);
-
-	return (
-		<ScrollArea.Root
-			type={"scroll"}
-			scrollHideDelay={300}
-			className="overflow-hidden size-full px-3"
-		>
-			<ScrollArea.Viewport
-				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">
-							<div 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">
-								<Spinner className="size-4" />
-								Getting new notes...
-							</div>
-						</div>
-					) : null}
-					{isLoading ? (
-						<div className="flex items-center justify-center w-full h-16 gap-2">
-							<Spinner className="size-4" />
-							<span className="text-sm font-medium">Loading...</span>
-						</div>
-					) : !data.length ? (
-						<div className="mb-3 flex items-center justify-center h-20 text-sm">
-							🎉 Yo. You're catching up on all latest notes.
-						</div>
-					) : (
-						data.map((item) => renderItem(item))
-					)}
-					{hasNextPage ? (
-						<div>
-							<button
-								type="button"
-								onClick={() => fetchNextPage()}
-								disabled={isFetchingNextPage || isLoading}
-								className="inline-flex items-center justify-center w-full gap-2 px-3 text-sm font-medium text-blue-500 h-11 focus:outline-none"
-							>
-								{isFetchingNextPage ? (
-									<Spinner className="size-4" />
-								) : (
-									<>
-										<ArrowDown className="size-4" />
-										Load more
-									</>
-								)}
-							</button>
-						</div>
-					) : null}
-				</Virtualizer>
-			</ScrollArea.Viewport>
-			<ScrollArea.Scrollbar
-				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
-				orientation="vertical"
-			>
-				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
-			</ScrollArea.Scrollbar>
-			<ScrollArea.Corner className="bg-transparent" />
-		</ScrollArea.Root>
-	);
-}
-
-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;
-});

src/routes/columns/_layout/notification.$id.lazy.tsx

@@ -0,0 +1,331 @@
+import { commands } from '@/commands.gen'
+import { decodeZapInvoice, formatCreatedAt } from '@/commons'
+import { Note, RepostIcon, Spinner, User } from '@/components'
+import { LumeEvent, LumeWindow, useEvent } from '@/system'
+import { Kind, type NostrEvent } from '@/types'
+import { Info } from '@phosphor-icons/react'
+import * as ScrollArea from '@radix-ui/react-scroll-area'
+import * as Tabs from '@radix-ui/react-tabs'
+import { useQuery } from '@tanstack/react-query'
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { type ReactNode, useEffect, useMemo, useRef } from 'react'
+import { Virtualizer } from 'virtua'
+
+export const Route = createLazyFileRoute('/columns/_layout/notification/$id')({
+  component: Screen,
+})
+
+function Screen() {
+  const { queryClient } = Route.useRouteContext()
+  const { isLoading, data } = useQuery({
+    queryKey: ['notification'],
+    queryFn: async () => {
+      const res = await commands.getNotifications()
+
+      if (res.status === 'error') {
+        throw new Error(res.error)
+      }
+
+      const data: NostrEvent[] = res.data.map((item) => JSON.parse(item))
+      const events = data.map((ev) => new LumeEvent(ev))
+
+      return events
+    },
+    select: (events) => {
+      const zaps = new Map<string, LumeEvent[]>()
+      const reactions = new Map<string, LumeEvent[]>()
+
+      const texts = events.filter((ev) => ev.kind === Kind.Text)
+      const zapEvents = events.filter((ev) => ev.kind === Kind.ZapReceipt)
+      const reactEvents = events.filter(
+        (ev) => ev.kind === Kind.Repost || ev.kind === Kind.Reaction,
+      )
+
+      for (const event of reactEvents) {
+        const rootId = event.tags.filter((tag) => tag[0] === 'e')[0]?.[1]
+
+        if (rootId) {
+          if (reactions.has(rootId)) {
+            reactions.get(rootId).push(event)
+          } else {
+            reactions.set(rootId, [event])
+          }
+        }
+      }
+
+      for (const event of zapEvents) {
+        const rootId = event.tags.filter((tag) => tag[0] === 'e')[0]?.[1]
+
+        if (rootId) {
+          if (zaps.has(rootId)) {
+            zaps.get(rootId).push(event)
+          } else {
+            zaps.set(rootId, [event])
+          }
+        }
+      }
+
+      return { texts, zaps, reactions }
+    },
+    refetchOnWindowFocus: false,
+  })
+
+  useEffect(() => {
+    const unlisten = getCurrentWindow().listen('event', async (data) => {
+      const event: LumeEvent = JSON.parse(data.payload as string)
+      await queryClient.setQueryData(['notification'], (data: LumeEvent[]) => [
+        event,
+        ...data,
+      ])
+    })
+
+    return () => {
+      unlisten.then((f) => f())
+    }
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div className="size-full flex items-center justify-center">
+        <Spinner />
+      </div>
+    )
+  }
+
+  return (
+    <div className="px-3 h-full overflow-y-auto">
+      <Tabs.Root
+        defaultValue="replies"
+        className="flex flex-col 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"
+      >
+        <Tabs.List className="h-11 shrink-0 flex items-center">
+          <Tabs.Trigger
+            className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+            value="replies"
+          >
+            Replies
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+            value="reactions"
+          >
+            Reactions
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+            value="zaps"
+          >
+            Zaps
+          </Tabs.Trigger>
+        </Tabs.List>
+        <ScrollArea.Root
+          type={'scroll'}
+          scrollHideDelay={300}
+          className="min-h-0 flex-1 overflow-x-hidden"
+        >
+          <Tab value="replies">
+            {data.texts.map((event) => (
+              <TextNote key={event.id} event={event} />
+            ))}
+          </Tab>
+          <Tab value="reactions">
+            {[...data.reactions.entries()].map(([root, events]) => (
+              <div
+                key={root}
+                className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+              >
+                <div className="flex flex-col flex-1 min-w-0 gap-2">
+                  <div className="flex items-center gap-2 pb-2">
+                    <RootNote id={root} />
+                  </div>
+                  <div className="flex flex-wrap items-center gap-3">
+                    {events.map((event) => (
+                      <User.Provider key={event.id} pubkey={event.pubkey}>
+                        <User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
+                          <User.Avatar className="flex-1 rounded-full size-6" />
+                          <div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
+                            {event.kind === Kind.Reaction ? (
+                              event.content === '+' ? (
+                                '👍'
+                              ) : (
+                                event.content
+                              )
+                            ) : (
+                              <RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
+                            )}
+                          </div>
+                        </User.Root>
+                      </User.Provider>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </Tab>
+          <Tab value="zaps">
+            {[...data.zaps.entries()].map(([root, events]) => (
+              <div
+                key={root}
+                className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+              >
+                <div className="flex flex-col flex-1 min-w-0 gap-2">
+                  <div className="flex items-center gap-2 pb-2">
+                    <RootNote id={root} />
+                  </div>
+                  <div className="flex flex-wrap items-center gap-3">
+                    {events.map((event) => (
+                      <ZapReceipt key={event.id} event={event} />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </Tab>
+          <ScrollArea.Scrollbar
+            className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+            orientation="vertical"
+          >
+            <ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+          </ScrollArea.Scrollbar>
+          <ScrollArea.Corner className="bg-transparent" />
+        </ScrollArea.Root>
+      </Tabs.Root>
+    </div>
+  )
+}
+
+function Tab({ value, children }: { value: string; children: ReactNode[] }) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  return (
+    <Tabs.Content value={value} className="size-full">
+      <ScrollArea.Viewport ref={ref} className="h-full">
+        <Virtualizer scrollRef={ref}>{children}</Virtualizer>
+      </ScrollArea.Viewport>
+    </Tabs.Content>
+  )
+}
+
+function RootNote({ id }: { id: string }) {
+  const { isLoading, isError, data } = useEvent(id)
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center pb-2 mb-2">
+        <div className="rounded-full size-8 shrink-0 bg-black/20 dark:bg-white/20 animate-pulse" />
+        <div className="w-2/3 h-4 rounded-md animate-pulse bg-black/20 dark:bg-white/20" />
+      </div>
+    )
+  }
+
+  if (isError || !data) {
+    return (
+      <div className="flex items-center gap-2">
+        <div className="inline-flex items-center justify-center text-white bg-red-500 rounded-full size-8 shrink-0">
+          <Info className="size-5" />
+        </div>
+        <p className="text-sm text-red-500">
+          Event not found with your current relay set
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <Note.Provider event={data}>
+      <Note.Root className="flex items-center gap-2">
+        <User.Provider pubkey={data.pubkey}>
+          <User.Root className="shrink-0">
+            <User.Avatar className="rounded-full size-8" />
+          </User.Root>
+        </User.Provider>
+        <div className="line-clamp-1">{data.content}</div>
+      </Note.Root>
+    </Note.Provider>
+  )
+}
+
+function TextNote({ event }: { event: LumeEvent }) {
+  const pTags = event.tags
+    .filter((tag) => tag[0] === 'p')
+    .map((tag) => tag[1])
+    .slice(0, 3)
+
+  return (
+    <button
+      type="button"
+      onClick={() => LumeWindow.openEvent(event)}
+      className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+    >
+      <Note.Provider event={event}>
+        <Note.Root className="flex flex-col">
+          <User.Provider pubkey={event.pubkey}>
+            <User.Root className="inline-flex items-center gap-2">
+              <User.Avatar className="rounded-full size-9" />
+              <div className="flex flex-col flex-1">
+                <div className="flex items-baseline justify-between w-full">
+                  <User.Name className="text-sm font-semibold leading-tight" />
+                  <span className="text-sm leading-tight text-black/50 dark:text-white/50">
+                    {formatCreatedAt(event.created_at)}
+                  </span>
+                </div>
+                <div className="inline-flex items-baseline gap-1 text-xs">
+                  <span className="leading-tight text-black/50 dark:text-white/50">
+                    Reply to:
+                  </span>
+                  <div className="inline-flex items-baseline gap-1">
+                    {[...new Set(pTags)].map((replyTo) => (
+                      <User.Provider key={replyTo} pubkey={replyTo}>
+                        <User.Root>
+                          <User.Name className="font-medium leading-tight" />
+                        </User.Root>
+                      </User.Provider>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </User.Root>
+          </User.Provider>
+          <div className="flex gap-2">
+            <div className="w-9 shrink-0" />
+            <div className="line-clamp-1 text-start">{event.content}</div>
+          </div>
+        </Note.Root>
+      </Note.Provider>
+    </button>
+  )
+}
+
+function ZapReceipt({ event }: { event: LumeEvent }) {
+  const amount = useMemo(
+    () => decodeZapInvoice(event.tags).bitcoinFormatted ?? '0',
+    [event.id],
+  )
+  const sender = useMemo(
+    () => event.tags.find((tag) => tag[0] === 'P')?.[1],
+    [event.id],
+  )
+
+  if (!sender) {
+    return (
+      <div className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
+        <div className="rounded-full size-6 bg-blue-500" />
+        <div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
+          ₿ {amount}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <User.Provider pubkey={sender}>
+      <User.Root className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
+        <User.Avatar className="rounded-full size-6" />
+        <div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
+          ₿ {amount}
+        </div>
+      </User.Root>
+    </User.Provider>
+  )
+}

src/routes/columns/_layout/notification.lazy.tsx

@@ -1,336 +0,0 @@
-import { commands } from "@/commands.gen";
-import { decodeZapInvoice, formatCreatedAt } from "@/commons";
-import { Note, RepostIcon, Spinner, User } from "@/components";
-import { LumeEvent, LumeWindow, useEvent } from "@/system";
-import { Kind, type NostrEvent } from "@/types";
-import { Info } from "@phosphor-icons/react";
-import * as ScrollArea from "@radix-ui/react-scroll-area";
-import * as Tabs from "@radix-ui/react-tabs";
-import { useQuery } from "@tanstack/react-query";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { getCurrentWindow } from "@tauri-apps/api/window";
-import { nip19 } from "nostr-tools";
-import { type ReactNode, useEffect, useMemo, useRef } from "react";
-import { Virtualizer } from "virtua";
-
-export const Route = createLazyFileRoute("/columns/_layout/notification")({
-	component: Screen,
-});
-
-function Screen() {
-	const { account } = Route.useSearch();
-	const { queryClient } = Route.useRouteContext();
-	const { isLoading, data } = useQuery({
-		queryKey: ["notification", account],
-		queryFn: async () => {
-			const res = await commands.getNotifications();
-
-			if (res.status === "error") {
-				throw new Error(res.error);
-			}
-
-			const data: NostrEvent[] = res.data.map((item) => JSON.parse(item));
-			const events = data.map((ev) => new LumeEvent(ev));
-
-			return events;
-		},
-		select: (events) => {
-			const zaps = new Map<string, LumeEvent[]>();
-			const reactions = new Map<string, LumeEvent[]>();
-			const hex = nip19.decode(account).data;
-
-			const texts = events.filter(
-				(ev) => ev.kind === Kind.Text && ev.pubkey !== hex,
-			);
-			const zapEvents = events.filter((ev) => ev.kind === Kind.ZapReceipt);
-			const reactEvents = events.filter(
-				(ev) => ev.kind === Kind.Repost || ev.kind === Kind.Reaction,
-			);
-
-			for (const event of reactEvents) {
-				const rootId = event.tags.filter((tag) => tag[0] === "e")[0]?.[1];
-
-				if (rootId) {
-					if (reactions.has(rootId)) {
-						reactions.get(rootId).push(event);
-					} else {
-						reactions.set(rootId, [event]);
-					}
-				}
-			}
-
-			for (const event of zapEvents) {
-				const rootId = event.tags.filter((tag) => tag[0] === "e")[0]?.[1];
-
-				if (rootId) {
-					if (zaps.has(rootId)) {
-						zaps.get(rootId).push(event);
-					} else {
-						zaps.set(rootId, [event]);
-					}
-				}
-			}
-
-			return { texts, zaps, reactions };
-		},
-		refetchOnWindowFocus: false,
-	});
-
-	useEffect(() => {
-		const unlisten = getCurrentWindow().listen("event", async (data) => {
-			const event: LumeEvent = JSON.parse(data.payload as string);
-			await queryClient.setQueryData(
-				["notification", account],
-				(data: LumeEvent[]) => [event, ...data],
-			);
-		});
-
-		return () => {
-			unlisten.then((f) => f());
-		};
-	}, [account]);
-
-	if (isLoading) {
-		return (
-			<div className="size-full flex items-center justify-center">
-				<Spinner />
-			</div>
-		);
-	}
-
-	return (
-		<div className="px-3 h-full overflow-y-auto">
-			<Tabs.Root
-				defaultValue="replies"
-				className="flex flex-col 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"
-			>
-				<Tabs.List className="h-11 shrink-0 flex items-center">
-					<Tabs.Trigger
-						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
-						value="replies"
-					>
-						Replies
-					</Tabs.Trigger>
-					<Tabs.Trigger
-						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
-						value="reactions"
-					>
-						Reactions
-					</Tabs.Trigger>
-					<Tabs.Trigger
-						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
-						value="zaps"
-					>
-						Zaps
-					</Tabs.Trigger>
-				</Tabs.List>
-				<ScrollArea.Root
-					type={"scroll"}
-					scrollHideDelay={300}
-					className="min-h-0 flex-1 overflow-x-hidden"
-				>
-					<Tab value="replies">
-						{data.texts.map((event, index) => (
-							<TextNote key={event.id + index} event={event} />
-						))}
-					</Tab>
-					<Tab value="reactions">
-						{[...data.reactions.entries()].map(([root, events]) => (
-							<div
-								key={root}
-								className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
-							>
-								<div className="flex flex-col flex-1 min-w-0 gap-2">
-									<div className="flex items-center gap-2 pb-2">
-										<RootNote id={root} />
-									</div>
-									<div className="flex flex-wrap items-center gap-3">
-										{events.map((event) => (
-											<User.Provider key={event.id} pubkey={event.pubkey}>
-												<User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
-													<User.Avatar className="flex-1 rounded-full size-6" />
-													<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
-														{event.kind === Kind.Reaction ? (
-															event.content === "+" ? (
-																"👍"
-															) : (
-																event.content
-															)
-														) : (
-															<RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
-														)}
-													</div>
-												</User.Root>
-											</User.Provider>
-										))}
-									</div>
-								</div>
-							</div>
-						))}
-					</Tab>
-					<Tab value="zaps">
-						{[...data.zaps.entries()].map(([root, events]) => (
-							<div
-								key={root}
-								className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
-							>
-								<div className="flex flex-col flex-1 min-w-0 gap-2">
-									<div className="flex items-center gap-2 pb-2">
-										<RootNote id={root} />
-									</div>
-									<div className="flex flex-wrap items-center gap-3">
-										{events.map((event) => (
-											<ZapReceipt key={event.id} event={event} />
-										))}
-									</div>
-								</div>
-							</div>
-						))}
-					</Tab>
-					<ScrollArea.Scrollbar
-						className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
-						orientation="vertical"
-					>
-						<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
-					</ScrollArea.Scrollbar>
-					<ScrollArea.Corner className="bg-transparent" />
-				</ScrollArea.Root>
-			</Tabs.Root>
-		</div>
-	);
-}
-
-function Tab({ value, children }: { value: string; children: ReactNode[] }) {
-	const ref = useRef<HTMLDivElement>(null);
-
-	return (
-		<Tabs.Content value={value} className="size-full">
-			<ScrollArea.Viewport ref={ref} className="h-full">
-				<Virtualizer scrollRef={ref}>{children}</Virtualizer>
-			</ScrollArea.Viewport>
-		</Tabs.Content>
-	);
-}
-
-function RootNote({ id }: { id: string }) {
-	const { isLoading, isError, data } = useEvent(id);
-
-	if (isLoading) {
-		return (
-			<div className="flex items-center pb-2 mb-2">
-				<div className="rounded-full size-8 shrink-0 bg-black/20 dark:bg-white/20 animate-pulse" />
-				<div className="w-2/3 h-4 rounded-md animate-pulse bg-black/20 dark:bg-white/20" />
-			</div>
-		);
-	}
-
-	if (isError || !data) {
-		return (
-			<div className="flex items-center gap-2">
-				<div className="inline-flex items-center justify-center text-white bg-red-500 rounded-full size-8 shrink-0">
-					<Info className="size-5" />
-				</div>
-				<p className="text-sm text-red-500">
-					Event not found with your current relay set
-				</p>
-			</div>
-		);
-	}
-
-	return (
-		<Note.Provider event={data}>
-			<Note.Root className="flex items-center gap-2">
-				<User.Provider pubkey={data.pubkey}>
-					<User.Root className="shrink-0">
-						<User.Avatar className="rounded-full size-8" />
-					</User.Root>
-				</User.Provider>
-				<div className="line-clamp-1">{data.content}</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-}
-
-function TextNote({ event }: { event: LumeEvent }) {
-	const pTags = event.tags
-		.filter((tag) => tag[0] === "p")
-		.map((tag) => tag[1])
-		.slice(0, 3);
-
-	return (
-		<button
-			type="button"
-			onClick={() => LumeWindow.openEvent(event)}
-			className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
-		>
-			<Note.Provider event={event}>
-				<Note.Root className="flex flex-col">
-					<User.Provider pubkey={event.pubkey}>
-						<User.Root className="inline-flex items-center gap-2">
-							<User.Avatar className="rounded-full size-9" />
-							<div className="flex flex-col flex-1">
-								<div className="flex items-baseline justify-between w-full">
-									<User.Name className="text-sm font-semibold leading-tight" />
-									<span className="text-sm leading-tight text-black/50 dark:text-white/50">
-										{formatCreatedAt(event.created_at)}
-									</span>
-								</div>
-								<div className="inline-flex items-baseline gap-1 text-xs">
-									<span className="leading-tight text-black/50 dark:text-white/50">
-										Reply to:
-									</span>
-									<div className="inline-flex items-baseline gap-1">
-										{[...new Set(pTags)].map((replyTo) => (
-											<User.Provider key={replyTo} pubkey={replyTo}>
-												<User.Root>
-													<User.Name className="font-medium leading-tight" />
-												</User.Root>
-											</User.Provider>
-										))}
-									</div>
-								</div>
-							</div>
-						</User.Root>
-					</User.Provider>
-					<div className="flex gap-2">
-						<div className="w-9 shrink-0" />
-						<div className="line-clamp-1 text-start">{event.content}</div>
-					</div>
-				</Note.Root>
-			</Note.Provider>
-		</button>
-	);
-}
-
-function ZapReceipt({ event }: { event: LumeEvent }) {
-	const amount = useMemo(
-		() => decodeZapInvoice(event.tags).bitcoinFormatted ?? "0",
-		[event.id],
-	);
-	const sender = useMemo(
-		() => event.tags.find((tag) => tag[0] === "P")?.[1],
-		[event.id],
-	);
-
-	if (!sender) {
-		return (
-			<div className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
-				<div className="rounded-full size-6 bg-blue-500" />
-				<div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
-					₿ {amount}
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<User.Provider pubkey={sender}>
-			<User.Root className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
-				<User.Avatar className="rounded-full size-6" />
-				<div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
-					₿ {amount}
-				</div>
-			</User.Root>
-		</User.Provider>
-	);
-}

src/routes/columns/_layout/stories.$id.lazy.tsx

@@ -0,0 +1,240 @@
+import { commands } from '@/commands.gen'
+import { replyTime, toLumeEvents } from '@/commons'
+import { Note, Spinner, User } from '@/components'
+import { Hashtag } from '@/components/note/mentions/hashtag'
+import { MentionUser } from '@/components/note/mentions/user'
+import { type LumeEvent, LumeWindow } from '@/system'
+import { Kind } from '@/types'
+import { ArrowRight } from '@phosphor-icons/react'
+import * as ScrollArea from '@radix-ui/react-scroll-area'
+import { useQuery } from '@tanstack/react-query'
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { nip19 } from 'nostr-tools'
+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/$id')({
+  component: Screen,
+})
+
+function Screen() {
+  const contacts = Route.useLoaderData()
+  const ref = useRef<HTMLDivElement>(null)
+
+  return (
+    <ScrollArea.Root
+      type={'scroll'}
+      scrollHideDelay={300}
+      className="overflow-hidden size-full"
+    >
+      <ScrollArea.Viewport ref={ref} className="relative h-full px-3 pb-3">
+        <Virtualizer scrollRef={ref} overscan={0}>
+          {!contacts ? (
+            <div className="w-full h-24 flex items-center justify-center">
+              <Spinner className="size-4" />
+            </div>
+          ) : (
+            contacts.map((contact) => (
+              <StoryItem key={contact} contact={contact} />
+            ))
+          )}
+        </Virtualizer>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar
+        className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+        orientation="vertical"
+      >
+        <ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+      </ScrollArea.Scrollbar>
+      <ScrollArea.Corner className="bg-transparent" />
+    </ScrollArea.Root>
+  )
+}
+
+function StoryItem({ contact }: { contact: string }) {
+  const {
+    isLoading,
+    isError,
+    error,
+    data: events,
+  } = useQuery({
+    queryKey: ['stories', contact],
+    queryFn: async () => {
+      const res = await commands.getAllEventsByAuthor(contact, 10)
+
+      if (res.status === 'ok') {
+        const data = toLumeEvents(res.data)
+        return data
+      } else {
+        throw new Error(res.error)
+      }
+    },
+    select: (data) => data.filter((ev) => ev.kind === Kind.Text),
+    refetchOnWindowFocus: false,
+  })
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  return (
+    <div className="mb-3 flex flex-col w-full h-[300px] bg-white dark:bg-black rounded-xl border-[.5px] border-neutral-300 dark:border-neutral-700">
+      <div className="h-12 shrink-0 px-2 flex items-center justify-between border-b border-neutral-100 dark:border-white/5">
+        <User.Provider pubkey={contact}>
+          <User.Root className="inline-flex items-center gap-2">
+            <User.Avatar className="size-8 rounded-full" />
+            <User.Name className="text-sm font-medium" />
+          </User.Root>
+        </User.Provider>
+        <div>
+          <button
+            type="button"
+            onClick={() => LumeWindow.openProfile(contact)}
+            className="h-7 w-max px-2.5 inline-flex gap-1 items-center justify-center rounded-full text-sm font-medium hover:bg-neutral-100 dark:hover:bg-white/20"
+          >
+            Open
+            <ArrowRight className="size-3" weight="bold" />
+          </button>
+        </div>
+      </div>
+      <ScrollArea.Root
+        type={'scroll'}
+        scrollHideDelay={300}
+        className="flex-1 min-h-0 overflow-hidden size-full"
+      >
+        <ScrollArea.Viewport ref={ref} className="relative h-full px-2 pt-2">
+          <Virtualizer scrollRef={ref} overscan={0}>
+            {isLoading ? (
+              <div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
+                <Spinner className="size-4" />
+              </div>
+            ) : isError ? (
+              <div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
+                {error.message}
+              </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.
+              </div>
+            ) : (
+              events.map((event) => <StoryEvent key={event.id} event={event} />)
+            )}
+          </Virtualizer>
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar
+          className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+          orientation="vertical"
+        >
+          <ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+        </ScrollArea.Scrollbar>
+        <ScrollArea.Corner className="bg-transparent" />
+      </ScrollArea.Root>
+    </div>
+  )
+}
+
+const StoryEvent = memo(function StoryEvent({ event }: { event: LumeEvent }) {
+  return (
+    <Note.Provider event={event}>
+      <User.Provider pubkey={event.pubkey}>
+        <Note.Root className="group flex flex-col gap-1 mb-3">
+          <div>
+            <User.Name
+              className="shrink-0 inline font-medium text-blue-500"
+              suffix=":"
+            />
+            <Content
+              text={event.content}
+              className="pl-2 inline select-text text-balance content-break overflow-hidden"
+            />
+          </div>
+          <div className="flex-1 flex items-center justify-between">
+            <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">
+              <Note.Reply />
+              <Note.Repost />
+              <Note.Zap />
+            </div>
+          </div>
+        </Note.Root>
+      </User.Provider>
+    </Note.Provider>
+  )
+})
+
+function Content({ text, className }: { text: string; className?: string }) {
+  const content = useMemo(() => {
+    let replacedText: ReactNode[] | string = text.trim()
+
+    const nostr = replacedText
+      .split(/\s+/)
+      .filter((w) => w.startsWith('nostr:'))
+
+    replacedText = reactStringReplace(text, /(https?:\/\/\S+)/g, (match, i) => (
+      <a
+        key={match + i}
+        href={match}
+        target="_blank"
+        rel="noreferrer"
+        className="text-blue-600 dark:text-blue-400 !underline"
+      >
+        {match}
+      </a>
+    ))
+
+    replacedText = reactStringReplace(replacedText, /#(\w+)/g, (match, i) => (
+      <Hashtag key={match + i} tag={match} />
+    ))
+
+    for (const word of nostr) {
+      const bech32 = word.replace('nostr:', '').replace(/[^\w\s]/gi, '')
+
+      try {
+        const data = nip19.decode(bech32)
+
+        switch (data.type) {
+          case 'npub':
+            replacedText = reactStringReplace(
+              replacedText,
+              word,
+              (match, i) => <MentionUser key={match + i} pubkey={data.data} />,
+            )
+            break
+          case 'nprofile':
+            replacedText = reactStringReplace(
+              replacedText,
+              word,
+              (match, i) => (
+                <MentionUser key={match + i} pubkey={data.data.pubkey} />
+              ),
+            )
+            break
+          default:
+            replacedText = reactStringReplace(
+              replacedText,
+              word,
+              (match, i) => (
+                <a
+                  key={match + i}
+                  href={`https://njump.me/${bech32}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-blue-600 dark:text-blue-400 !underline"
+                >
+                  {match}
+                </a>
+              ),
+            )
+            break
+        }
+      } catch {
+        console.log(word)
+      }
+    }
+
+    return replacedText
+  }, [text])
+
+  return <div className={className}>{content}</div>
+}

src/routes/columns/_layout/stories.$id.tsx

@@ -0,0 +1,14 @@
+import { commands } from '@/commands.gen'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/columns/_layout/stories/$id')({
+  loader: async () => {
+    const res = await commands.getContactList()
+
+    if (res.status === 'ok') {
+      return res.data
+    } else {
+      throw new Error(res.error)
+    }
+  },
+})

src/routes/columns/_layout/stories.lazy.tsx

@@ -1,240 +0,0 @@
-import { commands } from "@/commands.gen";
-import { replyTime, toLumeEvents } from "@/commons";
-import { Note, Spinner, User } from "@/components";
-import { Hashtag } from "@/components/note/mentions/hashtag";
-import { MentionUser } from "@/components/note/mentions/user";
-import { type LumeEvent, LumeWindow } from "@/system";
-import { Kind } from "@/types";
-import { ArrowRight } from "@phosphor-icons/react";
-import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { useQuery } from "@tanstack/react-query";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { nip19 } from "nostr-tools";
-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")({
-	component: Screen,
-});
-
-function Screen() {
-	const contacts = Route.useLoaderData();
-	const ref = useRef<HTMLDivElement>(null);
-
-	return (
-		<ScrollArea.Root
-			type={"scroll"}
-			scrollHideDelay={300}
-			className="overflow-hidden size-full"
-		>
-			<ScrollArea.Viewport ref={ref} className="relative h-full px-3 pb-3">
-				<Virtualizer scrollRef={ref} overscan={0}>
-					{!contacts ? (
-						<div className="w-full h-24 flex items-center justify-center">
-							<Spinner className="size-4" />
-						</div>
-					) : (
-						contacts.map((contact) => (
-							<StoryItem key={contact} contact={contact} />
-						))
-					)}
-				</Virtualizer>
-			</ScrollArea.Viewport>
-			<ScrollArea.Scrollbar
-				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
-				orientation="vertical"
-			>
-				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
-			</ScrollArea.Scrollbar>
-			<ScrollArea.Corner className="bg-transparent" />
-		</ScrollArea.Root>
-	);
-}
-
-function StoryItem({ contact }: { contact: string }) {
-	const {
-		isLoading,
-		isError,
-		error,
-		data: events,
-	} = useQuery({
-		queryKey: ["stories", contact],
-		queryFn: async () => {
-			const res = await commands.getAllEventsByAuthor(contact, 10);
-
-			if (res.status === "ok") {
-				const data = toLumeEvents(res.data);
-				return data;
-			} else {
-				throw new Error(res.error);
-			}
-		},
-		select: (data) => data.filter((ev) => ev.kind === Kind.Text),
-		refetchOnWindowFocus: false,
-	});
-
-	const ref = useRef<HTMLDivElement>(null);
-
-	return (
-		<div className="mb-3 flex flex-col w-full h-[300px] bg-white dark:bg-black rounded-xl border-[.5px] border-neutral-300 dark:border-neutral-700">
-			<div className="h-12 shrink-0 px-2 flex items-center justify-between border-b border-neutral-100 dark:border-white/5">
-				<User.Provider pubkey={contact}>
-					<User.Root className="inline-flex items-center gap-2">
-						<User.Avatar className="size-8 rounded-full" />
-						<User.Name className="text-sm font-medium" />
-					</User.Root>
-				</User.Provider>
-				<div>
-					<button
-						type="button"
-						onClick={() => LumeWindow.openProfile(contact)}
-						className="h-7 w-max px-2.5 inline-flex gap-1 items-center justify-center rounded-full text-sm font-medium hover:bg-neutral-100 dark:hover:bg-white/20"
-					>
-						Open
-						<ArrowRight className="size-3" weight="bold" />
-					</button>
-				</div>
-			</div>
-			<ScrollArea.Root
-				type={"scroll"}
-				scrollHideDelay={300}
-				className="flex-1 min-h-0 overflow-hidden size-full"
-			>
-				<ScrollArea.Viewport ref={ref} className="relative h-full px-2 pt-2">
-					<Virtualizer scrollRef={ref} overscan={0}>
-						{isLoading ? (
-							<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
-								<Spinner className="size-4" />
-							</div>
-						) : isError ? (
-							<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
-								{error.message}
-							</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.
-							</div>
-						) : (
-							events.map((event) => <StoryEvent key={event.id} event={event} />)
-						)}
-					</Virtualizer>
-				</ScrollArea.Viewport>
-				<ScrollArea.Scrollbar
-					className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
-					orientation="vertical"
-				>
-					<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
-				</ScrollArea.Scrollbar>
-				<ScrollArea.Corner className="bg-transparent" />
-			</ScrollArea.Root>
-		</div>
-	);
-}
-
-const StoryEvent = memo(function StoryEvent({ event }: { event: LumeEvent }) {
-	return (
-		<Note.Provider event={event}>
-			<User.Provider pubkey={event.pubkey}>
-				<Note.Root className="group flex flex-col gap-1 mb-3">
-					<div>
-						<User.Name
-							className="shrink-0 inline font-medium text-blue-500"
-							suffix=":"
-						/>
-						<Content
-							text={event.content}
-							className="pl-2 inline select-text text-balance content-break overflow-hidden"
-						/>
-					</div>
-					<div className="flex-1 flex items-center justify-between">
-						<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">
-							<Note.Reply />
-							<Note.Repost />
-							<Note.Zap />
-						</div>
-					</div>
-				</Note.Root>
-			</User.Provider>
-		</Note.Provider>
-	);
-});
-
-function Content({ text, className }: { text: string; className?: string }) {
-	const content = useMemo(() => {
-		let replacedText: ReactNode[] | string = text.trim();
-
-		const nostr = replacedText
-			.split(/\s+/)
-			.filter((w) => w.startsWith("nostr:"));
-
-		replacedText = reactStringReplace(text, /(https?:\/\/\S+)/g, (match, i) => (
-			<a
-				key={match + i}
-				href={match}
-				target="_blank"
-				rel="noreferrer"
-				className="text-blue-600 dark:text-blue-400 !underline"
-			>
-				{match}
-			</a>
-		));
-
-		replacedText = reactStringReplace(replacedText, /#(\w+)/g, (match, i) => (
-			<Hashtag key={match + i} tag={match} />
-		));
-
-		for (const word of nostr) {
-			const bech32 = word.replace("nostr:", "").replace(/[^\w\s]/gi, "");
-
-			try {
-				const data = nip19.decode(bech32);
-
-				switch (data.type) {
-					case "npub":
-						replacedText = reactStringReplace(
-							replacedText,
-							word,
-							(match, i) => <MentionUser key={match + i} pubkey={data.data} />,
-						);
-						break;
-					case "nprofile":
-						replacedText = reactStringReplace(
-							replacedText,
-							word,
-							(match, i) => (
-								<MentionUser key={match + i} pubkey={data.data.pubkey} />
-							),
-						);
-						break;
-					default:
-						replacedText = reactStringReplace(
-							replacedText,
-							word,
-							(match, i) => (
-								<a
-									key={match + i}
-									href={`https://njump.me/${bech32}`}
-									target="_blank"
-									rel="noreferrer"
-									className="text-blue-600 dark:text-blue-400 !underline"
-								>
-									{match}
-								</a>
-							),
-						);
-						break;
-				}
-			} catch {
-				console.log(word);
-			}
-		}
-
-		return replacedText;
-	}, [text]);
-
-	return <div className={className}>{content}</div>;
-}

src/routes/columns/_layout/stories.tsx

@@ -1,14 +0,0 @@
-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();
-
-		if (res.status === "ok") {
-			return res.data;
-		} else {
-			throw new Error(res.error);
-		}
-	},
-});

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,

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>
-	);
-}

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")),
-		};
-	},
-});

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>
-	);
-}

src/system/window.ts

@@ -11,7 +11,7 @@ export const LumeWindow = {
 			column,
 		});
 	},
-	openColumnsGallery: async () => {
+	openLaunchpad: async () => {
 		await getCurrentWindow().emit("columns", {
 			type: "add",
 			column: {
@@ -21,23 +21,33 @@ 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}`,
 			},
 		});
 	},
-	openNotification: async () => {
+	openStory: async (account: string) => {
+		await getCurrentWindow().emit("columns", {
+			type: "add",
+			column: {
+				label: "newsfeed",
+				name: "Newsfeed",
+				url: `/columns/stories/${account}`,
+			},
+		});
+	},
+	openNotification: async (account: string) => {
 		await getCurrentWindow().emit("columns", {
 			type: "add",
 			column: {
 				label: "notification",
 				name: "Notification",
-				url: "/columns/notification",
+				url: `/columns/notification/${account}`,
 			},
 		});
 	},

src/types.ts

@@ -50,13 +50,6 @@ export interface Metadata {
 	lud16?: string;
 }
 
-export interface ColumnRouteSearch {
-	account?: string;
-	label?: string;
-	name?: string;
-	redirect?: string;
-}
-
 export interface LumeColumn {
 	label: string;
 	name: string;