feat(header): Filter-Dropdown auch in der Header-Suche
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m15s

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>
This commit is contained in:
hsiegeln
2026-04-18 08:53:54 +02:00
parent aad3ad689d
commit c87196cd67

View File

@@ -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);