refactor: remove turborepo

src/routes/$account.home.tsx

@@ -0,0 +1,209 @@
+import { ArrowLeftIcon, ArrowRightIcon, PlusIcon } from "@/components";
+import { Column } from "@/components/column";
+import { Toolbar } from "@/components/toolbar";
+import { NostrQuery } from "@/system";
+import type { ColumnEvent, LumeColumn } from "@/types";
+import { createFileRoute } from "@tanstack/react-router";
+import { listen } from "@tauri-apps/api/event";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import useEmblaCarousel from "embla-carousel-react";
+import { nanoid } from "nanoid";
+import { useCallback, useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+export const Route = createFileRoute("/$account/home")({
+	loader: async () => {
+		const columns = await NostrQuery.getColumns();
+		return columns;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { account } = Route.useParams();
+	const initialColumnList = Route.useLoaderData();
+
+	const [columns, setColumns] = useState<LumeColumn[]>([]);
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		watchDrag: false,
+		loop: false,
+	});
+
+	const scrollPrev = useCallback(() => {
+		if (emblaApi) emblaApi.scrollPrev();
+	}, [emblaApi]);
+
+	const scrollNext = useCallback(() => {
+		if (emblaApi) emblaApi.scrollNext();
+	}, [emblaApi]);
+
+	const emitScrollEvent = useCallback(() => {
+		getCurrentWindow().emit("child_webview", { scroll: true });
+	}, []);
+
+	const emitResizeEvent = useCallback(() => {
+		getCurrentWindow().emit("child_webview", { resize: true, direction: "x" });
+	}, []);
+
+	const openLumeStore = useCallback(async () => {
+		await getCurrentWindow().emit("columns", {
+			type: "add",
+			column: {
+				label: "store",
+				name: "Column Gallery",
+				content: "/store",
+			},
+		});
+	}, []);
+
+	const add = useDebouncedCallback((column: LumeColumn) => {
+		column.label = `${column.label}-${nanoid()}`; // update col label
+		setColumns((prev) => [column, ...prev]);
+	}, 150);
+
+	const remove = useDebouncedCallback((label: string) => {
+		setColumns((prev) => prev.filter((t) => t.label !== label));
+	}, 150);
+
+	const move = useDebouncedCallback(
+		(label: string, direction: "left" | "right") => {
+			const newCols = [...columns];
+
+			const col = newCols.find((el) => el.label === label);
+			const colIndex = newCols.findIndex((el) => el.label === label);
+
+			newCols.splice(colIndex, 1);
+
+			if (direction === "left") newCols.splice(colIndex - 1, 0, col);
+			if (direction === "right") newCols.splice(colIndex + 1, 0, col);
+
+			setColumns(newCols);
+		},
+		150,
+	);
+
+	const updateName = useDebouncedCallback((label: string, title: string) => {
+		const currentColIndex = columns.findIndex((col) => col.label === label);
+
+		const updatedCol = Object.assign({}, columns[currentColIndex]);
+		updatedCol.name = title;
+
+		const newCols = columns.slice();
+		newCols[currentColIndex] = updatedCol;
+
+		setColumns(newCols);
+	}, 150);
+
+	const reset = useDebouncedCallback(() => setColumns([]), 150);
+
+	const handleKeyDown = useDebouncedCallback((event) => {
+		if (event.defaultPrevented) return;
+
+		switch (event.code) {
+			case "ArrowLeft":
+				if (emblaApi) emblaApi.scrollPrev();
+				break;
+			case "ArrowRight":
+				if (emblaApi) emblaApi.scrollNext();
+				break;
+			default:
+				break;
+		}
+
+		event.preventDefault();
+	}, 150);
+
+	useEffect(() => {
+		if (emblaApi) {
+			emblaApi.on("scroll", emitScrollEvent);
+			emblaApi.on("resize", emitResizeEvent);
+			emblaApi.on("slidesChanged", emitScrollEvent);
+		}
+
+		return () => {
+			emblaApi?.off("scroll", emitScrollEvent);
+			emblaApi?.off("resize", emitResizeEvent);
+			emblaApi?.off("slidesChanged", emitScrollEvent);
+		};
+	}, [emblaApi, emitScrollEvent, emitResizeEvent]);
+
+	useEffect(() => {
+		if (columns?.length) {
+			NostrQuery.setColumns(columns).then(() => console.log("saved"));
+		}
+	}, [columns]);
+
+	useEffect(() => {
+		setColumns(initialColumnList);
+	}, [initialColumnList]);
+
+	// Listen for keyboard event
+	useEffect(() => {
+		window.addEventListener("keydown", handleKeyDown);
+
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleKeyDown]);
+
+	// Listen for columns event
+	useEffect(() => {
+		const unlisten = listen<ColumnEvent>("columns", (data) => {
+			if (data.payload.type === "reset") reset();
+			if (data.payload.type === "add") add(data.payload.column);
+			if (data.payload.type === "remove") remove(data.payload.label);
+			if (data.payload.type === "move")
+				move(data.payload.label, data.payload.direction);
+			if (data.payload.type === "set_title")
+				updateName(data.payload.label, data.payload.title);
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, []);
+
+	return (
+		<div className="size-full">
+			<div ref={emblaRef} className="overflow-hidden size-full">
+				<div className="flex size-full">
+					{columns?.map((column) => (
+						<Column
+							key={account + column.label}
+							column={column}
+							account={account}
+						/>
+					))}
+					<div className="shrink-0 p-2 h-full w-[480px]">
+						<div className="size-full bg-black/5 dark:bg-white/5 rounded-xl flex items-center justify-center">
+							<button
+								type="button"
+								onClick={() => openLumeStore()}
+								className="inline-flex items-center justify-center gap-0.5 rounded-full text-sm font-medium h-8 w-max pl-1.5 pr-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+							>
+								<PlusIcon className="size-5" />
+								Add Column
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Toolbar>
+				<button
+					type="button"
+					onClick={() => scrollPrev()}
+					className="inline-flex items-center justify-center rounded-full size-8 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<ArrowLeftIcon className="size-4" />
+				</button>
+				<button
+					type="button"
+					onClick={() => scrollNext()}
+					className="inline-flex items-center justify-center rounded-full size-8 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<ArrowRightIcon className="size-4" />
+				</button>
+			</Toolbar>
+		</div>
+	);
+}

src/routes/$account.tsx

@@ -0,0 +1,233 @@
+import { cn } from "@/commons";
+import {
+	ChevronDownIcon,
+	ComposeFilledIcon,
+	PlusIcon,
+	SearchIcon,
+} from "@/components";
+import { User } from "@/components/user";
+import { LumeWindow, NostrAccount, NostrQuery } from "@/system";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { message } from "@tauri-apps/plugin-dialog";
+import { memo, useCallback, useState } from "react";
+
+export const Route = createFileRoute("/$account")({
+	beforeLoad: async ({ params }) => {
+		const settings = await NostrQuery.getUserSettings();
+		const accounts = await NostrAccount.getAccounts();
+		const otherAccounts = accounts.filter(
+			(account) => account !== params.account,
+		);
+
+		return { otherAccounts, settings };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { settings, platform } = Route.useRouteContext();
+
+	const openLumeStore = async () => {
+		await getCurrentWindow().emit("columns", {
+			type: "add",
+			column: {
+				label: "store",
+				name: "Column Gallery",
+				content: "/store",
+			},
+		});
+	};
+
+	return (
+		<div className="flex flex-col w-screen h-screen">
+			<div
+				data-tauri-drag-region
+				className="flex h-11 shrink-0 items-center justify-between px-3"
+			>
+				<div
+					data-tauri-drag-region
+					className={cn(
+						"flex-1 flex items-center gap-2",
+						platform === "macos" ? "pl-[64px]" : "",
+					)}
+				>
+					<button
+						type="button"
+						onClick={() => openLumeStore()}
+						className="inline-flex items-center justify-center gap-0.5 rounded-full text-sm font-medium h-8 w-max pl-1.5 pr-3 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+					>
+						<PlusIcon className="size-5" />
+						Column
+					</button>
+					<div id="toolbar" />
+				</div>
+				<div data-tauri-drag-region className="hidden md:flex md:flex-1">
+					<Search />
+				</div>
+				<div
+					data-tauri-drag-region
+					className="flex-1 flex items-center justify-end gap-3"
+				>
+					<button
+						type="button"
+						onClick={() => LumeWindow.openEditor()}
+						className="inline-flex items-center justify-center h-8 gap-1 px-3 text-sm font-medium bg-black/5 dark:bg-white/5 rounded-full w-max hover:bg-blue-500 hover:text-white"
+					>
+						<ComposeFilledIcon className="size-4" />
+						New Post
+					</button>
+					<Accounts />
+				</div>
+			</div>
+			<div
+				className={cn(
+					"flex-1",
+					settings.vibrancy
+						? ""
+						: "bg-white dark:bg-black border-t border-black/20 dark:border-white/20",
+				)}
+			>
+				<Outlet />
+			</div>
+		</div>
+	);
+}
+
+const Accounts = memo(function Accounts() {
+	const { otherAccounts } = Route.useRouteContext();
+	const { account } = 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(),
+				}),
+				PredefinedMenuItem.new({ item: "Separator" }),
+				MenuItem.new({
+					text: "View Profile",
+					action: () => LumeWindow.openProfile(account),
+				}),
+				MenuItem.new({
+					text: "Open Settings",
+					action: () => LumeWindow.openSettings(),
+				}),
+			]);
+
+			const menu = await Menu.new({
+				items: menuItems,
+			});
+
+			await menu.popup().catch((e) => console.error(e));
+		},
+		[account],
+	);
+
+	const changeAccount = useCallback(
+		async (npub: string) => {
+			// Change current account and update signer
+			const select = await NostrAccount.loadAccount(npub);
+
+			if (select) {
+				// Reset current columns
+				await getCurrentWindow().emit("columns", { type: "reset" });
+
+				// Redirect to new account
+				return navigate({
+					to: "/$account/home",
+					params: { account: npub },
+					resetScroll: true,
+					replace: true,
+				});
+			} else {
+				await message("Something wrong.", { title: "Accounts", kind: "error" });
+			}
+		},
+		[otherAccounts],
+	);
+
+	return (
+		<div data-tauri-drag-region className="hidden md:flex items-center gap-3">
+			{otherAccounts.map((npub) => (
+				<button key={npub} type="button" onClick={(e) => changeAccount(npub)}>
+					<User.Provider pubkey={npub}>
+						<User.Root className="shrink-0 rounded-full transition-all ease-in-out duration-150 will-change-auto hover:ring-1 hover:ring-blue-500">
+							<User.Avatar className="rounded-full size-8" />
+						</User.Root>
+					</User.Provider>
+				</button>
+			))}
+			<button
+				type="button"
+				onClick={(e) => showContextMenu(e)}
+				className="inline-flex items-center gap-1.5"
+			>
+				<User.Provider pubkey={account}>
+					<User.Root className="shrink-0 rounded-full">
+						<User.Avatar className="rounded-full size-8" />
+					</User.Root>
+				</User.Provider>
+				<ChevronDownIcon className="size-3" />
+			</button>
+		</div>
+	);
+});
+
+const Search = memo(function Search() {
+	const [searchType, setSearchType] = useState<"notes" | "users">("notes");
+	const [query, setQuery] = useState("");
+
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Notes",
+				action: () => setSearchType("notes"),
+			}),
+			MenuItem.new({
+				text: "Users",
+				action: () => setSearchType("users"),
+			}),
+		]);
+
+		const menu = await Menu.new({
+			items: menuItems,
+		});
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
+
+	return (
+		<div className="h-8 w-full px-3 text-sm rounded-full inline-flex items-center bg-black/5 dark:bg-white/5">
+			<button
+				type="button"
+				onClick={(e) => showContextMenu(e)}
+				className="inline-flex items-center gap-1 capitalize text-sm font-medium pr-2 border-r border-black/10 dark:border-white/10 text-black/50 dark:text-white/50"
+			>
+				{searchType}
+				<ChevronDownIcon className="size-3" />
+			</button>
+			<input
+				type="text"
+				name="search"
+				placeholder="Search..."
+				onChange={(e) => setQuery(e.target.value)}
+				onKeyDown={(event) => {
+					if (event.key === "Enter") {
+						LumeWindow.openSearch(searchType, query);
+					}
+				}}
+				className="h-full w-full px-3 text-sm rounded-full border-none ring-0 focus:ring-0 focus:outline-none bg-transparent placeholder:text-black/50 dark:placeholder:text-white/50"
+			/>
+			<SearchIcon className="size-5" />
+		</div>
+	);
+});

src/routes/__root.tsx

@@ -0,0 +1,22 @@
+import { Spinner } from "@/components";
+import type { QueryClient } from "@tanstack/react-query";
+import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import type { OsType } from "@tauri-apps/plugin-os";
+
+interface RouterContext {
+	queryClient: QueryClient;
+	platform: OsType;
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+	component: () => <Outlet />,
+	pendingComponent: Pending,
+});
+
+function Pending() {
+	return (
+		<div className="flex flex-col items-center justify-center w-screen h-screen">
+			<Spinner className="size-5" />
+		</div>
+	);
+}

src/routes/auth.lazy.tsx

@@ -0,0 +1,16 @@
+import { Container } from "@/components";
+import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/auth")({
+	component: Screen,
+});
+
+function Screen() {
+	return (
+		<Container withDrag>
+			<div className="max-w-sm mx-auto size-full">
+				<Outlet />
+			</div>
+		</Container>
+	);
+}

src/routes/auth/$account.backup.tsx

