remove top bar from stream-view

js/src/App.tsx

@@ -13,6 +13,7 @@ import NetworkSelector from "@/features/network-selector";
 import NetworkRoot from "@/features/network-root";
 import ParticleViewResolver from "@/features/particles/particle-view-resolver";
 import Layout from "@/features/layout";
+import { Button } from "@/components/ui/button";
 
 const queryClient = new QueryClient();
 
@@ -45,10 +46,10 @@ function AuthenticatedApp() {
       <Routes>
         <Route path="settings" element={<SettingsPage />} />
 
-        <Route path="/" element={<Layout />}>
-          <Route index element={<NetworkSelector />} />
+        <Route path="/">
+          <Route index element={<Layout><NetworkSelector /></Layout>} />
           <Route path=":networkId">
-            <Route index element={<NetworkRoot />} />
+            <Route index element={<Layout><NetworkRoot /></Layout>} />
             <Route path="*" element={<ParticleViewResolver />} />
           </Route>
         </Route>

js/src/features/layout.tsx

@@ -15,6 +15,7 @@ import { useNetworks } from "@/hooks/use-networks";
 import { particlePath } from "@/lib/particle-path";
 import { useParticle } from "@/hooks/use-particle";
 import type { Particle } from "@/api/types";
+import { PropsWithChildren } from "react";
 
 function getParticleDisplayName(particle: Particle): string {
   switch (particle.type) {
@@ -127,11 +128,11 @@ function TopBar() {
   );
 }
 
-export default function Layout() {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-screen flex-col">
       <TopBar />
-      <Outlet />
+      {children}
     </div>
   );
 }

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

@@ -9,11 +9,33 @@ import { PlaybackPageIndicator } from "@/features/playback/playback-page-indicat
 import { MediaParticleView } from "@/features/playback/media-particle-view";
 import { TextParticleView } from "@/features/playback/text-particle-view";
 import { FallbackParticleView } from "@/features/playback/fallback-particle-view";
-import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import ControlsIndicator from "@/features/compose/controls-indicator";
 import { updateStreamPlaybackMarker } from "@/lib/firestore-particles";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { useNetwork } from "@/hooks/use-networks";
+import { useNetwork, useNetworks } from "@/hooks/use-networks";
+import { Button } from "@/components/ui/button";
+import { Home, Settings } from "lucide-react";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { WindowControls } from "@/components/window-controls";
+
+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;
+  }
+}
 
 // --- Playback reducer ---
 
@@ -334,7 +356,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
   }
 
   return (
-    <div className="relative flex h-full flex-col bg-black text-white">
+    <div className="relative flex h-screen flex-col bg-black text-white">
       {/* Progress indicator */}
       <div className="z-10 absolute left-0 right-0">
         <PlaybackPageIndicator
@@ -345,19 +367,58 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
         />
       </div>
 
-      {/* Author overlay */}
-      {currentParticle && (
-        <div className="absolute top-5 left-1/2 transform -translate-x-1/2 z-10 flex items-center justify-center gap-2 bg-black/30 backdrop-blur-sm p-1 pr-2 rounded-full">
-          <Avatar size="sm">
-            <AvatarFallback className="bg-white/20 text-[10px] font-medium text-white">
-              {authorInitials}
-            </AvatarFallback>
-          </Avatar>
-          <span className="text-xs text-white/70">
-            {authorEmail.split("@")[0]}
-          </span>
-        </div>
-      )}
+      <div className="z-10 absolute left-0 right-0 flex flex-row mt-3 px-2 gap-5 items-center">
+        <WindowControls />
+
+        <Breadcrumb className="no-drag rounded-full bg-black/30 backdrop-blur-sm px-3 py-1 mx-auto">
+          <BreadcrumbList>
+            <BreadcrumbItem className="text-xs">
+              <BreadcrumbLink
+                className="flex cursor-pointer items-center gap-1"
+                onClick={() => navigate("/")}
+              >
+                <Home className="size-3.5" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem className="text-xs">
+              <BreadcrumbLink
+                className="cursor-pointer"
+                onClick={() => navigate(`/${networkId}`)}
+              >
+                <NetworkBreadcrumbContent networkId={networkId} />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+
+            {streamParticle && (
+              <span key={path} className="contents">
+                <BreadcrumbSeparator />
+                <BreadcrumbItem className="text-xs">
+                  <BreadcrumbPage>{getParticleDisplayName(streamParticle)}</BreadcrumbPage>
+                </BreadcrumbItem>
+              </span>
+            )}
+
+            {currentParticle && (
+              <>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem className="text-xs">
+                  <BreadcrumbPage><ParticleBreadcrumbContent particle={currentParticle} /></BreadcrumbPage>
+                </BreadcrumbItem>
+              </>
+            )}
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          className="no-drag text-muted-foreground"
+          onClick={() => navigate("/settings")}
+        >
+          <Settings className="size-3.5" />
+        </Button>
+      </div>
 
       {/* Main playback area */}
       <div className="flex-1 overflow-hidden">
@@ -381,7 +442,6 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
       <div className="absolute right-0 left-0 bottom-0 z-10">
         <ControlsIndicator type={"reply"}>
           <div className="flex items-center gap-1 text-xs text-white/70">
-            Seen by
             <SeenIndicator stream={streamParticle} currentParticle={currentParticle} networkId={networkId} />
             {/* Exit countdown */}
             {exitRemainingMs !== null && (
@@ -396,6 +456,41 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
   );
 }
 
+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 }: { particle: Particle }) {
+  const createdByEmail = particle.created_by_email;
+  const prefix = createdByEmail.split('@')[0];
+  const initials = createdByEmail.slice(0, 2).toUpperCase();
+
+  return (
+    <span className="flex items-center gap-1.5">
+      <Avatar size="sm">
+        <AvatarFallback>
+          {initials}
+        </AvatarFallback>
+      </Avatar>
+      {prefix}
+    </span>
+  )
+}
+
 // Shows a list of avatars of users who have seen the current particle, based on playback markers in the stream particle.
 const SeenIndicator = ({ stream, currentParticle, networkId }: { stream: Particle & { type: "stream" }, currentParticle: Particle, networkId: string }) => {
   const network = useNetwork(networkId);
@@ -412,21 +507,24 @@ const SeenIndicator = ({ stream, currentParticle, networkId }: { stream: Particl
   if (seenUserIds.length === 0) return null;
 
   return (
-    <AvatarGroup>
-      {seenUserEmails.map((email) => (
-        <Tooltip key={email}>
-          <TooltipTrigger asChild>
-            <Avatar size="sm">
-              <AvatarFallback>
-                {email.split("@")[0].slice(0, 2)}
-              </AvatarFallback>
-            </Avatar>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Seen by {email.split("@")[0]}</p>
-          </TooltipContent>
-        </Tooltip>
-      ))}
-    </AvatarGroup>
+    <>
+      {seenUserEmails.length > 0 && "Seen by"}
+      <AvatarGroup>
+        {seenUserEmails.map((email) => (
+          <Tooltip key={email}>
+            <TooltipTrigger asChild>
+              <Avatar size="sm">
+                <AvatarFallback>
+                  {email.split("@")[0].slice(0, 2)}
+                </AvatarFallback>
+              </Avatar>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Seen by {email.split("@")[0]}</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </AvatarGroup>
+    </>
   );
 }