From f11be741c59a9b18ba157cd46081628cd38b356c Mon Sep 17 00:00:00 2001
From: Bilal Dieumegard <bilal.dieumegard@gmail.com>
Date: Mon, 16 Dec 2024 12:11:47 +0100
Subject: [PATCH] Ajout des 3 points lors de l'ecriture d'un message.

---
 src/lib/components/ui/ProfileCard.svelte |   5 +-
 src/lib/components/ui/UserChat.svelte    | 103 ++++++++++++++---------
 src/routes/api/channels/+server.ts       |   6 ++
 src/routes/chats/+page.server.ts         |   8 +-
 src/routes/chats/+page.svelte            |   6 +-
 5 files changed, 77 insertions(+), 51 deletions(-)

diff --git a/src/lib/components/ui/ProfileCard.svelte b/src/lib/components/ui/ProfileCard.svelte
index 8475786..3794768 100644
--- a/src/lib/components/ui/ProfileCard.svelte
+++ b/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">
diff --git a/src/lib/components/ui/UserChat.svelte b/src/lib/components/ui/UserChat.svelte
index 4b057be..63e4735 100644
--- a/src/lib/components/ui/UserChat.svelte
+++ b/src/lib/components/ui/UserChat.svelte
@@ -2,49 +2,29 @@
 	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">
-	<img
-		src={`http://localhost:5173/${user.profilePicture}`}
-		alt="Profile"
-		class="h-12 w-12 rounded-full border border-gray-300"
-	/>
-	<div class="flex flex-col">
-		<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>
-			{#if user.state === "En ligne"}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-3 w-3 text-green-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>
-			{: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 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"
+			class="h-12 w-12 rounded-full border border-gray-300"
+		/>
+		<div class="flex flex-col">
+			<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"}
+		<div class="online-indicator"></div>
+	{:else if user.state === "Ecrit"}
+		<div class="typing-animation">
+			<span class="dot"></span>
+			<span class="dot"></span>
+			<span class="dot"></span>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -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>
diff --git a/src/routes/api/channels/+server.ts b/src/routes/api/channels/+server.ts
index 654ca4c..f5bf13c 100644
--- a/src/routes/api/channels/+server.ts
+++ b/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);
diff --git a/src/routes/chats/+page.server.ts b/src/routes/chats/+page.server.ts
index 491e754..68a3ec2 100644
--- a/src/routes/chats/+page.server.ts
+++ b/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
 		};
 	}
 }
\ No newline at end of file
diff --git a/src/routes/chats/+page.svelte b/src/routes/chats/+page.svelte
index 84f78f4..2573938 100644
--- a/src/routes/chats/+page.svelte
+++ b/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 {