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/App.tsx

@@ -8,8 +8,11 @@ import {
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query'
-import PathResolver from "./pages/path-resolver";
-import { SettingsPage } from "./pages/settings-page";
+import SettingsPage from "@/features/settings-page";
+import NetworkSelector from "@/features/network-selector";
+import NetworkRoot from "@/features/network-root";
+import ParticleViewResolver from "@/features/particles/particle-view-resolver";
+import Layout from "@/features/layout";
 
 const queryClient = new QueryClient();
 
@@ -37,12 +40,18 @@ const App = () => {
 };
 
 function AuthenticatedApp() {
-  // NOTE: Hash router provides history, despite using catch-all
   return (
     <HashRouter>
       <Routes>
-        <Route path="/settings" element={<SettingsPage />} />
-        <Route path="/*" element={<PathResolver />} />
+        <Route path="settings" element={<SettingsPage />} />
+
+        <Route path="/" element={<Layout />}>
+          <Route index element={<NetworkSelector />} />
+          <Route path=":networkId">
+            <Route index element={<NetworkRoot />} />
+            <Route path="*" element={<ParticleViewResolver />} />
+          </Route>
+        </Route>
       </Routes>
     </HashRouter>
   );