feat: add share dialog and typing indicator in messages

- Implemented `ShareDialog` component for sharing content directly with other users.
- Added typing indicator when a user is composing a message in an active conversation.
- Updated `SocketProvider` to handle improved connection management and user status updates.
- Enhanced the messages UI with real-time online status and typing indicators for better feedback.

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

@@ -32,8 +32,29 @@ export default function MessagesPage() {
 	const [activeConv, setActiveConv] = React.useState<Conversation | null>(null);
 	const [messages, setMessages] = React.useState<Message[]>([]);
 	const [newMessage, setNewMessage] = React.useState("");
+	const typingTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+	const handleTyping = () => {
+		if (!socket || !activeConv) return;
+
+		socket.emit("typing", {
+			recipientId: activeConv.recipient.uuid,
+			isTyping: true,
+		});
+
+		if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+
+		typingTimeoutRef.current = setTimeout(() => {
+			socket.emit("typing", {
+				recipientId: activeConv.recipient.uuid,
+				isTyping: false,
+			});
+		}, 3000);
+	};
 	const [isLoadingConvs, setIsLoadingConvs] = React.useState(true);
 	const [isLoadingMsgs, setIsLoadingMsgs] = React.useState(false);
+	const [isOtherTyping, setIsOtherTyping] = React.useState(false);
+	const [onlineUsers, setOnlineUsers] = React.useState<Set<string>>(new Set());
 
 	const [searchQuery, setSearchQuery] = React.useState("");
 	const [searchResults, setSearchResults] = React.useState<User[]>([]);
@@ -120,6 +141,7 @@ export default function MessagesPage() {
 				(data: { conversationId: string; message: Message }) => {
 					if (activeConv?.id === data.conversationId) {
 						setMessages((prev) => [...prev, data.message]);
+						setIsOtherTyping(false); // S'il a envoyé un message, il ne tape plus
 					}
 					// Mettre à jour la liste des conversations
 					setConversations((prev) => {
@@ -144,8 +166,28 @@ export default function MessagesPage() {
 				},
 			);
 
+			socket.on("user_status", (data: { userId: string; status: string }) => {
+				setOnlineUsers((prev) => {
+					const next = new Set(prev);
+					if (data.status === "online") {
+						next.add(data.userId);
+					} else {
+						next.delete(data.userId);
+					}
+					return next;
+				});
+			});
+
+			socket.on("user_typing", (data: { userId: string; isTyping: boolean }) => {
+				if (activeConv?.recipient.uuid === data.userId) {
+					setIsOtherTyping(data.isTyping);
+				}
+			});
+
 			return () => {
 				socket.off("new_message");
+				socket.off("user_status");
+				socket.off("user_typing");
 			};
 		}
 	}, [socket, activeConv]);
@@ -355,7 +397,17 @@ export default function MessagesPage() {
 									<h3 className="font-bold leading-none">
 										{activeConv.recipient.displayName || activeConv.recipient.username}
 									</h3>
-									<span className="text-xs text-green-500 font-medium">En ligne</span>
+									<span
+										className={`text-xs font-medium ${
+											onlineUsers.has(activeConv.recipient.uuid)
+												? "text-green-500"
+												: "text-muted-foreground"
+										}`}
+									>
+										{onlineUsers.has(activeConv.recipient.uuid)
+											? "En ligne"
+											: "Hors ligne"}
+									</span>
 								</div>
 							</Link>
 						</div>
@@ -406,6 +458,17 @@ export default function MessagesPage() {
 										</div>
 									))
 								)}
+								{isOtherTyping && (
+									<div className="flex justify-start">
+										<div className="bg-zinc-100 dark:bg-zinc-800 p-3 rounded-2xl rounded-bl-none">
+											<div className="flex gap-1">
+												<span className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-bounce [animation-delay:-0.3s]" />
+												<span className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-bounce [animation-delay:-0.15s]" />
+												<span className="w-1.5 h-1.5 bg-zinc-400 rounded-full animate-bounce" />
+											</div>
+										</div>
+									</div>
+								)}
 							</div>
 						</ScrollArea>
 
@@ -415,7 +478,10 @@ export default function MessagesPage() {
 								<Input
 									placeholder="Écrivez un message..."
 									value={newMessage}
-									onChange={(e) => setNewMessage(e.target.value)}
+									onChange={(e) => {
+										setNewMessage(e.target.value);
+										handleTyping();
+									}}
 									className="rounded-full px-4"
 								/>
 								<Button