chore: bump version

apps/desktop2/package.json

@@ -20,6 +20,7 @@
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-popover": "^1.0.7",
+		"@radix-ui/react-scroll-area": "^1.1.0",
 		"@radix-ui/react-switch": "^1.0.3",
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@radix-ui/react-tooltip": "^1.0.7",

apps/desktop2/src/app.css

@@ -2,18 +2,6 @@
 @tailwind utilities;
 @tailwind components;
 
-*::-webkit-scrollbar {
-  @apply w-[5px];
-}
-
-*::-webkit-scrollbar-track {
-  @apply bg-transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  @apply rounded bg-black dark:bg-white;
-}
-
 @layer utilities {
   .content-break {
     word-break: break-word;

apps/desktop2/src/components/note/content.tsx

@@ -96,7 +96,9 @@ export function NoteContent({
 			<div
 				className={cn(
 					"select-text text-pretty content-break overflow-hidden",
-					event.content.length > 620 ? "max-h-[250px] gradient-mask-b-0" : "",
+					event.meta?.content.length > 400
+						? "max-h-[250px] gradient-mask-b-0"
+						: "",
 					className,
 				)}
 			>

apps/desktop2/src/components/note/preview/images.tsx

@@ -42,8 +42,8 @@ export function Images({ urls }: { urls: string[] }) {
 	return (
 		<Carousel
 			items={imageUrls}
-			renderItem={({ item, isSnapPoint }) => (
+			renderItem={({ item, index, isSnapPoint }) => (
-				<CarouselItem key={item} isSnapPoint={isSnapPoint}>
+				<CarouselItem key={item + index} isSnapPoint={isSnapPoint}>
 					<img
 						src={item}
 						alt={item}

apps/desktop2/src/routes/events/$eventId.tsx

@@ -1,69 +1,82 @@
 import { Note } from "@/components/note";
-import { type LumeEvent, NostrQuery, useEvent } from "@lume/system";
+import { type LumeEvent, NostrQuery } from "@lume/system";
 import { Box, Container, Spinner } from "@lume/ui";
 import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
 import { WindowVirtualizer } from "virtua";
-import { ReplyList } from "./-components/replyList";
+import { Reply } from "./-components/reply";
 
 export const Route = createFileRoute("/events/$eventId")({
 	beforeLoad: async () => {
 		const settings = await NostrQuery.getUserSettings();
 		return { settings };
 	},
+	loader: async ({ params }) => {
+		const event = await NostrQuery.getEvent(params.eventId);
+		return event;
+	},
 	component: Screen,
 });
 
 function Screen() {
-	const { eventId } = Route.useParams();
+	const event = Route.useLoaderData();
-	const { isLoading, isError, data } = useEvent(eventId);
 
-	if (isLoading) {
+	const [reload, setReload] = useState(false);
-		return (
+	const [replies, setReplies] = useState<LumeEvent[]>(null);
-			<div className="flex items-center justify-center w-full h-full">
-				<Spinner className="size-5" />
-			</div>
-		);
-	}
 
-	if (isError) {
+	useEffect(() => {
-		<div className="flex items-center justify-center w-full h-full">
+		let mounted = true;
-			<p>Not found.</p>
+
-		</div>;
+		if (event) {
-	}
+			event.getAllReplies().then((data) => {
+				if (mounted) setReplies(data);
+			});
+		}
+
+		return () => {
+			mounted = false;
+		};
+	}, [event]);
 
 	return (
 		<Container withDrag>
 			<Box className="scrollbar-none">
 				<WindowVirtualizer>
-					<MainNote data={data} />
+					<Note.Provider event={event}>
-					{data ? (
+						<Note.Root>
-						<ReplyList eventId={eventId} />
+							<div className="flex items-center justify-between px-3 h-14">
-					) : (
+								<Note.User />
-						<div className="flex items-center justify-center w-full h-full">
+								<Note.Menu />
-							<Spinner className="size-5" />
+							</div>
+							<Note.ContentLarge className="px-3" />
+							<div className="flex items-center justify-end gap-2 px-3 mt-4 h-11">
+								<Note.Reply large />
+								<Note.Repost large />
+								<Note.Zap large />
+							</div>
+						</Note.Root>
+					</Note.Provider>
+					<div className="flex flex-col">
+						<div className="flex items-center px-3 text-sm font-semibold border-t h-11 text-neutral-700 dark:text-neutral-300 border-neutral-100 dark:border-neutral-900">
+							Replies ({replies?.length ?? 0})
 						</div>
-					)}
+						{!replies ? (
+							<Spinner />
+						) : !replies.length ? (
+							<div className="flex items-center justify-center w-full">
+								<div className="flex flex-col items-center justify-center gap-2 py-6">
+									<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) => <Reply key={event.id} event={event} />)
+						)}
+					</div>
 				</WindowVirtualizer>
 			</Box>
 		</Container>
 	);
 }
-
-function MainNote({ data }: { data: LumeEvent }) {
-	return (
-		<Note.Provider event={data}>
-			<Note.Root>
-				<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 justify-end gap-2 px-3 mt-4 h-11">
-					<Note.Reply large />
-					<Note.Repost large />
-					<Note.Zap large />
-				</div>
-			</Note.Root>
-		</Note.Provider>
-	);
-}

apps/desktop2/src/routes/events/-components/reply.tsx

@@ -1,18 +1,18 @@
-import type { EventWithReplies } from "@lume/types";
+import { Note } from "@/components/note";
+import type { LumeEvent } from "@lume/system";
 import { cn } from "@lume/utils";
 import { SubReply } from "./subReply";
-import { Note } from "@/components/note";
 
-export function Reply({ event }: { event: EventWithReplies }) {
+export function Reply({ event }: { event: LumeEvent }) {
 	return (
 		<Note.Provider event={event}>
 			<Note.Root className="border-t border-neutral-100 dark:border-neutral-900">
-				<div className="px-3 h-14 flex items-center justify-between">
+				<div className="flex items-center justify-between px-3 h-14">
 					<Note.User />
 					<Note.Menu />
 				</div>
 				<Note.ContentLarge className="px-3" />
-				<div className="mt-3 flex items-center gap-4 px-3 h-14">
+				<div className="flex items-center gap-4 px-3 mt-3 h-14">
 					<Note.Reply />
 					<Note.Repost />
 					<Note.Zap />

apps/desktop2/src/routes/global.tsx

@@ -6,9 +6,10 @@ import { ArrowRightCircleIcon } from "@lume/icons";
 import { type LumeEvent, NostrQuery } from "@lume/system";
 import { type ColumnRouteSearch, Kind } from "@lume/types";
 import { Spinner } from "@lume/ui";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/global")({
@@ -47,6 +48,8 @@ export function Screen() {
 		refetchOnWindowFocus: false,
 	});
 
+	const ref = useRef<HTMLDivElement>(null);
+
 	const renderItem = useCallback(
 		(event: LumeEvent) => {
 			if (!event) return;
@@ -70,48 +73,63 @@ export function Screen() {
 	);
 
 	return (
-		<div className="w-full h-full p-3 overflow-y-auto scrollbar-none">
+		<ScrollArea.Root
-			{isFetching && !isLoading && !isFetchingNextPage ? (
+			type={"scroll"}
-				<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">
+			scrollHideDelay={300}
-					<div className="flex items-center justify-center gap-2">
+			className="overflow-hidden size-full"
-						<Spinner className="size-5" />
+		>
-						<span className="text-sm font-medium">Fetching new notes...</span>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
-					</div>
+				<Virtualizer scrollRef={ref}>
-				</div>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
-			) : null}
+						<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">
-			{isLoading ? (
+							<div className="flex items-center justify-center gap-2">
-				<div className="flex items-center justify-center w-full h-16 gap-2">
+								<Spinner className="size-5" />
-					<Spinner className="size-5" />
+								<span className="text-sm font-medium">
-					<span className="text-sm font-medium">Loading...</span>
+									Fetching new notes...
-				</div>
+								</span>
-			) : !data.length ? (
+							</div>
-				<div className="flex items-center justify-center">
+						</div>
-					Yo. You're catching up on all the things happening around you.
+					) : null}
-				</div>
+					{isLoading ? (
-			) : (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
-				<Virtualizer overscan={3}>
-					{data.map((item) => renderItem(item))}
-				</Virtualizer>
-			)}
-			{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" />
-						) : (
+							<span className="text-sm font-medium">Loading...</span>
-							<>
+						</div>
-								<ArrowRightCircleIcon className="size-5" />
+					) : !data.length ? (
-								Load more
+						<div className="flex items-center justify-center">
-							</>
+							Yo. You're catching up on all the things happening around you.
-						)}
+						</div>
-					</button>
+					) : (
-				</div>
+						data.map((item) => renderItem(item))
-			) : null}
+					)}
-		</div>
+					{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>
 	);
 }

apps/desktop2/src/routes/group.tsx

@@ -6,9 +6,10 @@ import { ArrowRightCircleIcon } from "@lume/icons";
 import { type LumeEvent, NostrQuery } from "@lume/system";
 import { type ColumnRouteSearch, Kind } from "@lume/types";
 import { Spinner } from "@lume/ui";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/group")({
@@ -61,6 +62,8 @@ export function Screen() {
 		refetchOnWindowFocus: false,
 	});
 
+	const ref = useRef<HTMLDivElement>(null);
+
 	const renderItem = useCallback(
 		(event: LumeEvent) => {
 			if (!event) return;
@@ -84,48 +87,63 @@ export function Screen() {
 	);
 
 	return (
-		<div className="w-full h-full p-3 overflow-y-auto scrollbar-none">
+		<ScrollArea.Root
-			{isFetching && !isLoading && !isFetchingNextPage ? (
+			type={"scroll"}
-				<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">
+			scrollHideDelay={300}
-					<div className="flex items-center justify-center gap-2">
+			className="overflow-hidden size-full"
-						<Spinner className="size-5" />
+		>
-						<span className="text-sm font-medium">Fetching new notes...</span>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
-					</div>
+				<Virtualizer scrollRef={ref}>
-				</div>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
-			) : null}
+						<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">
-			{isLoading ? (
+							<div className="flex items-center justify-center gap-2">
-				<div className="flex items-center justify-center w-full h-16 gap-2">
+								<Spinner className="size-5" />
-					<Spinner className="size-5" />
+								<span className="text-sm font-medium">
-					<span className="text-sm font-medium">Loading...</span>
+									Fetching new notes...
-				</div>
+								</span>
-			) : !data.length ? (
+							</div>
-				<div className="flex items-center justify-center">
+						</div>
-					Yo. You're catching up on all the things happening around you.
+					) : null}
-				</div>
+					{isLoading ? (
-			) : (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
-				<Virtualizer overscan={3}>
-					{data.map((item) => renderItem(item))}
-				</Virtualizer>
-			)}
-			{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" />
-						) : (
+							<span className="text-sm font-medium">Loading...</span>
-							<>
+						</div>
-								<ArrowRightCircleIcon className="size-5" />
+					) : !data.length ? (
-								Load more
+						<div className="flex items-center justify-center">
-							</>
+							Yo. You're catching up on all the things happening around you.
-						)}
+						</div>
-					</button>
+					) : (
-				</div>
+						data.map((item) => renderItem(item))
-			) : null}
+					)}
-		</div>
+					{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>
 	);
 }

apps/desktop2/src/routes/newsfeed.tsx

@@ -6,9 +6,10 @@ import { ArrowRightCircleIcon } from "@lume/icons";
 import { type LumeEvent, NostrAccount, NostrQuery } from "@lume/system";
 import { type ColumnRouteSearch, Kind } from "@lume/types";
 import { Spinner } from "@lume/ui";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/newsfeed")({
@@ -59,6 +60,8 @@ export function Screen() {
 		refetchOnWindowFocus: false,
 	});
 
+	const ref = useRef<HTMLDivElement>(null);
+
 	const renderItem = useCallback(
 		(event: LumeEvent) => {
 			if (!event) return;
@@ -82,48 +85,63 @@ export function Screen() {
 	);
 
 	return (
-		<div className="w-full h-full p-3 overflow-y-auto scrollbar-none">
+		<ScrollArea.Root
-			{isFetching && !isLoading && !isFetchingNextPage ? (
+			type={"scroll"}
-				<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">
+			scrollHideDelay={300}
-					<div className="flex items-center justify-center gap-2">
+			className="overflow-hidden size-full"
-						<Spinner className="size-5" />
+		>
-						<span className="text-sm font-medium">Fetching new notes...</span>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
-					</div>
+				<Virtualizer scrollRef={ref}>
-				</div>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
-			) : null}
+						<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">
-			{isLoading ? (
+							<div className="flex items-center justify-center gap-2">
-				<div className="flex items-center justify-center w-full h-16 gap-2">
+								<Spinner className="size-5" />
-					<Spinner className="size-5" />
+								<span className="text-sm font-medium">
-					<span className="text-sm font-medium">Loading...</span>
+									Fetching new notes...
-				</div>
+								</span>
-			) : !data.length ? (
+							</div>
-				<div className="flex items-center justify-center">
+						</div>
-					Yo. You're catching up on all the things happening around you.
+					) : null}
-				</div>
+					{isLoading ? (
-			) : (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
-				<Virtualizer overscan={3}>
-					{data.map((item) => renderItem(item))}
-				</Virtualizer>
-			)}
-			{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" />
-						) : (
+							<span className="text-sm font-medium">Loading...</span>
-							<>
+						</div>
-								<ArrowRightCircleIcon className="size-5" />
+					) : !data.length ? (
-								Load more
+						<div className="flex items-center justify-center">
-							</>
+							Yo. You're catching up on all the things happening around you.
-						)}
+						</div>
-					</button>
+					) : (
-				</div>
+						data.map((item) => renderItem(item))
-			) : null}
+					)}
-		</div>
+					{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>
 	);
 }

