tidy bottom section of stream-view

js/src/features/particles/playback-page-indicator.tsx

@@ -1,4 +1,3 @@
-import { cn } from "@/lib/utils";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
   Tooltip,
@@ -15,6 +14,8 @@ interface PlaybackPageIndicatorProps {
   progress: number;
   onGoTo: (index: number) => void;
   presenceBySegment?: Map<number, HumanPresence[]>;
+  /** Render only avatars or only tracks. Omit to render both. */
+  layer?: "avatars" | "tracks";
 }
 
 export function PlaybackPageIndicator({
@@ -23,42 +24,47 @@ export function PlaybackPageIndicator({
   progress,
   onGoTo,
   presenceBySegment,
+  layer,
 }: PlaybackPageIndicatorProps) {
   if (total === 0) return null;
 
+  const showAvatars = layer !== "tracks";
+  const showTracks = layer !== "avatars";
+
   return (
     <div className="flex w-full items-end gap-px leading-none">
       {Array.from({ length: total }, (_, i) => {
         const presence = presenceBySegment?.get(i);
         return (
           <div key={i} className="flex flex-1 flex-col items-stretch">
-            {/* Presence avatars above the track */}
-            {presence && presence.length > 0 && (
+            {showAvatars && presence && presence.length > 0 && (
               <SegmentPresenceAvatars presence={presence} />
             )}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onGoTo(i);
-              }}
-              className="group relative block h-3 w-full"
-            >
-              {/* Dim track */}
-              <div className="absolute inset-x-0 bottom-0 h-[3px] bg-white/30 transition-all group-hover:h-1.5" />
-              {/* Fill */}
-              <div
-                className="absolute left-0 bottom-0 h-[3px] bg-white/90 transition-all group-hover:h-1.5"
-                style={{
-                  width:
-                    i < current
-                      ? "100%"
-                      : i === current
-                        ? `${progress * 100}%`
-                        : "0%",
-                  transition: i === current ? "width 300ms linear" : "none",
+            {showTracks && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onGoTo(i);
                 }}
-              />
-            </button>
+                className="group relative block h-3 w-full"
+              >
+                {/* Dim track */}
+                <div className="absolute inset-x-0 bottom-0 h-[3px] bg-white/30 transition-all group-hover:h-1.5" />
+                {/* Fill */}
+                <div
+                  className="absolute left-0 bottom-0 h-[3px] bg-white/90 transition-all group-hover:h-1.5"
+                  style={{
+                    width:
+                      i < current
+                        ? "100%"
+                        : i === current
+                          ? `${progress * 100}%`
+                          : "0%",
+                    transition: i === current ? "width 300ms linear" : "none",
+                  }}
+                />
+              </button>
+            )}
           </div>
         );
       })}