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-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,
+  });
+}