From 4b2f009233b06cdfb190d0fc06379dab9a9e5560 Mon Sep 17 00:00:00 2001
From: CREDO23 <bakerathierry@gmail.com>
Date: Mon, 13 Jul 2026 23:12:07 +0200
Subject: [PATCH] feat(settings): add Appearance content with show-timestamps
 toggle

---
 .../components/AppearanceContent.tsx          | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 surfsense_web/app/dashboard/[workspace_id]/user-settings/components/AppearanceContent.tsx

diff --git a/surfsense_web/app/dashboard/[workspace_id]/user-settings/components/AppearanceContent.tsx b/surfsense_web/app/dashboard/[workspace_id]/user-settings/components/AppearanceContent.tsx
new file mode 100644
index 000000000..258a31dfe
--- /dev/null
+++ b/surfsense_web/app/dashboard/[workspace_id]/user-settings/components/AppearanceContent.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useAtom } from "jotai";
+import { showMessageTimestampsAtom } from "@/atoms/chat/show-timestamps.atom";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+export function AppearanceContent() {
+	const [showTimestamps, setShowTimestamps] = useAtom(showMessageTimestampsAtom);
+
+	return (
+		<div className="flex flex-col gap-4 md:gap-6">
+			<section>
+				<div className="pb-2 md:pb-3">
+					<h2 className="text-base md:text-lg font-semibold">Chat</h2>
+					<p className="text-xs md:text-sm text-muted-foreground">
+						Control how messages are displayed in your conversations.
+					</p>
+				</div>
+				<div className="flex flex-col gap-3">
+					<div className="flex items-center justify-between rounded-lg bg-accent p-4">
+						<div className="space-y-0.5">
+							<Label
+								htmlFor="show-timestamps-toggle"
+								className="text-sm font-medium cursor-pointer"
+							>
+								Show message timestamps
+							</Label>
+							<p className="text-xs text-muted-foreground">
+								Display the time under each message in a chat. Saved on this device.
+							</p>
+						</div>
+						<Switch
+							id="show-timestamps-toggle"
+							checked={showTimestamps}
+							onCheckedChange={setShowTimestamps}
+						/>
+					</div>
+				</div>
+			</section>
+		</div>
+	);
+}