Use message tags data in messages and user colors

Author: MarkH817

src/models/message.ts

@@ -1,11 +1,14 @@
-export type MessageType = 'message' | 'action' | 'system';
+import type { Tags } from 'irc-framework';
+
+export type MessageType = 'privmsg' | 'action' | 'notice' | 'system';
 
 export interface Message {
-  time: Date;
+  id: string;
+  time: number;
   starred: boolean;
   message: string;
   target: string;
   nick: string;
   type: MessageType;
-  tags: Record<string, string>;
+  tags: Tags;
 }

src/stores/channel.ts

@@ -47,7 +47,7 @@ const useChannelStore = defineStore('channel', () => {
     }
     const newChannel = irc.client.channel(channel);
     newChannel.updateUsers();
-    getChannel(channel);
+    changeActiveChannel(channel);
   }
   function leaveChannel(channel: string) {
     if (!irc.client) {
@@ -63,19 +63,17 @@ const useChannelStore = defineStore('channel', () => {
     const channel = getChannel(channelName);
     channel.hasNotification = true;
 
-    try {
-      const notification = await notifications.sendNotification(
-        `New message in ${channel.name}`,
-        `${user.username}: ${message.message}`,
-        `new-message-${message.target}`,
-      );
-      notification?.addEventListener('click', () => {
-        // View channel if notification is clicked
+    notifications.sendNotification(
+      {
+        title: `New message in ${channel.name}`,
+        body: `${user.username}: ${message.message}`,
+        tag: `new-message-${message.target}`,
+      },
+      () => {
+        // Open channel if notification is clicked
         changeActiveChannel(channel.name);
-      });
-    } catch (err) {
-      log.error('Notification error:', err);
-    }
+      },
+    );
   }
 
   function markAsRead(channelName: string) {
@@ -105,13 +103,16 @@ const useChannelStore = defineStore('channel', () => {
       }
 
       client
-        .on('action', (event) => {
-          log.debug('Action', event);
-          // TODO: Use typing client-tag
+        .on('tagmsg', (event) => {
+          log.debug('TAGMSG', event);
+          // TODO: Use '+typing' client-tag
           // See https://ircv3.net/specs/client-tags/typing
         })
+        .on('action', (event) => {
+          log.debug('ACTION', event);
+        })
         .on('notice', (event) => {
-          log.debug('Notice', event);
+          log.debug('NOTICE', event);
         })
         .on('privmsg', (event) => {
           log.debug('PRIVMSG', event);
@@ -123,17 +124,19 @@ const useChannelStore = defineStore('channel', () => {
 
           const highlightedMessage = highlightKeywords(message);
           const newMessage: Message = {
-            // TODO: Read from server time, if available
-            time: new Date(),
+            id: event.tags.msgid ?? crypto.randomUUID(),
+            time: event.time ?? Date.now(),
             starred: false,
             message: highlightedMessage,
             target,
             nick,
-            type: 'message',
+            type: 'privmsg',
             tags: tags ?? {},
           };
-          // TODO: Cap messages per channel (50)
-          log.debug(newMessage);
+          // TODO: Cap messages per channel (100)
+          // TODO: Sort-insert messages based on `time` value
+          // TODO: Prevent duplicate message insertions with `id` value
+          log.debug('new message:', newMessage);
           channel.messages.push(newMessage);
 
           // If the user has allows for notifications on channel or keywords

src/stores/notifications.ts

@@ -1,4 +1,4 @@
-import { useLocalStorage, useWebNotification } from '@vueuse/core';
+import { useLocalStorage, useWebNotification, type WebNotificationOptions } from '@vueuse/core';
 import log from 'loglevel';
 import { defineStore } from 'pinia';
 import { computed } from 'vue';
@@ -38,13 +38,22 @@ const useNotificationsStore = defineStore('notifications', () => {
   }
 
   /** Sends device notification only if granted permission */
-  async function sendNotification(title: string, body: string, tag: string) {
+  async function sendNotification(
+    { title, body, tag }: WebNotificationOptions,
+    onClick?: () => void,
+  ) {
     if (!notificationsEnabled.value) {
-      return null;
+      return;
     }
 
-    const notification = await show({ title, body, tag });
-    return notification ?? null;
+    try {
+      const notification = await show({ title, body, tag });
+      if (notification && onClick) {
+        notification.addEventListener('click', onClick);
+      }
+    } catch (error) {
+      log.error('Notification error', error);
+    }
   }
 
   return {

src/stores/user-list.ts

@@ -1,11 +1,11 @@
 import { ANONYMOUS_USER, DEFAULT_COLORS } from '#constants';
 import type { User } from '#models';
-import { parseNick, parseUid } from '#utils';
+import { getUserProfile } from '#services';
+import { isValidHexColor, parseNick, parseUid } from '#utils';
 import log from 'loglevel';
 import { defineStore } from 'pinia';
 import { computed, reactive, readonly, watch } from 'vue';
 import useIrcStore from './irc';
-import { getUserProfile as fetchUserProfile } from '#services';
 
 const useUserListStore = defineStore('userList', () => {
   const irc = useIrcStore();
@@ -88,6 +88,16 @@ const useUserListStore = defineStore('userList', () => {
     user.awayReason = '';
   }
 
+  function updateUserColor(nick: string, color: string) {
+    const username = parseNick(nick);
+    const user = knownUsers.get(username);
+    if (!user) {
+      log.warn(`Tried to update color for user "${nick}", but they weren't in the user list.`);
+      return;
+    }
+    user.color = color;
+  }
+
   async function loadProfile(nick: string) {
     const username = parseNick(nick);
     const user = knownUsers.get(username);
@@ -97,7 +107,7 @@ const useUserListStore = defineStore('userList', () => {
 
     user.isFetchingProfile = true;
     try {
-      const profile = await fetchUserProfile(user.uid);
+      const profile = await getUserProfile(user.uid);
       user.profile = profile;
     } catch (error) {
       log.error(error);
@@ -138,6 +148,15 @@ const useUserListStore = defineStore('userList', () => {
             return;
           }
           setUserBack(event.nick);
+        })
+        .on('tagmsg', (event) => {
+          // Using '+color' client-tag for updating username color
+          // See https://ircv3.net/specs/extensions/message-tags
+          const nick = event.nick;
+          const color = event.tags['+color'];
+          if (typeof color === 'string' && isValidHexColor(color)) {
+            updateUserColor(nick, color);
+          }
         });
     },
   );