remove grid view for streams

- Reduces surface area
- Reduces options for people (less cognitive load)
- One way to use the product
- List view works better for keyboard shortcuts
- List view has basics such as recency

js/src/features/network-root.tsx

@@ -1,14 +1,11 @@
 import { useCallback, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { List, LayoutGrid, CircleDot, CircleCheckBig } from "lucide-react";
+import { CircleDot, CircleCheckBig } 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 ControlsIndicator from "@/features/compose/controls-indicator";
 import { ComposeOverlay } from "./compose/compose-overlay";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { useViewModeStore } from "@/stores/view-mode-store";
 import { useStreamParticles } from "@/hooks/use-stream-particles";
 import { useStreamKeyboardNav } from "@/hooks/use-stream-keyboard-nav";
 import { useDockBadge } from "@/hooks/use-dock-badge";
@@ -22,8 +19,6 @@ export default function NetworkRoot() {
   const { networkId } = useParams();
   const navigate = useNavigate();
   const path = particlePath(networkId!, []);
-  const viewMode = useViewModeStore((s) => s.viewMode);
-  const setViewMode = useViewModeStore((s) => s.setViewMode);
 
   const { streams, isLoading } = useStreamParticles(path);
   const userId = useAuthStore((s) => s.user?.id);
@@ -38,7 +33,6 @@ export default function NetworkRoot() {
 
   const { selectedIndex } = useStreamKeyboardNav({
     streams: filteredStreams,
-    viewMode,
     enabled: !composeActive,
     onNavigate: useCallback(
       (streamId: string) => navigate(`/${networkId}/${streamId}`),
@@ -59,30 +53,11 @@ export default function NetworkRoot() {
             <TabsTrigger value="closed"><CircleCheckBig className="size-3" /> Closed</TabsTrigger>
           </TabsList>
         </Tabs>
-        <ToggleGroup
-          type="single"
-          value={viewMode}
-          onValueChange={(v) => {
-            if (v) setViewMode(v as "list" | "grid");
-          }}
-          size="sm"
-        >
-          <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>
 
       {/* Scrollable content */}
       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pb-14 py-2">
-        {viewMode === "list" ? (
-          <ParticleListView streams={filteredStreams} networkId={networkId!} isLoading={isLoading} selectedIndex={selectedIndex} />
-        ) : (
-          <ParticleGridView streams={filteredStreams} networkId={networkId!} isLoading={isLoading} selectedIndex={selectedIndex} />
-        )}
+        <ParticleListView streams={filteredStreams} networkId={networkId!} isLoading={isLoading} selectedIndex={selectedIndex} />
       </div>
 
       <ComposeOverlay networkId={networkId!} onActiveChange={setComposeActive} />

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

@@ -1,51 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { Radio } from "lucide-react";
-import { Progress } from "@/components/ui/progress";
-import type { StreamParticle } from "@/hooks/use-stream-particles";
-import { StreamCard } from "@/features/particles/stream-card";
-import { StreamContextMenu } from "@/features/particles/stream-context-menu";
-
-interface ParticleGridViewProps {
-  streams: StreamParticle[];
-  networkId: string;
-  isLoading: boolean;
-  selectedIndex?: number | null;
-}
-
-export function ParticleGridView({ streams, networkId, isLoading, selectedIndex }: ParticleGridViewProps) {
-  const navigate = useNavigate();
-
-  if (isLoading) {
-    return <Progress />;
-  }
-
-  if (streams.length === 0) {
-    return (
-      <div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-2 px-4 text-center">
-        <Radio className="text-muted-foreground size-8" />
-        <p className="text-muted-foreground text-sm">
-          No recent streams yet. Start a conversation using the keyboard
-          shortcuts below.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid grid-cols-3 gap-3 px-3">
-      {streams.map((stream, index) => (
-        <StreamContextMenu key={stream.id} particle={stream} networkId={networkId}>
-          <div ref={index === selectedIndex ? (el) => el?.scrollIntoView({ block: "nearest" }) : undefined}>
-            <StreamCard
-              particle={stream}
-              networkId={networkId}
-              onClick={() => navigate(`/${networkId}/${stream.id}`)}
-              isSelected={index === selectedIndex}
-              shortcutKey={index < 9 ? index + 1 : undefined}
-            />
-          </div>
-        </StreamContextMenu>
-      ))}
-    </div>
-  );
-}