feat(nav): shared sub-tabs component for settings and kitchen

Extracts the tab-bar UI into a reusable renderSubTabs() utility (public/utils/sub-tabs.js + public/styles/sub-tabs.css) so all sub-module navigation shares one implementation and visual style. - Settings: replaces template-literal <nav class="settings-tabs"> with renderSubTabs(); tabs now show icon + label (pill-style), group separators via separatorBefore, panel switching via onChange - Kitchen: renderKitchenTabsBar() becomes a thin wrapper around renderSubTabs(); kitchen-tabs.css keeps only layout adjustment rules - CSS: kitchen-tab* rules removed from kitchen-tabs.css, settings-tab-btn* rules removed from settings.css; both now inherit from sub-tabs.css - tokens.css: adds --sub-tabs-height (52px default; kitchen overrides to --kitchen-tabs-height: 56px) - test-browser-loader.mjs: resolves browser-absolute /utils/*.js imports to public/ directory for Node test compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 07:33:54 +02:00
parent c465713418
commit c4cb52d042
9 changed files with 236 additions and 220 deletions
@@ -1,4 +1,5 @@
 import { t } from '/i18n.js';
+import { renderSubTabs } from '/utils/sub-tabs.js';

 export const KITCHEN_ROUTES = ['/meals', '/recipes', '/shopping'];
 export const KITCHEN_STORAGE_KEY = 'oikos-kitchen-tab';
@@ -23,46 +24,15 @@ export function isKitchenRoute(path) {
 }

 export function renderKitchenTabsBar(container, activeRoute) {
-  try {
-    sessionStorage.setItem(KITCHEN_STORAGE_KEY, activeRoute);
-  } catch { /* ignore */ }
-
  container.classList.add('has-kitchen-tabs');

-  const bar = document.createElement('div');
-  bar.className = 'kitchen-tabs-bar';
-  bar.setAttribute('role', 'tablist');
-  bar.setAttribute('aria-label', t('nav.kitchen'));
-
-  TABS().forEach(({ route, labelKey, icon }) => {
-    const btn = document.createElement('button');
-    btn.className = 'kitchen-tab' + (route === activeRoute ? ' kitchen-tab--active' : '');
-    btn.dataset.route = route;
-    btn.type = 'button';
-    btn.setAttribute('role', 'tab');
-    btn.setAttribute('aria-selected', route === activeRoute ? 'true' : 'false');
-
-    const i = document.createElement('i');
-    i.dataset.lucide = icon;
-    i.className = 'kitchen-tab__icon';
-    i.setAttribute('aria-hidden', 'true');
-
-    const span = document.createElement('span');
-    span.className = 'kitchen-tab__label';
-    span.textContent = t(labelKey);
-
-    btn.appendChild(i);
-    btn.appendChild(span);
-    bar.appendChild(btn);
+  renderSubTabs(container, {
+    tabs: TABS().map(({ route, labelKey, icon }) => ({ id: route, label: t(labelKey), icon })),
+    activeId: activeRoute,
+    storageKey: KITCHEN_STORAGE_KEY,
+    extraClass: 'kitchen-tabs-bar',
+    ariaLabel: t('nav.kitchen'),
+    insertPosition: 'afterbegin',
+    onChange: (route) => window.oikos?.navigate(route),
  });
-
-  bar.addEventListener('click', (e) => {
-    const btn = e.target.closest('[data-route]');
-    if (!btn || btn.dataset.route === activeRoute) return;
-    window.oikos?.navigate(btn.dataset.route);
-  });
-
-  container.insertAdjacentElement('afterbegin', bar);
-
-  if (window.lucide) window.lucide.createIcons({ el: bar });
 }
@@ -0,0 +1,91 @@
+/**
+ * Shared sticky sub-tab bar (pill-style).
+ * Used by kitchen modules and settings; extend to any future sub-module nav.
+ *
+ * @param {HTMLElement} anchorEl  - element relative to which the bar is inserted
+ * @param {object}      opts
+ * @param {Array<{id: string, label: string, icon?: string, separatorBefore?: boolean}>} opts.tabs
+ * @param {string}      opts.activeId          - initially active tab id
+ * @param {Function}    opts.onChange          - called with new id on tab switch
+ * @param {string}      [opts.storageKey]      - sessionStorage key for persistence
+ * @param {string}      [opts.extraClass]      - additional CSS class on bar element
+ * @param {string}      [opts.ariaLabel]
+ * @param {InsertPosition} [opts.insertPosition='afterbegin']
+ * @returns {HTMLElement} the rendered bar element
+ */
+export function renderSubTabs(anchorEl, {
+  tabs,
+  activeId,
+  onChange,
+  storageKey,
+  extraClass,
+  ariaLabel,
+  insertPosition = 'afterbegin',
+}) {
+  let current = activeId;
+
+  if (storageKey) {
+    try { sessionStorage.setItem(storageKey, current); } catch { /* ignore */ }
+  }
+
+  const bar = document.createElement('div');
+  bar.className = 'sub-tabs-bar' + (extraClass ? ' ' + extraClass : '');
+  bar.setAttribute('role', 'tablist');
+  if (ariaLabel) bar.setAttribute('aria-label', ariaLabel);
+
+  for (const { id, label, icon, separatorBefore } of tabs) {
+    if (separatorBefore) {
+      const sep = document.createElement('span');
+      sep.className = 'sub-tabs-separator';
+      sep.setAttribute('aria-hidden', 'true');
+      bar.appendChild(sep);
+    }
+
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'sub-tab' + (id === current ? ' sub-tab--active' : '');
+    btn.dataset.tabId = id;
+    btn.setAttribute('role', 'tab');
+    btn.setAttribute('aria-selected', id === current ? 'true' : 'false');
+
+    if (icon) {
+      const i = document.createElement('i');
+      i.dataset.lucide = icon;
+      i.className = 'sub-tab__icon';
+      i.setAttribute('aria-hidden', 'true');
+      btn.appendChild(i);
+    }
+
+    const span = document.createElement('span');
+    span.className = 'sub-tab__label';
+    span.textContent = label;
+    btn.appendChild(span);
+
+    bar.appendChild(btn);
+  }
+
+  bar.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-tab-id]');
+    if (!btn || btn.dataset.tabId === current) return;
+
+    current = btn.dataset.tabId;
+
+    if (storageKey) {
+      try { sessionStorage.setItem(storageKey, current); } catch { /* ignore */ }
+    }
+
+    bar.querySelectorAll('[data-tab-id]').forEach((b) => {
+      const active = b.dataset.tabId === current;
+      b.classList.toggle('sub-tab--active', active);
+      b.setAttribute('aria-selected', String(active));
+    });
+
+    onChange(current);
+  });
+
+  anchorEl.insertAdjacentElement(insertPosition, bar);
+
+  if (window.lucide) window.lucide.createIcons({ el: bar });
+
+  return bar;
+}