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 { setActiveBuffer, buffers, activeBufferName } = useIRCStore();
-const bufferList = computed(() => {
-  return Object.keys(buffers);
-});
 </script>
 
 <template>
-  <v-list>
+  <v-list
-    <v-list-item v-for="buf in bufferList" @click="store.setActiveBuffer(buf)">
+    selectable
-      {{ buf }}
+    :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(() => {
+onMounted(store.connect);
-  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;
 }
 

irchad-web/src/stores/irc.js

@@ -29,6 +29,13 @@ export const useIRCStore = defineStore("irc", () => {
 
   function setActiveBuffer(bufferName) {
     activeBufferName.value = bufferName;
+    resetBufferLastSeen(bufferName);
+  }
+
+  function resetBufferLastSeen(bufferName) {
+    const buffer = getBuffer(bufferName);
+    if (!buffer) return;
+    buffer.lastSeenIdx = buffer.messages.length;
   }
 
   const client = new Client({
@@ -51,13 +58,6 @@ export const useIRCStore = defineStore("irc", () => {
 
   function sendActiveBuffer(message) {
     client.say(activeBufferName.value, message);
-    // const buffer = getBuffer(activeBufferName.value);
-    //
-    // buffer.messages.push({
-    //   nick: clientInfo.value.nick,
-    //   message,
-    //   time: Date.now(),
-    // });
   }
 
   function isMe(target) {
@@ -69,6 +69,7 @@ export const useIRCStore = defineStore("irc", () => {
       messages: [],
       topic: "",
       users: [],
+      lastSeenIdx: 0,
     };
     return buffers.value[bufferName];
   }
@@ -121,6 +122,10 @@ export const useIRCStore = defineStore("irc", () => {
       buffer = getBuffer(message.target);
     }
     buffer.messages.push(message);
+
+    if (activeBufferName.value) {
+      resetBufferLastSeen(activeBufferName.value);
+    }
   });
 
   client.on("join", (ev) => {
@@ -152,6 +157,12 @@ export const useIRCStore = defineStore("irc", () => {
     }
   });
 
+  client.on("topic", ({ topic, channel }) => {
+    const buffer = getBuffer(channel);
+    if (!buffer) return;
+    buffer.topic = topic;
+  });
+
   client.on("part", ({ nick, channel }) => {
     if (isMe(nick)) {
       delBuffer(channel);