unwelcomed to Vuetify

allow changing nicks. store nick/avatar in localStorage
fix auto scroll in chat history
2026-01-13 00:34:54 -05:00 · 2026-01-13 00:34:45 -05:00 · 2026-01-13 00:33:53 -05:00
4 changed files with 74 additions and 32 deletions
--- a/irchad-web/index.html
+++ b/irchad-web/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Welcome to Vuetify 3</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>IrChad</title>
  </head>
  <body>
    <div id="app"></div>
--- 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>

--- a/irchad-web/src/components/UserCard.vue
+++ b/irchad-web/src/components/UserCard.vue
@@ -4,11 +4,12 @@ import { useIRCStore } from "@/stores/irc";
 import { storeToRefs } from "pinia";

 const { selfAvatar } = storeToRefs(useIRCStore());
-const { client, clientInfo, setAvatar, setNick } = useIRCStore();
+const { clientInfo, setAvatar, setNick } = useIRCStore();
 const avatarDialog = ref(false);
 const newNick = ref();

 function changeAvatar() {
+  newNick.value = clientInfo.nick;
  avatarDialog.value = true;
 }

@@ -16,14 +17,13 @@ function submitAvatar() {
  setAvatar(selfAvatar.value);
  avatarDialog.value = false;
  if (newNick.value && clientInfo.nick !== newNick.value) {
-    console.log("nick changed");
-    client.changeNick(newNick.value);
+    setNick(newNick.value);
  }
 }
 </script>

 <template>
-  <v-dialog v-model="avatarDialog">
+  <v-dialog v-model="avatarDialog" max-width="800px">
    <v-card title="Edit Profile">
      <v-card-text>
        <v-text-field v-model="selfAvatar" label="Avatar URL" />
--- a/irchad-web/src/stores/irc.js
+++ b/irchad-web/src/stores/irc.js
@@ -15,9 +15,34 @@ export const useIRCStore = defineStore("irc", () => {

  const selfAvatar = ref("https://placekittens.com/128/128");

+  loadPrefs();
+
  function setAvatar(v) {
    selfAvatar.value = v;
    client.raw(`METADATA * SET avatar ${selfAvatar.value}`);
+    storePrefs();
+  }
+
+  function loadPrefs() {
+    const prefs = JSON.parse(localStorage.getItem("prefs"));
+    if (!prefs) return;
+
+    if (prefs.avatar) {
+      selfAvatar.value = prefs.avatar;
+    }
+    if (prefs.nick) {
+      clientInfo.value.nick = prefs.nick;
+    }
+  }
+
+  function storePrefs() {
+    localStorage.setItem(
+      "prefs",
+      JSON.stringify({
+        nick: clientInfo.value.nick,
+        avatar: selfAvatar.value,
+      }),
+    );
  }

  function setNick(v) {
@@ -56,6 +81,7 @@ export const useIRCStore = defineStore("irc", () => {
  function connect() {
    client.requestCap("draft/metadata-2");
    client.requestCap("echo-message");
+    client.requestCap("chathistory");
    const tls = location.protocol === "https:";
    client.connect({
      ...clientInfo.value,
@@ -104,12 +130,15 @@ export const useIRCStore = defineStore("irc", () => {
  client.on("nick", function ({ nick, new_nick }) {
    if (nick === clientInfo.value.nick) {
      clientInfo.value.nick = new_nick;
+      storePrefs();
    }
    for (let buff of Object.values(buffers.value)) {
      const idx = buff.users.findIndex((u) => u.nick === nick);
      if (idx === -1) continue;
      buff.users[idx].nick = new_nick;
    }
+    metadata.value[new_nick] = { ...metadata.value[nick] };
+    delete metadata.value[nick];
  });

  client.on("unknown command", function (ircCommand) {
@@ -138,6 +167,7 @@ export const useIRCStore = defineStore("irc", () => {

  client.on("message", function (message) {
    let buffer;
+    if (message.nick === "HistServ") return;
    if (isMe(message.target)) {
      buffer = getBuffer(message.nick);
    } else {
@@ -158,6 +188,7 @@ export const useIRCStore = defineStore("irc", () => {
      if (!activeBufferName.value) {
        activeBufferName.value = channel;
      }
+      client.raw("CHATHISTORY LATEST " + channel + " * 200");
      return;
    }
Author	SHA1	Message	Date
Sam Hoffman	63cf089d27	unwelcomed to Vuetify	2026-01-13 00:34:54 -05:00
Sam Hoffman	03e95a2c69	allow changing nicks. store nick/avatar in localStorage	2026-01-13 00:34:45 -05:00
Sam Hoffman	f86b48f43e	fix auto scroll in chat history	2026-01-13 00:33:53 -05:00