From 176abf58b2f72152124597e5069081b7bffac675 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 19 May 2024 12:04:43 +0200
Subject: [PATCH] When a chat is selected, the header now shows the member list

---
 src/components/HeaderInfoContainerComponent.vue |  4 ++++
 src/pages/IndexPage.vue                         | 12 +++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/HeaderInfoContainerComponent.vue b/src/components/HeaderInfoContainerComponent.vue
index 856183a..0a3af7b 100644
--- a/src/components/HeaderInfoContainerComponent.vue
+++ b/src/components/HeaderInfoContainerComponent.vue
@@ -19,6 +19,10 @@
   .displayName {
     height: 100%;
     margin: 0.5rem 1rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 200px;
   }
 
   .image {
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index f276a85..c6c9127 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -126,11 +126,20 @@
           :image="selectedUser.profilePictureUrl"
         ></HeaderInfoContainerComponent>
 
-        <div v-if="selectedChat.id != null">
+        <div v-if="selectedChat.id != null" style="display: flex;">
           <HeaderInfoContainerComponent  
             :displayName="selectedChat.displayName"
             image="https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg"
           ></HeaderInfoContainerComponent>
+
+          <div>
+            <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 14px;height:50px;margin: 0px;display: table-cell;vertical-align: middle;padding: 10px;max-width: 300px;">
+              <span>Du, </span>
+              <span v-for="(user, index) in selectedChat.members.filter(u => u.id != userStore.user!.id)">@{{ user.username }}{{ index < selectedChat.members.length - 2 ? ", " : "" }} </span>
+            </p>
+          </div>
+
+          <!--<ChatSettingsComponent :chat="selectedChat"></ChatSettingsComponent>-->
         </div>
         
       </div>
@@ -223,6 +232,7 @@
   import {useUserStore} from 'stores/user-store';
   import { useChatStore } from 'stores/chat-store';
   import SettingsPopUp from 'src/components/SettingsPopUp.vue';
+  import ChatSettingsComponent from 'src/components/ChatSettingsComponent.vue';
 
   defineOptions({
     name: 'IndexPage'