feat: add support for online status and read receipt preferences

- Added `showOnlineStatus` and `showReadReceipts` fields to settings form.
- Introduced real-time synchronization for read receipts in message threads.
- Enhanced avatars to display online status indicators.
- Automatically mark messages as read when viewing active conversations.

frontend/src/app/(dashboard)/settings/page.tsx

@@ -10,6 +10,7 @@ import {
 	Palette,
 	Save,
 	Settings,
+	Shield,
 	Sun,
 	Trash2,
 	User as UserIcon,
@@ -53,6 +54,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { useAuth } from "@/providers/auth-provider";
 import { UserService } from "@/services/user.service";
@@ -60,6 +62,8 @@ import { UserService } from "@/services/user.service";
 const settingsSchema = z.object({
 	displayName: z.string().max(32, "Le nom d'affichage est trop long").optional(),
 	bio: z.string().max(255, "La bio est trop longue").optional(),
+	showOnlineStatus: z.boolean(),
+	showReadReceipts: z.boolean(),
 });
 
 type SettingsFormValues = z.infer<typeof settingsSchema>;
@@ -82,6 +86,8 @@ export default function SettingsPage() {
 		defaultValues: {
 			displayName: "",
 			bio: "",
+			showOnlineStatus: true,
+			showReadReceipts: true,
 		},
 	});
 
@@ -90,6 +96,8 @@ export default function SettingsPage() {
 			form.reset({
 				displayName: user.displayName || "",
 				bio: user.bio || "",
+				showOnlineStatus: user.showOnlineStatus ?? true,
+				showReadReceipts: user.showReadReceipts ?? true,
 			});
 		}
 	}, [user, form]);
@@ -265,6 +273,73 @@ export default function SettingsPage() {
 					</CardContent>
 				</Card>
 
+				{/* Confidentialité */}
+				<Card className="border-none shadow-sm">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2">
+							<Shield className="h-5 w-5 text-primary" />
+							<div>
+								<CardTitle>Confidentialité</CardTitle>
+								<CardDescription>Gérez la visibilité de vos activités.</CardDescription>
+							</div>
+						</div>
+					</CardHeader>
+					<CardContent>
+						<Form {...form}>
+							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+								<div className="space-y-4">
+									<FormField
+										control={form.control}
+										name="showOnlineStatus"
+										render={({ field }) => (
+											<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+												<div className="space-y-0.5">
+													<FormLabel className="text-base">Statut en ligne</FormLabel>
+													<FormDescription>
+														Affiche quand vous êtes actif sur le site.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch checked={field.value} onCheckedChange={field.onChange} />
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="showReadReceipts"
+										render={({ field }) => (
+											<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+												<div className="space-y-0.5">
+													<FormLabel className="text-base">
+														Confirmations de lecture
+													</FormLabel>
+													<FormDescription>
+														Permet aux autres de voir quand vous avez lu leurs messages.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch checked={field.value} onCheckedChange={field.onChange} />
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								</div>
+								<div className="flex justify-end pt-2">
+									<Button type="submit" disabled={isSaving} className="min-w-[150px]">
+										{isSaving ? (
+											<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+										) : (
+											<Save className="mr-2 h-4 w-4" />
+										)}
+										Enregistrer
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+
 				<TwoFactorSetup />
 
 				<Card className="border-none shadow-sm">