feat: list streams and story-mode catchup

js/src/stores/app-store.ts

@@ -1,24 +1,90 @@
 import { create } from "zustand";
 import { apiClient } from "@/api/client";
-import type { StartupResponse } from "@/api/types";
+import type {
+  NetworkWithStreams,
+  Stream,
+  StreamParticle,
+} from "@/api/types";
 
 interface AppState {
-  startupData: StartupResponse | null;
+  networks: NetworkWithStreams[];
+  selectedNetworkId: string | null;
   isLoading: boolean;
+
   fetchStartup: () => Promise<void>;
+  setSelectedNetwork: (id: string | null) => void;
+  addStream: (networkId: string, stream: Stream) => void;
+  addParticleToStream: (streamId: string, particle: StreamParticle) => void;
+  markParticlesSeen: (particleIds: string[]) => void;
 }
 
-export const useAppStore = create<AppState>((set) => ({
-  startupData: null,
+export const useAppStore = create<AppState>((set, get) => ({
+  networks: [],
+  selectedNetworkId: null,
   isLoading: false,
 
   fetchStartup: async () => {
     set({ isLoading: true });
     try {
       const data = await apiClient.startup();
-      set({ startupData: data });
+      const state = get();
+      const shouldAutoSelect =
+        !state.selectedNetworkId && data.networks.length > 0;
+      set({
+        networks: data.networks,
+        ...(shouldAutoSelect
+          ? { selectedNetworkId: data.networks[0].id }
+          : {}),
+      });
     } finally {
       set({ isLoading: false });
     }
   },
+
+  setSelectedNetwork: (id) => {
+    set({ selectedNetworkId: id });
+  },
+
+  addStream: (networkId, stream) => {
+    set({
+      networks: get().networks.map((n) =>
+        n.id === networkId ? { ...n, streams: [stream, ...n.streams] } : n,
+      ),
+    });
+  },
+
+  addParticleToStream: (streamId, particle) => {
+    set({
+      networks: get().networks.map((n) => ({
+        ...n,
+        streams: n.streams.map((s) =>
+          s.id === streamId
+            ? { ...s, particles: [...s.particles, particle] }
+            : s,
+        ),
+      })),
+    });
+  },
+
+  markParticlesSeen: (particleIds) => {
+    const idSet = new Set(particleIds);
+    set({
+      networks: get().networks.map((n) => ({
+        ...n,
+        streams: n.streams.map((s) => {
+          const unseenMarked = s.particles.filter(
+            (p) => !p.seen && idSet.has(p.id),
+          ).length;
+          if (unseenMarked === 0) return s;
+          return {
+            ...s,
+            unseen_count: Math.max(0, s.unseen_count - unseenMarked),
+            particles: s.particles.map((p) =>
+              idSet.has(p.id) ? { ...p, seen: true } : p,
+            ),
+          };
+        }),
+      })),
+    });
+  },
 }));

js/src/stores/playback-store.ts

@@ -0,0 +1,80 @@
+import { create } from "zustand";
+import type { StreamParticle } from "@/api/types";
+
+type PlaybackStatus = "idle" | "playing" | "ended";
+
+interface PlaybackState {
+  streamId: string | null;
+  particles: StreamParticle[];
+  currentIndex: number;
+  status: PlaybackStatus;
+  downloadUrlCache: Record<string, string>;
+
+  initStream: (
+    streamId: string,
+    particles: StreamParticle[],
+    startIndex: number,
+  ) => void;
+  next: () => void;
+  prev: () => void;
+  goTo: (index: number) => void;
+  cacheDownloadUrl: (particleId: string, url: string) => void;
+  reset: () => void;
+}
+
+export const usePlaybackStore = create<PlaybackState>((set, get) => ({
+  streamId: null,
+  particles: [],
+  currentIndex: 0,
+  status: "idle",
+  downloadUrlCache: {},
+
+  initStream: (streamId, particles, startIndex) => {
+    set({
+      streamId,
+      particles,
+      currentIndex: startIndex,
+      status: particles.length > 0 ? "playing" : "ended",
+      downloadUrlCache: {},
+    });
+  },
+
+  next: () => {
+    const { currentIndex, particles } = get();
+    if (currentIndex < particles.length - 1) {
+      set({ currentIndex: currentIndex + 1 });
+    } else {
+      set({ status: "ended" });
+    }
+  },
+
+  prev: () => {
+    const { currentIndex } = get();
+    if (currentIndex > 0) {
+      set({ currentIndex: currentIndex - 1, status: "playing" });
+    }
+  },
+
+  goTo: (index) => {
+    const { particles } = get();
+    if (index >= 0 && index < particles.length) {
+      set({ currentIndex: index, status: "playing" });
+    }
+  },
+
+  cacheDownloadUrl: (particleId, url) => {
+    set({
+      downloadUrlCache: { ...get().downloadUrlCache, [particleId]: url },
+    });
+  },
+
+  reset: () => {
+    set({
+      streamId: null,
+      particles: [],
+      currentIndex: 0,
+      status: "idle",
+      downloadUrlCache: {},
+    });
+  },
+}));

js/src/stores/recording-store.ts

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+
+type RecordingStatus = "idle" | "recording" | "uploading" | "error";
+
+interface RecordingState {
+  status: RecordingStatus;
+  error: string | null;
+
+  setStatus: (status: RecordingStatus) => void;
+  setError: (error: string) => void;
+  reset: () => void;
+}
+
+export const useRecordingStore = create<RecordingState>((set) => ({
+  status: "idle",
+  error: null,
+
+  setStatus: (status) => set({ status, error: null }),
+  setError: (error) => set({ status: "error", error }),
+  reset: () => set({ status: "idle", error: null }),
+}));