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>
Replace all — with - in all source files (JS, CSS, HTML, JSON,
Markdown) for consistency and readability.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Ulas Kalayci