@@ -0,0 +1,177 @@
+import { displayNsec } from "@/commons";
+import { Spinner } from "@/components";
+import { CheckIcon } from "@/components";
+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("/auth/$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={displayNsec(key, 36)}
+									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">
+											<CheckIcon 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">
+											<CheckIcon 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/auth/create-profile.tsx

@@ -0,0 +1,139 @@
+import { Spinner } from "@/components";
+import { PlusIcon } from "@/components";
+import { AvatarUploader } from "@/components/avatarUploader";
+import { NostrAccount } from "@/system";
+import type { Metadata } from "@/types";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+export const Route = createFileRoute("/auth/create-profile")({
+	loader: async () => {
+		const account = await NostrAccount.createAccount();
+		return account;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const account = Route.useLoaderData();
+	const navigate = useNavigate();
+	const { register, handleSubmit } = useForm();
+
+	const [picture, setPicture] = useState<string>("");
+	const [loading, setLoading] = useState(false);
+
+	const onSubmit = async (data: {
+		name: string;
+		about: string;
+		website: string;
+	}) => {
+		setLoading(true);
+
+		try {
+			// Save account keys
+			const save = await NostrAccount.saveAccount(account.nsec);
+
+			// Then create profile
+			if (save) {
+				const profile: Metadata = { ...data, picture };
+				const eventId = await NostrAccount.createProfile(profile);
+
+				if (eventId) {
+					navigate({
+						to: "/auth/$account/backup",
+						params: { account: account.npub },
+						replace: true,
+					});
+				}
+			}
+		} catch (e) {
+			setLoading(false);
+			await message(String(e), { title: "Create Profile", kind: "error" });
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center size-full gap-4">
+			<div className="text-center">
+				<h3 className="text-xl font-semibold">Let's set up your profile.</h3>
+			</div>
+			<form onSubmit={handleSubmit(onSubmit)} className="w-full mb-0">
+				<div className="flex flex-col gap-3 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					<div className="self-center relative rounded-full size-20 bg-neutral-200 dark:bg-white/70 my-3">
+						{picture ? (
+							<img
+								src={picture}
+								alt="avatar"
+								loading="lazy"
+								decoding="async"
+								className="absolute inset-0 z-10 object-cover w-full h-full rounded-full"
+							/>
+						) : null}
+						<AvatarUploader
+							setPicture={setPicture}
+							className="absolute inset-0 z-20 flex items-center justify-center w-full h-full text-white rounded-full dark:text-black bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+						>
+							<PlusIcon className="size-8" />
+						</AvatarUploader>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label htmlFor="display_name" className="font-medium">
+							Display Name *
+						</label>
+						<input
+							type={"text"}
+							{...register("display_name", { required: true, minLength: 1 })}
+							placeholder="e.g. Alice in Nostrland"
+							spellCheck={false}
+							className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label htmlFor="name" className="font-medium">
+							Name
+						</label>
+						<input
+							type={"text"}
+							{...register("name")}
+							placeholder="e.g. alice"
+							spellCheck={false}
+							className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label htmlFor="about" className="font-medium">
+							Bio
+						</label>
+						<textarea
+							{...register("about")}
+							placeholder="e.g. Artist, anime-lover, and k-pop fan"
+							spellCheck={false}
+							className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label htmlFor="website" className="font-medium">
+							Website
+						</label>
+						<input
+							type="url"
+							{...register("website")}
+							placeholder="e.g. https://alice.me"
+							spellCheck={false}
+							className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-500 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+				</div>
+				<button
+					type="submit"
+					disabled={loading}
+					className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
+				>
+					{loading ? <Spinner /> : "Continue"}
+				</button>
+			</form>
+		</div>
+	);
+}

src/routes/auth/import.lazy.tsx

@@ -0,0 +1,90 @@
+import { Spinner } from "@/components";
+import { NostrAccount } from "@/system";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+
+export const Route = createLazyFileRoute("/auth/import")({
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+
+	const [key, setKey] = useState("");
+	const [password, setPassword] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	const submit = async () => {
+		if (!key.startsWith("nsec1")) {
+			return await message(
+				"You need to enter a valid private key starts with nsec or ncryptsec",
+				{ title: "Import Key", kind: "info" },
+			);
+		}
+
+		try {
+			setLoading(true);
+
+			const npub = await NostrAccount.saveAccount(key, password);
+
+			if (npub) {
+				navigate({ to: "/", replace: true });
+			}
+		} catch (e) {
+			setLoading(false);
+			await message(String(e), { title: "Import Key", kind: "error" });
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center size-full gap-4">
+			<div className="text-center">
+				<h3 className="text-xl font-semibold">Continue with Private Key</h3>
+			</div>
+			<div className="flex flex-col w-full">
+				<div className="flex flex-col gap-3 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="key"
+							className="font-medium text-neutral-900 dark:text-neutral-100"
+						>
+							Private Key
+						</label>
+						<input
+							name="key"
+							type="text"
+							placeholder="nsec or ncryptsec..."
+							value={key}
+							onChange={(e) => setKey(e.target.value)}
+							className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+					<div className="flex flex-col gap-1">
+						<label
+							htmlFor="password"
+							className="font-medium text-neutral-900 dark:text-neutral-100"
+						>
+							Password (Optional)
+						</label>
+						<input
+							name="password"
+							type="password"
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+				</div>
+				<button
+					type="button"
+					onClick={() => submit()}
+					disabled={loading}
+					className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
+				>
+					{loading ? <Spinner /> : "Login"}
+				</button>
+			</div>
+		</div>
+	);
+}

src/routes/auth/remote.lazy.tsx

@@ -0,0 +1,79 @@
+import { Spinner } from "@/components";
+import { NostrAccount } from "@/system";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+
+export const Route = createLazyFileRoute("/auth/remote")({
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+
+	const [uri, setUri] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	const submit = async () => {
+		if (!uri.startsWith("bunker://")) {
+			return await message(
+				"You need to enter a valid Connect URI starts with bunker://",
+				{ title: "Nostr Connect", kind: "info" },
+			);
+		}
+
+		try {
+			setLoading(true);
+
+			const remoteAccount = await NostrAccount.connectRemoteAccount(uri);
+
+			if (remoteAccount?.length) {
+				navigate({ to: "/", replace: true });
+			}
+		} catch (e) {
+			setLoading(false);
+			await message(String(e), { title: "Nostr Connect", kind: "error" });
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center size-full gap-4">
+			<div className="text-center">
+				<h3 className="text-xl font-semibold">Continue with Nostr Connect</h3>
+			</div>
+			<div className="flex flex-col w-full">
+				<div className="flex flex-col gap-1 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					<label
+						htmlFor="uri"
+						className="font-medium text-neutral-900 dark:text-neutral-100"
+					>
+						Connect URI
+					</label>
+					<input
+						name="uri"
+						type="text"
+						placeholder="bunker://..."
+						value={uri}
+						onChange={(e) => setUri(e.target.value)}
+						className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
+					/>
+				</div>
+				<div className="flex flex-col items-center gap-1">
+					<button
+						type="button"
+						onClick={() => submit()}
+						disabled={loading}
+						className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
+					>
+						{loading ? <Spinner /> : "Login"}
+					</button>
+					{loading ? (
+						<p className="text-sm text-center text-neutral-600 dark:text-neutral-400">
+							Waiting confirmation...
+						</p>
+					) : null}
+				</div>
+			</div>
+		</div>
+	);
+}

src/routes/bootstrap-relays.tsx

@@ -0,0 +1,150 @@
+import { Spinner } from "@/components";
+import { CancelIcon, PlusIcon } from "@/components";
+import { NostrQuery } from "@/system";
+import type { Relay } from "@/types";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+export const Route = createFileRoute("/bootstrap-relays")({
+	loader: async () => {
+		const bootstrapRelays = await NostrQuery.getBootstrapRelays();
+		return bootstrapRelays;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const bootstrapRelays = Route.useLoaderData();
+	const { register, reset, handleSubmit } = useForm();
+
+	const [relays, setRelays] = useState<Relay[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const removeRelay = (url: string) => {
+		setRelays((prev) => prev.filter((relay) => relay.url !== url));
+	};
+
+	const onSubmit = async (data: { url: string; purpose: string }) => {
+		try {
+			if (!data.url.startsWith("wss://") || !data.url.startsWith("ws://")) {
+				return await message("Relay must be starts with wss:// or ws://", {
+					title: "Bootstrap Relays",
+					kind: "info",
+				});
+			}
+
+			const relay: Relay = { url: data.url, purpose: data.purpose };
+			setRelays((prev) => [...prev, relay]);
+			reset();
+		} catch (e) {
+			await message(String(e), { title: "Bootstrap Relays", kind: "error" });
+		}
+	};
+
+	const save = async () => {
+		try {
+			setIsLoading(true);
+			await NostrQuery.saveBootstrapRelays(relays);
+		} catch (e) {
+			await message(String(e), { title: "Bootstrap Relays", kind: "error" });
+		}
+	};
+
+	useEffect(() => {
+		setRelays(bootstrapRelays);
+	}, [bootstrapRelays]);
+
+	return (
+		<div
+			data-tauri-drag-region
+			className="relative flex flex-col items-center justify-between w-full h-full"
+		>
+			<div
+				data-tauri-drag-region
+				className="absolute top-0 left-0 h-14 w-full"
+			/>
+			<div className="flex items-end justify-center flex-1 w-full px-4 pb-4">
+				<div className="text-center">
+					<h2 className="text-xl font-semibold">Customize Bootstrap Relays</h2>
+				</div>
+			</div>
+			<div className="flex flex-col items-center flex-1 w-full">
+				<div className="flex flex-col w-full max-w-sm mx-auto p-3 overflow-hidden bg-white divide-y divide-neutral-100 dark:divide-white/5 rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					{relays.map((relay) => (
+						<div
+							key={relay.url}
+							className="flex items-center justify-between h-11"
+						>
+							<div className="inline-flex items-center gap-2 text-sm font-medium">
+								{relay.url}
+							</div>
+							<div className="flex items-center gap-2">
+								{relay.purpose?.length ? (
+									<button
+										type="button"
+										className="inline-flex items-center justify-center px-2 text-xs font-medium uppercase rounded-md h-7 w-max hover:bg-black/10 dark:hover:bg-white/10"
+									>
+										{relay.purpose}
+									</button>
+								) : null}
+								<button
+									type="button"
+									onClick={() => removeRelay(relay.url)}
+									className="inline-flex items-center justify-center rounded-md size-7 text-neutral-700 dark:text-white/20 hover:bg-black/10 dark:hover:bg-white/10"
+								>
+									<CancelIcon className="size-3" />
+								</button>
+							</div>
+						</div>
+					))}
+					<div className="flex items-center border-t h-14 border-neutral-100 dark:border-white/5">
+						<form
+							onSubmit={handleSubmit(onSubmit)}
+							className="flex items-center w-full gap-2 mb-0"
+						>
+							<div className="flex items-center flex-1 gap-2 border rounded-lg border-neutral-300 dark:border-white/20">
+								<input
+									{...register("url", {
+										required: true,
+										minLength: 1,
+									})}
+									name="url"
+									placeholder="wss://..."
+									spellCheck={false}
+									className="flex-1 px-3 bg-transparent border-none rounded-l-lg h-9 placeholder:text-neutral-500 dark:placeholder:text-neutral-400"
+								/>
+								<select
+									{...register("purpose")}
+									className="flex-1 p-0 m-0 text-sm bg-transparent border-none outline-none h-9 ring-0 focus:outline-none focus:ring-0"
+								>
+									<option value="read">Read</option>
+									<option value="write">Write</option>
+									<option value="">Both</option>
+								</select>
+							</div>
+							<button
+								type="submit"
+								className="inline-flex items-center justify-center px-2 text-sm font-medium text-white rounded-lg shrink-0 h-9 w-14 bg-black/20 dark:bg-white/20 hover:bg-blue-500 disabled:opacity-50"
+							>
+								<PlusIcon className="size-7" />
+							</button>
+						</form>
+					</div>
+				</div>
+				<div className="w-full max-w-sm mx-auto">
+					<button
+						type="button"
+						onClick={() => save()}
+						disabled={isLoading}
+						className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
+					>
+						{isLoading ? <Spinner /> : "Save & Relaunch"}
+					</button>
+				</div>
+			</div>
+			<div className="flex-1" />
+		</div>
+	);
+}

src/routes/create-group.tsx

@@ -0,0 +1,198 @@
+import { Spinner } from "@/components";
+import { CancelIcon, PlusIcon } from "@/components";
+import { User } from "@/components/user";
+import { NostrAccount, NostrQuery } from "@/system";
+import type { ColumnRouteSearch } from "@/types";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+
+export const Route = createFileRoute("/create-group")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	loader: async () => {
+		const contacts = await NostrAccount.getContactList();
+		return contacts;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const [title, setTitle] = useState("");
+	const [npub, setNpub] = useState("");
+	const [users, setUsers] = useState<string[]>([
+		"npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445", // reya
+	]);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const contacts = Route.useLoaderData();
+	const search = Route.useSearch();
+	const navigate = Route.useNavigate();
+
+	const toggleUser = (pubkey: string) => {
+		setUsers((prev) =>
+			prev.includes(pubkey)
+				? prev.filter((i) => i !== pubkey)
+				: [...prev, pubkey],
+		);
+	};
+
+	const addUser = () => {
+		if (!npub.startsWith("npub1")) return;
+		if (users.includes(npub)) return;
+
+		setUsers((prev) => [...prev, npub]);
+		setNpub("");
+	};
+
+	const submit = async () => {
+		try {
+			setIsLoading(true);
+
+			const key = `lume_group_${search.label}`;
+			const createGroup = await NostrQuery.setNstore(
+				key,
+				JSON.stringify(users),
+			);
+
+			if (createGroup) {
+				return navigate({ to: search.redirect, search: { ...search } });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), { title: "Create Group", kind: "error" });
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center w-full h-full gap-4">
+			<div className="flex flex-col items-center justify-center text-center">
+				<h1 className="font-serif text-2xl font-medium">
+					Focus feeds for people you like
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Add some people for custom feeds.
+				</p>
+			</div>
+			<div className="flex flex-col w-4/5 max-w-full gap-3">
+				<div className="flex items-center w-full rounded-lg h-9 shrink-0 bg-black/5 dark:bg-white/5">
+					<label
+						htmlFor="name"
+						className="w-16 text-sm font-semibold text-center border-r border-black/10 dark:border-white/10 shrink-0"
+					>
+						Name
+					</label>
+					<input
+						name="name"
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+						placeholder="Enter a name for this group"
+						className="h-full px-3 text-sm bg-transparent border-none placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
+					/>
+				</div>
+				<div className="flex flex-col items-center w-full gap-3">
+					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] flex flex-col gap-3 bg-black/5 dark:bg-white/5 rounded-xl">
+						<div className="flex gap-2">
+							<input
+								name="npub"
+								value={npub}
+								onChange={(e) => setNpub(e.target.value)}
+								placeholder="npub1..."
+								className="w-full px-3 text-sm border-none rounded-lg h-9 bg-black/10 dark:bg-white/10 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
+							/>
+							<button
+								type="button"
+								onClick={() => addUser()}
+								className="inline-flex items-center justify-center text-white rounded-lg size-9 bg-black/20 dark:bg-white/20 shrink-0 hover:bg-blue-500"
+							>
+								<PlusIcon className="size-6" />
+							</button>
+						</div>
+						<div className="flex flex-col gap-2">
+							<span className="text-sm font-semibold">Added</span>
+							<div className="flex flex-col gap-2">
+								{users.length ? (
+									users.map((item: string) => (
+										<button
+											key={item}
+											type="button"
+											onClick={() => toggleUser(item)}
+											className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
+										>
+											<User.Provider pubkey={item}>
+												<User.Root className="flex items-center gap-2.5">
+													<User.Avatar className="rounded-full size-8" />
+													<div className="flex items-center gap-1">
+														<User.Name className="text-sm font-medium" />
+													</div>
+												</User.Root>
+											</User.Provider>
+											<div>
+												<CancelIcon className="size-4" />
+											</div>
+										</button>
+									))
+								) : (
+									<div className="flex items-center justify-center text-sm rounded-lg bg-black/5 dark:bg-white/5 h-14">
+										Empty.
+									</div>
+								)}
+							</div>
+						</div>
+						<div className="flex flex-col gap-2">
+							<span className="text-sm font-semibold">Contacts</span>
+							<div className="flex flex-col gap-2">
+								{contacts.length ? (
+									contacts.map((item: string) => (
+										<button
+											key={item}
+											type="button"
+											onClick={() => toggleUser(item)}
+											className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
+										>
+											<User.Provider pubkey={item}>
+												<User.Root className="flex items-center gap-2.5">
+													<User.Avatar className="rounded-full size-8" />
+													<div className="flex items-center gap-1">
+														<User.Name className="text-sm font-medium" />
+													</div>
+												</User.Root>
+											</User.Provider>
+										</button>
+									))
+								) : (
+									<div className="flex items-center justify-center text-sm rounded-lg bg-black/5 dark:bg-white/5 h-14">
+										<p>
+											Find more user at{" "}
+											<a
+												href="https://www.nostr.directory/"
+												target="_blank"
+												className="text-blue-600 after:content-['_↗']"
+												rel="noreferrer"
+											>
+												Nostr Directory
+											</a>
+										</p>
+									</div>
+								)}
+							</div>
+						</div>
+					</div>
+					<button
+						type="button"
+						onClick={() => submit()}
+						disabled={isLoading || users.length < 1}
+						className="inline-flex items-center justify-center text-sm font-medium text-white bg-blue-500 rounded-full w-36 h-9 hover:bg-blue-600 disabled:opacity-50"
+					>
+						{isLoading ? <Spinner /> : "Confirm"}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/routes/create-newsfeed.f2f.tsx

@@ -0,0 +1,93 @@
+import { Spinner } from "@/components";
+import { NostrAccount } from "@/system";
+import type { ColumnRouteSearch } from "@/types";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+
+export const Route = createFileRoute("/create-newsfeed/f2f")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+	const { redirect } = Route.useSearch();
+
+	const [npub, setNpub] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const submit = async () => {
+		if (!npub.startsWith("npub1")) {
+			return await message("You must enter a valid npub.", {
+				title: "Create Newsfeed",
+				kind: "info",
+			});
+		}
+
+		try {
+			setIsLoading(true);
+
+			const sync = await NostrAccount.f2f(npub);
+
+			if (sync) {
+				return navigate({ to: redirect });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), {
+				title: "Create Newsfeed",
+				kind: "error",
+			});
+		}
+	};
+
+	return (
+		<div className="overflow-y-auto scrollbar-none p-2 shrink-0 h-[450px] bg-white dark:bg-white/20 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+			<div className="flex flex-col justify-between h-full">
+				<div className="flex-1 flex flex-col gap-1.5 justify-center px-5">
+					<p className="font-semibold text-neutral-500">
+						You already have a friend on Nostr?
+					</p>
+					<p>Instead of building the timeline by yourself.</p>
+					<p className="font-semibold text-neutral-500">
+						Just enter your friend's{" "}
+						<span className="text-blue-500">npub.</span>
+					</p>
+					<p>
+						You will have the same experience as your friend. Of course, you
+						always can edit your network later.
+					</p>
+				</div>
+				<div className="flex flex-col gap-2">
+					<div className="flex flex-col gap-1">
+						<label htmlFor="npub" className="text-sm font-medium">
+							NPUB
+						</label>
+						<input
+							name="npub"
+							placeholder="npub1..."
+							value={npub}
+							onChange={(e) => setNpub(e.target.value)}
+							spellCheck={false}
+							className="px-3 bg-transparent border rounded-lg h-11 border-neutral-200 dark:border-neutral-800 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+					<button
+						type="button"
+						onClick={() => submit()}
+						className="inline-flex items-center justify-center w-full text-sm font-medium text-white bg-blue-500 rounded-lg h-9 hover:bg-blue-600"
+					>
+						{isLoading ? <Spinner /> : "Confirm"}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/routes/create-newsfeed.tsx

@@ -0,0 +1,70 @@
+import type { ColumnRouteSearch } from "@/types";
+import { cn } from "@/commons";
+import { Link, Outlet } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/create-newsfeed")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const search = Route.useSearch();
+	return (
+		<div className="flex flex-col items-center justify-center w-full h-full gap-4">
+			<div className="flex flex-col items-center justify-center text-center">
+				<h1 className="font-serif text-2xl font-medium">
+					Build up your timeline.
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Follow some people to keep up to date with them.
+				</p>
+			</div>
+			<div className="flex flex-col w-4/5 max-w-full gap-3">
+				<div className="w-full h-9 shrink-0 flex items-center justify-between bg-black/5 dark:bg-white/5 rounded-lg px-0.5">
+					<Link
+						to="/create-newsfeed/users"
+						search={search}
+						className="flex-1 h-8"
+					>
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"text-sm font-medium rounded-md h-full flex items-center justify-center",
+									isActive
+										? "bg-white dark:bg-white/20 shadow"
+										: "bg-transparent",
+								)}
+							>
+								Users
+							</div>
+						)}
+					</Link>
+					<Link
+						to="/create-newsfeed/f2f"
+						search={search}
+						className="flex-1 h-8"
+					>
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"rounded-md h-full flex items-center justify-center",
+									isActive ? "bg-white dark:bg-white/20" : "bg-transparent",
+								)}
+							>
+								Friend to Friend
+							</div>
+						)}
+					</Link>
+				</div>
+				<Outlet />
+			</div>
+		</div>
+	);
+}

