feat: initial conversational flow (#37)

* chore: only set visibility for container particles

* create reusable controls indicator for reply or new

* compress the size of top bar

* refactor: restructure state, routing, and more

* introduce stream compose flow

* feat: compose new stream full flow

* implement stream player

* fix: prevent redirect for signed object urls

* fix: implement stream playback cleaner structure

* refactor: layout file name

* feat: show stream name in breadcrumbs

* chore: tweak padding

* chore: adjust position of audio bars

* feat: show latest particle preview in stream list

* fix: remove console log

* refactor: reorder classes

* fix: avoid passing in updated_at to firestore particle

* refactor: extract properties for container particles to flat fields in firestore

* make the stream previews look alive

* feat: show audio bars during audio clip playback

* feat: order streams by last child creation

* feat: playback where I left off

* chore: remove unused store

* fix: recording mode not using shared state

* chore: clean unused variable

* remove unused imports

* fix: improve controls indicator immersion

* feat: show playback progress in bar & auto-play text

* feat: auto-exit stream on playback completion

* fix: jittery media playback progress

* fix: navigate during state change is invalid with react router

* fix: buggy exit progress when changing clips

* feat: add app icon

* update package.json info

* feat: only show streams visible to me

* feat: show seen indicator on particles

* fix: prevent unnecessary effects

* fix: play new particle after playback is ended

* use contols indicator for exit timer

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

@@ -1,24 +1,53 @@
 import { useMutation } from "@tanstack/react-query";
-import { createParticle } from "@/lib/firestore-particles";
+import { createParticle, updateStreamLastChildAt } from "@/lib/firestore-particles";
 import type { ParticleType, ParticlePropertiesMap } from "@/api/types";
+import { particlePath, ParticlePath, toFirestoreChildrenPath, toFirestoreDocPath } from "@/lib/particle-path";
 
 interface CreateParticleParams<T extends ParticleType = ParticleType> {
-  collectionPath: string;
+  // Path to which the new particle will be added as a child
+  path: ParticlePath;
   type: T;
   properties: ParticlePropertiesMap[T];
   createdByEmail: string;
-  visibleTo: string[];
 }
 
 export function useCreateParticle() {
   return useMutation({
-    mutationFn: (params: CreateParticleParams) =>
-      createParticle(
-        params.collectionPath,
+    mutationFn: async (params: CreateParticleParams) => {
+      const collectionPath = toFirestoreChildrenPath(params.path);
+      const result = await createParticle(
+        collectionPath,
         params.type,
         params.properties,
         params.createdByEmail,
+      );
+
+      const streamDocPath = toFirestoreDocPath(params.path);
+      await updateStreamLastChildAt(streamDocPath);
+      return result;
+    }
+  });
+}
+
+type CreateStreamParticleParams = {
+  networkId: string;
+  properties: ParticlePropertiesMap["stream"];
+  createdByEmail: string;
+  visibleTo?: string[];
+};
+
+export function useCreateStreamParticle() {
+  return useMutation({
+    mutationFn: async (params: CreateStreamParticleParams) => {
+      const path = particlePath(params.networkId, []);
+      const networkCollectionPath = toFirestoreChildrenPath(path);
+      return await createParticle(
+        networkCollectionPath,
+        "stream",
+        params.properties,
+        params.createdByEmail,
         params.visibleTo,
-      ),
+      );
+    }
   });
 }

js/src/hooks/use-download-url.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/api/client";
+
+export function useDownloadUrl(objectId: string) {
+  return useQuery({
+    queryKey: ["download-url", objectId],
+    queryFn: () => apiClient.getParticleDownloadUrl(objectId),
+  });
+}

js/src/hooks/use-networks.ts

@@ -7,3 +7,8 @@ export function useNetworks() {
     queryFn: () => apiClient.listNetworks(),
   });
 }
+
+export function useNetwork(networkId: string) {
+  const { data: networks } = useNetworks();
+  return networks?.find((n) => n.id === networkId) || null;
+}

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

