feat: compose new stream full flow

js/src/features/particles/particle-list-view.tsx

@@ -1,26 +1,73 @@
+import { useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { Radio } from "lucide-react";
 import { useLiveParticleChildren } from "@/hooks/use-particle";
-import type { ParticlePath } from "@/lib/particle-path";
+import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Progress } from "@/components/ui/progress";
+import { Small } from "@/components/ui/typography";
 import ControlsIndicator from "@/features/compose/controls-indicator";
+import type { Particle, StreamProperties } from "@/api/types";
+
+function StreamRow({
+  particle,
+  onClick,
+}: {
+  particle: Particle & { type: "stream"; properties: StreamProperties };
+  onClick: () => void;
+}) {
+  const initials = particle.properties.name.slice(0, 2).toUpperCase();
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent"
+    >
+      <Avatar>
+        <AvatarFallback className="bg-primary/10 text-primary font-medium">
+          {initials}
+        </AvatarFallback>
+      </Avatar>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium">
+          {particle.properties.name}
+        </p>
+        <div className="text-muted-foreground flex items-center gap-1">
+          <Radio className="size-3" />
+          <Small className="text-muted-foreground">
+            {particle.properties.status}
+          </Small>
+        </div>
+      </div>
+    </button>
+  );
+}
 
 interface ParticleListViewProps {
   path: ParticlePath;
 }
 
 /**
- * Grid/list of child particles for a container (folder, stream root, or network root).
+ * List of stream particles for a container (network root, folder, etc.).
  */
 export function ParticleListView({ path }: ParticleListViewProps) {
   const { children, isLoading } = useLiveParticleChildren(path);
+  const { networkId } = parseParticlePath(path);
+  const navigate = useNavigate();
+
+  const streams = useMemo(
+    () => children.filter((c) => c.type === "stream"),
+    [children],
+  );
 
   if (isLoading) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-muted-foreground text-sm">Loading particles...</p>
-      </div>
-    );
+    return <Progress />;
   }
 
-  if (children.length === 0) {
+  if (streams.length === 0) {
     return (
       <div className="flex flex-col h-full items-center justify-center gap-2">
         <ControlsIndicator type={"new"} />
@@ -29,16 +76,18 @@ export function ParticleListView({ path }: ParticleListViewProps) {
   }
 
   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>
+    <ScrollArea className="h-full">
+      <div className="py-1">
+        {streams.map((stream, index) => (
+          <div key={stream.id}>
+            <StreamRow
+              particle={stream}
+              onClick={() => navigate(`/${networkId}/${stream.id}`)}
+            />
+            {index < streams.length - 1 && <Separator className="mx-4" />}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
   );
 }