Some improments and Negentropy (#219)

* feat: adjust default window size * feat: save window state * feat: add window state plugin * feat: add search * feat: use negentropy for newsfeed * feat: live feeds * feat: add search user
2024-06-30 14:26:02 +07:00
parent 968b1ada94
commit 0fec21b9ce
46 changed files with 5633 additions and 3938 deletions
--- a/apps/desktop2/src/app.tsx
+++ b/apps/desktop2/src/app.tsx
@@ -1,12 +1,11 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { StrictMode } from "react";
 import { type } from "@tauri-apps/plugin-os";
+import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { routeTree } from "./router.gen"; // auto generated file
 import "./app.css";

-// Set up a Router instance
 const queryClient = new QueryClient();
 const platform = type();
 const router = createRouter({
--- a/apps/desktop2/src/components/note/mentions/note.tsx
+++ b/apps/desktop2/src/components/note/mentions/note.tsx
@@ -1,8 +1,8 @@
-import { LumeWindow, useEvent } from "@lume/system";
-import { LinkIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
 import { User } from "@/components/user";
+import { LinkIcon } from "@lume/icons";
+import { LumeWindow, useEvent } from "@lume/system";
 import { Spinner } from "@lume/ui";
+import { cn } from "@lume/utils";

 export function MentionNote({
 	eventId,
@@ -40,7 +40,7 @@ export function MentionNote({
 			<div className="pl-4 py-3 flex flex-col w-full border-l-2 border-black/5 dark:border-white/5">
 				<User.Provider pubkey={data.pubkey}>
 					<User.Root className="flex items-center gap-2 h-8">
-						<User.Avatar className="object-cover rounded-full size-6 shrink-0" />
+						<User.Avatar className="rounded-full size-6" />
 						<div className="inline-flex items-center flex-1 gap-2">
 							<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
 							<span className="text-neutral-600 dark:text-neutral-400">·</span>
--- a/apps/desktop2/src/components/note/preview/images.tsx
+++ b/apps/desktop2/src/components/note/preview/images.tsx
@@ -96,7 +96,7 @@ export function Images({ urls }: { urls: string[] }) {
 	}

 	return (
-		<div className="relative pl-2 overflow-hidden group">
+		<div className="relative px-3 overflow-hidden group">
 			<div ref={emblaRef} className="w-full h-[320px]">
 				<div className="flex w-full gap-2 scrollbar-none">
 					{imageUrls.map((url, index) => (
--- a/apps/desktop2/src/components/note/preview/video.tsx
+++ b/apps/desktop2/src/components/note/preview/video.tsx
@@ -20,10 +20,11 @@ export function VideoPreview({ url }: { url: string }) {
 		<div className="my-1">
 			<video
 				className="max-h-[600px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+				preload="metadata"
 				controls
 				muted
 			>
-				<source src={url} type="video/mp4" />
+				<source src={`${url}#t=0.1`} type="video/mp4" />
 				Your browser does not support the video tag.
 			</video>
 		</div>
--- a/apps/desktop2/src/components/note/preview/videos.tsx
+++ b/apps/desktop2/src/components/note/preview/videos.tsx
@@ -5,12 +5,12 @@ export function Videos({ urls }: { urls: string[] }) {
 		return (
 			<div className="group px-3">
 				<video
-					className="w-full h-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+					className="max-h-[400px] w-auto  object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
 					preload="metadata"
 					controls
 					muted
 				>
-					<source src={urls[0]} type="video/mp4" />
+					<source src={`${urls[0]}#t=0.1`} type="video/mp4" />
 					Your browser does not support the video tag.
 				</video>
 			</div>
@@ -28,7 +28,7 @@ export function Videos({ urls }: { urls: string[] }) {
 						controls={false}
 						muted
 					>
-						<source src={item} type="video/mp4" />
+						<source src={`${item}#t=0.1`} type="video/mp4" />
 						Your browser does not support the video tag.
 					</video>
 				</CarouselItem>
--- a/apps/desktop2/src/components/note/user.tsx
+++ b/apps/desktop2/src/components/note/user.tsx
@@ -42,7 +42,7 @@ export function NoteUser({ className }: { className?: string }) {
 						onClick={(e) => showContextMenu(e)}
 						className="shrink-0"
 					>
-						<User.Avatar className="object-cover rounded-full size-8 outline outline-1 -outline-offset-1 outline-black/15" />
+						<User.Avatar className="rounded-full size-8" />
 					</button>
 					<div className="flex items-center w-full gap-3">
 						<div className="flex items-center gap-1">
--- a/apps/desktop2/src/components/repost.tsx
+++ b/apps/desktop2/src/components/repost.tsx
@@ -69,7 +69,7 @@ export const RepostNote = memo(function RepostNote({
 										<div className="text-sm font-medium text-neutral-800 dark:text-neutral-200">
 											Reposted by
 										</div>
-										<User.Avatar className="object-cover rounded-full size-6 shrink-0 ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
+										<User.Avatar className="rounded-full size-6" />
 									</User.Root>
 								</User.Provider>
 							</div>
--- a/apps/desktop2/src/components/text.tsx
+++ b/apps/desktop2/src/components/text.tsx
@@ -10,8 +10,6 @@ export const TextNote = memo(function TextNote({
 	event: LumeEvent;
 	className?: string;
 }) {
-	console.log("Rendered at: ", event.id, new Date().toLocaleTimeString());
-
 	return (
 		<Note.Provider event={event}>
 			<Note.Root
--- a/apps/desktop2/src/components/user/avatar.tsx
+++ b/apps/desktop2/src/components/user/avatar.tsx
@@ -2,7 +2,6 @@ import { cn } from "@lume/utils";
 import * as Avatar from "@radix-ui/react-avatar";
 import { useRouteContext } from "@tanstack/react-router";
 import { minidenticon } from "minidenticons";
-import { nanoid } from "nanoid";
 import { useMemo } from "react";
 import { useUserContext } from "./provider";

@@ -22,22 +21,29 @@ export function UserAvatar({ className }: { className?: string }) {
 		}
 	}, [user.profile?.picture]);

-	const fallbackAvatar = useMemo(
+	const fallback = useMemo(
 		() =>
 			`data:image/svg+xml;utf8,${encodeURIComponent(
-				minidenticon(user.pubkey || nanoid(), 90, 50),
+				minidenticon(user.pubkey, 60, 50),
 			)}`,
 		[user.pubkey],
 	);

 	if (settings && !settings.display_avatar) {
 		return (
-			<Avatar.Root className="shrink-0">
+			<Avatar.Root
+				className={cn(
+					"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
+					className,
+				)}
+			>
 				<Avatar.Fallback delayMs={120}>
 					<img
-						src={fallbackAvatar}
+						src={fallback}
 						alt={user.pubkey}
-						className={cn("bg-black dark:bg-white", className)}
+						loading="lazy"
+						decoding="async"
+						className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
 					/>
 				</Avatar.Fallback>
 			</Avatar.Root>
@@ -45,19 +51,24 @@ export function UserAvatar({ className }: { className?: string }) {
 	}

 	return (
-		<Avatar.Root className="shrink-0">
+		<Avatar.Root
+			className={cn(
+				"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
+				className,
+			)}
+		>
 			<Avatar.Image
 				src={picture}
 				alt={user.pubkey}
-				loading="eager"
+				loading="lazy"
 				decoding="async"
-				className={cn("outline-[.5px] outline-black/5 object-cover", className)}
+				className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
 			/>
-			<Avatar.Fallback delayMs={120}>
+			<Avatar.Fallback>
 				<img
-					src={fallbackAvatar}
+					src={fallback}
 					alt={user.pubkey}
-					className={cn("bg-black dark:bg-white", className)}
+					className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
 				/>
 			</Avatar.Fallback>
 		</Avatar.Root>
--- a/apps/desktop2/src/routes/$account.home.tsx
+++ b/apps/desktop2/src/routes/$account.home.tsx
@@ -1,6 +1,6 @@
 import { Column } from "@/components/column";
 import { Toolbar } from "@/components/toolbar";
-import { ArrowLeftIcon, ArrowRightIcon, PlusSquareIcon } from "@lume/icons";
+import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
 import { NostrQuery } from "@lume/system";
 import type { ColumnEvent, LumeColumn } from "@lume/types";
 import { createFileRoute } from "@tanstack/react-router";
@@ -45,17 +45,6 @@ function Screen() {
 		getCurrent().emit("child-webview", { resize: true, direction: "x" });
 	}, []);

-	const openLumeStore = useDebouncedCallback(async () => {
-		await getCurrent().emit("columns", {
-			type: "add",
-			column: {
-				label: "store",
-				name: "Store",
-				content: "/store/official",
-			},
-		});
-	}, 150);
-
 	const add = useDebouncedCallback((column: LumeColumn) => {
 		column.label = `${column.label}-${nanoid()}`; // update col label
 		setColumns((prev) => [column, ...prev]);
@@ -158,29 +147,20 @@ function Screen() {
 				</div>
 			</div>
 			<Toolbar>
-				<div className="flex items-center h-8 gap-1 p-[2px] rounded-full bg-black/5 dark:bg-white/5">
-					<button
-						type="button"
-						onClick={() => scrollPrev()}
-						className="inline-flex items-center justify-center rounded-full size-7 text-neutral-800 hover:bg-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
-					>
-						<ArrowLeftIcon className="size-4" />
-					</button>
-					<button
-						type="button"
-						onClick={() => openLumeStore()}
-						className="inline-flex items-center justify-center rounded-full size-7 text-neutral-800 hover:bg-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
-					>
-						<PlusSquareIcon className="size-4" />
-					</button>
-					<button
-						type="button"
-						onClick={() => scrollNext()}
-						className="inline-flex items-center justify-center rounded-full size-7 text-neutral-800 hover:bg-black/10 dark:text-neutral-200 dark:hover:bg-white/10"
-					>
-						<ArrowRightIcon className="size-4" />
-					</button>
-				</div>
+				<button
+					type="button"
+					onClick={() => scrollPrev()}
+					className="inline-flex items-center justify-center rounded-full size-8 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<ArrowLeftIcon className="size-4" />
+				</button>
+				<button
+					type="button"
+					onClick={() => scrollNext()}
+					className="inline-flex items-center justify-center rounded-full size-8 hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<ArrowRightIcon className="size-4" />
+				</button>
 			</Toolbar>
 		</div>
 	);
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@@ -1,49 +1,83 @@
 import { User } from "@/components/user";
-import { ComposeFilledIcon, HorizontalDotsIcon, PlusIcon } from "@lume/icons";
+import {
+	ChevronDownIcon,
+	ComposeFilledIcon,
+	PlusIcon,
+	SearchIcon,
+} from "@lume/icons";
 import { LumeWindow, NostrAccount } from "@lume/system";
 import { cn } from "@lume/utils";
-import * as Popover from "@radix-ui/react-popover";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
-import { Link } from "@tanstack/react-router";
-import { Menu, MenuItem } from "@tauri-apps/api/menu";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrent } from "@tauri-apps/api/window";
 import { message } from "@tauri-apps/plugin-dialog";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useState } from "react";

 export const Route = createFileRoute("/$account")({
-	beforeLoad: async () => {
+	beforeLoad: async ({ params }) => {
 		const accounts = await NostrAccount.getAccounts();
-		return { accounts };
+		const otherAccounts = accounts.filter(
+			(account) => account !== params.account,
+		);
+
+		return { otherAccounts };
 	},
 	component: Screen,
 });

 function Screen() {
+	const { platform } = Route.useRouteContext();
+
+	const openLumeStore = async () => {
+		await getCurrent().emit("columns", {
+			type: "add",
+			column: {
+				label: "store",
+				name: "Store",
+				content: "/store/official",
+			},
+		});
+	};
+
 	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 pr-2 ml-2 pl-20"
+				className="flex h-11 shrink-0 items-center justify-between px-3"
 			>
-				<div className="flex items-center gap-3">
-					<Accounts />
-					<Link
-						to="/landing"
-						className="inline-flex items-center justify-center rounded-full size-8 shrink-0 bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20"
+				<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" />
-					</Link>
+						Column
+					</button>
+					<div id="toolbar" />
 				</div>
-				<div className="flex items-center gap-2">
+				<div data-tauri-drag-region className="hidden md:flex md:flex-1">
+					<Search />
+				</div>
+				<div
+					data-tauri-drag-region
+					className="flex-1 flex items-center justify-end gap-3"
+				>
 					<button
 						type="button"
 						onClick={() => LumeWindow.openEditor()}
-						className="inline-flex items-center justify-center h-8 gap-1 px-3 text-sm font-medium text-white bg-blue-500 rounded-full w-max hover:bg-blue-600"
+						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>
-					<div id="toolbar" />
+					<Accounts />
 				</div>
 			</div>
 			<div className="flex-1">
@@ -53,34 +87,25 @@ function Screen() {
 	);
 }

-function Accounts() {
-	const navigate = Route.useNavigate();
-	const { accounts } = Route.useRouteContext();
+const Accounts = memo(function Accounts() {
+	const { otherAccounts } = Route.useRouteContext();
 	const { account } = Route.useParams();

-	const [windowWidth, setWindowWidth] = useState<number>(null);
-
-	const sortedList = useMemo(() => {
-		const list = accounts;
-
-		for (const [i, item] of list.entries()) {
-			if (item === account) {
-				list.splice(i, 1);
-				list.unshift(item);
-			}
-		}
-
-		return list;
-	}, [accounts]);
+	const navigate = Route.useNavigate();

 	const showContextMenu = useCallback(
-		async (e: React.MouseEvent, npub: string) => {
+		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(npub),
+					action: () => LumeWindow.openProfile(account),
 				}),
 				MenuItem.new({
 					text: "Open Settings",
@@ -94,112 +119,107 @@ function Accounts() {

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

-	const changeAccount = async (e: React.MouseEvent, npub: string) => {
-		if (npub === account) {
-			return showContextMenu(e, npub);
-		}
+	const changeAccount = useCallback(
+		async (npub: string) => {
+			// Change current account and update signer
+			const select = await NostrAccount.loadAccount(npub);

-		// Change current account and update signer
-		const select = await NostrAccount.loadAccount(npub);
+			if (select) {
+				// Reset current columns
+				await getCurrent().emit("columns", { type: "reset" });

-		if (select) {
-			// Reset current columns
-			await getCurrent().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],
+	);

-			// 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" });
-		}
-	};
+	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 getWindowDimensions = () => {
-		const { innerWidth: width, innerHeight: height } = window;
-		return {
-			width,
-			height,
-		};
-	};
+const Search = memo(function Search() {
+	const [searchType, setSearchType] = useState<"notes" | "users">("notes");
+	const [query, setQuery] = useState("");

-	useEffect(() => {
-		function handleResize() {
-			setWindowWidth(getWindowDimensions().width);
-		}
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();

-		if (!windowWidth) {
-			setWindowWidth(getWindowDimensions().width);
-		}
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Notes",
+				action: () => setSearchType("notes"),
+			}),
+			MenuItem.new({
+				text: "Users",
+				action: () => setSearchType("users"),
+			}),
+		]);

-		window.addEventListener("resize", handleResize);
+		const menu = await Menu.new({
+			items: menuItems,
+		});

-		return () => {
-			window.removeEventListener("resize", handleResize);
-		};
+		await menu.popup().catch((e) => console.error(e));
 	}, []);

 	return (
-		<div data-tauri-drag-region className="flex items-center gap-3">
-			{sortedList
-				.slice(0, windowWidth > 500 ? account.length : 2)
-				.map((user) => (
-					<button
-						key={user}
-						type="button"
-						onClick={(e) => changeAccount(e, user)}
-					>
-						<User.Provider pubkey={user}>
-							<User.Root
-								className={cn(
-									"shrink-0 rounded-full transition-all ease-in-out duration-150 will-change-auto",
-									user === account
-										? "ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950"
-										: "",
-								)}
-							>
-								<User.Avatar
-									className={cn(
-										"aspect-square h-auto rounded-full object-cover transition-all ease-in-out duration-150 will-change-auto",
-										user === account ? "w-7" : "w-8",
-									)}
-								/>
-							</User.Root>
-						</User.Provider>
-					</button>
-				))}
-			{accounts.length >= 3 && windowWidth <= 700 ? (
-				<Popover.Root>
-					<Popover.Trigger className="inline-flex items-center justify-center rounded-full size-8 shrink-0 bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20">
-						<HorizontalDotsIcon className="size-5" />
-					</Popover.Trigger>
-					<Popover.Portal>
-						<Popover.Content className="flex h-11 select-none items-center justify-center rounded-md bg-black/20 p-1 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-							{sortedList.slice(2).map((user) => (
-								<button
-									key={user}
-									type="button"
-									onClick={(e) => changeAccount(e, user)}
-									className="inline-flex items-center justify-center rounded-md size-9 hover:bg-white/10"
-								>
-									<User.Provider pubkey={user}>
-										<User.Root className="rounded-full ring-1 ring-white/10">
-											<User.Avatar className="object-cover h-auto rounded-full size-7 aspect-square" />
-										</User.Root>
-									</User.Provider>
-								</button>
-							))}
-							<Popover.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
-						</Popover.Content>
-					</Popover.Portal>
-				</Popover.Root>
-			) : null}
+		<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"
+			>
+				{searchType}
+				<ChevronDownIcon className="size-3 text-black/50 dark:text-white/50" />
+			</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-black/50"
+			/>
+			<SearchIcon className="size-5" />
 		</div>
 	);
-}
+});
--- a/apps/desktop2/src/routes/create-group.tsx
+++ b/apps/desktop2/src/routes/create-group.tsx
@@ -126,7 +126,7 @@ function Screen() {
 										>
 											<User.Provider pubkey={item}>
 												<User.Root className="flex items-center gap-2.5">
-													<User.Avatar className="object-cover rounded-full size-8" />
+													<User.Avatar className="rounded-full size-8" />
 													<div className="flex items-center gap-1">
 														<User.Name className="text-sm font-medium" />
 													</div>
@@ -157,7 +157,7 @@ function Screen() {
 										>
 											<User.Provider pubkey={item}>
 												<User.Root className="flex items-center gap-2.5">
-													<User.Avatar className="object-cover rounded-full size-8" />
+													<User.Avatar className="rounded-full size-8" />
 													<div className="flex items-center gap-1">
 														<User.Name className="text-sm font-medium" />
 													</div>
--- a/apps/desktop2/src/routes/create-newsfeed.users.tsx
+++ b/apps/desktop2/src/routes/create-newsfeed.users.tsx
@@ -95,7 +95,7 @@ function Screen() {
 											<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="object-cover rounded-full size-7 shrink-0" />
+														<User.Avatar className="rounded-full size-7" />
 														<User.Name className="text-sm leadning-tight max-w-[15rem] truncate font-semibold" />
 													</div>
 													<button
--- a/apps/desktop2/src/routes/editor/index.tsx
+++ b/apps/desktop2/src/routes/editor/index.tsx
@@ -1,7 +1,12 @@
+import { Note } from "@/components/note";
+import { MentionNote } from "@/components/note/mentions/note";
+import { User } from "@/components/user";
 import { ComposeFilledIcon } from "@lume/icons";
+import { LumeEvent, useEvent } from "@lume/system";
 import { Spinner } from "@lume/ui";
 import { cn, insertImage, insertNostrEvent, isImageUrl } from "@lume/utils";
 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 {
@@ -14,13 +19,8 @@ import {
 	withReact,
 } from "slate-react";
 import { MediaButton } from "./-components/media";
-import { LumeEvent, useEvent } from "@lume/system";
-import { WarningButton } from "./-components/warning";
-import { MentionNote } from "@/components/note/mentions/note";
 import { PowButton } from "./-components/pow";
-import { User } from "@/components/user";
-import { Note } from "@/components/note";
-import { nip19 } from "nostr-tools";
+import { WarningButton } from "./-components/warning";

 type EditorSearch = {
 	reply_to: string;
@@ -250,7 +250,7 @@ function ChildNote({ id }: { id: string }) {
 			<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 shrink-0" />
+						<User.Avatar className="rounded-full size-8" />
 					</User.Root>
 				</User.Provider>
 				<div className="content-break line-clamp-1">{data.content}</div>
--- a/apps/desktop2/src/routes/index.tsx
+++ b/apps/desktop2/src/routes/index.tsx
@@ -92,7 +92,7 @@ function Screen() {
 						>
 							<User.Provider pubkey={account}>
 								<User.Root className="flex items-center gap-2.5 p-3">
-									<User.Avatar className="object-cover rounded-full size-10 shrink-0" />
+									<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">
--- a/apps/desktop2/src/routes/newsfeed.tsx
+++ b/apps/desktop2/src/routes/newsfeed.tsx
@@ -2,16 +2,23 @@ import { Conversation } from "@/components/conversation";
 import { Quote } from "@/components/quote";
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { ArrowRightCircleIcon } from "@lume/icons";
-import { type LumeEvent, NostrAccount, NostrQuery } from "@lume/system";
-import { type ColumnRouteSearch, Kind } from "@lume/types";
+import { ArrowRightCircleIcon, ArrowUpIcon } from "@lume/icons";
+import { LumeEvent, NostrAccount, NostrQuery } from "@lume/system";
+import { type ColumnRouteSearch, Kind, type Meta } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { type InfiniteData, useInfiniteQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { useCallback, useRef } from "react";
+import { listen } from "@tauri-apps/api/event";
+import { getCurrent } 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 {
@@ -40,6 +47,7 @@ export const Route = createFileRoute("/newsfeed")({
 });

 export function Screen() {
+	const { queryClient } = Route.useRouteContext();
 	const { label, account } = Route.useSearch();
 	const {
 		data,
@@ -84,20 +92,31 @@ export function Screen() {
 		[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="h-full px-3 pb-3">
+			<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-11 bg-black/10 dark:bg-white/10 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/10 dark:bg-white/10 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
-									Fetching new notes...
+									Getting new notes...
 								</span>
 							</div>
 						</div>
@@ -145,3 +164,69 @@ export function Screen() {
 		</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 unlistenEvent = getCurrent().listen<Payload>("new_event", (data) => {
+			const event = LumeEvent.from(data.payload.raw, data.payload.parsed);
+			setEvents((prev) => [event, ...prev]);
+		});
+
+		const unlistenWindow = getCurrent().onCloseRequested(async () => {
+			await NostrQuery.unlisten();
+			await getCurrent().destroy();
+		});
+
+		// Listen for new event
+		NostrQuery.listenLocalEvent().then(() => console.log("listen"));
+
+		return () => {
+			unlistenEvent.then((f) => f());
+			unlistenWindow.then((f) => f());
+		};
+	}, []);
+
+	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>
+	);
+}
--- a/apps/desktop2/src/routes/nwc.lazy.tsx
+++ b/apps/desktop2/src/routes/nwc.lazy.tsx
@@ -1,52 +0,0 @@
-import { ZapIcon } from "@lume/icons";
-import { NostrAccount } from "@lume/system";
-import { Container } from "@lume/ui";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
-
-export const Route = createLazyFileRoute("/nwc")({
-	component: Screen,
-});
-
-function Screen() {
-	const [uri, setUri] = useState("");
-	const [isDone, setIsDone] = useState(false);
-
-	const save = async () => {
-		const nwc = await NostrAccount.setWallet(uri);
-		setIsDone(nwc);
-	};
-
-	return (
-		<Container withDrag>
-			<div className="flex-1 w-full h-full px-5">
-				<div className="flex flex-col gap-2">
-					<div>
-						<h3 className="text-2xl font-light">
-							Connect <span className="font-semibold">bitcoin wallet</span> to
-							start zapping to your favorite content and creator.
-						</h3>
-					</div>
-				</div>
-				<div className="flex flex-col gap-2 mt-10">
-					<div className="flex flex-col gap-1.5">
-						<label>Paste a Nostr Wallet Connect connection string</label>
-						<textarea
-							value={uri}
-							onChange={(e) => setUri(e.target.value)}
-							placeholder="nostrconnect://"
-							className="w-full h-24 px-3 bg-transparent rounded-lg 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>
-					<button
-						type="button"
-						onClick={save}
-						className="inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
-					>
-						Save & Connect
-					</button>
-				</div>
-			</div>
-		</Container>
-	);
-}
--- a/apps/desktop2/src/routes/panel.tsx
+++ b/apps/desktop2/src/routes/panel.tsx
@@ -42,50 +42,41 @@ function Screen() {
 	const [account, setAccount] = useState<string>(null);
 	const [events, setEvents] = useState<LumeEvent[]>([]);

-	const texts = useMemo(
-		() => events.filter((ev) => ev.kind === Kind.Text),
-		[events],
-	);
-
-	const zaps = useMemo(() => {
-		const groups = new Map<string, LumeEvent[]>();
-		const list = events.filter((ev) => ev.kind === Kind.ZapReceipt);
-
-		for (const event of list) {
-			const rootId = event.tags.filter((tag) => tag[0] === "e")[0]?.[1];
-
-			if (rootId) {
-				if (groups.has(rootId)) {
-					groups.get(rootId).push(event);
-				} else {
-					groups.set(rootId, [event]);
-				}
-			}
-		}
-
-		return groups;
-	}, [events]);
-
-	const reactions = useMemo(() => {
-		const groups = new Map<string, LumeEvent[]>();
-		const list = events.filter(
+	const { texts, zaps, reactions } = useMemo(() => {
+		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 list) {
+		for (const event of reactEvents) {
 			const rootId = event.tags.filter((tag) => tag[0] === "e")[0]?.[1];

 			if (rootId) {
-				if (groups.has(rootId)) {
-					groups.get(rootId).push(event);
+				if (reactions.has(rootId)) {
+					reactions.get(rootId).push(event);
 				} else {
-					groups.set(rootId, [event]);
+					reactions.set(rootId, [event]);
 				}
 			}
 		}

-		return groups;
-	}, [events]);
+		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 };
+	}, [events?.length]);

 	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
 		e.preventDefault();
@@ -99,10 +90,6 @@ function Screen() {
 				text: "New Post",
 				action: () => LumeWindow.openEditor(),
 			}),
-			MenuItem.new({
-				text: "Search",
-				action: () => LumeWindow.openSearch(),
-			}),
 			PredefinedMenuItem.new({ item: "Separator" }),
 			MenuItem.new({
 				text: "About Lume",
@@ -180,13 +167,6 @@ function Screen() {
 							<User.Avatar className="rounded-full size-7" />
 						</User.Root>
 					</User.Provider>
-					<button
-						type="button"
-						onClick={() => LumeWindow.openSearch()}
-						className="inline-flex items-center justify-center rounded-full size-7 bg-black/5 dark:bg-white/5"
-					>
-						<SearchIcon className="size-4" />
-					</button>
 					<button
 						type="button"
 						onClick={(e) => showContextMenu(e)}
@@ -351,7 +331,7 @@ function RootNote({ id }: { id: string }) {
 			<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 shrink-0" />
+						<User.Avatar className="rounded-full size-8" />
 					</User.Root>
 				</User.Provider>
 				<div className="line-clamp-1">{data.content}</div>
@@ -371,7 +351,7 @@ function TextNote({ event }: { event: LumeEvent }) {
 			<Note.Root className="flex flex-col p-2 mb-2 rounded-lg shrink-0 backdrop-blur-md 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 shrink-0" />
+						<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" />
--- a/apps/desktop2/src/routes/search.notes.tsx
+++ b/apps/desktop2/src/routes/search.notes.tsx
@@ -0,0 +1,96 @@
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { LumeEvent, NostrQuery } from "@lume/system";
+import { Kind, type NostrEvent } from "@lume/types";
+import { Spinner } from "@lume/ui";
+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>
+	);
+}
--- a/apps/desktop2/src/routes/search.tsx
+++ b/apps/desktop2/src/routes/search.tsx
@@ -1,148 +1,44 @@
-import { Note } from "@/components/note";
-import { User } from "@/components/user";
-import { SearchIcon } from "@lume/icons";
-import { LumeEvent, LumeWindow } from "@lume/system";
-import { Kind, type NostrEvent } from "@lume/types";
-import { Spinner } from "@lume/ui";
-import { createFileRoute } from "@tanstack/react-router";
-import { message } from "@tauri-apps/plugin-dialog";
-import { useEffect, useState } from "react";
-import { useDebounce } from "use-debounce";
+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 [loading, setLoading] = useState(false);
-	const [events, setEvents] = useState<LumeEvent[]>([]);
-	const [search, setSearch] = useState("");
-	const [searchValue] = useDebounce(search, 500);
-
-	const searchEvents = async () => {
-		try {
-			setLoading(true);
-
-			const query = `https://api.nostr.wine/search?query=${searchValue}&kind=0,1`;
-			const res = await fetch(query);
-			const content = await res.json();
-			const events = content.data as NostrEvent[];
-			const lumeEvents = events.map((ev) => new LumeEvent(ev));
-			const sorted = lumeEvents.sort((a, b) => b.created_at - a.created_at);
-
-			setLoading(false);
-			setEvents(sorted);
-		} catch (e) {
-			setLoading(false);
-			await message(String(e), {
-				title: "Search",
-				kind: "error",
-			});
-		}
-	};
-
-	useEffect(() => {
-		if (searchValue.length >= 3 && searchValue.length < 500) {
-			searchEvents();
-		}
-	}, [searchValue]);
+	const { query } = Route.useSearch();

 	return (
-		<div data-tauri-drag-region className="flex flex-col w-full h-full">
-			<div className="relative flex flex-col h-24 border-b shrink-0 border-black/5 dark:border-white/5">
-				<div data-tauri-drag-region className="w-full h-4 shrink-0" />
-				<input
-					value={search}
-					onChange={(e) => setSearch(e.target.value)}
-					onKeyDown={(e) => {
-						if (e.key === "Enter") searchEvents();
-					}}
-					placeholder="Search anything..."
-					className="w-full h-20 px-3 pt-10 text-lg bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 dark:placeholder:text-neutral-600"
-				/>
-			</div>
-			<div className="flex-1 p-3 overflow-y-auto scrollbar-none">
-				{loading ? (
-					<div className="flex items-center justify-center w-full h-full">
-						<Spinner />
-					</div>
-				) : events.length ? (
-					<div className="flex flex-col gap-5">
-						<div className="flex flex-col gap-1.5">
-							<div className="text-sm font-medium text-neutral-700 dark:text-neutral-300 shrink-0">
-								Users
-							</div>
-							<div className="flex flex-col flex-1 gap-1">
-								{events
-									.filter((ev) => ev.kind === Kind.Metadata)
-									.map((event) => (
-										<SearchUser key={event.pubkey} event={event} />
-									))}
-							</div>
-						</div>
-						<div className="flex flex-col gap-1.5">
-							<div className="text-sm font-medium text-neutral-700 dark:text-neutral-300 shrink-0">
-								Notes
-							</div>
-							<div className="flex flex-col flex-1 gap-3">
-								{events
-									.filter((ev) => ev.kind === Kind.Text)
-									.map((event) => (
-										<SearchNote key={event.id} event={event} />
-									))}
-							</div>
-						</div>
-					</div>
-				) : null}
-				{!loading && !events.length ? (
-					<div className="flex flex-col items-center justify-center h-full gap-3">
-						<div className="inline-flex items-center justify-center rounded-full size-16 bg-black/10 dark:bg-white/10">
-							<SearchIcon className="size-6" />
-						</div>
-						Try searching for people, notes, or keywords
-					</div>
-				) : null}
+		<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>
-		</div>
-	);
-}
-
-function SearchUser({ event }: { event: LumeEvent }) {
-	return (
-		<button
-			key={event.id}
-			type="button"
-			onClick={() => LumeWindow.openProfile(event.pubkey)}
-			className="col-span-1 p-2 rounded-lg hover:bg-black/10 dark:hover:bg-white/10"
-		>
-			<User.Provider pubkey={event.pubkey} embedProfile={event.content}>
-				<User.Root className="flex items-center gap-2">
-					<User.Avatar className="rounded-full size-9 shrink-0" />
-					<div className="inline-flex items-center gap-1.5">
-						<User.Name className="font-semibold" />
-						<User.NIP05 />
-					</div>
-				</User.Root>
-			</User.Provider>
-		</button>
-	);
-}
-
-function SearchNote({ event }: { event: LumeEvent }) {
-	return (
-		<div className="bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
-			<Note.Provider event={event}>
-				<Note.Root>
-					<div className="flex items-center justify-between px-3 h-14">
-						<Note.User />
-						<Note.Menu />
-					</div>
-					<Note.Content className="px-3" quote={false} mention={false} />
-					<div className="flex items-center gap-4 px-3 mt-3 h-14">
-						<Note.Open />
-					</div>
-				</Note.Root>
-			</Note.Provider>
+			<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>
 	);
 }
--- a/apps/desktop2/src/routes/search.users.tsx
+++ b/apps/desktop2/src/routes/search.users.tsx
@@ -0,0 +1,101 @@
+import { User } from "@/components/user";
+import { LumeWindow, NostrQuery } from "@lume/system";
+import type { NostrEvent } from "@lume/types";
+import { Spinner } from "@lume/ui";
+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 backdrop-blur-lg 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>
+	);
+}
--- a/apps/desktop2/src/routes/settings/backup.tsx
+++ b/apps/desktop2/src/routes/settings/backup.tsx
@@ -51,7 +51,7 @@ function Account({ account }: { account: string }) {
 		<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="object-cover rounded-full size-8" />
+					<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">
--- a/apps/desktop2/src/routes/trending.users.tsx
+++ b/apps/desktop2/src/routes/trending.users.tsx
@@ -1,5 +1,5 @@
-import { Spinner } from "@lume/ui";
 import { User } from "@/components/user";
+import { Spinner } from "@lume/ui";
 import { Await, defer } from "@tanstack/react-router";
 import { createFileRoute } from "@tanstack/react-router";
 import { Suspense } from "react";
@@ -52,7 +52,7 @@ export function Screen() {
 										<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 shrink-0 rounded-full object-cover" />
+													<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" />