feat: manage stream name and members

Closes #99
Closes #28

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

@@ -22,8 +22,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Settings, CircleCheckBig, CircleDot, EllipsisVertical } from "lucide-react";
+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 { WindowControls } from "@/components/window-controls";
@@ -624,6 +627,10 @@ function StreamViewControls({
 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;
@@ -697,6 +704,12 @@ function TopBar({ networkId, particle, streamParticle }: { networkId: string; pa
         </span>
       )}
 
+      <MembersIndicator
+        networkId={networkId}
+        streamParticle={streamParticle}
+        onClick={() => setMembersOpen(true)}
+      />
+
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
@@ -726,16 +739,99 @@ function TopBar({ networkId, particle, streamParticle }: { networkId: string; pa
               </>
             )}
           </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);