feat(web): settings page with operator info + theme toggle

apps/web/src/app/settings/page.tsx

@@ -0,0 +1,51 @@
+import { getSeededOperator } from "@/lib/operator";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+export default async function SettingsPage() {
+  const op = await getSeededOperator();
+  return (
+    <div className="container mx-auto max-w-2xl space-y-6 p-4 sm:p-6">
+      <h1 className="text-2xl font-semibold">Settings</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Operator</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm">
+          <Row label="Display name" value={op.displayName} />
+          <Separator />
+          <Row label="Operator ID" value={String(op.telegramUserId)} mono />
+          <Separator />
+          <Row label="Default timezone" value={op.defaultTimezone} mono />
+          <Separator />
+          <Row label="Role" value={op.role} mono />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Appearance</CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center justify-between">
+          <div className="text-sm text-muted-foreground">Theme</div>
+          <ThemeToggle />
+        </CardContent>
+      </Card>
+
+      <p className="text-center text-xs text-muted-foreground">
+        cm WhatsApp Bot · self-hosted
+      </p>
+    </div>
+  );
+}
+
+function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd className={mono ? "font-mono text-xs" : ""}>{value}</dd>
+    </div>
+  );
+}

apps/web/src/components/theme-toggle.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Moon, Sun, Monitor } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ThemeToggle() {
+  const { setTheme, theme } = useTheme();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm">
+          {theme === "dark" ? (
+            <Moon className="size-4" />
+          ) : theme === "light" ? (
+            <Sun className="size-4" />
+          ) : (
+            <Monitor className="size-4" />
+          )}
+          <span className="ml-2 capitalize">{theme ?? "system"}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Sun className="mr-2 size-4" /> Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Moon className="mr-2 size-4" /> Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Monitor className="mr-2 size-4" /> System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}