Initial working

src/views/ConversationView.vue

@@ -0,0 +1,43 @@
+<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>
+    <Key :channel="channel" />
+  </header>
+  <div class="messages overflow-auto p-3">
+    <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>
+
+<script setup>
+import { computed, onMounted, onUpdated, 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'
+
+const route = useRoute()
+const channelStore = useChannelStore()
+const messageStore = useMessageStore()
+
+const channel = computed(() => { return channelStore.getChannelById(route.params.channelId) })
+const messages = computed(() => { return messageStore.getMessagesByChannelId(route.params.channelId) })
+
+// 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" })
+})
+</script>

src/views/SettingsView.vue

@@ -0,0 +1,47 @@
+<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">
+    <h3>Channels</h3>
+    <table class="table">
+      <thead>
+        <th scope="col">Name</th>
+        <th scope="col">Key</th>
+        <th scope="col" class="text-end">Delete</th>
+      </thead>
+      <tbody>
+        <tr v-for="channel in channelStore.channels" :key="channel.id">
+          <td class="w-25">{{ channel.name }}</td>
+          <td class="w-25"><Key :channel="channel" /></td>
+          <td class="w-25 text-end"><i class="deleteChannel bi bi-trash-fill text-danger text-end"></i></td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Add channel</h3>
+    <div class="row mb-3">
+      <div class="col">
+        <input type="text" class="form-control" placeholder="Channel name" aria-label="Channel name">
+      </div>
+      <div class="col">
+        <input type="password" class="form-control" placeholder="Channel key" aria-label="Channel key">
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary float-end">Add channel</button>
+  </div>
+</div>
+</template>
+
+<script setup>
+import { useChannelStore } from '../stores/channelStore'
+import Key from '../components/Key.vue'
+
+const channelStore = useChannelStore()
+</script>
+
+<style scope>
+.deleteChannel {
+  cursor: pointer;
+}
+</style>