feat(search): Domain-Filter als Dropdown im Suchfeld
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s

Links im großen Suchfeld ein Slider-Icon mit Badge („Alle" oder „2/5"),
das ein Dropdown-Menü mit allen Whitelist-Domains als Checkboxen öffnet.
Auswahl wird per localStorage persistiert und gilt global — Header-Such-
Dropdown konsumiert den gleichen Store und sendet den domains-Parameter
bei jedem Fetch mit.

Leere Menge heißt „alle aktiv", damit neu vom Admin freigeschaltete
Domains automatisch dabei sind. Aktive Auswahl landet als explizite
Intersection mit der Whitelist serverseitig.

- searchLocal nimmt jetzt optional string[] domains → `source_domain IN (…)`.
- searchWeb nimmt jetzt opts.domains → site:-Filter auf die Auswahl
  eingeschränkt. Nicht-Whitelist-Einträge werden ignoriert.
- API-Endpoints: `?domains=a.de,b.de`.
- Neuer Client-Store $lib/client/search-filter.svelte.ts.
- Neue Komponente $lib/components/SearchFilter.svelte (mobile-tauglich,
  44px Touch-Targets, Badge auf engen Screens versteckt).

Home-Seite re-runt die Suche bei Filter-Änderung automatisch (150ms debounce),
ohne dass der User neu tippen muss.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 08:13:33 +02:00
parent 864d113082
commit d004430854
10 changed files with 457 additions and 21 deletions

View File

@@ -7,7 +7,9 @@
import type { WebHit } from '$lib/server/search/searxng';
import { randomQuote } from '$lib/quotes';
import SearchLoader from '$lib/components/SearchLoader.svelte';
import SearchFilter from '$lib/components/SearchFilter.svelte';
import { profileStore } from '$lib/client/profile.svelte';
import { searchFilterStore } from '$lib/client/search-filter.svelte';
const LOCAL_PAGE = 30;
@@ -26,6 +28,7 @@
let webExhausted = $state(false);
let loadingMore = $state(false);
let skipNextSearch = false;
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
type SearchSnapshot = {
query: string;
@@ -85,6 +88,22 @@
const urlQ = ($page.url.searchParams.get('q') ?? '').trim();
if (urlQ) query = urlQ;
void loadRecent();
void searchFilterStore.load();
});
// Bei Änderung der Domain-Auswahl: laufende Suche neu ausführen,
// damit der User nicht manuell re-tippen muss.
$effect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
searchFilterStore.active;
const q = query.trim();
if (!q || q.length <= 3) return;
if (debounceTimer) clearTimeout(debounceTimer);
searching = true;
webHits = [];
webSearching = false;
webError = null;
debounceTimer = setTimeout(() => void runSearch(q), 150);
});
// Sync current query back into the URL as ?q=... via replaceState,
@@ -110,7 +129,10 @@
void loadFavorites(active.id);
});
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
function filterParam(): string {
const p = searchFilterStore.queryParam;
return p ? `&domains=${encodeURIComponent(p)}` : '';
}
async function runSearch(q: string) {
localExhausted = false;
@@ -118,7 +140,7 @@
webExhausted = false;
try {
const res = await fetch(
`/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}`
`/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}${filterParam()}`
);
const body = await res.json();
if (query.trim() !== q) return;
@@ -130,7 +152,9 @@
// damit der User nicht extra auf „+ weitere" klicken muss.
webSearching = true;
try {
const wres = await fetch(`/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1`);
const wres = await fetch(
`/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1${filterParam()}`
);
if (query.trim() !== q) return;
if (!wres.ok) {
const err = await wres.json().catch(() => ({}));
@@ -160,7 +184,7 @@
if (!localExhausted) {
// Noch mehr lokale Treffer holen.
const res = await fetch(
`/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}&offset=${hits.length}`
`/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}&offset=${hits.length}${filterParam()}`
);
const body = await res.json();
if (query.trim() !== q) return;
@@ -175,7 +199,7 @@
webSearching = webHits.length === 0;
try {
const wres = await fetch(
`/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}`
`/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${filterParam()}`
);
if (query.trim() !== q) return;
if (!wres.ok) {
@@ -256,7 +280,8 @@
<section class="hero">
<h1>Kochwas</h1>
<p class="tagline" aria-live="polite">{quote || '\u00a0'}</p>
<form onsubmit={submit}>
<form class="search-form" onsubmit={submit}>
<SearchFilter />
<input
type="search"
bind:value={query}