From 0e678790515199eb4c549916457d554f15c4e2ce Mon Sep 17 00:00:00 2001
From: "a.tolmachev" <a.tolmachev@tbank.ru>
Date: Sat, 2 May 2026 14:54:46 +0000
Subject: [PATCH] ui: use hidden state for shell dropdowns

---
 apps/ui/html/agents.html          |  4 ++--
 apps/ui/html/api-keys.html        |  4 ++--
 apps/ui/html/async-jobs.html      |  4 ++--
 apps/ui/html/logs.html            |  4 ++--
 apps/ui/html/secrets.html         |  4 ++--
 apps/ui/html/settings.html        |  4 ++--
 apps/ui/html/stream-sessions.html |  4 ++--
 apps/ui/html/usage.html           |  4 ++--
 apps/ui/html/wizard/index.html    |  4 ++--
 apps/ui/js/nav.js                 | 18 +++++++++---------
 apps/ui/js/workspace.js           |  8 ++++----
 11 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/apps/ui/html/agents.html b/apps/ui/html/agents.html
index 8178a26..bde69e7 100644
--- a/apps/ui/html/agents.html
+++ b/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>
diff --git a/apps/ui/html/api-keys.html b/apps/ui/html/api-keys.html
index 4d5c7c4..0fa573a 100644
--- a/apps/ui/html/api-keys.html
+++ b/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>
diff --git a/apps/ui/html/async-jobs.html b/apps/ui/html/async-jobs.html
index 5d8debc..768d55a 100644
--- a/apps/ui/html/async-jobs.html
+++ b/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>
diff --git a/apps/ui/html/logs.html b/apps/ui/html/logs.html
index d82642d..2f7df1a 100644
--- a/apps/ui/html/logs.html
+++ b/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>
diff --git a/apps/ui/html/secrets.html b/apps/ui/html/secrets.html
index 6049694..ba68749 100644
--- a/apps/ui/html/secrets.html
+++ b/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>
diff --git a/apps/ui/html/settings.html b/apps/ui/html/settings.html
index 3ceba39..f426d1e 100644
--- a/apps/ui/html/settings.html
+++ b/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>
diff --git a/apps/ui/html/stream-sessions.html b/apps/ui/html/stream-sessions.html
index 4c47643..1a751db 100644
--- a/apps/ui/html/stream-sessions.html
+++ b/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>
diff --git a/apps/ui/html/usage.html b/apps/ui/html/usage.html
index 6236291..1567b29 100644
--- a/apps/ui/html/usage.html
+++ b/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>
diff --git a/apps/ui/html/wizard/index.html b/apps/ui/html/wizard/index.html
index a4d168f..bfc84b0 100644
--- a/apps/ui/html/wizard/index.html
+++ b/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>
diff --git a/apps/ui/js/nav.js b/apps/ui/js/nav.js
index bf5da50..6786834 100644
--- a/apps/ui/js/nav.js
+++ b/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';
-        hamburger.classList.toggle('open', mobileNav.style.display !== 'none');
+        mobileNav.hidden = !mobileNav.hidden;
+        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';
       });
diff --git a/apps/ui/js/workspace.js b/apps/ui/js/workspace.js
index 7f209bc..874f198 100644
--- a/apps/ui/js/workspace.js
+++ b/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;
   }
 });