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