feat(ui): match avatar color other platforms (#933)

* feat(ui): match avatar color other platforms

* Update packages/web/src/components/UI/Avatar.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update packages/web/src/components/DeviceInfoPanel.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

packages/web/src/core/utils/color.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+import {
+  getColorFromNodeNum,
+  hexToRgb,
+  isLightColor,
+  type RGBColor,
+  rgbToHex,
+} from "./color.ts";
+
+describe("hexToRgb", () => {
+  it.each([
+    [0x000000, { r: 0, g: 0, b: 0 }],
+    [0xffffff, { r: 255, g: 255, b: 255 }],
+    [0x123456, { r: 0x12, g: 0x34, b: 0x56 }],
+    [0xff8000, { r: 255, g: 128, b: 0 }],
+  ])("parses 0x%s correctly", (hex, expected) => {
+    expect(hexToRgb(hex)).toEqual(expected);
+  });
+});
+
+describe("rgbToHex", () => {
+  it.each<[RGBColor, number]>([
+    [{ r: 0, g: 0, b: 0 }, 0x000000],
+    [{ r: 255, g: 255, b: 255 }, 0xffffff],
+    [{ r: 0x12, g: 0x34, b: 0x56 }, 0x123456],
+    [{ r: 255, g: 128, b: 0 }, 0xff8000],
+  ])("packs %j into 0x%s", (rgb, expected) => {
+    expect(rgbToHex(rgb)).toBe(expected);
+  });
+
+  it("rounds component values before packing", () => {
+    expect(rgbToHex({ r: 12.2, g: 12.8, b: 99.5 })).toBe(
+      (12 << 16) | (13 << 8) | 100,
+    );
+  });
+});
+
+describe("hexToRgb ⟷ rgbToHex round-trip", () => {
+  it("is identity for representative values (masked to 24-bit)", () => {
+    const samples = [0, 1, 0x7fffff, 0x800000, 0xffffff, 0x123456, 0x00ff00];
+    for (const hex of samples) {
+      const rgb = hexToRgb(hex);
+      expect(rgbToHex(rgb)).toBe(hex & 0xffffff);
+    }
+  });
+
+  it("holds for random 24-bit values", () => {
+    for (let i = 0; i < 100; i++) {
+      const hex = Math.floor(Math.random() * 0x1000000); // 0..0xFFFFFF
+      expect(rgbToHex(hexToRgb(hex))).toBe(hex);
+    }
+  });
+});
+
+describe("isLightColor", () => {
+  it("detects obvious extremes", () => {
+    expect(isLightColor({ r: 255, g: 255, b: 255 })).toBe(true); // white
+    expect(isLightColor({ r: 0, g: 0, b: 0 })).toBe(false); // black
+  });
+
+  it("respects the 127.5 threshold at boundary", () => {
+    // mid-gray 127 → false, 128 → true (given the formula and 127.5 threshold)
+    expect(isLightColor({ r: 127, g: 127, b: 127 })).toBe(false);
+    expect(isLightColor({ r: 128, g: 128, b: 128 })).toBe(true);
+  });
+});
+
+describe("getColorFromNodeNum", () => {
+  it.each([
+    [0x000000, { r: 0, g: 0, b: 0 }],
+    [0xffffff, { r: 255, g: 255, b: 255 }],
+    [0x123456, { r: 0x12, g: 0x34, b: 0x56 }],
+  ])("extracts RGB from lower 24 bits of %s", (nodeNum, expected) => {
+    expect(getColorFromNodeNum(nodeNum)).toEqual(expected);
+  });
+
+  it("matches hexToRgb when masking to 24 bits", () => {
+    const nodeNums = [1127947528, 42, 999999, 0xfeef12, 0xfeedface, -123456];
+    for (const n of nodeNums) {
+      // JS bitwise ops use signed 32-bit, so mask the lower 24 bits for comparison.
+      const masked = n & 0xffffff;
+      expect(getColorFromNodeNum(n)).toEqual(hexToRgb(masked));
+    }
+  });
+
+  it("always yields components within 0..255", () => {
+    const color = getColorFromNodeNum(Math.floor(Math.random() * 2 ** 31));
+    for (const v of Object.values(color)) {
+      expect(v).toBeGreaterThanOrEqual(0);
+      expect(v).toBeLessThanOrEqual(255);
+    }
+  });
+});

packages/web/src/core/utils/color.ts

@@ -2,39 +2,25 @@ export interface RGBColor {
   r: number;
   g: number;
   b: number;
-  a: number;
 }
 
 export const hexToRgb = (hex: number): RGBColor => ({
   r: (hex & 0xff0000) >> 16,
   g: (hex & 0x00ff00) >> 8,
   b: hex & 0x0000ff,
-  a: 255,
 });
 
 export const rgbToHex = (c: RGBColor): number =>
-  (Math.round(c.a) << 24) |
-  (Math.round(c.r) << 16) |
-  (Math.round(c.g) << 8) |
-  Math.round(c.b);
+  (Math.round(c.r) << 16) | (Math.round(c.g) << 8) | Math.round(c.b);
 
 export const isLightColor = (c: RGBColor): boolean =>
   (c.r * 299 + c.g * 587 + c.b * 114) / 1000 > 127.5;
 
-export const getColorFromText = (text: string): RGBColor => {
-  if (!text) {
-    return { r: 0, g: 0, b: 0, a: 255 };
-  }
+export const getColorFromNodeNum = (nodeNum: number): RGBColor => {
+  // Extract RGB values directly from nodeNum (treated as hex color)
+  const r = (nodeNum & 0xff0000) >> 16;
+  const g = (nodeNum & 0x00ff00) >> 8;
+  const b = nodeNum & 0x0000ff;
 
-  let hash = 0;
-  for (let i = 0; i < text.length; i++) {
-    hash = text.charCodeAt(i) + ((hash << 5) - hash);
-    hash |= 0; // force 32‑bit
-  }
-  return {
-    r: (hash & 0xff0000) >> 16,
-    g: (hash & 0x00ff00) >> 8,
-    b: hash & 0x0000ff,
-    a: 255,
-  };
+  return { r, g, b };
 };