add upcoming votes section on home page

src/client/features/home/components/home-page.tsx

@@ -1,10 +1,15 @@
+import { UpcomingVotes } from "./upcoming-votes"
+
 export function HomePage() {
 	return (
-		<div className="text-center mt-12 px-4">
-			<p className="text-lg font-medium">Willkommen</p>
-			<p className="text-sm text-muted-foreground mt-2">
-				Verfolge Abstimmungen im Bundestag und deinem Landtag.
-			</p>
+		<div className="mt-8">
+			<div className="text-center px-4">
+				<p className="text-lg font-medium">Willkommen</p>
+				<p className="text-sm text-muted-foreground mt-2">
+					Verfolge Abstimmungen im Bundestag und deinem Landtag.
+				</p>
+			</div>
+			<UpcomingVotes />
 		</div>
 	)
 }

src/client/features/home/components/upcoming-votes.tsx

@@ -0,0 +1,89 @@
+import { useFollows } from "@/shared/hooks/use-follows"
+import { BACKEND_URL } from "@/shared/lib/constants"
+import { Link } from "@tanstack/react-router"
+import { useEffect, useState } from "react"
+
+interface UpcomingLegislation {
+	id: number
+	title: string
+	beratungsstand: string | null
+	summary: string | null
+}
+
+export function UpcomingVotes() {
+	const { follows } = useFollows()
+	const [items, setItems] = useState<UpcomingLegislation[]>([])
+	const [loading, setLoading] = useState(true)
+
+	const hasTopics = follows.some((f) => f.type === "topic")
+
+	useEffect(() => {
+		if (!hasTopics) {
+			setLoading(false)
+			return
+		}
+
+		fetch(`${BACKEND_URL}/legislation/upcoming`)
+			.then((r) => (r.ok ? r.json() : []))
+			.then((data) => setItems(data))
+			.catch(() => setItems([]))
+			.finally(() => setLoading(false))
+	}, [hasTopics])
+
+	if (!hasTopics) {
+		return (
+			<div className="px-4 mt-6">
+				<h2 className="text-sm font-medium mb-2">Anstehende Abstimmungen</h2>
+				<p className="text-xs text-muted-foreground">
+					Folge Themen, um anstehende Abstimmungen zu sehen.
+				</p>
+			</div>
+		)
+	}
+
+	if (loading) {
+		return (
+			<div className="px-4 mt-6">
+				<h2 className="text-sm font-medium mb-2">Anstehende Abstimmungen</h2>
+				<p className="text-xs text-muted-foreground">Laden…</p>
+			</div>
+		)
+	}
+
+	if (items.length === 0) {
+		return (
+			<div className="px-4 mt-6">
+				<h2 className="text-sm font-medium mb-2">Anstehende Abstimmungen</h2>
+				<p className="text-xs text-muted-foreground">
+					Keine anstehenden Abstimmungen zu deinen Themen.
+				</p>
+			</div>
+		)
+	}
+
+	return (
+		<div className="px-4 mt-6">
+			<h2 className="text-sm font-medium mb-3">Anstehende Abstimmungen</h2>
+			<div className="space-y-3">
+				{items.map((item) => (
+					<Link
+						key={item.id}
+						to="/app/legislation/$legislationId"
+						params={{ legislationId: String(item.id) }}
+						className="block p-3 rounded-lg border bg-card hover:bg-accent transition-colors"
+					>
+						<p className="text-sm font-medium leading-tight">{item.title}</p>
+						{item.summary && (
+							<p className="text-xs text-muted-foreground mt-1 line-clamp-2">
+								{item.summary}
+							</p>
+						)}
+						<span className="inline-block mt-2 text-xs font-medium text-blue-600">
+							Jetzt abstimmen →
+						</span>
+					</Link>
+				))}
+			</div>
+		</div>
+	)
+}