allow changing nicks. store nick/avatar in localStorage

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");
+    setNick(newNick.value);
-    client.changeNick(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" />

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;
     }