From f86b48f43e2f58633f0cace2c3d77a93bf42a60d Mon Sep 17 00:00:00 2001
From: Sam Hoffman <sam@weller.gentoo.party>
Date: Tue, 13 Jan 2026 00:33:53 -0500
Subject: [PATCH] fix auto scroll in chat history

---
 irchad-web/src/components/MessageList.vue | 57 ++++++++++++++---------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/irchad-web/src/components/MessageList.vue b/irchad-web/src/components/MessageList.vue
index 3c67810..9bfbaf5 100644
--- a/irchad-web/src/components/MessageList.vue
+++ b/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-list>
-      <v-list-item
-        v-for="msg in messagesReverse"
-        density="compact"
-        :prepend-avatar="store.getMetadata(msg.nick, 'avatar')"
-      >
-        <v-list-item-title>
-          <span
-            class="message-nick"
-            :class="{ 'text-primary': me === msg.nick }"
-          >
-            {{ msg.nick }}
-          </span>
-          <span class="message-time" v-if="!!msg.time">{{
-            formatTime(msg.time)
-          }}</span>
-        </v-list-item-title>
-        <v-list-item-subtitle>
+  <v-sheet ref="chat-history" class="message-list d-flex">
+    <div ref="chat-scrollback">
+      <v-list>
+        <v-list-item
+          v-for="msg in messagesReverse"
+          density="compact"
+          :prepend-avatar="store.getMetadata(msg.nick, 'avatar')"
+        >
+          <v-list-item-title>
+            <span
+              class="message-nick font-weight-bold"
+              :class="{ 'text-primary': me === msg.nick }"
+            >
+              {{ msg.nick }}
+            </span>
+            <span class="message-time" v-if="!!msg.time">{{
+              formatTime(msg.time)
+            }}</span>
+          </v-list-item-title>
           {{ msg.message }}
-        </v-list-item-subtitle>
-      </v-list-item>
-    </v-list>
+        </v-list-item>
+      </v-list>
+    </div>
   </v-sheet>
 </template>