src/routes/create-newsfeed.users.tsx

@@ -0,0 +1,131 @@
+import { Spinner } from "@/components";
+import { User } from "@/components/user";
+import { NostrAccount } from "@/system";
+import type { ColumnRouteSearch } from "@/types";
+import { createFileRoute } from "@tanstack/react-router";
+import { Await, defer } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { Suspense, useState } from "react";
+
+export const Route = createFileRoute("/create-newsfeed/users")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	loader: async ({ abortController }) => {
+		try {
+			return {
+				data: defer(
+					fetch("https://api.nostr.band/v0/trending/profiles", {
+						signal: abortController.signal,
+					}).then((res) => res.json()),
+				),
+			};
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { data } = Route.useLoaderData();
+	const { redirect } = Route.useSearch();
+
+	const [isLoading, setIsLoading] = useState(false);
+	const [follows, setFollows] = useState<string[]>([]);
+
+	const navigate = Route.useNavigate();
+
+	const toggleFollow = (pubkey: string) => {
+		setFollows((prev) =>
+			prev.includes(pubkey)
+				? prev.filter((i) => i !== pubkey)
+				: [...prev, pubkey],
+		);
+	};
+
+	const submit = async () => {
+		try {
+			setIsLoading(true);
+
+			const newContactList = await NostrAccount.setContactList(follows);
+
+			if (newContactList) {
+				return navigate({ to: redirect });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), {
+				title: "Create Group",
+				kind: "error",
+			});
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center w-full gap-3">
+			<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] bg-black/5 dark:bg-white/5 rounded-xl">
+				<Suspense
+					fallback={
+						<div className="flex flex-col items-center justify-center w-full h-20 gap-1">
+							<button
+								type="button"
+								className="inline-flex items-center gap-2 text-sm font-medium"
+								disabled
+							>
+								<Spinner className="size-5" />
+								Loading...
+							</button>
+						</div>
+					}
+				>
+					<Await promise={data}>
+						{(users) =>
+							users.profiles.map((item: { pubkey: string }) => (
+								<div
+									key={item.pubkey}
+									className="w-full p-2 mb-2 overflow-hidden bg-white rounded-lg h-max dark:bg-black/20shadow-primary dark:ring-1 ring-neutral-800/50"
+								>
+									<User.Provider pubkey={item.pubkey}>
+										<User.Root>
+											<div className="flex flex-col w-full h-full gap-2">
+												<div className="flex items-center justify-between">
+													<div className="flex items-center gap-2">
+														<User.Avatar className="rounded-full size-7" />
+														<User.Name className="text-sm leadning-tight max-w-[15rem] truncate font-semibold" />
+													</div>
+													<button
+														type="button"
+														onClick={() => toggleFollow(item.pubkey)}
+														className="inline-flex items-center justify-center w-20 text-sm font-medium rounded-lg h-7 bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+													>
+														{follows.includes(item.pubkey)
+															? "Unfollow"
+															: "Follow"}
+													</button>
+												</div>
+												<User.About className="select-text line-clamp-3 max-w-none text-neutral-800 dark:text-neutral-400" />
+											</div>
+										</User.Root>
+									</User.Provider>
+								</div>
+							))
+						}
+					</Await>
+				</Suspense>
+			</div>
+			<button
+				type="button"
+				onClick={() => submit()}
+				disabled={isLoading || follows.length < 1}
+				className="inline-flex items-center justify-center text-sm font-medium text-white bg-blue-500 rounded-full w-36 h-9 hover:bg-blue-600 disabled:opacity-50"
+			>
+				{isLoading ? <Spinner /> : "Confirm"}
+			</button>
+		</div>
+	);
+}

src/routes/create-topic.tsx

@@ -0,0 +1,115 @@
+import { Spinner } from "@/components";
+import { CheckCircleIcon } from "@/components";
+import { TOPICS } from "@/constants";
+import { NostrQuery } from "@/system";
+import type { ColumnRouteSearch } from "@/types";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+
+type Topic = {
+	title: string;
+	content: string[];
+};
+
+export const Route = createFileRoute("/create-topic")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const [topics, setTopics] = useState<Topic[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const search = Route.useSearch();
+	const navigate = Route.useNavigate();
+
+	const toggleTopic = (topic: Topic) => {
+		setTopics((prev) =>
+			prev.find((item) => item.title === topic.title)
+				? prev.filter((i) => i.title !== topic.title)
+				: [...prev, topic],
+		);
+	};
+
+	const submit = async () => {
+		try {
+			setIsLoading(true);
+
+			const key = `lume_topic_${search.label}`;
+			const createTopic = await NostrQuery.setNstore(
+				key,
+				JSON.stringify(topics),
+			);
+
+			if (createTopic) {
+				return navigate({ to: search.redirect, search: { ...search } });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), {
+				title: "Create Topic",
+				kind: "error",
+			});
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center w-full h-full gap-4">
+			<div className="flex flex-col items-center justify-center text-center">
+				<h1 className="font-serif text-2xl font-medium">
+					What are your interests?
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Add some topics you want to focus on.
+				</p>
+			</div>
+			<div className="flex flex-col w-4/5 max-w-full gap-3">
+				<div className="flex items-center justify-between w-full px-3 rounded-lg h-9 shrink-0 bg-black/5 dark:bg-white/5">
+					<span className="text-sm font-medium">Added: {topics.length}</span>
+				</div>
+				<div className="flex flex-col items-center w-full gap-3">
+					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] bg-black/5 dark:bg-white/5 rounded-xl">
+						<div className="flex flex-col gap-3">
+							{TOPICS.map((topic) => (
+								<button
+									key={topic.title}
+									type="button"
+									onClick={() => toggleTopic(topic)}
+									className="flex items-center justify-between px-3 bg-white border border-transparent rounded-lg h-11 dark:bg-black/20 hover:border-blue-500 shadow-primary dark:ring-1 ring-neutral-800/50"
+								>
+									<div className="inline-flex items-center gap-1">
+										<div>{topic.icon}</div>
+										<div className="text-sm font-medium">
+											<span>{topic.title}</span>
+											<span className="ml-1 italic font-normal text-neutral-400 dark:text-neutral-600">
+												{topic.content.length} hashtags
+											</span>
+										</div>
+									</div>
+									{topics.find((item) => item.title === topic.title) ? (
+										<CheckCircleIcon className="text-teal-500 size-4" />
+									) : null}
+								</button>
+							))}
+						</div>
+					</div>
+					<button
+						type="button"
+						onClick={() => submit()}
+						disabled={isLoading || topics.length < 1}
+						className="inline-flex items-center justify-center text-sm font-medium text-white bg-blue-500 rounded-full w-36 h-9 hover:bg-blue-600 disabled:opacity-50"
+					>
+						{isLoading ? <Spinner /> : "Confirm"}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/routes/editor/-components/media.tsx

@@ -0,0 +1,77 @@
+import { insertImage, isImagePath } from "@/commons";
+import { Spinner } from "@/components";
+import { AddMediaIcon } from "@/components";
+import { NostrQuery } from "@/system";
+import type { UnlistenFn } from "@tauri-apps/api/event";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useEffect, useState } from "react";
+import { useSlateStatic } from "slate-react";
+
+export function MediaButton() {
+	const editor = useSlateStatic();
+	const [loading, setLoading] = useState(false);
+
+	const upload = async () => {
+		try {
+			// start loading
+			setLoading(true);
+
+			const image = await NostrQuery.upload();
+			insertImage(editor, image);
+
+			// reset loading
+			setLoading(false);
+		} catch (e) {
+			setLoading(false);
+			await message(String(e), { title: "Upload", kind: "error" });
+		}
+	};
+
+	useEffect(() => {
+		let unlisten: UnlistenFn = undefined;
+
+		async function listenFileDrop() {
+			const window = getCurrentWindow();
+			if (!unlisten) {
+				unlisten = await window.listen("tauri://file-drop", async (event) => {
+					// @ts-ignore, lfg !!!
+					const items: string[] = event.payload.paths;
+					// start loading
+					setLoading(true);
+					// upload all images
+					for (const item of items) {
+						if (isImagePath(item)) {
+							const image = await NostrQuery.upload(item);
+							insertImage(editor, image);
+						}
+					}
+					// stop loading
+					setLoading(false);
+				});
+			}
+		}
+
+		listenFileDrop();
+
+		return () => {
+			if (unlisten) unlisten();
+		};
+	}, []);
+
+	return (
+		<button
+			type="button"
+			onClick={() => upload()}
+			disabled={loading}
+			className="inline-flex items-center h-8 gap-2 px-2.5 text-sm rounded-lg text-black/70 dark:text-white/70 w-max hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			{loading ? (
+				<Spinner className="size-4" />
+			) : (
+				<AddMediaIcon className="size-4" />
+			)}
+			Add media
+		</button>
+	);
+}

src/routes/editor/-components/pow.tsx

@@ -0,0 +1,21 @@
+import { PowIcon } from "@/components";
+import type { Dispatch, SetStateAction } from "react";
+
+export function PowButton({
+	setDifficulty,
+}: {
+	setDifficulty: Dispatch<SetStateAction<{ enable: boolean; num: number }>>;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={() =>
+				setDifficulty((prev) => ({ ...prev, enable: !prev.enable }))
+			}
+			className="inline-flex items-center h-8 gap-2 px-2.5 text-sm rounded-lg text-black/70 dark:text-white/70 w-max hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<PowIcon className="size-4" />
+			PoW
+		</button>
+	);
+}

src/routes/editor/-components/warning.tsx

@@ -0,0 +1,19 @@
+import { NsfwIcon } from "@/components";
+import type { Dispatch, SetStateAction } from "react";
+
+export function WarningButton({
+	setWarning,
+}: {
+	setWarning: Dispatch<SetStateAction<{ enable: boolean; reason: string }>>;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={() => setWarning((prev) => ({ ...prev, enable: !prev.enable }))}
+			className="inline-flex items-center h-8 gap-2 px-2.5 text-sm rounded-lg text-black/70 dark:text-white/70 w-max hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<NsfwIcon className="size-4" />
+			Mark as sensitive
+		</button>
+	);
+}

src/routes/editor/index.tsx

