refactor(ark): add note provider

2024-09-29 16:30:55 +00:00 · 2023-12-27 10:52:13 +07:00 · 2023-12-27 10:52:13 +07:00 · b4dac2d477
commit b4dac2d477
parent 3956ed622d
38 changed files with 793 additions and 1140 deletions
--- a/apps/desktop/src/routes/auth/welcome.tsx
+++ b/apps/desktop/src/routes/auth/welcome.tsx
@ -1,30 +1,25 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";

 export function WelcomeScreen() {
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <div className="mx-auto flex w-full max-w-xs flex-col gap-10">
-        <div className="text-center">
-          <img src="/icon.png" alt="Lume's logo" className="mx-auto mb-1 h-auto w-16" />
-          <h1 className="text-2xl">
-            Welcome to <span className="font-bold">Lume</span>
-          </h1>
-        </div>
-        <div className="flex flex-col gap-2 px-8">
-          <Link
-            to="/auth/create"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
-          >
-            Create new account
-          </Link>
-          <Link
-            to="/auth/import"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
-          >
-            Log in
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex h-full w-full flex-col items-center justify-center gap-10">
+			<div className="mx-auto max-w-md flex w-full text-center flex-col items-center">
+				<h1 className="mb-2 text-4xl font-semibold">Welcome to Nostr!</h1>
+			</div>
+			<div className="flex flex-col gap-2 px-8 mx-auto max-w-sm">
+				<Link
+					to="/auth/create"
+					className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+				>
+					Create new account
+				</Link>
+				<Link
+					to="/auth/import"
+					className="inline-flex h-11 w-full items-center justify-center rounded-lg font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
+				>
+					Log in
+				</Link>
+			</div>
+		</div>
+	);
 }
--- a/packages/@columns/notification/src/home.tsx
+++ b/packages/@columns/notification/src/home.tsx
@ -0,0 +1,119 @@
+import { RepostNote, TextNote, useArk, useStorage } from "@lume/ark";
+import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { FETCH_LIMIT } from "@lume/utils";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef } from "react";
+import { CacheSnapshot, VList, VListHandle } from "virtua";
+
+export function HomeRoute({ colKey }: { colKey: string }) {
+	const ark = useArk();
+	const storage = useStorage();
+	const ref = useRef<VListHandle>();
+	const cacheKey = "notification-vlist";
+
+	const [offset, cache] = useMemo(() => {
+		const serialized = sessionStorage.getItem(cacheKey);
+		if (!serialized) return [];
+		return JSON.parse(serialized) as [number, CacheSnapshot];
+	}, []);
+
+	const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
+		useInfiniteQuery({
+			queryKey: [colKey],
+			initialPageParam: 0,
+			queryFn: async ({
+				signal,
+				pageParam,
+			}: {
+				signal: AbortSignal;
+				pageParam: number;
+			}) => {
+				const events = await ark.getInfiniteEvents({
+					filter: {
+						kinds: [NDKKind.Text, NDKKind.Repost],
+						authors: !storage.account.contacts.length
+							? [storage.account.pubkey]
+							: storage.account.contacts,
+					},
+					limit: FETCH_LIMIT,
+					pageParam,
+					signal,
+				});
+
+				return events;
+			},
+			getNextPageParam: (lastPage) => {
+				const lastEvent = lastPage.at(-1);
+				if (!lastEvent) return;
+				return lastEvent.created_at - 1;
+			},
+			refetchOnWindowFocus: false,
+		});
+
+	const allEvents = useMemo(
+		() => (data ? data.pages.flatMap((page) => page) : []),
+		[data],
+	);
+
+	const renderItem = (event: NDKEvent) => {
+		switch (event.kind) {
+			case NDKKind.Text:
+				return <TextNote key={event.id} event={event} className="mt-3" />;
+			case NDKKind.Repost:
+				return <RepostNote key={event.id} event={event} className="mt-3" />;
+			default:
+				return <TextNote key={event.id} event={event} className="mt-3" />;
+		}
+	};
+
+	useEffect(() => {
+		if (!ref.current) return;
+		const handle = ref.current;
+
+		if (offset) {
+			handle.scrollTo(offset);
+		}
+
+		return () => {
+			sessionStorage.setItem(
+				cacheKey,
+				JSON.stringify([handle.scrollOffset, handle.cache]),
+			);
+		};
+	}, []);
+
+	return (
+		<div className="w-full h-full">
+			<VList ref={ref} cache={cache} overscan={2} className="flex-1 px-3">
+				{isLoading ? (
+					<div className="inline-flex h-16 items-center justify-center gap-2 px-3 py-1.5">
+						<LoaderIcon className="size-5" />
+						Loading
+					</div>
+				) : (
+					allEvents.map((item) => renderItem(item))
+				)}
+				<div className="flex h-16 items-center justify-center">
+					{hasNextPage ? (
+						<button
+							type="button"
+							onClick={() => fetchNextPage()}
+							disabled={!hasNextPage || isFetchingNextPage}
+							className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
+						>
+							{isFetchingNextPage ? (
+								<LoaderIcon className="h-5 w-5 animate-spin" />
+							) : (
+								<>
+									<ArrowRightCircleIcon className="h-5 w-5" />
+									Load more
+								</>
+							)}
+						</button>
+					) : null}
+				</div>
+			</VList>
+		</div>
+	);
+}
--- a/packages/@columns/notification/src/index.ts
+++ b/packages/@columns/notification/src/index.ts
@ -1 +0,0 @@
-export * from "./notification";
--- a/packages/@columns/notification/src/index.tsx
+++ b/packages/@columns/notification/src/index.tsx
@ -0,0 +1,21 @@
+import { Column } from "@lume/ark";
+import { BellIcon } from "@lume/icons";
+import { HomeRoute } from "./home";
+
+export function Notification() {
+	const colKey = "notification";
+
+	return (
+		<Column.Root>
+			<Column.Header
+				id="9999"
+				queryKey={[colKey]}
+				title="Notifications"
+				icon={<BellIcon className="size-4" />}
+			/>
+			<Column.Content>
+				<Column.Route path="/" element={<HomeRoute colKey={colKey} />} />
+			</Column.Content>
+		</Column.Root>
+	);
+}
--- a/packages/@columns/notification/src/notification.tsx
+++ b/packages/@columns/notification/src/notification.tsx
@ -1,173 +0,0 @@
-import { NoteSkeleton, TextNote, Widget, useArk, useStorage } from "@lume/ark";
-import {
-	AnnouncementIcon,
-	ArrowRightCircleIcon,
-	LoaderIcon,
-} from "@lume/icons";
-import { FETCH_LIMIT, sendNativeNotification } from "@lume/utils";
-import { NDKEvent, NDKKind, NDKSubscription } from "@nostr-dev-kit/ndk";
-import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo } from "react";
-import { VList } from "virtua";
-
-export function NotificationColumn() {
-	const ark = useArk();
-	const storage = useStorage();
-	const queryClient = useQueryClient();
-
-	const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
-		useInfiniteQuery({
-			queryKey: ["notification"],
-			initialPageParam: 0,
-			queryFn: async ({
-				signal,
-				pageParam,
-			}: {
-				signal: AbortSignal;
-				pageParam: number;
-			}) => {
-				const events = await ark.getInfiniteEvents({
-					filter: {
-						kinds: [
-							NDKKind.Text,
-							NDKKind.Repost,
-							NDKKind.Reaction,
-							NDKKind.Zap,
-						],
-						"#p": [storage.account.pubkey],
-					},
-					limit: FETCH_LIMIT,
-					pageParam,
-					signal,
-				});
-
-				return events;
-			},
-			getNextPageParam: (lastPage) => {
-				const lastEvent = lastPage.at(-1);
-				if (!lastEvent) return;
-				return lastEvent.created_at - 1;
-			},
-			refetchOnWindowFocus: false,
-			refetchOnMount: false,
-			refetchOnReconnect: false,
-			staleTime: Infinity,
-		});
-
-	const allEvents = useMemo(
-		() => (data ? data.pages.flatMap((page) => page) : []),
-		[data],
-	);
-
-	const renderEvent = (event: NDKEvent) => {
-		if (event.pubkey === storage.account.pubkey) return null;
-		return <TextNote key={event.id} event={event} />;
-	};
-
-	useEffect(() => {
-		let sub: NDKSubscription = undefined;
-
-		if (status === "success" && storage.account) {
-			const filter = {
-				kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap],
-				"#p": [storage.account.pubkey],
-				since: Math.floor(Date.now() / 1000),
-			};
-
-			sub = ark.subscribe({
-				filter,
-				closeOnEose: false,
-				cb: async (event) => {
-					queryClient.setQueryData(
-						["notification"],
-						(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
-							...prev,
-							pages: [[event], ...prev.pages],
-						}),
-					);
-
-					const profile = await ark.getUserProfile({ pubkey: event.pubkey });
-
-					switch (event.kind) {
-						case NDKKind.Text:
-							return await sendNativeNotification(
-								`${
-									profile.displayName || profile.name
-								} has replied to your note`,
-							);
-						case NDKKind.Repost:
-							return await sendNativeNotification(
-								`${
-									profile.displayName || profile.name
-								} has reposted to your note`,
-							);
-						case NDKKind.Reaction:
-							return await sendNativeNotification(
-								`${profile.displayName || profile.name} has reacted ${
-									event.content
-								} to your note`,
-							);
-						case NDKKind.Zap:
-							return await sendNativeNotification(
-								`${
-									profile.displayName || profile.name
-								} has zapped to your note`,
-							);
-						default:
-							break;
-					}
-				},
-			});
-		}
-
-		return () => {
-			if (sub) sub.stop();
-		};
-	}, [status]);
-
-	return (
-		<Widget.Root>
-			<Widget.Header
-				id="9998"
-				queryKey={["notification"]}
-				title="Notification"
-				icon={<AnnouncementIcon className="h-5 w-5" />}
-			/>
-			<Widget.Content>
-				<VList className="flex-1" overscan={2}>
-					{status === "pending" ? (
-						<NoteSkeleton />
-					) : allEvents.length < 1 ? (
-						<div className="my-3 flex w-full items-center justify-center gap-2">
-							<div>🎉</div>
-							<p className="text-center font-medium text-neutral-900 dark:text-neutral-100">
-								Hmm! Nothing new yet.
-							</p>
-						</div>
-					) : (
-						allEvents.map((event) => renderEvent(event))
-					)}
-					<div className="flex h-16 items-center justify-center px-3 pb-3">
-						{hasNextPage ? (
-							<button
-								type="button"
-								onClick={() => fetchNextPage()}
-								disabled={!hasNextPage || isFetchingNextPage}
-								className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
-							>
-								{isFetchingNextPage ? (
-									<LoaderIcon className="h-4 w-4 animate-spin" />
-								) : (
-									<>
-										<ArrowRightCircleIcon className="h-5 w-5" />
-										Load more
-									</>
-								)}
-							</button>
-						) : null}
-					</div>
-				</VList>
-			</Widget.Content>
-		</Widget.Root>
-	);
-}
--- a/packages/@columns/timeline/src/home.tsx
+++ b/packages/@columns/timeline/src/home.tsx
@ -6,7 +6,7 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef } from "react";
 import { CacheSnapshot, VList, VListHandle } from "virtua";

