Adds a client-side fuzzy product search to the design system:
- `src/api/products.js`: fixture catalogue (22 products across the Kaiser
Natron, Holste, Gazelle, Grüne Tante and Linda ranges) plus a scored,
diacritic-folded search (ß→ss, ä→ae, NFKD) with weighted fields
(title 5, brand/keywords 3, size/category 2, id 1) and prefix bonus.
- `Search.vue`: tone-driven (brand/paper/cream) full-screen overlay on
mobile, centered modal on md+. Auto-focus, arrow-key nav, Enter/Esc,
suggested-products empty state, keyboard-hint footer on desktop, safe-
area aware, scroll-locks the document while open.
- Navbar now hosts two triggers: a pill-shaped "Search products"
lookalike (desktop, in the same LanguageSwitcher-style container) and
a green/accent shadow-sm floating button bottom-left on mobile. Both
open the same overlay.
- HomePage feeds the products list into Navbar.
- Design-system showcase (`/design/search`) with live demo + canned
result preview + usage snippet. Sidebar + mobile bottom-nav entries
and DE/EN i18n added.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Introduces:
- src/api/fixtures/products.js + src/api/index.js — placeholder catalog
(24 products across Kaiser-Natron / Holste / Gazelle / Grüne Tante /
Linda) so search has real data. Same shape the backend will return.
- Search.vue — Teleported dialog. Token-scored, diacritics-folded, ß→ss
normalized so German terms still match when users type ASCII. Keyboard
navigation (↑/↓/Enter/Esc), autofocus on open, scroll-lock. Full-screen
on mobile, centered command-palette modal on md+. Tone prop defaults
to 'brand' so the overlay reads as the site's primary affordance
(green), with 'paper' and 'cream' variants available.
- SearchSection.vue + ds-search route + sidebar entry.
- DE + EN strings for the overlay and the showcase.
Navbar wires the triggers: desktop search button sits left of the
LanguageSwitcher in the right cluster; mobile gets a matching bottom-
left floating button (cream surface, safe-area padded) that mirrors the
existing bottom-right cart/menu cluster. The Search overlay is mounted
inside Navbar with the default catalog, so every page that renders a
Navbar gets search for free. Selected products bubble up as a
@select event for navigation handling.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
