Function renderSidebar

src/settings-main.ts:107–148

()

}

function renderSidebar(): void {
  const nav = document.getElementById('sidebarNav');
  if (!nav) return;

  const items: string[] = [];

  const progress = getTotalProgress();
  const overviewDotClass = progress.ready === progress.total ? 'dot-ok' : progress.ready > 0 ? 'dot-partial' : 'dot-warn';
  items.push(`
    <button class="settings-nav-item${activeSection === 'overview' ? ' active' : ''}" data-section="overview" role="tab" aria-selected="${activeSection === 'overview'}">
      ${SIDEBAR_ICONS.overview}
      <span class="settings-nav-label">Overview</span>
      <span class="settings-nav-dot ${overviewDotClass}"></span>
    </button>
  `);

  items.push('<div class="settings-nav-sep"></div>');

  for (const cat of SETTINGS_CATEGORIES) {
    const { ready, total } = getFeatureStatusCounts(cat);
    const dotClass = ready === total ? 'dot-ok' : ready > 0 ? 'dot-partial' : 'dot-warn';
    items.push(`
      <button class="settings-nav-item${activeSection === cat.id ? ' active' : ''}" data-section="${cat.id}" role="tab" aria-selected="${activeSection === cat.id}">
        ${SIDEBAR_ICONS[cat.id] || ''}
        <span class="settings-nav-label">${escapeHtml(cat.label)}</span>
        <span class="settings-nav-count">${ready}/${total}</span>
        <span class="settings-nav-dot ${dotClass}"></span>
      </button>
    `);
  }

  items.push('<div class="settings-nav-sep"></div>');

  items.push(`
    <button class="settings-nav-item${activeSection === 'debug' ? ' active' : ''}" data-section="debug" role="tab" aria-selected="${activeSection === 'debug'}">
      ${SIDEBAR_ICONS.debug}
      <span class="settings-nav-label">Debug &amp; Logs</span>
    </button>
  `);

  nav.innerHTML = items.join('');
}

// ── Section rendering ──