From b938192f0d29743522d8ffcb9c7731e4c9ab2549 Mon Sep 17 00:00:00 2001
From: "a.tolmachev" <a.tolmachev@tbank.ru>
Date: Sat, 2 May 2026 14:56:39 +0000
Subject: [PATCH] ui: use hidden state for api key modal sections

---
 apps/ui/html/api-keys.html |  6 +++---
 apps/ui/js/api-keys.js     | 20 ++++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/ui/html/api-keys.html b/apps/ui/html/api-keys.html
index 0fa573a..ca3d7c9 100644
--- a/apps/ui/html/api-keys.html
+++ b/apps/ui/html/api-keys.html
@@ -211,7 +211,7 @@
           </div>
         </div>
       </div>
-      <div class="modal-body" id="modal-reveal-body" style="display:none;">
+      <div class="modal-body" id="modal-reveal-body" hidden>
         <div class="callout warning" style="margin-bottom:16px;">
           <svg class="callout-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--amber)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
             <polygon points="8,1.5 15.5,14.5 0.5,14.5" fill="none"/><path d="M8 6v4M8 11.5v.5"/>
@@ -232,7 +232,7 @@
         <button class="btn-secondary" id="modal-cancel-btn" type="button" data-i18n="apikeys.modal.cancel">Cancel</button>
         <button class="btn-primary" id="modal-confirm-btn" type="button" data-i18n="apikeys.modal.create">Create key</button>
       </div>
-      <div class="modal-footer" id="modal-footer-done" style="display:none;">
+      <div class="modal-footer" id="modal-footer-done" hidden>
         <button class="btn-primary" id="modal-done-btn" type="button" data-i18n="apikeys.modal.done">Done — I've copied the key</button>
       </div>
     </div>
@@ -263,7 +263,7 @@
           <button class="btn-icon" data-i18n-title="apikeys.action.copy_prefix" title="Copy key prefix"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M11 5V3.5A1.5 1.5 0 009.5 2H3.5A1.5 1.5 0 002 3.5v6A1.5 1.5 0 003.5 11H5"/></svg></button>
           <button class="btn-icon danger" data-i18n-title="apikeys.action.revoke" title="Revoke key"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.5"/><path d="M5.5 10.5l5-5M10.5 10.5l-5-5"/></svg></button>
         </span>
-        <span class="actions-revoked" style="display:none;">
+        <span class="actions-revoked" hidden>
           <button class="btn-icon" data-i18n-title="apikeys.action.delete" title="Delete"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2h4M2.5 4h11M5 4l.5 9h5l.5-9"/></svg></button>
         </span>
       </td>
diff --git a/apps/ui/js/api-keys.js b/apps/ui/js/api-keys.js
index b03ac2c..66ba28e 100644
--- a/apps/ui/js/api-keys.js
+++ b/apps/ui/js/api-keys.js
@@ -228,8 +228,8 @@ function renderTable(errorMessage) {
         revokeKey(key.id);
       });
     } else {
-      actionsActive.style.display = 'none';
-      actionsRevoked.style.display = '';
+      actionsActive.hidden = true;
+      actionsRevoked.hidden = false;
       actionsRevoked.querySelector('[title=\"Delete\"]').addEventListener('click', function() {
         deleteKey(key.id);
       });
@@ -242,10 +242,10 @@ function renderTable(errorMessage) {
 var modal = document.getElementById('modal-create');
 
 function openModal() {
-  document.getElementById('modal-form-body').style.display = '';
-  document.getElementById('modal-reveal-body').style.display = 'none';
-  document.getElementById('modal-footer-create').style.display = '';
-  document.getElementById('modal-footer-done').style.display = 'none';
+  document.getElementById('modal-form-body').hidden = false;
+  document.getElementById('modal-reveal-body').hidden = true;
+  document.getElementById('modal-footer-create').hidden = false;
+  document.getElementById('modal-footer-done').hidden = true;
   document.getElementById('new-key-name').value = '';
   selectedScopes = new Set(['read']);
   renderScopes();
@@ -289,10 +289,10 @@ document.getElementById('modal-confirm-btn').addEventListener('click', async fun
     var created = await createKey(name, Array.from(selectedScopes));
     KEYS.unshift(created.record);
     document.getElementById('reveal-key-value').textContent = created.rawKey;
-    document.getElementById('modal-form-body').style.display = 'none';
-    document.getElementById('modal-reveal-body').style.display = '';
-    document.getElementById('modal-footer-create').style.display = 'none';
-    document.getElementById('modal-footer-done').style.display = '';
+    document.getElementById('modal-form-body').hidden = true;
+    document.getElementById('modal-reveal-body').hidden = false;
+    document.getElementById('modal-footer-create').hidden = true;
+    document.getElementById('modal-footer-done').hidden = false;
     renderTable();
     if (window.CrankUi) {
       window.CrankUi.success(