@@ -0,0 +1,399 @@
+import { cn, insertImage, insertNostrEvent, isImageUrl } from "@/commons";
+import { Spinner } from "@/components";
+import { ComposeFilledIcon } from "@/components";
+import { Note } from "@/components/note";
+import { MentionNote } from "@/components/note/mentions/note";
+import { User } from "@/components/user";
+import { LumeEvent, useEvent } from "@/system";
+import { createFileRoute } from "@tanstack/react-router";
+import { nip19 } from "nostr-tools";
+import { useEffect, useState } from "react";
+import { type Descendant, Node, Transforms, createEditor } from "slate";
+import {
+	Editable,
+	ReactEditor,
+	Slate,
+	useFocused,
+	useSelected,
+	useSlateStatic,
+	withReact,
+} from "slate-react";
+import { MediaButton } from "./-components/media";
+import { PowButton } from "./-components/pow";
+import { WarningButton } from "./-components/warning";
+
+type EditorSearch = {
+	reply_to: string;
+	quote: string;
+};
+
+type EditorElement = {
+	type: string;
+	children: Descendant[];
+	eventId?: string;
+};
+
+export const Route = createFileRoute("/editor/")({
+	validateSearch: (search: Record<string, string>): EditorSearch => {
+		return {
+			reply_to: search.reply_to,
+			quote: search.quote,
+		};
+	},
+	beforeLoad: ({ search }) => {
+		let initialValue: EditorElement[];
+
+		if (search?.quote?.length) {
+			const eventId = nip19.noteEncode(search.quote);
+			initialValue = [
+				{
+					type: "paragraph",
+					children: [{ text: "" }],
+				},
+				{
+					type: "event",
+					eventId: `nostr:${eventId}`,
+					children: [{ text: "" }],
+				},
+			];
+		} else {
+			initialValue = [
+				{
+					type: "paragraph",
+					children: [{ text: "" }],
+				},
+			];
+		}
+
+		return { initialValue };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { reply_to } = Route.useSearch();
+	const { initialValue } = Route.useRouteContext();
+
+	const [editorValue, setEditorValue] = useState<EditorElement[]>(null);
+	const [loading, setLoading] = useState(false);
+	const [warning, setWarning] = useState({ enable: false, reason: "" });
+	const [difficulty, setDifficulty] = useState({ enable: false, num: 21 });
+	const [editor] = useState(() =>
+		withMentions(withNostrEvent(withImages(withReact(createEditor())))),
+	);
+
+	const reset = () => {
+		// @ts-expect-error, backlog
+		editor.children = [{ type: "paragraph", children: [{ text: "" }] }];
+		setEditorValue([{ type: "paragraph", children: [{ text: "" }] }]);
+	};
+
+	const serialize = (nodes: Descendant[]) => {
+		return nodes
+			.map((n) => {
+				// @ts-expect-error, backlog
+				if (n.type === "image") return n.url;
+				// @ts-expect-error, backlog
+				if (n.type === "event") return n.eventId;
+
+				// @ts-expect-error, backlog
+				if (n.children.length) {
+					// @ts-expect-error, backlog
+					return n.children
+						.map((n) => {
+							if (n.type === "mention") return n.npub;
+							return Node.string(n).trim();
+						})
+						.join(" ");
+				}
+
+				return Node.string(n);
+			})
+			.join("\n");
+	};
+
+	const publish = async () => {
+		try {
+			// start loading
+			setLoading(true);
+
+			const content = serialize(editor.children);
+			const eventId = await LumeEvent.publish(
+				content,
+				warning.enable && warning.reason.length ? warning.reason : null,
+				difficulty.enable && difficulty.num > 0 ? difficulty.num : null,
+				reply_to,
+			);
+
+			if (eventId) {
+				// stop loading
+				setLoading(false);
+				// reset form
+				reset();
+			}
+		} catch (e) {
+			setLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		setEditorValue(initialValue);
+	}, [initialValue]);
+
+	if (!editorValue) return null;
+
+	return (
+		<div className="flex flex-col w-full h-full">
+			<Slate editor={editor} initialValue={editorValue}>
+				<div data-tauri-drag-region className="h-9 shrink-0" />
+				<div className="flex flex-col flex-1 overflow-y-auto">
+					{reply_to?.length ? (
+						<div className="flex items-center gap-3 px-2.5 pb-3 border-b border-black/5 dark:border-white/5">
+							<div className="text-sm font-semibold shrink-0">Reply to:</div>
+							<ChildNote id={reply_to} />
+						</div>
+					) : null}
+					<div className="px-4 py-4 overflow-y-auto">
+						<Editable
+							key={JSON.stringify(editorValue)}
+							autoFocus={true}
+							autoCapitalize="none"
+							autoCorrect="none"
+							spellCheck={false}
+							renderElement={(props) => <Element {...props} />}
+							placeholder={
+								reply_to ? "Type your reply..." : "What're you up to?"
+							}
+							className="focus:outline-none"
+						/>
+					</div>
+				</div>
+				{warning.enable ? (
+					<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
+						<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
+							Reason:
+						</span>
+						<input
+							type="text"
+							placeholder="NSFW..."
+							value={warning.reason}
+							onChange={(e) =>
+								setWarning((prev) => ({ ...prev, reason: e.target.value }))
+							}
+							className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
+						/>
+					</div>
+				) : null}
+				{difficulty.enable ? (
+					<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
+						<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
+							Difficulty:
+						</span>
+						<input
+							type="text"
+							inputMode="numeric"
+							pattern="[0-9]"
+							onKeyDown={(event) => {
+								if (!/[0-9]/.test(event.key)) {
+									event.preventDefault();
+								}
+							}}
+							placeholder="21"
+							defaultValue={difficulty.num}
+							onChange={(e) =>
+								setWarning((prev) => ({ ...prev, num: Number(e.target.value) }))
+							}
+							className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
+						/>
+					</div>
+				) : null}
+				<div
+					data-tauri-drag-region
+					className="flex items-center w-full h-16 gap-4 px-4 border-t divide-x divide-black/5 dark:divide-white/5 shrink-0 border-black/5 dark:border-white/5"
+				>
+					<button
+						type="button"
+						onClick={() => publish()}
+						className="inline-flex items-center justify-center h-8 gap-1 px-2.5 text-sm font-medium rounded-lg bg-black/10 w-max hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+					>
+						{loading ? (
+							<Spinner className="size-4" />
+						) : (
+							<ComposeFilledIcon className="size-4" />
+						)}
+						Publish
+					</button>
+					<div className="inline-flex items-center flex-1 gap-2 pl-4">
+						<MediaButton />
+						<WarningButton setWarning={setWarning} />
+						<PowButton setDifficulty={setDifficulty} />
+					</div>
+				</div>
+			</Slate>
+		</div>
+	);
+}
+
+function ChildNote({ id }: { id: string }) {
+	const { isLoading, isError, data } = useEvent(id);
+
+	if (isLoading) {
+		return <Spinner className="size-5" />;
+	}
+
+	if (isError || !data) {
+		return <div>Event not found with your current relay set.</div>;
+	}
+
+	return (
+		<Note.Provider event={data}>
+			<Note.Root className="flex items-center gap-2">
+				<User.Provider pubkey={data.pubkey}>
+					<User.Root className="shrink-0">
+						<User.Avatar className="rounded-full size-8" />
+					</User.Root>
+				</User.Provider>
+				<div className="content-break line-clamp-1">{data.content}</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}
+
+const withNostrEvent = (editor: ReactEditor) => {
+	const { insertData, isVoid } = editor;
+
+	editor.isVoid = (element) => {
+		// @ts-expect-error, wtf
+		return element.type === "event" ? true : isVoid(element);
+	};
+
+	editor.insertData = (data) => {
+		const text = data.getData("text/plain");
+
+		if (text.startsWith("nevent") || text.startsWith("note")) {
+			insertNostrEvent(editor, text);
+		} else {
+			insertData(data);
+		}
+	};
+
+	return editor;
+};
+
+const withMentions = (editor: ReactEditor) => {
+	const { isInline, isVoid, markableVoid } = editor;
+
+	editor.isInline = (element) => {
+		// @ts-expect-error, wtf
+		return element.type === "mention" ? true : isInline(element);
+	};
+
+	editor.isVoid = (element) => {
+		// @ts-expect-error, wtf
+		return element.type === "mention" ? true : isVoid(element);
+	};
+
+	editor.markableVoid = (element) => {
+		// @ts-expect-error, wtf
+		return element.type === "mention" || markableVoid(element);
+	};
+
+	return editor;
+};
+
+const withImages = (editor: ReactEditor) => {
+	const { insertData, isVoid } = editor;
+
+	editor.isVoid = (element) => {
+		// @ts-expect-error, wtf
+		return element.type === "image" ? true : isVoid(element);
+	};
+
+	editor.insertData = (data) => {
+		const text = data.getData("text/plain");
+
+		if (isImageUrl(text)) {
+			insertImage(editor, text);
+		} else {
+			insertData(data);
+		}
+	};
+
+	return editor;
+};
+
+const Image = ({ attributes, element, children }) => {
+	const editor = useSlateStatic();
+	const selected = useSelected();
+	const focused = useFocused();
+	const path = ReactEditor.findPath(editor as ReactEditor, element);
+
+	return (
+		<div {...attributes}>
+			{children}
+			<img
+				src={element.url}
+				alt={element.url}
+				className={cn(
+					"my-2 h-auto w-1/2 rounded-lg object-cover ring-2 outline outline-1 -outline-offset-1 outline-black/15",
+					selected && focused ? "ring-blue-500" : "ring-transparent",
+				)}
+				onClick={() => Transforms.removeNodes(editor, { at: path })}
+				onKeyDown={() => Transforms.removeNodes(editor, { at: path })}
+			/>
+		</div>
+	);
+};
+
+const Mention = ({ attributes, element }) => {
+	const editor = useSlateStatic();
+	const path = ReactEditor.findPath(editor as ReactEditor, element);
+
+	return (
+		<span
+			{...attributes}
+			type="button"
+			contentEditable={false}
+			onClick={() => Transforms.removeNodes(editor, { at: path })}
+			className="inline-block text-blue-500 align-baseline hover:text-blue-600"
+		>{`@${element.name}`}</span>
+	);
+};
+
+const Event = ({ attributes, element, children }) => {
+	const editor = useSlateStatic();
+	const path = ReactEditor.findPath(editor as ReactEditor, element);
+
+	return (
+		<div {...attributes}>
+			{children}
+			<div
+				contentEditable={false}
+				className="relative my-2 user-select-none"
+				onClick={() => Transforms.removeNodes(editor, { at: path })}
+				onKeyDown={() => Transforms.removeNodes(editor, { at: path })}
+			>
+				<MentionNote eventId={element.eventId} openable={false} />
+			</div>
+		</div>
+	);
+};
+
+const Element = (props) => {
+	const { attributes, children, element } = props;
+
+	switch (element.type) {
+		case "image":
+			return <Image {...props} />;
+		case "mention":
+			return <Mention {...props} />;
+		case "event":
+			return <Event {...props} />;
+		default:
+			return (
+				<p {...attributes} className="text-[15px]">
+					{children}
+				</p>
+			);
+	}
+};

src/routes/events/$id.tsx

@@ -0,0 +1,146 @@
+import { Note } from "@/components/note";
+import { LumeEvent, NostrQuery } from "@/system";
+import type { Meta } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { createFileRoute } from "@tanstack/react-router";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { useEffect, useRef, useState } from "react";
+import { Virtualizer } from "virtua";
+import NoteParent from "./-components/parent";
+
+type Payload = {
+	raw: string;
+	parsed: Meta;
+};
+
+export const Route = createFileRoute("/events/$id")({
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getUserSettings();
+		return { settings };
+	},
+	loader: async ({ params }) => {
+		const event = await NostrQuery.getEvent(params.id);
+		return event;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const ref = useRef<HTMLDivElement>(null);
+
+	return (
+		<div className="h-full flex flex-col">
+			<div
+				data-tauri-drag-region
+				className="shrink-0 h-8 w-full border-b border-black/5 dark:border-white/5"
+			/>
+			<ScrollArea.Root
+				type={"scroll"}
+				scrollHideDelay={300}
+				className="overflow-hidden size-full flex-1"
+			>
+				<ScrollArea.Viewport ref={ref} className="h-full p-3">
+					<RootEvent />
+					<Virtualizer scrollRef={ref}>
+						<ReplyList />
+					</Virtualizer>
+				</ScrollArea.Viewport>
+				<ScrollArea.Scrollbar
+					className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+					orientation="vertical"
+				>
+					<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+				</ScrollArea.Scrollbar>
+				<ScrollArea.Corner className="bg-transparent" />
+			</ScrollArea.Root>
+		</div>
+	);
+}
+
+function RootEvent() {
+	const event = Route.useLoaderData();
+
+	return (
+		<Note.Provider event={event}>
+			<Note.Root className="bg-white dark:bg-black/10 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5">
+				<div className="flex items-center justify-between px-3 h-14">
+					<Note.User />
+					<Note.Menu />
+				</div>
+				<Note.ContentLarge className="px-3" />
+				<div className="flex items-center gap-2 px-3 mt-6 h-12 rounded-b-xl bg-neutral-50 dark:bg-white/5">
+					<Note.Reply large />
+					<Note.Repost large />
+					<Note.Zap large />
+				</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}
+
+function ReplyList() {
+	const event = Route.useLoaderData();
+	const [replies, setReplies] = useState<LumeEvent[]>([]);
+
+	useEffect(() => {
+		const unlistenEvent = getCurrentWindow().listen<Payload>(
+			"new_reply",
+			(data) => {
+				const event = LumeEvent.from(data.payload.raw, data.payload.parsed);
+				setReplies((prev) => [event, ...prev]);
+			},
+		);
+
+		const unlistenWindow = getCurrentWindow().onCloseRequested(async () => {
+			await event.unlistenEventReply();
+			await getCurrentWindow().destroy();
+		});
+
+		return () => {
+			unlistenEvent.then((f) => f());
+			unlistenWindow.then((f) => f());
+		};
+	}, []);
+
+	useEffect(() => {
+		let mounted = true;
+
+		async function getReplies() {
+			const data = await event.getEventReplies();
+
+			if (mounted) {
+				setReplies(data);
+				// Start listen for new reply
+				event.listenEventReply();
+			}
+		}
+
+		getReplies();
+
+		return () => {
+			mounted = false;
+		};
+	}, []);
+
+	return (
+		<div>
+			<div className="flex items-center text-sm font-semibold h-14 text-neutral-600 dark:text-white/30">
+				All replies
+			</div>
+			<div className="flex flex-col gap-3">
+				{!replies.length ? (
+					<div className="flex items-center justify-center w-full">
+						<div className="flex flex-col items-center justify-center gap-2 py-4">
+							<h3 className="text-3xl">👋</h3>
+							<p className="leading-none text-neutral-600 dark:text-neutral-400">
+								Be the first to Reply!
+							</p>
+						</div>
+					</div>
+				) : (
+					replies.map((event) => <NoteParent key={event.id} event={event} />)
+				)}
+			</div>
+		</div>
+	);
+}

src/routes/events/-components/child.tsx

@@ -0,0 +1,41 @@
+import { Note } from "@/components/note";
+import type { LumeEvent } from "@/system";
+import NoteParent from "./parent";
+import { memo } from "react";
+
+const NoteChild = memo(function NoteChild({ event }: { event: LumeEvent }) {
+	return (
+		<Note.Provider event={event}>
+			<Note.Root className="flex flex-col gap-6 mb-3">
+				<div>
+					<div className="flex items-center justify-between">
+						<Note.User />
+						<Note.Menu />
+					</div>
+					<div className="flex gap-2">
+						<div className="w-8 shrink-0" />
+						<div className="flex-1 flex flex-col gap-2">
+							<Note.ContentLarge />
+							<div className="flex items-center gap-1">
+								<Note.Reply />
+								<Note.Repost />
+								<Note.Zap />
+							</div>
+						</div>
+					</div>
+				</div>
+				{event.replies?.length ? (
+					<div className="flex flex-col gap-3 pl-4">
+						<div className="flex flex-col pl-6 border-l border-black/10 dark:border-white/10">
+							{event.replies?.map((childEvent) => (
+								<NoteParent key={childEvent.id} event={childEvent} />
+							))}
+						</div>
+					</div>
+				) : null}
+			</Note.Root>
+		</Note.Provider>
+	);
+});
+
+export default NoteChild;

src/routes/events/-components/parent.tsx

@@ -0,0 +1,41 @@
+import { Note } from "@/components/note";
+import type { LumeEvent } from "@/system";
+import { memo } from "react";
+import NoteChild from "./child";
+
+const NoteParent = memo(function NoteParent({ event }: { event: LumeEvent }) {
+	return (
+		<Note.Provider event={event}>
+			<Note.Root className="flex flex-col gap-6 mb-3">
+				<div>
+					<div className="flex items-center justify-between">
+						<Note.User />
+						<Note.Menu />
+					</div>
+					<div className="flex gap-2">
+						<div className="w-8 shrink-0" />
+						<div className="flex-1 flex flex-col gap-2">
+							<Note.ContentLarge />
+							<div className="flex items-center gap-1">
+								<Note.Reply />
+								<Note.Repost />
+								<Note.Zap />
+							</div>
+						</div>
+					</div>
+				</div>
+				{event.replies?.length ? (
+					<div className="flex flex-col gap-3 pl-4">
+						<div className="flex flex-col gap-3 pl-6 border-l border-black/10 dark:border-white/10">
+							{event.replies?.map((childEvent) => (
+								<NoteChild key={childEvent.id} event={childEvent} />
+							))}
+						</div>
+					</div>
+				) : null}
+			</Note.Root>
+		</Note.Provider>
+	);
+});
+
+export default NoteParent;

src/routes/global.tsx

@@ -0,0 +1,135 @@
+import { Spinner } from "@/components";
+import { ArrowRightCircleIcon } from "@/components";
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { type LumeEvent, NostrQuery } from "@/system";
+import { type ColumnRouteSearch, Kind } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { useCallback, useRef } from "react";
+import { Virtualizer } from "virtua";
+
+export const Route = createFileRoute("/global")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getUserSettings();
+		return { settings };
+	},
+	component: Screen,
+});
+
+export function Screen() {
+	const { label, account } = Route.useSearch();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: [label, account],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const events = await NostrQuery.getGlobalEvents(pageParam);
+			return events;
+		},
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flat(),
+		refetchOnWindowFocus: false,
+	});
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) return;
+			switch (event.kind) {
+				case Kind.Repost:
+					return <RepostNote key={event.id} event={event} className="mb-3" />;
+				default: {
+					if (event.isConversation) {
+						return (
+							<Conversation key={event.id} className="mb-3" event={event} />
+						);
+					}
+					if (event.isQuote) {
+						return <Quote key={event.id} event={event} className="mb-3" />;
+					}
+					return <TextNote key={event.id} event={event} className="mb-3" />;
+				}
+			}
+		},
+		[data],
+	);
+
+	return (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full"
+		>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
+				<Virtualizer scrollRef={ref}>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
+							<div className="flex items-center justify-center gap-2">
+								<Spinner className="size-5" />
+								<span className="text-sm font-medium">
+									Getting new notes...
+								</span>
+							</div>
+						</div>
+					) : null}
+					{isLoading ? (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
+							<Spinner className="size-5" />
+							<span className="text-sm font-medium">Loading...</span>
+						</div>
+					) : !data.length ? (
+						<div className="flex items-center justify-center">
+							Yo. You're catching up on all the things happening around you.
+						</div>
+					) : (
+						data.map((item) => renderItem(item))
+					)}
+					{data?.length && hasNextPage ? (
+						<div>
+							<button
+								type="button"
+								onClick={() => fetchNextPage()}
+								disabled={isFetchingNextPage || isLoading}
+								className="inline-flex items-center justify-center w-full gap-2 px-3 font-medium h-9 rounded-xl bg-black/5 hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+							>
+								{isFetchingNextPage ? (
+									<Spinner className="size-5" />
+								) : (
+									<>
+										<ArrowRightCircleIcon className="size-5" />
+										Load more
+									</>
+								)}
+							</button>
+						</div>
+					) : null}
+				</Virtualizer>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar
+				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+				orientation="vertical"
+			>
+				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner className="bg-transparent" />
+		</ScrollArea.Root>
+	);
+}

