add themen section to landtag configure page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/features/landtag/components/landtag-configure.tsx

@@ -1,4 +1,5 @@
 import { RepresentativeList } from "@/shared/components/representative-list"
+import { TopicToggleList } from "@/shared/components/topic-toggle-list"
 import { useDb } from "@/shared/db/provider"
 import type { MandateWithPolitician } from "@/shared/lib/aw-api"
 import { Link } from "@tanstack/react-router"
@@ -8,8 +9,10 @@ import { useLandtagUI } from "../store"
 
 export function LandtagConfigure() {
 	const db = useDb()
-	const search = useLandtagUI((s) => s.politicianSearch)
-	const setSearch = useLandtagUI((s) => s.setPoliticianSearch)
+	const topicSearch = useLandtagUI((s) => s.topicSearch)
+	const setTopicSearch = useLandtagUI((s) => s.setTopicSearch)
+	const politicianSearch = useLandtagUI((s) => s.politicianSearch)
+	const setPoliticianSearch = useLandtagUI((s) => s.setPoliticianSearch)
 	const [mandates, setMandates] = useState<MandateWithPolitician[]>([])
 	const [loaded, setLoaded] = useState(false)
 
@@ -20,21 +23,13 @@ export function LandtagConfigure() {
 		})
 	}, [db])
 
-	if (loaded && mandates.length === 0) {
-		return (
-			<div className="text-center mt-12 px-4">
-				<p className="text-muted-foreground text-sm mb-4">
-					Noch keine Abgeordneten geladen. Erkenne zuerst deinen Standort in den Einstellungen.
-				</p>
-				<Link to="/app/settings" className="text-primary text-sm underline">
-					Zu den Einstellungen
-				</Link>
-			</div>
-		)
-	}
-
 	return (
 		<div className="pb-4">
+			<section>
+				<h2 className="px-4 pt-4 pb-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">Themen</h2>
+				<TopicToggleList searchQuery={topicSearch} onSearchChange={setTopicSearch} />
+			</section>
+
 			<section>
 				<h2 className="px-4 pt-4 pb-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
 					Abgeordnete
@@ -43,8 +38,17 @@ export function LandtagConfigure() {
 					<div className="flex items-center justify-center h-48">
 						<div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" />
 					</div>
+				) : mandates.length > 0 ? (
+					<RepresentativeList mandates={mandates} searchQuery={politicianSearch} onSearchChange={setPoliticianSearch} />
 				) : (
-					<RepresentativeList mandates={mandates} searchQuery={search} onSearchChange={setSearch} />
+					<div className="text-center px-4 py-6">
+						<p className="text-muted-foreground text-sm mb-4">
+							Noch keine Abgeordneten geladen. Erkenne zuerst deinen Standort in den Einstellungen.
+						</p>
+						<Link to="/app/settings" className="text-primary text-sm underline">
+							Zu den Einstellungen
+						</Link>
+					</div>
 				)}
 			</section>
 		</div>

src/features/landtag/store.ts

@@ -1,11 +1,15 @@
 import { create } from "zustand"
 
 interface LandtagUIState {
+	topicSearch: string
+	setTopicSearch: (query: string) => void
 	politicianSearch: string
 	setPoliticianSearch: (query: string) => void
 }
 
 export const useLandtagUI = create<LandtagUIState>((set) => ({
+	topicSearch: "",
+	setTopicSearch: (query) => set({ topicSearch: query }),
 	politicianSearch: "",
 	setPoliticianSearch: (query) => set({ politicianSearch: query }),
 }))