From 45d5c29a895b6a86d324b60fdf1842d5d460bb79 Mon Sep 17 00:00:00 2001
From: webbeef <me@webbeef.org>
Date: Sat, 1 Aug 2026 09:40:42 -0700
Subject: [PATCH] desktop: make the topbar follow the active view

Signed-off-by: webbeef <me@webbeef.org>
---
 ui/system/desktop/index.html | 150 ++++++++++++++++++-----------------
 ui/system/desktop/index.js   |   4 +
 ui/system/desktop/surface.js |  81 ++++++++++++++++++-
 ui/system/desktop/tokens.css |   2 +
 ui/system/desktop/topbar.css |  48 +++++++++--
 ui/system/desktop/topbar.js  |   7 +-
 6 files changed, 208 insertions(+), 84 deletions(-)

diff --git a/ui/system/desktop/index.html b/ui/system/desktop/index.html
index 3778197..37d950a 100644
--- a/ui/system/desktop/index.html
+++ b/ui/system/desktop/index.html
@@ -45,80 +45,84 @@
     </div>
 
     <div class="layer chrome" data-layer="chrome">
-      <header class="topbar" id="topbar" aria-label="Top bar">
-        <div class="topbar-mode topbar-ambient" data-mode="ambient">
-          <span class="topbar-desk-color" id="topbar-desk-color"></span>
-          <span class="topbar-desk-name" id="topbar-desk-name">Work</span>
-          <span class="topbar-divider" aria-hidden="true"></span>
-          <button
-            class="topbar-action"
-            data-action="rename-desk"
-            title="Rename desk"
-          >
-            <i class="icon-pencil"></i>
-          </button>
-          <button
-            class="topbar-action"
-            data-action="new-view"
-            title="New view in this desk"
-          >
-            <i class="icon-plus"></i>
-            <span>New view</span>
-          </button>
-        </div>
+      <!-- The track spans the same box as .desk-surface-inner, so the topbar
+           inside it can be sized as the views -->
+      <div class="topbar-track" id="topbar-track">
+        <header class="topbar" id="topbar" aria-label="Top bar">
+          <div class="topbar-mode topbar-ambient" data-mode="ambient">
+            <span class="topbar-desk-color" id="topbar-desk-color"></span>
+            <span class="topbar-desk-name" id="topbar-desk-name">Work</span>
+            <span class="topbar-divider" aria-hidden="true"></span>
+            <button
+              class="topbar-action"
+              data-action="rename-desk"
+              title="Rename desk"
+            >
+              <i class="icon-pencil"></i>
+            </button>
+            <button
+              class="topbar-action"
+              data-action="new-view"
+              title="New view in this desk"
+            >
+              <i class="icon-plus"></i>
+              <span>New view</span>
+            </button>
+          </div>
 
