ui: finish template safety cleanup

TASKS.md

@@ -2,14 +2,14 @@
 
 ## Current
 
-### `feat/frontend-template-safety-cleanup`
+### `feat/frontend-css-state-cleanup`
 
 Status: in_progress
 
 DoD:
-- local UI helpers do not use `innerHTML` for static SVG or icon insertion
+- UI state visuals are driven by classes or semantic attributes instead of ad-hoc inline style mutation
-- wizard shell and workspace shell use DOM-based icon and fragment construction
+- button disabled/loading states do not rely on manual style toggles
-- remaining HTML-bearing i18n/template paths are explicitly isolated and tracked
+- wizard and workspace flows keep current behavior after state-class migration
 
 ## Next
 

apps/ui/html/wizard/index.html

@@ -119,7 +119,7 @@
 
           <div class="step-sidebar-header">
             <div class="step-sidebar-logo-mark">M</div>
-              <div class="step-sidebar-brand" data-i18n="wizard.sidebar.brand.create">
+              <div class="step-sidebar-brand" data-wizard-brand="create">
               Create <span>operation</span>
             </div>
           </div>

apps/ui/js/wizard.js

@@ -36,6 +36,7 @@ var protoParsed = window.protoParsed;
 var selectedRpcMethod = window.selectedRpcMethod;
 
 async function initWizardPage() {
+  renderSidebarBrand('create');
   document.querySelector('.btn-continue').addEventListener('click', function() {
     if (currentStep < TOTAL_STEPS) {
       goToStep(currentStep + 1);
@@ -149,6 +150,31 @@ var METHOD_CALLOUTS = {
   PATCH:  { icon: 'info', text: { en: { title: 'PATCH selected — partial update.', body: 'Only include the fields you want to modify in the body schema defined in step 4.' }, ru: { title: 'Выбран PATCH — частичное обновление.', body: 'В body schema на шаге 4 включайте только те поля, которые хотите изменить.' } } },
 };
 
+function renderSidebarBrand(mode) {
+  var sidebarBrand = document.querySelector('.step-sidebar-brand');
+  if (!sidebarBrand) return;
+  var language = localStorage.getItem('crank_lang') || 'en';
+  var parts;
+  if (mode === 'edit') {
+    parts = language === 'ru'
+      ? { prefix: 'Редактировать ', suffix: 'операцию' }
+      : { prefix: 'Edit ', suffix: 'operation' };
+  } else {
+    parts = language === 'ru'
+      ? { prefix: 'Создать ', suffix: 'операцию' }
+      : { prefix: 'Create ', suffix: 'operation' };
+  }
+  sidebarBrand.dataset.wizardBrand = mode;
+  sidebarBrand.textContent = parts.prefix;
+  var accent = document.createElement('span');
+  accent.textContent = parts.suffix;
+  sidebarBrand.appendChild(accent);
+}
+
+window.addEventListener('crank:langchange', function() {
+  renderSidebarBrand(wizardMode === 'edit' ? 'edit' : 'create');
+});
+
 function selectMethod(btn) {
   document.querySelectorAll('.method-card').forEach(function(b) { b.classList.remove('active'); });
   btn.classList.add('active');
@@ -1874,8 +1900,7 @@ async function loadOperationForEdit() {
 function setEditModePresentation() {
   var progressLabel = document.querySelector('.progress-label');
   if (progressLabel) progressLabel.textContent = tKey('wizard.progress.edit');
-  var sidebarBrand = document.querySelector('.step-sidebar-brand');
+  renderSidebarBrand('edit');
-  if (sidebarBrand) sidebarBrand.innerHTML = tKey('wizard.sidebar.brand.edit');
 }
 
 function selectProtocol(protocol) {