feat: paginate closed streams tab (#148)

Closed streams grow unbounded as teams age and can reach 1000s of items,
while open streams stay bounded by active work. Switch the streams list
to subscribe per-status so each tab only pulls what it renders, and cap
the closed tab to a 50-item window that grows via a Load more action.

The open tab remains unbounded so per-row realtime features — autoplay,
huddle indicators — keep full coverage of the streams that matter.
Closed streams are archived and don't need push behavior, which side-
steps the autoplay baseline-reset and huddle-on-page-2 risks that made
pagination complicated for the open tab.

Refs flowy-live/llink#138.

Co-authored-by: Claude <[email protected]>

js/src/hooks/use-particle.ts

@@ -63,6 +63,8 @@ interface UseLiveParticleChildrenParams {
   onAdded?: (child: Particle) => void;
   onRemoved?: (child: Particle, updatedChildren: Particle[]) => void;
   whereFilter?: QueryFieldFilterConstraint;
+  /** Optional cap on results. Changes trigger a re-subscription. */
+  limit?: number;
 }
 
 export function useLiveParticleChildren(
@@ -74,6 +76,7 @@ export function useLiveParticleChildren(
     onAdded,
     onRemoved,
     whereFilter,
+    limit,
   }: UseLiveParticleChildrenParams = {}
 ): UseLiveParticleChildrenResult {
   const [children, setChildren] = useState<Particle[]>([]);
@@ -110,11 +113,12 @@ export function useLiveParticleChildren(
         onAdded,
         onRemoved,
         whereFilter,
+        limit,
       }
     );
 
     return unsubscribe;
-  }, [path]);
+  }, [path, whereFilter, limit]);
 
   return { children, isLoading, error };
 }

js/src/hooks/use-stream-particles.ts

@@ -1,4 +1,5 @@
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { where, type QueryFieldFilterConstraint } from "firebase/firestore";
 import { useLiveParticleChildren } from "@/hooks/use-particle";
 import { useAuthStore } from "@/stores/auth-store";
 import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
@@ -6,6 +7,14 @@ import type { Particle, StreamProperties } from "@/api/types";
 
 export type StreamParticle = Particle & { type: "stream"; properties: StreamProperties };
 
+const CLOSED_INITIAL_PAGE_SIZE = 50;
+const CLOSED_PAGE_INCREMENT = 50;
+
+// Stable where-constraint references so the Firestore subscription only
+// re-attaches when the tab actually changes, not on every render.
+const OPEN_STATUS_FILTER = where("status", "==", "open");
+const CLOSED_STATUS_FILTER = where("status", "==", "closed");
+
 function useVisibilityScopes(userId?: string, networkId?: string) {
   return useMemo(() => {
     const scopes: string[] = [];
@@ -15,30 +24,68 @@ function useVisibilityScopes(userId?: string, networkId?: string) {
   }, [userId, networkId]);
 }
 
+interface UseStreamParticlesOptions {
+  /**
+   * Which streams to subscribe to. Open streams are loaded in full (bounded
+   * by active work — full realtime coverage is needed for autoplay/huddles).
+   * Closed streams are paginated via `loadMore`.
+   */
+  status: "open" | "closed";
+}
+
 interface UseStreamParticlesResult {
   streams: StreamParticle[];
   isLoading: boolean;
   networkId: string;
+  /** True when more closed streams may exist beyond the current window. */
+  canLoadMore: boolean;
+  /** Extend the pagination window. No-op on the open tab. */
+  loadMore: () => void;
 }
 
-export function useStreamParticles(path: ParticlePath): UseStreamParticlesResult {
+export function useStreamParticles(
+  path: ParticlePath,
+  { status }: UseStreamParticlesOptions,
+): UseStreamParticlesResult {
   const { networkId } = parseParticlePath(path);
   const user = useAuthStore((s) => s.user);
   const visibilityScopes = useVisibilityScopes(user?.id, networkId);
 
-  const { children, isLoading } = useLiveParticleChildren(
-    path,
-    {
-      orderByField: "last_child_created_at",
-      orderDirection: "desc",
-      visibilityScopes,
+  const [closedLimit, setClosedLimit] = useState(CLOSED_INITIAL_PAGE_SIZE);
+
+  // Every time the user switches back to the closed tab, start with a fresh
+  // window. Avoids an ever-growing subscription across a long session.
+  useEffect(() => {
+    if (status === "closed") {
+      setClosedLimit(CLOSED_INITIAL_PAGE_SIZE);
     }
-  );
+  }, [status]);
+
+  const whereFilter: QueryFieldFilterConstraint =
+    status === "open" ? OPEN_STATUS_FILTER : CLOSED_STATUS_FILTER;
+  const limit = status === "closed" ? closedLimit : undefined;
+
+  const { children, isLoading } = useLiveParticleChildren(path, {
+    orderByField: "last_child_created_at",
+    orderDirection: "desc",
+    visibilityScopes,
+    whereFilter,
+    limit,
+  });
 
   const streams = useMemo(
     () => children.filter((c): c is StreamParticle => c.type === "stream"),
     [children],
   );
 
-  return { streams, isLoading, networkId };
+  // Heuristic: if we got back as many items as we asked for, assume there
+  // might be more. Clicking load-more when there are no more is a no-op.
+  const canLoadMore = status === "closed" && streams.length >= closedLimit;
+
+  const loadMore = useCallback(() => {
+    if (status !== "closed") return;
+    setClosedLimit((prev) => prev + CLOSED_PAGE_INCREMENT);
+  }, [status]);
+
+  return { streams, isLoading, networkId, canLoadMore, loadMore };
 }