-        <div class="topbar-mode topbar-page" data-mode="page">
-          <span class="topbar-fav" id="topbar-fav" aria-hidden="true"></span>
-          <button class="topbar-nav" data-nav="back" title="Back">
-            <i class="icon-arrow-left"></i>
-          </button>
-          <button class="topbar-nav" data-nav="forward" title="Forward">
-            <i class="icon-arrow-right"></i>
-          </button>
-          <button class="topbar-nav" data-nav="reload" title="Reload">
-            <i class="icon-refresh-cw"></i>
-          </button>
-          <span class="topbar-title" id="topbar-title">Page title</span>
-          <span class="topbar-host" id="topbar-host">host.tld</span>
-          <span class="topbar-spacer" aria-hidden="true"></span>
-          <button
-            class="topbar-nav topbar-blocker"
-            data-nav="blocker"
-            id="topbar-blocker"
-            title="Content blocking"
-            hidden
-          >
-            <i class="icon-shield"></i>
-            <span class="topbar-blocker-badge" hidden></span>
-          </button>
-          <button
-            class="topbar-nav topbar-mentions"
-            data-nav="mentions"
-            id="topbar-mentions"
-            title="Referenced in your atmosphere"
-            hidden
-          >
-            <i class="icon-at-sign"></i>
-          </button>
-          <button
-            class="topbar-nav"
-            data-nav="float"
-            title="Float / tile this view"
-          >
-            <i class="icon-square-arrow-out-up-right"></i>
-          </button>
-          <button class="topbar-nav" data-nav="menu" title="Page menu">
-            <i class="icon-ellipsis"></i>
-          </button>
-          <button
-            class="topbar-nav topbar-close"
-            data-nav="close"
-            title="Close"
-          >
-            <i class="icon-x"></i>
-          </button>
-        </div>
-      </header>
+          <div class="topbar-mode topbar-page" data-mode="page">
+            <span class="topbar-fav" id="topbar-fav" aria-hidden="true"></span>
+            <button class="topbar-nav" data-nav="back" title="Back">
+              <i class="icon-arrow-left"></i>
+            </button>
+            <button class="topbar-nav" data-nav="forward" title="Forward">
+              <i class="icon-arrow-right"></i>
+            </button>
+            <button class="topbar-nav" data-nav="reload" title="Reload">
+              <i class="icon-refresh-cw"></i>
+            </button>
+            <span class="topbar-title" id="topbar-title">Page title</span>
+            <span class="topbar-host" id="topbar-host">host.tld</span>
+            <span class="topbar-spacer" aria-hidden="true"></span>
+            <button
+              class="topbar-nav topbar-blocker"
+              data-nav="blocker"
+              id="topbar-blocker"
+              title="Content blocking"
+              hidden
+            >
+              <i class="icon-shield"></i>
+              <span class="topbar-blocker-badge" hidden></span>
+            </button>
+            <button
+              class="topbar-nav topbar-mentions"
+              data-nav="mentions"
+              id="topbar-mentions"
+              title="Referenced in your atmosphere"
+              hidden
+            >
+              <i class="icon-at-sign"></i>
+            </button>
+            <button
+              class="topbar-nav"
+              data-nav="float"
+              title="Float / tile this view"
+            >
+              <i class="icon-square-arrow-out-up-right"></i>
+            </button>
+            <button class="topbar-nav" data-nav="menu" title="Page menu">
+              <i class="icon-ellipsis"></i>
+            </button>
+            <button
+              class="topbar-nav topbar-close"
+              data-nav="close"
+              title="Close"
+            >
+              <i class="icon-x"></i>
+            </button>
+          </div>
+        </header>
+      </div>
 
       <div id="topbar-menu" class="topbar-menu" hidden role="menu">
         <button
diff --git a/ui/system/desktop/index.js b/ui/system/desktop/index.js
index 3589570..2c42185 100644
--- a/ui/system/desktop/index.js
+++ b/ui/system/desktop/index.js
@@ -305,6 +305,7 @@ const elOverviewModeLabel = $("#overview-mode-label");
 const elOverviewSurfaceHint = $("#overview-surface-hint");
 const elOverviewStackHint = $("#overview-stack-hint");
 // Topbar refs
+const elTopbar = $("#topbar");
 const elTopbarDeskColor = $("#topbar-desk-color");
 const elTopbarDeskName = $("#topbar-desk-name");
 const elTopbarFav = $("#topbar-fav");
