feat: list streams and story-mode catchup

2026-02-21 09:46:04 -08:00
parent b5f90709de
commit 0cd74c0a8a
33 changed files with 2304 additions and 41 deletions
@@ -0,0 +1,110 @@
+import { useEffect } from "react";
+import { Plus, LogOut } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Muted } from "@/components/ui/typography";
+import { Progress } from "@/components/ui/progress";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAppStore } from "@/stores/app-store";
+import { useAuthStore } from "@/stores/auth-store";
+import { StreamList } from "@/features/streams/stream-list";
+import { CreateStreamDialog } from "@/features/streams/create-stream-dialog";
+
+export function StreamsPage() {
+  const fetchStartup = useAppStore((s) => s.fetchStartup);
+  const isLoading = useAppStore((s) => s.isLoading);
+  const networks = useAppStore((s) => s.networks);
+  const selectedNetworkId = useAppStore((s) => s.selectedNetworkId);
+  const setSelectedNetwork = useAppStore((s) => s.setSelectedNetwork);
+  const signOut = useAuthStore((s) => s.signOut);
+  const user = useAuthStore((s) => s.user);
+
+  useEffect(() => {
+    fetchStartup();
+  }, [fetchStartup]);
+
+  const selectedNetwork = selectedNetworkId
+    ? networks.find((n) => n.id === selectedNetworkId)
+    : null;
+
+  return (
+    <div className="flex h-screen flex-col">
+      {/* Top bar */}
+      <div className="flex items-center gap-3 border-b px-4 py-3">
+        <Select
+          value={selectedNetworkId ?? undefined}
+          onValueChange={(value) => setSelectedNetwork(value)}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select a network" />
+          </SelectTrigger>
+          <SelectContent>
+            {networks.map((network) => (
+              <SelectItem key={network.id} value={network.id}>
+                {network.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {selectedNetwork && (
+          <div className="flex items-center gap-2">
+            <Progress
+              value={
+                (selectedNetwork.open_stream_count /
+                  selectedNetwork.open_stream_capacity) *
+                100
+              }
+              className="h-1.5 w-24"
+            />
+            <Muted className="text-xs">
+              {selectedNetwork.open_stream_count}/
+              {selectedNetwork.open_stream_capacity} streams
+            </Muted>
+          </div>
+        )}
+
+        <div className="flex-1" />
+
+        {selectedNetworkId && (
+          <CreateStreamDialog networkId={selectedNetworkId}>
+            <Button variant="outline" size="sm">
+              <Plus className="mr-1.5 h-3.5 w-3.5" />
+              New Stream
+            </Button>
+          </CreateStreamDialog>
+        )}
+
+        {user && (
+          <Muted className="text-xs">{user.email_prefix}</Muted>
+        )}
+
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-muted-foreground"
+          onClick={signOut}
+        >
+          <LogOut className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {/* Stream list */}
+      {isLoading ? (
+        <div className="flex flex-1 items-center justify-center">
+          <p className="text-muted-foreground text-sm">Loading...</p>
+        </div>
+      ) : (
+        <ScrollArea className="flex-1">
+          <StreamList />
+        </ScrollArea>
+      )}
+    </div>
+  );
+}