ui: use hidden state for shell dropdowns

apps/ui/html/agents.html

@@ -29,7 +29,7 @@
         <span class="ws-current-name" id="ws-current-name">acme-workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -77,7 +77,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link active" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>

apps/ui/html/api-keys.html

@@ -41,7 +41,7 @@
         <span class="ws-current-name" id="ws-current-name">acme-workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -93,7 +93,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link active" data-i18n="nav.apikeys">API Keys</a>

apps/ui/html/async-jobs.html

@@ -23,7 +23,7 @@
         <span class="ws-current-name" id="ws-current-name">workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -58,7 +58,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>

apps/ui/html/logs.html

@@ -27,7 +27,7 @@
         <span class="ws-current-name" id="ws-current-name">acme-workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -74,7 +74,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>

apps/ui/html/secrets.html

@@ -55,7 +55,7 @@
         <span class="ws-current-name" id="ws-current-name" data-testid="shell-workspace-name">workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -92,7 +92,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>

apps/ui/html/settings.html

@@ -27,7 +27,7 @@
         <span class="ws-current-name" id="ws-current-name">acme-workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -74,7 +74,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>

apps/ui/html/stream-sessions.html

@@ -23,7 +23,7 @@
         <span class="ws-current-name" id="ws-current-name">workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -58,7 +58,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>

apps/ui/html/usage.html

@@ -27,7 +27,7 @@
         <span class="ws-current-name" id="ws-current-name">acme-workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -74,7 +74,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>

apps/ui/html/wizard/index.html

@@ -27,7 +27,7 @@
         <span class="ws-current-name" id="ws-current-name" data-testid="shell-workspace-name">acme-workspace</span>
         <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
       </button>
-      <div class="ws-dropdown" id="ws-dropdown" style="display:none">
+      <div class="ws-dropdown" id="ws-dropdown" hidden>
         <div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
         <div id="ws-dropdown-list"></div>
         <div class="ws-dropdown-footer">
@@ -79,7 +79,7 @@
     </div>
   </nav>
 
-  <div class="mobile-nav">
+  <div class="mobile-nav" hidden>
     <a href="/" class="mobile-nav-link active" data-i18n="nav.operations">Operations</a>
     <a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
     <a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>

apps/ui/js/nav.js

@@ -10,33 +10,33 @@
     var mobileNav = document.querySelector('.mobile-nav');
 
     if (dropdown) {
-      dropdown.style.display = 'none';
+      dropdown.hidden = true;
     }
     if (mobileNav) {
-      mobileNav.style.display = 'none';
+      mobileNav.hidden = true;
     }
 
     if (avatar && dropdown) {
       avatar.addEventListener('click', function (event) {
         event.stopPropagation();
-        dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
+        dropdown.hidden = !dropdown.hidden;
       });
     }
 
     if (hamburger && mobileNav) {
       hamburger.addEventListener('click', function (event) {
         event.stopPropagation();
-        mobileNav.style.display = mobileNav.style.display === 'none' ? 'block' : 'none';
+        mobileNav.hidden = !mobileNav.hidden;
-        hamburger.classList.toggle('open', mobileNav.style.display !== 'none');
+        hamburger.classList.toggle('open', !mobileNav.hidden);
       });
     }
 
     document.addEventListener('click', function (event) {
       if (dropdown && !event.target.closest('.user-menu')) {
-        dropdown.style.display = 'none';
+        dropdown.hidden = true;
       }
       if (mobileNav && !event.target.closest('.navbar') && !event.target.closest('.mobile-nav')) {
-        mobileNav.style.display = 'none';
+        mobileNav.hidden = true;
         if (hamburger) {
           hamburger.classList.remove('open');
         }
@@ -52,7 +52,7 @@
     document.querySelectorAll('[data-action="profile"]').forEach(function (button) {
       button.addEventListener('click', function () {
         if (dropdown) {
-          dropdown.style.display = 'none';
+          dropdown.hidden = true;
         }
         window.location.href = ((window.CrankRoutes && window.CrankRoutes.settings) || '/settings') + '#profile';
       });
@@ -61,7 +61,7 @@
     document.querySelectorAll('[data-action="settings-link"]').forEach(function (button) {
       button.addEventListener('click', function () {
         if (dropdown) {
-          dropdown.style.display = 'none';
+          dropdown.hidden = true;
         }
         window.location.href = (window.CrankRoutes && window.CrankRoutes.settings) || '/settings';
       });

apps/ui/js/workspace.js

@@ -169,7 +169,7 @@ function renderWorkspaceList() {
   manageLink.href = (window.CrankRoutes && window.CrankRoutes.workspaceSetup) || '/workspace-setup';
   manageLink.addEventListener('click', function() {
     var dd = document.getElementById('ws-dropdown');
-    if (dd) dd.style.display = 'none';
+    if (dd) dd.hidden = true;
   });
   manageLink.appendChild(
     buildIconSvg(
@@ -222,7 +222,7 @@ function initWorkspaceSwitcher() {
 function toggleWsSwitcher(e) {
   e.stopPropagation();
   var dd = document.getElementById('ws-dropdown');
-  if (dd) dd.style.display = dd.style.display === 'none' ? '' : 'none';
+  if (dd) dd.hidden = !dd.hidden;
 }
 
 function switchWorkspace(workspaceId) {
@@ -230,7 +230,7 @@ function switchWorkspace(workspaceId) {
   if (!workspace) return;
 
   var dd = document.getElementById('ws-dropdown');
-  if (dd) dd.style.display = 'none';
+  if (dd) dd.hidden = true;
 
   if (!window.CrankApi || !window.CrankAuth || typeof window.CrankAuth.replaceSession !== 'function') {
     cacheCurrentWorkspace(workspace);
@@ -282,6 +282,6 @@ window.addEventListener('crank:sessionchange', function() {
 document.addEventListener('click', function(e) {
   if (!e.target.closest('#ws-switcher')) {
     var dd = document.getElementById('ws-dropdown');
-    if (dd) dd.style.display = 'none';
+    if (dd) dd.hidden = true;
   }
 });