From 4203c34dcf24335dbf724d0882900dabf7f4387b Mon Sep 17 00:00:00 2001
From: "a.tolmachev" <a.tolmachev@tbank.ru>
Date: Sat, 2 May 2026 14:02:26 +0000
Subject: [PATCH] ui: use hidden state for grpc wizard panels

---
 apps/ui/html/wizard/step3-grpc.html | 22 ++++++-------
 apps/ui/js/wizard.js                | 48 ++++++++++++++---------------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/apps/ui/html/wizard/step3-grpc.html b/apps/ui/html/wizard/step3-grpc.html
index 86416dc..92deb30 100644
--- a/apps/ui/html/wizard/step3-grpc.html
+++ b/apps/ui/html/wizard/step3-grpc.html
@@ -51,7 +51,7 @@
                   <div class="proto-dropzone-sub" data-i18n="wizard.step3.grpc.drop_subtitle">or click to browse</div>
                   <input type="file" id="proto-file-input" accept=".proto" style="display:none" onchange="handleProtoFile(event)">
                 </div>
-                <div class="proto-file-info" id="proto-file-info" style="display:none">
+                <div class="proto-file-info" id="proto-file-info" hidden>
                   <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V6z"/><path d="M9 2v4h4"/></svg>
                   <span class="proto-file-name" id="proto-file-name"></span>
                   <span class="proto-file-size" id="proto-file-size"></span>
@@ -62,7 +62,7 @@
                   <button class="btn-ghost-sm" onclick="toggleProtoPaste()" id="proto-paste-btn" data-i18n="wizard.step3.grpc.paste_content">Paste content</button>
                   <div style="flex:1; height:1px; background:var(--border-subtle);"></div>
                 </div>
-                <div id="proto-paste-area" style="display:none">
+                <div id="proto-paste-area" hidden>
                   <div class="code-block" style="border-radius: 6px;">
                     <div class="code-toolbar">
                       <div class="code-dots"><span></span><span></span><span></span></div>
@@ -78,8 +78,8 @@
                 </div>
               </div>
             </div>
-            <div id="proto-parsed-view" style="display:none">
-              <div class="info-callout" id="proto-streaming-notice" style="margin-bottom:20px;display:none">
+            <div id="proto-parsed-view" hidden>
+              <div class="info-callout" id="proto-streaming-notice" hidden style="margin-bottom:20px">
                 <svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polygon points="8,1 15,14 1,14" fill="none"/><path d="M8 6v4M8 11.5v.5"/></svg>
                 <div class="info-callout-body">
                   <div class="info-callout-title" data-i18n="wizard.step3.grpc.streaming_excluded">Streaming methods excluded</div>
@@ -99,7 +99,7 @@
           </div><!-- /grpc-src-proto -->
 
           <!-- ══ Reflection source ══ -->
-          <div id="grpc-src-reflection" style="display:none">
+          <div id="grpc-src-reflection" hidden>
             <div class="config-card" style="margin-bottom: 20px;">
               <div class="config-card-header">
                 <div class="config-card-header-icon">
@@ -127,14 +127,14 @@
                   </button>
                 </div>
                 <!-- Loading -->
-                <div id="grpc-reflect-loading" style="display:none">
+                <div id="grpc-reflect-loading" hidden>
                   <div class="grpc-reflect-status">
                     <div class="grpc-reflect-spinner"></div>
                     <span id="grpc-reflect-status-text" data-i18n="wizard.step3.grpc.connecting">Connecting…</span>
                   </div>
                 </div>
                 <!-- Error -->
-                <div id="grpc-reflect-error" style="display:none">
+                <div id="grpc-reflect-error" hidden>
                   <div class="grpc-reflect-error-row">
                     <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="var(--error,#f87171)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="7"/><path d="M8 5v3M8 10.5v.5"/></svg>
                     <span id="grpc-reflect-error-text" data-i18n="wizard.step3.grpc.live_step5">Live descriptor discovery is handled in step 5.</span>
@@ -143,8 +143,8 @@
                 </div>
               </div>
             </div>