src/routes/group.tsx

@@ -0,0 +1,149 @@
+import { Spinner } from "@/components";
+import { ArrowRightCircleIcon } from "@/components";
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { type LumeEvent, NostrQuery } from "@/system";
+import { type ColumnRouteSearch, Kind } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { useCallback, useRef } from "react";
+import { Virtualizer } from "virtua";
+
+export const Route = createFileRoute("/group")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async ({ search }) => {
+		const key = `lume:group:${search.label}`;
+		const groups: string[] = await NostrQuery.getNstore(key);
+		const settings = await NostrQuery.getUserSettings();
+
+		if (!groups?.length) {
+			throw redirect({
+				to: "/create-group",
+				search: {
+					...search,
+					redirect: "/group",
+				},
+			});
+		}
+
+		return { groups, settings };
+	},
+	component: Screen,
+});
+
+export function Screen() {
+	const { label, account } = Route.useSearch();
+	const { groups } = Route.useRouteContext();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: [label, account],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const events = await NostrQuery.getGroupEvents(groups, pageParam);
+			return events;
+		},
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flat(),
+		refetchOnWindowFocus: false,
+	});
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) return;
+			switch (event.kind) {
+				case Kind.Repost:
+					return <RepostNote key={event.id} event={event} className="mb-3" />;
+				default: {
+					if (event.isConversation) {
+						return (
+							<Conversation key={event.id} className="mb-3" event={event} />
+						);
+					}
+					if (event.isQuote) {
+						return <Quote key={event.id} event={event} className="mb-3" />;
+					}
+					return <TextNote key={event.id} event={event} className="mb-3" />;
+				}
+			}
+		},
+		[data],
+	);
+
+	return (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full"
+		>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
+				<Virtualizer scrollRef={ref}>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
+							<div className="flex items-center justify-center gap-2">
+								<Spinner className="size-5" />
+								<span className="text-sm font-medium">
+									Getting new notes...
+								</span>
+							</div>
+						</div>
+					) : null}
+					{isLoading ? (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
+							<Spinner className="size-5" />
+							<span className="text-sm font-medium">Loading...</span>
+						</div>
+					) : !data.length ? (
+						<div className="flex items-center justify-center">
+							Yo. You're catching up on all the things happening around you.
+						</div>
+					) : (
+						data.map((item) => renderItem(item))
+					)}
+					{data?.length && hasNextPage ? (
+						<div>
+							<button
+								type="button"
+								onClick={() => fetchNextPage()}
+								disabled={isFetchingNextPage || isLoading}
+								className="inline-flex items-center justify-center w-full gap-2 px-3 font-medium h-9 rounded-xl bg-black/5 hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+							>
+								{isFetchingNextPage ? (
+									<Spinner className="size-5" />
+								) : (
+									<>
+										<ArrowRightCircleIcon className="size-5" />
+										Load more
+									</>
+								)}
+							</button>
+						</div>
+					) : null}
+				</Virtualizer>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar
+				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+				orientation="vertical"
+			>
+				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner className="bg-transparent" />
+		</ScrollArea.Root>
+	);
+}

src/routes/index.tsx

@@ -0,0 +1,140 @@
+import { checkForAppUpdates, displayNpub } from "@/commons";
+import { Spinner } from "@/components";
+import { PlusIcon, RelayIcon } from "@/components";
+import { User } from "@/components/user";
+import { NostrAccount } from "@/system";
+import { Link } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+
+export const Route = createFileRoute("/")({
+	beforeLoad: async () => {
+		// Check for app updates
+		// TODO: move this function to rust
+		await checkForAppUpdates(true);
+
+		// Get all accounts
+		// TODO: use emit & listen
+		const accounts = await NostrAccount.getAccounts();
+
+		if (accounts.length < 1) {
+			throw redirect({
+				to: "/landing",
+				replace: true,
+			});
+		}
+
+		return { accounts };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+	const context = Route.useRouteContext();
+
+	const [loading, setLoading] = useState({ npub: "", status: false });
+
+	const select = async (npub: string) => {
+		try {
+			setLoading({ npub, status: true });
+
+			const status = await NostrAccount.loadAccount(npub);
+
+			if (status) {
+				return navigate({
+					to: "/$account/home",
+					params: { account: npub },
+					replace: true,
+				});
+			}
+		} catch (e) {
+			setLoading({ npub: "", status: false });
+			await message(String(e), {
+				title: "Account",
+				kind: "error",
+			});
+		}
+	};
+
+	const currentDate = new Date().toLocaleString("default", {
+		weekday: "long",
+		month: "long",
+		day: "numeric",
+	});
+
+	return (
+		<div
+			data-tauri-drag-region
+			className="relative flex flex-col items-center justify-between w-full h-full"
+		>
+			<div
+				data-tauri-drag-region
+				className="absolute top-0 left-0 h-14 w-full"
+			/>
+			<div className="flex items-end justify-center flex-1 w-full px-4 pb-10">
+				<div className="text-center">
+					<h2 className="mb-1 text-lg text-neutral-700 dark:text-neutral-300">
+						{currentDate}
+					</h2>
+					<h2 className="text-2xl font-semibold">Welcome back!</h2>
+				</div>
+			</div>
+			<div className="flex flex-col items-center flex-1 w-full gap-3">
+				<div className="flex flex-col w-full max-w-sm mx-auto overflow-hidden bg-white divide-y divide-neutral-100 dark:divide-white/5 rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					{context.accounts.map((account) => (
+						<div
+							key={account}
+							onClick={() => select(account)}
+							onKeyDown={() => select(account)}
+							className="flex items-center justify-between hover:bg-black/5 dark:hover:bg-white/5"
+						>
+							<User.Provider pubkey={account}>
+								<User.Root className="flex items-center gap-2.5 p-3">
+									<User.Avatar className="rounded-full size-10" />
+									<div className="inline-flex flex-col items-start">
+										<User.Name className="max-w-[6rem] truncate font-medium leading-tight" />
+										<span className="text-sm text-neutral-700 dark:text-neutral-300">
+											{displayNpub(account, 16)}
+										</span>
+									</div>
+								</User.Root>
+							</User.Provider>
+							<div className="inline-flex items-center justify-center size-10">
+								{loading.npub === account ? (
+									loading.status ? (
+										<Spinner />
+									) : null
+								) : null}
+							</div>
+						</div>
+					))}
+					<Link
+						to="/landing"
+						className="flex items-center justify-between hover:bg-black/5 dark:hover:bg-white/5"
+					>
+						<div className="flex items-center gap-2.5 p-3">
+							<div className="inline-flex items-center justify-center rounded-full size-10 bg-neutral-200 dark:bg-white/10">
+								<PlusIcon className="size-5" />
+							</div>
+							<span className="max-w-[6rem] truncate text-sm font-medium leading-tight">
+								Add account
+							</span>
+						</div>
+					</Link>
+				</div>
+				<div className="w-full max-w-sm mx-auto">
+					<Link
+						to="/bootstrap-relays"
+						className="inline-flex items-center justify-center w-full h-8 gap-2 px-2 text-xs font-medium rounded-lg bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 text-neutral-700 dark:text-white/40"
+					>
+						<RelayIcon className="size-4" />
+						Custom Bootstrap Relays
+					</Link>
+				</div>
+			</div>
+			<div className="flex-1" />
+		</div>
+	);
+}

src/routes/landing.lazy.tsx

@@ -0,0 +1,62 @@
+import { KeyIcon, RemoteIcon } from "@/components";
+import { Link, createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/landing")({
+	component: Screen,
+});
+
+function Screen() {
+	return (
+		<div
+			data-tauri-drag-region
+			className="flex flex-col items-center justify-center w-screen h-screen"
+		>
+			<div className="w-full max-w-xs mx-auto lg:max-w-md">
+				<div className="flex flex-col w-full gap-2 px-2 bg-white rounded-xl shadow-primary dark:bg-white/20 dark:ring-1 ring-neutral-800/50">
+					<div className="flex items-center h-20 border-b border-neutral-100 dark:border-white/5">
+						<Link
+							to="/auth/create-profile"
+							className="flex items-center justify-center w-full gap-2 px-2 rounded-lg h-14 hover:bg-neutral-100 dark:hover:bg-white/10"
+						>
+							<div className="inline-flex items-center justify-center rounded-full size-9 shrink-0">
+								<img
+									src="/icon.jpeg"
+									alt="App Icon"
+									className="object-cover rounded-full size-9"
+								/>
+							</div>
+							<div className="inline-flex flex-col flex-1">
+								<span className="font-semibold leading-tight">
+									Create new account
+								</span>
+								<span className="text-sm leading-tight text-neutral-500">
+									Use everywhere
+								</span>
+							</div>
+						</Link>
+					</div>
+					<div className="flex flex-col gap-1 pb-2.5">
+						<Link
+							to="/auth/import"
+							className="inline-flex items-center w-full gap-2 px-2 rounded-lg h-11 hover:bg-neutral-100 dark:hover:bg-white/10"
+						>
+							<div className="inline-flex items-center justify-center size-9">
+								<KeyIcon className="size-5 text-neutral-600 dark:text-neutral-400" />
+							</div>
+							Login with Private Key
+						</Link>
+						<Link
+							to="/auth/remote"
+							className="inline-flex items-center w-full gap-2 px-2 rounded-lg h-11 hover:bg-neutral-100 dark:hover:bg-white/10"
+						>
+							<div className="inline-flex items-center justify-center size-9">
+								<RemoteIcon className="size-5 text-neutral-600 dark:text-neutral-400" />
+							</div>
+							Nostr Connect
+						</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/routes/newsfeed.tsx

@@ -0,0 +1,225 @@
+import { Spinner } from "@/components";
+import { ArrowRightCircleIcon, ArrowUpIcon } from "@/components";
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { LumeEvent, NostrAccount, NostrQuery } from "@/system";
+import { type ColumnRouteSearch, Kind, type Meta } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { type InfiniteData, useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { listen } from "@tauri-apps/api/event";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Virtualizer } from "virtua";
+
+type Payload = {
+	raw: string;
+	parsed: Meta;
+};
+
+export const Route = createFileRoute("/newsfeed")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async ({ search }) => {
+		const isContactListEmpty = await NostrAccount.isContactListEmpty();
+		const settings = await NostrQuery.getUserSettings();
+
+		if (isContactListEmpty) {
+			throw redirect({
+				to: "/create-newsfeed/users",
+				search: {
+					...search,
+					redirect: "/newsfeed",
+				},
+			});
+		}
+
+		return { settings };
+	},
+	component: Screen,
+});
+
+export function Screen() {
+	const { queryClient } = Route.useRouteContext();
+	const { label, account } = Route.useSearch();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: [label, account],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const events = await NostrQuery.getLocalEvents(pageParam);
+			return events;
+		},
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flat(),
+	});
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) return;
+			switch (event.kind) {
+				case Kind.Repost:
+					return <RepostNote key={event.id} event={event} className="mb-3" />;
+				default: {
+					if (event.isConversation) {
+						return (
+							<Conversation key={event.id} className="mb-3" event={event} />
+						);
+					}
+					if (event.isQuote) {
+						return <Quote key={event.id} event={event} className="mb-3" />;
+					}
+					return <TextNote key={event.id} event={event} className="mb-3" />;
+				}
+			}
+		},
+		[data],
+	);
+
+	useEffect(() => {
+		const unlisten = listen("synced", async () => {
+			await queryClient.invalidateQueries({ queryKey: [label, account] });
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, []);
+
+	return (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full"
+		>
+			<ScrollArea.Viewport ref={ref} className="relative h-full px-3 pb-3">
+				<Listerner />
+				<Virtualizer scrollRef={ref}>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
+							<div className="flex items-center justify-center gap-2">
+								<Spinner className="size-5" />
+								<span className="text-sm font-medium">
+									Getting new notes...
+								</span>
+							</div>
+						</div>
+					) : null}
+					{isLoading ? (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
+							<Spinner className="size-5" />
+							<span className="text-sm font-medium">Loading...</span>
+						</div>
+					) : !data.length ? (
+						<div className="flex items-center justify-center">
+							Yo. You're catching up on all the things happening around you.
+						</div>
+					) : (
+						data.map((item) => renderItem(item))
+					)}
+					{data?.length && hasNextPage ? (
+						<div>
+							<button
+								type="button"
+								onClick={() => fetchNextPage()}
+								disabled={isFetchingNextPage || isLoading}
+								className="inline-flex items-center justify-center w-full gap-2 px-3 font-medium h-9 rounded-xl bg-black/5 hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+							>
+								{isFetchingNextPage ? (
+									<Spinner className="size-5" />
+								) : (
+									<>
+										<ArrowRightCircleIcon className="size-5" />
+										Load more
+									</>
+								)}
+							</button>
+						</div>
+					) : null}
+				</Virtualizer>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar
+				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+				orientation="vertical"
+			>
+				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner className="bg-transparent" />
+		</ScrollArea.Root>
+	);
+}
+
+function Listerner() {
+	const { queryClient } = Route.useRouteContext();
+	const { label, account } = Route.useSearch();
+
+	const [events, setEvents] = useState<LumeEvent[]>([]);
+
+	const pushNewEvents = async () => {
+		await queryClient.setQueryData(
+			[label, account],
+			(oldData: InfiniteData<LumeEvent[], number> | undefined) => {
+				const firstPage = oldData?.pages[0];
+
+				if (firstPage) {
+					return {
+						...oldData,
+						pages: [
+							{
+								...firstPage,
+								posts: [...events, ...firstPage],
+							},
+							...oldData.pages.slice(1),
+						],
+					};
+				}
+			},
+		);
+
+		await queryClient.invalidateQueries({ queryKey: [label, account] });
+	};
+
+	useEffect(() => {
+		const unlisten = getCurrentWindow().listen<Payload>("new_event", (data) => {
+			const event = LumeEvent.from(data.payload.raw, data.payload.parsed);
+			setEvents((prev) => [event, ...prev]);
+		});
+
+		NostrQuery.listenLocalEvent().then(() => console.log("listen"));
+
+		return () => {
+			unlisten.then((f) => f());
+			NostrQuery.unlisten().then(() => console.log("unlisten"));
+		};
+	}, []);
+
+	if (!events?.length) return null;
+
+	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"
+			>
+				<ArrowUpIcon className="size-4" />
+				{events.length} new notes
+			</button>
+		</div>
+	);
+}

src/routes/onboarding.tsx

