Ajout de ProfileInfo dans les messages du chat

src/lib/components/Message.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import * as Card from "$lib/components/ui/card";
   import { formatDistanceToNow } from "$lib/utils/date.js";
-  import { onMount, onDestroy } from "svelte";
+  import { onMount } from "svelte";
+  import ProfileInfo from "$lib/components/ui/ProfileInfo.svelte"; // Importer le composant ProfileInfo
 
-  export let username: string;
-  export let messageContent: string;
-  export let profilePicture: string | null; // Peut être null
-  export let createdAt: string; // Date de création du message
+  export let myMessage: boolean; // Si c'est le message de l'utilisateur courant
+
+  export let user = null; // Infos utilisateur
+  export let messageContent = ""; // Contenu du message
+  export let createdAt = new Date(); // Date de création du message
 
   let defaultProfilePicture = "/images/default-profile.png";
+  let showProfileInfo = false; // Contrôle la visibilité des informations de profil
 
   // Temps écoulé (calculé périodiquement)
   let timeElapsed: string;
@@ -30,32 +33,45 @@
 </script>
 
 <Card.Root class="relative">
-  <Card.Header class="flex items-center flex-row justify-between">
-    <!-- Image de profil collée à gauche -->
-    <div class="flex flex-row gap-3 items-center">
-      <img
-        src={'http://localhost:5173/' + profilePicture}
-        alt="Profile Picture"
-        class="h-10 w-10 rounded-full border border-gray-300"
-      />
-      <!-- Section contenant le pseudo -->
-      <div class="flex flex-col">
-        <Card.Title class="text-gray-800 text-sm sm:text-base md:text-lg truncate">
-          {username}
-        </Card.Title>
-      </div>
-    </div>
-    <!-- Temps depuis la création -->
+  <Card.Header
+    class="flex items-center justify-between {myMessage ? 'flex-row' : 'flex-row-reverse'}"
+  >
+    <!-- Conteneur pour la date -->
     <span class="text-xs sm:text-sm md:text-base text-gray-500 items-top">
       {timeElapsed}
     </span>
+
+    <!-- Conteneur pour l'image et le nom d'utilisateur -->
+    <div class="flex items-center gap-3 {myMessage ? 'flex-row-reverse' : 'flex-row'}">
+      <div
+        class="relative"
+        on:mouseenter={() => (showProfileInfo = true)}
+        on:mouseleave={() => (showProfileInfo = false)}
+      >
+        <!-- Image de profil -->
+        <img
+          src={user.profilePicture ? `http://localhost:5173/${user.profilePicture}` : defaultProfilePicture}
+          alt="Profile Picture"
+          class="h-10 w-10 rounded-full border border-gray-300"
+        />
+
+        <!-- Infos du profil (affichées au survol) -->
+        <ProfileInfo user={user} show={showProfileInfo} position={myMessage ? "right" : "left"} />
+      </div>
+
+      <div class="flex flex-col text-right {myMessage ? 'text-right' : 'text-left'}">
+        <Card.Title
+          class="text-gray-800 text-sm sm:text-base md:text-lg truncate {myMessage ? 'font-black' : ''}"
+        >
+          {myMessage ? "(Moi)" : ""} {user.username}
+        </Card.Title>
+      </div>
+    </div>
   </Card.Header>
 
   <!-- Contenu du message -->
-  <Card.Content>
-    <p class="text-sm sm:text-base md:text-lg text-gray-700">
-      {messageContent}
-    </p>
+  <Card.Content class="text-sm sm:text-base md:text-lg text-gray-700">
+    <p>{messageContent}</p>
   </Card.Content>
 </Card.Root>
 
@@ -63,4 +79,16 @@
   img {
     object-fit: cover; /* Assure un bon rendu des images */
   }
+
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .text-left {
+    text-align: left;
+  }
 </style>

src/lib/components/ui/ProfileInfo.svelte

@@ -1,34 +1,37 @@
 <script>
-	export let user = { pseudo: '', prenom: '', nom: '', description: '' }; // Infos utilisateur
+	export let user; // Infos utilisateur
 	export let position = 'right'; // Position de la photo de profil: 'left' ou 'right'
+	export let show = false; // Afficher ou masquer les infos utilisateur
 </script>
 
-<div class="user-info" style="left: {position === 'left' ? 'auto' : '0'}; right: {position === 'right' ? '0' : 'auto'};">
+{#if show}
+	<div class="user-info" style="left: {position === 'left' ? 'auto' : '0'}; right: {position === 'right' ? '0' : 'auto'};">
 		<h3>{user.pseudo}</h3>
-	<p>{user.prenom} {user.nom}</p>
+		<p>{user.name} {user.surname}</p>
 		<p>{user.description}</p>
-</div>
+	</div>
+{/if}
 
 <style>
     .user-info {
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        background: rgba(255, 255, 255, 0.9);
-        padding: 10px;
-        border-radius: 5px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        max-width: 200px;
-        transition: all 0.3s ease;
+        top: 0; /* Aligner en haut */
+        left: auto;
+        right: auto;
+        width: 200px; /* Largeur appropriée */
+        background: rgba(255, 255, 255, 0.95); /* Fond semi-transparent */
+        padding: 15px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        z-index: 10; /* Gérer les priorités d'affichage */
     }
 
-    .user-info h3 {
-        margin: 0;
-        font-size: 18px;
+    .user-info.left {
+        right: 110%; /* Position à gauche avec un espace */
     }
 
-    .user-info p {
-        margin: 5px 0;
-        font-size: 14px;
+    .user-info.right {
+        left: 110%; /* Position à droite avec un espace */
     }
 </style>
+

src/routes/chats/[id]/+page.server.ts

@@ -7,7 +7,6 @@ export async function load({ fetch, params, locals }) {
 			}
 		});
 		const messages = await res.json();
-		console.log(messages);
 		return {
 			messages,
 			channelId: params.id,

src/routes/chats/[id]/+page.svelte

@@ -144,7 +144,7 @@
             <!-- Afficher les messages (mock d'un utilisateur sélectionné ou aucun message par défaut) -->
             {#if messages !== undefined && messages.length > 0}
                 {#each messages as message}
-                    <Message profilePicture={message.user.profilePicture} username={message.user.username} messageContent={message.text} createdAt={message.createdAt} />
+                    <Message myMessage={data.userId == message.user.id} user={message.user}  messageContent={message.text} createdAt={message.createdAt} />
                 {/each}
             {:else}
                 <div class="text-center text-gray-500 mt-10">Sélectionnez un message le chat est vide.</div>