From 8a4deb62493fececdfbd0c60f4a4955416ca495f Mon Sep 17 00:00:00 2001
From: "a.tolmachev" <a.tolmachev@tbank.ru>
Date: Sat, 2 May 2026 14:49:35 +0000
Subject: [PATCH] ui: use hidden state for workspace setup panels

---
 apps/ui/html/workspace-setup.html | 14 +++++++-------
 apps/ui/js/workspace-setup.js     | 22 +++++++++++-----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/ui/html/workspace-setup.html b/apps/ui/html/workspace-setup.html
index 5035eac..7e0d303 100644
--- a/apps/ui/html/workspace-setup.html
+++ b/apps/ui/html/workspace-setup.html
@@ -126,7 +126,7 @@
       </div>
 
       <!-- ── Members (edit mode only) ── -->
-      <div id="section-members" class="ws-form-section" style="display:none; padding:0; overflow:hidden;">
+      <div id="section-members" class="ws-form-section" hidden style="padding:0; overflow:hidden;">
         <div style="display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;">
           <div>
             <div class="ws-form-section-title" style="margin-bottom:2px;" data-i18n="workspace_setup.members.title">Team members</div>
@@ -139,7 +139,7 @@
         </div>
 
         <!-- Invite form -->
-        <div id="invite-form" style="display:none; padding: 0 24px 16px; border-bottom: 1px solid var(--border-subtle);">
+        <div id="invite-form" hidden style="padding: 0 24px 16px; border-bottom: 1px solid var(--border-subtle);">
           <div style="display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;">
             <div class="form-group" style="flex:1; min-width:200px; margin-bottom:0;">
               <label class="form-label" data-i18n="workspace_setup.members.email">Email address</label>
@@ -156,7 +156,7 @@
             <button class="btn-primary" type="button" style="padding:7px 14px;font-size:13px;" onclick="sendInvite()" data-i18n="workspace_setup.members.send_invite">Send invite</button>
             <button class="btn-ghost-sm" type="button" style="padding:7px 12px;" onclick="toggleInviteForm()" data-i18n="workspace_setup.members.cancel">Cancel</button>
           </div>
-          <div id="invite-success" style="display:none; margin-top:10px; font-size:13px; color: #3fb950;" data-i18n="workspace_setup.members.invite_sent">✓ Invite sent.</div>
+          <div id="invite-success" hidden style="margin-top:10px; font-size:13px; color: #3fb950;" data-i18n="workspace_setup.members.invite_sent">✓ Invite sent.</div>
         </div>
 
         <!-- Members list -->
@@ -221,7 +221,7 @@
         </div>
 
         <!-- Pending invites -->
-        <div id="pending-invites" style="border-top: 1px solid var(--border-subtle); padding: 12px 24px 16px;">
+        <div id="pending-invites" hidden style="border-top: 1px solid var(--border-subtle); padding: 12px 24px 16px;">
           <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:10px;">
             <span data-i18n="workspace_setup.members.pending">Pending invites</span> <span id="pending-count" style="background:rgba(139,148,158,0.15);border-radius:10px;padding:1px 7px;font-size:10px;">1</span>
           </div>
@@ -262,7 +262,7 @@
       </div>
 
       <!-- ── Invite team members (create mode only) ── -->
-      <div id="section-invite" class="ws-form-section" style="display:none;">
+      <div id="section-invite" class="ws-form-section" hidden>
         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
           <div class="ws-form-section-title" style="margin-bottom:0;"><span data-i18n="workspace_setup.invite.title">Invite team members</span> <span style="font-size:12px;font-weight:400;color:var(--text-muted);" data-i18n="workspace_setup.optional">(optional)</span></div>
           <button class="btn-ghost-sm" type="button" onclick="addInviteRow()" style="font-size:12px;padding:4px 10px;" data-i18n="workspace_setup.invite.add_person">+ Add person</button>
@@ -289,12 +289,12 @@
         <button class="btn-primary ws-submit-btn" id="submit-btn" type="button" onclick="submitForm()" data-i18n="workspace_setup.actions.save">Save changes</button>
       </div>
 
-      <div class="ws-setup-footer-note" id="footer-note" style="display:none;">
+      <div class="ws-setup-footer-note" id="footer-note" hidden>
         <span data-i18n="workspace_setup.create.footer">You'll be the Owner of this workspace. You can invite additional members after creation.</span>
       </div>
 
       <!-- ── Danger zone (edit mode only) ── -->
-      <div id="section-danger" style="display:none; margin-top:32px;">
+      <div id="section-danger" hidden style="margin-top:32px;">
         <div class="ws-form-section" style="border-color: rgba(248,81,73,0.25); padding:0; overflow:hidden;">
           <div style="padding:16px 24px; border-bottom: 1px solid rgba(248,81,73,0.15);">
             <div style="font-size:14px;font-weight:600;color:var(--red);" data-i18n="workspace_setup.danger.title">Danger zone</div>
diff --git a/apps/ui/js/workspace-setup.js b/apps/ui/js/workspace-setup.js
index df84efa..04e5f3e 100644
--- a/apps/ui/js/workspace-setup.js
+++ b/apps/ui/js/workspace-setup.js
@@ -257,11 +257,11 @@ function renderInvitations() {
 
   count.textContent = String(items.length);
   if (!items.length) {
-    pending.style.display = 'none';
+    pending.hidden = true;
     return;
   }
 
-  pending.style.display = '';
+  pending.hidden = false;
   pending.innerHTML = '';
   var heading = createElement('div', null, tKey('workspace_setup.members.pending') + ' ');
   heading.style.fontSize = '11px';
@@ -369,14 +369,14 @@ function updatePageMode() {
     document.title = 'Crank — ' + tKey('workspace_setup.create.title');
     document.getElementById('page-title').textContent = tKey('workspace_setup.create.title');
     document.getElementById('page-subtitle').textContent = tKey('workspace_setup.create.subtitle');
-    document.getElementById('section-invite').style.display = '';
-    document.getElementById('footer-note').style.display = '';
+    document.getElementById('section-invite').hidden = false;
+    document.getElementById('footer-note').hidden = false;
     submit.textContent = tKey('workspace_setup.actions.create');
     submit.disabled = true;
     submit.classList.add('is-disabled');
   } else {
-    document.getElementById('section-members').style.display = '';
-    document.getElementById('section-danger').style.display = '';
+    document.getElementById('section-members').hidden = false;
+    document.getElementById('section-danger').hidden = false;
     submit.textContent = tKey('workspace_setup.actions.save');
     submit.classList.remove('is-disabled');
   }
@@ -558,14 +558,14 @@ function toggleInviteForm() {
     return;
   }
 
-  if (form.style.display === 'none') {
-    form.style.display = '';
+  if (form.hidden) {
+    form.hidden = false;
     if (success) {
-      success.style.display = 'none';
+      success.hidden = true;
     }
     document.getElementById('invite-email').focus();
   } else {
-    form.style.display = 'none';
+    form.hidden = true;
   }
 }
 
@@ -583,7 +583,7 @@ async function sendInvite() {
   try {
     await window.CrankApi.createInvitation(workspaceFormState.workspaceId, { email: email, role: role });
     document.getElementById('invite-email').value = '';
-    document.getElementById('invite-success').style.display = '';
+    document.getElementById('invite-success').hidden = false;
     await loadWorkspaceAccessData();
   } catch (error) {
     if (window.CrankUi) {