restructure routes under app/, add konsta layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-02 13:23:21 +01:00
parent 6c58b59031
commit c780066253
14 changed files with 211 additions and 164 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -5,9 +5,11 @@
    "": {
      "name": "abgeordnetenwatch-pwa",
      "dependencies": {
+        "@electric-sql/pglite": "^0.3.15",
        "@tanstack/react-router": "^1.120.3",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "konsta": "^5.0.7",
        "lucide-react": "^0.575.0",
        "radix-ui": "^1.4.3",
        "react": "^19.1.0",
@@ -277,6 +279,8 @@

    "@ecies/ciphers": ["@ecies/ciphers@0.2.5", "", { "peerDependencies": { "@noble/ciphers": "^1.0.0" } }, "sha512-GalEZH4JgOMHYYcYmVqnFirFsjZHeoGMDt9IxEnM9F7GRUUyUksJ7Ou53L83WHJq3RWKD3AcBpo0iQh0oMpf8A=="],

+    "@electric-sql/pglite": ["@electric-sql/pglite@0.3.15", "", {}, "sha512-Cj++n1Mekf9ETfdc16TlDi+cDDQF0W7EcbyRHYOAeZdsAe8M/FJg18itDTSwyHfar2WIezawM9o0EKaRGVKygQ=="],
+
    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="],

    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.12", "", { "os": "android", "cpu": "arm" }, "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg=="],
@@ -1179,6 +1183,8 @@

    "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],

+    "konsta": ["konsta@5.0.7", "", { "dependencies": { "tailwind-merge": "^3.3.1" } }, "sha512-4bc+5UmPkMTqbF9UndwF46oEePV/vADGdutVfRGo18n8lql2kv+K32Gi8xkFMuo6R8fCw016wVGUpRskkpnzmA=="],
+
    "leven": ["leven@3.1.0", "", {}, "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="],

    "lightningcss": ["lightningcss@1.31.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.31.1", "lightningcss-darwin-arm64": "1.31.1", "lightningcss-darwin-x64": "1.31.1", "lightningcss-freebsd-x64": "1.31.1", "lightningcss-linux-arm-gnueabihf": "1.31.1", "lightningcss-linux-arm64-gnu": "1.31.1", "lightningcss-linux-arm64-musl": "1.31.1", "lightningcss-linux-x64-gnu": "1.31.1", "lightningcss-linux-x64-musl": "1.31.1", "lightningcss-win32-arm64-msvc": "1.31.1", "lightningcss-win32-x64-msvc": "1.31.1" } }, "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ=="],
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
 		"prepare": "simple-git-hooks"
 	},
 	"dependencies": {
+		"@electric-sql/pglite": "^0.3.15",
 		"@tanstack/react-router": "^1.120.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"konsta": "^5.0.7",
 		"lucide-react": "^0.575.0",
 		"radix-ui": "^1.4.3",
 		"react": "^19.1.0",
--- a/src/app.css
+++ b/src/app.css
@@ -1,6 +1,7 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
+@import "konsta/react/theme.css";

@custom-variant dark (&:is(.dark *));

--- a/src/features/feed/components/feed-empty.tsx
+++ b/src/features/feed/components/feed-empty.tsx
@@ -1,8 +1,8 @@
 export function FeedEmpty() {
 	return (
 		<div className="flex flex-col items-center justify-center h-48 text-muted-foreground px-6 text-center">
-			<p className="text-lg font-medium">Your feed is empty</p>
-			<p className="text-sm mt-2">Follow topics or politicians in the other tabs to see polls here.</p>
+			<p className="text-lg font-medium">Dein Feed ist leer</p>
+			<p className="text-sm mt-2">Folge Themen oder Abgeordneten, um Abstimmungen hier zu sehen.</p>
 		</div>
 	)
 }
--- a/src/features/feed/components/feed-list.tsx
+++ b/src/features/feed/components/feed-list.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react"
 import type { FeedItem } from "../lib/assemble-feed"
 import { FeedEmpty } from "./feed-empty"
 import { FeedItemCard } from "./feed-item"
@@ -5,11 +6,42 @@ import { FeedItemCard } from "./feed-item"
 export function FeedList({ items }: { items: FeedItem[] }) {
 	if (items.length === 0) return <FeedEmpty />

+	const { upcoming, past } = useMemo(() => {
+		const upcoming: FeedItem[] = []
+		const past: FeedItem[] = []
+		for (const item of items) {
+			if (item.status === "upcoming") upcoming.push(item)
+			else past.push(item)
+		}
+		return { upcoming, past }
+	}, [items])
+
 	return (
-		<main className="divide-y divide-border">
-			{items.map((item) => (
-				<FeedItemCard key={item.id} item={item} />
-			))}
-		</main>
+		<div>
+			{upcoming.length > 0 && (
+				<section>
+					<h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide px-4 pt-4 pb-2">
+						Anstehende Abstimmungen
+					</h2>
+					<div className="divide-y divide-border">
+						{upcoming.map((item) => (
+							<FeedItemCard key={item.id} item={item} />
+						))}
+					</div>
+				</section>
+			)}
+			{past.length > 0 && (
+				<section>
+					<h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide px-4 pt-4 pb-2">
+						Vergangene Abstimmungen
+					</h2>
+					<div className="divide-y divide-border">
+						{past.map((item) => (
+							<FeedItemCard key={item.id} item={item} />
+						))}
+					</div>
+				</section>
+			)}
+		</div>
 	)
 }
--- a/src/features/politicians/components/politician-search.tsx
+++ b/src/features/politicians/components/politician-search.tsx
@@ -78,8 +78,8 @@ export function PoliticianSearch() {
 				<p className="text-muted-foreground text-sm mb-4">
 					No parliament members loaded yet. Detect your location in Settings first.
 				</p>
-				<Link to="/settings" className="text-primary text-sm underline">
-					Go to Settings
+				<Link to="/app/settings" className="text-primary text-sm underline">
+					Zu den Einstellungen
 				</Link>
 			</main>
 		)
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,84 +1,9 @@
-import { Link, Outlet, createRootRoute, useMatches } from "@tanstack/react-router"
-
-interface TabDef {
-	to: string
-	label: string
-	icon: string
-	ariaLabel: string
-}
-
-const TABS: TabDef[] = [
-	{
-		to: "/feed",
-		label: "Feed",
-		ariaLabel: "Feed",
-		icon: "M3 7h18M3 12h18M3 17h18",
-	},
-	{
-		to: "/topics",
-		label: "Topics",
-		ariaLabel: "Topics",
-		icon: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2",
-	},
-	{
-		to: "/politicians",
-		label: "People",
-		ariaLabel: "Politicians",
-		icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z",
-	},
-	{
-		to: "/settings",
-		label: "Settings",
-		ariaLabel: "Settings",
-		icon: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z",
-	},
-]
+import { Outlet, createRootRoute } from "@tanstack/react-router"

 function RootComponent() {
-	const matches = useMatches()
-	const currentPath = matches.at(-1)?.pathname ?? "/feed"
-	const currentTab = TABS.find((t) => currentPath.endsWith(t.to)) ?? TABS[0]
-
 	return (
-		<div className="flex flex-col h-dvh max-w-lg mx-auto">
-			<header className="flex items-center px-4 py-3 bg-card border-b border-border shadow-sm safe-area-top">
-				<h1 className="text-base font-semibold text-card-foreground">Abgeordnetenwatch — {currentTab.label}</h1>
-			</header>
-
-			<div className="flex-1 overflow-y-auto">
-				<Outlet />
-			</div>
-
-			<nav className="flex bg-card border-t border-border safe-area-bottom" role="tablist" aria-label="Main navigation">
-				{TABS.map((tab) => {
-					const active = currentPath.endsWith(tab.to)
-					return (
-						<Link
-							key={tab.to}
-							to={tab.to}
-							role="tab"
-							aria-selected={active}
-							aria-label={tab.ariaLabel}
-							className={`flex flex-col items-center justify-center flex-1 py-2 gap-0.5 transition-colors no-underline ${
-								active ? "text-primary" : "text-muted-foreground hover:text-foreground"
-							}`}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								className="w-5 h-5"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-								strokeWidth={active ? 2.5 : 1.5}
-								aria-hidden="true"
-							>
-								<path strokeLinecap="round" strokeLinejoin="round" d={tab.icon} />
-							</svg>
-							<span className="text-[10px] font-medium">{tab.label}</span>
-						</Link>
-					)
-				})}
-			</nav>
+		<div className="h-dvh">
+			<Outlet />
 		</div>
 	)
 }
--- a/src/routes/app/feed.tsx
+++ b/src/routes/app/feed.tsx
@@ -0,0 +1,78 @@
+import { FeedList, useFeed } from "@/features/feed"
+import { createFileRoute } from "@tanstack/react-router"
+import { Navbar } from "konsta/react"
+
+function formatCacheAge(timestamp: number): string {
+	const minutes = Math.floor((Date.now() - timestamp) / 60_000)
+	if (minutes < 1) return "gerade eben"
+	if (minutes < 60) return `vor ${minutes} Min.`
+	const hours = Math.floor(minutes / 60)
+	if (hours < 24) return `vor ${hours} Std.`
+	const days = Math.floor(hours / 24)
+	return `vor ${days} T.`
+}
+
+function FeedPage() {
+	const { items, loading, refreshing, error, lastUpdated, refresh } = useFeed()
+	const hasItems = items.length > 0
+
+	return (
+		<>
+			<Navbar
+				title="Feed"
+				right={
+					lastUpdated ? (
+						<button
+							type="button"
+							onClick={() => refresh({ silent: true })}
+							disabled={refreshing}
+							className="p-1.5 rounded-md hover:bg-muted transition-colors disabled:opacity-50"
+							aria-label="Feed aktualisieren"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								className={`w-5 h-5 text-muted-foreground ${refreshing ? "animate-spin" : ""}`}
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								strokeWidth={2}
+								aria-hidden="true"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+								/>
+							</svg>
+						</button>
+					) : undefined
+				}
+				subtitle={lastUpdated ? `Aktualisiert ${formatCacheAge(lastUpdated)}` : undefined}
+			/>
+
+			<div className="pb-20">
+				{/* Loading spinner — only when no cached items */}
+				{loading && !hasItems && (
+					<output className="flex items-center justify-center h-48" aria-label="Feed wird geladen">
+						<div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" />
+					</output>
+				)}
+
+				{/* Error */}
+				{error && (
+					<div className="p-4 text-destructive" role="alert">
+						<p className="font-semibold">Fehler beim Laden</p>
+						<p className="text-sm mt-1">{error}</p>
+					</div>
+				)}
+
+				{/* Feed list */}
+				{hasItems && <FeedList items={items} />}
+			</div>
+		</>
+	)
+}
+
+export const Route = createFileRoute("/app/feed")({
+	component: FeedPage,
+})
--- a/src/routes/app/politicians.tsx
+++ b/src/routes/app/politicians.tsx
@@ -1,6 +1,6 @@
 import { PoliticianSearch } from "@/features/politicians"
 import { createFileRoute } from "@tanstack/react-router"

-export const Route = createFileRoute("/politicians")({
+export const Route = createFileRoute("/app/politicians")({
 	component: PoliticianSearch,
 })
--- a/src/routes/app/route.tsx
+++ b/src/routes/app/route.tsx
@@ -0,0 +1,76 @@
+import { Outlet, createFileRoute, useMatches, useNavigate } from "@tanstack/react-router"
+import { App, Page, Tabbar, TabbarLink } from "konsta/react"
+
+interface TabDef {
+	to: string
+	label: string
+	icon: string
+}
+
+const TABS: TabDef[] = [
+	{
+		to: "/app/feed",
+		label: "Feed",
+		icon: "M3 7h18M3 12h18M3 17h18",
+	},
+	{
+		to: "/app/topics",
+		label: "Themen",
+		icon: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2",
+	},
+	{
+		to: "/app/politicians",
+		label: "Abgeordnete",
+		icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z",
+	},
+	{
+		to: "/app/settings",
+		label: "Einstellungen",
+		icon: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z",
+	},
+]
+
+function TabIcon({ d }: { d: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			className="w-6 h-6"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			strokeWidth={1.5}
+			aria-hidden="true"
+		>
+			<path strokeLinecap="round" strokeLinejoin="round" d={d} />
+		</svg>
+	)
+}
+
+function AppLayout() {
+	const navigate = useNavigate()
+	const matches = useMatches()
+	const currentPath = matches.at(-1)?.pathname ?? "/app/feed"
+
+	return (
+		<App theme="ios" safeAreas className="max-w-lg mx-auto">
+			<Page>
+				<Outlet />
+				<Tabbar labels icons className="left-0 bottom-0 fixed">
+					{TABS.map((tab) => (
+						<TabbarLink
+							key={tab.to}
+							active={currentPath === tab.to}
+							onClick={() => navigate({ to: tab.to })}
+							icon={<TabIcon d={tab.icon} />}
+							label={tab.label}
+						/>
+					))}
+				</Tabbar>
+			</Page>
+		</App>
+	)
+}
+
+export const Route = createFileRoute("/app")({
+	component: AppLayout,
+})
--- a/src/routes/app/settings.tsx
+++ b/src/routes/app/settings.tsx
@@ -1,6 +1,6 @@
 import { SettingsPage } from "@/features/settings"
 import { createFileRoute } from "@tanstack/react-router"

-export const Route = createFileRoute("/settings")({
+export const Route = createFileRoute("/app/settings")({
 	component: SettingsPage,
 })
--- a/src/routes/app/topics.tsx
+++ b/src/routes/app/topics.tsx
@@ -1,6 +1,6 @@
 import { TopicList } from "@/features/topics"
 import { createFileRoute } from "@tanstack/react-router"

-export const Route = createFileRoute("/topics")({
+export const Route = createFileRoute("/app/topics")({
 	component: TopicList,
 })
--- a/src/routes/feed.tsx
+++ b/src/routes/feed.tsx
@@ -1,73 +0,0 @@
-import { FeedList, useFeed } from "@/features/feed"
-import { createFileRoute } from "@tanstack/react-router"
-
-function formatCacheAge(timestamp: number): string {
-	const minutes = Math.floor((Date.now() - timestamp) / 60_000)
-	if (minutes < 1) return "gerade eben"
-	if (minutes < 60) return `vor ${minutes} Min.`
-	const hours = Math.floor(minutes / 60)
-	if (hours < 24) return `vor ${hours} Std.`
-	const days = Math.floor(hours / 24)
-	return `vor ${days} T.`
-}
-
-function FeedPage() {
-	const { items, loading, refreshing, error, lastUpdated, refresh } = useFeed()
-	const hasItems = items.length > 0
-
-	return (
-		<main className="flex flex-col h-full">
-			{/* Refresh bar */}
-			{lastUpdated && (
-				<div className="flex items-center justify-between px-4 py-2 border-b border-border">
-					<span className="text-xs text-muted-foreground">Aktualisiert {formatCacheAge(lastUpdated)}</span>
-					<button
-						type="button"
-						onClick={() => refresh({ silent: true })}
-						disabled={refreshing}
-						className="p-1.5 rounded-md hover:bg-muted transition-colors disabled:opacity-50"
-						aria-label="Feed aktualisieren"
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							className={`w-4 h-4 text-muted-foreground ${refreshing ? "animate-spin" : ""}`}
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-							strokeWidth={2}
-							aria-hidden="true"
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-							/>
-						</svg>
-					</button>
-				</div>
-			)}
-
-			{/* Loading spinner — only when no cached items */}
-			{loading && !hasItems && (
-				<output className="flex items-center justify-center h-48" aria-label="Feed wird geladen">
-					<div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" />
-				</output>
-			)}
-
-			{/* Error */}
-			{error && (
-				<div className="p-4 text-destructive" role="alert">
-					<p className="font-semibold">Fehler beim Laden</p>
-					<p className="text-sm mt-1">{error}</p>
-				</div>
-			)}
-
-			{/* Feed list */}
-			{hasItems && <FeedList items={items} />}
-		</main>
-	)
-}
-
-export const Route = createFileRoute("/feed")({
-	component: FeedPage,
-})
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,5 @@
 import { Navigate, createFileRoute } from "@tanstack/react-router"

 export const Route = createFileRoute("/")({
-	component: () => <Navigate to="/feed" />,
+	component: () => <Navigate to="/app/feed" />,
 })