refactor(ark): add note provider

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" />;
 		}
 	};
 

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>