add profile settings form with display name editing

surfsense_web/app/dashboard/user/settings/components/ProfileContent.tsx

@@ -1,16 +1,78 @@
 "use client";
 
-import { Menu, User } from "lucide-react";
+import { useAtomValue } from "jotai";
+import { Loader2, Menu, User } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { currentUserAtom } from "@/atoms/user/user-query.atoms";
+import { updateUserMutationAtom } from "@/atoms/user/user-mutation.atoms";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 interface ProfileContentProps {
 	onMenuClick: () => void;
 }
 
+function AvatarDisplay({ url, fallback }: { url?: string; fallback: string }) {
+	const [hasError, setHasError] = useState(false);
+
+	useEffect(() => {
+		setHasError(false);
+	}, [url]);
+
+	if (url && !hasError) {
+		return (
+			<img
+				src={url}
+				alt="Avatar"
+				className="h-16 w-16 rounded-xl object-cover"
+				onError={() => setHasError(true)}
+			/>
+		);
+	}
+
+	return (
+		<div className="flex h-16 w-16 items-center justify-center rounded-xl bg-muted text-xl font-semibold text-muted-foreground">
+			{fallback}
+		</div>
+	);
+}
+
 export function ProfileContent({ onMenuClick }: ProfileContentProps) {
 	const t = useTranslations("userSettings");
+	const { data: user, isLoading: isUserLoading } = useAtomValue(currentUserAtom);
+	const { mutateAsync: updateUser, isPending } = useAtomValue(updateUserMutationAtom);
+
+	const [displayName, setDisplayName] = useState("");
+
+	useEffect(() => {
+		if (user) {
+			setDisplayName(user.display_name || "");
+		}
+	}, [user]);
+
+	const getInitials = (email: string) => {
+		const name = email.split("@")[0];
+		return name.slice(0, 2).toUpperCase();
+	};
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+
+		try {
+			await updateUser({
+				display_name: displayName || null,
+			});
+			toast.success(t("profile_saved"));
+		} catch {
+			toast.error(t("profile_save_error"));
+		}
+	};
+
+	const hasChanges = displayName !== (user?.display_name || "");
 
 	return (
 		<motion.div
@@ -64,12 +126,52 @@ export function ProfileContent({ onMenuClick }: ProfileContentProps) {
 							animate={{ opacity: 1, y: 0 }}
 							exit={{ opacity: 0, y: -20 }}
 							transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
-							className="space-y-6"
 						>
-							{/* Profile form will be added in Task 5 */}
-							<div className="rounded-lg border bg-card p-6">
-								<p className="text-muted-foreground">Profile settings coming soon...</p>
-							</div>
+							{isUserLoading ? (
+								<div className="flex items-center justify-center py-12">
+									<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+								</div>
+							) : (
+								<form onSubmit={handleSubmit} className="space-y-6">
+									<div className="rounded-lg border bg-card p-6">
+										<div className="flex flex-col gap-6">
+											<div className="space-y-2">
+												<Label>{t("profile_avatar")}</Label>
+												<AvatarDisplay
+													url={user?.avatar_url || undefined}
+													fallback={getInitials(user?.email || "")}
+												/>
+											</div>
+
+											<div className="space-y-2">
+												<Label htmlFor="display-name">{t("profile_display_name")}</Label>
+												<Input
+													id="display-name"
+													type="text"
+													placeholder={user?.email?.split("@")[0]}
+													value={displayName}
+													onChange={(e) => setDisplayName(e.target.value)}
+												/>
+												<p className="text-xs text-muted-foreground">
+													{t("profile_display_name_hint")}
+												</p>
+											</div>
+
+											<div className="space-y-2">
+												<Label>{t("profile_email")}</Label>
+												<Input type="email" value={user?.email || ""} disabled />
+											</div>
+										</div>
+									</div>
+
+									<div className="flex justify-end">
+										<Button type="submit" disabled={isPending || !hasChanges}>
+											{isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+											{t("profile_save")}
+										</Button>
+									</div>
+								</form>
+							)}
 						</motion.div>
 					</AnimatePresence>
 				</div>
@@ -77,4 +179,3 @@ export function ProfileContent({ onMenuClick }: ProfileContentProps) {
 		</motion.div>
 	);
 }
-