@@ -0,0 +1,120 @@
+import type { ColumnRouteSearch } from "@/types";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/onboarding")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	return (
+		<div className="h-full flex flex-col py-6 gap-6 overflow-y-auto scrollbar-none">
+			<div className="text-center flex flex-col items-center justify-center">
+				<h1 className="text-2xl font-serif font-medium">Welcome to Lume</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Here are a few suggestions to help you get started.
+				</p>
+			</div>
+			<div className="px-3 flex flex-col gap-3">
+				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10">
+					<div className="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
+						01.
+					</div>
+					<div className="h-16 flex items-center justify-center shrink-0 px-3 text-lg select-text">
+						Navigate between columns.
+					</div>
+					<div className="flex-1 w-3/4 h-full pb-10">
+						<video
+							className="h-auto w-full aspect-square rounded-lg shadow-md transform"
+							controls
+							muted
+							preload="none"
+							poster="/poster_1.jpeg"
+						>
+							<source
+								src="https://video.nostr.build/692f71e2be47ecfc29edcbdaa198cc5979bfb9c900f05d78682895dd546d8d4f.mp4"
+								type="video/mp4"
+							/>
+							Your browser does not support the video tag.
+						</video>
+					</div>
+				</div>
+				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10">
+					<div className="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
+						02.
+					</div>
+					<div className="h-16 flex items-center justify-center shrink-0 px-3 text-lg select-text">
+						Switch between accounts.
+					</div>
+					<div className="flex-1 w-3/4 h-full pb-10">
+						<video
+							className="h-auto w-full aspect-square rounded-lg shadow-md transform"
+							controls
+							muted
+							preload="none"
+							poster="/poster_2.jpeg"
+						>
+							<source
+								src="https://video.nostr.build/d33962520506d86acfb4b55a7b265821e10ae637f5ec830a173b7e6092b16ec8.mp4"
+								type="video/mp4"
+							/>
+							Your browser does not support the video tag.
+						</video>
+					</div>
+				</div>
+				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10">
+					<div className="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
+						03.
+					</div>
+					<div className="h-16 flex items-center justify-center shrink-0 px-3 text-lg select-text">
+						Open Lume Store.
+					</div>
+					<div className="flex-1 w-3/4 h-full pb-10">
+						<video
+							className="h-auto w-full aspect-square rounded-lg shadow-md transform"
+							controls
+							muted
+							preload="none"
+							poster="/poster_3.jpeg"
+						>
+							<source
+								src="https://video.nostr.build/927abbfde2097e470ac751181b1db456b7e4b9149550408efff1a966a7ffb9a8.mp4"
+								type="video/mp4"
+							/>
+							Your browser does not support the video tag.
+						</video>
+					</div>
+				</div>
+				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10">
+					<div className="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
+						04.
+					</div>
+					<div className="h-16 flex items-center justify-center shrink-0 px-3 text-lg select-text">
+						Use the Tray Menu.
+					</div>
+					<div className="flex-1 w-3/4 h-full pb-10">
+						<video
+							className="h-auto w-full rounded-lg shadow-md transform"
+							controls
+							muted
+							preload="none"
+							poster="/poster_4.jpeg"
+						>
+							<source
+								src="https://video.nostr.build/513de4824b6abaf7e9698c1dad2f68096574356848c0c200bc8cb8074df29410.mp4"
+								type="video/mp4"
+							/>
+							Your browser does not support the video tag.
+						</video>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/routes/panel.$account.tsx

