perf(pages): paginate page.list, and surface which workspace a page came from

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/LoadMoreSentinel/LoadMoreSentinel.tsx

@@ -1,6 +1,5 @@
-import { Trans } from "@lingui/react/macro";
 import type { RefObject } from "react";
-import { LuRefreshCw } from "react-icons/lu";
+import { LuLoader } from "react-icons/lu";
 
 interface LoadMoreSentinelProps {
 	sentinelRef: RefObject<HTMLDivElement | null>;
@@ -24,12 +23,7 @@ export function LoadMoreSentinel({
 			className="flex items-center justify-center gap-2 py-3 text-xs text-muted-foreground"
 		>
 			{isFetchingNextPage && (
-				<>
-					<LuRefreshCw className="size-3.5 animate-spin motion-reduce:animate-none" />
-					<span>
-						<Trans>Loading more…</Trans>
-					</span>
-				</>
+				<LuLoader className="size-4 animate-spin motion-reduce:animate-none" />
 			)}
 		</div>
 	);

apps/desktop/src/renderer/routes/_authenticated/_dashboard/hooks/usePagesList/index.ts

@@ -0,0 +1 @@
+export { usePagesList } from "./usePagesList";

apps/desktop/src/renderer/routes/_authenticated/_dashboard/hooks/usePagesList/usePagesList.ts

@@ -0,0 +1,63 @@
+import { useEffect, useMemo, useRef } from "react";
+import { cloudTrpc } from "renderer/lib/cloud-trpc";
+import {
+	type PagesListFilter,
+	pagesListInput,
+} from "renderer/routes/_authenticated/_dashboard/utils/pagesListInput";
+
+/**
+ * One batch per scroll. Attach `scrollRef` to the scroll container and
+ * `sentinelRef` to an element after the last row; nothing fetches ahead of
+ * what the viewer has reached.
+ */
+export function usePagesList(
+	filter: PagesListFilter = {},
+	options: { enabled?: boolean; staleTime?: number } = {},
+) {
+	const query = cloudTrpc.page.list.useInfiniteQuery(pagesListInput(filter), {
+		getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+		...options,
+	});
+
+	const {
+		hasNextPage,
+		isFetchingNextPage,
+		isFetchNextPageError,
+		fetchNextPage,
+	} = query;
+
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const sentinelRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const sentinel = sentinelRef.current;
+		const root = scrollRef.current;
+		// React Query derives `hasNextPage` from the last successful fetch, so a
+		// failed batch leaves it true — observing again would spin. The caller
+		// offers a retry instead.
+		if (
+			!sentinel ||
+			!root ||
+			!hasNextPage ||
+			isFetchingNextPage ||
+			isFetchNextPageError
+		) {
+			return;
+		}
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting) void fetchNextPage();
+			},
+			{ root, rootMargin: "200px" },
+		);
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [hasNextPage, isFetchingNextPage, isFetchNextPageError, fetchNextPage]);
+
+	const items = useMemo(
+		() => query.data?.pages.flatMap((page) => page.items) ?? [],
+		[query.data],
+	);
+
+	return { ...query, items, scrollRef, sentinelRef };
+}

apps/desktop/src/renderer/routes/_authenticated/_dashboard/pages/components/PagesGrid/PagesGrid.tsx

@@ -76,8 +76,8 @@ export function PagesGrid({
 
 	if (pages.length === 0) {
 		return (
-			<Empty className="my-auto min-h-80 items-start border-0 px-0 py-20 text-left max-w-md mx-auto w-full md:px-0 md:py-20">
-				<EmptyHeader className="items-start text-left">
+			<Empty className="my-auto min-h-80 border-0 py-20 md:py-20">
+				<EmptyHeader>
 					<EmptyMedia variant="icon">
 						{hasFilters ? (
 							<LuSearchX className="size-5" />
@@ -103,7 +103,12 @@ export function PagesGrid({
 					</EmptyDescription>
 				</EmptyHeader>
 				{!hasFilters && (
-					<Button size="sm" onClick={onCreate} disabled={isCreating}>
+					<Button
+						size="sm"
+						variant="secondary"
+						onClick={onCreate}
+						disabled={isCreating}
+					>
 						<LuPlus className="size-3.5" />
 						<Trans>Create with AI</Trans>
 					</Button>