fix: playback restarting from start of stream

This does a major refactor to using particleId for state of playback
instead of index, since index would change if the particle children data
does partial hydrations and a particle's index changes. Also it
abstracts much of the playback details from the view component.

js/src/features/particles/stream-view.tsx

@@ -1,9 +1,8 @@
-import { useState, useEffect, useEffectEvent, useCallback, useReducer, useRef } from "react";
+import { useState, useEffect, useEffectEvent, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthStore } from "@/stores/auth-store";
 import type { Particle } from "@/api/types";
-import { useLiveParticleChildren } from "@/hooks/use-particle";
-import { parseParticlePath, toFirestoreDocPath, type ParticlePath } from "@/lib/particle-path";
+import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
 import { ComposeOverlay } from "@/features/compose/compose-overlay";
 import { PlaybackPageIndicator } from "@/features/particles/playback-page-indicator";
 import { MediaParticleView } from "@/features/particles/media-particle-view";
@@ -11,7 +10,6 @@ import { TextParticleView } from "@/features/particles/text-particle-view";
 import { FallbackParticleView } from "@/features/particles/fallback-particle-view";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import ControlsIndicator from "@/features/compose/controls-indicator";
-import { updateStreamPlaybackMarker } from "@/lib/firestore-particles";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useNetwork, useNetworks } from "@/hooks/use-networks";
 import { Button } from "@/components/ui/button";
@@ -19,6 +17,7 @@ import { Home, Settings } from "lucide-react";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
 import { WindowControls } from "@/components/window-controls";
 import { formatDistanceToNow } from "@/lib/time-utils";
+import { useStreamPlayback } from "@/hooks/use-stream-playback";
 
 function getParticleDisplayName(particle: Particle): string {
   switch (particle.type) {
@@ -38,92 +37,13 @@ function getParticleDisplayName(particle: Particle): string {
   }
 }
 
-// --- Playback reducer ---
-
-type PlaybackStatus = "idle" | "playing" | "ended";
-
-interface PlaybackState {
-  currentIndex: number;
-  status: PlaybackStatus;
-  paused: boolean;
-}
-
-type PlaybackAction =
-  | { type: "INIT"; particleCount: number, initialIndex?: number }
-  | { type: "NEXT"; particleCount: number }
-  | { type: "PREV" }
-  | { type: "GO_TO"; index: number; particleCount: number }
-  | { type: "PAUSE" }
-  | { type: "RESUME" }
-  | { type: "SYNC_PARTICLES"; particleCount: number };
-
-function playbackReducer(
-  state: PlaybackState,
-  action: PlaybackAction,
-): PlaybackState {
-  switch (action.type) {
-    case "INIT":
-      return {
-        currentIndex: action.initialIndex ?? 0,
-        status: action.particleCount > 0 ? "playing" : "idle",
-        paused: false,
-      };
-    case "NEXT":
-      if (state.currentIndex < action.particleCount - 1) {
-        return { ...state, currentIndex: state.currentIndex + 1, paused: false };
-      }
-      return { ...state, status: "ended", paused: false };
-    case "PREV":
-      if (state.currentIndex > 0) {
-        return {
-          ...state,
-          currentIndex: state.currentIndex - 1,
-          status: "playing",
-          paused: false,
-        };
-      }
-      return state;
-    case "GO_TO":
-      if (action.index >= 0 && action.index < action.particleCount) {
-        return {
-          ...state,
-          currentIndex: action.index,
-          status: "playing",
-          paused: false,
-        };
-      }
-      return state;
-    case "PAUSE":
-      return { ...state, paused: true };
-    case "RESUME":
-      return { ...state, paused: false };
-    case "SYNC_PARTICLES":
-      // Clamp index if particles were removed; don't reset position
-      if (action.particleCount === 0) {
-        return { currentIndex: 0, status: "idle", paused: state.paused };
-      }
-      if (state.status === "ended" && state.currentIndex < action.particleCount - 1) {
-        // New particle appended — resume and advance to it
-        return { ...state, currentIndex: state.currentIndex + 1, status: "playing", paused: false };
-      }
-      if (state.currentIndex >= action.particleCount) {
-        return { ...state, currentIndex: action.particleCount - 1 };
-      }
-      return state;
-  }
-}
-
-const initialState: PlaybackState = {
-  currentIndex: 0,
-  status: "idle",
-  paused: false,
-};
-
 // --- Exit countdown hook ---
 
 const EXIT_DELAY_MS = 5000;
 const EXIT_TICK_MS = 100;
 
+type PlaybackStatus = "idle" | "playing" | "ended";
+
 function useExitCountdown(
   status: PlaybackStatus,
   composeActive: boolean,
@@ -179,88 +99,43 @@ interface StreamViewProps {
 export function StreamView({ path, streamParticle }: StreamViewProps) {
   const { networkId } = parseParticlePath(path);
   const navigate = useNavigate();
-  const { children } = useLiveParticleChildren(path, "created_at", "asc");
 
-  const [state, dispatch] = useReducer(playbackReducer, initialState);
+  const {
+    children,
+    currentParticle,
+    currentIndex,
+    status,
+    paused,
+    next,
+    prev,
+    goTo,
+    pause,
+    resume,
+  } = useStreamPlayback(streamParticle, path);
+
   const [composeActive, setComposeActive] = useState(false);
   const [progress, setProgress] = useState(0);
-  const hasInitializedRef = useRef<string | null>(null);
 
   const handleExitNavigate = useCallback(() => {
     navigate(`/${networkId}`);
   }, [navigate, networkId]);
 
   const exitRemainingMs = useExitCountdown(
-    state.status,
+    status,
     composeActive,
     handleExitNavigate,
   );
 
-  const userId = useAuthStore((s) => s.user?.id);
-
   // Reset progress when particle changes
   useEffect(() => {
     setProgress(0);
-  }, [state.currentIndex]);
-
-  // Init playback once per stream entry, only after children have loaded
-  useEffect(() => {
-    if (children.length === 0) return;
-    if (hasInitializedRef.current === streamParticle.id) return;
-    hasInitializedRef.current = streamParticle.id;
-
-    const playbackPosition = streamParticle.playback_markers?.[userId ?? ""];
-    let initialIndex = 0;
-
-    if (playbackPosition) {
-      const foundIndex = children.findIndex(
-        (c) => c.created_at.getTime() === playbackPosition.getTime(),
-      );
-      if (foundIndex !== -1) {
-        initialIndex = foundIndex;
-      }
-    }
-
-    dispatch({ type: "INIT", particleCount: children.length, initialIndex });
-  }, [streamParticle.id, userId, children]);
-
-  // Sync on subsequent changes (new particle appended, removed, etc.)
-  useEffect(() => {
-    if (hasInitializedRef.current !== streamParticle.id) return;
-    dispatch({ type: "SYNC_PARTICLES", particleCount: children.length });
-  }, [children.length, streamParticle.id]);
+  }, [currentParticle?.id]);
 
   // Pause/resume playback when compose overlay opens/closes
   useEffect(() => {
-    if (composeActive) dispatch({ type: "PAUSE" });
-    else dispatch({ type: "RESUME" });
-  }, [composeActive]);
-
-  const next = useCallback(() => {
-    dispatch({ type: "NEXT", particleCount: children.length });
-  }, [children.length]);
-
-  const prev = useCallback(() => {
-    dispatch({ type: "PREV" });
-  }, []);
-
-  const goTo = useCallback(
-    (index: number) => {
-      dispatch({ type: "GO_TO", index, particleCount: children.length });
-    },
-    [children.length],
-  );
-
-  // Click-to-navigate: left 30% = prev, right 70% = next
-  const handlePlaybackClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const rect = e.currentTarget.getBoundingClientRect();
-      const x = (e.clientX - rect.left) / rect.width;
-      if (x < 0.3) prev();
-      else if (x > 0.7) next();
-    },
-    [prev, next],
-  );
+    if (composeActive) pause();
+    else resume();
+  }, [composeActive, pause, resume]);
 
   // Playback keyboard: arrows, escape
   useEffect(() => {
@@ -299,18 +174,16 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
     [composeActive, next, prev, navigate, networkId],
   );
 
-  const currentParticle = children[state.currentIndex] ?? null;
-
-  useEffect(() => {
-    if (!userId || !currentParticle) return;
-
-    const streamDocPath = toFirestoreDocPath(path);
-    updateStreamPlaybackMarker(streamDocPath, userId, currentParticle.created_at);
-  }, [currentParticle?.id, path])
-
-  // Author info from current particle
-  const authorEmail = currentParticle?.created_by_email ?? "";
-  const authorInitials = authorEmail.split("@")[0]?.slice(0, 2).toUpperCase() ?? "";
+  // Click-to-navigate: left 30% = prev, right 70% = next
+  const handlePlaybackClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      if (x < 0.3) prev();
+      else if (x > 0.7) next();
+    },
+    [prev, next],
+  );
 
   if (children.length === 0) {
     return (
@@ -328,7 +201,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
     );
   }
 
