feat: add kitchen-tabs utility, CSS, token and test

package.json

@@ -20,12 +20,13 @@
     "test:ncb": "node --experimental-sqlite test-notes-contacts-budget.js",
     "test:ux-utils": "node test-ux-utils.js",
     "test:modal-utils": "node --loader ./test-browser-loader.mjs test-modal-utils.js",
+    "test:kitchen-tabs": "node --loader ./test-browser-loader.mjs test-kitchen-tabs.js",
     "test:reminders": "node --experimental-sqlite test-reminders.js",
     "test:api": "node test-api.js",
     "test:setup": "node test-setup.js",
     "test:ics-parser": "node test-ics-parser.js",
     "test:ics-sub": "node --experimental-sqlite test-ics-subscription.js",
-    "test": "node --experimental-sqlite test-db.js && node --experimental-sqlite test-dashboard.js && node --experimental-sqlite test-tasks.js && node --experimental-sqlite test-shopping.js && node --experimental-sqlite test-meals.js && node --experimental-sqlite test-calendar.js && node --experimental-sqlite test-notes-contacts-budget.js && npm run test:ux-utils && npm run test:modal-utils && npm run test:reminders && npm run test:api && npm run test:ics-parser && npm run test:ics-sub && npm run test:setup"
+    "test": "node --experimental-sqlite test-db.js && node --experimental-sqlite test-dashboard.js && node --experimental-sqlite test-tasks.js && node --experimental-sqlite test-shopping.js && node --experimental-sqlite test-meals.js && node --experimental-sqlite test-calendar.js && node --experimental-sqlite test-notes-contacts-budget.js && npm run test:ux-utils && npm run test:modal-utils && npm run test:reminders && npm run test:api && npm run test:ics-parser && npm run test:ics-sub && npm run test:setup && npm run test:kitchen-tabs"
   },
   "dependencies": {
     "bcrypt": "^6.0.0",

public/styles/kitchen-tabs.css

@@ -0,0 +1,86 @@
+/* Modul: Kitchen Tabs Bar
+ * Sticky Segment-Control für Mahlzeiten/Rezepte/Einkauf + Sub-Modul Layout-Fixes
+ */
+
+.kitchen-tabs-bar {
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-4);
+  height: var(--kitchen-tabs-height);
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  background-color: var(--color-bg);
+  border-bottom: 1px solid var(--color-border-subtle);
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  flex-shrink: 0;
+}
+
+.kitchen-tabs-bar::-webkit-scrollbar {
+  display: none;
+}
+
+.kitchen-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0 var(--space-3);
+  height: 36px;
+  border-radius: var(--radius-full);
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.kitchen-tab:active {
+  transform: scale(0.96);
+  transition-duration: 0.06s;
+}
+
+.kitchen-tab--active {
+  background-color: color-mix(in srgb, var(--active-module-accent, var(--color-accent)) 14%, transparent);
+  color: var(--active-module-accent, var(--color-accent));
+}
+
+.kitchen-tab__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.kitchen-tab__label {
+  line-height: 1;
+}
+
+/* Mahlzeiten: sticky day-header unterhalb der Tab-Leiste */
+.has-kitchen-tabs .day-header {
+  top: var(--kitchen-tabs-height);
+}
+
+/* Einkauf: Viewport-Höhe um Tab-Leiste reduzieren (Mobile) */
+.has-kitchen-tabs .shopping-page {
+  height: calc(
+    100dvh
+    - var(--nav-bottom-height)
+    - var(--safe-area-inset-bottom)
+    - var(--kitchen-tabs-height)
+  );
+}
+
+/* Einkauf: Viewport-Höhe (Desktop) */
+@media (min-width: 1024px) {
+  .has-kitchen-tabs .shopping-page {
+    height: calc(100dvh - var(--kitchen-tabs-height));
+  }
+}

public/styles/tokens.css

@@ -351,6 +351,7 @@
   --content-max-width: 1280px;
   --content-max-width-narrow: 720px;
   --cal-hour-height: 56px;
