feat: implement more of playback and reply flow

js/src/stores/app-store.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { apiClient } from "@/api/client";
 import type {
+  AckInfo,
   NetworkWithStreams,
   Stream,
   StreamParticle,
@@ -16,6 +17,7 @@ interface AppState {
   addStream: (networkId: string, stream: Stream) => void;
   addParticleToStream: (streamId: string, particle: StreamParticle) => void;
   markParticlesSeen: (particleIds: string[]) => void;
+  ackParticle: (particleId: string, email: string) => void;
 }
 
 export const useAppStore = create<AppState>((set, get) => ({
@@ -66,6 +68,21 @@ export const useAppStore = create<AppState>((set, get) => ({
     });
   },
 
+  ackParticle: (particleId, email) => {
+    const ack: AckInfo = { email, acked_at: new Date().toISOString() };
+    set({
+      networks: get().networks.map((n) => ({
+        ...n,
+        streams: n.streams.map((s) => ({
+          ...s,
+          particles: s.particles.map((p) =>
+            p.id === particleId ? { ...p, acks: [...p.acks, ack] } : p,
+          ),
+        })),
+      })),
+    });
+  },
+
   markParticlesSeen: (particleIds) => {
     const idSet = new Set(particleIds);
     set({

js/src/stores/playback-store.ts

@@ -8,6 +8,7 @@ interface PlaybackState {
   particles: StreamParticle[];
   currentIndex: number;
   status: PlaybackStatus;
+  paused: boolean;
   downloadUrlCache: Record<string, string>;
 
   initStream: (
@@ -18,6 +19,8 @@ interface PlaybackState {
   next: () => void;
   prev: () => void;
   goTo: (index: number) => void;
+  pause: () => void;
+  resume: () => void;
   cacheDownloadUrl: (particleId: string, url: string) => void;
   reset: () => void;
 }
@@ -27,6 +30,7 @@ export const usePlaybackStore = create<PlaybackState>((set, get) => ({
   particles: [],
   currentIndex: 0,
   status: "idle",
+  paused: false,
   downloadUrlCache: {},
 
   initStream: (streamId, particles, startIndex) => {
@@ -42,26 +46,29 @@ export const usePlaybackStore = create<PlaybackState>((set, get) => ({
   next: () => {
     const { currentIndex, particles } = get();
     if (currentIndex < particles.length - 1) {
-      set({ currentIndex: currentIndex + 1 });
+      set({ currentIndex: currentIndex + 1, paused: false });
     } else {
-      set({ status: "ended" });
+      set({ status: "ended", paused: false });
     }
   },
 
   prev: () => {
     const { currentIndex } = get();
     if (currentIndex > 0) {
-      set({ currentIndex: currentIndex - 1, status: "playing" });
+      set({ currentIndex: currentIndex - 1, status: "playing", paused: false });
     }
   },
 
   goTo: (index) => {
     const { particles } = get();
     if (index >= 0 && index < particles.length) {
-      set({ currentIndex: index, status: "playing" });
+      set({ currentIndex: index, status: "playing", paused: false });
     }
   },
 
+  pause: () => set({ paused: true }),
+  resume: () => set({ paused: false }),
+
   cacheDownloadUrl: (particleId, url) => {
     set({
       downloadUrlCache: { ...get().downloadUrlCache, [particleId]: url },
@@ -74,6 +81,7 @@ export const usePlaybackStore = create<PlaybackState>((set, get) => ({
       particles: [],
       currentIndex: 0,
       status: "idle",
+      paused: false,
       downloadUrlCache: {},
     });
   },

js/src/stores/recording-store.ts

@@ -1,21 +1,54 @@
 import { create } from "zustand";
 
-type RecordingStatus = "idle" | "recording" | "uploading" | "error";
+type RecordingStatus = "idle" | "recording" | "reviewing" | "uploading" | "error";
+type RecordingMode = "video" | "audio";
+
+const RECORDING_MODE_KEY = "llink:recording-mode";
+
+function loadRecordingMode(): RecordingMode {
+  const stored = localStorage.getItem(RECORDING_MODE_KEY);
+  return stored === "audio" ? "audio" : "video";
+}
 
 interface RecordingState {
   status: RecordingStatus;
   error: string | null;
+  mediaStream: MediaStream | null;
+  recordingMode: RecordingMode;
+  reviewBlob: Blob | null;
+  reviewDurationMs: number;
 
   setStatus: (status: RecordingStatus) => void;
   setError: (error: string) => void;
+  setMediaStream: (stream: MediaStream | null) => void;
+  setRecordingMode: (mode: RecordingMode) => void;
+  setReviewBlob: (blob: Blob, durationMs: number) => void;
   reset: () => void;
 }
 
 export const useRecordingStore = create<RecordingState>((set) => ({
   status: "idle",
   error: null,
+  mediaStream: null,
+  recordingMode: loadRecordingMode(),
+  reviewBlob: null,
+  reviewDurationMs: 0,
 
   setStatus: (status) => set({ status, error: null }),
   setError: (error) => set({ status: "error", error }),
-  reset: () => set({ status: "idle", error: null }),
+  setMediaStream: (mediaStream) => set({ mediaStream }),
+  setRecordingMode: (recordingMode) => {
+    localStorage.setItem(RECORDING_MODE_KEY, recordingMode);
+    set({ recordingMode });
+  },
+  setReviewBlob: (reviewBlob, reviewDurationMs) =>
+    set({ status: "reviewing", reviewBlob, reviewDurationMs }),
+  reset: () =>
+    set({
+      status: "idle",
+      error: null,
+      mediaStream: null,
+      reviewBlob: null,
+      reviewDurationMs: 0,
+    }),
 }));