feat: add for you column

packages/lume-column-foryou/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "@columns/foryou",
+	"version": "0.0.0",
+	"private": true,
+	"main": "./src/index.tsx",
+	"dependencies": {
+		"@lume/ark": "workspace:^",
+		"@lume/icons": "workspace:^",
+		"@lume/storage": "workspace:^",
+		"@lume/ui": "workspace:^",
+		"@lume/utils": "workspace:^",
+		"@nostr-dev-kit/ndk": "^2.3.3",
+		"@tanstack/react-query": "^5.17.15",
+		"react": "^18.2.0",
+		"react-router-dom": "^6.21.3",
+		"sonner": "^1.3.1",
+		"virtua": "^0.20.5"
+	},
+	"devDependencies": {
+		"@lume/tailwindcss": "workspace:^",
+		"@lume/tsconfig": "workspace:^",
+		"@lume/types": "workspace:^",
+		"@types/react": "^18.2.48",
+		"tailwind": "^4.0.0",
+		"typescript": "^5.3.3"
+	}
+}

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

@@ -0,0 +1,118 @@
+import { TextNote, useArk } from "@lume/ark";
+import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { FETCH_LIMIT } from "@lume/utils";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useInfiniteQuery, useQueryClient } 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 = `${colKey}-vlist`;
+	const queryClient = useQueryClient();
+
+	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],
+						"#t": storage.interests.hashtags,
+					},
+					limit: FETCH_LIMIT,
+					pageParam,
+					signal,
+				});
+
+				return events;
+			},
+			getNextPageParam: (lastPage) => {
+				const lastEvent = lastPage.at(-1);
+				if (!lastEvent) return;
+				return lastEvent.created_at - 1;
+			},
+			initialData: () => {
+				const queryCacheData = queryClient.getQueryState([colKey])
+					?.data as NDKEvent[];
+				if (queryCacheData) {
+					return {
+						pageParams: [undefined, 1],
+						pages: [queryCacheData],
+					};
+				}
+			},
+			select: (data) => data?.pages.flatMap((page) => page),
+			staleTime: 120 * 1000,
+			refetchOnWindowFocus: false,
+			refetchOnMount: false,
+		});
+
+	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="w-full flex h-16 items-center justify-center gap-2 px-3 py-1.5">
+						<LoaderIcon className="size-5 animate-spin" />
+					</div>
+				) : (
+					data.map((event) => (
+						<TextNote key={event.id} event={event} className="mt-3" />
+					))
+				)}
+				<div className="flex items-center justify-center h-16">
+					{hasNextPage ? (
+						<button
+							type="button"
+							onClick={() => fetchNextPage()}
+							disabled={!hasNextPage || isFetchingNextPage}
+							className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
+						>
+							{isFetchingNextPage ? (
+								<LoaderIcon className="size-5 animate-spin" />
+							) : (
+								<>
+									<ArrowRightCircleIcon className="size-5" />
+									Load more
+								</>
+							)}
+						</button>
+					) : null}
+				</div>
+			</VList>
+		</div>
+	);
+}

packages/lume-column-foryou/src/index.tsx

@@ -0,0 +1,51 @@
+import { Column } from "@lume/ark";
+import { ForyouIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { IColumn } from "@lume/types";
+import { EventRoute, UserRoute } from "@lume/ui";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRef } from "react";
+import { HomeRoute } from "./home";
+
+export function ForYou({ column }: { column: IColumn }) {
+	const colKey = `foryou-${column.id}`;
+	const storage = useStorage();
+	const queryClient = useQueryClient();
+	const since = useRef(Math.floor(Date.now() / 1000));
+
+	const refresh = async (events: NDKEvent[]) => {
+		const uniqEvents = new Set(events);
+		await queryClient.setQueryData(
+			[colKey],
+			(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
+				...prev,
+				pages: [[...uniqEvents], ...prev.pages],
+			}),
+		);
+	};
+
+	return (
+		<Column.Root>
+			<Column.Header
+				id={column.id}
+				queryKey={[colKey]}
+				title="For You"
+				icon={<ForyouIcon className="size-4" />}
+			/>
+			<Column.Live
+				filter={{
+					kinds: [NDKKind.Text],
+					"#t": storage.interests.hashtags,
+					since: since.current,
+				}}
+				onClick={refresh}
+			/>
+			<Column.Content>
+				<Column.Route path="/" element={<HomeRoute colKey={colKey} />} />
+				<Column.Route path="/events/:id" element={<EventRoute />} />
+				<Column.Route path="/users/:id" element={<UserRoute />} />
+			</Column.Content>
+		</Column.Root>
+	);
+}

packages/lume-column-foryou/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-foryou/tsconfig.json

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