add thread in api and front

front/src/views/room/Message.vue

@@ -105,6 +105,7 @@ iframe {
     overflow-y: auto;
     max-height: 300px;
     width: 100%;
+    padding: 2px 10px;
     max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
     background-color: rgb(234, 234, 234);
 }

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

@@ -14,9 +14,10 @@ const props = defineProps({
         userId: Number,
         notSeen: Number,
         mailboxId: Number,
-        threads: [Object],
+        threadIds: [Number],
     },
 });
+console.log(props.data.threadIds);
 
 const router = useRouter();
 </script>
@@ -37,7 +38,7 @@ const router = useRouter();
                 ><template v-slot:body>{{ props.data.unseen }}</template>
             </Badge>
         </div>
-        <ThreadList :threads="props.data.threads" />
+        <ThreadList :threadIds="props.data.threadIds" />
     </div>
 </template>
 

front/src/views/sidebar/rooms/threads/Thread.vue

@@ -1,15 +1,23 @@
 <script setup>
+import store from "@/store/store";
 import { defineProps } from "vue";
+import { useRouter } from "vue-router";
 
 const props = defineProps({
-    thread: Object,
+    threadId: Number,
 });
+const room = store.getters.room(props.threadId);
 console.log(props.thread);
+const router = useRouter();
 </script>
 
 <template>
-    <div class="room">
-        {{ props.thread.roomName }}
+    <div
+        @click="router.push(`/${props.threadId}`)"
+        v-bind:class="store.state.activeRoom == props.data.id ? 'selected' : ''"
+        class="room"
+    >
+        {{ room.roomName }}
     </div>
 </template>
 

front/src/views/sidebar/rooms/threads/ThreadList.vue

@@ -1,12 +1,12 @@
 <script setup>
 import Thread from "./Thread.vue";
 import { defineProps } from "vue";
-const props = defineProps({ threads: [Object] });
+const props = defineProps({ threadIds: [Number] });
 </script>
 
 <template>
     <div>
-        <Thread v-for="(thread, index) in props.threads" :key="index" :thread="thread" />
+        <Thread v-for="(threadId, index) in props.threadIds" :key="index" :threadId="threadId" />
     </div>
 </template>