From f2f0f5d849f0c5f6588ade1f3c1b07915bece3cc Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Mon, 15 Jun 2026 21:16:18 -0700
Subject: [PATCH] Sidebar UI: frosted-glass header blur, centered nav badges,
 admin cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .sidebar-header: real frosted-glass blur of content scrolling behind it —
  made the background translucent (was an opaque base layer), added
  backdrop-filter blur, and raised the header above the nav (z-index) so nav
  items actually sit in its backdrop.
- .dl-nav-badge: vertically centered on the right (top:50% + translateY) instead
  of pinned to the top-right corner.
- Removed border-top-right-radius from .sidebar and .sidebar-header (square top).
- Hide the "My Accounts" + "My Settings" header buttons for admin profiles —
  both are inert for admin (every service is "Managed in Settings", and My
  Settings is an empty pointer note); kept for non-admins who get real UI.
---
 webui/static/init.js   |  9 +++++++++
 webui/static/style.css | 31 +++++++++++++++++++++----------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/webui/static/init.js b/webui/static/init.js
index d339cb18..a8a11b98 100644
--- a/webui/static/init.js
+++ b/webui/static/init.js
@@ -1116,6 +1116,15 @@ function updateProfileIndicator() {
     const statusSection = document.querySelector('.status-section--clickable');
     if (statusSection) statusSection.classList.toggle('status-section--locked', !currentProfile.is_admin);
 
+    // My Accounts (per-profile streaming OAuth) and My Settings (per-profile
+    // server library) are inert for admin — admin uses the global app account
+    // for every service and the full Settings page. Hide both for admin; keep
+    // them for non-admins, who actually get a connect/library UI.
+    const myAccountsBtn = document.getElementById('my-accounts-btn');
+    const personalSettingsBtn = document.getElementById('personal-settings-btn');
+    if (myAccountsBtn) myAccountsBtn.style.display = currentProfile.is_admin ? 'none' : '';
+    if (personalSettingsBtn) personalSettingsBtn.style.display = currentProfile.is_admin ? 'none' : '';
+
     indicator.onclick = async () => {
         const res = await fetch('/api/profiles');
         const data = await res.json();
diff --git a/webui/static/style.css b/webui/static/style.css
index d3a2d09c..608ee724 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -80,7 +80,6 @@ body {
     /* Soft translucent borders */
     border-right: 1px solid rgba(255, 255, 255, 0.08);
     border-top: 1px solid rgba(255, 255, 255, 0.12);
-    border-top-right-radius: 24px;
     border-bottom-right-radius: 24px;
 
     /* Soft floating shadow with inner glow */
@@ -291,17 +290,16 @@ body.reduce-effects .sidebar::after {
 
 .sidebar-header {
     min-height: 115px;
-    /* Opaque base layered under the accent gradient so nav items scrolling
-       past the sticky header don't bleed through the translucent stops. */
+    /* Translucent so the backdrop-filter blur below is visible — the dark tint
+       keeps the header readable while nav items scrolling behind it read as a
+       soft frosted blur instead of a sharp bleed-through. */
     background:
         linear-gradient(180deg,
-            rgba(var(--accent-rgb), 0.14) 0%,
-            rgba(var(--accent-rgb), 0.08) 30%,
-            rgba(var(--accent-rgb), 0.03) 70%,
-            rgba(18, 18, 18, 1) 100%),
-        rgb(18, 18, 18);
+            rgba(var(--accent-rgb), 0.16) 0%,
+            rgba(var(--accent-rgb), 0.10) 30%,
+            rgba(24, 24, 24, 0.62) 70%,
+            rgba(18, 18, 18, 0.72) 100%);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    border-top-right-radius: 20px;
     padding: 20px 24px;
     display: flex;
     flex-direction: column;
@@ -309,9 +307,21 @@ body.reduce-effects .sidebar::after {
     gap: 8px;
     position: sticky;
     top: 0;
+    /* Above the nav (the sidebar gives its children z-index:1) so nav items
+       scrolling up sit BEHIND the header — i.e. in its backdrop, where the
+       blur below can actually act on them. Without this they paint in front
+       and backdrop-filter has nothing to blur. */
+    z-index: 2;
     overflow: hidden;
     flex-shrink: 0;
 
+    /* Intense frosted-glass blur: nav items scrolling up behind the translucent
+       accent-gradient top now read as a soft blur instead of bleeding through
+       sharply. (Only visible where the background is translucent — the opaque
+       base toward the bottom still stops any bleed.) */
+    backdrop-filter: blur(28px) saturate(1.3);
+    -webkit-backdrop-filter: blur(28px) saturate(1.3);
+
     /* Subtle inner glow */
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
@@ -60149,8 +60159,9 @@ body.reduce-effects #page-particles-canvas {
 
 .dl-nav-badge {
     position: absolute;
-    top: 4px;
+    top: 50%;
     right: 8px;
+    transform: translateY(-50%);
     background: rgb(var(--accent-rgb));
     color: #fff;
     font-size: 0.6rem;