@@ -865,6 +866,9 @@ initSurface({
   state,
   DESKS,
   elWorking,
+  // The bar tracks the active view's box, which is tile geometry, so
+  // surface.js owns the placement and needs the element.
+  elTopbar,
   layoutManager,
   renderViewChips,
   renderTopbar,
diff --git a/ui/system/desktop/surface.js b/ui/system/desktop/surface.js
index 477fee3..1499a98 100644
--- a/ui/system/desktop/surface.js
+++ b/ui/system/desktop/surface.js
@@ -109,11 +109,17 @@ export function syncDeskSurface(surface, desk) {
   const { state } = _deps;
   surface.style.setProperty("--desk-tint", desk.color);
   surface.dataset.layout = desk.layoutMode || "tiled";
-  if (desk.id === state.activeDesk) surface.dataset.active = "";
-  else delete surface.dataset.active;
+  if (desk.id === state.activeDesk) {
+    surface.dataset.active = "";
+  } else {
+    delete surface.dataset.active;
+  }
 
   syncTiles(surface, desk);
   syncStackChip(surface, desk, DesktopLayoutManager.stackedViews(desk).length);
+  if (desk.id === state.activeDesk) {
+    setTopbarGeometry(activeViewBox(surface, desk));
+  }
 
   // Webview active-state sync (covers tiled + floating + stacked).
   for (const view of desk.views) {
@@ -149,6 +155,52 @@ export function syncTileTitle(view) {
   }
 }
 
+// Bar widths, in px, at which the topbar starts shedding controls.
+const TOPBAR_NARROW_PX = 480;
+const TOPBAR_TIGHT_PX = 380;
+
+/**
+ * Point the topbar at a view's box, so the strip reads as that window's own
+ * chrome rather than the desk's.
+ *
+ * `box` is `{x, w}` as fractions of the surface, the same numbers syncTiles
+ * lays the tile out from, so the two cannot disagree.
+ */
+function setTopbarGeometry(box) {
+  const { elTopbar } = _deps;
+  if (!elTopbar) return;
+  elTopbar.toggleAttribute("data-floating", !!box?.floating);
+  const left = `${((box ? box.x : 0) * 100).toFixed(4)}%`;
+  const right = `${((box ? 1 - box.x - box.w : 0) * 100).toFixed(4)}%`;
+  if (elTopbar.style.left !== left) elTopbar.style.left = left;
+  if (elTopbar.style.right !== right) elTopbar.style.right = right;
+
+  const approx = (box ? box.w : 1) * window.innerWidth;
+  elTopbar.toggleAttribute("data-narrow", approx < TOPBAR_NARROW_PX);
+  elTopbar.toggleAttribute("data-tight", approx < TOPBAR_TIGHT_PX);
+}
+
+/**
+ * The active view's box on this desk, as fractions of the surface, or null when
+ * there is nothing to track.
+ */
+function activeViewBox(surface, desk) {
+  const { state } = _deps;
+  const view = desk.views.find((v) => v.id === state.activeViewId);
+  if (!view || view.stacked) {
+    return null;
+  }
+
+  if (view.floating) {
+    const inner = surface.querySelector(":scope > .desk-surface-inner");
+    const width = inner?.getBoundingClientRect().width || 0;
+    return width
+      ? { x: view.floating.x, w: view.floating.w / width, floating: true }
+      : null;
+  }
+  return desk.tree ? computeLeafBoxes(desk.tree).get(view.id) || null : null;
+}
+
 function syncTiles(surface, desk) {
   const { state } = _deps;
   reconcileTree(desk);
@@ -486,17 +538,22 @@ export function focusView(viewId) {
 }
 
 function setActiveTileClasses() {
-  const { state } = _deps;
+  const { state, DESKS } = _deps;
+  let activeTile = null;
   document.querySelectorAll(".desk-tile").forEach((el) => {
     const surface = el.closest(".desk-surface");
     const onActiveDesk = surface?.dataset.desk === state.activeDesk;
     const isActive = onActiveDesk && el.dataset.view === state.activeViewId;
     el.classList.toggle("active", isActive);
+    if (isActive) activeTile = el;
     const wv = el.querySelector(":scope > web-view");
     if (wv && wv.active !== undefined && wv.active !== isActive) {
       wv.active = isActive;
     }
   });
+  const surface = activeTile?.closest(".desk-surface");
+  const desk = surface && DESKS.find((d) => d.id === surface.dataset.desk);
+  setTopbarGeometry(desk ? activeViewBox(surface, desk) : null);
 }
 
 // Drag a floating window by its header.
@@ -553,6 +610,14 @@ function makeFloatable(el) {
     const yPct = (newTop / parentRect.height) * 100;
     el.style.left = xPct.toFixed(2) + "%";
     el.style.top = yPct.toFixed(2) + "%";
+
+    if (el.classList.contains("active")) {
+      setTopbarGeometry({
+        x: newLeft / parentRect.width,
+        w: el.offsetWidth / parentRect.width,
+        floating: true,
+      });
+    }
   });
 
   function endDrag(e) {
@@ -614,6 +679,16 @@ function makeResizable(el) {
     const h = Math.max(MIN_H, origH + (e.clientY - startY));
     el.style.width = w + "px";
     el.style.height = h + "px";
+    if (el.classList.contains("active")) {
+      const parent = el.parentElement?.getBoundingClientRect().width || 0;
+      if (parent) {
+        setTopbarGeometry({
+          x: parseFloat(el.style.left) / 100,
+          w: w / parent,
+          floating: true,
+        });
+      }
+    }
   });
 
   function end(e) {
diff --git a/ui/system/desktop/tokens.css b/ui/system/desktop/tokens.css
index 66e1dc7..be021ce 100644
--- a/ui/system/desktop/tokens.css
+++ b/ui/system/desktop/tokens.css
@@ -37,6 +37,7 @@
   --tray-glyph-size: 30px;
   --desk-gap: var(--spacing-xl);
   --tile-radius: 12px 14px 12px 13px;
+  --topbar-radius: 0 0 10px 9px;
 
   --dock-clearance: calc(var(--dock-height) + var(--dock-bottom));
   --surface-inset-top: calc(var(--topbar-height) + var(--desk-gap) / 2);
@@ -77,6 +78,7 @@ body[data-density="comfortable"] {
   --tray-glyph-size: 36px;
   --desk-gap: 18px;
   --tile-radius: 14px 16px 14px 15px;
+  --topbar-radius: 0 0 12px 11px;
 }
 
 * {
diff --git a/ui/system/desktop/topbar.css b/ui/system/desktop/topbar.css
index 96c0b75..f58b834 100644
--- a/ui/system/desktop/topbar.css
+++ b/ui/system/desktop/topbar.css
@@ -5,11 +5,28 @@
    (ambient / page) share the strip; the active mode toggles via
    body[data-focus]. */
 
+.topbar-track {
+  position: absolute;
+  top: 0;
+  height: var(--topbar-height);
+  left: var(--surface-inset-left);
+  right: var(--surface-inset-right);
+  pointer-events: none;
+  z-index: 10;
+  transition:
+    left var(--workshop-morph-duration) var(--workshop-easing),
+    right var(--workshop-morph-duration) var(--workshop-easing);
+}
+
 .topbar {
+  --topbar-gap: calc(var(--desk-gap) / 2);
+
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
+  margin-left: var(--topbar-gap);
+  margin-right: var(--topbar-gap);
   height: var(--topbar-height);
   display: flex;
   align-items: center;
@@ -26,14 +43,27 @@
   backdrop-filter: blur(10px) saturate(1.05);
   -webkit-backdrop-filter: blur(10px) saturate(1.05);
   border-bottom: 1px solid oklch(35% 0.03 105 / 0.08);
+  border-radius: var(--topbar-radius);
+  overflow: hidden;
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
-  z-index: 10;
   transition:
+    left var(--workshop-morph-duration) var(--workshop-easing),
+    right var(--workshop-morph-duration) var(--workshop-easing),
     background 0.4s var(--workshop-easing),
     opacity 0.2s var(--workshop-easing);
 }
 
+body.workshop-resizing .topbar {
+  transition:
+    background 0.4s var(--workshop-easing),
+    opacity 0.2s var(--workshop-easing);
+}
+
+.topbar[data-floating] {
+  --topbar-gap: 0px;
+}
+
 /* Loading shimmer */
 .topbar::after {
   content: "";
@@ -165,8 +195,9 @@ body[data-focus="page"] .topbar-page {
 .topbar-title {
   color: var(--color-text);
   font-weight: var(--font-weight-bold);
-  /* Truncate long titles; the host element below carries URL info. */
   max-width: 36ch;
+  min-width: 6ch;
+  flex-shrink: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -187,7 +218,7 @@ body[data-focus="page"] .topbar-page {
   font-size: var(--font-size-xs);
   white-space: nowrap;
   margin-left: 0;
-  flex-shrink: 1;
+  flex-shrink: 100;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -443,8 +474,11 @@ body[data-focus="page"] .topbar-page {
   pointer-events: none;
 }
 
-@media (max-width: 720px) {
-  .topbar-host {
-    display: none;
-  }
+.topbar[data-narrow] .topbar-host {
+  display: none;
+}
+
+.topbar[data-tight] .topbar-mentions,
+.topbar[data-tight] .topbar-blocker {
+  display: none;
 }
diff --git a/ui/system/desktop/topbar.js b/ui/system/desktop/topbar.js
index bcac944..2cae253 100644
--- a/ui/system/desktop/topbar.js
+++ b/ui/system/desktop/topbar.js
@@ -81,7 +81,12 @@ export function initTopbar({
       // (`#3366cc`, `rgb(...)`). Wrap with color-mix.
       tint = `color-mix(in oklab, ${raw} 32%, transparent)`;
     }
-    document.documentElement.style.setProperty("--workshop-theme-tint", tint);
+    // Only update when it changes: this is an inherited custom property on the
+    // root, so every write recascades the whole tree.
+    const root = document.documentElement;
+    if (root.style.getPropertyValue("--workshop-theme-tint") !== tint) {
+      root.style.setProperty("--workshop-theme-tint", tint);
+    }
   }
 
   function renderTopbar() {
-- 
2.51.2