migrate mobile components to konsta ui, fix german strings
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,10 @@
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent } from "@/shared/components/ui/card"
|
||||
import { Switch } from "@/shared/components/ui/switch"
|
||||
import { useDeviceId } from "@/shared/hooks/use-device-id"
|
||||
import { useFollows } from "@/shared/hooks/use-follows"
|
||||
import { usePush } from "@/shared/hooks/use-push"
|
||||
import { usePwaUpdate } from "@/shared/hooks/use-pwa-update"
|
||||
import { fetchTopics } from "@/shared/lib/aw-api"
|
||||
import { BACKEND_URL, VAPID_PUBLIC_KEY } from "@/shared/lib/constants"
|
||||
import { BlockTitle, Button, List, ListItem, Navbar, Preloader, Toggle } from "konsta/react"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import { type GeoResult, clearGeoCache, detectFromCoords, loadCachedResult } from "../../location/lib/geo"
|
||||
import { NotificationGuide } from "./notification-guide"
|
||||
@@ -96,325 +94,241 @@ export function SettingsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="p-4 space-y-6">
|
||||
<div className="pb-20">
|
||||
<Navbar title="Einstellungen" />
|
||||
|
||||
{/* --- Notifications --- */}
|
||||
{VAPID_PUBLIC_KEY && (
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 px-1">
|
||||
Benachrichtigungen
|
||||
</h2>
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{push.permission === "denied" ? (
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-sm text-destructive">
|
||||
<>
|
||||
<BlockTitle>Benachrichtigungen</BlockTitle>
|
||||
<List inset strong>
|
||||
{push.permission === "denied" ? (
|
||||
<ListItem
|
||||
title={
|
||||
<span className="text-red-500">
|
||||
Benachrichtigungen sind blockiert. Bitte in den Systemeinstellungen aktivieren.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<label htmlFor="push-toggle" className="text-sm font-normal">
|
||||
Push-Benachrichtigungen
|
||||
</label>
|
||||
<Switch
|
||||
id="push-toggle"
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<ListItem
|
||||
label
|
||||
title="Push-Benachrichtigungen"
|
||||
after={
|
||||
<Toggle
|
||||
checked={push.subscribed}
|
||||
disabled={push.loading}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) push.subscribe()
|
||||
else push.unsubscribe()
|
||||
onChange={() => {
|
||||
if (push.subscribed) push.unsubscribe()
|
||||
else push.subscribe()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!standalone && (
|
||||
<>
|
||||
<div className="border-t border-border mx-4" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowGuide(true)}
|
||||
className="flex items-center justify-between w-full px-4 py-3 text-left"
|
||||
>
|
||||
<span className="text-sm">Einrichtung auf dem iPhone</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-4 h-4 text-muted-foreground"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{!standalone && <ListItem link title="Einrichtung auf dem iPhone" onClick={() => setShowGuide(true)} />}
|
||||
</List>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* --- Location --- */}
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 px-1">Standort</h2>
|
||||
<BlockTitle>Standort</BlockTitle>
|
||||
{hasLocation && result.bundesland ? (
|
||||
<List inset strong>
|
||||
<ListItem title="Bundesland" after={result.bundesland} />
|
||||
{result.landtag_label && <ListItem title="Landtag" after={result.landtag_label} />}
|
||||
<ListItem title="Abgeordnete geladen" after={String(result.mandates.length)} />
|
||||
{result.cachedAt && <ListItem title="Zwischengespeichert" after={formatCacheAge(result.cachedAt)} />}
|
||||
</List>
|
||||
) : null}
|
||||
|
||||
{hasLocation && result.bundesland ? (
|
||||
<Card className="mb-3">
|
||||
<CardContent className="p-0">
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Bundesland</span>
|
||||
<span className="text-sm text-muted-foreground">{result.bundesland}</span>
|
||||
</div>
|
||||
</div>
|
||||
{result.landtag_label && (
|
||||
<>
|
||||
<div className="border-t border-border mx-4" />
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Landtag</span>
|
||||
<span className="text-sm text-muted-foreground">{result.landtag_label}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="border-t border-border mx-4" />
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Abgeordnete geladen</span>
|
||||
<span className="text-sm text-muted-foreground">{result.mandates.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
{result.cachedAt && (
|
||||
<>
|
||||
<div className="border-t border-border mx-4" />
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Zwischengespeichert</span>
|
||||
<span className="text-sm text-muted-foreground">{formatCacheAge(result.cachedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{loading && (
|
||||
<output className="flex items-center justify-center h-16 mb-3" aria-label="Standort wird bestimmt">
|
||||
<div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
<span className="ml-3 text-sm text-muted-foreground">{hasLocation ? "Aktualisiere…" : "Erkenne…"}</span>
|
||||
</output>
|
||||
)}
|
||||
|
||||
{errorMsg && (
|
||||
<div className="mb-3 p-3 bg-destructive/10 rounded-lg text-destructive text-sm" role="alert">
|
||||
{errorMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{!hasLocation && !loading && (
|
||||
<Button onClick={() => detect(false)} className="w-full">
|
||||
Standort erkennen
|
||||
</Button>
|
||||
)}
|
||||
{hasLocation && (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => detect(true)} disabled={loading} className="w-full">
|
||||
Abgeordnete neu laden
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleClearCache} disabled={loading} className="w-full">
|
||||
Cache löschen
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center h-16 mb-3">
|
||||
<Preloader />
|
||||
<span className="ml-3 text-sm text-black/55 dark:text-white/55">
|
||||
{hasLocation ? "Aktualisiere…" : "Erkenne…"}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{errorMsg && (
|
||||
<div className="mx-4 mb-3 p-3 bg-red-500/10 rounded-lg text-red-500 text-sm" role="alert">
|
||||
{errorMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2 px-4">
|
||||
{!hasLocation && !loading && (
|
||||
<Button large onClick={() => detect(false)}>
|
||||
Standort erkennen
|
||||
</Button>
|
||||
)}
|
||||
{hasLocation && (
|
||||
<>
|
||||
<Button small outline onClick={() => detect(true)} disabled={loading}>
|
||||
Abgeordnete neu laden
|
||||
</Button>
|
||||
<Button small outline onClick={handleClearCache} disabled={loading}>
|
||||
Cache löschen
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* --- App Update --- */}
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 px-1">App-Update</h2>
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{needRefresh ? (
|
||||
<>
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Neue Version verfügbar</span>
|
||||
<Button size="sm" onClick={applyUpdate}>
|
||||
Jetzt aktualisieren
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">App ist aktuell</span>
|
||||
<Button variant="outline" size="xs" onClick={handleCheckUpdate} disabled={checking}>
|
||||
{checking ? "Prüfe…" : "Prüfen"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
<BlockTitle className="mt-8">App-Update</BlockTitle>
|
||||
<List inset strong>
|
||||
{needRefresh ? (
|
||||
<ListItem
|
||||
title="Neue Version verfügbar"
|
||||
after={
|
||||
<Button small onClick={applyUpdate}>
|
||||
Jetzt aktualisieren
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<ListItem
|
||||
title="App ist aktuell"
|
||||
after={
|
||||
<Button small outline onClick={handleCheckUpdate} disabled={checking}>
|
||||
{checking ? "Prüfe…" : "Prüfen"}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</List>
|
||||
|
||||
{/* --- About --- */}
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 px-1">Info</h2>
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Datenquelle</span>
|
||||
<a
|
||||
href="https://www.abgeordnetenwatch.de"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary"
|
||||
>
|
||||
abgeordnetenwatch.de
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-border mx-4" />
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Geräte-ID</span>
|
||||
<span className="text-xs text-muted-foreground font-mono max-w-[50%] truncate">{deviceId}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
<BlockTitle>Info</BlockTitle>
|
||||
<List inset strong>
|
||||
<ListItem
|
||||
title="Datenquelle"
|
||||
after={
|
||||
<a
|
||||
href="https://www.abgeordnetenwatch.de"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary"
|
||||
>
|
||||
abgeordnetenwatch.de
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
<ListItem
|
||||
title="Geräte-ID"
|
||||
after={<span className="font-mono text-xs max-w-[50%] truncate">{deviceId}</span>}
|
||||
/>
|
||||
</List>
|
||||
|
||||
{/* --- Developer --- */}
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 px-1">Entwickler</h2>
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{/* Backend Health */}
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<span className="text-sm">Backend Health</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{devHealth && (
|
||||
<span className={`text-xs ${devHealth === "ok" ? "text-green-600" : "text-destructive"}`}>
|
||||
{devHealth}
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={async () => {
|
||||
setDevHealth(null)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/health`)
|
||||
setDevHealth(res.ok ? "ok" : `${res.status}`)
|
||||
} catch (e) {
|
||||
setDevHealth(String(e))
|
||||
}
|
||||
}}
|
||||
>
|
||||
Prüfen
|
||||
</Button>
|
||||
</div>
|
||||
<BlockTitle>Entwickler</BlockTitle>
|
||||
<List inset strong>
|
||||
<ListItem
|
||||
title="Backend Health"
|
||||
after={
|
||||
<div className="flex items-center gap-2">
|
||||
{devHealth && (
|
||||
<span className={`text-xs ${devHealth === "ok" ? "text-green-600" : "text-red-500"}`}>{devHealth}</span>
|
||||
)}
|
||||
<Button
|
||||
small
|
||||
outline
|
||||
onClick={async () => {
|
||||
setDevHealth(null)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/health`)
|
||||
setDevHealth(res.ok ? "ok" : `${res.status}`)
|
||||
} catch (e) {
|
||||
setDevHealth(String(e))
|
||||
}
|
||||
}}
|
||||
>
|
||||
Prüfen
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border mx-4" />
|
||||
|
||||
{/* Test Push */}
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<span className="text-sm">Test-Benachrichtigung</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{devPush && (
|
||||
<span className={`text-xs ${devPush === "ok" ? "text-green-600" : "text-destructive"}`}>
|
||||
{devPush}
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={async () => {
|
||||
setDevPush(null)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/push/test`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ device_id: deviceId }),
|
||||
})
|
||||
setDevPush(res.ok ? "ok" : `${res.status}`)
|
||||
} catch (e) {
|
||||
setDevPush(String(e))
|
||||
}
|
||||
}}
|
||||
>
|
||||
Senden
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ListItem
|
||||
title="Test-Push"
|
||||
after={
|
||||
<div className="flex items-center gap-2">
|
||||
{devPush && (
|
||||
<span className={`text-xs ${devPush === "ok" ? "text-green-600" : "text-red-500"}`}>{devPush}</span>
|
||||
)}
|
||||
<Button
|
||||
small
|
||||
outline
|
||||
onClick={async () => {
|
||||
setDevPush(null)
|
||||
try {
|
||||
const res = await fetch(`${BACKEND_URL}/push/test`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ device_id: deviceId }),
|
||||
})
|
||||
setDevPush(res.ok ? "ok" : `${res.status}`)
|
||||
} catch (e) {
|
||||
setDevPush(String(e))
|
||||
}
|
||||
}}
|
||||
>
|
||||
Senden
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border mx-4" />
|
||||
|
||||
{/* Follow all topics */}
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<span className="text-sm">Alle Themen folgen</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{devTopics && <span className="text-xs text-green-600">{devTopics}</span>}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={async () => {
|
||||
setDevTopics(null)
|
||||
try {
|
||||
const topics = await fetchTopics()
|
||||
for (const t of topics) follow("topic", t.id, t.label)
|
||||
setDevTopics(`${topics.length}`)
|
||||
} catch (e) {
|
||||
setDevTopics(String(e))
|
||||
}
|
||||
}}
|
||||
>
|
||||
Folgen
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ListItem
|
||||
title="Alle Themen folgen"
|
||||
after={
|
||||
<div className="flex items-center gap-2">
|
||||
{devTopics && <span className="text-xs text-green-600">{devTopics}</span>}
|
||||
<Button
|
||||
small
|
||||
outline
|
||||
onClick={async () => {
|
||||
setDevTopics(null)
|
||||
try {
|
||||
const topics = await fetchTopics()
|
||||
for (const t of topics) follow("topic", t.id, t.label)
|
||||
setDevTopics(`${topics.length}`)
|
||||
} catch (e) {
|
||||
setDevTopics(String(e))
|
||||
}
|
||||
}}
|
||||
>
|
||||
Folgen
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border mx-4" />
|
||||
|
||||
{/* Follow all politicians */}
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<span className="text-sm">Alle Abgeordnete folgen</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{devPoliticians && <span className="text-xs text-green-600">{devPoliticians}</span>}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={() => {
|
||||
setDevPoliticians(null)
|
||||
const cached = loadCachedResult()
|
||||
if (!cached || cached.mandates.length === 0) {
|
||||
setDevPoliticians("Kein Standort-Cache")
|
||||
return
|
||||
}
|
||||
for (const m of cached.mandates) {
|
||||
follow("politician", m.politician.id, m.politician.label)
|
||||
}
|
||||
setDevPoliticians(`${cached.mandates.length}`)
|
||||
}}
|
||||
>
|
||||
Folgen
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ListItem
|
||||
title="Alle Abgeordnete folgen"
|
||||
after={
|
||||
<div className="flex items-center gap-2">
|
||||
{devPoliticians && <span className="text-xs text-green-600">{devPoliticians}</span>}
|
||||
<Button
|
||||
small
|
||||
outline
|
||||
onClick={() => {
|
||||
setDevPoliticians(null)
|
||||
const cached = loadCachedResult()
|
||||
if (!cached || cached.mandates.length === 0) {
|
||||
setDevPoliticians("Kein Standort-Cache")
|
||||
return
|
||||
}
|
||||
for (const m of cached.mandates) {
|
||||
follow("politician", m.politician.id, m.politician.label)
|
||||
}
|
||||
setDevPoliticians(`${cached.mandates.length}`)
|
||||
}}
|
||||
>
|
||||
Folgen
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
</main>
|
||||
}
|
||||
/>
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user