feat: add activity screen

apps/desktop/src/router.tsx

@@ -137,6 +137,24 @@ export default function Router() {
 						},
 					],
 				},
+				{
+					path: "activity",
+					async lazy() {
+						const { ActivityScreen } = await import("./routes/activty");
+						return { Component: ActivityScreen };
+					},
+					children: [
+						{
+							path: ":id",
+							async lazy() {
+								const { ActivityIdScreen } = await import(
+									"./routes/activty/id"
+								);
+								return { Component: ActivityIdScreen };
+							},
+						},
+					],
+				},
 				{
 					path: "depot",
 					children: [

apps/desktop/src/routes/activty/components/activityRepost.tsx

@@ -0,0 +1,28 @@
+import { User } from "@lume/ark";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { Link } from "react-router-dom";
+
+export function ActivityRepost({ event }: { event: NDKEvent }) {
+	return (
+		<Link
+			to={`/activity/${event.id}`}
+			className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<User.Provider pubkey={event.pubkey}>
+				<User.Root className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						<User.Avatar className="size-8 rounded-lg shrink-0" />
+						<div className="inline-flex items-center gap-1.5">
+							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
+							<p className="shrink-0">reposted</p>
+						</div>
+					</div>
+					<User.Time
+						time={event.created_at}
+						className="text-neutral-500 dark:text-neutral-400"
+					/>
+				</User.Root>
+			</User.Provider>
+		</Link>
+	);
+}

apps/desktop/src/routes/activty/components/activityText.tsx

@@ -0,0 +1,28 @@
+import { User } from "@lume/ark";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { Link } from "react-router-dom";
+
+export function ActivityText({ event }: { event: NDKEvent }) {
+	return (
+		<Link
+			to={`/activity/${event.id}`}
+			className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<User.Provider pubkey={event.pubkey}>
+				<User.Root className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						<User.Avatar className="size-8 rounded-lg shrink-0" />
+						<div className="inline-flex items-center gap-1.5">
+							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
+							<p className="shrink-0">mention you</p>
+						</div>
+					</div>
+					<User.Time
+						time={event.created_at}
+						className="text-neutral-500 dark:text-neutral-400"
+					/>
+				</User.Root>
+			</User.Provider>
+		</Link>
+	);
+}

apps/desktop/src/routes/activty/components/activityZap.tsx

@@ -0,0 +1,33 @@
+import { User } from "@lume/ark";
+import { compactNumber } from "@lume/utils";
+import { NDKEvent, zapInvoiceFromEvent } from "@nostr-dev-kit/ndk";
+import { Link } from "react-router-dom";
+
+export function ActivityZap({ event }: { event: NDKEvent }) {
+	const invoice = zapInvoiceFromEvent(event);
+
+	return (
+		<Link
+			to={`/activity/${event.id}`}
+			className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+		>
+			<User.Provider pubkey={event.pubkey}>
+				<User.Root className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						<User.Avatar className="size-8 rounded-lg shrink-0" />
+						<div className="inline-flex items-center gap-1.5">
+							<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
+							<p className="shrink-0">
+								zapped {compactNumber.format(invoice.amount)} sats
+							</p>
+						</div>
+					</div>
+					<User.Time
+						time={event.created_at}
+						className="text-neutral-500 dark:text-neutral-400"
+					/>
+				</User.Root>
+			</User.Provider>
+		</Link>
+	);
+}

apps/desktop/src/routes/activty/components/list.tsx

@@ -0,0 +1,95 @@
+import { useArk } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { FETCH_LIMIT } from "@lume/utils";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { ActivityRepost } from "./activityRepost";
+import { ActivityText } from "./activityText";
+import { ActivityZap } from "./activityZap";
+
+export function ActivityList() {
+	const ark = useArk();
+	const queryClient = useQueryClient();
+
+	const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
+		useInfiniteQuery({
+			queryKey: ["activity"],
+			initialPageParam: 0,
+			queryFn: async ({
+				signal,
+				pageParam,
+			}: {
+				signal: AbortSignal;
+				pageParam: number;
+			}) => {
+				const events = await ark.getInfiniteEvents({
+					filter: {
+						kinds: [NDKKind.Zap],
+						"#p": [
+							"126103bfddc8df256b6e0abfd7f3797c80dcc4ea88f7c2f87dd4104220b4d65f",
+							ark.account.pubkey,
+						],
+					},
+					limit: 200,
+					pageParam,
+					signal,
+				});
+
+				return events;
+			},
+			getNextPageParam: (lastPage) => {
+				const lastEvent = lastPage.at(-1);
+				if (!lastEvent) return;
+				return lastEvent.created_at - 1;
+			},
+			initialData: () => {
+				const queryCacheData = queryClient.getQueryState(["activity"])
+					?.data as NDKEvent[];
+				if (queryCacheData) {
+					return {
+						pageParams: [undefined, 1],
+						pages: [queryCacheData],
+					};
+				}
+			},
+
+			staleTime: 360 * 1000,
+			refetchOnWindowFocus: false,
+			refetchOnMount: false,
+		});
+
+	const allEvents = useMemo(
+		() => (data ? data.pages.flatMap((page) => page) : []),
+		[data],
+	);
+
+	const renderEvenKind = useCallback(
+		(event: NDKEvent) => {
+			if (event.pubkey === ark.account.pubkey) return null;
+			switch (event.kind) {
+				case NDKKind.Text:
+					return <ActivityText key={event.id} event={event} />;
+				case NDKKind.Repost:
+					return <ActivityRepost key={event.id} event={event} />;
+				case NDKKind.Zap:
+					return <ActivityZap key={event.id} event={event} />;
+				default:
+					return <ActivityText key={event.id} event={event} />;
+			}
+		},
+		[data],
+	);
+
+	return (
+		<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
+			{isLoading ? (
+				<div className="h-24 flex items-center justify-center">
+					<LoaderIcon className="size-5 animate-spin" />
+				</div>
+			) : (
+				allEvents.map((event) => renderEvenKind(event))
+			)}
+		</div>
+	);
+}

apps/desktop/src/routes/activty/components/rootNote.tsx

@@ -0,0 +1,40 @@
+import { Note, useEvent } from "@lume/ark";
+
+export function ActivityRootNote({ eventId }: { eventId: string }) {
+	const { isLoading, isError, data } = useEvent(eventId);
+
+	if (isLoading) {
+		return (
+			<div className="relative flex gap-3">
+				<div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
+					<div className="h-4 w-full animate-pulse bg-neutral-300 dark:bg-neutral-700" />
+				</div>
+			</div>
+		);
+	}
+
+	if (isError) {
+		return (
+			<div className="relative flex gap-3">
+				<div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
+					Failed to fetch event
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<Note.Provider event={data}>
+			<Note.Root>
+				<div className="flex items-center justify-between px-3 h-14">
+					<Note.User className="flex-1 pr-1" />
+				</div>
+				<Note.Content className="min-w-0 px-3" />
+				<div className="flex items-center justify-between px-3 h-14">
+					<Note.Pin />
+					<div className="inline-flex items-center gap-10" />
+				</div>
+			</Note.Root>
+		</Note.Provider>
+	);
+}

apps/desktop/src/routes/activty/components/singleRepost.tsx

@@ -0,0 +1,33 @@
+import { User } from "@lume/ark";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { ActivityRootNote } from "./rootNote";
+
+export function ActivitySingleRepost({ event }: { event: NDKEvent }) {
+	const repostId = event.tags.find((el) => el[0] === "e")[1];
+
+	return (
+		<div className="pb-3 flex flex-col">
+			<div className="h-14 shrink-0 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
+				<h3 className="text-center font-semibold leading-tight">Boost</h3>
+				<p className="text-sm text-blue-500 font-medium leading-tight">
+					@ Someone has reposted to your note
+				</p>
+			</div>
+			<div className="flex-1 min-h-0">
+				<div className="max-w-xl mx-auto py-6 flex flex-col items-center gap-6">
+					<User.Provider pubkey={event.pubkey}>
+						<User.Root>
+							<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
+						</User.Root>
+					</User.Provider>
+					<div className="flex flex-col items-center gap-3">
+						<div className="h-4 w-px bg-blue-500" />
+						<h3 className="font-semibold">Reposted</h3>
+						<div className="h-4 w-px bg-blue-500" />
+					</div>
+					<ActivityRootNote eventId={repostId} />
+				</div>
+			</div>
+		</div>
+	);
+}

apps/desktop/src/routes/activty/components/singleText.tsx

@@ -0,0 +1,53 @@
+import { Note, useArk } from "@lume/ark";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { ActivityRootNote } from "./rootNote";
+
+export function ActivitySingleText({ event }: { event: NDKEvent }) {
+	const ark = useArk();
+	const thread = ark.getEventThread({
+		content: event.content,
+		tags: event.tags,
+	});
+
+	return (
+		<div className="h-full w-full flex flex-col justify-between">
+			<div className="h-14 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
+				<h3 className="text-center font-semibold leading-tight">
+					Conversation
+				</h3>
+				<p className="text-sm text-blue-500 font-medium leading-tight">
+					@ Someone has replied to your note
+				</p>
+			</div>
+			<div className="overflow-y-auto">
+				<div className="max-w-xl mx-auto py-6">
+					{thread ? (
+						<div className="flex flex-col gap-3 mb-1">
+							<ActivityRootNote eventId={thread.rootEventId} />
+							<ActivityRootNote eventId={thread.replyEventId} />
+						</div>
+					) : null}
+					<div className="mt-3 flex flex-col gap-3">
+						<div className="flex items-center gap-3">
+							<p className="text-teal-500 font-medium">New reply</p>
+							<div className="flex-1 h-px bg-teal-300" />
+							<div className="w-4 shrink-0 h-px bg-teal-300" />
+						</div>
+						<Note.Provider event={event}>
+							<Note.Root>
+								<div className="flex items-center justify-between px-3 h-14">
+									<Note.User className="flex-1 pr-1" />
+								</div>
+								<Note.Content className="min-w-0 px-3" />
+								<div className="flex items-center justify-between px-3 h-14">
+									<Note.Pin />
+									<div className="inline-flex items-center gap-10" />
+								</div>
+							</Note.Root>
+						</Note.Provider>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/desktop/src/routes/activty/components/singleZap.tsx

@@ -0,0 +1,39 @@
+import { User } from "@lume/ark";
+import { compactNumber } from "@lume/utils";
+import { NDKEvent, zapInvoiceFromEvent } from "@nostr-dev-kit/ndk";
+import { ActivityRootNote } from "./rootNote";
+
+export function ActivitySingleZap({ event }: { event: NDKEvent }) {
+	const zapEventId = event.tags.find((el) => el[0] === "e")[1];
+	const invoice = zapInvoiceFromEvent(event);
+
+	return (
+		<div className="h-full w-full flex flex-col justify-between">
+			<div className="h-14 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
+				<h3 className="text-center font-semibold leading-tight">
+					Conversation
+				</h3>
+				<p className="text-sm text-blue-500 font-medium leading-tight">
+					@ Someone has replied to your note
+				</p>
+			</div>
+			<div className="flex-1 min-h-0">
+				<div className="max-w-xl mx-auto py-6 flex flex-col items-center gap-6">
+					<User.Provider pubkey={event.pubkey}>
+						<User.Root>
+							<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
+						</User.Root>
+					</User.Provider>
+					<div className="flex flex-col items-center gap-3">
+						<div className="h-4 w-px bg-blue-500" />
+						<h3 className="font-semibold">
+							Zap you {compactNumber.format(invoice.amount)} sats for
+						</h3>
+						<div className="h-4 w-px bg-blue-500" />
+					</div>
+					<ActivityRootNote eventId={zapEventId} />
+				</div>
+			</div>
+		</div>
+	);
+}

apps/desktop/src/routes/activty/id.tsx

@@ -0,0 +1,27 @@
+import { useEvent } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
+import { NDKKind } from "@nostr-dev-kit/ndk";
+import { useParams } from "react-router-dom";
+import { ActivitySingleRepost } from "./components/singleRepost";
+import { ActivitySingleText } from "./components/singleText";
+import { ActivitySingleZap } from "./components/singleZap";
+
+export function ActivityIdScreen() {
+	const { id } = useParams();
+	const { isLoading, data } = useEvent(id);
+
+	if (isLoading || !data) {
+		return (
+			<div className="w-full h-full flex items-center justify-center">
+				<LoaderIcon className="size-5 animate-spin" />
+			</div>
+		);
+	}
+
+	if (data.kind === NDKKind.Text) return <ActivitySingleText event={data} />;
+	if (data.kind === NDKKind.Zap) return <ActivitySingleZap event={data} />;
+	if (data.kind === NDKKind.Repost)
+		return <ActivitySingleRepost event={data} />;
+
+	return <ActivitySingleText event={data} />;
+}

apps/desktop/src/routes/activty/index.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom";
+import { ActivityList } from "./components/list";
+
+export function ActivityScreen() {
+	return (
+		<div className="flex h-full w-full rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
+			<div className="h-full flex flex-col w-96 shrink-0 rounded-l-xl bg-white/50 backdrop-blur-xl dark:bg-black/50">
+				<div className="h-14 shrink-0 flex items-center px-5 text-lg font-semibold border-b border-black/10 dark:border-white/10">
+					Activity
+				</div>
+				<ActivityList />
+			</div>
+			<div className="flex-1 rounded-r-xl bg-white pb-20 dark:bg-black">
+				<Outlet />
+			</div>
+		</div>
+	);
+}

packages/ark/src/components/note/mentions/note.tsx

@@ -34,7 +34,7 @@ export const MentionNote = memo(function MentionNote({
 
 	return (
 		<Note.Provider event={data}>
-			<Note.Root className="flex flex-col w-full gap-1 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900">
+			<Note.Root className="flex flex-col w-full gap-1 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
 				<User.Provider pubkey={data.pubkey}>
 					<User.Root className="px-3 mt-3 flex h-6 items-center gap-2">
 						<User.Avatar className="size-6 shrink-0 rounded-md object-cover" />

packages/lume-column-activity/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@columns/activity",
+	"version": "0.0.0",
+	"private": true,
+	"main": "./src/index.tsx",
+	"dependencies": {
+		"@lume/ark": "workspace:^",
+		"@lume/icons": "workspace:^",
+		"@lume/ui": "workspace:^",
+		"@lume/utils": "workspace:^",
+		"@nostr-dev-kit/ndk": "^2.3.2",
+		"@tanstack/react-query": "^5.17.9",
+		"react": "^18.2.0",
+		"react-router-dom": "^6.21.2",
+		"sonner": "^1.3.1",
+		"virtua": "^0.20.4"
+	},
+	"devDependencies": {
+		"@lume/tailwindcss": "workspace:^",
+		"@lume/tsconfig": "workspace:^",
+		"@lume/types": "workspace:^",
+		"@types/react": "^18.2.47",
+		"tailwind": "^4.0.0",
+		"typescript": "^5.3.3"
+	}
+}

packages/lume-column-activity/tailwind.config.js

@@ -0,0 +1,8 @@
+import sharedConfig from "@lume/tailwindcss";
+
+const config = {
+	content: ["./src/**/*.{js,ts,jsx,tsx}"],
+	presets: [sharedConfig],
+};
+
+export default config;

packages/lume-column-activity/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "@lume/tsconfig/base.json",
+	"compilerOptions": {
+		"outDir": "dist"
+	},
+	"include": ["src"],
+	"exclude": ["node_modules", "dist"]
+}

packages/lume-column-timeline/src/home.tsx

@@ -59,6 +59,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
 			},
 			staleTime: 120 * 1000,
 			refetchOnWindowFocus: false,
+			refetchOnMount: false,
 		});
 
 	const allEvents = useMemo(

packages/ui/src/layouts/app.tsx

@@ -1,7 +1,6 @@
 import { type Platform } from "@tauri-apps/plugin-os";
 import { Outlet } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
-import { Activity } from "../activity/column";
 import { Editor } from "../editor/column";
 import { Navigation } from "../navigation";
 import { WindowTitleBar } from "../titlebar";
@@ -22,7 +21,6 @@ export function AppLayout({ platform }: { platform: Platform }) {
 			<div className="flex w-full h-full min-h-0">
 				<Navigation />
 				<Editor />
-				<Activity />
 				<div className="flex-1 h-full px-1 pb-1">
 					<Outlet />
 				</div>

packages/ui/src/navigation.tsx

@@ -3,17 +3,13 @@ import {
 	BellIcon,
 	ComposeFilledIcon,
 	ComposeIcon,
-	DepotFilledIcon,
-	DepotIcon,
 	HomeFilledIcon,
 	HomeIcon,
 	NwcIcon,
-	RelayFilledIcon,
-	RelayIcon,
 	SettingsFilledIcon,
 	SettingsIcon,
 } from "@lume/icons";
-import { activityAtom, cn, editorAtom } from "@lume/utils";
+import { cn, editorAtom } from "@lume/utils";
 import { useAtom } from "jotai";
 import { useHotkeys } from "react-hotkeys-hook";
 import { NavLink } from "react-router-dom";
@@ -21,8 +17,6 @@ import { ActiveAccount } from "./account/active";
 
 export function Navigation() {
 	const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
-	const [isActvityOpen, setIsActvityOpen] = useAtom(activityAtom);
-
 	useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
 
 	return (
@@ -32,10 +26,7 @@ export function Navigation() {
 					<ActiveAccount />
 					<button
 						type="button"
-						onClick={() => {
-							setIsEditorOpen((state) => !state);
-							setIsActvityOpen(false);
-						}}
+						onClick={() => setIsEditorOpen((state) => !state)}
 						className="flex items-center justify-center h-auto w-full text-black aspect-square rounded-xl bg-black/5 hover:bg-blue-500 hover:text-white dark:bg-white/5 dark:text-white dark:hover:bg-blue-500"
 					>
 						{isEditorOpen ? (
@@ -69,30 +60,28 @@ export function Navigation() {
 							</div>
 						)}
 					</NavLink>
-					<button
-						type="button"
-						onClick={() => {
-							setIsActvityOpen((state) => !state);
-							setIsEditorOpen(false);
-						}}
+					<NavLink
+						to="/activity"
+						preventScrollReset={true}
 						className="inline-flex flex-col items-center justify-center"
 					>
-						<div
-							className={cn(
-								"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
-								isActvityOpen
-									? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
-									: "text-black/50 dark:text-neutral-400",
-							)}
-						>
-							{isActvityOpen ? (
-								<BellFilledIcon className="size-6" />
-							) : (
-								<BellIcon className="size-6" />
-							)}
-						</div>
-					</button>
-
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
+									isActive
+										? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
+										: "text-black/50 dark:text-neutral-400",
+								)}
+							>
+								{isActive ? (
+									<BellFilledIcon className="size-6" />
+								) : (
+									<BellIcon className="size-6" />
+								)}
+							</div>
+						)}
+					</NavLink>
 					<NavLink
 						to="/nwc"
 						preventScrollReset={true}

pnpm-lock.yaml

@@ -415,6 +415,58 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
 
+  packages/lume-column-activity:
+    dependencies:
+      '@lume/ark':
+        specifier: workspace:^
+        version: link:../ark
+      '@lume/icons':
+        specifier: workspace:^
+        version: link:../icons
+      '@lume/ui':
+        specifier: workspace:^
+        version: link:../ui
+      '@lume/utils':
+        specifier: workspace:^
+        version: link:../utils
+      '@nostr-dev-kit/ndk':
+        specifier: ^2.3.2
+        version: 2.3.2(typescript@5.3.3)
+      '@tanstack/react-query':
+        specifier: ^5.17.9
+        version: 5.17.9(react@18.2.0)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-router-dom:
+        specifier: ^6.21.2
+        version: 6.21.2(react-dom@18.2.0)(react@18.2.0)
+      sonner:
+        specifier: ^1.3.1
+        version: 1.3.1(react-dom@18.2.0)(react@18.2.0)
+      virtua:
+        specifier: ^0.20.4
+        version: 0.20.4(react-dom@18.2.0)(react@18.2.0)
+    devDependencies:
+      '@lume/tailwindcss':
+        specifier: workspace:^
+        version: link:../tailwindcss
+      '@lume/tsconfig':
+        specifier: workspace:^
+        version: link:../tsconfig
+      '@lume/types':
+        specifier: workspace:^
+        version: link:../types
+      '@types/react':
+        specifier: ^18.2.47
+        version: 18.2.47
+      tailwind:
+        specifier: ^4.0.0
+        version: 4.0.0
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+
   packages/lume-column-antenas:
     dependencies:
       '@lume/ark':