feat: triage streams with open, close (#121)

* refactor: use interfaces for function params

* cleanup message retention code

* support open / closed streams

- Tabs for viewing separately
- Context menu to close / open streams
- Update stream particle status field

* ui tweak

* show stream state in stream-view

* ui tweaks

* cleanup message retention from orion api

js/src/hooks/use-create-particle.ts

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { createParticle } from "@/lib/firestore-particles";
+import { createParticle, createStreamParticle } from "@/lib/firestore-particles";
 import type { ParticleType, ParticlePropertiesMap } from "@/api/types";
 import { particlePath, ParticlePath, toFirestoreChildrenPath, toFirestoreDocPath } from "@/lib/particle-path";
 
@@ -37,9 +37,8 @@ export function useCreateStreamParticle() {
     mutationFn: async (params: CreateStreamParticleParams) => {
       const path = particlePath(params.networkId, []);
       const networkCollectionPath = toFirestoreChildrenPath(path);
-      return await createParticle(
+      return await createStreamParticle(
         networkCollectionPath,
-        "stream",
         params.properties,
         params.createdByHumanId,
         params.visibleTo,

js/src/hooks/use-expiring-soon.ts

@@ -1,20 +0,0 @@
-import { useMemo } from "react";
-
-/**
- * Returns true when a stream is within the last 10% of its retention window.
- * For example, with 24h retention, this fires when < 2.4h remain.
- */
-export function useExpiringSoon(
-  lastChildCreatedAt: Date | undefined,
-  retentionHours: number,
-): boolean {
-  return useMemo(() => {
-    if (!lastChildCreatedAt) return false;
-
-    const retentionMs = retentionHours * 60 * 60 * 1000;
-    const expiresAt = lastChildCreatedAt.getTime() + retentionMs;
-    const remaining = expiresAt - Date.now();
-
-    return remaining > 0 && remaining < retentionMs * 0.1;
-  }, [lastChildCreatedAt, retentionHours]);
-}

js/src/hooks/use-network-settings.ts

@@ -1,13 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiClient } from "@/api/client";
-
-export function useSetMessageRetention(networkId: string) {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: (hours: number) =>
-      apiClient.setMessageRetentionHours(networkId, hours),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["networks"] });
-    },
-  });
-}

js/src/hooks/use-particle.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import {
   subscribeToParticle,
   subscribeToParticleChildren,
@@ -26,13 +26,12 @@ export function useLiveParticle(path: ParticlePath): UseLiveParticleResult {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const docPath = useMemo(() => toFirestoreDocPath(path), [path]);
-
   useEffect(() => {
     setIsLoading(true);
     setError(null);
     setParticle(null);
 
+    const docPath = toFirestoreDocPath(path);
     const unsubscribe = subscribeToParticle(
       docPath,
       (data) => {
@@ -46,7 +45,7 @@ export function useLiveParticle(path: ParticlePath): UseLiveParticleResult {
     );
 
     return unsubscribe;
-  }, [docPath]);
+  }, [path]);
 
   return { particle, isLoading, error };
 }
@@ -57,47 +56,59 @@ interface UseLiveParticleChildrenResult {
   error: Error | null;
 }
 
+interface UseLiveParticleChildrenParams {
+  orderByField?: string;
+  orderDirection?: "asc" | "desc";
+  visibilityScopes?: string[];
+  onAdded?: (child: Particle) => void;
+  onRemoved?: (child: Particle, updatedChildren: Particle[]) => void;
+  whereFilter?: QueryFieldFilterConstraint;
+}
+
 export function useLiveParticleChildren(
   path: ParticlePath,
-  orderByField: string = "created_at",
-  orderDirection: "asc" | "desc" = "desc",
-  visibilityScopes?: string[],
-  onAdded?: (child: Particle) => void,
-  onRemoved?: (child: Particle, updatedChildren: Particle[]) => void,
-  whereFilter?: QueryFieldFilterConstraint
+  {
+    orderByField = "created_at",
+    orderDirection = "desc",
+    visibilityScopes,
+    onAdded,
+    onRemoved,
+    whereFilter,
+  }: UseLiveParticleChildrenParams = {}
 ): UseLiveParticleChildrenResult {
   const [children, setChildren] = useState<Particle[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const collectionPath = useMemo(() => toFirestoreChildrenPath(path), [path]);
-
   useEffect(() => {
     setIsLoading(true);
     setError(null);
     setChildren([]);
 
+    const collectionPath = toFirestoreChildrenPath(path);
+
     const unsubscribe = subscribeToParticleChildren(
       collectionPath,
-      (data) => {
-        setChildren(data);
-        setIsLoading(false);
-      },
-      (err) => {
-        setError(err);
-        setIsLoading(false);
-      },
-      visibilityScopes,
-      orderByField,
-      orderDirection,
-      onAdded,
-      onRemoved,
-      whereFilter,
+      {
+        onData: (data) => {
+          setChildren(data);
+          setIsLoading(false);
+        },
+        onError: (err) => {
+          setError(err);
+          setIsLoading(false);
+        },
+        visibilityScopes,
+        orderByField,
+        orderDirection,
+        onAdded,
+        onRemoved,
+        whereFilter,
+      }
     );
 
     return unsubscribe;
-    // FIX: do we need to listen to more deps? Would that cause side effects that break behavior
-  }, [collectionPath]);
+  }, [path]);
 
   return { children, isLoading, error };
 }

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

