Refactor sidebar

src/views/ConversationView.vue

@@ -1,25 +1,35 @@
 <template>
-<div class="d-flex flex-column vh-100">
-  <header class="bg-light px-3 py-2 d-flex flex-row align-items-center">
-    <span class="mb-0 me-3 fs-3">{{ channel.name }}</span>
+<Sidebar>
+  <template v-slot:top>
+    <h5 class="text-muted mt-3">Users</h5>
+    <UserList :channel="channel" />
+  </template>
+</Sidebar>
+<Content autoScroll>
+  <template v-slot:title>{{ channel.name }}</template>
+  <template v-slot:header>
     <Key :channel="channel" />
-  </header>
-  <div class="messages overflow-auto p-3">
+  </template>
+  <template v-slot:content>
     <Message v-for="message in messages" :key="message.id" :message="message" />
-    <div ref="bottom"></div>
-  </div>
-  <Input :channel="channel" class="mt-auto px-3" />
-</div>
+  </template>
+  <template v-slot:footer>
+    <MessageInput :channel="channel" />
+  </template>
+</Content>
 </template>
 
 <script setup>
-import { computed, onMounted, onUpdated, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 import { useChannelStore } from '../stores/channelStore'
 import { useMessageStore } from '../stores/messageStore'
-import Input from '../components/Input.vue'
-import Message from '../components/Message.vue'
-import Key from '../components/Key.vue'
+import Sidebar from '../components/Sidebar.vue'
+import Content from '../components/Content.vue'
+import Key from '../components/common/Key.vue'
+import UserList from '../components/userlist/UserList.vue'
+import Message from '../components/conversation/Message.vue'
+import MessageInput from '../components/conversation/MessageInput.vue'
 
 const route = useRoute()
 const channelStore = useChannelStore()
@@ -31,13 +41,5 @@ const messages = computed(() => { return messageStore.getMessagesByChannelId(rou
 // Show the key.
 const locked = ref(false)
 onBeforeRouteUpdate(async (to, from) => { locked.value = false })
-
-// Scroll to bottom.
-const bottom = ref(null)
-onUpdated(() => {
-  bottom.value.scrollIntoView({ behavior: "smooth", block: "center" })
-})
-onMounted(() => {
-  bottom.value.scrollIntoView({ block: "center" })
-})
+const abcdef = ref(null)
 </script>