fix: context issue in production (#187)

2024-05-13 15:18:23 +07:00
parent 135d0918b3
commit cf70b0f882
73 changed files with 671 additions and 949 deletions
--- a/apps/desktop2/src/app.tsx
+++ b/apps/desktop2/src/app.tsx
@@ -1,5 +1,4 @@
 import { Ark } from "@lume/ark";
-import { CancelCircleIcon, CheckCircleIcon, InfoCircleIcon } from "@lume/icons";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { QueryClient } from "@tanstack/react-query";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
@@ -8,7 +7,6 @@ import { platform } from "@tauri-apps/plugin-os";
 import React, { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
-import { Toaster } from "sonner";
 import "./app.css";
 import i18n from "./locale";
 import { routeTree } from "./router.gen"; // auto generated file
@@ -29,6 +27,18 @@ const router = createRouter({
 		queryClient,
 		platform: platformName,
 	},
+	Wrap: ({ children }) => {
+		return (
+			<I18nextProvider i18n={i18n} defaultNS={"translation"}>
+				<PersistQueryClientProvider
+					client={queryClient}
+					persistOptions={{ persister }}
+				>
+					{children}
+				</PersistQueryClientProvider>
+			</I18nextProvider>
+		);
+	},
 });

 // Register things for typesafety
@@ -48,25 +58,8 @@ const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
 	const root = ReactDOM.createRoot(rootElement);
 	root.render(
-		<I18nextProvider i18n={i18n} defaultNS={"translation"}>
-			<PersistQueryClientProvider
-				client={queryClient}
-				persistOptions={{ persister }}
-			>
-				<StrictMode>
-					<Toaster
-						position="bottom-right"
-						icons={{
-							success: <CheckCircleIcon className="size-5" />,
-							info: <InfoCircleIcon className="size-5" />,
-							error: <CancelCircleIcon className="size-5" />,
-						}}
-						closeButton
-						theme="system"
-					/>
-					<App />
-				</StrictMode>
-			</PersistQueryClientProvider>
-		</I18nextProvider>,
+		<StrictMode>
+			<App />
+		</StrictMode>,
 	);
 }
--- a/apps/desktop2/src/components/balance.tsx
+++ b/apps/desktop2/src/components/balance.tsx
@@ -1,4 +1,4 @@
-import { User } from "@lume/ui";
+import { User } from "./user";
 import { getBitcoinDisplayValues } from "@lume/utils";
 import { useRouteContext } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";
--- a/apps/desktop2/src/components/conversation.tsx
+++ b/apps/desktop2/src/components/conversation.tsx
@@ -1,6 +1,6 @@
 import { ThreadIcon } from "@lume/icons";
 import type { Event } from "@lume/types";
-import { Note } from "@lume/ui";
+import { Note } from "./note";
 import { cn } from "@lume/utils";
 import { useRouteContext } from "@tanstack/react-router";

