From c87196cd679489a4260b10239f95e16e2a60a743 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 08:53:54 +0200
Subject: [PATCH] feat(header): Filter-Dropdown auch in der Header-Suche
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der SearchFilter-Store galt schon global, aber das UI zum Ändern gab es
nur auf der Home-Seite — auf Rezept-/Preview-Seiten konnte man den
Filter nicht sehen, geschweige denn setzen. Jetzt zeigt die Header-Suche
denselben inline-Trigger links vom Input. Nav-Form bekommt Border +
Background als Container, Input wird transparent, Fokus-Outline landet
auf dem Container (wie auf der Home-Seite).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/routes/+layout.svelte | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b1d2be0..f3ef750 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,6 +10,7 @@
   import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte';
   import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
   import SearchLoader from '$lib/components/SearchLoader.svelte';
+  import SearchFilter from '$lib/components/SearchFilter.svelte';
   import UpdateToast from '$lib/components/UpdateToast.svelte';
   import type { SearchHit } from '$lib/server/recipes/search-local';
   import type { WebHit } from '$lib/server/search/searxng';
@@ -219,6 +220,7 @@
     {#if showHeaderSearch}
       <div class="nav-search-wrap" bind:this={navContainer}>
         <form class="nav-search" onsubmit={submitNav} role="search">
+          <SearchFilter inline />
           <input
             type="search"
             bind:value={navQuery}
@@ -412,21 +414,29 @@
   }
   .nav-search {
     display: flex;
-  }
-  .nav-search input {
-    width: 100%;
-    padding: 0.55rem 0.85rem;
-    font-size: 0.95rem;
+    align-items: stretch;
     border: 1px solid #cfd9d1;
     border-radius: 999px;
     background: #f4f8f5;
     min-height: 40px;
   }
-  .nav-search input:focus {
+  .nav-search:focus-within {
     outline: 2px solid #2b6a3d;
     outline-offset: 1px;
     background: white;
   }
+  .nav-search input {
+    flex: 1;
+    width: 100%;
+    padding: 0.55rem 0.85rem;
+    font-size: 0.95rem;
+    border: 0;
+    background: transparent;
+    min-width: 0;
+  }
+  .nav-search input:focus {
+    outline: none;
+  }
   .dropdown {
     position: absolute;
     top: calc(100% + 0.4rem);