feat(search): product search component + navbar triggers

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>
This commit is contained in:
Dorian
2026-04-21 13:40:21 +01:00
parent af4e03a155
commit 7b44260fbc
38 changed files with 64 additions and 315 deletions

View File

@@ -21,6 +21,7 @@ const de = {
'search.noResults': 'Keine Produkte gefunden',
'search.noResultsHint': 'Probiere eine andere Schreibweise oder einen allgemeineren Begriff.',
'search.emptyHint': 'Tippe, um Produkte zu finden z. B. „Natron Pulver" oder „Entkalker".',
'search.suggested': 'Vorschläge',
'search.hint.navigate': 'Navigieren',
'search.hint.select': 'Auswählen',
'search.hint.close': 'Schließen',
@@ -285,6 +286,7 @@ const en = {
'search.noResults': 'No products found',
'search.noResultsHint': 'Try a different spelling or a broader term.',
'search.emptyHint': 'Type to find products — e.g. "Natron powder" or "descaler".',
'search.suggested': 'Suggested',
'search.hint.navigate': 'Navigate',
'search.hint.select': 'Select',
'search.hint.close': 'Close',