@@ -1,12 +1,10 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useLiveParticleChildren } from "@/hooks/use-particle";
 import { useAuthStore } from "@/stores/auth-store";
 import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
 import type { Particle, StreamProperties } from "@/api/types";
-import { where, Timestamp } from "firebase/firestore";
-import { useNetwork } from "@/hooks/use-networks";
 
-type StreamParticle = Particle & { type: "stream"; properties: StreamProperties };
+export type StreamParticle = Particle & { type: "stream"; properties: StreamProperties };
 
 function useVisibilityScopes(userId?: string, networkId?: string) {
   return useMemo(() => {
@@ -27,37 +25,14 @@ export function useStreamParticles(path: ParticlePath): UseStreamParticlesResult
   const { networkId } = parseParticlePath(path);
   const user = useAuthStore((s) => s.user);
   const visibilityScopes = useVisibilityScopes(user?.id, networkId);
-  const network = useNetwork(networkId);
-  const retentionHours = network?.message_retention_hours ?? 24;
-
-  const [recencyCutoff, setRecencyCutoff] = useState(() => {
-    const d = new Date();
-    d.setHours(d.getHours() - retentionHours);
-    return Timestamp.fromDate(d);
-  });
-
-  useEffect(() => {
-    // Recalculate immediately when retention changes
-    const d = new Date();
-    d.setHours(d.getHours() - retentionHours);
-    setRecencyCutoff(Timestamp.fromDate(d));
-
-    const interval = setInterval(() => {
-      const d = new Date();
-      d.setHours(d.getHours() - retentionHours);
-      setRecencyCutoff(Timestamp.fromDate(d));
-    }, 60 * 60 * 1000);
-    return () => clearInterval(interval);
-  }, [retentionHours]);
 
   const { children, isLoading } = useLiveParticleChildren(
     path,
-    "last_child_created_at",
-    "desc",
-    visibilityScopes,
-    undefined,
-    undefined,
-    where("last_child_created_at", ">=", recencyCutoff),
+    {
+      orderByField: "last_child_created_at",
+      orderDirection: "desc",
+      visibilityScopes,
+    }
   );
 
   const streams = useMemo(

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

@@ -4,8 +4,6 @@ import type { Particle } from "@/api/types";
 import { useLiveParticleChildren } from "@/hooks/use-particle";
 import { parseParticlePath, toFirestoreDocPath, type ParticlePath } from "@/lib/particle-path";
 import { updateStreamPlaybackMarker } from "@/lib/firestore-particles";
-import { where, Timestamp } from "firebase/firestore";
-import { useNetwork } from "@/hooks/use-networks";
 
 // --- Playback reducer (ID-based) ---
 
@@ -96,9 +94,6 @@ export function useStreamPlayback(
   path: ParticlePath,
 ): UseStreamPlaybackResult {
   const userId = useAuthStore((s) => s.user?.id);
-  const { networkId } = parseParticlePath(path);
-  const network = useNetwork(networkId);
-  const retentionHours = network?.message_retention_hours ?? 24;
   const [state, dispatch] = useReducer(playbackReducer, initialState);
   // Track the stream ID we've initialized for, to reset when navigating between streams
   const initializedForRef = useRef<string | null>(null);
@@ -118,15 +113,14 @@ export function useStreamPlayback(
     });
   });
 
-  const [recencyCutoff] = useState(() => {
-    const d = new Date();
-    d.setHours(d.getHours() - retentionHours);
-    return Timestamp.fromDate(d);
-  });
-
   const { children } = useLiveParticleChildren(
-    path, "created_at", "asc", undefined, onParticleAdded, onParticleRemoved,
-    where("created_at", ">=", recencyCutoff),
+    path,
+    {
+      orderByField: "created_at",
+      orderDirection: "asc",
+      onAdded: onParticleAdded,
+      onRemoved: onParticleRemoved
+    }
   );
 
   // Derive current index and particle from ID