feat: Add detailed logging for user profile components and image metadata extraction; enhance color handling utilities

src/util/colorMXID.js

@@ -1,5 +1,69 @@
 // https://github.com/cloudrac3r/cadencegq/blob/master/pug/mxid.pug
 
+/**
+ * Convert HSL to hex color
+ * @param {number} h - Hue (0-360)
+ * @param {number} s - Saturation (0-100)
+ * @param {number} l - Lightness (0-100)
+ * @returns {string} Hex color string
+ */
+function hslToHex(h, s, l) {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+
+  const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+  const m = lNorm - c / 2;
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (h >= 0 && h < 60) {
+    r = c; g = x; b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x; g = c; b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0; g = c; b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0; g = x; b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x; g = 0; b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c; g = 0; b = x;
+  }
+
+  const rHex = Math.round((r + m) * 255).toString(16).padStart(2, '0');
+  const gHex = Math.round((g + m) * 255).toString(16).padStart(2, '0');
+  const bHex = Math.round((b + m) * 255).toString(16).padStart(2, '0');
+
+  return `#${rHex}${gHex}${bHex}`.toUpperCase();
+}
+
+// Light theme colors: hsl(h, 100%, l)
+const LIGHT_COLORS = [
+  { h: 208, s: 100, l: 45 }, // --mx-uc-1
+  { h: 302, s: 100, l: 30 }, // --mx-uc-2
+  { h: 163, s: 100, l: 30 }, // --mx-uc-3
+  { h: 343, s: 100, l: 45 }, // --mx-uc-4
+  { h: 24, s: 100, l: 45 },  // --mx-uc-5
+  { h: 181, s: 100, l: 30 }, // --mx-uc-6
+  { h: 242, s: 100, l: 45 }, // --mx-uc-7
+  { h: 94, s: 100, l: 35 },  // --mx-uc-8
+];
+
+// Dark theme colors: hsl(h, 100%, l)
+const DARK_COLORS = [
+  { h: 208, s: 100, l: 75 }, // --mx-uc-1
+  { h: 301, s: 100, l: 80 }, // --mx-uc-2
+  { h: 163, s: 100, l: 70 }, // --mx-uc-3
+  { h: 343, s: 100, l: 75 }, // --mx-uc-4
+  { h: 24, s: 100, l: 70 },  // --mx-uc-5
+  { h: 181, s: 100, l: 60 }, // --mx-uc-6
+  { h: 243, s: 100, l: 80 }, // --mx-uc-7
+  { h: 94, s: 100, l: 80 },  // --mx-uc-8
+];
+
 function hashCode(str) {
   let hash = 0;
   let i;
@@ -22,6 +86,33 @@ export function cssColorMXID(userId) {
   return `--mx-uc-${colorNumber + 1}`;
 }
 
+/**
+ * Get the actual hex color value for a user ID
+ * @param {string} userId - Matrix user ID
+ * @param {boolean} isDark - Whether to use dark theme colors (default: auto-detect)
+ * @returns {string} Hex color string
+ */
+export function getColorMXIDValue(userId, isDark) {
+  const colorNumber = hashCode(userId) % 8;
+  
+  // Auto-detect theme if not specified
+  let useDark = isDark;
+  if (typeof isDark === 'undefined') {
+    const bodyClass = document.body.className;
+    useDark = bodyClass.includes('dark-theme') || 
+              bodyClass.includes('butter-theme') || 
+              bodyClass.includes('discord-theme') || 
+              bodyClass.includes('discord-darker-theme') || 
+              bodyClass.includes('twilight-theme') || 
+              bodyClass.includes('mocha-theme');
+  }
+  
+  const colorSet = useDark ? DARK_COLORS : LIGHT_COLORS;
+  const color = colorSet[colorNumber];
+  
+  return hslToHex(color.h, color.s, color.l);
+}
+
 export default function colorMXID(userId) {
   return `var(${cssColorMXID(userId)})`;
 }