--- a/apps/desktop2/src/components/note/activity.tsx
+++ b/apps/desktop2/src/components/note/activity.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@lume/utils";
+import { useNoteContext } from "./provider";
+import { User } from "../user";
+
+export function NoteActivity({ className }: { className?: string }) {
+	const event = useNoteContext();
+	const mentions = event.tags
+		.filter((tag) => tag[0] === "p")
+		.map((tag) => tag[1]);
+
+	return (
+		<div className={cn("-mt-3 mb-2", className)}>
+			<div className="text-neutral-700 dark:text-neutral-300 inline-flex items-baseline gap-2 w-full overflow-hidden">
+				<div className="shrink-0 text-sm font-medium">To:</div>
+				{mentions.splice(0, 4).map((mention) => (
+					<User.Provider key={mention} pubkey={mention}>
+						<User.Root>
+							<User.Name className="text-sm font-medium" prefix="@" />
+						</User.Root>
+					</User.Provider>
+				))}
+				{mentions.length > 4 ? "..." : ""}
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/note/buttons/open.tsx
+++ b/apps/desktop2/src/components/note/buttons/open.tsx
@@ -0,0 +1,31 @@
+import { VisitIcon } from "@lume/icons";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useRouteContext } from "@tanstack/react-router";
+import { useNoteContext } from "../provider";
+
+export function NoteOpenThread() {
+	const event = useNoteContext();
+	const { ark } = useRouteContext({ strict: false });
+
+	return (
+		<Tooltip.Provider>
+			<Tooltip.Root delayDuration={150}>
+				<Tooltip.Trigger asChild>
+					<button
+						type="button"
+						onClick={() => ark.open_event(event)}
+						className="group inline-flex h-7 w-14 bg-neutral-100 dark:bg-white/10 rounded-full items-center justify-center text-sm font-medium text-neutral-800 dark:text-neutral-200 hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
+					>
+						<VisitIcon className="shrink-0 size-4" />
+					</button>
+				</Tooltip.Trigger>
+				<Tooltip.Portal>
+					<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 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">
+						Open
+						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	);
+}
--- a/apps/desktop2/src/components/note/buttons/reply.tsx
+++ b/apps/desktop2/src/components/note/buttons/reply.tsx
@@ -0,0 +1,38 @@
+import { ReplyIcon } from "@lume/icons";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useRouteContext } from "@tanstack/react-router";
+import { useNoteContext } from "../provider";
+import { cn } from "@lume/utils";
+
+export function NoteReply({ large = false }: { large?: boolean }) {
+	const event = useNoteContext();
+	const { ark } = useRouteContext({ strict: false });
+
+	return (
+		<Tooltip.Provider>
+			<Tooltip.Root delayDuration={150}>
+				<Tooltip.Trigger asChild>
+					<button
+						type="button"
+						onClick={() => ark.open_editor(event.id)}
+						className={cn(
+							"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
+							large
+								? "rounded-full bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
+								: "size-7",
+						)}
+					>
+						<ReplyIcon className="shrink-0 size-4" />
+						{large ? "Reply" : null}
+					</button>
+				</Tooltip.Trigger>
+				<Tooltip.Portal>
+					<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 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-50 dark:text-neutral-950">
+						Reply
+						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	);
+}
--- a/apps/desktop2/src/components/note/buttons/repost.tsx
+++ b/apps/desktop2/src/components/note/buttons/repost.tsx
@@ -0,0 +1,101 @@
+import { QuoteIcon, RepostIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useRouteContext } from "@tanstack/react-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { Spinner } from "@lume/ui";
+import { useNoteContext } from "../provider";
+
+export function NoteRepost({ large = false }: { large?: boolean }) {
+	const { ark } = useRouteContext({ strict: false });
+	const event = useNoteContext();
+
+	const [t] = useTranslation();
+	const [loading, setLoading] = useState(false);
+	const [isRepost, setIsRepost] = useState(false);
+
+	const repost = async () => {
+		try {
+			if (isRepost) return;
+			setLoading(true);
+
+			// repost
+			await ark.repost(event.id, event.pubkey);
+
+			// update state
+			setLoading(false);
+			setIsRepost(true);
+
+			// notify
+			toast.success("You've reposted this post successfully");
+		} catch (e) {
+			setLoading(false);
+			toast.error("Repost failed, try again later");
+		}
+	};
+
+	return (
+		<DropdownMenu.Root>
+			<Tooltip.Provider>
+				<Tooltip.Root delayDuration={150}>
+					<DropdownMenu.Trigger asChild>
+						<Tooltip.Trigger asChild>
+							<button
+								type="button"
+								className={cn(
+									"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200 rounded-full",
+									large
+										? "bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
+										: "size-7",
+								)}
+							>
+								{loading ? (
+									<Spinner className="size-4" />
+								) : (
+									<RepostIcon
+										className={cn("size-4", isRepost ? "text-blue-500" : "")}
+									/>
+								)}
+								{large ? "Repost" : null}
+							</button>
+						</Tooltip.Trigger>
+					</DropdownMenu.Trigger>
+					<Tooltip.Portal>
+						<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 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-50 dark:text-neutral-950">
+							{t("note.buttons.repost")}
+							<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+						</Tooltip.Content>
+					</Tooltip.Portal>
+				</Tooltip.Root>
+			</Tooltip.Provider>
+			<DropdownMenu.Portal>
+				<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl bg-black p-1 shadow-md shadow-neutral-500/20 focus:outline-none dark:bg-white">
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => repost()}
+							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+						>
+							<RepostIcon className="size-4" />
+							{t("note.buttons.repost")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => ark.open_editor(event.id, true)}
+							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+						>
+							<QuoteIcon className="size-4" />
+							{t("note.buttons.quote")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Arrow className="fill-black dark:fill-white" />
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	);
+}
--- a/apps/desktop2/src/components/note/buttons/zap.tsx
+++ b/apps/desktop2/src/components/note/buttons/zap.tsx
@@ -0,0 +1,42 @@
+import { ZapIcon } from "@lume/icons";
+import { useRouteContext, useSearch } from "@tanstack/react-router";
+import { toast } from "sonner";
+import { useNoteContext } from "../provider";
+import { cn } from "@lume/utils";
+
+export function NoteZap({ large = false }: { large?: boolean }) {
+	const event = useNoteContext();
+	const { ark, settings } = useRouteContext({ strict: false });
+	const { account } = useSearch({ strict: false });
+
+	const zap = async () => {
+		try {
+			const nwc = await ark.load_nwc();
+			if (!nwc) {
+				ark.open_nwc();
+			} else {
+				ark.open_zap(event.id, event.pubkey, account);
+			}
+		} catch (e) {
+			toast.error(String(e));
+		}
+	};
+
+	if (!settings.zap) return null;
+
+	return (
+		<button
+			type="button"
+			onClick={() => zap()}
+			className={cn(
+				"inline-flex items-center justify-center text-neutral-800 dark:text-neutral-200",
+				large
+					? "rounded-full bg-neutral-100 dark:bg-white/10 h-7 gap-1.5 w-24 text-sm font-medium hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
+					: "size-7",
+			)}
+		>
+			<ZapIcon className="size-4" />
+			{large ? "Zap" : null}
+		</button>
+	);
+}
--- a/apps/desktop2/src/components/note/child.tsx
+++ b/apps/desktop2/src/components/note/child.tsx
@@ -0,0 +1,32 @@
+import { useEvent } from "@lume/ark";
+import { cn } from "@lume/utils";
+import { Note } from ".";
+
+export function NoteChild({
+	eventId,
+	isRoot,
+}: {
+	eventId: string;
+	isRoot?: boolean;
+}) {
+	const { isLoading, isError, data } = useEvent(eventId);
+
+	if (isLoading) {
+		return <div>Loading...</div>;
+	}
+
+	if (isError || !data) {
+		return <div>Error</div>;
+	}
+
+	return (
+		<Note.Provider event={data}>
+			<Note.Root className={cn(isRoot ? "mb-3" : "")}>
+				<div className="h-14 px-3 flex items-center justify-between">
+					<Note.User />
+				</div>
+				<Note.Content className="px-3" />
+			</Note.Root>
+		</Note.Provider>
+	);
+}
--- a/apps/desktop2/src/components/note/content.tsx
+++ b/apps/desktop2/src/components/note/content.tsx
@@ -0,0 +1,116 @@
+import { NOSTR_EVENTS, NOSTR_MENTIONS, cn, parser } from "@lume/utils";
+import { type ReactNode, useMemo } from "react";
+import reactStringReplace from "react-string-replace";
+import { Hashtag } from "./mentions/hashtag";
+import { MentionNote } from "./mentions/note";
+import { MentionUser } from "./mentions/user";
+import { Images } from "./preview/images";
+import { Videos } from "./preview/videos";
+import { useNoteContext } from "./provider";
+import { nanoid } from "nanoid";
+
+export function NoteContent({
+	quote = true,
+	mention = true,
+	clean,
+	className,
+}: {
+	quote?: boolean;
+	mention?: boolean;
+	clean?: boolean;
+	className?: string;
+}) {
+	const event = useNoteContext();
+	const data = useMemo(() => {
+		const { content, images, videos } = parser(event.content);
+		const words = content.split(/( |\n)/);
+		const hashtags = words.filter((word) => word.startsWith("#"));
+		const events = words.filter((word) =>
+			NOSTR_EVENTS.some((el) => word.startsWith(el)),
+		);
+		const mentions = words.filter((word) =>
+			NOSTR_MENTIONS.some((el) => word.startsWith(el)),
+		);
+
+		let richContent: ReactNode[] | string = content;
+
+		try {
+			if (hashtags.length) {
+				for (const hashtag of hashtags) {
+					const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
+					richContent = reactStringReplace(richContent, regex, (_, index) => {
+						return <Hashtag key={hashtag + index} tag={hashtag} />;
+					});
+				}
+			}
+
+			if (events.length) {
+				for (const event of events) {
+					if (quote) {
+						richContent = reactStringReplace(richContent, event, (_, index) => (
+							<MentionNote key={event + index} eventId={event} />
+						));
+					}
+
+					if (!quote && clean) {
+						richContent = reactStringReplace(richContent, event, () => null);
+					}
+				}
+			}
+
+			if (mentions.length) {
+				for (const user of mentions) {
+					if (mention) {
+						richContent = reactStringReplace(richContent, user, (_, index) => (
+							<MentionUser key={user + index} pubkey={user} />
+						));
+					}
+
+					if (!mention && clean) {
+						richContent = reactStringReplace(richContent, user, () => null);
+					}
+				}
+			}
+
+			richContent = reactStringReplace(
+				richContent,
+				/(https?:\/\/\S+)/gi,
+				(match, index) => (
+					<a
+						key={match + index}
+						href={match}
+						target="_blank"
+						rel="noreferrer"
+						className="line-clamp-1 text-blue-500 hover:text-blue-600"
+					>
+						{match}
+					</a>
+				),
+			);
+
+			richContent = reactStringReplace(richContent, /(\r\n|\r|\n)+/g, () => (
+				<div key={nanoid()} className="h-3" />
+			));
+
+			return { content: richContent, images, videos };
+		} catch (e) {
+			return { content, images, videos };
+		}
+	}, []);
+
+	return (
+		<div className="flex flex-col gap-2">
+			<div
+				className={cn(
+					"select-text text-[15px] text-balance break-words overflow-hidden",
+					event.content.length > 500 ? "max-h-[300px] gradient-mask-b-0" : "",
+					className,
+				)}
+			>
+				{data.content}
+			</div>
+			{data.images.length ? <Images urls={data.images} /> : null}
+			{data.videos.length ? <Videos urls={data.videos} /> : null}
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/note/contentLarge.tsx
+++ b/apps/desktop2/src/components/note/contentLarge.tsx
@@ -0,0 +1,153 @@
+import type { Settings } from "@lume/types";
+import {
+	AUDIOS,
+	IMAGES,
+	NOSTR_EVENTS,
+	NOSTR_MENTIONS,
+	VIDEOS,
+	cn,
+} from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+import { nanoid } from "nanoid";
+import { type ReactNode, useMemo } from "react";
+import reactStringReplace from "react-string-replace";
+import { Hashtag } from "./mentions/hashtag";
+import { MentionNote } from "./mentions/note";
+import { MentionUser } from "./mentions/user";
+import { ImagePreview } from "./preview/image";
+import { VideoPreview } from "./preview/video";
+import { useNoteContext } from "./provider";
+
+export function NoteContentLarge({
+	compact = true,
+	className,
+}: {
+	compact?: boolean;
+	className?: string;
+}) {
+	const { settings }: { settings: Settings } = useRouteContext({
+		strict: false,
+	});
+	const event = useNoteContext();
+	const content = useMemo(() => {
+		const text = event.content.trim();
+		const words = text.split(/( |\n)/);
+
+		// @ts-ignore, kaboom !!!
+		let parsedContent: ReactNode[] = compact
+			? text.replace(/\n\s*\n/g, "\n")
+			: text;
+
+		const hashtags = words.filter((word) => word.startsWith("#"));
+		const events = words.filter((word) =>
+			NOSTR_EVENTS.some((el) => word.startsWith(el)),
+		);
+		const mentions = words.filter((word) =>
+			NOSTR_MENTIONS.some((el) => word.startsWith(el)),
+		);
+
+		try {
+			if (hashtags.length) {
+				for (const hashtag of hashtags) {
+					const regex = new RegExp(`(|^)${hashtag}\\b`, "g");
+					parsedContent = reactStringReplace(parsedContent, regex, () => {
+						return <Hashtag key={nanoid()} tag={hashtag} />;
+					});
+				}
+			}
+
+			if (events.length) {
+				for (const event of events) {
+					parsedContent = reactStringReplace(
+						parsedContent,
+						event,
+						(match, i) => <MentionNote key={match + i} eventId={event} />,
+					);
+				}
+			}
+
+			if (mentions.length) {
+				for (const mention of mentions) {
+					parsedContent = reactStringReplace(
+						parsedContent,
+						mention,
+						(match, i) => <MentionUser key={match + i} pubkey={mention} />,
+					);
+				}
+			}
+
+			parsedContent = reactStringReplace(
+				parsedContent,
+				/(https?:\/\/\S+)/gi,
+				(match, i) => {
+					try {
+						const url = new URL(match);
+						const ext = url.pathname.split(".")[1];
+
+						if (!settings.enhancedPrivacy) {
+							if (IMAGES.includes(ext)) {
+								return <ImagePreview key={match + i} url={url.toString()} />;
+							}
+
+							if (VIDEOS.includes(ext)) {
+								return <VideoPreview key={match + i} url={url.toString()} />;
+							}
+
+							if (AUDIOS.includes(ext)) {
+								return <VideoPreview key={match + i} url={url.toString()} />;
+							}
+						}
+
+						return (
+							<a
+								key={match + i}
+								href={match}
+								target="_blank"
+								rel="noreferrer"
+								className="content-break w-full font-normal text-blue-500 hover:text-blue-600"
+							>
+								{match}
+							</a>
+						);
+					} catch {
+						return (
+							<a
+								key={match + i}
+								href={match}
+								target="_blank"
+								rel="noreferrer"
+								className="content-break w-full font-normal text-blue-500 hover:text-blue-600"
+							>
+								{match}
+							</a>
+						);
+					}
+				},
+			);
+
+			if (compact) {
+				parsedContent = reactStringReplace(parsedContent, /\n*\n/g, () => (
+					<div key={nanoid()} className="h-1.5" />
+				));
+			}
+
+			parsedContent = reactStringReplace(
+				parsedContent,
+				/[\r]?\n[\r]?\n/g,
+				(_, index) => <br key={event.id + "_br_" + index} />,
+			);
+
+			return parsedContent;
+		} catch (e) {
+			return text;
+		}
+	}, []);
+
+	return (
+		<div className={cn("select-text", className)}>
+			<div className="text-[15px] text-balance content-break leading-normal">
+				{content}
+			</div>
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/note/index.ts
+++ b/apps/desktop2/src/components/note/index.ts
@@ -0,0 +1,27 @@
+import { NoteActivity } from "./activity";
+import { NoteOpenThread } from "./buttons/open";
+import { NoteReply } from "./buttons/reply";
+import { NoteRepost } from "./buttons/repost";
+import { NoteZap } from "./buttons/zap";
+import { NoteChild } from "./child";
+import { NoteContent } from "./content";
+import { NoteContentLarge } from "./contentLarge";
+import { NoteMenu } from "./menu";
+import { NoteProvider } from "./provider";
+import { NoteRoot } from "./root";
+import { NoteUser } from "./user";
+
+export const Note = {
+	Provider: NoteProvider,
+	Root: NoteRoot,
+	User: NoteUser,
+	Menu: NoteMenu,
+	Reply: NoteReply,
+	Repost: NoteRepost,
+	Content: NoteContent,
+	ContentLarge: NoteContentLarge,
+	Zap: NoteZap,
+	Open: NoteOpenThread,
+	Child: NoteChild,
+	Activity: NoteActivity,
+};
--- a/apps/desktop2/src/components/note/mentions/hashtag.tsx
+++ b/apps/desktop2/src/components/note/mentions/hashtag.tsx
@@ -0,0 +1,13 @@
+export function Hashtag({ tag }: { tag: string }) {
+	return (
+		<button
+			type="button"
+			className="break-all cursor-default leading-normal group"
+		>
+			<span className="text-blue-500">#</span>
+			<span className="underline-offset-1 underline decoration-2 decoration-blue-200 dark:decoration-blue-800 group-hover:decoration-blue-500">
+				{tag.replace("#", "")}
+			</span>
+		</button>
+	);
+}
--- a/apps/desktop2/src/components/note/mentions/note.tsx
+++ b/apps/desktop2/src/components/note/mentions/note.tsx
@@ -0,0 +1,77 @@
+import { useEvent } from "@lume/ark";
+import { LinkIcon } from "@lume/icons";
+import { useRouteContext } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { cn } from "@lume/utils";
+import { User } from "@/components/user";
+
+export function MentionNote({
+	eventId,
+	openable = true,
+}: {
+	eventId: string;
+	openable?: boolean;
+}) {
+	const { ark } = useRouteContext({ strict: false });
+	const { t } = useTranslation();
+	const { isLoading, isError, data } = useEvent(eventId);
+
+	if (isLoading) {
+		return (
+			<div className="flex w-full cursor-default items-center justify-between rounded-xl border border-black/10 p-3 dark:border-white/10">
+				<p>Loading...</p>
+			</div>
+		);
+	}
+
+	if (isError || !data) {
+		return (
+			<div className="w-full cursor-default rounded-xl border border-black/10 p-3 dark:border-white/10">
+				{t("note.error")}
+			</div>
+		);
+	}
+
+	return (
+		<div className="mt-2 flex w-full cursor-default flex-col rounded-xl border border-black/10 dark:border-white/10">
+			<User.Provider pubkey={data.pubkey}>
+				<User.Root className="flex h-12 items-center gap-2 px-3">
+					<User.Avatar className="size-6 shrink-0 rounded-full object-cover" />
+					<div className="inline-flex flex-1 items-center gap-2">
+						<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
+						<span className="text-neutral-600 dark:text-neutral-400">·</span>
+						<User.Time
+							time={data.created_at}
+							className="text-neutral-600 dark:text-neutral-400"
+						/>
+					</div>
+				</User.Root>
+			</User.Provider>
+			<div
+				className={cn(
+					"px-3 select-text content-break whitespace-normal text-balance leading-normal",
+					data.content.length > 100 ? "max-h-[150px] gradient-mask-b-0" : "",
+				)}
+			>
+				{data.content}
+			</div>
+			{openable ? (
+				<div className="flex h-14 items-center justify-end px-3">
+					<button
+						type="button"
+						onClick={(e) => {
+							e.stopPropagation();
+							ark.open_event_id(data.id);
+						}}
+						className="z-10 h-7 w-28 inline-flex items-center justify-center gap-1 text-sm bg-neutral-100 dark:bg-white/10 rounded-full text-neutral-600 hover:text-blue-500 dark:text-neutral-400"
+					>
+						View post
+						<LinkIcon className="size-4" />
+					</button>
+				</div>
+			) : (
+				<div className="h-3" />
+			)}
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/note/mentions/user.tsx
+++ b/apps/desktop2/src/components/note/mentions/user.tsx
@@ -0,0 +1,24 @@
+import { useProfile } from "@lume/ark";
+import { displayNpub } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+
+export function MentionUser({ pubkey }: { pubkey: string }) {
+	const { ark } = useRouteContext({ strict: false });
+	const { isLoading, isError, profile } = useProfile(pubkey);
+
+	return (
+		<button
+			type="button"
+			onClick={() => ark.open_profile(pubkey)}
+			className="break-words text-start text-blue-500 hover:text-blue-600"
+		>
+			{isLoading
+				? "@anon"
+				: isError
+					? displayNpub(pubkey, 16)
+					: `@${
+							profile?.name || profile?.display_name || profile?.name || "anon"
+						}`}
+		</button>
+	);
+}
--- a/apps/desktop2/src/components/note/menu.tsx
+++ b/apps/desktop2/src/components/note/menu.tsx
@@ -0,0 +1,108 @@
+import { HorizontalDotsIcon } from "@lume/icons";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { useRouteContext } from "@tanstack/react-router";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useNoteContext } from "./provider";
+
+export function NoteMenu() {
+	const event = useNoteContext();
+
+	const { ark } = useRouteContext({ strict: false });
+	const { t } = useTranslation();
+
+	const copyID = async () => {
+		await writeText(await ark.event_to_bech32(event.id, [""]));
+		toast.success("Copied");
+	};
+
+	const copyRaw = async () => {
+		await writeText(JSON.stringify(event));
+		toast.success("Copied");
+	};
+
+	const copyNpub = async () => {
+		await writeText(await ark.user_to_bech32(event.pubkey, [""]));
+		toast.success("Copied");
+	};
+
+	const copyLink = async () => {
+		await writeText(
+			`https://njump.me/${await ark.event_to_bech32(event.id, [""])}`,
+		);
+		toast.success("Copied");
+	};
+
+	return (
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger asChild>
+				<button
+					type="button"
+					className="group inline-flex size-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
+				>
+					<HorizontalDotsIcon className="size-5" />
+				</button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Portal>
+				<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl bg-black p-1 shadow-md shadow-neutral-500/20 focus:outline-none dark:bg-white">
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => ark.open_event(event)}
+							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+						>
+							{t("note.menu.viewThread")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => copyLink()}
+							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+						>
+							{t("note.menu.copyLink")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => copyID()}
+							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+						>
+							{t("note.menu.copyNoteId")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => copyNpub()}
+							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+						>
+							{t("note.menu.copyAuthorId")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							onClick={() => ark.open_profile(event.pubkey)}
+							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+						>
+							{t("note.menu.viewAuthor")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Separator className="my-1 h-px bg-neutral-900 dark:bg-neutral-100" />
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => copyRaw()}
+							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+						>
+							{t("note.menu.copyRaw")}
+						</button>
+					</DropdownMenu.Item>
+					<DropdownMenu.Arrow className="fill-black dark:fill-white" />
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	);
+}
--- a/apps/desktop2/src/components/note/preview/image.tsx
+++ b/apps/desktop2/src/components/note/preview/image.tsx
@@ -0,0 +1,61 @@
+import { CheckCircleIcon, DownloadIcon } from "@lume/icons";
+import { downloadDir } from "@tauri-apps/api/path";
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { download } from "@tauri-apps/plugin-upload";
+import { type SyntheticEvent, useState } from "react";
+
+export function ImagePreview({ url }: { url: string }) {
+	const [downloaded, setDownloaded] = useState(false);
+
+	const downloadImage = async (e: { stopPropagation: () => void }) => {
+		try {
+			e.stopPropagation();
+
+			const downloadDirPath = await downloadDir();
+			const filename = url.substring(url.lastIndexOf("/") + 1);
+			await download(url, `${downloadDirPath}/${filename}`);
+
+			setDownloaded(true);
+		} catch (e) {
+			console.error(e);
+		}
+	};
+
+	const open = async () => {
+		const name = new URL(url).pathname.split("/").pop();
+		return new WebviewWindow("image-viewer", {
+			url,
+			title: name,
+		});
+	};
+
+	const fallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
+		event.currentTarget.src = "/fallback-image.jpg";
+	};
+
+	return (
+		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+		<div onClick={() => open()} className="group relative my-1">
+			<img
+				src={url}
+				alt={url}
+				loading="lazy"
+				decoding="async"
+				style={{ contentVisibility: "auto" }}
+				onError={fallback}
+				className="max-h-[600px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+			/>
+			<button
+				type="button"
+				onClick={(e) => downloadImage(e)}
+				className="absolute right-2 top-2 z-20 hidden size-8 items-center justify-center rounded-md bg-white/10 text-white/70 backdrop-blur-2xl hover:bg-blue-500 hover:text-white group-hover:inline-flex"
+			>
+				{downloaded ? (
+					<CheckCircleIcon className="size-4" />
+				) : (
+					<DownloadIcon className="size-4" />
+				)}
+			</button>
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/note/preview/images.tsx
+++ b/apps/desktop2/src/components/note/preview/images.tsx
@@ -0,0 +1,62 @@
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { Carousel, CarouselItem } from "@lume/ui";
+
+export function Images({ urls }: { urls: string[] }) {
+	const open = async (url: string) => {
+		const name = new URL(url).pathname
+			.split("/")
+			.pop()
+			.replace(/[^a-zA-Z ]/g, "");
+		const label = `viewer-${name}`;
+		const window = WebviewWindow.getByLabel(label);
+
+		if (!window) {
+			const newWindow = new WebviewWindow(label, {
+				url,
+				title: "Image Viewer",
+				width: 800,
+				height: 800,
+				titleBarStyle: "overlay",
+			});
+
+			return newWindow;
+		}
+
+		return await window.setFocus();
+	};
+
+	if (urls.length === 1) {
+		return (
+			<div className="group px-3">
+				<img
+					src={urls[0]}
+					alt={urls[0]}
+					loading="lazy"
+					decoding="async"
+					style={{ contentVisibility: "auto" }}
+					className="max-h-[400px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+					onClick={() => open(urls[0])}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<Carousel
+			items={urls}
+			renderItem={({ item, isSnapPoint }) => (
+				<CarouselItem key={item} isSnapPoint={isSnapPoint}>
+					<img
+						src={item}
+						alt={item}
+						loading="lazy"
+						decoding="async"
+						style={{ contentVisibility: "auto" }}
+						className="w-full h-full object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+						onClick={() => open(item)}
+					/>
+				</CarouselItem>
+			)}
+		/>
+	);
+}
--- a/apps/desktop2/src/components/note/preview/link.tsx
+++ b/apps/desktop2/src/components/note/preview/link.tsx
@@ -0,0 +1,87 @@
+import { useOpenGraph } from "@lume/utils";
+
+function isImage(url: string) {
+	return /^https?:\/\/.+\.(jpg|jpeg|png|webp|avif)$/.test(url);
+}
+
+export function LinkPreview({ url }: { url: string }) {
+	const domain = new URL(url);
+	const { isLoading, isError, data } = useOpenGraph(url);
+
+	if (isLoading) {
+		return (
+			<div className="my-1.5 flex w-full flex-col overflow-hidden rounded-2xl border border-black/10 p-3 dark:border-white/10">
+				<div className="h-48 w-full shrink-0 animate-pulse bg-neutral-300 dark:bg-neutral-700" />
+				<div className="flex flex-col gap-2 px-3 py-3">
+					<div className="h-3 w-2/3 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+					<div className="h-3 w-3/4 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+					<span className="mt-2.5 text-sm leading-none text-neutral-600 dark:text-neutral-400">
+						{domain.hostname}
+					</span>
+				</div>
+			</div>
+		);
+	}
+
+	if (!data.title && !data.image && !data.description) {
+		return (
+			<a
+				href={url}
+				target="_blank"
+				rel="noreferrer"
+				className="inline-block text-blue-500 hover:text-blue-600"
+			>
+				{url}
+			</a>
+		);
+	}
+
+	if (isError) {
+		return (
+			<a
+				href={url}
+				target="_blank"
+				rel="noreferrer"
+				className="inline-block text-blue-500 hover:text-blue-600"
+			>
+				{url}
+			</a>
+		);
+	}
+
+	return (
+		<a
+			href={url}
+			target="_blank"
+			rel="noreferrer"
+			className="my-1 flex w-full flex-col overflow-hidden rounded-2xl border border-black/10 dark:border-white/10"
+		>
+			{isImage(data.image) ? (
+				<img
+					src={data.image}
+					alt={url}
+					loading="lazy"
+					decoding="async"
+					className="h-48 w-full shrink-0 rounded-t-lg bg-white object-cover"
+				/>
+			) : null}
+			<div className="flex flex-col items-start p-3">
+				<div className="flex flex-col items-start text-left">
+					{data.title ? (
+						<div className="content-break line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
+							{data.title}
+						</div>
+					) : null}
+					{data.description ? (
+						<div className="content-break mb-2 line-clamp-3 text-balance text-sm text-neutral-700 dark:text-neutral-400">
+							{data.description}
+						</div>
+					) : null}
+				</div>
+				<div className="break-all text-sm font-semibold text-blue-500">
+					{domain.hostname}
+				</div>
+			</div>
+		</a>
+	);
+}
--- a/apps/desktop2/src/components/note/preview/video.tsx
+++ b/apps/desktop2/src/components/note/preview/video.tsx
@@ -0,0 +1,14 @@
+export function VideoPreview({ url }: { url: string }) {
+	return (
+		<div className="my-1 overflow-hidden rounded-xl">
+			<video
+				className="h-auto w-full bg-neutral-100 text-sm dark:bg-neutral-900"
+				controls
+				muted
+			>
+				<source src={url} type="video/mp4" />
+				Your browser does not support the video tag.
+			</video>
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/note/preview/videos.tsx
+++ b/apps/desktop2/src/components/note/preview/videos.tsx
@@ -0,0 +1,36 @@
+import { Carousel, CarouselItem } from "@lume/ui";
+
+export function Videos({ urls }: { urls: string[] }) {
+	if (urls.length === 1) {
+		return (
+			<div className="group px-3">
+				<video
+					className="w-full h-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+					controls
+					muted
+				>
+					<source src={urls[0]} type="video/mp4" />
+					Your browser does not support the video tag.
+				</video>
+			</div>
+		);
+	}
+
+	return (
+		<Carousel
+			items={urls}
+			renderItem={({ item, isSnapPoint }) => (
+				<CarouselItem key={item} isSnapPoint={isSnapPoint}>
+					<video
+						className="w-full h-full object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+						controls={false}
+						muted
+					>
+						<source src={item} type="video/mp4" />
+						Your browser does not support the video tag.
+					</video>
+				</CarouselItem>
+			)}
+		/>
+	);
+}
--- a/apps/desktop2/src/components/note/provider.tsx
+++ b/apps/desktop2/src/components/note/provider.tsx
@@ -0,0 +1,21 @@
+import type { Event } from "@lume/types";
+import { type ReactNode, createContext, useContext } from "react";
+
+const EventContext = createContext<Event>(null);
+
+export function NoteProvider({
+	event,
+	children,
+}: { event: Event; children: ReactNode }) {
+	return (
+		<EventContext.Provider value={event}>{children}</EventContext.Provider>
+	);
+}
+
+export function useNoteContext() {
+	const context = useContext(EventContext);
+	if (!context) {
+		throw new Error("Please import Note Provider to use useNoteContext() hook");
+	}
+	return context;
+}
--- a/apps/desktop2/src/components/note/root.tsx
+++ b/apps/desktop2/src/components/note/root.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@lume/utils";
+import type { ReactNode } from "react";
+
+export function NoteRoot({
+	children,
+	className,
+}: {
+	children: ReactNode;
+	className?: string;
+}) {
+	return (
+		<div className={cn("h-min w-full", className)} contentEditable={false}>
+			{children}
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/note/user.tsx
+++ b/apps/desktop2/src/components/note/user.tsx
@@ -0,0 +1,62 @@
+import { cn } from "@lume/utils";
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { useRouteContext } from "@tanstack/react-router";
+import { User } from "../user";
+import { useNoteContext } from "./provider";
+
+export function NoteUser({ className }: { className?: string }) {
+	const { ark } = useRouteContext({ strict: false });
+	const event = useNoteContext();
+
+	return (
+		<User.Provider pubkey={event.pubkey}>
+			<HoverCard.Root>
+				<User.Root
+					className={cn("flex items-start justify-between", className)}
+				>
+					<div className="flex w-full gap-2">
+						<HoverCard.Trigger className="shrink-0">
+							<User.Avatar className="size-8 rounded-full object-cover outline outline-1 -outline-offset-1 outline-black/15" />
+						</HoverCard.Trigger>
+						<div className="flex w-full items-center gap-3">
+							<div className="flex items-center gap-1">
+								<User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
+								<User.NIP05 />
+							</div>
+							<div className="text-neutral-600 dark:text-neutral-400">·</div>
+							<User.Time
+								time={event.created_at}
+								className="text-neutral-600 dark:text-neutral-400"
+							/>
+						</div>
+					</div>
+				</User.Root>
+				<HoverCard.Portal>
+					<HoverCard.Content
+						className="w-[300px] rounded-xl bg-black p-3 data-[side=bottom]:animate-slideUpAndFade data-[state=open]:transition-all dark:bg-white dark:shadow-none"
+						sideOffset={5}
+						side="right"
+					>
+						<div className="flex flex-col gap-2">
+							<User.Avatar className="size-11 rounded-lg object-cover" />
+							<div className="flex flex-col gap-2">
+								<div className="inline-flex items-center gap-1">
+									<User.Name className="font-semibold leading-tight text-white dark:text-neutral-900" />
+									<User.NIP05 />
+								</div>
+								<User.About className="line-clamp-3 text-sm text-white dark:text-neutral-900" />
+								<button
+									onClick={() => ark.open_profile(event.pubkey)}
+									className="mt-2 inline-flex h-9 w-full items-center justify-center rounded-lg bg-white text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200"
+								>
+									View profile
+								</button>
+							</div>
+						</div>
+						<HoverCard.Arrow className="fill-black dark:fill-white" />
+					</HoverCard.Content>
+				</HoverCard.Portal>
+			</HoverCard.Root>
+		</User.Provider>
+	);
+}
--- a/apps/desktop2/src/components/notification.tsx
+++ b/apps/desktop2/src/components/notification.tsx
@@ -1,5 +1,5 @@
 import type { Event } from "@lume/types";
-import { Note } from "@lume/ui";
+import { Note } from "./note";
 import { cn } from "@lume/utils";

 export function Notification({
--- a/apps/desktop2/src/components/quote.tsx
+++ b/apps/desktop2/src/components/quote.tsx
@@ -1,6 +1,6 @@
 import { QuoteIcon } from "@lume/icons";
 import type { Event } from "@lume/types";
-import { Note } from "@lume/ui";
+import { Note } from "./note";
 import { cn } from "@lume/utils";

 export function Quote({
--- a/apps/desktop2/src/components/repost.tsx
+++ b/apps/desktop2/src/components/repost.tsx
@@ -1,5 +1,7 @@
 import type { Event } from "@lume/types";
-import { Note, Spinner, User } from "@lume/ui";
+import { Spinner } from "@lume/ui";
+import { Note } from "./note";
+import { User } from "./user";
 import { cn } from "@lume/utils";
 import { useQuery } from "@tanstack/react-query";
 import { useRouteContext } from "@tanstack/react-router";
--- a/apps/desktop2/src/components/text.tsx
+++ b/apps/desktop2/src/components/text.tsx
@@ -1,6 +1,6 @@
 import type { Event } from "@lume/types";
-import { Note } from "@lume/ui";
 import { cn } from "@lume/utils";
+import { Note } from "./note";

 export function TextNote({
 	event,
--- a/apps/desktop2/src/components/user/about.tsx
+++ b/apps/desktop2/src/components/user/about.tsx
@@ -0,0 +1,12 @@
+import { cn } from "@lume/utils";
+import { useUserContext } from "./provider";
+
+export function UserAbout({ className }: { className?: string }) {
+	const user = useUserContext();
+
+	return (
+		<div className={cn("content-break select-text", className)}>
+			{user.profile?.about?.trim() || "No bio"}
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/user/avatar.tsx
+++ b/apps/desktop2/src/components/user/avatar.tsx
@@ -0,0 +1,37 @@
+import { cn } from "@lume/utils";
+import * as Avatar from "@radix-ui/react-avatar";
+import { minidenticon } from "minidenticons";
+import { nanoid } from "nanoid";
+import { useMemo } from "react";
+import { useUserContext } from "./provider";
+
+export function UserAvatar({ className }: { className?: string }) {
+	const user = useUserContext();
+
+	const fallbackAvatar = useMemo(
+		() =>
+			`data:image/svg+xml;utf8,${encodeURIComponent(
+				minidenticon(user.pubkey || nanoid(), 90, 50),
+			)}`,
+		[user],
+	);
+
+	return (
+		<Avatar.Root className="shrink-0">
+			<Avatar.Image
+				src={user.profile?.picture}
+				alt={user.pubkey}
+				loading="eager"
+				decoding="async"
+				className={cn("outline-[.5px] outline-black/5", className)}
+			/>
+			<Avatar.Fallback delayMs={120}>
+				<img
+					src={fallbackAvatar}
+					alt={user.pubkey}
+					className={cn("bg-black dark:bg-white", className)}
+				/>
+			</Avatar.Fallback>
+		</Avatar.Root>
+	);
+}
--- a/apps/desktop2/src/components/user/cover.tsx
+++ b/apps/desktop2/src/components/user/cover.tsx
@@ -0,0 +1,36 @@
+import { cn } from "@lume/utils";
+import { useUserContext } from "./provider";
+
+export function UserCover({ className }: { className?: string }) {
+	const user = useUserContext();
+
+	if (!user) {
+		return (
+			<div
+				className={cn(
+					"animate-pulse bg-neutral-300 dark:bg-neutral-700",
+					className,
+				)}
+			/>
+		);
+	}
+
+	if (user && !user.profile.banner) {
+		return (
+			<div
+				className={cn("bg-gradient-to-b from-blue-400 to-teal-200", className)}
+			/>
+		);
+	}
+
+	return (
+		<img
+			src={user.profile.banner}
+			alt="banner"
+			loading="lazy"
+			decoding="async"
+			style={{ contentVisibility: "auto" }}
+			className={cn("object-cover", className)}
+		/>
+	);
+}
--- a/apps/desktop2/src/components/user/followButton.tsx
+++ b/apps/desktop2/src/components/user/followButton.tsx
@@ -0,0 +1,66 @@
+import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Spinner } from "@lume/ui";
+import { useUserContext } from "./provider";
+
+export function UserFollowButton({
+	simple = false,
+	className,
+}: {
+	simple?: boolean;
+	className?: string;
+}) {
+	const { ark } = useRouteContext({ strict: false });
+	const user = useUserContext();
+
+	const [t] = useTranslation();
+	const [loading, setLoading] = useState(false);
+	const [followed, setFollowed] = useState(false);
+
+	const toggleFollow = async () => {
+		setLoading(true);
+		if (!followed) {
+			const add = await ark.follow(user.pubkey);
+			if (add) setFollowed(true);
+		} else {
+			const remove = await ark.unfollow(user.pubkey);
+			if (remove) setFollowed(false);
+		}
+		setLoading(false);
+	};
+
+	useEffect(() => {
+		async function status() {
+			setLoading(true);
+
+			const contacts = await ark.get_contact_list();
+			if (contacts?.includes(user.pubkey)) {
+				setFollowed(true);
+			}
+
+			setLoading(false);
+		}
+		status();
+	}, []);
+
+	return (
+		<button
+			type="button"
+			disabled={loading}
+			onClick={() => toggleFollow()}
+			className={cn("w-max", className)}
+		>
+			{loading ? (
+				<Spinner className="size-4" />
+			) : followed ? (
+				!simple ? (
+					t("user.unfollow")
+				) : null
+			) : (
+				t("user.follow")
+			)}
+		</button>
+	);
+}
--- a/apps/desktop2/src/components/user/index.ts
+++ b/apps/desktop2/src/components/user/index.ts
@@ -0,0 +1,21 @@
+import { UserAbout } from "./about";
+import { UserAvatar } from "./avatar";
+import { UserCover } from "./cover";
+import { UserFollowButton } from "./followButton";
+import { UserName } from "./name";
+import { UserNip05 } from "./nip05";
+import { UserProvider } from "./provider";
+import { UserRoot } from "./root";
+import { UserTime } from "./time";
+
+export const User = {
+	Provider: UserProvider,
+	Root: UserRoot,
+	Avatar: UserAvatar,
+	Cover: UserCover,
+	Name: UserName,
+	NIP05: UserNip05,
+	Time: UserTime,
+	About: UserAbout,
+	Button: UserFollowButton,
+};
--- a/apps/desktop2/src/components/user/name.tsx
+++ b/apps/desktop2/src/components/user/name.tsx
@@ -0,0 +1,21 @@
+import { cn, displayNpub } from "@lume/utils";
+import { useUserContext } from "./provider";
+
+export function UserName({
+	className,
+	prefix,
+}: {
+	className?: string;
+	prefix?: string;
+}) {
+	const user = useUserContext();
+
+	return (
+		<div className={cn("max-w-[12rem] truncate", className)}>
+			{prefix}
+			{user.profile?.display_name ||
+				user.profile?.name ||
+				displayNpub(user.pubkey, 16)}
+		</div>
+	);
+}
--- a/apps/desktop2/src/components/user/nip05.tsx
+++ b/apps/desktop2/src/components/user/nip05.tsx
@@ -0,0 +1,45 @@
+import { VerifiedIcon } from "@lume/icons";
+import { displayLongHandle, displayNpub } from "@lume/utils";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useQuery } from "@tanstack/react-query";
+import { useRouteContext } from "@tanstack/react-router";
+import { useUserContext } from "./provider";
+
+export function UserNip05() {
+	const user = useUserContext();
+
+	const { ark } = useRouteContext({ strict: false });
+	const { isLoading, data: verified } = useQuery({
+		queryKey: ["nip05", user?.pubkey],
+		queryFn: async () => {
+			if (!user.profile?.nip05) return false;
+			const verify = await ark.verify_nip05(user.pubkey, user.profile?.nip05);
+			return verify;
+		},
+		enabled: !!user.profile,
+	});
+
+	if (!user.profile?.nip05?.length) return;
+
+	return (
+		<Tooltip.Provider>
+			<Tooltip.Root delayDuration={150}>
+				<Tooltip.Trigger>
+					{!isLoading && verified ? (
+						<VerifiedIcon className="size-4 text-teal-500" />
+					) : null}
+				</Tooltip.Trigger>
+				<Tooltip.Portal>
+					<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm font-medium text-neutral-50 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-50 dark:text-neutral-950">
+						{!user.profile?.nip05
+							? displayNpub(user.pubkey, 16)
+							: user.profile?.nip05.length > 50
+								? displayLongHandle(user.profile?.nip05)
+								: user.profile.nip05?.replace("_@", "")}
+						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	);
+}
--- a/apps/desktop2/src/components/user/provider.tsx
+++ b/apps/desktop2/src/components/user/provider.tsx
@@ -0,0 +1,33 @@
+import { useProfile } from "@lume/ark";
+import type { Metadata } from "@lume/types";
+import { type ReactNode, createContext, useContext } from "react";
+
+const UserContext = createContext<{
+	pubkey: string;
+	isError: boolean;
+	isLoading: boolean;
+	profile: Metadata;
+}>(null);
+
+export function UserProvider({
+	pubkey,
+	children,
+	embedProfile,
+}: {
+	pubkey: string;
+	children: ReactNode;
+	embedProfile?: string;
+}) {
+	const { isLoading, isError, profile } = useProfile(pubkey, embedProfile);
+
+	return (
+		<UserContext.Provider value={{ pubkey, isError, isLoading, profile }}>
+			{children}
+		</UserContext.Provider>
+	);
+}
+
+export function useUserContext() {
+	const context = useContext(UserContext);
+	return context;
+}
--- a/apps/desktop2/src/components/user/root.tsx
+++ b/apps/desktop2/src/components/user/root.tsx
@@ -0,0 +1,12 @@
+import { cn } from "@lume/utils";
+import type { ReactNode } from "react";
+
+export function UserRoot({
+	children,
+	className,
+}: {
+	children: ReactNode;
+	className?: string;
+}) {
+	return <div className={cn(className)}>{children}</div>;
+}
--- a/apps/desktop2/src/components/user/time.tsx
+++ b/apps/desktop2/src/components/user/time.tsx
@@ -0,0 +1,18 @@
+import { cn, formatCreatedAt } from "@lume/utils";
+import { useMemo } from "react";
+
+export function UserTime({
+	time,
+	className,
+}: {
+	time: number;
+	className?: string;
+}) {
+	const createdAt = useMemo(() => formatCreatedAt(time), [time]);
+
+	return (
+		<div className={cn("text-neutral-600 dark:text-neutral-400", className)}>
+			{createdAt}
+		</div>
+	);
+}
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@@ -1,6 +1,6 @@
 import { BellIcon, ComposeFilledIcon, PlusIcon, SearchIcon } from "@lume/icons";
 import { Event, Kind } from "@lume/types";
-import { User } from "@lume/ui";
+import { User } from "@/components/user";
 import {
 	cn,
 	decodeZapInvoice,
--- a/apps/desktop2/src/routes/__root.tsx
+++ b/apps/desktop2/src/routes/__root.tsx
@@ -1,10 +1,12 @@
 import type { Ark } from "@lume/ark";
+import { CheckCircleIcon, InfoCircleIcon, CancelCircleIcon } from "@lume/icons";
 import type { Interests, Metadata, Settings } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import type { QueryClient } from "@tanstack/react-query";
 import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
 import type { Platform } from "@tauri-apps/plugin-os";
 import type { Descendant } from "slate";
+import { Toaster } from "sonner";

 type EditorElement = {
 	type: string;
@@ -31,7 +33,21 @@ interface RouterContext {
 }

 export const Route = createRootRouteWithContext<RouterContext>()({
-	component: () => <Outlet />,
+	component: () => (
+		<>
+			<Toaster
+				position="bottom-right"
+				icons={{
+					success: <CheckCircleIcon className="size-5" />,
+					info: <InfoCircleIcon className="size-5" />,
+					error: <CancelCircleIcon className="size-5" />,
+				}}
+				closeButton
+				theme="system"
+			/>
+			<Outlet />
+		</>
+	),
 	pendingComponent: Pending,
 	wrapInSuspense: true,
 });
--- a/apps/desktop2/src/routes/activity.$account.messages.tsx
+++ b/apps/desktop2/src/routes/activity.$account.messages.tsx
@@ -1,5 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/activity/$account/messages")({
-	component: () => <div>Hello /activity/$account/messages!</div>,
-});
--- a/apps/desktop2/src/routes/activity.$account.texts.tsx
+++ b/apps/desktop2/src/routes/activity.$account.texts.tsx
@@ -1,4 +1,5 @@
-import { Note, Spinner } from "@lume/ui";
+import { Spinner } from "@lume/ui";
+import { Note } from "@/components/note";
 import { Await, createFileRoute, defer } from "@tanstack/react-router";
 import { Suspense } from "react";
 import { Virtualizer } from "virtua";
--- a/apps/desktop2/src/routes/activity.$account.zaps.tsx
+++ b/apps/desktop2/src/routes/activity.$account.zaps.tsx
@@ -1,4 +1,5 @@
-import { Note, Spinner, User } from "@lume/ui";
+import { User } from "@/components/user";
+import { Spinner } from "@lume/ui";
 import { decodeZapInvoice } from "@lume/utils";
 import { Await, createFileRoute, defer } from "@tanstack/react-router";
 import { Suspense } from "react";
--- a/apps/desktop2/src/routes/create-group.tsx
+++ b/apps/desktop2/src/routes/create-group.tsx
@@ -1,6 +1,7 @@
 import { CheckCircleIcon } from "@lume/icons";
 import type { ColumnRouteSearch } from "@lume/types";
-import { Spinner, User } from "@lume/ui";
+import { Spinner } from "@lume/ui";
+import { User } from "@/components/user";
 import { createFileRoute, useRouter } from "@tanstack/react-router";
 import { useState } from "react";
 import { toast } from "sonner";
--- a/apps/desktop2/src/routes/editor/-components/mention.tsx
+++ b/apps/desktop2/src/routes/editor/-components/mention.tsx
@@ -4,10 +4,10 @@ import * as Tooltip from "@radix-ui/react-tooltip";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useEffect, useState } from "react";
 import { useRouteContext } from "@tanstack/react-router";
-import { User } from "@lume/ui";
 import { useSlateStatic } from "slate-react";
 import type { Contact } from "@lume/types";
 import { toast } from "sonner";
+import { User } from "@/components/user";

 export function MentionButton({ className }: { className?: string }) {
 	const editor = useSlateStatic();
--- a/apps/desktop2/src/routes/editor/index.tsx
+++ b/apps/desktop2/src/routes/editor/index.tsx
@@ -1,6 +1,5 @@
 import { ComposeFilledIcon, TrashIcon } from "@lume/icons";
 import { Spinner } from "@lume/ui";
-import { MentionNote } from "@lume/ui/src/note/mentions/note";
 import {
 	cn,
 	insertImage,
@@ -25,6 +24,7 @@ import {
 import { MediaButton } from "./-components/media";
 import { NsfwToggle } from "./-components/nsfw";
 import { MentionButton } from "./-components/mention";
+import { MentionNote } from "@/components/note/mentions/note";

 type EditorSearch = {
 	reply_to: string;
@@ -35,7 +35,7 @@ export const Route = createFileRoute("/editor/")({
 	validateSearch: (search: Record<string, string>): EditorSearch => {
 		return {
 			reply_to: search.reply_to,
-			quote: search.quote === "true" ?? false,
+			quote: search.quote === "true" || false,
 		};
 	},
 	beforeLoad: async ({ search }) => {
--- a/apps/desktop2/src/routes/events/$eventId.tsx
+++ b/apps/desktop2/src/routes/events/$eventId.tsx
@@ -1,6 +1,7 @@
 import { useEvent } from "@lume/ark";
 import type { Event } from "@lume/types";
-import { Box, Container, Note, Spinner } from "@lume/ui";
+import { Box, Container, Spinner } from "@lume/ui";
+import { Note } from "@/components/note";
 import { createFileRoute } from "@tanstack/react-router";
 import { WindowVirtualizer } from "virtua";
 import { ReplyList } from "./-components/replyList";
--- a/apps/desktop2/src/routes/events/-components/reply.tsx
+++ b/apps/desktop2/src/routes/events/-components/reply.tsx
@@ -1,7 +1,7 @@
 import type { EventWithReplies } from "@lume/types";
-import { Note } from "@lume/ui";
 import { cn } from "@lume/utils";
 import { SubReply } from "./subReply";
+import { Note } from "@/components/note";

 export function Reply({ event }: { event: EventWithReplies }) {
 	return (
--- a/apps/desktop2/src/routes/events/-components/subReply.tsx
+++ b/apps/desktop2/src/routes/events/-components/subReply.tsx
@@ -1,5 +1,5 @@
 import type { Event } from "@lume/types";
-import { Note } from "@lume/ui";
+import { Note } from "@/components/note";

 export function SubReply({ event }: { event: Event; rootEventId?: string }) {
 	return (
--- a/apps/desktop2/src/routes/index.tsx
+++ b/apps/desktop2/src/routes/index.tsx
@@ -1,5 +1,6 @@
 import { PlusIcon } from "@lume/icons";
-import { Spinner, User } from "@lume/ui";
+import { Spinner } from "@lume/ui";
+import { User } from "@/components/user";
 import { checkForAppUpdates } from "@lume/utils";
 import { Link } from "@tanstack/react-router";
 import { createFileRoute, redirect } from "@tanstack/react-router";
--- a/apps/desktop2/src/routes/onboarding.tsx
+++ b/apps/desktop2/src/routes/onboarding.tsx
@@ -1,6 +1,7 @@
 import { ArrowRightIcon, CancelIcon } from "@lume/icons";
 import type { ColumnRouteSearch, LumeColumn } from "@lume/types";
-import { Spinner, User } from "@lume/ui";
+import { Spinner } from "@lume/ui";
+import { User } from "@/components/user";
 import { cn } from "@lume/utils";
 import { createFileRoute } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
--- a/apps/desktop2/src/routes/search.tsx
+++ b/apps/desktop2/src/routes/search.tsx
@@ -1,6 +1,8 @@
 import { SearchIcon } from "@lume/icons";
 import { type Event, Kind } from "@lume/types";
-import { Note, Spinner, User } from "@lume/ui";
+import { Spinner } from "@lume/ui";
+import { Note } from "@/components/note";
+import { User } from "@/components/user";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
--- a/apps/desktop2/src/routes/settings/backup.tsx
+++ b/apps/desktop2/src/routes/settings/backup.tsx
@@ -1,5 +1,5 @@
+import { User } from "@/components/user";
 import type { Account } from "@lume/types";
-import { User } from "@lume/ui";
 import { displayNsec } from "@lume/utils";
 import { createFileRoute } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
--- a/apps/desktop2/src/routes/trending.users.tsx
+++ b/apps/desktop2/src/routes/trending.users.tsx
@@ -1,4 +1,5 @@
-import { Spinner, User } from "@lume/ui";
+import { Spinner } from "@lume/ui";
+import { User } from "@/components/user";
 import { Await, defer } from "@tanstack/react-router";
 import { createFileRoute } from "@tanstack/react-router";
 import { Suspense } from "react";
--- a/apps/desktop2/src/routes/users/$pubkey.tsx
+++ b/apps/desktop2/src/routes/users/$pubkey.tsx
@@ -1,4 +1,5 @@
-import { Box, Container, Spinner, User } from "@lume/ui";
+import { Box, Container, Spinner } from "@lume/ui";
+import { User } from "@/components/user";
 import { createFileRoute, defer } from "@tanstack/react-router";
 import { WindowVirtualizer } from "virtua";
 import { Conversation } from "@/components/conversation";
--- a/apps/desktop2/src/routes/zap.$id.lazy.tsx
+++ b/apps/desktop2/src/routes/zap.$id.lazy.tsx
@@ -1,5 +1,6 @@
 import { Balance } from "@/components/balance";
-import { Box, Container, User } from "@lume/ui";
+import { Box, Container } from "@lume/ui";
+import { User } from "@/components/user";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { getCurrent } from "@tauri-apps/api/webviewWindow";
 import { useState } from "react";