improve web ui

web/src/sections/Settings/index.tsx

@@ -0,0 +1,55 @@
+import { LogOut } from "lucide-react";
+import type { FC } from "react";
+import { Section } from "@/components/section";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { changeLocale, type Locale, locales, useLocale } from "@/lib/i18n";
+import { m } from "@/paraglide/messages";
+
+// Settings reads no API (just the locale + a logout button), so it's a single
+// presentational section — no container/view split needed.
+export const SectionSettings: FC = () => {
+	const current = useLocale();
+
+	const onLogout = async () => {
+		await fetch("/_auth/logout", { method: "POST" });
+		window.location.href = "/login";
+	};
+
+	return (
+		<Section>
+			<h1 className="text-2xl font-semibold">{m.settings_title()}</h1>
+
+			<Card className="max-w-lg">
+				<CardHeader>
+					<CardTitle>{m.settings_language()}</CardTitle>
+				</CardHeader>
+				<CardContent className="flex gap-2">
+					{locales.map((l: Locale) => (
+						<Button
+							key={l}
+							variant={l === current ? "default" : "outline"}
+							size="sm"
+							className="uppercase"
+							onClick={() => changeLocale(l)}
+						>
+							{l}
+						</Button>
+					))}
+				</CardContent>
+			</Card>
+
+			<Card className="max-w-lg">
+				<CardHeader>
+					<CardTitle>{m.nav_settings()}</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Button variant="outline" onClick={onLogout}>
+						<LogOut className="size-4" />
+						{m.action_logout()}
+					</Button>
+				</CardContent>
+			</Card>
+		</Section>
+	);
+};