From 5a6a4850fb643c8972e0db73ec609cb22c9ecbb1 Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Wed, 1 Apr 2026 20:25:25 +0200
Subject: [PATCH] feat: Status-Filter + bessere Ampel-Anzeige im Explorer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Status-Dropdown im Explorer (in_beratung, beschlossen, versandet etc.)
- Ampel-Punkt größer (3x3) + Status-Label in Ketten-Liste
- Backend status-Filter war schon vorhanden
---
 frontend/src/routes/explorer/+page.svelte | 34 +++++++++++++++++++----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/explorer/+page.svelte b/frontend/src/routes/explorer/+page.svelte
index bd2282c..f854f50 100644
--- a/frontend/src/routes/explorer/+page.svelte
+++ b/frontend/src/routes/explorer/+page.svelte
@@ -19,6 +19,7 @@
 	// Filters
 	let suche = $state('');
 	let strangFilter = $state('');
+	let statusFilter = $state('');
 	let currentPage = $state(1);
 	const PAGE_SIZE = 30;
 
@@ -38,6 +39,18 @@
 		{ value: 'mitteilung', label: 'Mitteilungen' },
 	];
 
+	const STATUS_OPTIONS = [
+		{ value: '', label: 'Alle Status' },
+		{ value: 'in_beratung', label: '⏳ In Beratung' },
+		{ value: 'beschlossen', label: '🟡 Beschlossen' },
+		{ value: 'umgesetzt', label: '🟢 Umgesetzt' },
+		{ value: 'teilweise_umgesetzt', label: '🟡 Teilweise' },
+		{ value: 'versandet', label: '🔴 Versandet' },
+		{ value: 'abgelehnt', label: '🔴 Abgelehnt' },
+		{ value: 'beantwortet', label: '🟢 Beantwortet' },
+		{ value: 'angefragt', label: '⏳ Angefragt' },
+	];
+
 	const FARB_MAP: Record<string, string> = {
 		gruen: '#22c55e',
 		gelb: '#eab308',
@@ -56,6 +69,7 @@
 			};
 			if (suche) params.suche = suche;
 			if (strangFilter) params.typ = strangFilter;
+			if (statusFilter) params.status = statusFilter;
 			params = mergeFilterParams(params);
 			const data = await fetchKetten(params);
 			ketten = data.items;
@@ -196,6 +210,14 @@
 					</button>
 				{/each}
 			</div>
+			<select
+				bind:value={statusFilter}
+				onchange={() => { currentPage = 1; loadKetten(); }}
+				class="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-xs focus:ring-2 focus:ring-green-500 bg-white">
+				{#each STATUS_OPTIONS as opt}
+					<option value={opt.value}>{opt.label}</option>
+				{/each}
+			</select>
 		</div>
 
 		<!-- Count -->
@@ -222,11 +244,13 @@
 								{kette.ursprung?.aktenzeichen || `#${kette.id}`}
 							</span>
 							{#if kette.ampel}
-								<span
-									class="w-2.5 h-2.5 rounded-full shrink-0"
-									style="background-color: {FARB_MAP[kette.ampel.farbe] || FARB_MAP.grau}"
-									title="{kette.ampel.schritt}"
-								></span>
+								<span class="flex items-center gap-1 shrink-0">
+									<span
+										class="w-3 h-3 rounded-full"
+										style="background-color: {FARB_MAP[kette.ampel.farbe] || FARB_MAP.grau}"
+									></span>
+									<span class="text-[10px] text-gray-500">{kette.ampel.label}</span>
+								</span>
 							{/if}
 						</div>
 						<p class="text-xs text-gray-600 line-clamp-2 leading-snug">