update

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

@@ -6,7 +6,7 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { useEffect, useRef } from "react";
+import { type RefObject, useEffect, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/events/$id")({
@@ -35,7 +35,7 @@ function Screen() {
 				ref={ref}
 				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
-				<Virtualizer scrollRef={ref}>
+				<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
 					<RootEvent />
 					<ReplyList />
 				</Virtualizer>
@@ -64,10 +64,10 @@ function RootEvent() {
 		);
 	}
 
-	if (isError) {
+	if (isError || !event) {
 		return (
 			<div className="flex items-center gap-2 text-sm text-red-500">
-				{error.message}
+				{error?.message || "Event not found within your current relay set"}
 			</div>
 		);
 	}
@@ -181,15 +181,21 @@ function ReplyList() {
 
 	useEffect(() => {
 		events.subscription
-			.emit({ label, kind: "Subscribe", event_id: id })
+			.emit({
+				label: label || id,
+				kind: "Subscribe",
+				event_id: id,
+				contacts: null,
+			})
 			.then(() => console.log("Subscribe: ", label));
 
 		return () => {
 			events.subscription
 				.emit({
-					label,
+					label: label || id,
 					kind: "Unsubscribe",
 					event_id: id,
+					contacts: null,
 				})
 				.then(() => console.log("Unsubscribe: ", label));
 		};
@@ -229,7 +235,7 @@ function ReplyList() {
 				</div>
 			) : (
 				<div className="flex flex-col gap-3">
-					{!data.length ? (
+					{!data?.length ? (
 						<div className="flex items-center justify-center w-full">
 							<div className="flex flex-col items-center justify-center gap-2 py-4">
 								<h3 className="text-3xl">👋</h3>

src/routes/columns/_layout/global.tsx

@@ -7,7 +7,7 @@ import { ArrowDown } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { useCallback, useRef } from "react";
+import { type RefObject, useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/columns/_layout/global")({
@@ -27,7 +27,7 @@ export function Screen() {
 		queryKey: ["events", "global", label],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
-			const until = pageParam > 0 ? pageParam.toString() : undefined;
+			const until = pageParam > 0 ? pageParam.toString() : null;
 			const res = await commands.getGlobalEvents(until);
 
 			if (res.status === "error") {
@@ -36,7 +36,13 @@ export function Screen() {
 
 			return toLumeEvents(res.data);
 		},
-		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		getNextPageParam: (lastPage) => {
+			const lastEvent = lastPage.at(-1);
+
+			if (lastEvent) {
+				return lastEvent.created_at - 1;
+			}
+		},
 		select: (data) => data?.pages.flat(),
 		refetchOnWindowFocus: false,
 	});
@@ -47,14 +53,17 @@ export function Screen() {
 		(event: LumeEvent) => {
 			if (!event) return;
 			switch (event.kind) {
-				case Kind.Repost:
+				case Kind.Repost: {
+					const repostId = event.repostId;
+
 					return (
 						<RepostNote
-							key={event.id}
+							key={repostId + event.id}
 							event={event}
 							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
 						/>
 					);
+				}
 				default:
 					return (
 						<TextNote
@@ -76,9 +85,9 @@ export function Screen() {
 		>
 			<ScrollArea.Viewport
 				ref={ref}
-				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+				className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
-				<Virtualizer scrollRef={ref}>
+				<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
 						<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
 							<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
@@ -92,7 +101,7 @@ export function Screen() {
 							<Spinner className="size-4" />
 							<span className="text-sm font-medium">Loading...</span>
 						</div>
-					) : !data.length ? (
+					) : !data?.length ? (
 						<div className="mb-3 flex items-center justify-center h-20 text-sm">
 							🎉 Yo. You're catching up on all latest notes.
 						</div>

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

@@ -7,7 +7,7 @@ import { ArrowDown } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { useCallback, useRef } from "react";
+import { type RefObject, useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/groups/$id")({
@@ -29,7 +29,7 @@ export function Screen() {
 		queryKey: ["events", "groups", params.id],
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
-			const until = pageParam > 0 ? pageParam.toString() : undefined;
+			const until = pageParam > 0 ? pageParam.toString() : null;
 			const res = await commands.getAllEventsByAuthors(group, until);
 
 			if (res.status === "error") {
@@ -38,7 +38,13 @@ export function Screen() {
 
 			return toLumeEvents(res.data);
 		},
-		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		getNextPageParam: (lastPage) => {
+			const lastEvent = lastPage.at(-1);
+
+			if (lastEvent) {
+				return lastEvent.created_at - 1;
+			}
+		},
 		select: (data) => data?.pages.flat(),
 		enabled: group?.length > 0,
 		refetchOnWindowFocus: false,
@@ -50,14 +56,17 @@ export function Screen() {
 		(event: LumeEvent) => {
 			if (!event) return;
 			switch (event.kind) {
-				case Kind.Repost:
+				case Kind.Repost: {
+					const repostId = event.repostId;
+
 					return (
 						<RepostNote
-							key={event.id}
+							key={repostId + event.id}
 							event={event}
 							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
 						/>
 					);
+				}
 				default:
 					return (
 						<TextNote
@@ -81,7 +90,7 @@ export function Screen() {
 				ref={ref}
 				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
-				<Virtualizer scrollRef={ref}>
+				<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
 						<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
 							<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
@@ -95,7 +104,7 @@ export function Screen() {
 							<Spinner className="size-4" />
 							<span className="text-sm font-medium">Loading...</span>
 						</div>
-					) : !data.length ? (
+					) : !data?.length ? (
 						<div className="mb-3 flex items-center justify-center h-20 text-sm">
 							🎉 Yo. You're catching up on all latest notes.
 						</div>

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

@@ -7,7 +7,7 @@ import { ArrowDown } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { useCallback, useRef } from "react";
+import { type RefObject, useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/interests/$id")({
@@ -30,7 +30,7 @@ export function Screen() {
 		initialPageParam: 0,
 		queryFn: async ({ pageParam }: { pageParam: number }) => {
 			const tags = hashtags.map((tag) => tag.toLowerCase().replace("#", ""));
-			const until = pageParam > 0 ? pageParam.toString() : undefined;
+			const until = pageParam > 0 ? pageParam.toString() : null;
 			const res = await commands.getAllEventsByHashtags(tags, until);
 
 			if (res.status === "error") {
@@ -39,7 +39,13 @@ export function Screen() {
 
 			return toLumeEvents(res.data);
 		},
-		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		getNextPageParam: (lastPage) => {
+			const lastEvent = lastPage.at(-1);
+
+			if (lastEvent) {
+				return lastEvent.created_at - 1;
+			}
+		},
 		select: (data) => data?.pages.flat(),
 		refetchOnWindowFocus: false,
 	});
@@ -50,14 +56,17 @@ export function Screen() {
 		(event: LumeEvent) => {
 			if (!event) return;
 			switch (event.kind) {
-				case Kind.Repost:
+				case Kind.Repost: {
+					const repostId = event.repostId;
+
 					return (
 						<RepostNote
-							key={event.id}
+							key={repostId + event.id}
 							event={event}
 							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
 						/>
 					);
+				}
 				default:
 					return (
 						<TextNote
@@ -79,9 +88,9 @@ export function Screen() {
 		>
 			<ScrollArea.Viewport
 				ref={ref}
-				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+				className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
-				<Virtualizer scrollRef={ref}>
+				<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
 						<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
 							<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
@@ -95,7 +104,7 @@ export function Screen() {
 							<Spinner className="size-4" />
 							<span className="text-sm font-medium">Loading...</span>
 						</div>
-					) : !data.length ? (
+					) : !data?.length ? (
 						<div className="mb-3 flex items-center justify-center h-20 text-sm">
 							🎉 Yo. You're catching up on all latest notes.
 						</div>

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

@@ -20,7 +20,7 @@ export const Route = createLazyFileRoute("/columns/_layout/launchpad/$id")({
 
 function Screen() {
 	const { id } = Route.useParams();
-	const { data: isSync } = useQuery({
+	const { isLoading, data: isSync } = useQuery({
 		queryKey: ["is-sync", id],
 		queryFn: async () => {
 			const res = await commands.isAccountSync(id);
@@ -40,7 +40,9 @@ function Screen() {
 			className="overflow-hidden size-full"
 		>
 			<ScrollArea.Viewport className="relative h-full px-3 pb-3">
-				{!isSync ? (
+				{isLoading ? (
+					<Spinner className="size-4" />
+				) : !isSync ? (
 					<SyncProgress />
 				) : (
 					<>

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

@@ -7,7 +7,8 @@ import { ArrowDown } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { useCallback, useEffect, useRef } from "react";
+import { listen } from "@tauri-apps/api/event";
+import { type RefObject, useCallback, useEffect, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
@@ -17,7 +18,7 @@ export const Route = createLazyFileRoute("/columns/_layout/newsfeed/$id")({
 export function Screen() {
 	const contacts = Route.useLoaderData();
 	const search = Route.useSearch();
-
+	const { queryClient } = Route.useRouteContext();
 	const {
 		data,
 		isLoading,
@@ -38,7 +39,13 @@ export function Screen() {
 
 			return toLumeEvents(res.data);
 		},
-		getNextPageParam: (lastPage) => lastPage?.at?.(-1)?.created_at - 1,
+		getNextPageParam: (lastPage) => {
+			const lastEvent = lastPage.at(-1);
+
+			if (lastEvent) {
+				return lastEvent.created_at - 1;
+			}
+		},
 		select: (data) => data?.pages.flat(),
 		enabled: contacts?.length > 0,
 	});
@@ -52,14 +59,17 @@ export function Screen() {
 			}
 
 			switch (event.kind) {
-				case Kind.Repost:
+				case Kind.Repost: {
+					const repostId = event.repostId;
+
 					return (
 						<RepostNote
-							key={event.id}
+							key={repostId + event.id}
 							event={event}
 							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
 						/>
 					);
+				}
 				default:
 					return (
 						<TextNote
@@ -95,6 +105,18 @@ export function Screen() {
 		};
 	}, []);
 
+	useEffect(() => {
+		const unlisten = listen("synchronized", async () => {
+			await queryClient.refetchQueries({
+				queryKey: ["events", "newsfeed", search.label],
+			});
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, []);
+
 	return (
 		<ScrollArea.Root
 			type={"scroll"}
@@ -103,9 +125,9 @@ export function Screen() {
 		>
 			<ScrollArea.Viewport
 				ref={ref}
-				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+				className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
-				<Virtualizer scrollRef={ref}>
+				<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
 						<div className="z-50 fixed top-0 left-0 w-full h-14 flex items-center justify-center px-3">
 							<div className="w-max h-8 pl-2 pr-3 inline-flex items-center justify-center gap-1.5 rounded-full shadow-lg text-sm font-medium text-white bg-black dark:text-black dark:bg-white">
@@ -119,7 +141,7 @@ export function Screen() {
 							<Spinner className="size-4" />
 							<span className="text-sm font-medium">Loading...</span>
 						</div>
-					) : !data.length ? (
+					) : !data?.length ? (
 						<div className="mb-3 flex items-center justify-center h-20 text-sm">
 							🎉 Yo. You're catching up on all latest notes.
 						</div>

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

@@ -10,7 +10,13 @@ import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { nip19 } from "nostr-tools";
-import { type ReactNode, useEffect, useMemo, useRef } from "react";
+import {
+	type ReactNode,
+	type RefObject,
+	useEffect,
+	useMemo,
+	useRef,
+} from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/notification/$id")({
@@ -110,7 +116,7 @@ function Screen() {
 		<div className="px-3 h-full overflow-y-auto">
 			<Tabs.Root
 				defaultValue="replies"
-				className="flex flex-col h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+				className="flex flex-col h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
 				<Tabs.List className="h-11 shrink-0 flex items-center">
 					<Tabs.Trigger
@@ -138,62 +144,74 @@ function Screen() {
 					className="min-h-0 flex-1 overflow-x-hidden"
 				>
 					<Tab value="replies">
-						{data.texts.map((event) => (
-							<TextNote key={event.id} event={event} />
-						))}
+						{!data?.texts ? (
+							<div>Empty</div>
+						) : (
+							data.texts.map((event) => (
+								<TextNote key={event.id} event={event} />
+							))
+						)}
 					</Tab>
 					<Tab value="reactions">
-						{[...data.reactions.entries()].map(([root, events]) => (
-							<div
-								key={root}
-								className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
-							>
-								<div className="flex flex-col flex-1 min-w-0 gap-2">
-									<div className="flex items-center gap-2 pb-2">
-										<RootNote id={root} />
-									</div>
-									<div className="flex flex-wrap items-center gap-3">
-										{events.map((event) => (
-											<User.Provider key={event.id} pubkey={event.pubkey}>
-												<User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
-													<User.Avatar className="flex-1 rounded-full size-6" />
-													<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
-														{event.kind === Kind.Reaction ? (
-															event.content === "+" ? (
-																"👍"
+						{!data?.reactions ? (
+							<div>Empty</div>
+						) : (
+							[...data.reactions.entries()].map(([root, events]) => (
+								<div
+									key={root}
+									className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+								>
+									<div className="flex flex-col flex-1 min-w-0 gap-2">
+										<div className="flex items-center gap-2 pb-2">
+											<RootNote id={root} />
+										</div>
+										<div className="flex flex-wrap items-center gap-3">
+											{events.map((event) => (
+												<User.Provider key={event.id} pubkey={event.pubkey}>
+													<User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
+														<User.Avatar className="flex-1 rounded-full size-6" />
+														<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
+															{event.kind === Kind.Reaction ? (
+																event.content === "+" ? (
+																	"👍"
+																) : (
+																	event.content
+																)
 															) : (
-																event.content
-															)
-														) : (
-															<RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
-														)}
-													</div>
-												</User.Root>
-											</User.Provider>
-										))}
+																<RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
+															)}
+														</div>
+													</User.Root>
+												</User.Provider>
+											))}
+										</div>
 									</div>
 								</div>
-							</div>
-						))}
+							))
+						)}
 					</Tab>
 					<Tab value="zaps">
-						{[...data.zaps.entries()].map(([root, events]) => (
-							<div
-								key={root}
-								className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
-							>
-								<div className="flex flex-col flex-1 min-w-0 gap-2">
-									<div className="flex items-center gap-2 pb-2">
-										<RootNote id={root} />
-									</div>
-									<div className="flex flex-wrap items-center gap-3">
-										{events.map((event) => (
-											<ZapReceipt key={event.id} event={event} />
-										))}
+						{!data?.zaps ? (
+							<div>Empty</div>
+						) : (
+							[...data.zaps.entries()].map(([root, events]) => (
+								<div
+									key={root}
+									className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+								>
+									<div className="flex flex-col flex-1 min-w-0 gap-2">
+										<div className="flex items-center gap-2 pb-2">
+											<RootNote id={root} />
+										</div>
+										<div className="flex flex-wrap items-center gap-3">
+											{events.map((event) => (
+												<ZapReceipt key={event.id} event={event} />
+											))}
+										</div>
 									</div>
 								</div>
-							</div>
-						))}
+							))
+						)}
 					</Tab>
 					<ScrollArea.Scrollbar
 						className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
@@ -208,13 +226,15 @@ function Screen() {
 	);
 }
 
-function Tab({ value, children }: { value: string; children: ReactNode[] }) {
+function Tab({ value, children }: { value: string; children: ReactNode }) {
 	const ref = useRef<HTMLDivElement>(null);
 
 	return (
 		<Tabs.Content value={value} className="size-full">
 			<ScrollArea.Viewport ref={ref} className="h-full">
-				<Virtualizer scrollRef={ref}>{children}</Virtualizer>
+				<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
+					{children}
+				</Virtualizer>
 			</ScrollArea.Viewport>
 		</Tabs.Content>
 	);
@@ -311,10 +331,16 @@ function TextNote({ event }: { event: LumeEvent }) {
 }
 
 function ZapReceipt({ event }: { event: LumeEvent }) {
-	const amount = useMemo(
-		() => decodeZapInvoice(event.tags).bitcoinFormatted ?? "0",
-		[event.id],
-	);
+	const amount = useMemo(() => {
+		const decoded = decodeZapInvoice(event.tags);
+
+		if (decoded) {
+			return decoded.bitcoinFormatted;
+		} else {
+			return "0";
+		}
+	}, [event.id]);
+
 	const sender = useMemo(
 		() => event.tags.find((tag) => tag[0] === "P")?.[1],
 		[event.id],

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

@@ -6,7 +6,7 @@ import {
 	useRouter,
 	useRouterState,
 } from "@tanstack/react-router";
-import { useRef } from "react";
+import { type RefObject, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/replies/$id")({
@@ -20,7 +20,7 @@ function Screen() {
 
 	return (
 		<div className="px-3 h-full">
-			<div className="size-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700">
+			<div className="size-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700">
 				<div className="h-full flex flex-col">
 					<div className="h-10 shrink-0 border-b border-black/5 dark:border-white/5 flex items-center justify-between px-2">
 						<button
@@ -38,10 +38,14 @@ function Screen() {
 						className="overflow-hidden size-full flex-1"
 					>
 						<ScrollArea.Viewport ref={ref} className="h-full p-3">
-							<Virtualizer scrollRef={ref}>
-								{events.map((event) => (
-									<ReplyNote key={event.id} event={event} />
-								))}
+							<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
+								{!events ? (
+									<div>Empty</div>
+								) : (
+									events.map((event) => (
+										<ReplyNote key={event.id} event={event} />
+									))
+								)}
 							</Virtualizer>
 						</ScrollArea.Viewport>
 						<ScrollArea.Scrollbar

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

@@ -7,7 +7,13 @@ import { MagnifyingGlass } from "@phosphor-icons/react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { message } from "@tauri-apps/plugin-dialog";
-import { useCallback, useRef, useState, useTransition } from "react";
+import {
+	type RefObject,
+	useCallback,
+	useRef,
+	useState,
+	useTransition,
+} from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/search")({
@@ -97,7 +103,7 @@ function Screen() {
 
 	return (
 		<div className="px-3 h-full">
-			<div className="flex flex-col gap-3 size-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700">
+			<div className="flex flex-col gap-3 size-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700">
 				<div className="h-9 shrink-0 pt-6 px-3 flex items-center gap-2">
 					<input
 						name="search"
@@ -127,7 +133,7 @@ function Screen() {
 					className="overflow-hidden size-full flex-1"
 				>
 					<ScrollArea.Viewport ref={ref} className="relative h-full">
-						<Virtualizer scrollRef={ref}>
+						<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
 							{isPending ? (
 								<div className="w-full h-[200px] flex gap-2 items-center justify-center">
 									<Spinner />

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

@@ -10,7 +10,7 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { nip19 } from "nostr-tools";
-import { type ReactNode, memo, useMemo, useRef } from "react";
+import { type ReactNode, type RefObject, memo, useMemo, useRef } from "react";
 import reactStringReplace from "react-string-replace";
 import { Virtualizer } from "virtua";
 
@@ -29,7 +29,10 @@ function Screen() {
 			className="overflow-hidden size-full"
 		>
 			<ScrollArea.Viewport ref={ref} className="relative h-full px-3 pb-3">
-				<Virtualizer scrollRef={ref} overscan={0}>
+				<Virtualizer
+					scrollRef={ref as unknown as RefObject<HTMLElement>}
+					overscan={0}
+				>
 					{!contacts ? (
 						<div className="w-full h-24 flex items-center justify-center">
 							<Spinner className="size-4" />
@@ -77,7 +80,7 @@ function StoryItem({ contact }: { contact: string }) {
 	const ref = useRef<HTMLDivElement>(null);
 
 	return (
-		<div className="mb-3 flex flex-col w-full h-[300px] bg-white dark:bg-black rounded-xl border-[.5px] border-neutral-300 dark:border-neutral-700">
+		<div className="mb-3 flex flex-col w-full h-[300px] bg-white dark:bg-neutral-800 rounded-xl border-[.5px] border-neutral-300 dark:border-neutral-700">
 			<div className="h-12 shrink-0 px-2 flex items-center justify-between border-b border-neutral-100 dark:border-white/5">
 				<User.Provider pubkey={contact}>
 					<User.Root className="inline-flex items-center gap-2">
@@ -102,7 +105,10 @@ function StoryItem({ contact }: { contact: string }) {
 				className="flex-1 min-h-0 overflow-hidden size-full"
 			>
 				<ScrollArea.Viewport ref={ref} className="relative h-full px-2 pt-2">
-					<Virtualizer scrollRef={ref} overscan={0}>
+					<Virtualizer
+						scrollRef={ref as unknown as RefObject<HTMLElement>}
+						overscan={0}
+					>
 						{isLoading ? (
 							<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
 								<Spinner className="size-4" />
@@ -111,7 +117,7 @@ function StoryItem({ contact }: { contact: string }) {
 							<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
 								{error.message}
 							</div>
-						) : !events.length ? (
+						) : !events?.length ? (
 							<div className="w-full h-[calc(300px-48px)] flex items-center justify-center text-sm">
 								This user didn't have any new notes in the last few days.
 							</div>

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

@@ -4,7 +4,7 @@ import { Kind, type NostrEvent } from "@/types";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { useCallback, useRef } from "react";
+import { type RefObject, useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/trending")({
@@ -71,15 +71,18 @@ function Screen() {
 		>
 			<ScrollArea.Viewport
 				ref={ref}
-				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+				className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
-				<Virtualizer scrollRef={ref} overscan={1}>
+				<Virtualizer
+					scrollRef={ref as unknown as RefObject<HTMLElement>}
+					overscan={1}
+				>
 					{isLoading ? (
 						<div className="flex items-center justify-center w-full h-16 gap-2">
 							<Spinner className="size-4" />
 							<span className="text-sm font-medium">Loading...</span>
 						</div>
-					) : !data.length ? (
+					) : !data?.length ? (
 						<div className="mb-3 flex items-center justify-center h-20 text-sm">
 							🎉 Yo. You're catching up on all latest notes.
 						</div>

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

@@ -6,7 +6,7 @@ import { Kind } from "@/types";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { useCallback, useRef } from "react";
+import { type RefObject, useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createLazyFileRoute("/columns/_layout/users/$id")({
@@ -36,14 +36,17 @@ function Screen() {
 		(event: LumeEvent) => {
 			if (!event) return;
 			switch (event.kind) {
-				case Kind.Repost:
+				case Kind.Repost: {
+					const repostId = event.repostId;
+
 					return (
 						<RepostNote
-							key={event.id}
+							key={repostId + event.id}
 							event={event}
 							className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
 						/>
 					);
+				}
 				default:
 					return (
 						<TextNote
@@ -65,9 +68,12 @@ function Screen() {
 		>
 			<ScrollArea.Viewport
 				ref={ref}
-				className="relative h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+				className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
 			>
-				<Virtualizer scrollRef={ref} overscan={0}>
+				<Virtualizer
+					scrollRef={ref as unknown as RefObject<HTMLElement>}
+					overscan={0}
+				>
 					<User.Provider pubkey={id}>
 						<User.Root className="relative">
 							<User.Cover className="object-cover w-full h-44 rounded-t-lg gradient-mask-b-0" />
@@ -88,7 +94,7 @@ function Screen() {
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">Loading...</span>
 							</div>
-						) : !events.length ? (
+						) : !events?.length ? (
 							<div className="flex items-center justify-center">
 								Yo. You're catching up on all the things happening around you.
 							</div>