message counts

irchad-web/src/components/BufferList.vue

@@ -1,17 +1,23 @@
 <script setup>
-import { computed } from "vue";
 import { useIRCStore } from "@/stores/irc";
-const { buffers } = useIRCStore();
-const store = useIRCStore();
-const bufferList = computed(() => {
-  return Object.keys(buffers);
-});
+
+const { setActiveBuffer, buffers, activeBufferName } = useIRCStore();
 </script>
 
 <template>
-  <v-list>
-    <v-list-item v-for="buf in bufferList" @click="store.setActiveBuffer(buf)">
-      {{ buf }}
+  <v-list
+    selectable
+    :selected="[activeBufferName]"
+    @click:select="(item) => setActiveBuffer(item.id)"
+  >
+    <v-list-item :value="bufName" v-for="(bufValue, bufName) in buffers">
+      {{ bufName }}
+      <template v-slot:append>
+        <v-badge
+          :content="bufValue.messages.length - bufValue.lastSeenIdx"
+          inline
+        />
+      </template>
     </v-list-item>
   </v-list>
 </template>

irchad-web/src/components/Chat.vue

@@ -5,21 +5,26 @@ import { useIRCStore } from "@/stores/irc";
 const store = useIRCStore();
 const inputBuffer = ref();
 
-onMounted(() => {
-  store.connect();
-});
+onMounted(store.connect);
 
 function send() {
   store.sendActiveBuffer(inputBuffer.value);
   inputBuffer.value = "";
 }
 </script>
+
 <template>
   <div class="d-flex flex-row" style="height: 100vh">
     <v-sheet border class="buffers">
       <BufferList />
     </v-sheet>
     <div class="messages d-flex flex-column">
+      <v-toolbar density="compact">
+        <v-toolbar-title>
+          <p>{{ store.activeBufferName }}</p>
+          {{ store.activeBuffer?.topic }}
+        </v-toolbar-title>
+      </v-toolbar>
       <MessageList
         :messages="store.activeBuffer?.messages"
         :me="store.clientInfo.nick"
@@ -49,7 +54,7 @@ function send() {
 
 .messages {
   height: 100%;
-  flex: 2;
+  flex: 3;
   justify-content: space-between;
 }