serv_benchmark/.gemini/skills/frontend-creator/references/ui_patterns.md

Patterns UI et Rendu

Le projet utilise du JavaScript Vanilla avec des gabarits de chaînes de caractères (template strings) pour le rendu du DOM.

Rendu de Section

La fonction createSection est souvent utilisée pour générer le HTML d'une section de détail.

function createSection(id, icon, title, content, options = {}) {
  // icon est souvent un span avec data-icon pour IconManager
  return `
    <section class="device-section" id="${id}">
      <div class="section-header">
        <h3>${icon}<span class="section-title">${title}</span></h3>
        ${options.actionsHtml || ''}
      </div>
      <div class="section-body">
        ${content}
      </div>
    </section>
  `;
}

Gestion des Icônes

Le système utilise IconManager pour injecter des SVG à partir d'attributs data-icon. Après avoir injecté du HTML contenant des data-icon, il faut appeler :

if (window.IconManager) {
  window.IconManager.inlineSvgIcons(containerElement);
}

Échappement HTML

Utilisez toujours window.BenchUtils.escapeHtml() pour les données venant de l'API afin d'éviter les failles XSS.

Interaction et État

Les pages utilisent souvent des variables d'état globales simples (ex: isEditing, currentDevice) et re-rendent la section entière lors d'un changement d'état.