From 84655151be9bba054fd68740d6ae185cb23137ab Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 17 Apr 2026 17:31:08 +0200
Subject: [PATCH] feat(nav): search lives in the header on all non-home pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "← Lokale Suche"-Breadcrumb auf der Web-Suchseite entfernt (überflüssig,
  da die lokale Suche automatisch zur Web-Suche weiterleitet, wenn leer).
- Header-Bar enthält jetzt ein Pill-Suchfeld, das von jeder Unterseite
  aus direkt auf /search?q=... navigiert — kein Zurück mehr nötig,
  wenn man aus einem offenen Rezept weiter sucht.
- Auf der Startseite bleibt die große Hero-Suche; das Header-Feld ist
  dort ausgeblendet, damit es keine doppelte Eingabestelle gibt.
- Auf /search und /search/web spiegelt das Header-Feld die aktuelle
  Query wider, sodass man den Begriff verfeinern kann.
- Mobile < 520px: Brand schrumpft zu einem 🍳-Badge, damit Platz für
  das Suchfeld + Icons bleibt.
---
 src/routes/+layout.svelte          | 82 ++++++++++++++++++++++++++++--
 src/routes/search/web/+page.svelte | 12 -----
 2 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index eadd109..9057876 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,31 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
   import { profileStore } from '$lib/client/profile.svelte';
   import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte';
   import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 
   let { children } = $props();
 
+  let navQuery = $state('');
+
+  $effect(() => {
+    const path = $page.url.pathname;
+    if (path === '/search' || path === '/search/web') {
+      navQuery = ($page.url.searchParams.get('q') ?? '').trim();
+    }
+  });
+
+  const showHeaderSearch = $derived($page.url.pathname !== '/');
+
+  function submitNavSearch(e: SubmitEvent) {
+    e.preventDefault();
+    const q = navQuery.trim();
+    if (!q) return;
+    void goto(`/search?q=${encodeURIComponent(q)}`);
+  }
+
   onMount(() => {
     profileStore.load();
   });
@@ -15,6 +35,18 @@
 
 <header class="bar">
   <a href="/" class="brand">Kochwas</a>
+  {#if showHeaderSearch}
+    <form class="nav-search" onsubmit={submitNavSearch} role="search">
+      <input
+        type="search"
+        bind:value={navQuery}
+        placeholder="Rezept suchen…"
+        autocomplete="off"
+        inputmode="search"
+        aria-label="Suchbegriff"
+      />
+    </form>
+  {/if}
   <div class="bar-right">
     <a href="/wishlist" class="nav-link" aria-label="Wunschliste">🍽️</a>
     <a href="/admin" class="nav-link" aria-label="Einstellungen">⚙️</a>
@@ -46,9 +78,9 @@
     top: 0;
     z-index: 10;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 0.75rem 1rem;
+    gap: 0.6rem;
+    padding: 0.6rem 1rem;
     background: white;
     border-bottom: 1px solid #e4eae7;
   }
@@ -57,11 +89,55 @@
     font-weight: 700;
     text-decoration: none;
     color: #2b6a3d;
+    flex-shrink: 0;
+  }
+  .nav-search {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+  .nav-search input {
+    width: 100%;
+    padding: 0.55rem 0.85rem;
+    font-size: 0.95rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 999px;
+    background: #f4f8f5;
+    min-height: 40px;
+  }
+  .nav-search input:focus {
+    outline: 2px solid #2b6a3d;
+    outline-offset: 1px;
+    background: white;
   }
   .bar-right {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.4rem;
+    flex-shrink: 0;
+  }
+  @media (max-width: 520px) {
+    .brand {
+      font-size: 0;
+      width: 1.6rem;
+      height: 1.6rem;
+      background: #2b6a3d;
+      border-radius: 8px;
+      position: relative;
+    }
+    .brand::after {
+      content: '🍳';
+      font-size: 1rem;
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+    }
+    .nav-link {
+      width: 36px;
+      height: 36px;
+      font-size: 1.05rem;
+    }
   }
   .nav-link {
     display: inline-flex;
diff --git a/src/routes/search/web/+page.svelte b/src/routes/search/web/+page.svelte
index 22f1c7f..ac83494 100644
--- a/src/routes/search/web/+page.svelte
+++ b/src/routes/search/web/+page.svelte
@@ -42,10 +42,6 @@
   }
 </script>
 
-<nav class="crumbs">
-  <a href={`/search?q=${encodeURIComponent(query)}`}>← Lokale Suche</a>
-</nav>
-
 <form class="search-bar" onsubmit={submit}>
   <input
     type="search"
@@ -100,14 +96,6 @@
 {/if}
 
 <style>
-  .crumbs {
-    padding: 0.75rem 0;
-    font-size: 0.9rem;
-  }
-  .crumbs a {
-    color: #666;
-    text-decoration: none;
-  }
   .search-bar {
     display: flex;
     gap: 0.5rem;