+  --kitchen-tabs-height: 56px;
 
   /* --------------------------------------------------------
    * 13. Sidebar

public/utils/kitchen-tabs.js

@@ -0,0 +1,68 @@
+import { t } from '/i18n.js';
+
+export const KITCHEN_ROUTES = ['/meals', '/recipes', '/shopping'];
+export const KITCHEN_STORAGE_KEY = 'oikos-kitchen-tab';
+
+const TABS = () => [
+  { route: '/meals',    labelKey: 'nav.meals',    icon: 'utensils'       },
+  { route: '/recipes',  labelKey: 'nav.recipes',  icon: 'book-text'      },
+  { route: '/shopping', labelKey: 'nav.shopping', icon: 'shopping-cart'  },
+];
+
+export function getLastKitchenRoute() {
+  try {
+    const stored = sessionStorage.getItem(KITCHEN_STORAGE_KEY);
+    return KITCHEN_ROUTES.includes(stored) ? stored : '/meals';
+  } catch {
+    return '/meals';
+  }
+}
+
+export function isKitchenRoute(path) {
+  return KITCHEN_ROUTES.includes(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);
+  });
+
+  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 });
+}

test-kitchen-tabs.js

@@ -0,0 +1,63 @@
+/**
+ * Tests: Kitchen-Tabs Utility (pure functions)
+ * Läuft mit: node --loader ./test-browser-loader.mjs test-kitchen-tabs.js
+ */
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+const { KITCHEN_ROUTES, KITCHEN_STORAGE_KEY, getLastKitchenRoute, isKitchenRoute } = await (async () => {
+  global.window = { oikos: null };
+  global.document = {
+    createElement: () => ({
+      className: '', dataset: {}, style: {},
+      setAttribute() {}, appendChild() {},
+      classList: { add() {}, toggle() {} },
+      insertAdjacentElement() {},
+      addEventListener() {},
+    }),
+  };
+  const storage = {
+    _d: {},
+    getItem(k) { return this._d[k] ?? null; },
+    setItem(k, v) { this._d[k] = v; },
+  };
+  global.sessionStorage = storage;
+  global.t = (k) => k;
+  return import('./public/utils/kitchen-tabs.js');
+})();
+
+test('KITCHEN_ROUTES enthält alle drei Sub-Routen', () => {
+  assert.deepEqual(KITCHEN_ROUTES, ['/meals', '/recipes', '/shopping']);
+});
+
+test('KITCHEN_STORAGE_KEY ist korrekt', () => {
+  assert.equal(KITCHEN_STORAGE_KEY, 'oikos-kitchen-tab');
+});
+
+test('getLastKitchenRoute: Standardwert /meals wenn kein Storage-Eintrag', () => {
+  global.sessionStorage._d = {};
+  assert.equal(getLastKitchenRoute(), '/meals');
+});
+
+test('getLastKitchenRoute: gibt gespeicherte Route zurück', () => {
+  global.sessionStorage._d = { 'oikos-kitchen-tab': '/recipes' };
+  assert.equal(getLastKitchenRoute(), '/recipes');
+});
+
+test('getLastKitchenRoute: ignoriert ungültige gespeicherte Route', () => {
+  global.sessionStorage._d = { 'oikos-kitchen-tab': '/admin' };
+  assert.equal(getLastKitchenRoute(), '/meals');
+});
+
+test('isKitchenRoute: erkennt Kitchen-Routen', () => {
+  assert.equal(isKitchenRoute('/meals'), true);
+  assert.equal(isKitchenRoute('/recipes'), true);
+  assert.equal(isKitchenRoute('/shopping'), true);
+});
+
+test('isKitchenRoute: lehnt Nicht-Kitchen-Routen ab', () => {
+  assert.equal(isKitchenRoute('/tasks'), false);
+  assert.equal(isKitchenRoute('/'), false);
+  assert.equal(isKitchenRoute('/calendar'), false);
+  assert.equal(isKitchenRoute(''), false);
+});