From b7d1d2ec9a0586e0f32727f4af3c630dc7d24593 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 26 Mar 2026 20:30:04 +0100
Subject: [PATCH] feat(zitare): add category filter chips to search results

Show clickable category pills below the search input when results
are available. Each chip shows the match count for that category.
Also respects display settings for category/source visibility.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/lib/i18n/locales/de.json     |  4 +-
 .../apps/web/src/lib/i18n/locales/en.json     |  4 +-
 .../web/src/routes/(app)/search/+page.svelte  | 84 +++++++++++++++++--
 3 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/apps/zitare/apps/web/src/lib/i18n/locales/de.json b/apps/zitare/apps/web/src/lib/i18n/locales/de.json
index 0ccc2604b..2f6849c5b 100644
--- a/apps/zitare/apps/web/src/lib/i18n/locales/de.json
+++ b/apps/zitare/apps/web/src/lib/i18n/locales/de.json
@@ -110,7 +110,9 @@
 		"createList": "als Liste erstellen",
 		"createListDescription": "Neue Liste mit diesem Namen erstellen",
 		"minChars": "Bitte gib mindestens 2 Zeichen ein",
-		"hint": "Suche nach Zitaten, Autoren oder Themen"
+		"hint": "Suche nach Zitaten, Autoren oder Themen",
+		"allCategories": "Alle",
+		"filterByCategory": "Nach Kategorie filtern"
 	},
 	"settings": {
 		"quoteLanguage": "Zitat-Sprache",
diff --git a/apps/zitare/apps/web/src/lib/i18n/locales/en.json b/apps/zitare/apps/web/src/lib/i18n/locales/en.json
index ae45c583c..ee9b9fd53 100644
--- a/apps/zitare/apps/web/src/lib/i18n/locales/en.json
+++ b/apps/zitare/apps/web/src/lib/i18n/locales/en.json
@@ -110,7 +110,9 @@
 		"createList": "create as list",
 		"createListDescription": "Create a new list with this name",
 		"minChars": "Please enter at least 2 characters",
-		"hint": "Search for quotes, authors, or topics"
+		"hint": "Search for quotes, authors, or topics",
+		"allCategories": "All",
+		"filterByCategory": "Filter by category"
 	},
 	"settings": {
 		"quoteLanguage": "Quote language",
diff --git a/apps/zitare/apps/web/src/routes/(app)/search/+page.svelte b/apps/zitare/apps/web/src/routes/(app)/search/+page.svelte
index a5ede917f..0c19b5216 100644
--- a/apps/zitare/apps/web/src/routes/(app)/search/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/(app)/search/+page.svelte
@@ -1,25 +1,55 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
-	import { searchQuotes, type Quote } from '@zitare/content';
+	import { searchQuotes, getAllCategories, type Quote, type Category } from '@zitare/content';
 	import { ZitareEvents } from '@manacore/shared-utils/analytics';
 	import { quotesStore } from '$lib/stores/quotes.svelte';
+	import { zitareSettings } from '$lib/stores/settings.svelte';
 	import QuoteCard from '$lib/components/QuoteCard.svelte';
 
 	let searchTerm = $state('');
 	let lastTrackedTerm = $state('');
+	let selectedCategory = $state<Category | null>(null);
 
-	// Search results
-	let results = $derived<Quote[]>(
-		searchTerm.length >= 2 ? searchQuotes(searchTerm, quotesStore.language) : []
-	);
+	const categories = getAllCategories();
 
-	// Track search when results change (debounced by derived reactivity)
+	// Category i18n key mapping
+	const categoryKeys: Record<Category, string> = {
+		weisheit: 'categories.wisdom',
+		motivation: 'categories.motivation',
+		liebe: 'categories.love',
+		leben: 'categories.life',
+		erfolg: 'categories.success',
+		glueck: 'categories.happiness',
+		freundschaft: 'categories.friendship',
+		mut: 'categories.courage',
+		hoffnung: 'categories.hope',
+		natur: 'categories.nature',
+	};
+
+	// Search results with optional category filter
+	let results = $derived<Quote[]>(() => {
+		if (searchTerm.length < 2) return [];
+		const searchResults = searchQuotes(searchTerm, quotesStore.language);
+		if (!selectedCategory) return searchResults;
+		return searchResults.filter((q) => q.category === selectedCategory);
+	});
+
+	// Track search when results change
 	$effect(() => {
 		if (searchTerm.length >= 2 && searchTerm !== lastTrackedTerm) {
 			lastTrackedTerm = searchTerm;
 			ZitareEvents.searchPerformed(results.length);
 		}
 	});
+
+	function toggleCategory(cat: Category) {
+		selectedCategory = selectedCategory === cat ? null : cat;
+	}
+
+	function clearSearch() {
+		searchTerm = '';
+		selectedCategory = null;
+	}
 </script>
 
 <svelte:head>
@@ -30,7 +60,7 @@
 	<h1 class="text-3xl font-bold text-foreground mb-6">{$_('search.title')}</h1>
 
 	<!-- Search Input -->
-	<div class="relative mb-8">
+	<div class="relative mb-4">
 		<svg
 			class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-muted"
 			fill="none"
@@ -52,7 +82,7 @@
 		/>
 		{#if searchTerm}
 			<button
-				onclick={() => (searchTerm = '')}
+				onclick={clearSearch}
 				class="absolute right-4 top-1/2 -translate-y-1/2 p-1 text-foreground-muted hover:text-foreground transition-colors"
 			>
 				<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -67,6 +97,38 @@
 		{/if}
 	</div>
 
+	<!-- Category Filter Chips -->
+	{#if searchTerm.length >= 2 && results.length > 0}
+		<div class="flex flex-wrap gap-2 mb-6">
+			<button
+				onclick={() => (selectedCategory = null)}
+				class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors {selectedCategory ===
+				null
+					? 'bg-primary text-white'
+					: 'bg-surface-elevated text-foreground-secondary hover:text-foreground border border-border'}"
+			>
+				{$_('search.allCategories')}
+			</button>
+			{#each categories as cat}
+				{@const matchCount = searchQuotes(searchTerm, quotesStore.language).filter(
+					(q) => q.category === cat.name
+				).length}
+				{#if matchCount > 0}
+					<button
+						onclick={() => toggleCategory(cat.name)}
+						class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors {selectedCategory ===
+						cat.name
+							? 'bg-primary text-white'
+							: 'bg-surface-elevated text-foreground-secondary hover:text-foreground border border-border'}"
+					>
+						{$_(categoryKeys[cat.name])}
+						<span class="ml-1 opacity-70">{matchCount}</span>
+					</button>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+
 	<!-- Results -->
 	{#if searchTerm.length >= 2}
 		{#if results.length === 0}
@@ -93,7 +155,11 @@
 			</p>
 			<div class="space-y-6">
 				{#each results as quote (quote.id)}
-					<QuoteCard {quote} showCategory showSource />
+					<QuoteCard
+						{quote}
+						showCategory={zitareSettings.showCategory}
+						showSource={zitareSettings.showSource}
+					/>
 				{/each}
 			</div>
 		{/if}