refactor: extract topbar component into separate file

js/src/features/particles/stream-top-bar.tsx

@@ -0,0 +1,278 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuthStore } from "@/stores/auth-store";
+import { apiClient } from "@/api/client";
+import type { Particle } from "@/api/types";
+import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
+import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useNetwork } from "@/hooks/use-networks";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Settings, CircleCheckBig, CircleDot, EllipsisVertical, Pencil, Globe } from "lucide-react";
+import { updateStreamStatus } from "@/lib/firestore-particles";
+import { RenameStreamOverlay } from "@/features/particles/rename-stream-overlay";
+import { StreamMembersOverlay } from "@/features/particles/stream-members-overlay";
+import { parseVisibleTo } from "@/lib/stream-visibility";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { WindowControls } from "@/components/window-controls";
+import { RelativeTimestamp } from "@/components/relative-timestamp";
+import { useStreamPresence } from "@/features/particles/stream-presence-context";
+import { getInitials } from "@/lib/utils";
+
+function getParticleDisplayName(particle: Particle): string {
+  switch (particle.type) {
+    case "stream":
+    case "folder":
+      return particle.properties.name;
+    case "quest":
+      return particle.properties.title;
+    case "paper":
+      return particle.properties.title;
+    case "file":
+      return particle.properties.filename;
+    case "text":
+      return particle.properties.content.slice(0, 30);
+    case "media":
+      return particle.type;
+  }
+}
+
+interface TopBarProps {
+  networkId: string;
+  particle: Particle | null;
+  streamParticle: Particle & { type: "stream" };
+}
+
+export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
+  const navigate = useNavigate();
+  const network = useNetwork(networkId);
+  const userId = useAuthStore((s) => s.user?.id);
+  const isCreator = !!userId && userId === streamParticle.created_by_human_id;
+  const [renameOpen, setRenameOpen] = useState(false);
+  const [membersOpen, setMembersOpen] = useState(false);
+
+  const huddleParticipants = streamParticle.huddle_active_participants ?? [];
+  const hasActiveHuddle = huddleParticipants.length > 0;
+
+  const handleJoinHuddle = () => {
+    apiClient.getLivekitToken(networkId, streamParticle.id).then(({ token, server_url }) => {
+      window.electronWindow.openHuddle({ token, serverUrl: server_url });
+    });
+  };
+
+  return (
+    <div className="drag-region flex flex-row px-4 gap-5 items-center">
+      <WindowControls />
+
+      <Breadcrumb className="no-drag rounded-full bg-black/30 backdrop-blur-sm px-3 py-1 mx-auto">
+        <BreadcrumbList>
+          {streamParticle && (
+            <>
+              <BreadcrumbItem className="text-xs">
+                <BreadcrumbPage>{getParticleDisplayName(streamParticle)}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </>
+          )}
+
+          {particle && (
+            <>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem className="text-xs">
+                <BreadcrumbPage><ParticleBreadcrumbContent particle={particle} networkId={networkId} /></BreadcrumbPage>
+              </BreadcrumbItem>
+            </>
+          )}
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      {hasActiveHuddle && (
+        <button
+          onClick={handleJoinHuddle}
+          className="no-drag flex items-center gap-2 rounded-full bg-red-500/20 px-3 py-1 backdrop-blur-sm transition-colors hover:bg-red-500/30"
+        >
+          <span className="relative flex size-2">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-red-400 opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-red-500" />
+          </span>
+          <AvatarGroup>
+            {huddleParticipants.map((humanId) => {
+              const human = network?.humans?.find((h) => h.id === humanId);
+              const initials = human ? getInitials(human.email) : "?";
+              return (
+                <Tooltip key={humanId}>
+                  <TooltipTrigger asChild>
+                    <Avatar size="sm">
+                      <AvatarFallback className="bg-red-500/30 text-[8px] text-red-200">
+                        {initials}
+                      </AvatarFallback>
+                    </Avatar>
+                  </TooltipTrigger>
+                  <TooltipContent>{human?.email ?? humanId}</TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </AvatarGroup>
+          <span className="text-xs font-medium text-red-200">Join</span>
+        </button>
+      )}
+
+      {streamParticle.status === "closed" && (
+        <span className="no-drag flex items-center gap-1 rounded-full bg-white/10 px-2 py-0.5 text-xs text-muted-foreground backdrop-blur-sm">
+          <CircleCheckBig className="size-3" />
+          Closed
+        </span>
+      )}
+
+      <MembersIndicator
+        networkId={networkId}
+        streamParticle={streamParticle}
+        onClick={() => setMembersOpen(true)}
+      />
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="no-drag text-muted-foreground"
+          >
+            <EllipsisVertical className="size-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            onSelect={async () => {
+              const docPath = toFirestoreDocPath(particlePath(networkId, [streamParticle.id]));
+              await updateStreamStatus(docPath, streamParticle.status === "open" ? "closed" : "open");
+            }}
+          >
+            {streamParticle.status === "open" ? (
+              <>
+                <CircleCheckBig className="size-4" />
+                Close stream
+              </>
+            ) : (
+              <>
+                <CircleDot className="size-4 text-green-500" />
+                Open stream
+              </>
+            )}
+          </DropdownMenuItem>
+          {isCreator && (
+            <DropdownMenuItem onSelect={() => setRenameOpen(true)}>
+              <Pencil className="size-4" />
+              Rename stream
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem onSelect={() => navigate("/settings")}>
+            <Settings className="size-4" />
+            Settings
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {renameOpen && isCreator && (
+        <RenameStreamOverlay
+          networkId={networkId}
+          streamParticle={streamParticle}
+          onClose={() => setRenameOpen(false)}
+        />
+      )}
+
+      {membersOpen && (
+        <StreamMembersOverlay
+          networkId={networkId}
+          streamParticle={streamParticle}
+          isCreator={isCreator}
+          onClose={() => setMembersOpen(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+function MembersIndicator({
+  networkId,
+  streamParticle,
+  onClick,
+}: {
+  networkId: string;
+  streamParticle: Particle & { type: "stream" };
+  onClick: () => void;
+}) {
+  const network = useNetwork(networkId);
+  const visibility = parseVisibleTo(streamParticle.visible_to, networkId);
+  const humans = network?.humans ?? [];
+
+  const memberIds =
+    visibility.mode === "network"
+      ? humans.map((h) => h.id)
+      : visibility.humanIds;
+  const shownMembers = memberIds
+    .slice(0, 3)
+    .map((id) => humans.find((h) => h.id === id))
+    .filter((h): h is NonNullable<typeof h> => !!h);
+  const overflow = memberIds.length - shownMembers.length;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          onClick={onClick}
+          className="no-drag flex items-center gap-1.5 rounded-full bg-white/5 px-2 py-1 text-xs text-white/70 backdrop-blur-sm transition-colors hover:bg-white/10"
+        >
+          {visibility.mode === "network" ? (
+            <>
+              <Globe className="size-3 text-white/50" />
+              <span>Everyone</span>
+            </>
+          ) : (
+            <>
+              <AvatarGroup>
+                {shownMembers.map((human) => (
+                  <Avatar key={human.id} size="sm">
+                    <AvatarFallback className="text-[8px]">
+                      {getInitials(human.email)}
+                    </AvatarFallback>
+                  </Avatar>
+                ))}
+              </AvatarGroup>
+              {overflow > 0 && <span className="text-white/50">+{overflow}</span>}
+            </>
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {visibility.mode === "network"
+          ? `Everyone in ${network?.name ?? "network"}`
+          : `${memberIds.length} ${memberIds.length === 1 ? "member" : "members"}`}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function ParticleBreadcrumbContent({ particle, networkId }: { particle: Particle; networkId: string }) {
+  const network = useNetwork(networkId);
+  const { onlineHumanIds } = useStreamPresence();
+  const creator = network?.humans?.find((h) => h.id === particle.created_by_human_id);
+  const prefix = creator?.email_prefix ?? particle.created_by_human_id;
+  const initials = prefix.slice(0, 2).toUpperCase();
+  const isOnline = particle.created_by_human_id ? onlineHumanIds.has(particle.created_by_human_id) : false;
+
+  return (
+    <span className="flex items-center gap-1.5">
+      <Avatar size="sm" className={isOnline ? "ring-2 ring-green-500" : ""}>
+        <AvatarFallback>
+          {initials}
+        </AvatarFallback>
+      </Avatar>
+      {prefix} - <RelativeTimestamp date={particle.created_at} />
+    </span>
+  );
+}

js/src/features/particles/stream-view.tsx

@@ -9,34 +9,19 @@ import { PlaybackPageIndicator } from "@/features/particles/playback-page-indica
 import { MediaParticleView, type MediaParticleHandle } from "@/features/particles/media-particle-view";
 import { TextParticleView } from "@/features/particles/text-particle-view";
 import { FallbackParticleView } from "@/features/particles/fallback-particle-view";
-import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { VideoAudioToggle } from "@/components/video-audio-toggle";
 import { useMediaSettingsStore } from "@/stores/media-settings-store";
 import { KeybindingsOverlay, type KeybindingGroup } from "@/components/keybindings-overlay";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useNetwork } from "@/hooks/use-networks";
-import { useNetwork, useNetworks } from "@/hooks/use-networks";
+import { toggleParticleReaction } from "@/lib/firestore-particles";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Settings, CircleCheckBig, CircleDot, EllipsisVertical, Pencil, Globe } from "lucide-react";
-import { updateStreamStatus, toggleParticleReaction } from "@/lib/firestore-particles";
-import { RenameStreamOverlay } from "@/features/particles/rename-stream-overlay";
-import { StreamMembersOverlay } from "@/features/particles/stream-members-overlay";
-import { parseVisibleTo } from "@/lib/stream-visibility";
 import { ReactionBar } from "@/features/particles/reaction-bar";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { TopBar } from "@/features/particles/stream-top-bar";
-import { WindowControls } from "@/components/window-controls";
-import { RelativeTimestamp } from "@/components/relative-timestamp";
 import { useStreamPlayback } from "@/hooks/use-stream-playback";
 import { usePrefetchAdjacentMedia } from "@/hooks/use-prefetch-adjacent-media";
 import { usePresencePositions } from "@/hooks/use-presence-positions";
 import { StreamPresenceProvider, useStreamPresence, useStreamComposing, useStreamComposingBroadcast, type ComposingMode } from "@/features/particles/stream-presence-context";
 import { ComposingIndicator } from "@/components/composing-indicator";
-import { cn, getInitials } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { useMount } from "react-use";
 
 function getReactions(particle: Particle): Record<string, string[]> | undefined {
@@ -44,24 +29,6 @@ function getReactions(particle: Particle): Record<string, string[]> | undefined
   return undefined;
 }
 
-function getParticleDisplayName(particle: Particle): string {
-  switch (particle.type) {
-    case "stream":
-    case "folder":
-      return particle.properties.name;
-    case "quest":
-      return particle.properties.title;
-    case "paper":
-      return particle.properties.title;
-    case "file":
-      return particle.properties.filename;
-    case "text":
-      return particle.properties.content.slice(0, 30);
-    case "media":
-      return particle.type;
-  }
-}
-
 // --- Exit countdown hook ---
 
 const EXIT_DELAY_MS = 5000;
@@ -623,250 +590,3 @@ function StreamViewControls({
     </div>
   );
 }
-
-function TopBar({ networkId, particle, streamParticle }: { networkId: string; particle: Particle | null; streamParticle: Particle & { type: "stream" } }) {
-  const navigate = useNavigate();
-  const network = useNetwork(networkId);
-  const userId = useAuthStore((s) => s.user?.id);
-  const isCreator = !!userId && userId === streamParticle.created_by_human_id;
-  const [renameOpen, setRenameOpen] = useState(false);
-  const [membersOpen, setMembersOpen] = useState(false);
-
-  const huddleParticipants = streamParticle.huddle_active_participants ?? [];
-  const hasActiveHuddle = huddleParticipants.length > 0;
-
-  const handleJoinHuddle = () => {
-    apiClient.getLivekitToken(networkId, streamParticle.id).then(({ token, server_url }) => {
-      window.electronWindow.openHuddle({ token, serverUrl: server_url });
-    });
-  };
-
-  return (
-    <div className="drag-region flex flex-row px-4 gap-5 items-center">
-      <WindowControls />
-
-      <Breadcrumb className="no-drag rounded-full bg-black/30 backdrop-blur-sm px-3 py-1 mx-auto">
-        <BreadcrumbList>
-          {streamParticle && (
-            <>
-              <BreadcrumbItem className="text-xs">
-                <BreadcrumbPage>{getParticleDisplayName(streamParticle)}</BreadcrumbPage>
-              </BreadcrumbItem>
-            </>
-          )}
-
-          {particle && (
-            <>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem className="text-xs">
-                <BreadcrumbPage><ParticleBreadcrumbContent particle={particle} networkId={networkId} /></BreadcrumbPage>
-              </BreadcrumbItem>
-            </>
-          )}
-        </BreadcrumbList>
-      </Breadcrumb>
-
-      {hasActiveHuddle && (
-        <button
-          onClick={handleJoinHuddle}
-          className="no-drag flex items-center gap-2 rounded-full bg-red-500/20 px-3 py-1 backdrop-blur-sm transition-colors hover:bg-red-500/30"
-        >
-          <span className="relative flex size-2">
-            <span className="absolute inline-flex size-full animate-ping rounded-full bg-red-400 opacity-75" />
-            <span className="relative inline-flex size-2 rounded-full bg-red-500" />
-          </span>
-          <AvatarGroup>
-            {huddleParticipants.map((humanId) => {
-              const human = network?.humans?.find((h) => h.id === humanId);
-              const initials = human ? getInitials(human.email) : "?";
-              return (
-                <Tooltip key={humanId}>
-                  <TooltipTrigger asChild>
-                    <Avatar size="sm">
-                      <AvatarFallback className="bg-red-500/30 text-[8px] text-red-200">
-                        {initials}
-                      </AvatarFallback>
-                    </Avatar>
-                  </TooltipTrigger>
-                  <TooltipContent>{human?.email ?? humanId}</TooltipContent>
-                </Tooltip>
-              );
-            })}
-          </AvatarGroup>
-          <span className="text-xs font-medium text-red-200">Join</span>
-        </button>
-      )}
-
-      {streamParticle.status === "closed" && (
-        <span className="no-drag flex items-center gap-1 rounded-full bg-white/10 px-2 py-0.5 text-xs text-muted-foreground backdrop-blur-sm">
-          <CircleCheckBig className="size-3" />
-          Closed
-        </span>
-      )}
-
-      <MembersIndicator
-        networkId={networkId}
-        streamParticle={streamParticle}
-        onClick={() => setMembersOpen(true)}
-      />
-
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="no-drag text-muted-foreground"
-          >
-            <EllipsisVertical className="size-3.5" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem
-            onSelect={async () => {
-              const docPath = toFirestoreDocPath(particlePath(networkId, [streamParticle.id]));
-              await updateStreamStatus(docPath, streamParticle.status === "open" ? "closed" : "open");
-            }}
-          >
-            {streamParticle.status === "open" ? (
-              <>
-                <CircleCheckBig className="size-4" />
-                Close stream
-              </>
-            ) : (
-              <>
-                <CircleDot className="size-4 text-green-500" />
-                Open stream
-              </>
-            )}
-          </DropdownMenuItem>
-          {isCreator && (
-            <DropdownMenuItem onSelect={() => setRenameOpen(true)}>
-              <Pencil className="size-4" />
-              Rename stream
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuItem onSelect={() => navigate("/settings")}>
-            <Settings className="size-4" />
-            Settings
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      {renameOpen && isCreator && (
-        <RenameStreamOverlay
-          networkId={networkId}
-          streamParticle={streamParticle}
-          onClose={() => setRenameOpen(false)}
-        />
-      )}
-
-      {membersOpen && (
-        <StreamMembersOverlay
-          networkId={networkId}
-          streamParticle={streamParticle}
-          isCreator={isCreator}
-          onClose={() => setMembersOpen(false)}
-        />
-      )}
-    </div>
-  );
-}
-
-function MembersIndicator({
-  networkId,
-  streamParticle,
-  onClick,
-}: {
-  networkId: string;
-  streamParticle: Particle & { type: "stream" };
-  onClick: () => void;
-}) {
-  const network = useNetwork(networkId);
-  const visibility = parseVisibleTo(streamParticle.visible_to, networkId);
-  const humans = network?.humans ?? [];
-
-  const memberIds =
-    visibility.mode === "network"
-      ? humans.map((h) => h.id)
-      : visibility.humanIds;
-  const shownMembers = memberIds
-    .slice(0, 3)
-    .map((id) => humans.find((h) => h.id === id))
-    .filter((h): h is NonNullable<typeof h> => !!h);
-  const overflow = memberIds.length - shownMembers.length;
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          onClick={onClick}
-          className="no-drag flex items-center gap-1.5 rounded-full bg-white/5 px-2 py-1 text-xs text-white/70 backdrop-blur-sm transition-colors hover:bg-white/10"
-        >
-          {visibility.mode === "network" ? (
-            <>
-              <Globe className="size-3 text-white/50" />
-              <span>Everyone</span>
-            </>
-          ) : (
-            <>
-              <AvatarGroup>
-                {shownMembers.map((human) => (
-                  <Avatar key={human.id} size="sm">
-                    <AvatarFallback className="text-[8px]">
-                      {getInitials(human.email)}
-                    </AvatarFallback>
-                  </Avatar>
-                ))}
-              </AvatarGroup>
-              {overflow > 0 && <span className="text-white/50">+{overflow}</span>}
-            </>
-          )}
-        </button>
-      </TooltipTrigger>
-      <TooltipContent>
-        {visibility.mode === "network"
-          ? `Everyone in ${network?.name ?? "network"}`
-          : `${memberIds.length} ${memberIds.length === 1 ? "member" : "members"}`}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
-function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
-  const { data: networks } = useNetworks();
-  const network = networks?.find((n) => n.id === networkId);
-  const name = network?.name ?? networkId;
-  const initials = name.slice(0, 2).toUpperCase();
-
-  return (
-    <span className="flex items-center gap-1.5">
-      <Avatar size="sm">
-        <AvatarFallback>
-          {initials}
-        </AvatarFallback>
-      </Avatar>
-      {name}
-    </span>
-  );
-}
-
-function ParticleBreadcrumbContent({ particle, networkId }: { particle: Particle; networkId: string }) {
-  const network = useNetwork(networkId);
-  const { onlineHumanIds } = useStreamPresence();
-  const creator = network?.humans?.find((h) => h.id === particle.created_by_human_id);
-  const prefix = creator?.email_prefix ?? particle.created_by_human_id;
-  const initials = prefix.slice(0, 2).toUpperCase();
-  const isOnline = particle.created_by_human_id ? onlineHumanIds.has(particle.created_by_human_id) : false;
-
-  return (
-    <span className="flex items-center gap-1.5">
-      <Avatar size="sm" className={isOnline ? "ring-2 ring-green-500" : ""}>
-        <AvatarFallback>
-          {initials}
-        </AvatarFallback>
-      </Avatar>
-      {prefix} - <RelativeTimestamp date={particle.created_at} />
-    </span>
-  )
-}
-