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>

src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<template>
+<Sidebar>
+</Sidebar>
+<Content>
+  <template v-slot:title>Welcome to Mercury!</template>
+  <template v-slot:content>
+    <div class="d-flex flex-column text-center align-items-center px-5 overflow-hidden">
+      <img class="animate__animated animate__rotateIn py-5 w-25" id="logo" src="../assets/logo-light.png" />
+      <h1 class="animate__animated animate__fadeInDown animate__delay-1s">
+        Mercury is a web-based BENNC client.
+      </h1>
+      <h2 class="animate__animated animate__fadeInDown animate__delay-2s">
+        Go to <router-link :to="{ name: 'Settings' }" class="text-muted"><i class="bi bi-gear-fill"></i> Settings</router-link> to configure your client.
+      </h2>
+    </div>
+  </template>
+</Content>
+</template>
+
+<script setup>
+import Sidebar from '../components/Sidebar.vue'
+import Content from '../components/Content.vue'
+</script>
+
+<style scoped>
+#logo {
+  filter: invert(80%);
+}
+h1 {
+  --animate-delay: 0.5s;
+}
+h2 {
+  --animate-delay: 0.5s;
+}
+</style>

src/views/SettingsView.vue

@@ -1,9 +1,8 @@
 <template>
-<div class="d-flex flex-column vh-100">
-  <header class="bg-light px-3 py-2 d-flex flex-row align-items-center">
-    <h2 class="mb-0 me-3">Settings</h2>
-  </header>
-  <div class="px-3 py-2">
+<Sidebar />
+<Content>
+  <template v-slot:title>Settings</template>
+  <template v-slot:content>
     <h3>Channels</h3>
     <table class="table">
       <thead>
@@ -29,13 +28,16 @@
       </div>
     </div>
     <button type="submit" class="btn btn-primary float-end">Add channel</button>
-  </div>
-</div>
+  </template>
+</Content>
+
 </template>
 
 <script setup>
 import { useChannelStore } from '../stores/channelStore'
-import Key from '../components/Key.vue'
+import Key from '../components/common/Key.vue'
+import Sidebar from '../components/Sidebar.vue'
+import Content from '../components/Content.vue'
 
 const channelStore = useChannelStore()
 </script>