feat: enhance messaging system with user search and direct conversations

- Added user-to-user messaging via profile pages. - Implemented user search functionality with instant result display in the messaging sidebar. - Introduced support for temporary chat interfaces when messaging new users without prior conversations. - Included "Message read status" updates with improved UX for message timestamps.
2026-01-29 15:53:53 +01:00
parent 0972ed951f
commit 50787c9357
2 changed files with 187 additions and 16 deletions
--- a/frontend/src/app/(dashboard)/messages/page.tsx
+++ b/frontend/src/app/(dashboard)/messages/page.tsx
@@ -2,7 +2,8 @@

 import { formatDistanceToNow } from "date-fns";
 import { fr } from "date-fns/locale";
-import { Search, Send } from "lucide-react";
+import { Search, Send, UserPlus, X } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 import * as React from "react";
 import { toast } from "sonner";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -16,23 +17,54 @@ import {
 	type Message,
 	MessageService,
 } from "@/services/message.service";
+import { UserService } from "@/services/user.service";
+import type { User } from "@/types/user";

 export default function MessagesPage() {
 	const { user } = useAuth();
 	const { socket } = useSocket();
+	const _router = useRouter();
+	const searchParams = useSearchParams();
+	const targetUserId = searchParams.get("user");
+
 	const [conversations, setConversations] = React.useState<Conversation[]>([]);
 	const [activeConv, setActiveConv] = React.useState<Conversation | null>(null);
 	const [messages, setMessages] = React.useState<Message[]>([]);
 	const [newMessage, setNewMessage] = React.useState("");
 	const [isLoadingConvs, setIsLoadingConvs] = React.useState(true);
 	const [isLoadingMsgs, setIsLoadingMsgs] = React.useState(false);
+
+	const [searchQuery, setSearchQuery] = React.useState("");
+	const [searchResults, setSearchResults] = React.useState<User[]>([]);
+	const [isSearching, setIsSearching] = React.useState(false);
+
 	const scrollRef = React.useRef<HTMLDivElement>(null);

+	// Charger les conversations initiales
 	React.useEffect(() => {
 		const fetchConvs = async () => {
 			try {
 				const data = await MessageService.getConversations();
 				setConversations(data);
+
+				// Si un utilisateur est spécifié dans l'URL, essayer de trouver la conversation
+				if (targetUserId) {
+					const existing = data.find((c) => c.recipient.uuid === targetUserId);
+					if (existing) {
+						setActiveConv(existing);
+					} else {
+						// Chercher les infos de l'utilisateur pour afficher une interface de chat vide
+						try {
+							const conv = await MessageService.getConversationWith(targetUserId);
+							if (conv) {
+								setConversations((prev) => [conv, ...prev]);
+								setActiveConv(conv);
+							}
+						} catch (_e) {
+							// Peut-être que l'utilisateur n'existe pas ou erreur
+						}
+					}
+				}
 			} catch (_error) {
 				toast.error("Erreur lors du chargement des conversations");
 			} finally {
@@ -40,7 +72,28 @@ export default function MessagesPage() {
 			}
 		};
 		fetchConvs();
-	}, []);
+	}, [targetUserId]);
+
+	// Recherche d'utilisateurs
+	React.useEffect(() => {
+		const delayDebounceFn = setTimeout(async () => {
+			if (searchQuery.length > 1) {
+				setIsSearching(true);
+				try {
+					const results = await UserService.search(searchQuery);
+					setSearchResults(results.filter((u) => u.uuid !== user?.uuid));
+				} catch (_error) {
+					console.error("Search failed");
+				} finally {
+					setIsSearching(false);
+				}
+			} else {
+				setSearchResults([]);
+			}
+		}, 300);
+
+		return () => clearTimeout(delayDebounceFn);
+	}, [searchQuery, user?.uuid]);

 	React.useEffect(() => {
 		if (activeConv) {
@@ -114,7 +167,21 @@ export default function MessagesPage() {
 				activeConv.recipient.uuid,
 				text,
 			);
-			setMessages((prev) => [...prev, msg]);
+
+			// Si c'était une conv temporaire, on la remplace par la vraie
+			if (activeConv.id.startsWith("temp-")) {
+				const fetchConvs = async () => {
+					const data = await MessageService.getConversations();
+					setConversations(data);
+					const realConv = data.find(
+						(c) => c.recipient.uuid === activeConv.recipient.uuid,
+					);
+					if (realConv) setActiveConv(realConv);
+				};
+				fetchConvs();
+			} else {
+				setMessages((prev) => [...prev, msg]);
+			}
 		} catch (_error) {
 			toast.error("Erreur lors de l'envoi");
 		}
@@ -125,15 +192,94 @@ export default function MessagesPage() {
 			{/* Sidebar - Liste des conversations */}
 			<div className="w-80 border-r flex flex-col">
 				<div className="p-4 border-b">
-					<h2 className="text-xl font-bold mb-4">Messages</h2>
+					<div className="flex items-center justify-between mb-4">
+						<h2 className="text-xl font-bold">Messages</h2>
+						<Button variant="ghost" size="icon" className="rounded-full">
+							<UserPlus className="h-5 w-5" />
+						</Button>
+					</div>
 					<div className="relative">
 						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-						<Input placeholder="Rechercher..." className="pl-9" />
+						<Input
+							placeholder="Rechercher un membre..."
+							className="pl-9"
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+						/>
+						{searchQuery && (
+							<button
+								type="button"
+								onClick={() => setSearchQuery("")}
+								className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-full"
+							>
+								<X className="h-3 w-3 text-muted-foreground" />
+							</button>
+						)}
 					</div>
 				</div>
 				<ScrollArea className="flex-1">
 					<div className="p-2 space-y-1">
-						{isLoadingConvs ? (
+						{searchQuery.length > 0 ? (
+							<>
+								<p className="px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+									Membres
+								</p>
+								{isSearching ? (
+									<div className="p-4 text-center text-sm text-muted-foreground">
+										Recherche...
+									</div>
+								) : searchResults.length === 0 ? (
+									<div className="p-4 text-center text-sm text-muted-foreground">
+										Aucun membre trouvé.
+									</div>
+								) : (
+									searchResults.map((result) => (
+										<button
+											key={result.uuid}
+											type="button"
+											onClick={async () => {
+												setSearchQuery("");
+												// Chercher si une conv existe déjà
+												const existing = conversations.find(
+													(c) => c.recipient.uuid === result.uuid,
+												);
+												if (existing) {
+													setActiveConv(existing);
+												} else {
+													// Créer une interface de conv temporaire
+													const newConv: Conversation = {
+														id: `temp-${result.uuid}`,
+														updatedAt: new Date().toISOString(),
+														recipient: {
+															uuid: result.uuid,
+															username: result.username,
+															displayName: result.displayName,
+															avatarUrl: result.avatarUrl,
+														},
+													};
+													setConversations((prev) => [newConv, ...prev]);
+													setActiveConv(newConv);
+												}
+											}}
+											className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-900 transition-colors"
+										>
+											<Avatar className="h-10 w-10">
+												<AvatarImage src={result.avatarUrl} />
+												<AvatarFallback>{result.username[0].toUpperCase()}</AvatarFallback>
+											</Avatar>
+											<div className="flex-1 text-left overflow-hidden">
+												<span className="font-bold block truncate">
+													{result.displayName || result.username}
+												</span>
+												<span className="text-xs text-muted-foreground block truncate">
+													@{result.username}
+												</span>
+											</div>
+										</button>
+									))
+								)}
+							</>
+						) : isLoadingConvs ? (
 							<div className="p-4 text-center text-sm text-muted-foreground">
 								Chargement...
 							</div>
@@ -226,18 +372,25 @@ export default function MessagesPage() {
 												}`}
 											>
 												<p className="whitespace-pre-wrap">{msg.text}</p>
-												<p
-													className={`text-[10px] mt-1 ${
+												<div
+													className={`flex items-center gap-1 text-[10px] mt-1 ${
 														msg.senderId === user?.uuid
-															? "text-primary-foreground/70"
+															? "text-primary-foreground/70 justify-end"
 															: "text-muted-foreground"
 													}`}
 												>
-													{new Date(msg.createdAt).toLocaleTimeString([], {
-														hour: "2-digit",
-														minute: "2-digit",
-													})}
-												</p>
+													<span>
+														{new Date(msg.createdAt).toLocaleTimeString([], {
+															hour: "2-digit",
+															minute: "2-digit",
+														})}
+													</span>
+													{msg.senderId === user?.uuid && (
+														<span className="font-bold">
+															{msg.readAt ? "• Lu" : "• Envoyé"}
+														</span>
+													)}
+												</div>
 											</div>
 										</div>
 									))
--- a/frontend/src/app/(dashboard)/user/[username]/page.tsx
+++ b/frontend/src/app/(dashboard)/user/[username]/page.tsx
@@ -1,12 +1,19 @@
 "use client";

-import { Calendar, Share2, User as UserIcon } from "lucide-react";
+import {
+	Calendar,
+	MessageCircle,
+	Share2,
+	User as UserIcon,
+} from "lucide-react";
+import Link from "next/link";
 import * as React from "react";
 import { toast } from "sonner";
 import { ContentList } from "@/components/content-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { UserService } from "@/services/user.service";
 import type { User } from "@/types/user";
@@ -17,9 +24,12 @@ export default function PublicProfilePage({
 	params: Promise<{ username: string }>;
 }) {
 	const { username } = React.use(params);
+	const { user: currentUser, isAuthenticated } = useAuth();
 	const [user, setUser] = React.useState<User | null>(null);
 	const [loading, setLoading] = React.useState(true);

+	const isOwnProfile = currentUser?.username === username;
+
 	React.useEffect(() => {
 		UserService.getProfile(username)
 			.then(setUser)
@@ -93,7 +103,15 @@ export default function PublicProfilePage({
 								})}
 							</span>
 						</div>
-						<div className="flex justify-center md:justify-start pt-2">
+						<div className="flex flex-wrap justify-center md:justify-start gap-2 pt-2">
+							{!isOwnProfile && isAuthenticated && (
+								<Button size="sm" className="h-9 px-4" asChild>
+									<Link href={`/messages?user=${user.uuid}`}>
+										<MessageCircle className="h-4 w-4 mr-2" />
+										Message
+									</Link>
+								</Button>
+							)}
 							<Button
 								variant="outline"
 								size="sm"