Ajout des 3 points lors de l'ecriture d'un message.

src/lib/components/ui/ProfileCard.svelte

@@ -2,10 +2,10 @@
 	import Button  from '$lib/components/ui/button/button.svelte';
 
 	export let user;
+	export let userId;
 	export let show = false; // Contrôle si la carte est visible
 	export let onClose = () => {}; // Fonction pour fermer la carte
 
-	console.log(user)
 
 	const disconnect = async () => {
 		try {
@@ -35,10 +35,11 @@
 			<div class="flex flex-col gap-2">
 				<div class="profile-header">
 					<!-- Image de profil -->
-					<img src={user.profilePicture} alt="Profile" class="profile-image" />
+					<img src="http://localhost:5173/{user.profilePicture}" alt="Profile" class="profile-image" />
 					<h2 id="profile-card-title" class="profile-name">{user.username}</h2>
 				</div>
 				<p>{user.name} {user.surname}</p>
+				<p>{user.email}</p>
 			</div>
 
 			<div class="flex flex-col gap-3">

src/lib/components/ui/UserChat.svelte

@@ -2,7 +2,8 @@
 	export let user;
 </script>
 
-<div class="flex items-center gap-4 p-3 cursor-pointer hover:bg-gray-100 rounded-lg border border-gray-300 shadow-sm">
+<div class="flex items-center gap-4 justify-between p-3 cursor-pointer hover:bg-gray-100 rounded-lg border border-gray-300 shadow-sm">
+	<div class="flex items-center gap-4">
 		<img
 			src={`http://localhost:5173/${user.profilePicture}`}
 			alt="Profile"
@@ -12,40 +13,19 @@
 			<span class="font-medium text-gray-800">{user.username}</span>
 			<div class="flex items-center gap-1">
 				<span class="text-xs text-gray-500">{user.state}</span>
+			</div>
+		</div>
+	</div>
 	{#if user.state === "En ligne"}
-				<svg
+		<div class="online-indicator"></div>
-					xmlns="http://www.w3.org/2000/svg"
+	{:else if user.state === "Ecrit"}
-					class="h-3 w-3 text-green-500"
+		<div class="typing-animation">
-					fill="none"
+			<span class="dot"></span>
-					viewBox="0 0 24 24"
+			<span class="dot"></span>
-					stroke="currentColor"
+			<span class="dot"></span>
-				>
+		</div>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-					/>
-				</svg>
-			{:else if status === "Ecrit"}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-3 w-3 text-blue-500"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-					/>
-				</svg>
 	{/if}
 </div>
-	</div>
-</div>
 
 <style>
     /* Ajout d'une animation subtile lors du survol */
@@ -53,4 +33,45 @@
         background-color: #f3f4f6;
         transition: background-color 0.2s ease-in-out;
     }
+
+    /* Styles pour le point vert (En ligne) */
+    .online-indicator {
+        width: 12px;
+        height: 12px;
+        background-color: #22c55e; /* Couleur verte */
+        border-radius: 50%;
+        box-shadow: 0 0 4px rgba(34, 197, 94, 0.6); /* Glow léger */
+    }
+
+    /* Styles pour l'animation des trois points */
+    .typing-animation {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .dot {
+        width: 6px;
+        height: 6px;
+        background-color: #3b82f6; /* Couleur bleue */
+        border-radius: 50%;
+        animation: bounce 1.2s infinite ease-in-out;
+    }
+
+    .dot:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+
+    .dot:nth-child(3) {
+        animation-delay: 0.4s;
+    }
+
+    @keyframes bounce {
+        0%, 80%, 100% {
+            transform: scale(0);
+        }
+        40% {
+            transform: scale(1);
+        }
+    }
 </style>

src/routes/api/channels/+server.ts

@@ -75,6 +75,12 @@ export async function GET({ url }) {
 
 				channels = channels.concat(canaux);
 
+				channels = channels.filter((channel, index, self) =>
+					index === self.findIndex((t) => (
+						t.id === channel.id
+					))
+				);
+
 				channels = sortChannels(channels);
 
 				channels = channels.slice(0, 10);

src/routes/chats/+page.server.ts

@@ -1,4 +1,4 @@
-export async function load({ fetch }) {
+export async function load({ fetch, locals }) {
 
 	try {
 			// Appel API ou récupération de données
@@ -12,12 +12,14 @@ export async function load({ fetch }) {
 
 		// Retourner les données à la page sous forme de props
 		return {
-			channels
+			channels,
+			userId: locals.userId
 		};
 	} catch (error) {
 		console.error('Erreur lors du chargement des canaux:', error);
 		return {
-			channels: []
+			channels: [],
+			userId: locals.userId
 		};
 	}
 }

src/routes/chats/+page.svelte

@@ -35,22 +35,18 @@
 	});
 
 	function openProfileCard() {
-		console.log('openProfileCard');
 		showProfileCard = true;  // Inverser l'état pour afficher/masquer le ProfilCard
 	}
 
 	function closeProfileCard() {
-		console.log('closeProfileCard');
 		showProfileCard = false;  // Inverser l'état pour afficher/masquer le ProfilCard
 	}
 
 	function openCreateChat() {
-		console.log('openCreateChat');
 		showCreateChat = true;  // Afficher le composant CreateChat
 	}
 
 	function closeCreateChat() {
-		console.log('closeCreateChat');
 		showCreateChat = false;  // Fermer le composant CreateChat
 	}
 
@@ -112,7 +108,7 @@
 
 </div>
 <CreateChat show={showCreateChat} socket={socket} onClose={closeCreateChat} listRef={chatListRef} />
-<ProfileCard user={data.user} show={showProfileCard} onClose={closeProfileCard} />
+<ProfileCard user={data.user} userId={data.userId} show={showProfileCard} onClose={closeProfileCard} />
 
 <style>
     .h-full {