chore: integrate firestore for particles (#32)

* plumb for firestore * chore: cleanup orion api to only include essentials * setup boilerplate for data and rendering This includes zod types creation for API response validation, and exploration of path based resolution of rendering particles. * chore: structure container particles for rendering children * wire firestore crud for particles * integrate visibility to particles * docs: explain particle view resolver
2026-03-17 19:52:31 -07:00
parent 377537b892
commit 51857bed63
25 changed files with 1585 additions and 2372 deletions
@@ -0,0 +1,86 @@
+import { useNavigate } from "react-router-dom";
+import { LogOut } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Muted } from "@/components/ui/typography";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAuthStore } from "@/stores/auth-store";
+import { WindowControls } from "@/components/window-controls";
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/api/client";
+import { Progress } from "@/components/ui/progress";
+
+export function NetworkSelector() {
+  const navigate = useNavigate();
+  const signOut = useAuthStore((s) => s.signOut);
+  const user = useAuthStore((s) => s.user);
+
+  const { data, isPending, error } = useQuery({
+    queryKey: ["networks"],
+    queryFn: () => apiClient.listNetworks(),
+  });
+
+  if (isPending) {
+    return <Progress />;
+  }
+
+  if (error) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-destructive text-sm">Failed to load networks</p>
+        <p>{error.message}</p>
+      </div>
+    );
+  }
+
+  if (data?.length === 0) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center gap-4 px-4 text-center max-w-sm mx-auto">
+        <p className="text-muted-foreground">
+          You don't have access to any networks yet. Please email us to get started.
+        </p>
+        <a href="mailto:[email protected]" className="text-primary underline">
+          team@flowylabs.ai
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="drag-region flex items-center gap-3 border-b px-4 py-3">
+        <WindowControls />
+        <div className="flex-1" />
+        {user && <Muted className="text-xs">{user.email_prefix}</Muted>}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="no-drag text-muted-foreground"
+          onClick={signOut}
+        >
+          <LogOut className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      <div className="flex flex-1 items-center justify-center p-4">
+        <Select onValueChange={(value) => navigate(`/${value}`)}>
+          <SelectTrigger className="no-drag w-64">
+            <SelectValue placeholder="Select a network" />
+          </SelectTrigger>
+          <SelectContent>
+            {data?.map((network) => (
+              <SelectItem key={network.id} value={network.id}>
+                {network.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,20 @@
+import { Particle } from "@/api/types";
+import { useParticleChildren } from "@/hooks/use-particle-children";
+
+interface FolderViewProps {
+  folderParticle: Particle;
+  networkId: string;
+  particleSegments: string[];
+}
+
+export function FolderView({ networkId, particleSegments, folderParticle }: FolderViewProps) {
+  const { children, error, isLoading } = useParticleChildren(networkId, particleSegments);
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <p className="text-muted-foreground text-sm">
+        Folder view — {networkId}/{particleSegments.join("/")}
+      </p>
+    </div>
+  );
+}
@@ -0,0 +1,43 @@
+import { useParticleChildren } from "@/hooks/use-particle-children";
+
+interface ParticleListViewProps {
+  networkId: string;
+  particleSegments: string[];
+}
+
+/**
+ * Grid/list of child particles for a container (folder, stream root, or network root).
+ */
+export function ParticleListView({ networkId, particleSegments }: ParticleListViewProps) {
+  const { children, isLoading } = useParticleChildren(networkId, particleSegments);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground text-sm">Loading particles...</p>
+      </div>
+    );
+  }
+
+  if (children.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground text-sm">No particles yet</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-3 p-4">
+      {children.map((child) => (
+        <div
+          key={child.id}
+          className="rounded-lg border p-3 text-sm"
+        >
+          <p className="font-medium">{child.id}</p>
+          <p className="text-muted-foreground text-xs">{child.type}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,65 @@
+import { useParticle } from "@/hooks/use-particle";
+import { StreamView } from "./stream-view";
+import { FolderView } from "./folder-view";
+import { ParticleListView } from "./particle-list-view";
+import { isContainerType } from "@/api/types";
+
+interface ParticleViewResolverProps {
+  networkId: string;
+  particleSegments: string[];
+}
+
+/**
+ * Resolves a particle by its path segments and renders the appropriate view
+ * based on particle type (e.g. stream would show clips in story mode, folder would list files, etc.)
+ */
+export function ParticleViewResolver({ networkId, particleSegments }: ParticleViewResolverProps) {
+  const { particle, isLoading, error } = useParticle(networkId, particleSegments);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground text-sm">Loading...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-destructive text-sm">Failed to load particle</p>
+      </div>
+    );
+  }
+
+  // While the hook is stubbed, particle will be null — show a placeholder
+  if (!particle) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground text-sm">
+          Particle: {particleSegments.join(" / ")}
+        </p>
+      </div>
+    );
+  }
+
+  switch (particle.type) {
+    case "stream":
+      return <StreamView streamParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
+    case "folder":
+      return <FolderView folderParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
+    default:
+      // For container types we haven't built a view for, fall back to list
+      if (isContainerType(particle.type)) {
+        return <ParticleListView networkId={networkId} particleSegments={particleSegments} />;
+      }
+      // Leaf particle — placeholder
+      return (
+        <div className="flex h-full items-center justify-center">
+          <p className="text-muted-foreground text-sm">
+            {particle.type} particle: {particle.id}
+          </p>
+        </div>
+      );
+  }
+}
@@ -0,0 +1,36 @@
+import { Particle } from "@/api/types";
+import { useParticleChildren } from "@/hooks/use-particle-children";
+
+interface StreamViewProps {
+  streamParticle: Particle;
+  networkId: string;
+  particleSegments: string[];
+}
+
+export function StreamView({ networkId, particleSegments, streamParticle }: StreamViewProps) {
+  const { children, error, isLoading } = useParticleChildren(networkId, particleSegments);
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <p className="text-muted-foreground text-sm">
+        Stream view — {networkId}/{particleSegments.join("/")}
+      </p>
+
+      {isLoading && <p className="text-muted-foreground text-sm">Loading stream data...</p>}
+      {error && <p className="text-destructive text-sm">Failed to load stream data</p>}
+
+      {!isLoading && !error && (
+        <div className="mt-4">
+          <p className="text-sm font-medium">Stream Children:</p>
+          <ul className="list-disc list-inside">
+            {children.map((child) => (
+              <li key={child.id} className="text-sm">
+                {child.id} ({child.type})
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -1,98 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { useAppStore } from "@/stores/app-store";
-import { flattenStreams } from "@/lib/stream-utils";
-import { formatDistanceToNow } from "@/lib/time-utils";
-import { ParticlePreview } from "./particle-preview";
-
-function getInitials(email: string): string {
-  const prefix = email.split("@")[0] ?? "";
-  return prefix.slice(0, 2).toUpperCase();
-}
-
-export function StreamList() {
-  const networks = useAppStore((s) => s.networks);
-  const selectedNetworkId = useAppStore((s) => s.selectedNetworkId);
-  const navigate = useNavigate();
-
-  const streams = flattenStreams(networks, selectedNetworkId);
-
-  if (streams.length === 0) {
-    return (
-      <div className="flex flex-1 items-center justify-center">
-        <p className="text-muted-foreground text-sm">No streams yet</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-2 gap-3 p-4">
-      {streams.map((stream) => {
-        const lastParticle =
-          stream.particles.length > 0
-            ? stream.particles[stream.particles.length - 1]
-            : null;
-
-        const timeSource = lastParticle?.created_at ?? stream.updated_at;
-        const senderEmail = lastParticle?.created_by_email;
-        const senderPrefix = senderEmail?.split("@")[0];
-
-        return (
-          <Card
-            key={stream.id}
-            size="sm"
-            className="hover:bg-accent/50 cursor-pointer overflow-hidden transition-colors pt-0!"
-            onClick={() => navigate(`/streams/${stream.id}`)}
-          >
-            {/* Preview hero area */}
-            <div className="relative aspect-[4/3] overflow-hidden">
-              {lastParticle ? (
-                <ParticlePreview particle={lastParticle} />
-              ) : (
-                <div className="flex h-full w-full items-center justify-center">
-                  <p className="text-muted-foreground text-xs italic">
-                    No messages yet
-                  </p>
-                </div>
-              )}
-
-              {/* Unseen badge overlay */}
-              {stream.unseen_count > 0 && (
-                <Badge
-                  variant="default"
-                  className="absolute top-1.5 right-1.5 text-[10px]"
-                >
-                  {stream.unseen_count}
-                </Badge>
-              )}
-            </div>
-
-            {/* Footer: avatar + stream info */}
-            <div className="flex items-center gap-2 px-3 py-2">
-              {senderEmail ? (
-                <Avatar size="sm">
-                  <AvatarFallback className="text-[10px]">
-                    {getInitials(senderEmail)}
-                  </AvatarFallback>
-                </Avatar>
-              ) : (
-                <div className="size-6 shrink-0" />
-              )}
-
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium">{stream.name}</p>
-                <p className="text-muted-foreground truncate text-[11px]">
-                  {senderPrefix && <span>{senderPrefix}</span>}
-                  {senderPrefix && timeSource && <span> &middot; </span>}
-                  {timeSource && <span>{formatDistanceToNow(timeSource)}</span>}
-                </p>
-              </div>
-            </div>
-          </Card>
-        );
-      })}
-    </div>
-  );
-}