@@ -1,46 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import { subscribeToParticleChildren } from "@/lib/firestore-particles";
-import { firestorePath } from "@/lib/firestore-paths";
-import type { Particle } from "@/api/types";
-
-interface UseParticleChildrenResult {
-  children: Particle[];
-  isLoading: boolean;
-  error: Error | null;
-}
-
-export function useParticleChildren(
-  networkId: string,
-  parentSegments: string[],
-): UseParticleChildrenResult {
-  const [children, setChildren] = useState<Particle[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  const collectionPath = useMemo(() => {
-    if (parentSegments.length === 0) return firestorePath(networkId, []);
-    return `${firestorePath(networkId, parentSegments)}/children`;
-  }, [networkId, parentSegments.join("/")]);
-
-  useEffect(() => {
-    setIsLoading(true);
-    setError(null);
-    setChildren([]);
-
-    const unsubscribe = subscribeToParticleChildren(
-      collectionPath,
-      (data) => {
-        setChildren(data);
-        setIsLoading(false);
-      },
-      (err) => {
-        setError(err);
-        setIsLoading(false);
-      },
-    );
-
-    return unsubscribe;
-  }, [collectionPath]);
-
-  return { children, isLoading, error };
-}

js/src/hooks/use-particle.ts

@@ -1,26 +1,30 @@
 import { useState, useEffect, useMemo } from "react";
-import { subscribeToParticle } from "@/lib/firestore-particles";
-import { firestorePath } from "@/lib/firestore-paths";
+import {
+  subscribeToParticle,
+  subscribeToParticleChildren,
+  subscribeToLatestChild,
+  getParticle,
+} from "@/lib/firestore-particles";
 import type { Particle } from "@/api/types";
+import {
+  type ParticlePath,
+  toFirestoreDocPath,
+  toFirestoreChildrenPath,
+} from "@/lib/particle-path";
+import { useQuery } from "@tanstack/react-query";
 
-interface UseParticleResult {
+interface UseLiveParticleResult {
   particle: Particle | null;
   isLoading: boolean;
   error: Error | null;
 }
 
-export function useParticle(
-  networkId: string,
-  segments: string[],
-): UseParticleResult {
+export function useLiveParticle(path: ParticlePath): UseLiveParticleResult {
   const [particle, setParticle] = useState<Particle | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const path = useMemo(
-    () => firestorePath(networkId, segments),
-    [networkId, segments.join("/")],
-  );
+  const docPath = useMemo(() => toFirestoreDocPath(path), [path]);
 
   useEffect(() => {
     setIsLoading(true);
@@ -28,7 +32,7 @@ export function useParticle(
     setParticle(null);
 
     const unsubscribe = subscribeToParticle(
-      path,
+      docPath,
       (data) => {
         setParticle(data);
         setIsLoading(false);
@@ -40,7 +44,96 @@ export function useParticle(
     );
 
     return unsubscribe;
-  }, [path]);
+  }, [docPath]);
 
   return { particle, isLoading, error };
 }
+
+interface UseLiveParticleChildrenResult {
+  children: Particle[];
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function useLiveParticleChildren(
+  path: ParticlePath,
+  orderByField: string = "created_at",
+  orderDirection: "asc" | "desc" = "desc",
+  visibilityScopes?: string[],
+): 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 unsubscribe = subscribeToParticleChildren(
+      collectionPath,
+      (data) => {
+        setChildren(data);
+        setIsLoading(false);
+      },
+      (err) => {
+        setError(err);
+        setIsLoading(false);
+      },
+      visibilityScopes,
+      orderByField,
+      orderDirection,
+    );
+
+    return unsubscribe;
+  }, [collectionPath]);
+
+  return { children, isLoading, error };
+}
+
+interface UseLiveLatestChildResult {
+  latestChild: Particle | null;
+  isLoading: boolean;
+}
+
+export function useLiveLatestChild(path: ParticlePath): UseLiveLatestChildResult {
+  const [latestChild, setLatestChild] = useState<Particle | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const collectionPath = useMemo(() => toFirestoreChildrenPath(path), [path]);
+
+  useEffect(() => {
+    setIsLoading(true);
+    setLatestChild(null);
+
+    const unsubscribe = subscribeToLatestChild(
+      collectionPath,
+      (data) => {
+        setLatestChild(data);
+        setIsLoading(false);
+      },
+      () => {
+        setIsLoading(false);
+      },
+    );
+
+    return unsubscribe;
+  }, [collectionPath]);
+
+  return { latestChild, isLoading };
+}
+
+export function useParticle(path?: ParticlePath) {
+  return useQuery({
+    queryKey: ["particle", path],
+    queryFn: async () => {
+      if (!path) return null;
+      const docPath = toFirestoreDocPath(path);
+      const particle = await getParticle(docPath);
+      return particle;
+    },
+    enabled: !!path,
+  });
+}

js/src/hooks/use-recording-mode.ts

@@ -0,0 +1,19 @@
+import { useState, useCallback } from "react";
+
+export type RecordingMode = "video" | "audio";
+
+const KEY = "llink:recording-mode";
+
+export function useRecordingMode(): [RecordingMode, (mode: RecordingMode) => void] {
+  const [mode, setModeState] = useState<RecordingMode>(() => {
+    const stored = localStorage.getItem(KEY);
+    return stored === "audio" ? "audio" : "video";
+  });
+
+  const setMode = useCallback((m: RecordingMode) => {
+    localStorage.setItem(KEY, m);
+    setModeState(m);
+  }, []);
+
+  return [mode, setMode];
+}