-  // Render particle content inline (replaces ParticleRenderer)
+  // Render particle content inline
   function renderParticle(particle: Particle) {
     switch (particle.type) {
       case "media":
@@ -336,7 +209,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
           <MediaParticleView
             key={particle.id}
             particle={particle}
-            paused={state.paused}
+            paused={paused}
             onEnded={next}
             onProgress={setProgress}
           />
@@ -346,7 +219,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
           <TextParticleView
             key={particle.id}
             particle={particle}
-            paused={state.paused}
+            paused={paused}
             onEnded={next}
             onProgress={setProgress}
           />
@@ -362,7 +235,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
       <div className="z-10 absolute left-0 right-0">
         <PlaybackPageIndicator
           total={children.length}
-          current={state.currentIndex}
+          current={currentIndex}
           progress={progress}
           onGoTo={goTo}
         />
@@ -394,7 +267,9 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
       <div className="absolute right-0 bottom-0 z-10">
         <ControlsIndicator type={"reply"}>
           <div className="flex items-center gap-1 text-xs text-white/70">
-            <SeenIndicator stream={streamParticle} currentParticle={currentParticle} networkId={networkId} />
+            {currentParticle && (
+              <SeenIndicator stream={streamParticle} currentParticle={currentParticle} networkId={networkId} />
+            )}
             {/* Exit countdown */}
             {exitRemainingMs !== null && (
               <span>
@@ -408,7 +283,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
   );
 }
 
-function TopBar({ networkId, particle, streamParticle }: { networkId: string; particle: Particle; streamParticle: Particle & { type: "stream" } }) {
+function TopBar({ networkId, particle, streamParticle }: { networkId: string; particle: Particle | null; streamParticle: Particle & { type: "stream" } }) {
   const navigate = useNavigate();
 
   return (