feat: add grid view for streams

js/src/features/network-root.tsx

@@ -1,9 +1,13 @@
 import { useParams } from "react-router-dom";
+import { List, LayoutGrid } from "lucide-react";
 import { particlePath } from "@/lib/particle-path";
 import { ParticleListView } from "@/features/particles/particle-list-view";
+import { ParticleGridView } from "@/features/particles/particle-grid-view";
 import { AutoplayOverlay } from "@/features/particles/autoplay-overlay";
 import ControlsIndicator from "@/features/compose/controls-indicator";
 import { ComposeOverlay } from "./compose/compose-overlay";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useViewModeStore } from "@/stores/view-mode-store";
 
 /**
  * Route-level component for /:networkId (index).
@@ -12,14 +16,46 @@ import { ComposeOverlay } from "./compose/compose-overlay";
 export default function NetworkRoot() {
   const { networkId } = useParams();
   const path = particlePath(networkId!, []);
+  const viewMode = useViewModeStore((s) => s.viewMode);
+  const setViewMode = useViewModeStore((s) => s.setViewMode);
 
   return (
-    <div className="flex flex-col h-full relative">
-      <ParticleListView path={path} />
+    <div className="relative min-h-0 flex-1">
+      {/* Scrollable content */}
+      <div className="h-full overflow-y-auto overscroll-contain pt-10 pb-14">
+        {viewMode === "list" ? (
+          <ParticleListView path={path} />
+        ) : (
+          <ParticleGridView path={path} />
+        )}
+      </div>
+
+      {/* Fixed overlays */}
+      <div className="pointer-events-none absolute inset-x-0 top-0 flex justify-end px-3 pt-2">
+        <ToggleGroup
+          type="single"
+          value={viewMode}
+          onValueChange={(v) => {
+            if (v) setViewMode(v as "list" | "grid");
+          }}
+          size="sm"
+          className="pointer-events-auto"
+        >
+          <ToggleGroupItem value="list" aria-label="List view">
+            <List className="size-3.5" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="grid" aria-label="Grid view">
+            <LayoutGrid className="size-3.5" />
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </div>
+
       <AutoplayOverlay networkId={networkId!} />
       <ComposeOverlay networkId={networkId!} />
-      <div className="flex justify-center p-3">
-        <ControlsIndicator type={"new"} />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-center p-3">
+        <div className="pointer-events-auto">
+          <ControlsIndicator type={"new"} />
+        </div>
       </div>
     </div>
   );