@@ -0,0 +1,361 @@
+import {
+	checkForAppUpdates,
+	decodeZapInvoice,
+	formatCreatedAt,
+} from "@/commons";
+import { Spinner } from "@/components";
+import { HorizontalDotsIcon, InfoIcon, RepostIcon } from "@/components";
+import { Note } from "@/components/note";
+import { User } from "@/components/user";
+import { type LumeEvent, LumeWindow, NostrQuery, useEvent } from "@/system";
+import { Kind } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import * as Tabs from "@radix-ui/react-tabs";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { open } from "@tauri-apps/plugin-shell";
+import { type ReactNode, useCallback, useEffect, useRef } from "react";
+import { Virtualizer } from "virtua";
+
+export const Route = createFileRoute("/panel/$account")({
+	beforeLoad: async ({ context }) => {
+		console.log(context);
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { account } = Route.useParams();
+	const { queryClient } = Route.useRouteContext();
+	const { isLoading, data } = useQuery({
+		queryKey: ["notification", account],
+		queryFn: async () => {
+			console.log(queryClient);
+			const events = await NostrQuery.getNotifications();
+			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 };
+		},
+	});
+
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Open Lume",
+				action: () => LumeWindow.openMainWindow(),
+			}),
+			MenuItem.new({
+				text: "New Post",
+				action: () => LumeWindow.openEditor(),
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "About Lume",
+				action: async () => await open("https://lume.nu"),
+			}),
+			MenuItem.new({
+				text: "Check for Updates",
+				action: async () => await checkForAppUpdates(false),
+			}),
+			MenuItem.new({
+				text: "Settings",
+				action: () => LumeWindow.openSettings(),
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Quit",
+				action: async () => await invoke("force_quit"),
+			}),
+		]);
+
+		const menu = await Menu.new({
+			items: menuItems,
+		});
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
+
+	useEffect(() => {
+		const unlisten = getCurrentWindow().listen("notification", 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());
+		};
+	}, []);
+
+	if (isLoading) {
+		return (
+			<div className="size-full flex items-center justify-center">
+				<Spinner />
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col size-full overflow-hidden">
+			<div className="flex items-center justify-between px-4 border-b h-11 shrink-0 border-black/5 dark:border-white/5">
+				<div>
+					<h1 className="text-sm font-semibold">Notifications</h1>
+				</div>
+				<div className="inline-flex items-center gap-2">
+					<User.Provider pubkey={account}>
+						<User.Root>
+							<User.Avatar className="rounded-full size-7" />
+						</User.Root>
+					</User.Provider>
+					<button
+						type="button"
+						onClick={(e) => showContextMenu(e)}
+						className="inline-flex items-center justify-center rounded-full size-7 bg-black/5 dark:bg-white/5"
+					>
+						<HorizontalDotsIcon className="size-4" />
+					</button>
+				</div>
+			</div>
+			<Tabs.Root defaultValue="replies" className="flex flex-col h-full">
+				<Tabs.List className="h-8 shrink-0 flex items-center">
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-8 items-center justify-center gap-2 px-2 text-sm font-medium border-b border-black/10 dark:border-white/10 data-[state=active]:border-black/30 dark:data-[state=active]:border-white/30 data-[state=inactive]:opacity-50"
+						value="replies"
+					>
+						Replies
+					</Tabs.Trigger>
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-8 items-center justify-center gap-2 px-2 text-sm font-medium border-b border-black/10 dark:border-white/10 data-[state=active]:border-black/30 dark:data-[state=active]:border-white/30 data-[state=inactive]:opacity-50"
+						value="reactions"
+					>
+						Reactions
+					</Tabs.Trigger>
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-8 items-center justify-center gap-2 px-2 text-sm font-medium border-b border-black/10 dark:border-white/10 data-[state=active]:border-black/30 dark:data-[state=active]:border-white/30 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) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+							<TextNote key={event.id + index} event={event} />
+						))}
+					</Tab>
+					<Tab value="reactions">
+						{[...data.reactions.entries()].map(([root, events]) => (
+							<div
+								key={root}
+								className="flex flex-col gap-1 p-2 mb-2 rounded-lg shrink-0 bg-black/10 dark:bg-white/10"
+							>
+								<div className="flex flex-col flex-1 min-w-0 gap-2">
+									<div className="flex items-center gap-2 pb-2 border-b border-black/5 dark:border-white/5">
+										<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-8 bg-black/10 dark:bg-white/10 p-[2px]">
+													<User.Avatar className="flex-1 rounded-full size-7" />
+													<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-7">
+														{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="flex flex-col gap-1 p-2 mb-2 rounded-lg shrink-0 bg-black/10 dark:bg-white/10"
+							>
+								<div className="flex flex-col flex-1 min-w-0 gap-2">
+									<div className="flex items-center gap-2 pb-2 border-b border-black/5 dark:border-white/5">
+										<RootNote id={root} />
+									</div>
+									<div className="flex flex-wrap items-center gap-3">
+										{events.map((event) => (
+											<User.Provider
+												key={event.id}
+												pubkey={event.tags.find((tag) => tag[0] === "P")[1]}
+											>
+												<User.Root className="shrink-0 flex gap-1.5 rounded-full h-8 bg-black/10 dark:bg-white/10 p-[2px]">
+													<User.Avatar className="rounded-full size-7" />
+													<div className="flex-1 h-7 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-sm truncate">
+														₿ {decodeZapInvoice(event.tags).bitcoinFormatted}
+													</div>
+												</User.Root>
+											</User.Provider>
+										))}
+									</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 px-2 pt-2">
+				<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">
+					<InfoIcon className="size-5" />
+				</div>
+				<p className="text-sm text-red-500">
+					Event not found with your current relay set
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<Note.Provider event={data}>
+			<Note.Root className="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 (
+		<Note.Provider event={event}>
+			<Note.Root className="flex flex-col p-2 mb-2 rounded-lg shrink-0 bg-black/10 dark:bg-white/10">
+				<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>
+	);
+}

src/routes/search.notes.tsx

@@ -0,0 +1,96 @@
+import { Spinner } from "@/components";
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { LumeEvent, NostrQuery } from "@/system";
+import { Kind, type NostrEvent } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { fetch } from "@tauri-apps/plugin-http";
+import { useCallback, useRef } from "react";
+import { Virtualizer } from "virtua";
+
+type Search = {
+	query: string;
+};
+
+export const Route = createFileRoute("/search/notes")({
+	validateSearch: (search: Record<string, string>): Search => {
+		return {
+			query: search.query,
+		};
+	},
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getUserSettings();
+		return { settings };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { query } = Route.useSearch();
+	const { isLoading, data } = useQuery({
+		queryKey: ["search", query],
+		queryFn: async () => {
+			try {
+				const res = await fetch(
+					`https://api.nostr.wine/search?query=${query}&kind=1&limit=50`,
+				);
+				const content = await res.json();
+				const events = content.data as NostrEvent[];
+				const lumeEvents = await Promise.all(
+					events.map(async (item): Promise<LumeEvent> => {
+						const event = await LumeEvent.build(item);
+						return event;
+					}),
+				);
+
+				return lumeEvents.sort((a, b) => b.created_at - a.created_at);
+			} catch (e) {
+				throw new Error(e);
+			}
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) return;
+			switch (event.kind) {
+				case Kind.Repost:
+					return <RepostNote key={event.id} event={event} className="mb-3" />;
+				default: {
+					if (event.isConversation) {
+						return (
+							<Conversation key={event.id} className="mb-3" event={event} />
+						);
+					}
+					if (event.isQuote) {
+						return <Quote key={event.id} event={event} className="mb-3" />;
+					}
+					return <TextNote key={event.id} event={event} className="mb-3" />;
+				}
+			}
+		},
+		[data],
+	);
+
+	return (
+		<ScrollArea.Viewport ref={ref} className="h-full p-3">
+			<Virtualizer scrollRef={ref}>
+				{isLoading ? (
+					<div className="flex items-center justify-center w-full h-11 gap-2">
+						<Spinner className="size-5" />
+						<span className="text-sm font-medium">Searching...</span>
+					</div>
+				) : (
+					data.map((item) => renderItem(item))
+				)}
+			</Virtualizer>
+		</ScrollArea.Viewport>
+	);
+}

src/routes/search.tsx

@@ -0,0 +1,44 @@
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+type Search = {
+	query: string;
+};
+
+export const Route = createFileRoute("/search")({
+	validateSearch: (search: Record<string, string>): Search => {
+		return {
+			query: search.query,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { query } = Route.useSearch();
+
+	return (
+		<div className="flex flex-col h-full">
+			<div
+				data-tauri-drag-region
+				className="shrink-0 flex items-end gap-1 h-20 px-3 pb-3 w-full border-b border-black/10 dark:border-white/10"
+			>
+				Search result for: <span className="font-semibold">{query}</span>
+			</div>
+			<ScrollArea.Root
+				type={"scroll"}
+				scrollHideDelay={300}
+				className="overflow-hidden size-full flex-1"
+			>
+				<Outlet />
+				<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/search.users.tsx

@@ -0,0 +1,101 @@
+import { Spinner } from "@/components";
+import { User } from "@/components/user";
+import { LumeWindow, NostrQuery } from "@/system";
+import type { NostrEvent } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { fetch } from "@tauri-apps/plugin-http";
+import { useRef } from "react";
+import { Virtualizer } from "virtua";
+
+type Search = {
+	query: string;
+};
+
+type UserItem = {
+	pubkey: string;
+	profile: string;
+};
+
+export const Route = createFileRoute("/search/users")({
+	validateSearch: (search: Record<string, string>): Search => {
+		return {
+			query: search.query,
+		};
+	},
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getUserSettings();
+		return { settings };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { query } = Route.useSearch();
+	const { isLoading, data } = useQuery({
+		queryKey: ["search", query],
+		queryFn: async () => {
+			try {
+				const res = await fetch(
+					`https://api.nostr.wine/search?query=${query}&kind=0&limit=100`,
+				);
+				const content = await res.json();
+				const events = content.data as NostrEvent[];
+				const users: UserItem[] = events.map((ev) => ({
+					pubkey: ev.pubkey,
+					profile: ev.content,
+				}));
+
+				return users;
+			} catch (e) {
+				throw new Error(e);
+			}
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	return (
+		<ScrollArea.Viewport ref={ref} className="h-full px-3 pt-3">
+			<Virtualizer scrollRef={ref}>
+				{isLoading ? (
+					<div className="flex items-center justify-center w-full h-11 gap-2">
+						<Spinner className="size-5" />
+						<span className="text-sm font-medium">Searching...</span>
+					</div>
+				) : (
+					data.map((item) => (
+						<div
+							key={item.pubkey}
+							className="w-full p-3 mb-2 overflow-hidden bg-white rounded-lg h-max dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
+						>
+							<User.Provider pubkey={item.pubkey} embedProfile={item.profile}>
+								<User.Root className="flex flex-col w-full h-full gap-2">
+									<div className="flex items-center justify-between">
+										<div className="flex items-center gap-2">
+											<User.Avatar className="rounded-full size-7" />
+											<div className="inline-flex items-center gap-1">
+												<User.Name className="text-sm leadning-tight max-w-[15rem] truncate font-semibold" />
+												<User.NIP05 />
+											</div>
+										</div>
+										<button
+											type="button"
+											onClick={() => LumeWindow.openProfile(item.pubkey)}
+											className="inline-flex items-center justify-center w-16 text-sm font-medium rounded-md h-7 bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+										>
+											View
+										</button>
+									</div>
+									<User.About className="select-text line-clamp-3 max-w-none text-neutral-800 dark:text-neutral-400" />
+								</User.Root>
+							</User.Provider>
+						</div>
+					))
+				)}
+			</Virtualizer>
+		</ScrollArea.Viewport>
+	);
+}

src/routes/settings.tsx

@@ -0,0 +1,116 @@
+import { cn } from "@/commons";
+import {
+	RelayIcon,
+	SecureIcon,
+	SettingsIcon,
+	UserIcon,
+	ZapIcon,
+} from "@/components";
+import { Link } from "@tanstack/react-router";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/settings")({
+	component: Screen,
+});
+
+function Screen() {
+	return (
+		<div className="flex flex-col w-full h-full">
+			<div
+				data-tauri-drag-region
+				className="flex items-center justify-center w-full h-20 border-b shrink-0 border-black/10 dark:border-white/10"
+			>
+				<div className="flex items-center gap-1">
+					<Link to="/settings/general">
+						{({ isActive }) => {
+							return (
+								<div
+									className={cn(
+										"flex h-14 w-20 shrink-0 flex-col items-center justify-center 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",
+									)}
+								>
+									<SettingsIcon className="size-5 shrink-0" />
+									<p className="text-sm font-medium">General</p>
+								</div>
+							);
+						}}
+					</Link>
+					<Link to="/settings/user">
+						{({ isActive }) => {
+							return (
+								<div
+									className={cn(
+										"flex h-14 w-20 shrink-0 flex-col items-center justify-center 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",
+									)}
+								>
+									<UserIcon className="size-5 shrink-0" />
+									<p className="text-sm font-medium">User</p>
+								</div>
+							);
+						}}
+					</Link>
+					<Link to="/settings/relay">
+						{({ isActive }) => {
+							return (
+								<div
+									className={cn(
+										"flex h-14 w-20 shrink-0 flex-col items-center justify-center 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",
+									)}
+								>
+									<RelayIcon className="size-5 shrink-0" />
+									<p className="text-sm font-medium">Relay</p>
+								</div>
+							);
+						}}
+					</Link>
+					<Link to="/settings/wallet">
+						{({ isActive }) => {
+							return (
+								<div
+									className={cn(
+										"flex h-14 w-20 shrink-0 flex-col items-center justify-center 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",
+									)}
+								>
+									<ZapIcon className="size-5 shrink-0" />
+									<p className="text-sm font-medium">Wallet</p>
+								</div>
+							);
+						}}
+					</Link>
+					<Link to="/settings/backup">
+						{({ isActive }) => {
+							return (
+								<div
+									className={cn(
+										"flex h-14 w-20 shrink-0 flex-col items-center justify-center 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",
+									)}
+								>
+									<SecureIcon className="size-5 shrink-0" />
+									<p className="text-sm font-medium">Backup</p>
+								</div>
+							);
+						}}
+					</Link>
+				</div>
+			</div>
+			<div className="flex-1 w-full px-5 py-4 overflow-y-auto scrollbar-none">
+				<Outlet />
+			</div>
+		</div>
+	);
+}

src/routes/settings/backup.tsx

@@ -0,0 +1,74 @@
+import { displayNpub } from "@/commons";
+import { User } from "@/components/user";
+import { NostrAccount } from "@/system";
+import { createFileRoute } 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";
+
+interface Account {
+	npub: string;
+	nsec: string;
+}
+
+export const Route = createFileRoute("/settings/backup")({
+	beforeLoad: async () => {
+		const accounts = await NostrAccount.getAccounts();
+		return { accounts };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { accounts } = Route.useRouteContext();
+
+	return (
+		<div className="w-full max-w-xl mx-auto">
+			<div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
+				{accounts.map((account) => (
+					<Account key={account} account={account} />
+				))}
+			</div>
+		</div>
+	);
+}
+
+function Account({ account }: { account: string }) {
+	const [copied, setCopied] = useState(false);
+
+	const copyKey = async () => {
+		try {
+			const data: string = await invoke("get_private_key", { npub: account });
+			await writeText(data);
+			setCopied(true);
+		} catch (e) {
+			await message(String(e), { title: "Backup", kind: "error" });
+		}
+	};
+
+	return (
+		<div className="flex items-center justify-between gap-2 py-3">
+			<User.Provider pubkey={account}>
+				<User.Root className="flex items-center gap-2">
+					<User.Avatar className="rounded-full size-8" />
+					<div className="flex flex-col">
+						<User.Name className="text-sm leading-tight" />
+						<span className="text-sm leading-tight text-black/50 dark:text-white/50">
+							{displayNpub(account, 16)}
+						</span>
+					</div>
+				</User.Root>
+			</User.Provider>
+			<div className="flex items-center gap-2">
+				<button
+					type="button"
+					onClick={() => copyKey()}
+					className="inline-flex items-center justify-center h-8 text-sm font-medium rounded-md w-36 bg-neutral-200 hover:bg-neutral-300 dark:bg-white/10 dark:hover:bg-white/20"
+				>
+					{copied ? "Copied" : "Copy Private Key"}
+				</button>
+			</div>
+		</div>
+	);
+}

src/routes/settings/bitcoin-connect.tsx

@@ -0,0 +1,39 @@
+import { Button, init } from "@getalby/bitcoin-connect-react";
+import { NostrAccount } from "@/system";
+import { createFileRoute } from "@tanstack/react-router";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+
+export const Route = createFileRoute("/settings/bitcoin-connect")({
+	beforeLoad: () => {
+		init({
+			appName: "Lume",
+			filters: ["nwc"],
+			showBalance: true,
+		});
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const setNwcUri = async (uri: string) => {
+		const cmd = await NostrAccount.setWallet(uri);
+		if (cmd) getCurrentWebviewWindow().close();
+	};
+
+	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/general.tsx

@@ -0,0 +1,275 @@
+import { NostrQuery, type Settings } from "@/system";
+import * as Switch from "@radix-ui/react-switch";
+import { createFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+type Theme = "auto" | "light" | "dark";
+
+export const Route = createFileRoute("/settings/general")({
+	beforeLoad: async () => {
+		const initialSettings = await NostrQuery.getUserSettings();
+		return { initialSettings };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { initialSettings } = Route.useRouteContext();
+
+	const [theme, setTheme] = useState<Theme>(null);
+	const [settings, setSettings] = useState<Settings>(null);
+
+	const changeTheme = async (theme: string) => {
+		if (theme === "auto" || theme === "light" || theme === "dark") {
+			invoke("plugin:theme|set_theme", {
+				theme: theme,
+			}).then(() => setTheme(theme));
+		}
+	};
+
+	const updateSettings = useDebouncedCallback(async () => {
+		const newSettings = JSON.stringify(settings);
+		await NostrQuery.setUserSettings(newSettings);
+	}, 200);
+
+	useEffect(() => {
+		updateSettings();
+	}, [settings]);
+
+	useEffect(() => {
+		invoke("plugin:theme|get_theme").then((data: Theme) => setTheme(data));
+	}, []);
+
+	useEffect(() => {
+		setSettings(initialSettings);
+	}, [initialSettings]);
+
+	if (!settings) return null;
+
+	return (
+		<div className="w-full max-w-xl mx-auto">
+			<div className="flex flex-col gap-6">
+				<div className="flex items-center w-full px-3 text-sm rounded-lg h-11 bg-black/5 dark:bg-white/5">
+					* Setting changes require restarting the app to take effect.
+				</div>
+				<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">
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Relay Hint</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Use the relay hint if necessary.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<Switch.Root
+									checked={settings.use_relay_hint}
+									onClick={() =>
+										setSettings((prev) => ({
+											...prev,
+											use_relay_hint: !prev.use_relay_hint,
+										}))
+									}
+									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>
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Content Warning</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Shows a warning for notes that have a content warning.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<Switch.Root
+									checked={settings.content_warning}
+									onClick={() =>
+										setSettings((prev) => ({
+											...prev,
+											content_warning: !prev.content_warning,
+										}))
+									}
+									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>
+					</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">
+									Require restarting the app to take effect.
+								</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>
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Vibrancy Effect</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Make the window transparent.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<Switch.Root
+									checked={settings.vibrancy}
+									onClick={() =>
+										setSettings((prev) => ({
+											...prev,
+											vibrancy: !prev.vibrancy,
+										}))
+									}
+									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>
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Zap Button</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Shows the Zap button when viewing a note.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<Switch.Root
+									checked={settings.display_zap_button}
+									onClick={() =>
+										setSettings((prev) => ({
+											...prev,
+											display_zap_button: !prev.display_zap_button,
+										}))
+									}
+									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>
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Repost Button</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Shows the Repost button when viewing a note.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<Switch.Root
+									checked={settings.display_zap_button}
+									onClick={() =>
+										setSettings((prev) => ({
+											...prev,
+											display_zap_button: !prev.display_zap_button,
+										}))
+									}
+									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>
+					</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">
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Proxy</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Set proxy address.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<input
+									type="url"
+									defaultValue={settings.proxy}
+									onChange={(e) =>
+										setSettings((prev) => ({
+											...prev,
+											proxy: e.target.value,
+										}))
+									}
+									className="py-1 bg-transparent rounded-lg shadow-none outline-none w-44 border-1 border-black/10 dark:border-white/10"
+								/>
+							</div>
+						</div>
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Image Resize Service</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Use weserv/images for resize image on-the-fly.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<input
+									type="url"
+									defaultValue={settings.image_resize_service}
+									onChange={(e) =>
+										setSettings((prev) => ({
+											...prev,
+											image_resize_service: e.target.value,
+										}))
+									}
+									className="py-1 bg-transparent rounded-lg shadow-none outline-none w-44 border-1 border-black/10 dark:border-white/10"
+								/>
+							</div>
+						</div>
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Load Remote Media</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									View the remote media directly.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<Switch.Root
+									checked={settings.display_media}
+									onClick={() =>
+										setSettings((prev) => ({
+											...prev,
+											display_image_link: !prev.display_media,
+										}))
+									}
+									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>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/routes/settings/relay.tsx

@@ -0,0 +1,145 @@
+import { CancelIcon, PlusIcon } from "@/components";
+import { NostrQuery } from "@/system";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+export const Route = createFileRoute("/settings/relay")({
+	loader: async () => {
+		const relays = await NostrQuery.getRelays();
+		return relays;
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const relayList = Route.useLoaderData();
+	const { register, reset, handleSubmit } = useForm();
+
+	const [relays, setRelays] = useState<string[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const onSubmit = async (data: { url: string }) => {
+		try {
+			setIsLoading(true);
+
+			const add = await NostrQuery.connectRelay(data.url);
+
+			if (add) {
+				setRelays((prev) => [...prev, data.url]);
+				setIsLoading(false);
+				reset();
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), { title: "Relay", kind: "error" });
+		}
+	};
+
+	useEffect(() => {
+		setRelays(relayList.connected);
+	}, [relayList]);
+
+	return (
+		<div className="w-full max-w-xl mx-auto">
+			<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={() => NostrQuery.removeRelay(relay)}
+										className="inline-flex items-center justify-center rounded-md size-7 hover:bg-black/10 dark:hover:bg-white/10"
+									>
+										<CancelIcon className="size-4" />
+									</button>
+								</div>
+							</div>
+						))}
+						<div className="flex items-center h-14">
+							<form
+								onSubmit={handleSubmit(onSubmit)}
+								className="flex items-center w-full gap-2 mb-0"
+							>
+								<input
+									{...register("url", {
+										required: true,
+										minLength: 1,
+									})}
+									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="submit"
+									disabled={isLoading}
+									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"
+								>
+									<PlusIcon className="size-7" />
+								</button>
+							</form>
+						</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/user.tsx

@@ -0,0 +1,180 @@
+import { Spinner } from "@/components";
+import { AvatarUploader } from "@/components/avatarUploader";
+import { NostrAccount } from "@/system";
+import type { Metadata } from "@/types";
+import { PlusIcon } from "@/components";
+import { Link } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+export const Route = createFileRoute("/settings/user")({
+	beforeLoad: async () => {
+		const profile = await NostrAccount.getProfile();
+		return { profile };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { profile } = Route.useRouteContext();
+	const { register, handleSubmit } = useForm({ defaultValues: profile });
+
+	const [loading, setLoading] = useState(false);
+	const [picture, setPicture] = useState<string>("");
+
+	const onSubmit = async (data: Metadata) => {
+		try {
+			setLoading(true);
+
+			const newProfile: Metadata = { ...profile, ...data, picture };
+			await NostrAccount.createProfile(newProfile);
+
+			setLoading(false);
+		} catch (e) {
+			setLoading(false);
+			await message(String(e), { title: "Profile", kind: "error" });
+		}
+	};
+
+	return (
+		<div className="flex w-full h-full">
+			<div className="flex flex-col items-center justify-center flex-1 h-full gap-3">
+				<div className="relative rounded-full size-24 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 w-full h-full rounded-full"
+						/>
+					) : null}
+					<AvatarUploader
+						setPicture={setPicture}
+						className="absolute inset-0 z-20 flex items-center justify-center w-full h-full text-white rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+					>
+						<PlusIcon className="size-8" />
+					</AvatarUploader>
+				</div>
+				<div className="flex flex-col items-center text-center">
+					<div className="text-lg font-semibold">{profile.display_name}</div>
+					<div className="text-neutral-800 dark:text-neutral-200">
+						{profile.nip05}
+					</div>
+					<div className="mt-4">
+						<Link
+							to="/settings/backup"
+							className="inline-flex items-center justify-center px-5 text-sm font-medium text-blue-500 bg-blue-100 border border-blue-300 rounded-full h-9 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800"
+						>
+							Backup Account
+						</Link>
+					</div>
+				</div>
+			</div>
+			<div className="flex-1 h-full">
+				<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"
+							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"
+						>
+							{loading ? <Spinner className="size-4" /> : "Update Profile"}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+}

src/routes/settings/wallet.tsx

@@ -0,0 +1,59 @@
+import { getBitcoinDisplayValues } from "@/commons";
+import { NostrAccount } from "@/system";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/settings/wallet")({
+	beforeLoad: async () => {
+		const wallet = await NostrAccount.loadWallet();
+		if (!wallet) {
+			throw redirect({ to: "/settings/bitcoin-connect" });
+		}
+		const balance = getBitcoinDisplayValues(wallet);
+		return { balance };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { balance } = Route.useRouteContext();
+
+	const disconnect = async () => {
+		window.localStorage.removeItem("bc:config");
+		await NostrAccount.removeWallet();
+
+		return redirect({ to: "/settings/bitcoin-connect" });
+	};
+
+	return (
+		<div className="w-full max-w-xl mx-auto">
+			<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/store.tsx

@@ -0,0 +1,104 @@
+import { CommunityIcon, LaurelIcon } from "@/components";
+import type { LumeColumn } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { createFileRoute } from "@tanstack/react-router";
+import { resolveResource } from "@tauri-apps/api/path";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { readTextFile } from "@tauri-apps/plugin-fs";
+
+export const Route = createFileRoute("/store")({
+	beforeLoad: async () => {
+		const path = "resources/official_columns.json";
+		const resourcePath = await resolveResource(path);
+		const fileContent = await readTextFile(resourcePath);
+		const officialColumns: LumeColumn[] = JSON.parse(fileContent);
+
+		return {
+			officialColumns,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { officialColumns } = Route.useRouteContext();
+
+	const install = async (column: LumeColumn) => {
+		const mainWindow = getCurrentWindow();
+		await mainWindow.emit("columns", { type: "add", column });
+	};
+
+	return (
+		<div className="size-full">
+			<ScrollArea.Root
+				type={"scroll"}
+				scrollHideDelay={300}
+				className="flex-1 overflow-hidden size-full"
+			>
+				<ScrollArea.Viewport className="h-full px-3 ">
+					<div className="flex flex-col gap-3 mb-10">
+						<div className="inline-flex items-center gap-1.5 font-semibold leading-tight">
+							<div className="size-7 rounded-md inline-flex items-center justify-center bg-black/10 dark:bg-white/10">
+								<LaurelIcon className="size-4" />
+							</div>
+							Official
+						</div>
+						<div className="grid grid-cols-3 gap-4">
+							{officialColumns.map((column) => (
+								<div
+									key={column.label}
+									className="relative group flex flex-col w-full aspect-square overflow-hidden bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5"
+								>
+									<div className="hidden group-hover:flex items-center justify-center absolute inset-0 size-full rounded-xl bg-white/20 dark:bg-black/20 backdrop-blur-md">
+										<button
+											type="button"
+											onClick={() => install(column)}
+											className="w-16 h-8 inline-flex items-center justify-center rounded-full bg-black dark:bg-white text-white dark:text-black text-sm font-semibold"
+										>
+											Add
+										</button>
+									</div>
+									<div className="flex-1">
+										{column.cover ? (
+											<img
+												src={column.cover}
+												srcSet={column.coverRetina}
+												alt={column.name}
+												loading="lazy"
+												decoding="async"
+												className="size-full object-cover"
+											/>
+										) : null}
+									</div>
+									<div className="shrink-0 h-9 px-3 flex items-center">
+										<h3 className="text-sm font-semibold truncate w-full">
+											{column.name}
+										</h3>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+					<div className="flex flex-col gap-3">
+						<div className="inline-flex items-center gap-1.5 font-semibold leading-tight">
+							<div className="size-7 rounded-md inline-flex items-center justify-center bg-black/10 dark:bg-white/10">
+								<CommunityIcon className="size-4" />
+							</div>
+							Community
+						</div>
+						<div className="w-full h-20 rounded-xl flex items-center justify-center text-sm font-medium bg-black/5 dark:bg-white/5">
+							Coming Soon.
+						</div>
+					</div>
+				</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/topic.tsx

@@ -0,0 +1,159 @@
+import { Spinner } from "@/components";
+import { ArrowRightCircleIcon } from "@/components";
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { type LumeEvent, NostrQuery } from "@/system";
+import { type ColumnRouteSearch, Kind } from "@/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { useCallback, useRef } from "react";
+import { Virtualizer } from "virtua";
+
+type Topic = {
+	content: string[];
+};
+
+export const Route = createFileRoute("/topic")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async ({ search }) => {
+		const key = `lume:topic:${search.label}`;
+		const topics: Topic[] = await NostrQuery.getNstore(key);
+		const settings = await NostrQuery.getUserSettings();
+
+		if (!topics?.length) {
+			throw redirect({
+				to: "/create-topic",
+				search: {
+					...search,
+					redirect: "/topic",
+				},
+			});
+		}
+
+		const hashtags: string[] = [];
+
+		for (const topic of topics) {
+			hashtags.push(...topic.content);
+		}
+
+		return { settings, hashtags };
+	},
+	component: Screen,
+});
+
+export function Screen() {
+	const { label, account } = Route.useSearch();
+	const { hashtags } = Route.useRouteContext();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: [label, account],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const events = NostrQuery.getHashtagEvents(hashtags, pageParam);
+			return events;
+		},
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flat(),
+		refetchOnWindowFocus: false,
+	});
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) return;
+			switch (event.kind) {
+				case Kind.Repost:
+					return <RepostNote key={event.id} event={event} className="mb-3" />;
+				default: {
+					if (event.isConversation) {
+						return (
+							<Conversation key={event.id} className="mb-3" event={event} />
+						);
+					}
+					if (event.isQuote) {
+						return <Quote key={event.id} event={event} className="mb-3" />;
+					}
+					return <TextNote key={event.id} event={event} className="mb-3" />;
+				}
+			}
+		},
+		[data],
+	);
+
+	return (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full"
+		>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
+				<Virtualizer scrollRef={ref}>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
+							<div className="flex items-center justify-center gap-2">
+								<Spinner className="size-5" />
+								<span className="text-sm font-medium">
+									Getting new notes...
+								</span>
+							</div>
+						</div>
+					) : null}
+					{isLoading ? (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
+							<Spinner className="size-5" />
+							<span className="text-sm font-medium">Loading...</span>
+						</div>
+					) : !data.length ? (
+						<div className="flex items-center justify-center">
+							Yo. You're catching up on all the things happening around you.
+						</div>
+					) : (
+						data.map((item) => renderItem(item))
+					)}
+					{data?.length && hasNextPage ? (
+						<div>
+							<button
+								type="button"
+								onClick={() => fetchNextPage()}
+								disabled={isFetchingNextPage || isLoading}
+								className="inline-flex items-center justify-center w-full gap-2 px-3 font-medium h-9 rounded-xl bg-black/5 hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+							>
+								{isFetchingNextPage ? (
+									<Spinner className="size-5" />
+								) : (
+									<>
+										<ArrowRightCircleIcon className="size-5" />
+										Load more
+									</>
+								)}
+							</button>
+						</div>
+					) : null}
+				</Virtualizer>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar
+				className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+				orientation="vertical"
+			>
+				<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner className="bg-transparent" />
+		</ScrollArea.Root>
+	);
+}

src/routes/trending.notes.tsx

@@ -0,0 +1,99 @@
+import { Spinner } from "@/components";
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { Kind, type NostrEvent } from "@/types";
+import { LumeEvent } from "@/system";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { Await, createFileRoute } from "@tanstack/react-router";
+import { defer } from "@tanstack/react-router";
+import { Suspense, useCallback, useRef } from "react";
+import { Virtualizer } from "virtua";
+
+export const Route = createFileRoute("/trending/notes")({
+	loader: async ({ abortController }) => {
+		try {
+			return {
+				data: defer(
+					fetch("https://api.nostr.band/v0/trending/notes", {
+						signal: abortController.signal,
+					})
+						.then((res) => res.json())
+						.then((res) => {
+							const events: NostrEvent[] = res.notes.map(
+								(item: { event: NostrEvent }) => item.event,
+							);
+							const lumeEvents = Promise.all(
+								events.map(async (ev) => await LumeEvent.build(ev)),
+							);
+							return lumeEvents;
+						}),
+				),
+			};
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	},
+	component: Screen,
+});
+
+export function Screen() {
+	const { data } = Route.useLoaderData();
+
+	const ref = useRef<HTMLDivElement>(null);
+	const renderItem = useCallback((event: LumeEvent) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} className="mb-3" />;
+			default: {
+				if (event.isConversation) {
+					return <Conversation key={event.id} className="mb-3" event={event} />;
+				}
+				if (event.isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
+		}
+	}, []);
+
+	return (
+		<ScrollArea.Root
+			type={"scroll"}
+			scrollHideDelay={300}
+			className="overflow-hidden size-full"
+		>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
+				<Virtualizer scrollRef={ref}>
+					<Suspense
+						fallback={
+							<div className="flex flex-col items-center justify-center w-full h-20 gap-1">
+								<button
+									type="button"
+									className="inline-flex items-center gap-2 text-sm font-medium"
+									disabled
+								>
+									<Spinner className="size-5" />
+									Loading...
+								</button>
+							</div>
+						}
+					>
+						<Await promise={data}>
+							{(notes) => notes.map((event) => renderItem(event))}
+						</Await>
+					</Suspense>
+				</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>
+	);
+}

src/routes/trending.tsx

@@ -0,0 +1,63 @@
+import { cn } from "@/commons";
+import { ArticleIcon, GroupFeedsIcon } from "@/components";
+import { NostrQuery } from "@/system";
+import type { ColumnRouteSearch } from "@/types";
+import { Link, Outlet } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/trending")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getUserSettings();
+		return { settings };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const search = Route.useSearch();
+
+	return (
+		<div className="flex flex-col h-full">
+			<div className="shrink-0 h-11 flex items-center w-full gap-1 px-3">
+				<div className="flex w-full h-full gap-1">
+					<Link to="/trending/notes" search={search}>
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+									isActive ? "bg-black/10 dark:bg-white/10" : "opacity-50",
+								)}
+							>
+								<ArticleIcon className="size-4" />
+								Notes
+							</div>
+						)}
+					</Link>
+					<Link to="/trending/users" search={search}>
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+									isActive ? "bg-black/10 dark:bg-white/10" : "opacity-50",
+								)}
+							>
+								<GroupFeedsIcon className="size-4" />
+								Users
+							</div>
+						)}
+					</Link>
+				</div>
+			</div>
+			<div className="flex-1 w-full h-full overflow-y-auto scrollbar-none">
+				<Outlet />
+			</div>
+		</div>
+	);
+}

src/routes/trending.users.tsx

@@ -0,0 +1,71 @@
+import { Spinner } from "@/components";
+import { User } from "@/components/user";
+import { Await, defer } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { Suspense } from "react";
+
+export const Route = createFileRoute("/trending/users")({
+	loader: async ({ abortController }) => {
+		try {
+			return {
+				data: defer(
+					fetch("https://api.nostr.band/v0/trending/profiles", {
+						signal: abortController.signal,
+					}).then((res) => res.json()),
+				),
+			};
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	},
+	component: Screen,
+});
+
+export function Screen() {
+	const { data } = Route.useLoaderData();
+
+	return (
+		<div className="w-full h-full">
+			<Suspense
+				fallback={
+					<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+						<button
+							type="button"
+							className="inline-flex items-center gap-2 text-sm font-medium"
+							disabled
+						>
+							<Spinner className="size-5" />
+							Loading...
+						</button>
+					</div>
+				}
+			>
+				<Await promise={data}>
+					{(users) =>
+						users.profiles.map((item: { pubkey: string }) => (
+							<div
+								key={item.pubkey}
+								className="h-max w-full overflow-hidden mb-3 p-2 bg-black/5 dark:bg-white/5 rounded-xl"
+							>
+								<User.Provider pubkey={item.pubkey}>
+									<User.Root>
+										<div className="flex h-full w-full flex-col gap-2">
+											<div className="flex items-center justify-between">
+												<div className="flex items-center gap-2.5">
+													<User.Avatar className="size-10 rounded-full" />
+													<User.Name className="leadning-tight max-w-[15rem] truncate font-semibold" />
+												</div>
+												<User.Button className="inline-flex h-8 w-20 items-center justify-center rounded-lg bg-black/10 text-sm font-medium hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20" />
+											</div>
+											<User.About className="mt-1 line-clamp-3 max-w-none select-text text-neutral-800 dark:text-neutral-400" />
+										</div>
+									</User.Root>
+								</User.Provider>
+							</div>
+						))
+					}
+				</Await>
+			</Suspense>
+		</div>
+	);
+}

src/routes/users/$pubkey.tsx

@@ -0,0 +1,92 @@
+import { Box, Container, Spinner } from "@/components";
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { User } from "@/components/user";
+import { type LumeEvent, NostrQuery } from "@/system";
+import { Kind } from "@/types";
+import { createFileRoute, defer } from "@tanstack/react-router";
+import { Await } from "@tanstack/react-router";
+import { Suspense, useCallback } from "react";
+import { WindowVirtualizer } from "virtua";
+
+export const Route = createFileRoute("/users/$pubkey")({
+	beforeLoad: async () => {
+		const settings = await NostrQuery.getUserSettings();
+		return { settings };
+	},
+	loader: async ({ params }) => {
+		return { data: defer(NostrQuery.getUserEvents(params.pubkey)) };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { pubkey } = Route.useParams();
+	const { data } = Route.useLoaderData();
+
+	const renderItem = useCallback(
+		(event: LumeEvent) => {
+			if (!event) return;
+			switch (event.kind) {
+				case Kind.Repost:
+					return <RepostNote key={event.id} event={event} className="mb-3" />;
+				default: {
+					if (event.isConversation) {
+						return (
+							<Conversation key={event.id} className="mb-3" event={event} />
+						);
+					}
+					if (event.isQuote) {
+						return <Quote key={event.id} event={event} className="mb-3" />;
+					}
+					return <TextNote key={event.id} event={event} className="mb-3" />;
+				}
+			}
+		},
+		[data],
+	);
+
+	return (
+		<Container withDrag>
+			<Box className="px-0 scrollbar-none bg-black/5 dark:bg-white/5">
+				<WindowVirtualizer>
+					<User.Provider pubkey={pubkey}>
+						<User.Root>
+							<User.Cover className="object-cover w-full h-44" />
+							<div className="relative flex flex-col px-3 -mt-8">
+								<User.Avatar className="rounded-full size-14" />
+								<div className="inline-flex items-center justify-between mb-4">
+									<div className="flex items-center gap-1">
+										<User.Name className="text-lg font-semibold leading-tight" />
+										<User.NIP05 />
+									</div>
+									<User.Button className="inline-flex items-center justify-center w-24 text-sm font-medium text-white bg-black rounded-full h-9 hover:bg-neutral-900 dark:bg-neutral-900" />
+								</div>
+								<User.About />
+							</div>
+						</User.Root>
+					</User.Provider>
+					<div className="px-3 mt-5">
+						<div className="mb-3">
+							<h3 className="text-lg font-semibold">Latest notes</h3>
+						</div>
+						<Suspense
+							fallback={
+								<div className="flex h-20 w-full items-center justify-center gap-1.5 text-sm font-medium">
+									<Spinner className="size-5" />
+									Loading...
+								</div>
+							}
+						>
+							<Await promise={data}>
+								{(events) => events.map((event) => renderItem(event))}
+							</Await>
+						</Suspense>
+					</div>
+				</WindowVirtualizer>
+			</Box>
+		</Container>
+	);
+}

src/routes/zap.$id.tsx

@@ -0,0 +1,119 @@
+import { User } from "@/components/user";
+import { NostrQuery } from "@/system";
+import { createFileRoute } from "@tanstack/react-router";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState } from "react";
+import CurrencyInput from "react-currency-input-field";
+
+const DEFAULT_VALUES = [21, 50, 100, 200];
+
+export const Route = createFileRoute("/zap/$id")({
+	beforeLoad: async ({ params }) => {
+		const event = await NostrQuery.getEvent(params.id);
+		return { event };
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { event } = Route.useRouteContext();
+
+	const [amount, setAmount] = useState(21);
+	const [content, setContent] = useState("");
+	const [isCompleted, setIsCompleted] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const submit = async () => {
+		try {
+			// start loading
+			setIsLoading(true);
+
+			// Zap
+			const val = await event.zap(amount, content);
+
+			if (val) {
+				setIsCompleted(true);
+				// close current window
+				await getCurrentWebviewWindow().close();
+			}
+		} catch (e) {
+			setIsLoading(false);
+			await message(String(e), {
+				title: "Zap",
+				kind: "error",
+			});
+		}
+	};
+
+	return (
+		<div data-tauri-drag-region className="flex flex-col pb-5 size-full">
+			<div
+				data-tauri-drag-region
+				className="flex items-center justify-center h-24 gap-2 shrink-0"
+			>
+				<p className="text-sm">Send zap to </p>
+				<User.Provider pubkey={event.pubkey}>
+					<User.Root className="inline-flex items-center gap-2 p-1 rounded-full bg-black/5 dark:bg-white/5">
+						<User.Avatar className="rounded-full size-6" />
+						<User.Name className="pr-2 text-sm font-medium" />
+					</User.Root>
+				</User.Provider>
+			</div>
+			<div className="flex flex-col justify-between h-full">
+				<div className="flex flex-col justify-between flex-1 px-5">
+					<div className="relative flex flex-col flex-1 pb-8">
+						<div className="inline-flex items-center justify-center flex-1 h-full gap-1">
+							<CurrencyInput
+								placeholder="0"
+								defaultValue={21}
+								value={amount}
+								decimalsLimit={2}
+								min={0} // 0 sats
+								max={10000} // 1M sats
+								maxLength={10000} // 1M sats
+								onValueChange={(value) => setAmount(Number(value))}
+								className="flex-1 w-full text-4xl font-semibold text-right bg-transparent border-none placeholder:text-neutral-600 focus:outline-none focus:ring-0 dark:text-neutral-400"
+							/>
+							<span className="flex-1 w-full text-4xl font-semibold text-left text-neutral-500 dark:text-neutral-400">
+								sats
+							</span>
+						</div>
+						<div className="inline-flex items-center justify-center gap-2">
+							{DEFAULT_VALUES.map((value) => (
+								<button
+									key={value}
+									type="button"
+									onClick={() => setAmount(value)}
+									className="w-max rounded-full bg-black/10 px-2.5 py-1 text-xs font-medium hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+								>
+									{value} sats
+								</button>
+							))}
+						</div>
+					</div>
+					<div className="flex flex-col w-full gap-2">
+						<input
+							name="message"
+							value={content}
+							onChange={(e) => setContent(e.target.value)}
+							spellCheck={false}
+							autoComplete="off"
+							autoCorrect="off"
+							autoCapitalize="off"
+							placeholder="Enter message (optional)"
+							className="h-11 w-full resize-none rounded-xl border-transparent bg-black/5 px-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/5"
+						/>
+						<button
+							type="button"
+							onClick={() => submit()}
+							className="inline-flex items-center justify-center w-full h-10 font-medium rounded-xl bg-neutral-950 text-neutral-50 hover:bg-neutral-900 dark:bg-white/20 dark:hover:bg-white/30"
+						>
+							{isCompleted ? "Zapped" : isLoading ? "Processing..." : "Zap"}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}