load message in front

front/src/views/room/RoomView.vue

@@ -14,7 +14,8 @@ onBeforeMount(async () => {
     console.log(store.state.rooms.find((room) => room.id === id)?.fetched);
     let room = store.state.rooms.find((room) => room.id === id);
     if (!room || room?.fetched === false) {
-        await store.dispatch("fetchMessages");
+        // todo
+        // await store.dispatch("fetchMessages", );
     }
     store.commit("setActiveRoom", id);
 });
@@ -28,20 +29,49 @@ onBeforeRouteUpdate(async (to, from) => {
 </script>
 
 <template>
-    <div>
+    <div id="main">
         <Header></Header>
-        <div>
-            <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
-            <b>{{ id }}</b>
-            {{ messages.length }}
+        <div id="RoomViewBody">
+            <div class="content">
+                <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
+                <b>{{ id }}</b>
+                {{ messages.length }}
+            </div>
+            <div id="composer">COMPOSER</div>
         </div>
     </div>
 </template>
 
 <style scoped>
-div {
+#main {
     background-color: #1d1d23;
     color: white;
     width: 100%;
 }
+
+#RoomViewBody {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#composer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding-top: 10px;
+
+    /* todo composer */
+    height: 35px;
+    background-color: red;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    margin-bottom: 100px;
+}
+
+
 </style>