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/components/ui/avatar.tsx

@@ -7,17 +7,23 @@ import { cn } from "@/lib/utils";
 
 function Avatar({
 	className,
+	isOnline,
 	...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & { isOnline?: boolean }) {
 	return (
-		<AvatarPrimitive.Root
-			data-slot="avatar"
-			className={cn(
-				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
-				className,
+		<div className="relative inline-block">
+			<AvatarPrimitive.Root
+				data-slot="avatar"
+				className={cn(
+					"relative flex size-8 shrink-0 overflow-hidden rounded-full",
+					className,
+				)}
+				{...props}
+			/>
+			{isOnline && (
+				<span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white dark:ring-zinc-900" />
 			)}
-			{...props}
-		/>
+		</div>
 	);
 }