setup boilerplate for data and rendering

This includes zod types creation for API response validation, and exploration of path based resolution of rendering particles.
2026-03-17 14:23:51 -07:00
parent 60330f65e0
commit 4273e324e5
19 changed files with 729 additions and 592 deletions
@@ -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. This is the extensibility point for future particle types.
+ */
+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 networkId={networkId} particleSegments={particleSegments} />;
+    case "folder":
+      return <FolderView 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>
+      );
+  }
+}