Merge pull request #10 from michaelmcgary2008/claude/proddash-app-build-gnwq7y

Menubar handle is a translucent tab hung from the bar's top edge, wrapping the ProdDash logo

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
-  stretch to the full width, and every column runs to the
+  green lip at the top-left brings it back, minus the Admin button), 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 —
-  the green one under the ProdDash name, kept at the left so it never sits
-  on top of a tile's own tab.
+  for a clean wall-display look. The menu bar's handle is the **ProdDash
+  name itself**, wrapped in a translucent green pill at the left — click it
+  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,54 @@ body.menu-hidden #topbar {
   overflow: hidden;
 }
 
-/* The menubar's own show/hide tab. It sits under the ProdDash brand at the
-   left — not screen-centre, where a tile's own (centred) tab would land
-   right under it once both bars are hidden — and wears the accent colour
-   so it never reads as a tile tab. */
+/* The menubar's show/hide handle IS the logo: a translucent accent pill
+   wrapped around "ProdDash" at the left of the bar, "Dash" cut out in the
+   background colour. It sits at the left — never screen-centre, where a
+   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
-     it — so it never covers a top-row tile's status dot or title */
-  top: calc(var(--topbar-h, 46px) - 8px);
-  left: 12px;
-  width: 54px;
-  height: 14px;
-  padding: 0;
-  background: var(--accent);
+  /* a tab hung from the top of the bar: square top, rounded bottom, hanging
+     8px past the bar's bottom edge; the logo sits centred in the bar part */
+  top: 0;
+  left: 2px; /* the logo text starts at the bar's 12px padding; the tab adds 10px each side */
+  height: calc(var(--topbar-h, 46px) + 8px);
+  min-width: 60px;
+  padding: 0 10px;
+  font: inherit;
+  font-weight: 800;
+  font-size: 15px;
+  letter-spacing: 0.02em;
+  line-height: var(--topbar-h, 46px);
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent) 45%, transparent);
   border: none;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 12px 12px;
   cursor: pointer;
   z-index: 60;
-  opacity: 0.55;
-  transition: opacity 0.15s ease, top 0.22s ease, height 0.22s ease;
+  transition: height 0.22s ease, line-height 0.22s ease, font-size 0.22s ease, background 0.15s ease;
 }
-#topbar-notch:hover { opacity: 1; }
-/* bar hidden: a slim tab at the very top edge, clear of a top-row tile's dot and title */
-body.menu-hidden #topbar-notch { top: 0; height: 10px; }
-#topbar-notch::after {
+#topbar-notch .accent { color: var(--bg); } /* the cutout */
+#topbar-notch:hover { background: color-mix(in srgb, var(--accent) 68%, transparent); }
+/* bar hidden: the text folds away and the tab becomes a lip at the top edge */
+body.menu-hidden #topbar-notch {
+  height: 10px;
+  line-height: 10px;
+  font-size: 0;
+  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);
 }