-            <div id="reflect-parsed-view" style="display:none">
-              <div class="info-callout" id="reflect-streaming-notice" style="margin-bottom:20px;display:none">
+            <div id="reflect-parsed-view" hidden>
+              <div class="info-callout" id="reflect-streaming-notice" hidden style="margin-bottom:20px">
                 <svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polygon points="8,1 15,14 1,14" fill="none"/><path d="M8 6v4M8 11.5v.5"/></svg>
                 <div class="info-callout-body">
                   <div class="info-callout-title" data-i18n="wizard.step3.grpc.streaming_excluded">Streaming methods excluded</div>
@@ -164,7 +164,7 @@
           </div><!-- /grpc-src-reflection -->
 
           <!-- ══ Manual source ══ -->
-          <div id="grpc-src-manual" style="display:none">
+          <div id="grpc-src-manual" hidden>
             <div class="config-card" style="margin-bottom: 20px;">
               <div class="config-card-header">
                 <div class="config-card-header-icon">
@@ -206,7 +206,7 @@
           </div><!-- /grpc-src-manual -->
 
           <!-- ══ Shared method detail (proto + reflection) ══ -->
-          <div id="grpc-method-detail" class="config-card" style="margin-bottom: 20px; display:none">
+          <div id="grpc-method-detail" class="config-card" hidden style="margin-bottom: 20px">
             <div class="config-card-header">
               <div class="config-card-header-icon">
                 <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 8h12M10 4l4 4-4 4"/></svg>
diff --git a/apps/ui/js/wizard.js b/apps/ui/js/wizard.js
index fd871d7..3ef6e59 100644
--- a/apps/ui/js/wizard.js
+++ b/apps/ui/js/wizard.js
@@ -808,12 +808,12 @@ function selectGrpcSource(source) {
   document.querySelectorAll('.grpc-source-btn').forEach(function(btn) {
     btn.classList.toggle('active', btn.dataset.source === source);
   });
-  document.getElementById('grpc-src-proto').style.display      = source === 'proto'      ? '' : 'none';
-  document.getElementById('grpc-src-reflection').style.display = source === 'reflection' ? '' : 'none';
-  document.getElementById('grpc-src-manual').style.display     = source === 'manual'     ? '' : 'none';
+  document.getElementById('grpc-src-proto').hidden = source !== 'proto';
+  document.getElementById('grpc-src-reflection').hidden = source !== 'reflection';
+  document.getElementById('grpc-src-manual').hidden = source !== 'manual';
   // hide shared detail when switching sources
   var detail = document.getElementById('grpc-method-detail');
-  if (detail) detail.style.display = 'none';
+  if (detail) detail.hidden = true;
   selectedRpcMethod = null;
 }
 
@@ -908,7 +908,7 @@ function renderServiceResults(parsed, ids) {
   var notice = document.getElementById(ids.notice);
   var countEl = document.getElementById(ids.count);
   if (notice) {
-    notice.style.display = parsed.streamingCount > 0 ? '' : 'none';
+    notice.hidden = parsed.streamingCount <= 0;
     if (countEl && parsed.streamingCount > 0) countEl.textContent = parsed.streamingCount;
   }
 
@@ -959,8 +959,8 @@ function renderServiceResults(parsed, ids) {
     });
   }
 
