Menubar handle wraps the ProdDash logo as a translucent pill

The show/hide handle is now the logo itself: a translucent accent pill
wrapped around "ProdDash" at the left of the bar, centred on the text, with
"Dash" in the background colour so it reads as a cutout inside the green.
The pill is far less opaque than the old solid tab (38% idle, brighter on
hover). When the bar hides, the text folds away and the pill shrinks to a
slim lip at the top-left edge, exactly where the old tab sat. An invisible
in-flow twin of the logo keeps the bar's layout unchanged.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH

README.md

@@ -140,8 +140,8 @@ below. Nothing is installed without someone clicking.
   sit flush — when two share a vertical edge, hover the seam and the same
   kind of pill appears; drag it to trade width (macOS split-view style).
 - **Fullscreen** (the ⛶ button) is a viewing mode: the menu bar hides (its
-  green tab brings it back, minus the Admin button), the occupied columns
+  green lip at the top-left brings it back, minus the Admin button), the
-  stretch to the full width, and every column runs to the
+  occupied columns stretch to the full width, and every column runs to the
   bottom of the screen — the last tile in each column is stretched to end
   there. A short tile like the clock is never stretched into a ribbon: under
   another tile it slides to the bottom edge and the tile above grows into the
@@ -150,9 +150,11 @@ below. Nothing is installed without someone clicking.
   its normal row height and scrolls.
 - A tile's actions (menus, text size, clear…) live in its **title bar**;
   the small **notch** on the bar's bottom edge hides/shows the whole bar
-  for a clean wall-display look. The menu bar has the same kind of tab —
+  for a clean wall-display look. The menu bar's handle is the **ProdDash
-  the green one under the ProdDash name, kept at the left so it never sits
+  name itself**, wrapped in a translucent green pill at the left — click it
-  on top of a tile's own tab.
+  to hide the bar; the slim green lip it leaves at the top-left edge brings
+  the bar back. It stays at the left so it never sits on top of a tile's
+  own tab.
 - The **gear** on a tile holds per-tile settings (filters, text size,
   display options) — these belong to this browser's layout, not the server.
 - The **grid icon** — save the current arrangement to the server under a

public/index.html

@@ -15,7 +15,8 @@
 </head>
 <body>
   <header id="topbar">
-    <span id="brand">Prod<span class="accent">Dash</span></span>
+    <!-- invisible twin of the logo: holds its place in the bar; the real logo is the handle below -->
+    <span id="brand" class="brand-spacer" aria-hidden="true">Prod<span class="accent">Dash</span></span>
 
     <span class="spacer"></span>
 
@@ -50,7 +51,7 @@
     </a>
   </header>
 
-  <button id="topbar-notch" title="Hide / show the menu bar" aria-label="Hide or show the menu bar"></button>
+  <button id="topbar-notch" title="Hide / show the menu bar" aria-label="Hide or show the menu bar">Prod<span class="accent">Dash</span></button>
 
   <main id="gridwrap">
     <div id="grid">

public/style.css

@@ -54,36 +54,56 @@ body.menu-hidden #topbar {
   overflow: hidden;
 }
 
-/* The menubar's own show/hide tab. It sits under the ProdDash brand at the
+/* The menubar's show/hide handle IS the logo: a translucent accent pill
-   left — not screen-centre, where a tile's own (centred) tab would land
+   wrapped around "ProdDash" at the left of the bar, "Dash" cut out in the
-   right under it once both bars are hidden — and wears the accent colour
+   background colour. It sits at the left — never screen-centre, where a
-   so it never reads as a tile tab. */
+   tile's own (centred) tab lands once both bars are hidden. When the bar
+   hides, the pill shrinks to a slim lip at the very top edge, clear of a
+   top-row tile's status dot and title. */
+.brand-spacer { visibility: hidden; }
+
 #topbar-notch {
   position: fixed;
-  /* straddles the bar's bottom edge — mostly on the bar, a short lip below
+  /* vertically centred in the 46px bar: (46 - 24) / 2 = 11px from its top */
-     it — so it never covers a top-row tile's status dot or title */
+  top: calc(var(--topbar-h, 46px) - 35px);
-  top: calc(var(--topbar-h, 46px) - 8px);
+  left: 4px; /* the logo text starts at the bar's 12px padding; the pill adds 8px each side */
-  left: 12px;
+  height: 24px;
-  width: 54px;
+  min-width: 60px;
-  height: 14px;
+  padding: 0 8px;
-  padding: 0;
+  font: inherit;
-  background: var(--accent);
+  font-weight: 800;
+  font-size: 15px;
+  letter-spacing: 0.02em;
+  line-height: 24px;
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent) 38%, transparent);
   border: none;
-  border-radius: 0 0 10px 10px;
+  border-radius: 12px;
   cursor: pointer;
   z-index: 60;
-  opacity: 0.55;
+  transition: top 0.22s ease, height 0.22s ease, line-height 0.22s ease, font-size 0.22s ease,
-  transition: opacity 0.15s ease, top 0.22s ease, height 0.22s ease;
+    border-radius 0.22s ease, background 0.15s ease;
 }
-#topbar-notch:hover { opacity: 1; }
+#topbar-notch .accent { color: var(--bg); } /* the cutout */
-/* bar hidden: a slim tab at the very top edge, clear of a top-row tile's dot and title */
+#topbar-notch:hover { background: color-mix(in srgb, var(--accent) 62%, transparent); }
-body.menu-hidden #topbar-notch { top: 0; height: 10px; }
+/* bar hidden: the text folds away and the pill becomes a lip at the top edge */
-#topbar-notch::after {
+body.menu-hidden #topbar-notch {
+  top: 0;
+  height: 10px;
+  line-height: 10px;
+  font-size: 0;
+  border-radius: 0 0 10px 10px;
+  background: color-mix(in srgb, var(--accent) 55%, transparent);
+}
+body.menu-hidden #topbar-notch:hover { background: var(--accent); }
+body.menu-hidden #topbar-notch::after {
   content: "";
   display: block;
   width: 20px;
   height: 3px;
-  margin: 4px auto 0;
+  margin: 0 auto;
+  position: relative;
+  top: 3px;
   border-radius: 999px;
   background: var(--bg);
 }