-export function HomeRoute() {
+export function HomeRoute({ colKey }: { colKey: string }) {
 	const ark = useArk();
 	const storage = useStorage();
 	const ref = useRef<VListHandle>();
@ -20,7 +20,7 @@ export function HomeRoute() {

 	const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
 		useInfiniteQuery({
-			queryKey: ["newsfeed"],
+			queryKey: [colKey],
 			initialPageParam: 0,
 			queryFn: async ({
 				signal,
@ -61,9 +61,9 @@ export function HomeRoute() {
 			case NDKKind.Text:
 				return <TextNote key={event.id} event={event} className="mt-3" />;
 			case NDKKind.Repost:
-				return <RepostNote key={event.id} event={event} />;
+				return <RepostNote key={event.id} event={event} className="mt-3" />;
 			default:
-				return <TextNote key={event.id} event={event} />;
+				return <TextNote key={event.id} event={event} className="mt-3" />;
 		}
 	};

--- a/packages/@columns/timeline/src/index.tsx
+++ b/packages/@columns/timeline/src/index.tsx
@ -1,20 +1,48 @@
-import { Column } from "@lume/ark";
+import { Column, useStorage } from "@lume/ark";
 import { TimelineIcon } from "@lume/icons";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRef } from "react";
 import { EventRoute } from "./event";
 import { HomeRoute } from "./home";
 import { UserRoute } from "./user";

 export function Timeline() {
+	const colKey = "newsfeed";
+	const storage = useStorage();
+	const queryClient = useQueryClient();
+	const since = useRef(Math.floor(Date.now() / 1000));
+
+	const refreshTimeline = async (events: NDKEvent[]) => {
+		await queryClient.setQueryData(
+			[colKey],
+			(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
+				...prev,
+				pages: [[...events], ...prev.pages],
+			}),
+		);
+	};
+
 	return (
 		<Column.Root>
 			<Column.Header
 				id="9999"
-				queryKey={["newsfeed"]}
+				queryKey={[colKey]}
 				title="Timeline"
 				icon={<TimelineIcon className="size-4" />}
 			/>
+			<Column.Live
+				filter={{
+					kinds: [NDKKind.Text, NDKKind.Repost],
+					authors: !storage.account.contacts.length
+						? [storage.account.pubkey]
+						: storage.account.contacts,
+					since: since.current,
+				}}
+				onClick={refreshTimeline}
+			/>
 			<Column.Content>
-				<Column.Route path="/" element={<HomeRoute />} />
+				<Column.Route path="/" element={<HomeRoute colKey={colKey} />} />
 				<Column.Route path="/events/:id" element={<EventRoute />} />
 				<Column.Route path="/users/:id" element={<UserRoute />} />
 			</Column.Content>
--- a/packages/ark/package.json
+++ b/packages/ark/package.json
@ -15,6 +15,7 @@
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@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-tooltip": "^1.0.7",
 		"@tanstack/react-query": "^5.14.2",
--- a/packages/ark/src/ark.ts
+++ b/packages/ark/src/ark.ts
@ -1,9 +1,5 @@
 import { LumeStorage } from "@lume/storage";
-import {
-	type Account,
-	type NDKEventWithReplies,
-	type NIP05,
-} from "@lume/types";
+import { type NDKEventWithReplies, type NIP05 } from "@lume/types";
 import NDK, {
 	NDKEvent,
 	NDKFilter,
@ -26,7 +22,6 @@ export class Ark {
 	#storage: LumeStorage;
 	#fetcher: NostrFetcher;
 	public ndk: NDK;
-	public account: Account;

 	constructor({
 		ndk,
@ -36,7 +31,6 @@ export class Ark {
 	}: {
 		ndk: NDK;
 		storage: LumeStorage;
-
 		fetcher: NostrFetcher;
 	}) {
 		this.ndk = ndk;
--- a/packages/ark/src/components/column/live.tsx
+++ b/packages/ark/src/components/column/live.tsx
@ -8,11 +8,17 @@ export function ColumnLiveWidget({
 	onClick,
 }: {
 	filter: NDKFilter;
-	onClick: () => void;
+	onClick: (event: NDKEvent[]) => void;
 }) {
 	const ark = useArk();
 	const [events, setEvents] = useState<NDKEvent[]>([]);

+	const update = async () => {
+		onClick(events);
+		// reset
+		setEvents([]);
+	};
+
 	useEffect(() => {
 		const sub = ark.subscribe({
 			filter,
@ -31,7 +37,7 @@ export function ColumnLiveWidget({
 		<div className="absolute left-0 top-11 z-50 flex h-11 w-full items-center justify-center">
 			<button
 				type="button"
-				onClick={onClick}
+				onClick={update}
 				className="inline-flex h-9 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-2.5 text-sm font-semibold text-white hover:bg-blue-600"
 			>
 				<ChevronUpIcon className="h-4 w-4" />
--- a/packages/ark/src/components/note/builds/childReply.tsx
+++ b/packages/ark/src/components/note/builds/childReply.tsx
@ -0,0 +1,22 @@
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { Note } from "..";
+
+export function ChildReply({
+	event,
+	rootEventId,
+}: { event: NDKEvent; rootEventId?: string }) {
+	return (
+		<Note.Provider event={event}>
+			<Note.Root>
+				<Note.User />
+				<Note.TextContent content={event.content} className="min-w-0" />
+				<div className="-ml-1 flex h-14 items-center gap-10">
+					<Note.Reply rootEventId={rootEventId} />
+					<Note.Reaction />
+					<Note.Repost />
+					<Note.Zap />
+				</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}
--- a/packages/ark/src/components/note/builds/reply.tsx
+++ b/packages/ark/src/components/note/builds/reply.tsx
@ -4,6 +4,7 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { Note } from "..";
+import { ChildReply } from "./childReply";

 export function Reply({
 	event,
@ -16,58 +17,44 @@ export function Reply({

 	return (
 		<Collapsible.Root open={open} onOpenChange={setOpen}>
-			<Note.Root>
-				<Note.User
-					pubkey={event.pubkey}
-					time={event.created_at}
-					className="h-14 px-3"
-				/>
-				<Note.TextContent content={event.content} className="min-w-0 px-3" />
-				<div className="-ml-1 flex items-center justify-between h-14 px-3">
-					{event.replies?.length > 0 ? (
-						<Collapsible.Trigger asChild>
-							<div className="ml-1 inline-flex h-14 items-center gap-1 font-semibold text-blue-500">
-								<NavArrowDownIcon
-									className={twMerge(
-										"h-3 w-3",
-										open ? "rotate-180 transform" : "",
-									)}
-								/>
-								{`${event.replies?.length} ${
-									event.replies?.length === 1 ? "reply" : "replies"
-								}`}
-							</div>
-						</Collapsible.Trigger>
-					) : null}
-					<div className="inline-flex items-center gap-10">
-						<Note.Reply eventId={event.id} rootEventId={rootEvent} />
-						<Note.Reaction event={event} />
-						<Note.Repost event={event} />
-						<Note.Zap event={event} />
-					</div>
-				</div>
-				<div className={twMerge("px-3", open ? "pb-3" : "")}>
-					{event.replies?.length > 0 ? (
-						<Collapsible.Content>
-							{event.replies?.map((childEvent) => (
-								<Note.Root key={childEvent.id}>
-									<Note.User pubkey={event.pubkey} time={event.created_at} />
-									<Note.TextContent
-										content={event.content}
-										className="min-w-0"
+			<Note.Provider event={event}>
+				<Note.Root>
+					<Note.User className="h-14 px-3" />
+					<Note.TextContent content={event.content} className="min-w-0 px-3" />
+					<div className="-ml-1 flex items-center justify-between h-14 px-3">
+						{event.replies?.length > 0 ? (
+							<Collapsible.Trigger asChild>
+								<div className="ml-1 inline-flex h-14 items-center gap-1 font-semibold text-blue-500">
+									<NavArrowDownIcon
+										className={twMerge(
+											"h-3 w-3",
+											open ? "rotate-180 transform" : "",
+										)}
 									/>
-									<div className="-ml-1 flex h-14 items-center gap-10">
-										<Note.Reply eventId={event.id} rootEventId={rootEvent} />
-										<Note.Reaction event={event} />
-										<Note.Repost event={event} />
-										<Note.Zap event={event} />
-									</div>
-								</Note.Root>
-							))}
-						</Collapsible.Content>
-					) : null}
-				</div>
-			</Note.Root>
+									{`${event.replies?.length} ${
+										event.replies?.length === 1 ? "reply" : "replies"
+									}`}
+								</div>
+							</Collapsible.Trigger>
+						) : null}
+						<div className="inline-flex items-center gap-10">
+							<Note.Reply rootEventId={rootEvent} />
+							<Note.Reaction />
+							<Note.Repost />
+							<Note.Zap />
+						</div>
+					</div>
+					<div className={twMerge("px-3", open ? "pb-3" : "")}>
+						{event.replies?.length > 0 ? (
+							<Collapsible.Content>
+								{event.replies?.map((childEvent) => (
+									<ChildReply key={childEvent.id} event={childEvent} />
+								))}
+							</Collapsible.Content>
+						) : null}
+					</div>
+				</Note.Root>
+			</Note.Provider>
 		</Collapsible.Root>
 	);
 }
--- a/packages/ark/src/components/note/builds/repost.tsx
+++ b/packages/ark/src/components/note/builds/repost.tsx
@ -3,8 +3,12 @@ import { useQuery } from "@tanstack/react-query";
 import { Note } from "..";
 import { useArk } from "../../../provider";

-export function RepostNote({ event }: { event: NDKEvent }) {
+export function RepostNote({
+	event,
+	className,
+}: { event: NDKEvent; className?: string }) {
 	const ark = useArk();
+
 	const {
 		isLoading,
 		isError,
@ -57,26 +61,23 @@ export function RepostNote({ event }: { event: NDKEvent }) {
 	}

 	return (
-		<Note.Root>
-			<Note.User
-				pubkey={event.pubkey}
-				time={event.created_at}
-				variant="repost"
-				className="h-14"
-			/>
-			<div className="relative flex flex-col gap-2 px-3">
-				<Note.User pubkey={repostEvent.pubkey} time={repostEvent.created_at} />
-				{renderContentByKind()}
-				<div className="flex h-14 items-center justify-between">
-					<Note.Pin eventId={event.id} />
-					<div className="inline-flex items-center gap-10">
-						<Note.Reply eventId={repostEvent.id} />
-						<Note.Reaction event={repostEvent} />
-						<Note.Repost event={repostEvent} />
-						<Note.Zap event={repostEvent} />
+		<Note.Provider event={repostEvent}>
+			<Note.Root className={className}>
+				<Note.User variant="repost" className="h-14" />
+				<div className="relative flex flex-col gap-2 px-3">
+					<Note.User />
+					{renderContentByKind()}
+					<div className="flex h-14 items-center justify-between">
+						<Note.Pin />
+						<div className="inline-flex items-center gap-10">
+							<Note.Reply />
+							<Note.Reaction />
+							<Note.Repost />
+							<Note.Zap />
+						</div>
 					</div>
 				</div>
-			</div>
-		</Note.Root>
+			</Note.Root>
+		</Note.Provider>
 	);
 }
--- a/packages/ark/src/components/note/builds/text.tsx
+++ b/packages/ark/src/components/note/builds/text.tsx
@ -10,23 +10,24 @@ export function TextNote({
 	const thread = ark.getEventThread({ tags: event.tags });

 	return (
-		<Note.Root className={className}>
-			<Note.User
-				pubkey={event.pubkey}
-				time={event.created_at}
-				className="h-14 px-3"
-			/>
-			<Note.Thread thread={thread} className="mb-2" />
-			<Note.TextContent content={event.content} className="min-w-0 px-3" />
-			<div className="flex h-14 items-center justify-between px-3">
-				<Note.Pin eventId={event.id} />
-				<div className="inline-flex items-center gap-10">
-					<Note.Reply eventId={event.id} rootEventId={thread?.rootEventId} />
-					<Note.Reaction event={event} />
-					<Note.Repost event={event} />
-					<Note.Zap event={event} />
+		<Note.Provider event={event}>
+			<Note.Root className={className}>
+				<div className="h-14 px-3 flex items-center justify-between">
+					<Note.User className="flex-1 pr-1" />
+					<Note.Menu />
 				</div>
-			</div>
-		</Note.Root>
+				<Note.Thread thread={thread} className="mb-2" />
+				<Note.TextContent content={event.content} className="min-w-0 px-3" />
+				<div className="flex h-14 items-center justify-between px-3">
+					<Note.Pin />
+					<div className="inline-flex items-center gap-10">
+						<Note.Reply rootEventId={thread?.rootEventId} />
+						<Note.Reaction />
+						<Note.Repost />
+						<Note.Zap />
+					</div>
+				</div>
+			</Note.Root>
+		</Note.Provider>
 	);
 }
--- a/packages/ark/src/components/note/builds/thread.tsx
+++ b/packages/ark/src/components/note/builds/thread.tsx
@ -33,23 +33,20 @@ export function ThreadNote({ eventId }: { eventId: string }) {
 	}

 	return (
-		<Note.Root>
-			<Note.User
-				pubkey={data.pubkey}
-				time={data.created_at}
-				variant="thread"
-				className="h-16 px-3"
-			/>
-			{renderEventKind(data)}
-			<div className="flex h-14 items-center justify-between px-3">
-				<Note.Pin eventId={data.id} />
-				<div className="inline-flex items-center gap-10">
-					<Note.Reply eventId={data.id} />
-					<Note.Reaction event={data} />
-					<Note.Repost event={data} />
-					<Note.Zap event={data} />
+		<Note.Provider event={data}>
+			<Note.Root>
+				<Note.User variant="thread" className="h-16 px-3" />
+				{renderEventKind(data)}
+				<div className="flex h-14 items-center justify-between px-3">
+					<Note.Pin />
+					<div className="inline-flex items-center gap-10">
+						<Note.Reply />
+						<Note.Reaction />
+						<Note.Repost />
+						<Note.Zap />
+					</div>
 				</div>
-			</div>
-		</Note.Root>
+			</Note.Root>
+		</Note.Provider>
 	);
 }
--- a/packages/ark/src/components/note/buttons/pin.tsx
+++ b/packages/ark/src/components/note/buttons/pin.tsx
@ -1,9 +1,11 @@
 import { PinIcon } from "@lume/icons";
 import { WIDGET_KIND } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
+import { useNoteContext } from "..";
 import { useWidget } from "../../../hooks/useWidget";

-export function NotePin({ eventId }: { eventId: string }) {
+export function NotePin() {
+	const event = useNoteContext();
 	const { addWidget } = useWidget();

 	return (
@ -16,19 +18,19 @@ export function NotePin({ eventId }: { eventId: string }) {
 							addWidget.mutate({
 								kind: WIDGET_KIND.thread,
 								title: "Thread",
-								content: eventId,
+								content: event.id,
 							})
 						}
-						className="inline-flex h-7 w-max items-center justify-center gap-2 rounded-full bg-neutral-100 px-2 text-sm font-medium dark:bg-neutral-900"
+						className="inline-flex h-7 w-max items-center justify-center gap-2 rounded-full bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800 px-2 text-sm font-medium dark:bg-neutral-900"
 					>
 						<PinIcon className="size-4" />
 						Pin
 					</button>
 				</Tooltip.Trigger>
 				<Tooltip.Portal>
-					<Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 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 dark:bg-neutral-800 dark:text-neutral-100">
+					<Tooltip.Content className="bg-neutral-950 text-white -left-10 inline-flex h-7 select-none items-center justify-center rounded-md px-3.5 text-sm 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">
 						Pin note
-						<Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
+						<Tooltip.Arrow className="fill-neutral-950" />
 					</Tooltip.Content>
 				</Tooltip.Portal>
 			</Tooltip.Root>
--- a/packages/ark/src/components/note/buttons/reaction.tsx
+++ b/packages/ark/src/components/note/buttons/reaction.tsx
@ -1,8 +1,8 @@
 import { ReactionIcon } from "@lume/icons";
-import { NDKEvent } from "@nostr-dev-kit/ndk";
-import * as Popover from "@radix-ui/react-popover";
+import * as HoverCard from "@radix-ui/react-hover-card";
 import { useState } from "react";
 import { toast } from "sonner";
+import { useNoteContext } from "../provider";

 const REACTIONS = [
 	{
@ -27,7 +27,9 @@ const REACTIONS = [
 	},
 ];

-export function NoteReaction({ event }: { event: NDKEvent }) {
+export function NoteReaction() {
+	const event = useNoteContext();
+
 	const [open, setOpen] = useState(false);
 	const [reaction, setReaction] = useState<string | null>(null);

@ -52,8 +54,8 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 	};

 	return (
-		<Popover.Root open={open} onOpenChange={setOpen}>
-			<Popover.Trigger asChild>
+		<HoverCard.Root open={open} onOpenChange={setOpen}>
+			<HoverCard.Trigger asChild>
 				<button
 					type="button"
 					className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
@ -62,16 +64,16 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 						<img
 							src={getReactionImage(reaction)}
 							alt={reaction}
-							className="h-5 w-5"
+							className="size-5"
 						/>
 					) : (
-						<ReactionIcon className="h-5 w-5 group-hover:text-blue-500" />
+						<ReactionIcon className="size-5 group-hover:text-blue-500" />
 					)}
 				</button>
-			</Popover.Trigger>
-			<Popover.Portal>
-				<Popover.Content
-					className="select-none rounded-md bg-neutral-200 px-1 py-1 text-sm will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-800"
+			</HoverCard.Trigger>
+			<HoverCard.Portal>
+				<HoverCard.Content
+					className="select-none rounded-lg bg-neutral-950 px-1 py-1 text-sm will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
 					sideOffset={0}
 					side="top"
 				>
@ -79,7 +81,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 						<button
 							type="button"
 							onClick={() => react("👏")}
-							className="inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+							className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
 						>
 							<img
 								src="/clapping_hands.png"
@ -90,7 +92,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 						<button
 							type="button"
 							onClick={() => react("🤪")}
-							className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+							className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
 						>
 							<img
 								src="/face_with_tongue.png"
@ -101,7 +103,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 						<button
 							type="button"
 							onClick={() => react("😮")}
-							className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+							className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
 						>
 							<img
 								src="/face_with_open_mouth.png"
@ -112,7 +114,7 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 						<button
 							type="button"
 							onClick={() => react("😢")}
-							className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+							className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
 						>
 							<img
 								src="/crying_face.png"
@ -123,14 +125,14 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 						<button
 							type="button"
 							onClick={() => react("🤡")}
-							className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+							className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
 						>
 							<img src="/clown_face.png" alt="Clown Face" className="h-6 w-6" />
 						</button>
 					</div>
-					<Popover.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
-				</Popover.Content>
-			</Popover.Portal>
-		</Popover.Root>
+					<HoverCard.Arrow className="fill-neutral-950" />
+				</HoverCard.Content>
+			</HoverCard.Portal>
+		</HoverCard.Root>
 	);
 }
--- a/packages/ark/src/components/note/buttons/reply.tsx
+++ b/packages/ark/src/components/note/buttons/reply.tsx
@ -1,14 +1,14 @@
 import { ReplyIcon } from "@lume/icons";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { createSearchParams, useNavigate } from "react-router-dom";
+import { useNoteContext } from "../provider";

 export function NoteReply({
-	eventId,
 	rootEventId,
 }: {
-	eventId: string;
 	rootEventId?: string;
 }) {
+	const event = useNoteContext();
 	const navigate = useNavigate();

 	return (
@ -21,7 +21,7 @@ export function NoteReply({
 							navigate({
 								pathname: "/new/",
 								search: createSearchParams({
-									replyTo: eventId,
+									replyTo: event.id,
 									rootReplyTo: rootEventId,
 								}).toString(),
 							})
@ -32,9 +32,9 @@ export function NoteReply({
 					</button>
 				</Tooltip.Trigger>
 				<Tooltip.Portal>
-					<Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 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 dark:bg-neutral-800 dark:text-neutral-100">
+					<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-white 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">
 						Quick reply
-						<Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
+						<Tooltip.Arrow className="fill-neutral-950" />
 					</Tooltip.Content>
 				</Tooltip.Portal>
 			</Tooltip.Root>
--- a/packages/ark/src/components/note/buttons/repost.tsx
+++ b/packages/ark/src/components/note/buttons/repost.tsx
@ -1,11 +1,12 @@
 import { RepostIcon } from "@lume/icons";
-import { NDKEvent } from "@nostr-dev-kit/ndk";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useState } from "react";
 import { toast } from "sonner";
 import { twMerge } from "tailwind-merge";
+import { useNoteContext } from "../provider";

-export function NoteRepost({ event }: { event: NDKEvent }) {
+export function NoteRepost() {
+	const event = useNoteContext();
 	const [isRepost, setIsRepost] = useState(false);

 	const submit = async () => {
@ -39,9 +40,9 @@ export function NoteRepost({ event }: { event: NDKEvent }) {
 					</button>
 				</Tooltip.Trigger>
 				<Tooltip.Portal>
-					<Tooltip.Content className="-left-10 inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-200 px-3.5 text-sm text-neutral-900 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 dark:bg-neutral-800 dark:text-neutral-100">
+					<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-white 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">
 						Repost
-						<Tooltip.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
+						<Tooltip.Arrow className="fill-neutral-950" />
 					</Tooltip.Content>
 				</Tooltip.Portal>
 			</Tooltip.Root>
--- a/packages/ark/src/components/note/buttons/zap.tsx
+++ b/packages/ark/src/components/note/buttons/zap.tsx
@ -16,8 +16,9 @@ import CurrencyInput from "react-currency-input-field";
 import { useNavigate } from "react-router-dom";
 import { useProfile } from "../../../hooks/useProfile";
 import { useArk, useStorage } from "../../../provider";
+import { useNoteContext } from "../provider";

-export function NoteZap({ event }: { event: NDKEvent }) {
+export function NoteZap() {
 	const [walletConnectURL, setWalletConnectURL] = useState<string>(null);
 	const [amount, setAmount] = useState<string>("21");
 	const [zapMessage, setZapMessage] = useState<string>("");
@ -26,13 +27,14 @@ export function NoteZap({ event }: { event: NDKEvent }) {
 	const [isCompleted, setIsCompleted] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);

-	const { user } = useProfile(event.pubkey);
-
 	const ark = useArk();
+	const event = useNoteContext();
 	const storage = useStorage();
 	const nwc = useRef(null);
 	const navigate = useNavigate();

+	const { user } = useProfile(event.pubkey);
+
 	const createZapRequest = async () => {
 		try {
 			if (!ark.ndk.signer) return navigate("/new/privkey");
--- a/packages/ark/src/components/note/index.ts
+++ b/packages/ark/src/components/note/index.ts
@ -8,12 +8,14 @@ import { NoteArticleContent } from "./kinds/article";
 import { NoteMediaContent } from "./kinds/media";
 import { NoteTextContent } from "./kinds/text";
 import { NoteMenu } from "./menu";
+import { NoteProvider } from "./provider";
 import { NoteReplyList } from "./reply";
 import { NoteRoot } from "./root";
 import { NoteThread } from "./thread";
 import { NoteUser } from "./user";

 export const Note = {
+	Provider: NoteProvider,
 	Root: NoteRoot,
 	User: NoteUser,
 	Menu: NoteMenu,
@ -30,6 +32,7 @@ export const Note = {
 	ReplyList: NoteReplyList,
 };

+export * from "./provider";
 export * from "./builds/text";
 export * from "./builds/repost";
 export * from "./builds/skeleton";
--- a/packages/ark/src/components/note/menu.tsx
+++ b/packages/ark/src/components/note/menu.tsx
@ -1,63 +1,76 @@
-import { HorizontalDotsIcon } from '@lume/icons';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { writeText } from '@tauri-apps/plugin-clipboard-manager';
-import { nip19 } from 'nostr-tools';
-import { EventPointer } from 'nostr-tools/lib/types/nip19';
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { HorizontalDotsIcon } from "@lume/icons";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { nip19 } from "nostr-tools";
+import { EventPointer } from "nostr-tools/lib/types/nip19";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { useNoteContext } from "./provider";

-export function NoteMenu({ eventId, pubkey }: { eventId: string; pubkey: string }) {
-  const [open, setOpen] = useState(false);
+export function NoteMenu() {
+	const event = useNoteContext();
+	const [open, setOpen] = useState(false);

-  const copyID = async () => {
-    await writeText(nip19.neventEncode({ id: eventId, author: pubkey } as EventPointer));
-    setOpen(false);
-  };
+	const copyID = async () => {
+		await writeText(
+			nip19.neventEncode({
+				id: event.id,
+				author: event.pubkey,
+			} as EventPointer),
+		);
+		setOpen(false);
+	};

-  const copyLink = async () => {
-    await writeText(
-      `https://njump.me/${nip19.neventEncode({ id: eventId, author: pubkey } as EventPointer)}`
-    );
-    setOpen(false);
-  };
+	const copyLink = async () => {
+		await writeText(
+			`https://njump.me/${nip19.neventEncode({
+				id: event.id,
+				author: event.pubkey,
+			} as EventPointer)}`,
+		);
+		setOpen(false);
+	};

-  return (
-    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
-      <DropdownMenu.Trigger asChild>
-        <button type="button" className="inline-flex h-6 w-6 items-center justify-center">
-          <HorizontalDotsIcon className="h-4 w-4 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
-        </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:bg-neutral-900">
-          <DropdownMenu.Item asChild>
-            <button
-              type="button"
-              onClick={() => copyLink()}
-              className="inline-flex h-10 items-center px-4 text-sm text-neutral-900 hover:bg-neutral-200 focus:outline-none dark:text-neutral-100 dark:hover:bg-neutral-800"
-            >
-              Copy shareable link
-            </button>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item asChild>
-            <button
-              type="button"
-              onClick={() => copyID()}
-              className="inline-flex h-10 items-center px-4 text-sm text-neutral-900 hover:bg-neutral-200 focus:outline-none dark:text-neutral-100 dark:hover:bg-neutral-800"
-            >
-              Copy ID
-            </button>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item asChild>
-            <Link
-              to={`/users/${pubkey}`}
-              className="inline-flex h-10 items-center px-4 text-sm text-neutral-900 hover:bg-neutral-200 focus:outline-none dark:text-neutral-100 dark:hover:bg-neutral-800"
-            >
-              View profile
-            </Link>
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
+	return (
+		<DropdownMenu.Root open={open} onOpenChange={setOpen}>
+			<DropdownMenu.Trigger asChild>
+				<button
+					type="button"
+					className="inline-flex h-6 w-6 items-center justify-center"
+				>
+					<HorizontalDotsIcon className="h-4 w-4 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
+				</button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Portal>
+				<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 focus:outline-none dark:border-neutral-900">
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => copyLink()}
+							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
+						>
+							Copy shareable link
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => copyID()}
+							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
+						>
+							Copy note ID
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<Link
+							to={`/users/${event.pubkey}`}
+							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
+						>
+							View profile
+						</Link>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	);
 }
--- a/packages/ark/src/components/note/provider.tsx
+++ b/packages/ark/src/components/note/provider.tsx
@ -0,0 +1,21 @@
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { ReactNode, createContext, useContext } from "react";
+
+const EventContext = createContext<NDKEvent>(null);
+
+export function NoteProvider({
+	event,
+	children,
+}: { event: NDKEvent; children: ReactNode }) {
+	return (
+		<EventContext.Provider value={event}>{children}</EventContext.Provider>
+	);
+}
+
+export function useNoteContext() {
+	const context = useContext(EventContext);
+	if (context === undefined) {
+		throw new Error("Please import Note Provider to use useNoteContext() hook");
+	}
+	return context;
+}
--- a/packages/ark/src/components/note/root.tsx
+++ b/packages/ark/src/components/note/root.tsx
@ -1,5 +1,5 @@
+import { cn } from "@lume/utils";
 import { ReactNode } from "react";
-import { twMerge } from "tailwind-merge";

 export function NoteRoot({
 	children,
@ -10,7 +10,7 @@ export function NoteRoot({
 }) {
 	return (
 		<div
-			className={twMerge(
+			className={cn(
 				"flex h-min w-full flex-col overflow-hidden rounded-xl bg-neutral-50 dark:bg-neutral-950",
 				className,
 			)}
--- a/packages/ark/src/components/note/thread.tsx
+++ b/packages/ark/src/components/note/thread.tsx
@ -24,7 +24,7 @@ export function NoteThread({
 					to={`/events/${thread?.rootEventId || thread?.replyEventId}`}
 					className="self-start text-blue-500 hover:text-blue-600"
 				>
-					Show full thread
+					Show thread
 				</Link>
 			</div>
 		</div>
--- a/packages/ark/src/components/note/user.tsx
+++ b/packages/ark/src/components/note/user.tsx
@ -5,29 +5,33 @@ import { minidenticon } from "minidenticons";
 import { useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { useProfile } from "../../hooks/useProfile";
+import { useNoteContext } from "./provider";

 export function NoteUser({
-	pubkey,
-	time,
 	variant = "text",
 	className,
 }: {
-	pubkey: string;
-	time: number;
 	variant?: "text" | "repost" | "mention" | "thread";
 	className?: string;
 }) {
-	const createdAt = useMemo(() => formatCreatedAt(time), [time]);
-	const fallbackName = useMemo(() => displayNpub(pubkey, 16), [pubkey]);
+	const event = useNoteContext();
+	const createdAt = useMemo(
+		() => formatCreatedAt(event.created_at),
+		[event.created_at],
+	);
+	const fallbackName = useMemo(
+		() => displayNpub(event.pubkey, 16),
+		[event.pubkey],
+	);
 	const fallbackAvatar = useMemo(
 		() =>
 			`data:image/svg+xml;utf8,${encodeURIComponent(
-				minidenticon(pubkey, 90, 50),
+				minidenticon(event.pubkey, 90, 50),
 			)}`,
-		[pubkey],
+		[event.pubkey],
 	);

-	const { isLoading, user } = useProfile(pubkey);
+	const { isLoading, user } = useProfile(event.pubkey);

 	if (variant === "mention") {
 		if (isLoading) {
@ -36,7 +40,7 @@ export function NoteUser({
 					<Avatar.Root className="shrink-0">
 						<Avatar.Image
 							src={fallbackAvatar}
-							alt={pubkey}
+							alt={event.pubkey}
 							className="h-6 w-6 rounded-md bg-black dark:bg-white"
 						/>
 					</Avatar.Root>
@ -58,7 +62,7 @@ export function NoteUser({
 				<Avatar.Root className="shrink-0">
 					<Avatar.Image
 						src={user?.picture || user?.image}
-						alt={pubkey}
+						alt={event.pubkey}
 						loading="lazy"
 						decoding="async"
 						className="h-6 w-6 rounded-md"
@ -66,7 +70,7 @@ export function NoteUser({
 					<Avatar.Fallback delayMs={300}>
 						<img
 							src={fallbackAvatar}
-							alt={pubkey}
+							alt={event.pubkey}
 							className="h-6 w-6 rounded-md bg-black dark:bg-white"
 						/>
 					</Avatar.Fallback>
@ -111,7 +115,7 @@ export function NoteUser({
 					<Avatar.Root className="shrink-0">
 						<Avatar.Image
 							src={user?.picture || user?.image}
-							alt={pubkey}
+							alt={event.pubkey}
 							loading="lazy"
 							decoding="async"
 							className="h-6 w-6 rounded object-cover"
@ -119,7 +123,7 @@ export function NoteUser({
 						<Avatar.Fallback delayMs={300}>
 							<img
 								src={fallbackAvatar}
-								alt={pubkey}
+								alt={event.pubkey}
 								className="h-6 w-6 rounded bg-black dark:bg-white"
 							/>
 						</Avatar.Fallback>
@ -156,7 +160,7 @@ export function NoteUser({
 				<Avatar.Root className="h-10 w-10 shrink-0">
 					<Avatar.Image
 						src={user?.picture || user?.image}
-						alt={pubkey}
+						alt={event.pubkey}
 						loading="lazy"
 						decoding="async"
 						className="h-10 w-10 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
@ -164,7 +168,7 @@ export function NoteUser({
 					<Avatar.Fallback delayMs={300}>
 						<img
 							src={fallbackAvatar}
-							alt={pubkey}
+							alt={event.pubkey}
 							className="h-10 w-10 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
 						/>
 					</Avatar.Fallback>
@ -189,7 +193,7 @@ export function NoteUser({
 				<Avatar.Root className="h-9 w-9 shrink-0">
 					<Avatar.Image
 						src={fallbackAvatar}
-						alt={pubkey}
+						alt={event.pubkey}
 						className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
 					/>
 				</Avatar.Root>
@ -207,7 +211,7 @@ export function NoteUser({
 			<Avatar.Root className="h-9 w-9 shrink-0">
 				<Avatar.Image
 					src={user?.picture || user?.image}
-					alt={pubkey}
+					alt={event.pubkey}
 					loading="lazy"
 					decoding="async"
 					className="h-9 w-9 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
@ -215,7 +219,7 @@ export function NoteUser({
 				<Avatar.Fallback delayMs={300}>
 					<img
 						src={fallbackAvatar}
-						alt={pubkey}
+						alt={event.pubkey}
 						className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
 					/>
 				</Avatar.Fallback>
--- a/packages/ark/src/hooks/useRichContent.tsx
+++ b/packages/ark/src/hooks/useRichContent.tsx
@ -1,183 +1,209 @@
-import { nanoid } from 'nanoid';
-import { nip19 } from 'nostr-tools';
-import { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
-import reactStringReplace from 'react-string-replace';
+import { nip19 } from "nostr-tools";
+import { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import reactStringReplace from "react-string-replace";
 import {
-  Hashtag,
-  ImagePreview,
-  LinkPreview,
-  MentionNote,
-  MentionUser,
-  VideoPreview,
-} from '../components/note';
-import { useStorage } from '../provider';
+	Hashtag,
+	ImagePreview,
+	LinkPreview,
+	MentionNote,
+	MentionUser,
+	VideoPreview,
+} from "../components/note";
+import { useStorage } from "../provider";

 const NOSTR_MENTIONS = [
-  '@npub1',
-  'nostr:npub1',
-  'nostr:nprofile1',
-  'nostr:naddr1',
-  'npub1',
-  'nprofile1',
-  'naddr1',
-  'Nostr:npub1',
-  'Nostr:nprofile1',
-  'Nostr:naddre1',
+	"@npub1",
+	"nostr:npub1",
+	"nostr:nprofile1",
+	"nostr:naddr1",
+	"npub1",
+	"nprofile1",
+	"naddr1",
+	"Nostr:npub1",
+	"Nostr:nprofile1",
+	"Nostr:naddre1",
 ];

 const NOSTR_EVENTS = [
-  'nostr:note1',
-  'note1',
-  'nostr:nevent1',
-  'nevent1',
-  'Nostr:note1',
-  'Nostr:nevent1',
+	"nostr:note1",
+	"note1",
+	"nostr:nevent1",
+	"nevent1",
+	"Nostr:note1",
+	"Nostr:nevent1",
 ];

 // const BITCOINS = ['lnbc', 'bc1p', 'bc1q'];

-const IMAGES = ['.jpg', '.jpeg', '.gif', '.png', '.webp', '.avif', '.tiff'];
+const IMAGES = [".jpg", ".jpeg", ".gif", ".png", ".webp", ".avif", ".tiff"];

 const VIDEOS = [
-  '.mp4',
-  '.mov',
-  '.webm',
-  '.wmv',
-  '.flv',
-  '.mts',
-  '.avi',
-  '.ogv',
-  '.mkv',
-  '.mp3',
-  '.m3u8',
+	".mp4",
+	".mov",
+	".webm",
+	".wmv",
+	".flv",
+	".mts",
+	".avi",
+	".ogv",
+	".mkv",
+	".mp3",
+	".m3u8",
 ];

 export function useRichContent(content: string, textmode = false) {
-  const storage = useStorage();
+	const storage = useStorage();

-  let parsedContent: string | ReactNode[] = content.replace(/\n+/g, '\n');
-  let linkPreview: string;
-  let images: string[] = [];
-  let videos: string[] = [];
-  let events: string[] = [];
+	let parsedContent: string | ReactNode[] = content.replace(/\n+/g, "\n");
+	let linkPreview: string;
+	let images: string[] = [];
+	let videos: string[] = [];
+	let events: string[] = [];

-  const text = parsedContent;
-  const words = text.split(/( |\n)/);
+	const text = parsedContent;
+	const words = text.split(/( |\n)/);

-  if (!textmode) {
-    if (storage.settings.media) {
-      images = words.filter((word) => IMAGES.some((el) => word.endsWith(el)));
-      videos = words.filter((word) => VIDEOS.some((el) => word.endsWith(el)));
-    }
-    events = words.filter((word) => NOSTR_EVENTS.some((el) => word.startsWith(el)));
-  }
+	if (!textmode) {
+		if (storage.settings.media) {
+			images = words.filter((word) => IMAGES.some((el) => word.endsWith(el)));
+			videos = words.filter((word) => VIDEOS.some((el) => word.endsWith(el)));
+		}
+		events = words.filter((word) =>
+			NOSTR_EVENTS.some((el) => word.startsWith(el)),
+		);
+	}

-  const hashtags = words.filter((word) => word.startsWith('#'));
-  const mentions = words.filter((word) =>
-    NOSTR_MENTIONS.some((el) => word.startsWith(el))
-  );
+	const hashtags = words.filter((word) => word.startsWith("#"));
+	const mentions = words.filter((word) =>
+		NOSTR_MENTIONS.some((el) => word.startsWith(el)),
+	);

-  try {
-    if (images.length) {
-      for(const image of images) {
-        parsedContent = reactStringReplace(parsedContent, image, (match, i) => (
-          <ImagePreview key={match + i} url={match} />
-        ));
-      }
-    }
+	try {
+		if (images.length) {
+			for (const image of images) {
+				parsedContent = reactStringReplace(parsedContent, image, (match, i) => (
+					<ImagePreview key={match + i} url={match} />
+				));
+			}
+		}

-    if (videos.length) {
-      for(const video of videos) {
-        parsedContent = reactStringReplace(parsedContent, video, (match, i) => (
-          <VideoPreview key={match + i} url={match} />
-        ));
-      }
-    }
+		if (videos.length) {
+			for (const video of videos) {
+				parsedContent = reactStringReplace(parsedContent, video, (match, i) => (
+					<VideoPreview key={match + i} url={match} />
+				));
+			}
+		}

-    if (hashtags.length) {
-      for(const hashtag of hashtags) {
-        parsedContent = reactStringReplace(parsedContent, hashtag, (match, i) => {
-          if (storage.settings.hashtag) return <Hashtag key={match + i} tag={hashtag} />;
-          return null;
-        });
-      }
-    }
+		if (hashtags.length) {
+			for (const hashtag of hashtags) {
+				parsedContent = reactStringReplace(
+					parsedContent,
+					hashtag,
+					(match, i) => {
+						if (storage.settings.hashtag)
+							return <Hashtag key={match + i} tag={hashtag} />;
+						return null;
+					},
+				);
+			}
+		}

-    if (events.length) {
-      for(const event of events) {
-        const address = event.replace('nostr:', '').replace(/[^a-zA-Z0-9]/g, '');
-        const decoded = nip19.decode(address);
+		if (events.length) {
+			for (const event of events) {
+				const address = event
+					.replace("nostr:", "")
+					.replace(/[^a-zA-Z0-9]/g, "");
+				const decoded = nip19.decode(address);

-        if (decoded.type === 'note') {
-          parsedContent = reactStringReplace(parsedContent, event, (match, i) => (
-            <MentionNote key={match + i} eventId={decoded.data} />
-          ));
-        }
+				if (decoded.type === "note") {
+					parsedContent = reactStringReplace(
+						parsedContent,
+						event,
+						(match, i) => (
+							<MentionNote key={match + i} eventId={decoded.data} />
+						),
+					);
+				}

-        if (decoded.type === 'nevent') {
-          parsedContent = reactStringReplace(parsedContent, event, (match, i) => (
-            <MentionNote key={match + i} eventId={decoded.data.id} />
-          ));
-        }
-      }
-    }
+				if (decoded.type === "nevent") {
+					parsedContent = reactStringReplace(
+						parsedContent,
+						event,
+						(match, i) => (
+							<MentionNote key={match + i} eventId={decoded.data.id} />
+						),
+					);
+				}
+			}
+		}

-    if (mentions.length) {
-      for(const mention of mentions) {
-        const address = mention
-          .replace('nostr:', '')
-          .replace('@', '')
-          .replace(/[^a-zA-Z0-9]/g, '');
-        const decoded = nip19.decode(address);
+		if (mentions.length) {
+			for (const mention of mentions) {
+				const address = mention
+					.replace("nostr:", "")
+					.replace("@", "")
+					.replace(/[^a-zA-Z0-9]/g, "");
+				const decoded = nip19.decode(address);

-        if (decoded.type === 'npub') {
-          parsedContent = reactStringReplace(parsedContent, mention, (match, i) => (
-            <MentionUser key={match + i} pubkey={decoded.data} />
-          ));
-        }
+				if (decoded.type === "npub") {
+					parsedContent = reactStringReplace(
+						parsedContent,
+						mention,
+						(match, i) => <MentionUser key={match + i} pubkey={decoded.data} />,
+					);
+				}

-        if (decoded.type === 'nprofile' || decoded.type === 'naddr') {
-          parsedContent = reactStringReplace(parsedContent, mention, (match, i) => (
-            <MentionUser key={match + i} pubkey={decoded.data.pubkey} />
-          ));
-        }
-      }
-    }
+				if (decoded.type === "nprofile" || decoded.type === "naddr") {
+					parsedContent = reactStringReplace(
+						parsedContent,
+						mention,
+						(match, i) => (
+							<MentionUser key={match + i} pubkey={decoded.data.pubkey} />
+						),
+					);
+				}
+			}
+		}

-    parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      const url = new URL(match);
-      url.search = '';
+		parsedContent = reactStringReplace(
+			parsedContent,
+			/(https?:\/\/\S+)/g,
+			(match, i) => {
+				const url = new URL(match);
+				url.search = "";

-      if (!linkPreview && !textmode) {
-        linkPreview = match;
-        return <LinkPreview key={match + i} url={url.toString()} />;
-      }
+				if (!linkPreview && !textmode) {
+					linkPreview = match;
+					return <LinkPreview key={match + i} url={url.toString()} />;
+				}

-      return (
-        <Link
-          key={match + i}
-          to={url.toString()}
-          target="_blank"
-          rel="noreferrer"
-          className="break-all font-normal text-blue-500 hover:text-blue-600"
-        >
-          {url.toString()}
-        </Link>
-      );
-    });
+				return (
+					<Link
+						key={match + i}
+						to={url.toString()}
+						target="_blank"
+						rel="noreferrer"
+						className="break-all font-normal text-blue-500 hover:text-blue-600"
+					>
+						{url.toString()}
+					</Link>
+				);
+			},
+		);

-    parsedContent = reactStringReplace(parsedContent, '\n', () => {
-      return <div key={nanoid()} className="h-3" />;
-    });
+		parsedContent = reactStringReplace(parsedContent, "\n", () => {
+			return null;
+		});

-    if (typeof parsedContent[0] === 'string') {
-      parsedContent[0] = parsedContent[0].trimStart();
-    }
+		if (typeof parsedContent[0] === "string") {
+			parsedContent[0] = parsedContent[0].trimStart();
+		}

-    return { parsedContent };
-  } catch (e) {
-    console.warn('[parser] parse failed: ', e);
-    return { parsedContent };
-  }
+		return { parsedContent };
+	} catch (e) {
+		console.warn("[parser] parse failed: ", e);
+		return { parsedContent };
+	}
 }
--- a/packages/icons/src/horizontalDots.tsx
+++ b/packages/icons/src/horizontalDots.tsx
@ -1,20 +1,18 @@
-export function HorizontalDotsIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M6 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
-      <path d="M13 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
-      <path d="M20 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
-    </svg>
-  );
+export function HorizontalDotsIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M6 12a1 1 0 11-2 0 1 1 0 012 0zM13 12a1 1 0 11-2 0 1 1 0 012 0zM20 12a1 1 0 11-2 0 1 1 0 012 0z" />
+		</svg>
+	);
 }
--- a/packages/icons/src/pin.tsx
+++ b/packages/icons/src/pin.tsx
@ -1,18 +1,18 @@
-export function PinIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M12 21v-5.307m0 0c-2.201 0-4.39-.184-6.567-.495a.504.504 0 0 1-.433-.5 4.54 4.54 0 0 1 2.194-3.886c.63-.381 1.034-1.029.85-1.788l-.986-4.092a1.6 1.6 0 0 1 1.406-1.967c2.366-.22 4.706-.22 7.072 0a1.6 1.6 0 0 1 1.406 1.967l-.986 4.092c-.183.76.22 1.407.85 1.788A4.54 4.54 0 0 1 19 14.698a.504.504 0 0 1-.433.5c-2.178.31-4.366.495-6.567.495Z" />
-    </svg>
-  );
+export function PinIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M12 21v-5.307m0 0c-2.201 0-4.39-.184-6.567-.495a.504.504 0 01-.433-.5 4.54 4.54 0 012.194-3.886c.63-.381 1.034-1.029.85-1.788l-.986-4.092a1.6 1.6 0 011.406-1.967c2.366-.22 4.706-.22 7.072 0a1.6 1.6 0 011.406 1.967l-.986 4.092c-.183.76.22 1.407.85 1.788A4.54 4.54 0 0119 14.698a.504.504 0 01-.433.5c-2.178.31-4.366.495-6.567.495z" />
+		</svg>
+	);
 }
--- a/packages/icons/src/reaction.tsx
+++ b/packages/icons/src/reaction.tsx
@ -1,18 +1,18 @@
-export function ReactionIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M8.43 14.5A4.985 4.985 0 0 0 12 16a4.985 4.985 0 0 0 3.57-1.5m-3.42 6.8a9.15 9.15 0 1 1 0-18.3 9.15 9.15 0 0 1 0 18.3Z" />
-    </svg>
-  );
+export function ReactionIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M9 10v1m6.5-.5h-1m-6.07 4A4.985 4.985 0 0012 16a4.985 4.985 0 003.57-1.5M12 21.15a9.15 9.15 0 110-18.3 9.15 9.15 0 010 18.3z" />
+		</svg>
+	);
 }
--- a/packages/icons/src/reply.tsx
+++ b/packages/icons/src/reply.tsx
@ -1,18 +1,18 @@
-export function ReplyIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M8 10h8m-8 4h4m9-2a9 9 0 0 1-10.272 8.91c-1.203-.17-1.805-.255-1.964-.267-.257-.02-.165-.016-.423-.014-.159 0-.34.014-.702.04l-2.153.153c-.857.062-1.286.092-1.607-.06a1.35 1.35 0 0 1-.641-.641c-.152-.32-.122-.75-.06-1.607l.153-2.153c.026-.362.04-.543.04-.702.002-.258.006-.166-.014-.423-.012-.159-.098-.76-.268-1.964A9 9 0 1 1 21 12Z" />
-    </svg>
-  );
+export function ReplyIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="25"
+			height="24"
+			fill="none"
+			viewBox="0 0 25 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M9.5 12h3m0 0h3m-3 0V9m0 3v3m9-3a9 9 0 01-10.272 8.91c-1.203-.17-1.805-.255-1.964-.267-.257-.02-.165-.016-.423-.014-.159 0-.34.014-.702.04l-2.153.153c-.857.062-1.286.092-1.607-.06a1.35 1.35 0 01-.641-.641c-.152-.32-.122-.75-.06-1.607l.153-2.153c.026-.362.04-.543.04-.702.002-.258.006-.166-.014-.423-.012-.159-.098-.76-.268-1.964A9 9 0 1121.5 12z" />
+		</svg>
+	);
 }
--- a/packages/icons/src/repost.tsx
+++ b/packages/icons/src/repost.tsx
@ -1,18 +1,18 @@
-export function RepostIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M12 2a15.267 15.267 0 0 1 2.92 2.777c.054.066.08.145.08.225M12 8a15.266 15.266 0 0 0 2.92-2.777.356.356 0 0 0 .08-.221M12 16a15.264 15.264 0 0 0-2.92 2.777.356.356 0 0 0-.08.221M12 22a15.264 15.264 0 0 1-2.92-2.777.355.355 0 0 1-.08-.225m6-13.996C14.7 5 14.368 5 14 5h-4c-1.861 0-2.792 0-3.545.245a5 5 0 0 0-3.21 3.21C3 9.208 3 10.139 3 12s0 2.792.245 3.545A5 5 0 0 0 5 18m4 .998c.3.002.632.002 1 .002h4c1.861 0 2.792 0 3.545-.245a5 5 0 0 0 3.21-3.21C21 14.792 21 13.861 21 12s0-2.792-.245-3.545A5 5 0 0 0 19 6" />
-    </svg>
-  );
+export function RepostIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M12 2a15.267 15.267 0 012.92 2.777c.054.066.08.145.08.225M12 8a15.266 15.266 0 002.92-2.777.356.356 0 00.08-.221M12 16a15.264 15.264 0 00-2.92 2.777.356.356 0 00-.08.221M12 22a15.264 15.264 0 01-2.92-2.777.355.355 0 01-.08-.225m6-13.996C14.7 5 14.368 5 14 5h-4c-1.861 0-2.792 0-3.545.245a5 5 0 00-3.21 3.21C3 9.208 3 10.139 3 12s0 2.792.245 3.545A5 5 0 005 18m4 .998c.3.002.632.002 1 .002h4c1.861 0 2.792 0 3.545-.245a5 5 0 003.21-3.21C21 14.792 21 13.861 21 12s0-2.792-.245-3.545A5 5 0 0019 6" />
+		</svg>
+	);
 }
--- a/packages/icons/src/zap.tsx
+++ b/packages/icons/src/zap.tsx
@ -1,18 +1,18 @@
-export function ZapIcon(props: JSX.IntrinsicElements['svg']) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="m6.054 8.38 5.756-4.513c1.638-1.284 2.457-1.926 3.018-1.863.485.055.912.366 1.136.828.26.533-.003 1.58-.53 3.673l-.44 1.753c-.211.838-.316 1.257-.244 1.62.064.32.221.611.45.83.259.249.652.361 1.438.585l.51.146c1.512.432 2.268.648 2.57 1.087.264.382.348.872.23 1.328-.137.526-.772 1.014-2.041 1.99l-5.652 4.342c-1.628 1.25-2.442 1.876-3 1.81a1.458 1.458 0 0 1-1.129-.831c-.257-.532.003-1.565.522-3.63l.394-1.568c.211-.838.316-1.257.244-1.621a1.575 1.575 0 0 0-.45-.83c-.259-.248-.652-.36-1.438-.585l-.568-.162c-1.496-.427-2.244-.64-2.546-1.077a1.631 1.631 0 0 1-.234-1.322c.132-.524.756-1.013 2.004-1.99Z" />
-    </svg>
-  );
+export function ZapIcon(props: JSX.IntrinsicElements["svg"]) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			strokeWidth="2"
+		>
+			<path d="M6.054 8.38l5.756-4.513c1.638-1.284 2.457-1.926 3.018-1.863.485.055.912.366 1.136.828.26.533-.003 1.58-.53 3.673l-.44 1.753c-.211.838-.316 1.257-.244 1.62.064.32.221.611.45.83.259.249.652.361 1.438.585l.51.146c1.512.432 2.268.648 2.57 1.087.264.382.348.872.23 1.328-.137.526-.772 1.014-2.041 1.99l-5.652 4.342c-1.628 1.25-2.442 1.876-3 1.81a1.458 1.458 0 01-1.129-.831c-.257-.532.003-1.565.522-3.63l.394-1.568c.211-.838.316-1.257.244-1.621a1.575 1.575 0 00-.45-.83c-.259-.248-.652-.36-1.438-.585l-.568-.162c-1.496-.427-2.244-.64-2.546-1.077a1.631 1.631 0 01-.234-1.322c.132-.524.756-1.013 2.004-1.99z" />
+		</svg>
+	);
 }
--- a/packages/ui/src/layouts/auth.tsx
+++ b/packages/ui/src/layouts/auth.tsx
@ -1,10 +1,16 @@
+import { cn } from "@lume/utils";
 import { type Platform } from "@tauri-apps/plugin-os";
 import { Outlet, ScrollRestoration } from "react-router-dom";
 import { WindowTitleBar } from "../titlebar";

 export function AuthLayout({ platform }: { platform: Platform }) {
 	return (
-		<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
+		<div
+			className={cn(
+				"flex h-screen w-screen flex-col",
+				platform !== "macos" ? "bg-neutral-50 dark:bg-neutral-950" : "",
+			)}
+		>
 			{platform !== "macos" ? (
 				<WindowTitleBar platform={platform} />
 			) : (
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@ -5,5 +5,4 @@ export * from "./src/nip94";
 export * from "./src/notification";
 export * from "./src/hooks/useNetworkStatus";
 export * from "./src/hooks/useOpenGraph";
-export * from "../ark/src/hooks/useRelay";
-export * from "../ark/src/hooks/useSuggestion";
+export * from "./src/cn";
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -11,9 +11,11 @@
    "@tanstack/react-query": "^5.14.2",
    "@tauri-apps/api": "2.0.0-alpha.11",
    "@tauri-apps/plugin-notification": "2.0.0-alpha.3",
+    "clsx": "^2.0.0",
    "dayjs": "^1.11.10",
    "nostr-tools": "1.17.0",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "tailwind-merge": "^1.14.0"
  },
  "devDependencies": {
    "@lume/tsconfig": "workspace:^",
--- a/packages/utils/src/cn.ts
+++ b/packages/utils/src/cn.ts
@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -431,22 +431,25 @@ importers:
        version: 0.14.1(@nostr-dev-kit/ndk@2.3.1)(nostr-fetch@0.14.1)
      '@radix-ui/react-avatar':
        specifier: ^1.0.4
-        version: 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
      '@radix-ui/react-collapsible':
        specifier: ^1.0.3
-        version: 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
      '@radix-ui/react-dialog':
        specifier: ^1.0.5
-        version: 1.0.5(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
      '@radix-ui/react-dropdown-menu':
        specifier: ^2.0.6
-        version: 2.0.6(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+        version: 2.0.6(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.0.7
+        version: 1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
      '@radix-ui/react-popover':
        specifier: ^1.0.7
-        version: 1.0.7(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
      '@radix-ui/react-tooltip':
        specifier: ^1.0.7
-        version: 1.0.7(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
      '@tanstack/react-query':
        specifier: ^5.14.2
        version: 5.14.2(react@18.2.0)
@ -744,6 +747,9 @@ importers:
      '@tauri-apps/plugin-notification':
        specifier: 2.0.0-alpha.3
        version: 2.0.0-alpha.3
+      clsx:
+        specifier: ^2.0.0
+        version: 2.0.0
      dayjs:
        specifier: ^1.11.10
        version: 1.11.10
@ -753,6 +759,9 @@ importers:
      react:
        specifier: ^18.2.0
        version: 18.2.0
+      tailwind-merge:
+        specifier: ^1.14.0
+        version: 1.14.0
    devDependencies:
      '@lume/tsconfig':
        specifier: workspace:^
@ -1325,26 +1334,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-arrow@1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
    peerDependencies:
@ -1369,29 +1358,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-avatar@1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
    peerDependencies:
@ -1420,33 +1386,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-collapsible@1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
    peerDependencies:
@ -1471,29 +1410,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-collection@1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.45)(react@18.2.0):
    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
    peerDependencies:
@ -1556,39 +1472,6 @@ packages:
      react-remove-scroll: 2.5.5(@types/react@18.2.45)(react@18.2.0)
    dev: false

-  /@radix-ui/react-dialog@1.0.5(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.45)(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-direction@1.0.1(@types/react@18.2.45)(react@18.2.0):
    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
    peerDependencies:
@ -1628,30 +1511,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-dismissable-layer@1.0.5(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
    peerDependencies:
@ -1679,32 +1538,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-dropdown-menu@2.0.6(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.6(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.45)(react@18.2.0):
    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
    peerDependencies:
@ -1742,28 +1575,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-focus-scope@1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-hover-card@1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==}
    peerDependencies:
@ -1846,43 +1657,6 @@ packages:
      react-remove-scroll: 2.5.5(@types/react@18.2.45)(react@18.2.0)
    dev: false

-  /@radix-ui/react-menu@2.0.6(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.45)(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
    peerDependencies:
@ -1918,40 +1692,6 @@ packages:
      react-remove-scroll: 2.5.5(@types/react@18.2.45)(react@18.2.0)
    dev: false

-  /@radix-ui/react-popover@1.0.7(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.45)(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
    peerDependencies:
@ -1982,35 +1722,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-popper@1.1.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@floating-ui/react-dom': 2.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-arrow': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/rect': 1.0.1
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
    peerDependencies:
@ -2032,26 +1743,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-portal@1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
    peerDependencies:
@ -2074,27 +1765,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-presence@1.0.1(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
    peerDependencies:
@ -2116,26 +1786,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-primitive@1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
    peerDependencies:
@ -2165,34 +1815,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-roving-focus@1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
    peerDependencies:
@ -2365,37 +1987,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-tooltip@1.0.7(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.45)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.45)(react@18.2.0):
    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
    peerDependencies:
@ -2519,26 +2110,6 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

-  /@radix-ui/react-visually-hidden@1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.6
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.45
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /@radix-ui/rect@1.0.1:
    resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
    dependencies:
@ -5887,7 +5458,6 @@ packages:

  /tailwind-merge@1.14.0:
    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
-    dev: true

  /tailwind-scrollbar@3.0.5(tailwindcss@3.4.0):
    resolution: {integrity: sha512-0ZwxTivevqq9BY9fRP9zDjHl7Tu+J5giBGbln+0O1R/7nHtBUKnjQcA1aTIhK7Oyjp6Uc/Dj6/dn8Dq58k5Uww==}