show description in room header

front/src/views/room/Header.vue

@@ -1,22 +1,54 @@
-<script setup>
-import { defineProps } from "vue";
-const props = defineProps({ room: Object });
+<script setup lang="ts">
+import store from "../../store/store";
+import { defineProps, ref, watch } from "vue";
+import Badge from "@/components/Badge.vue";
+import { RoomType } from "@/store/models/model";
+
+const props = defineProps({ id: Number });
+const room = ref(store.getters.room(props.id));
+
+watch(
+    () => props.id,
+    (newId) => {
+        room.value = store.getters.room(newId);
+    },
+);
+
+const roomTitle = () => {
+    const type = room.value?.roomType;
+    if (type === RoomType.DM || type == RoomType.CHANNEL || type == RoomType.ROOM) {
+        return room.value?.user;
+    }
+    return room.value?.roomName;
+};
 </script>
 
 <template>
     <div class="main">
-        <div>
-            {{ props }}
-            type: name / sender
+        <div class="infos">
+            <Badge :value="RoomType[room?.roomType]" />
+            {{ roomTitle() }}
         </div>
-        <div>action: threads message important</div>
+        <div class="action">action: threads message important</div>
     </div>
 </template>
 
 <style scoped>
 .main {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     border-bottom: 1px solid #505050;
     width: 100%;
     height: 51px;
 }
+
+.infos {
+    margin-left: 15px;
+}
+
+.action {
+    margin-right: 15px;
+}
 </style>

front/src/views/room/RoomView.vue

@@ -1,17 +1,17 @@
 <script setup>
 import { useStore } from "vuex";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { onBeforeMount } from "vue";
+import { onBeforeMount, ref } from "vue";
 import Header from "./Header.vue";
 import Message from "./Message.vue";
 
 const store = useStore();
 const route = useRoute();
-let { id } = route.params;
+const id = ref(parseInt(route.params?.id));
 onBeforeMount(async () => {
+    console.log(id);
     // get data
-    let room = store.state.rooms.find((room) => room.id === id);
-    console.log(room);
+    let room = store.getters.room(id);
     if (!room || room?.fetched === false) {
         // todo
         // await store.dispatch("fetchMessages", );
@@ -21,7 +21,8 @@ onBeforeMount(async () => {
 
 onBeforeRouteUpdate(async (to, from) => {
     if (to.params.id !== from.params.id) {
-        id = to.params.id;
+        id.value = parseInt(to.params.id);
+        console.log(id);
         store.commit("setActiveRoom", id);
     }
 });

front/src/views/sidebar/Sidebar.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <Accounts />
-        <Rooms id="rooms" />
+        <Accounts class="accounts" />
+        <Rooms class="rooms" />
     </div>
 </template>
 
@@ -24,9 +24,11 @@ div {
     height: 100%;
 }
 
-#rooms {
-    max-width: 300px;
-    min-width: 250px;
+.accounts {
+    width: 82px;
+}
+.rooms {
+    width: 300px;
 }
 
 /* todo setup max size */

front/src/views/sidebar/rooms/Room.vue

@@ -5,7 +5,6 @@ import BaseAvatar from "../../avatars/BaseAvatar.vue";
 import Badge from "../../../components/Badge.vue";
 import ThreadList from "./threads/ThreadList.vue";
 import store from "@/store/store";
-import { decodeEmojis } from "@/utils/string";
 
 const props = defineProps({
     data: {
@@ -32,7 +31,7 @@ const router = useRouter();
             <BaseAvatar url="vue.png" />
             <div id="content">
                 <div id="sender">{{ props.data.user }}</div>
-                <div id="object">{{ decodeEmojis(props.data.roomName) }}</div>
+                <div id="object">{{ props.data.roomName }}</div>
             </div>
             <Badge class="badge" v-if="props.data.unseen > 0"
                 ><template v-slot:body>{{ props.data.unseen }}</template>