changement de la logique des messages

src/app/pages/menu/menu-users/menu-users.component.css

@@ -0,0 +1,52 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
+
+.discussions-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+}
+
+.discussion-btn {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    width: 100%;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.88);
+    border: none;
+    border-radius: 50px;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.10);
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.15s;
+
+    img {
+        opacity: 0.7;
+        flex-shrink: 0;
+    }
+
+    &:active {
+        transform: scale(0.97);
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.08);
+    }
+}
+
+.discussion-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.username {
+    font-family: 'Nunito', sans-serif;
+    font-size: 15px;
+    font-weight: 700;
+    color: #b05050;
+}
+
+.members {
+    font-family: 'Nunito', sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    color: #c98080;
+}

src/app/pages/menu/menu-users/menu-users.component.html

@@ -1,4 +1,22 @@
-<button class="users-btn">
-    <img width="50" height="50" src="https://img.icons8.com/ios/50/user-male-circle--v1.png" alt="user"/>
-    <span class="username">INFO NOM : </span>
-</button>
+<div class="discussions-list">
+    <button
+            class="discussion-btn"
+            *ngFor="let disc of discussions"
+            (click)="openDiscussion(disc.id)">
+
+        <img
+                width="36" height="36"
+                [src]="disc.isGroup
+        ? 'https://img.icons8.com/ios/50/conference-call--v1.png'
+        : 'https://img.icons8.com/ios/50/user-male-circle--v1.png'"
+                alt="avatar"/>
+
+        <div class="discussion-info">
+            <span class="username">{{ disc.name }}</span>
+            <span class="members" *ngIf="disc.isGroup">
+        {{ disc.membersCount }} membres
+      </span>
+        </div>
+
+    </button>
+</div>

src/app/pages/menu/menu-users/menu-users.component.ts

@@ -1,11 +1,34 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { Router } from "@angular/router";
+import { CommonModule } from "@angular/common";
+
+export interface Discussion {
+  id: number;
+  name: string;
+  isGroup: boolean;
+  membersCount?: number;
+}
 
 @Component({
   selector: 'app-menu-users',
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './menu-users.component.html',
   styleUrl: './menu-users.component.css'
 })
 export class MenuUsersComponent {
 
-}
+  private router = inject(Router);
+
+  discussions: Discussion[] = [
+    { id: 1, name: 'Um-Bro', isGroup: false },
+    { id: 2, name: 'Doggeybag',      isGroup: false },
+    { id: 3, name: '',               isGroup: false },
+    { id: 4, name: 'Abel Paradigm',  isGroup: false },
+    { id: 5, name: 'Um-Brothers',    isGroup: true, membersCount: 7 },
+    { id: 6, name: 'Hoodie G',       isGroup: false },
+  ];
+
+  openDiscussion(discussionId: number) {
+    this.router.navigate(['/main/messages', discussionId]);
+  }
+}