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
2026-03-19 16:29:40 -07:00
parent 990137b829
commit 4b66d8e185
48 changed files with 2112 additions and 1482 deletions
@@ -0,0 +1,137 @@
+import { WindowControls } from "@/components/window-controls";
+import { Button } from "@/components/ui/button";
+import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Home, Settings } from "lucide-react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useNetworks } from "@/hooks/use-networks";
+import { particlePath } from "@/lib/particle-path";
+import { useParticle } from "@/hooks/use-particle";
+import type { Particle } from "@/api/types";
+
+function getParticleDisplayName(particle: Particle): string {
+  switch (particle.type) {
+    case "stream":
+    case "folder":
+      return particle.properties.name;
+    case "quest":
+      return particle.properties.title;
+    case "paper":
+      return particle.properties.title;
+    case "file":
+      return particle.properties.filename;
+    case "text":
+      return particle.properties.content.slice(0, 30);
+    case "media":
+      return particle.type;
+  }
+}
+
+function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
+  const { data: networks } = useNetworks();
+  const network = networks?.find((n) => n.id === networkId);
+  const name = network?.name ?? networkId;
+  const initials = name.slice(0, 2).toUpperCase();
+
+  return (
+    <span className="flex items-center gap-1.5">
+      <Avatar size="sm">
+        <AvatarFallback className="bg-primary/10 text-primary text-[10px] font-medium">
+          {initials}
+        </AvatarFallback>
+      </Avatar>
+      {name}
+    </span>
+  );
+}
+
+function TopBar() {
+  const navigate = useNavigate();
+  const { networkId, "*": rest } = useParams();
+  const segments = [networkId, ...rest?.split("/") ?? []].filter(Boolean);
+
+  const path = rest ? particlePath(networkId!, rest.split("/").filter(Boolean)) : undefined;
+
+  const { data: particle } = useParticle(path);
+
+  return (
+    <div className="drag-region flex items-center gap-3 border-b px-3 py-1">
+      <WindowControls />
+
+      <Breadcrumb className="no-drag">
+        <BreadcrumbList>
+          <BreadcrumbItem className="text-xs">
+            {segments.length === 0 ? (
+              <BreadcrumbPage className="flex items-center gap-1">
+                <Home className="size-3.5" />
+              </BreadcrumbPage>
+            ) : (
+              <BreadcrumbLink
+                className="flex cursor-pointer items-center gap-1"
+                onClick={() => navigate("/")}
+              >
+                <Home className="size-3.5" />
+              </BreadcrumbLink>
+            )}
+          </BreadcrumbItem>
+
+          {networkId && (
+            <span className="contents">
+              <BreadcrumbSeparator />
+              <BreadcrumbItem className="text-xs">
+                {segments.length === 1 ? (
+                  <BreadcrumbPage>
+                    <NetworkBreadcrumbContent networkId={networkId} />
+                  </BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink
+                    className="cursor-pointer"
+                    onClick={() => navigate(`/${networkId}`)}
+                  >
+                    <NetworkBreadcrumbContent networkId={networkId} />
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+            </span>
+          )}
+
+          {particle && (
+            <span key={path} className="contents">
+              <BreadcrumbSeparator />
+              <BreadcrumbItem className="text-xs">
+                <BreadcrumbPage>{getParticleDisplayName(particle)}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </span>
+          )}
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="flex-1" />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="no-drag text-muted-foreground"
+        onClick={() => navigate("/settings")}
+      >
+        <Settings className="size-3.5" />
+      </Button>
+    </div>
+  );
+}
+
+export default function Layout() {
+  return (
+    <div className="flex h-screen flex-col">
+      <TopBar />
+      <Outlet />
+    </div>
+  );
+}