apps/desktop2/src/routes/panel.tsx

@@ -13,13 +13,22 @@ import {
 	decodeZapInvoice,
 	formatCreatedAt,
 } from "@lume/utils";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import * as Tabs from "@radix-ui/react-tabs";
 import { createFileRoute } from "@tanstack/react-router";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrent } from "@tauri-apps/api/window";
 import { exit } from "@tauri-apps/plugin-process";
 import { open } from "@tauri-apps/plugin-shell";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { Virtualizer } from "virtua";
 
 interface EmitAccount {
 	account: string;
@@ -161,7 +170,7 @@ function Screen() {
 
 	return (
 		<div className="flex flex-col w-full h-full">
-			<div className="flex items-center justify-between px-4 border-b h-11 shrink-0 border-black/5">
+			<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>
@@ -193,35 +202,36 @@ function Screen() {
 			>
 				<Tabs.List className="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 data-[state=active]:border-black/30 dark:data-[state=active] data-[state=inactive]:opacity-50"
+						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 data-[state=active]:border-black/30 dark:data-[state=active] data-[state=inactive]:opacity-50"
+						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 data-[state=active]:border-black/30 dark:data-[state=active] data-[state=inactive]:opacity-50"
+						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>
-				<div className="p-2">
+				<div className="h-full">
-					<Tabs.Content value="replies" className="flex flex-col gap-2">
+					<Tab value="replies">
-						{texts.map((event) => (
+						{texts.map((event, index) => (
-							<TextNote key={event.id} event={event} />
+							// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+							<TextNote key={event.id + index} event={event} />
 						))}
-					</Tabs.Content>
+					</Tab>
-					<Tabs.Content value="reactions" className="flex flex-col gap-2">
+					<Tab value="reactions">
 						{[...reactions.entries()].map(([root, events]) => (
 							<div
 								key={root}
-								className="flex flex-col gap-1 p-2 rounded-lg shrink-0 backdrop-blur-md bg-black/10 dark:bg-white/10"
+								className="flex flex-col gap-1 p-2 mb-2 rounded-lg shrink-0 backdrop-blur-md 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">
@@ -250,12 +260,12 @@ function Screen() {
 								</div>
 							</div>
 						))}
-					</Tabs.Content>
+					</Tab>
-					<Tabs.Content value="zaps" className="flex flex-col gap-2">
+					<Tab value="zaps">
 						{[...zaps.entries()].map(([root, events]) => (
 							<div
 								key={root}
-								className="flex flex-col gap-1 p-2 rounded-lg shrink-0 backdrop-blur-md bg-black/10 dark:bg-white/10"
+								className="flex flex-col gap-1 p-2 mb-2 rounded-lg shrink-0 backdrop-blur-md 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">
@@ -279,13 +289,38 @@ function Screen() {
 								</div>
 							</div>
 						))}
-					</Tabs.Content>
+					</Tab>
 				</div>
 			</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.Root
+				type={"scroll"}
+				scrollHideDelay={300}
+				className="overflow-hidden size-full"
+			>
+				<ScrollArea.Viewport ref={ref} className="h-full px-2 pt-2">
+					<Virtualizer scrollRef={ref}>{children}</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>
+		</Tabs.Content>
+	);
+}
+
 function RootNote({ id }: { id: string }) {
 	const { isLoading, isError, data } = useEvent(id);
 
@@ -332,46 +367,40 @@ function TextNote({ event }: { event: LumeEvent }) {
 		.slice(0, 3);
 
 	return (
-		<button
+		<Note.Provider event={event}>
-			type="button"
+			<Note.Root className="flex flex-col p-2 mb-2 rounded-lg shrink-0 backdrop-blur-md bg-black/10 dark:bg-white/10">
-			key={event.id}
+				<User.Provider pubkey={event.pubkey}>
-			onClick={() => LumeWindow.openEvent(event)}
+					<User.Root className="inline-flex items-center gap-2">
-		>
+						<User.Avatar className="rounded-full size-9 shrink-0" />
-			<Note.Provider event={event}>
+						<div className="flex flex-col flex-1">
-				<Note.Root className="flex flex-col p-2 rounded-lg shrink-0 backdrop-blur-md bg-black/10 dark:bg-white/10">
+							<div className="flex items-baseline justify-between w-full">
-					<User.Provider pubkey={event.pubkey}>
+								<User.Name className="text-sm font-semibold leading-tight" />
-						<User.Root className="inline-flex items-center gap-2">
+								<span className="text-sm leading-tight text-black/50 dark:text-white/50">
-							<User.Avatar className="rounded-full size-9 shrink-0" />
+									{formatCreatedAt(event.created_at)}
-							<div className="flex flex-col flex-1">
+								</span>
-								<div className="flex items-baseline justify-between w-full">
+							</div>
-									<User.Name className="text-sm font-semibold leading-tight" />
+							<div className="inline-flex items-baseline gap-1 text-xs">
-									<span className="text-sm leading-tight text-black/50 dark:text-white/50">
+								<span className="leading-tight text-black/50 dark:text-white/50">
-										{formatCreatedAt(event.created_at)}
+									Reply to:
-									</span>
+								</span>
-								</div>
+								<div className="inline-flex items-baseline gap-1">
-								<div className="inline-flex items-baseline gap-1 text-xs">
+									{pTags.map((replyTo) => (
-									<span className="leading-tight text-black/50 dark:text-white/50">
+										<User.Provider key={replyTo} pubkey={replyTo}>
-										Reply to:
+											<User.Root>
-									</span>
+												<User.Name className="font-medium leading-tight" />
-									<div className="inline-flex items-baseline gap-1">
+											</User.Root>
-										{pTags.map((replyTo) => (
+										</User.Provider>
-											<User.Provider key={replyTo} pubkey={replyTo}>
+									))}
-												<User.Root>
-													<User.Name className="font-medium leading-tight" />
-												</User.Root>
-											</User.Provider>
-										))}
-									</div>
 								</div>
 							</div>
-						</User.Root>
+						</div>
-					</User.Provider>
+					</User.Root>
-					<div className="flex gap-2">
+				</User.Provider>
-						<div className="w-9 shrink-0" />
+				<div className="flex gap-2">
-						<div className="line-clamp-1 text-start">{event.content}</div>
+					<div className="w-9 shrink-0" />
-					</div>
+					<div className="line-clamp-1 text-start">{event.content}</div>
-				</Note.Root>
+				</div>
-			</Note.Provider>
+			</Note.Root>
-		</button>
+		</Note.Provider>
 	);
 }

apps/desktop2/src/routes/topic.tsx

@@ -6,9 +6,10 @@ import { ArrowRightCircleIcon } from "@lume/icons";
 import { type LumeEvent, NostrQuery } from "@lume/system";
 import { type ColumnRouteSearch, Kind } from "@lume/types";
 import { Spinner } from "@lume/ui";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 type Topic = {
@@ -71,6 +72,8 @@ export function Screen() {
 		refetchOnWindowFocus: false,
 	});
 
+	const ref = useRef<HTMLDivElement>(null);
+
 	const renderItem = useCallback(
 		(event: LumeEvent) => {
 			if (!event) return;
@@ -94,48 +97,63 @@ export function Screen() {
 	);
 
 	return (
-		<div className="w-full h-full p-3 overflow-y-auto scrollbar-none">
+		<ScrollArea.Root
-			{isFetching && !isLoading && !isFetchingNextPage ? (
+			type={"scroll"}
-				<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">
+			scrollHideDelay={300}
-					<div className="flex items-center justify-center gap-2">
+			className="overflow-hidden size-full"
-						<Spinner className="size-5" />
+		>
-						<span className="text-sm font-medium">Fetching new notes...</span>
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
-					</div>
+				<Virtualizer scrollRef={ref}>
-				</div>
+					{isFetching && !isLoading && !isFetchingNextPage ? (
-			) : null}
+						<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">
-			{isLoading ? (
+							<div className="flex items-center justify-center gap-2">
-				<div className="flex items-center justify-center w-full h-16 gap-2">
+								<Spinner className="size-5" />
-					<Spinner className="size-5" />
+								<span className="text-sm font-medium">
-					<span className="text-sm font-medium">Loading...</span>
+									Fetching new notes...
-				</div>
+								</span>
-			) : !data.length ? (
+							</div>
-				<div className="flex items-center justify-center">
+						</div>
-					Yo. You're catching up on all the things happening around you.
+					) : null}
-				</div>
+					{isLoading ? (
-			) : (
+						<div className="flex items-center justify-center w-full h-16 gap-2">
-				<Virtualizer overscan={3}>
-					{data.map((item) => renderItem(item))}
-				</Virtualizer>
-			)}
-			{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" />
-						) : (
+							<span className="text-sm font-medium">Loading...</span>
-							<>
+						</div>
-								<ArrowRightCircleIcon className="size-5" />
+					) : !data.length ? (
-								Load more
+						<div className="flex items-center justify-center">
-							</>
+							Yo. You're catching up on all the things happening around you.
-						)}
+						</div>
-					</button>
+					) : (
-				</div>
+						data.map((item) => renderItem(item))
-			) : null}
+					)}
-		</div>
+					{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>
 	);
 }

apps/desktop2/src/routes/trending.notes.tsx

@@ -2,9 +2,10 @@ import { TextNote } from "@/components/text";
 import { LumeEvent } from "@lume/system";
 import type { NostrEvent } from "@lume/types";
 import { Spinner } from "@lume/ui";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Await, createFileRoute } from "@tanstack/react-router";
 import { defer } from "@tanstack/react-router";
-import { Suspense } from "react";
+import { Suspense, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/trending/notes")({
@@ -34,33 +35,47 @@ export const Route = createFileRoute("/trending/notes")({
 
 export function Screen() {
 	const { data } = Route.useLoaderData();
+	const ref = useRef<HTMLDivElement>(null);
 
 	return (
-		<div className="w-full h-full">
+		<ScrollArea.Root
-			<Virtualizer overscan={3}>
+			type={"scroll"}
-				<Suspense
+			scrollHideDelay={300}
-					fallback={
+			className="overflow-hidden size-full"
-						<div className="flex flex-col items-center justify-center w-full h-20 gap-1">
+		>
-							<button
+			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
-								type="button"
+				<Virtualizer scrollRef={ref}>
-								className="inline-flex items-center gap-2 text-sm font-medium"
+					<Suspense
-								disabled
+						fallback={
-							>
+							<div className="flex flex-col items-center justify-center w-full h-20 gap-1">
-								<Spinner className="size-5" />
+								<button
-								Loading...
+									type="button"
-							</button>
+									className="inline-flex items-center gap-2 text-sm font-medium"
-						</div>
+									disabled
-					}
+								>
-				>
+									<Spinner className="size-5" />
-					<Await promise={data}>
+									Loading...
-						{(notes) =>
+								</button>
-							notes.map((event) => (
+							</div>
-								<TextNote key={event.id} event={event} className="mb-3" />
-							))
 						}
-					</Await>
+					>
-				</Suspense>
+						<Await promise={data}>
-			</Virtualizer>
+							{(notes) =>
-		</div>
+								notes.map((event) => (
+									<TextNote key={event.id} event={event} className="mb-3" />
+								))
+							}
+						</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>
 	);
 }

apps/desktop2/src/routes/users/$pubkey.tsx

@@ -1,17 +1,21 @@
-import { Box, Container, Spinner } from "@lume/ui";
-import { User } from "@/components/user";
-import { createFileRoute, defer } from "@tanstack/react-router";
-import { WindowVirtualizer } from "virtua";
 import { Conversation } from "@/components/conversation";
 import { Quote } from "@/components/quote";
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { Kind } from "@lume/types";
+import { User } from "@/components/user";
-import { Suspense, useCallback } from "react";
-import { Await } from "@tanstack/react-router";
 import { type LumeEvent, NostrQuery } from "@lume/system";
+import { Kind } from "@lume/types";
+import { Box, Container, Spinner } from "@lume/ui";
+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)) };
 	},

packages/system/src/event.ts

@@ -17,6 +17,7 @@ export class LumeEvent {
 	public sig: string;
 	public meta: Meta;
 	public relay?: string;
+	public replies?: LumeEvent[];
 	#raw: NostrEvent;
 
 	constructor(event: NostrEvent) {
@@ -94,20 +95,22 @@ export class LumeEvent {
 		return { id, relayHint };
 	}
 
-	public async getReplies(id: string) {
+	public async getAllReplies() {
-		const query = await commands.getReplies(id);
+		const query = await commands.getReplies(this.id);
 
 		if (query.status === "ok") {
 			const events = query.data.map((item) => {
-				const raw = JSON.parse(item.raw) as EventWithReplies;
+				const nostrEvent: NostrEvent = JSON.parse(item.raw);
 
 				if (item.parsed) {
-					raw.meta = item.parsed;
+					nostrEvent.meta = item.parsed;
 				} else {
-					raw.meta = null;
+					nostrEvent.meta = null;
 				}
 
-				return raw;
+				const lumeEvent = new LumeEvent(nostrEvent);
+
+				return lumeEvent;
 			});
 
 			if (events.length > 0) {
@@ -115,7 +118,7 @@ export class LumeEvent {
 
 				for (const event of events) {
 					const tags = event.tags.filter(
-						(el) => el[0] === "e" && el[1] !== id && el[3] !== "mention",
+						(el) => el[0] === "e" && el[1] !== this.id && el[3] !== "mention",
 					);
 
 					if (tags.length > 0) {
@@ -141,6 +144,9 @@ export class LumeEvent {
 			}
 
 			return events;
+		} else {
+			console.error(query.error);
+			return [];
 		}
 	}
 

packages/system/src/query.ts

@@ -10,7 +10,7 @@ import { LumeEvent } from "./event";
 export class NostrQuery {
 	static #toLumeEvents(richEvents: RichEvent[]) {
 		const events = richEvents.map((item) => {
-			const nostrEvent = JSON.parse(item.raw) as NostrEvent;
+			const nostrEvent: NostrEvent = JSON.parse(item.raw);
 
 			if (item.parsed) {
 				nostrEvent.meta = item.parsed;

packages/ui/src/carousel.tsx

@@ -11,29 +11,25 @@ interface CarouselProps<T> {
 
 interface CarouselRenderItemProps<T> {
 	readonly item: T;
+	readonly index: number;
 	readonly isSnapPoint: boolean;
 }
 
 export const Carousel = <T,>({ items, renderItem }: CarouselProps<T>) => {
-	const {
+	const { scrollRef, pages, activePageIndex, prev, next, snapPointIndexes } =
-		scrollRef,
+		useSnapCarousel();
-		pages,
+
-		activePageIndex,
-		prev,
-		next,
-		goTo,
-		snapPointIndexes,
-	} = useSnapCarousel();
 	return (
 		<div className="relative group">
 			<ul
 				ref={scrollRef}
 				className="relative flex overflow-auto snap-x scrollbar-none"
 			>
-				{items.map((item, i) =>
+				{items.map((item, index) =>
 					renderItem({
 						item,
-						isSnapPoint: snapPointIndexes.has(i),
+						index,
+						isSnapPoint: snapPointIndexes.has(index),
 					}),
 				)}
 			</ul>
@@ -74,13 +70,15 @@ interface CarouselItemProps {
 	readonly children?: React.ReactNode;
 }
 
-export const CarouselItem = ({ isSnapPoint, children }: CarouselItemProps) => (
+export const CarouselItem = ({ isSnapPoint, children }: CarouselItemProps) => {
-	<li
+	return (
-		className={cn(
+		<li
-			"w-[240px] h-[320px] shrink-0 pl-3 last:pr-2",
+			className={cn(
-			isSnapPoint ? "" : "snap-start",
+				"w-[240px] h-[320px] shrink-0 pl-3 last:pr-2",
-		)}
+				isSnapPoint ? "" : "snap-start",
-	>
+			)}
-		{children}
+		>
-	</li>
+			{children}
-);
+		</li>
+	);
+};

pnpm-lock.yaml

@@ -87,6 +87,9 @@ importers:
       '@radix-ui/react-popover':
         specifier: ^1.0.7
         version: 1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       '@radix-ui/react-switch':
         specifier: ^1.0.3
         version: 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
@@ -1498,12 +1501,20 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@radix-ui/number@1.1.0:
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+    dev: false
+
   /@radix-ui/primitive@1.0.1:
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
     dependencies:
       '@babel/runtime': 7.24.7
     dev: false
 
+  /@radix-ui/primitive@1.1.0:
+    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
+    dev: false
+
   /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
@@ -1643,6 +1654,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-context@1.0.1(@types/react@18.3.3)(react@18.3.1):
     resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
     peerDependencies:
@@ -1657,6 +1681,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-context@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
     peerDependencies:
@@ -1705,6 +1742,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-direction@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
     peerDependencies:
@@ -1984,6 +2034,27 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /@radix-ui/react-presence@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
     peerDependencies:
@@ -2005,6 +2076,26 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
     peerDependencies:
@@ -2034,6 +2125,34 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /@radix-ui/react-scroll-area@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.3.1):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -2049,6 +2168,20 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-switch@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
     peerDependencies:
@@ -2150,6 +2283,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.3)(react@18.3.1):
     resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
     peerDependencies:
@@ -2194,6 +2340,19 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-use-previous@1.0.1(@types/react@18.3.3)(react@18.3.1):
     resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
     peerDependencies:

src-tauri/src/fns.rs

@@ -1,5 +1,6 @@
-use cocoa::appkit::NSWindowCollectionBehavior;
 use std::ffi::CString;
+
+use cocoa::appkit::NSWindowCollectionBehavior;
 use tauri::Manager;
 use tauri_nspanel::{
   block::ConcreteBlock,
@@ -8,44 +9,44 @@ use tauri_nspanel::{
     base::{id, nil},
     foundation::{NSPoint, NSRect},
   },
-  objc::{class, msg_send, runtime::NO, sel, sel_impl},
+  ManagerExt,
-  panel_delegate, ManagerExt, WebviewWindowExt,
+  objc::{class, msg_send, runtime::NO, sel, sel_impl}, panel_delegate, WebviewWindowExt,
 };
 
 #[allow(non_upper_case_globals)]
 const NSWindowStyleMaskNonActivatingPanel: i32 = 1 << 7;
 
 pub fn swizzle_to_menubar_panel(app_handle: &tauri::AppHandle) {
-  let window = app_handle.get_webview_window("panel").unwrap();
+  let panel_delegate = panel_delegate!(SpotlightPanelDelegate {
-  let panel = window.to_panel().unwrap();
-  let handle = app_handle.to_owned();
-
-  let delegate = panel_delegate!(MyPanelDelegate {
-    window_did_become_key,
     window_did_resign_key
   });
 
-  delegate.set_listener(Box::new(move |delegate_name: String| {
+  let window = app_handle.get_webview_window("panel").unwrap();
+
+  let panel = window.to_panel().unwrap();
+
+  let handle = app_handle.clone();
+
+  panel_delegate.set_listener(Box::new(move |delegate_name: String| {
     match delegate_name.as_str() {
-      "window_did_become_key" => {
-        let app_name = handle.package_info().name.to_owned();
-        println!("[info]: {:?} panel becomes key window!", app_name);
-      }
       "window_did_resign_key" => {
-        println!("[info]: panel resigned from key window!");
+        let _ = handle.emit("menubar_panel_did_resign_key", ());
       }
       _ => (),
     }
   }));
 
   panel.set_level(NSMainMenuWindowLevel + 1);
+
   panel.set_style_mask(NSWindowStyleMaskNonActivatingPanel);
+
   panel.set_collection_behaviour(
     NSWindowCollectionBehavior::NSWindowCollectionBehaviorCanJoinAllSpaces
       | NSWindowCollectionBehavior::NSWindowCollectionBehaviorStationary
       | NSWindowCollectionBehavior::NSWindowCollectionBehaviorFullScreenAuxiliary,
   );
-  panel.set_delegate(delegate);
+
+  panel.set_delegate(panel_delegate);
 }
 
 pub fn setup_menubar_panel_listeners(app_handle: &tauri::AppHandle) {

src-tauri/src/main.rs

@@ -9,20 +9,20 @@ extern crate cocoa;
 #[macro_use]
 extern crate objc;
 
+use std::sync::Mutex;
+use std::time::Duration;
 use std::{
   fs,
   io::{self, BufRead},
   str::FromStr,
 };
-use std::sync::Mutex;
-use std::time::Duration;
 
 use nostr_sdk::prelude::*;
 use serde::{Deserialize, Serialize};
 use specta::Type;
-use tauri::{Manager, path::BaseDirectory};
 #[cfg(target_os = "macos")]
 use tauri::tray::{MouseButtonState, TrayIconEvent};
+use tauri::{path::BaseDirectory, Manager};
 use tauri_nspanel::ManagerExt;
 use tauri_plugin_decorum::WebviewWindowExt;
 
@@ -152,11 +152,11 @@ fn main() {
 
       // Create panel
       #[cfg(target_os = "macos")]
-      swizzle_to_menubar_panel(&app.handle());
+      swizzle_to_menubar_panel(app.handle());
       #[cfg(target_os = "macos")]
-      update_menubar_appearance(&app.handle());
+      update_menubar_appearance(app.handle());
       #[cfg(target_os = "macos")]
-      setup_menubar_panel_listeners(&app.handle());
+      setup_menubar_panel_listeners(app.handle());
 
       // Setup tray icon
       #[cfg(target_os = "macos")]
@@ -173,7 +173,7 @@ fn main() {
             match panel.is_visible() {
               true => panel.order_out(None),
               false => {
-                position_menubar_panel(&app, 0.0);
+                position_menubar_panel(app, 0.0);
                 panel.show();
               }
             }

src-tauri/src/nostr/event.rs

@@ -99,10 +99,10 @@ pub async fn get_event_from(
 
           Ok(RichEvent { raw, parsed })
         } else {
-          return Err("Cannot found this event with current relay list".into());
+          Err("Cannot found this event with current relay list".into())
         }
       }
-      Err(err) => return Err(err.to_string()),
+      Err(err) => Err(err.to_string()),
     }
   } else {
     // Add relay hint to relay pool

src-tauri/src/nostr/keys.rs

@@ -64,20 +64,14 @@ pub async fn save_account(
   password: &str,
   state: State<'_, Nostr>,
 ) -> Result<String, String> {
-  let secret_key: Result<SecretKey, String>;
+  let secret_key = if nsec.starts_with("ncryptsec") {
-
-  if nsec.starts_with("ncryptsec") {
     let encrypted_key = EncryptedSecretKey::from_bech32(nsec).unwrap();
-    secret_key = match encrypted_key.to_secret_key(password) {
+    encrypted_key
-      Ok(val) => Ok(val),
+      .to_secret_key(password)
-      Err(err) => Err(err.to_string()),
+      .map_err(|err| err.to_string())
-    };
   } else {
-    secret_key = match SecretKey::from_bech32(nsec) {
+    SecretKey::from_bech32(nsec).map_err(|err| err.to_string())
-      Ok(val) => Ok(val),
+  };
-      Err(err) => Err(err.to_string()),
-    }
-  }
 
   match secret_key {
     Ok(val) => {
@@ -280,11 +274,14 @@ pub async fn load_account(
             if subscription_id == notification_id {
               println!("new notification: {}", event.as_json());
 
-              if let Err(_) = app.emit_to(
+              if app
-                EventTarget::window("panel"),
+                .emit_to(
-                "notification",
+                  EventTarget::window("panel"),
-                event.as_json(),
+                  "notification",
-              ) {
+                  event.as_json(),
+                )
+                .is_err()
+              {
                 println!("Emit new notification failed.")
               }
 

src-tauri/src/nostr/relay.rs

@@ -117,12 +117,12 @@ pub fn get_bootstrap_relays(app: tauri::AppHandle) -> Result<Vec<String>, ()> {
     .resolve("resources/relays.txt", BaseDirectory::Resource)
     .expect("Bootstrap relays not found.");
 
-  let file = std::fs::File::open(&relays_path).unwrap();
+  let file = std::fs::File::open(relays_path).unwrap();
   let lines = io::BufReader::new(file).lines();
 
   let mut relays = Vec::new();
 
-  for line in lines.flatten() {
+  for line in lines.map_while(Result::ok) {
     relays.push(line.to_string())
   }
 
@@ -139,7 +139,7 @@ pub fn save_bootstrap_relays(relays: &str, app: tauri::AppHandle) -> Result<(),
 
   let mut file = fs::OpenOptions::new()
     .write(true)
-    .open(&relays_path)
+    .open(relays_path)
     .unwrap();
 
   match file.write_all(relays.as_bytes()) {

src-tauri/src/nostr/utils.rs

@@ -2,8 +2,8 @@ use std::collections::HashSet;
 use std::str::FromStr;
 
 use linkify::LinkFinder;
-use nostr_sdk::{Alphabet, Event, EventId, FromBech32, PublicKey, SingleLetterTag, Tag, TagKind};
 use nostr_sdk::prelude::Nip19Event;
+use nostr_sdk::{Alphabet, Event, EventId, FromBech32, PublicKey, SingleLetterTag, Tag, TagKind};
 use reqwest::Client;
 use serde::Serialize;
 use specta::Type;
@@ -176,7 +176,7 @@ pub fn create_event_tags(content: &str) -> Vec<Tag> {
     .collect::<Vec<_>>();
 
   for mention in mentions {
-    let entity = mention.replace("nostr:", "").replace("@", "");
+    let entity = mention.replace("nostr:", "").replace('@', "");
 
     if !tag_set.contains(&entity) {
       if entity.starts_with("npub") {

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../node_modules/@tauri-apps/cli/schema.json",
 	"productName": "Lume",
-	"version": "4.0.10",
+	"version": "4.0.11",
 	"identifier": "nu.lume.Lume",
 	"build": {
 		"beforeBuildCommand": "pnpm desktop:build",