Listen for username color tags on messages

- In addition to tagmsg, check tags on messages (PRIVMSG, ACTION, NOTICE) for username colors
- Add named colors and test to ensure color values are accessible

Author: MarkH817

src/stores/user-list.ts

@@ -1,7 +1,7 @@
 import { ANONYMOUS_USER, DEFAULT_COLORS } from '#constants';
 import type { User } from '#models';
 import { getUserProfile } from '#services';
-import { isValidHexColor, parseNick, parseUid } from '#utils';
+import { isAccessibleHexColor, parseNick, parseUid } from '#utils';
 import log from 'loglevel';
 import { defineStore } from 'pinia';
 import { computed, reactive, readonly, watch } from 'vue';
@@ -88,7 +88,10 @@ const useUserListStore = defineStore('userList', () => {
     user.awayReason = '';
   }
 
-  function updateUserColor(nick: string, color: string) {
+  function updateUserColor(nick: string, color?: string) {
+    if (typeof color !== 'string' || !isAccessibleHexColor(color)) {
+      return;
+    }
     const username = parseNick(nick);
     const user = knownUsers.get(username);
     if (!user) {
@@ -152,11 +155,10 @@ const useUserListStore = defineStore('userList', () => {
         .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);
-          }
+          updateUserColor(event.nick, event.tags['+color']);
+        })
+        .on('message', (event) => {
+          updateUserColor(event.nick, event.tags['+color']);
         });
     },
   );

src/utils/colors.spec.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest';
+import { isAccessibleHexColor, NAMED_COLORS } from './colors';
+
+describe('colors', () => {
+  it('ensures all named colors are accessible', () => {
+    for (const [name, hexValue] of Object.entries(NAMED_COLORS)) {
+      // oxlint-disable-next-line jest/valid-expect Vitest allows a second argument for error messages
+      expect(isAccessibleHexColor(hexValue), `${name} is not accessible`).toBe(true);
+    }
+  });
+});

src/utils/colors.ts

@@ -16,16 +16,28 @@ export function brightness(r: number, g: number, b: number) {
 
 const BACKGROUND_VALUE = brightness(4, 52, 104);
 /** Determines whether color contrasts well with background */
-export function isValidColor(r: number, g: number, b: number) {
+export function isAccessibleColor(r: number, g: number, b: number) {
   const colorValue = brightness(r, g, b);
   return Math.abs((colorValue + 0.05) / (BACKGROUND_VALUE + 0.05)) > 4;
 }
 
-/** See {@link isValidColor} */
-export function isValidHexColor(hex: string) {
-  if (hex.length !== 7) {
+/** See {@link isAccessibleColor} */
+export function isAccessibleHexColor(hex: string) {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) {
     return false;
   }
   const { r, g, b } = hexToRGB(hex);
-  return isValidColor(r, g, b);
+  return isAccessibleColor(r, g, b);
+}
+
+export const NAMED_COLORS: Record<string, string> = {
+  orange: '#ffb400',
+  yellow: '#ffff00',
+  blue: '#00f8ff',
+  green: '#53ff00',
+  purple: '#ff76ff',
+};
+
+export function getNamedColor(colorName: string): string | null {
+  return NAMED_COLORS[colorName] ?? null;
 }