fix auto scroll in chat history

irchad-web/src/components/MessageList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, watch, useTemplateRef } from "vue";
 import { useIRCStore } from "@/stores/irc";
 const props = defineProps(["messages", "me"]);
 
@@ -15,36 +15,47 @@ const timeFormatter = new Intl.DateTimeFormat("en-US", {
   minute: "2-digit",
   hour12: true,
 });
+
 function formatTime(ts) {
   const date = new Date(ts);
   return timeFormatter.format(date);
 }
+
+const chatHistory = useTemplateRef("chat-scrollback");
+watch(
+  () => props.messages,
+  () =>
+    nextTick(() => {
+      chatHistory.value.scrollTop = chatHistory.value.scrollHeight;
+    }),
+  { deep: true },
+);
 </script>
 
 <template>
-  <v-sheet class="message-list d-flex">
+  <v-sheet ref="chat-history" class="message-list d-flex">
-    <v-list>
+    <div ref="chat-scrollback">
-      <v-list-item
+      <v-list>
-        v-for="msg in messagesReverse"
+        <v-list-item
-        density="compact"
+          v-for="msg in messagesReverse"
-        :prepend-avatar="store.getMetadata(msg.nick, 'avatar')"
+          density="compact"
-      >
+          :prepend-avatar="store.getMetadata(msg.nick, 'avatar')"
-        <v-list-item-title>
+        >
-          <span
+          <v-list-item-title>
-            class="message-nick"
+            <span
-            :class="{ 'text-primary': me === msg.nick }"
+              class="message-nick font-weight-bold"
-          >
+              :class="{ 'text-primary': me === msg.nick }"
-            {{ msg.nick }}
+            >
-          </span>
+              {{ msg.nick }}
-          <span class="message-time" v-if="!!msg.time">{{
+            </span>
-            formatTime(msg.time)
+            <span class="message-time" v-if="!!msg.time">{{
-          }}</span>
+              formatTime(msg.time)
-        </v-list-item-title>
+            }}</span>
-        <v-list-item-subtitle>
+          </v-list-item-title>
           {{ msg.message }}
-        </v-list-item-subtitle>
+        </v-list-item>
-      </v-list-item>
+      </v-list>
-    </v-list>
+    </div>
   </v-sheet>
 </template>