-  document.getElementById(ids.view).style.display = '';
-  document.getElementById('grpc-method-detail').style.display = 'none';
+  document.getElementById(ids.view).hidden = false;
+  document.getElementById('grpc-method-detail').hidden = true;
 }
 
 function renderParsedProto(parsed) {
@@ -1016,12 +1016,12 @@ function selectRpcMethod(btn) {
   if (resTypeEl) resTypeEl.textContent = resType;
 
   var sigGrid = document.getElementById('grpc-detail-sig');
-  if (sigGrid) sigGrid.style.display = '';
+  if (sigGrid) sigGrid.hidden = false;
 
   renderFieldList('grpc-req-fields', reqType);
   renderFieldList('grpc-res-fields', resType);
 
-  document.getElementById('grpc-method-detail').style.display = '';
+  document.getElementById('grpc-method-detail').hidden = false;
 }
 
 function renderFieldList(elId, typeName) {
@@ -1086,12 +1086,12 @@ function showProtoFileInfo(name, size) {
   var info = document.getElementById('proto-file-info');
   var nameEl = document.getElementById('proto-file-name');
   var sizeEl = document.getElementById('proto-file-size');
-  if (dropzone) dropzone.style.display = 'none';
-  if (info) info.style.display = '';
+  if (dropzone) dropzone.hidden = true;
+  if (info) info.hidden = false;
   if (nameEl) nameEl.textContent = name;
   if (sizeEl) sizeEl.textContent = (size / 1024).toFixed(1) + ' KB';
   // hide paste area
-  document.getElementById('proto-paste-area').style.display = 'none';
+  document.getElementById('proto-paste-area').hidden = true;
   document.getElementById('proto-paste-btn').textContent = 'Paste content';
 }
 
@@ -1099,9 +1099,9 @@ function resetProto() {
   var dropzone = document.getElementById('proto-dropzone');
   var info = document.getElementById('proto-file-info');
   var parsedView = document.getElementById('proto-parsed-view');
-  if (dropzone) dropzone.style.display = '';
-  if (info) info.style.display = 'none';
-  if (parsedView) parsedView.style.display = 'none';
+  if (dropzone) dropzone.hidden = false;
+  if (info) info.hidden = true;
+  if (parsedView) parsedView.hidden = true;
   var fileInput = document.getElementById('proto-file-input');
   if (fileInput) fileInput.value = '';
   protoParsed = null;
@@ -1113,8 +1113,8 @@ function toggleProtoPaste() {
   var area = document.getElementById('proto-paste-area');
   var btn = document.getElementById('proto-paste-btn');
   if (!area) return;
-  var open = area.style.display !== 'none';
-  area.style.display = open ? 'none' : '';
+  var open = !area.hidden;
+  area.hidden = open;
   if (btn) btn.textContent = open ? 'Paste content' : 'Cancel paste';
   if (!open) {
     var ta = document.getElementById('proto-paste-input');
@@ -1125,7 +1125,7 @@ function toggleProtoPaste() {
 function cancelProtoPaste() {
   var area = document.getElementById('proto-paste-area');
   var btn = document.getElementById('proto-paste-btn');
-  if (area) area.style.display = 'none';
+  if (area) area.hidden = true;
   if (btn) btn.textContent = 'Paste content';
 }
 
@@ -1134,13 +1134,13 @@ function parseProtoPasted() {
   if (!ta || !ta.value.trim()) return;
   var parsed = parseProto(ta.value);
   wizardProtoUpload = { fileName: 'pasted.proto', content: ta.value };
-  document.getElementById('proto-paste-area').style.display = 'none';
+  document.getElementById('proto-paste-area').hidden = true;
   var dropzone = document.getElementById('proto-dropzone');
-  if (dropzone) dropzone.style.display = 'none';
+  if (dropzone) dropzone.hidden = true;
   var info = document.getElementById('proto-file-info');
   var nameEl = document.getElementById('proto-file-name');
   var sizeEl = document.getElementById('proto-file-size');
-  if (info) info.style.display = '';
+  if (info) info.hidden = false;
   if (nameEl) nameEl.textContent = 'pasted.proto';
   if (sizeEl) sizeEl.textContent = (ta.value.length / 1024).toFixed(1) + ' KB';
   renderParsedProto(parsed);
@@ -1197,7 +1197,7 @@ function grpcManualRouteInput(val) {
   var detail = document.getElementById('grpc-method-detail');
   var sigGrid = document.getElementById('grpc-detail-sig');
   if (!val || !val.startsWith('/') || val.indexOf('/', 1) === -1) {
-    if (detail) detail.style.display = 'none';
+    if (detail) detail.hidden = true;
     return;
   }
   // Parse service + method from route: /[pkg.]Service/Method
@@ -1213,10 +1213,10 @@ function grpcManualRouteInput(val) {
   if (sub) sub.textContent = serviceName + '/' + methodName;
 
   // hide sig grid in manual mode (no field data)
-  if (sigGrid) sigGrid.style.display = 'none';
+  if (sigGrid) sigGrid.hidden = true;
 
   grpcManualTypeInput();
-  if (detail) detail.style.display = '';
+  if (detail) detail.hidden = false;
 }
 
 function grpcManualTypeInput() {