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/components/CommandPalette/index.tsx

@@ -126,14 +126,7 @@ export const CommandPalette = () => {
             label:
               getNode(device.hardware.myNodeNum)?.user?.longName ??
               t("unknown.shortName"),
-            icon: (
-              <Avatar
-                text={
-                  getNode(device.hardware.myNodeNum)?.user?.shortName ??
-                  t("unknown.shortName")
-                }
-              />
-            ),
+            icon: <Avatar nodeNum={device.hardware.myNodeNum} />,
             action() {
               setSelectedDevice(device.id);
             },

packages/web/src/components/DeviceInfoPanel.tsx

@@ -1,5 +1,6 @@
 import type { ConnectionStatus } from "@app/core/stores/deviceStore/types.ts";
 import { cn } from "@core/utils/cn.ts";
+import type { Protobuf } from "@meshtastic/core";
 import { useNavigate } from "@tanstack/react-router";
 import {
   ChevronRight,
@@ -25,10 +26,7 @@ interface DeviceInfoPanelProps {
   isCollapsed: boolean;
   deviceMetrics: DeviceMetrics;
   firmwareVersion: string;
-  user: {
-    shortName: string;
-    longName: string;
-  };
+  user: Protobuf.Mesh.User;
   setDialogOpen: () => void;
   setCommandPaletteOpen: () => void;
   disableHover?: boolean;
@@ -144,7 +142,7 @@ export const DeviceInfoPanel = ({
         )}
       >
         <Avatar
-          text={user.shortName}
+          nodeNum={parseInt(user.id.slice(1), 16)}
           className={cn("flex-shrink-0", isCollapsed && "")}
           size="sm"
         />

packages/web/src/components/PageComponents/Map/Layers/PrecisionLayer.tsx

@@ -1,7 +1,6 @@
-import { getColorFromText, isLightColor } from "@app/core/utils/color";
+import { getColorFromNodeNum, isLightColor } from "@app/core/utils/color";
 import { precisionBitsToMeters, toLngLat } from "@core/utils/geo.ts";
 import type { Protobuf } from "@meshtastic/core";
-import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { circle } from "@turf/turf";
 import type { Feature, FeatureCollection, Polygon } from "geojson";
 import { Layer, Source } from "react-map-gl/maplibre";
@@ -46,10 +45,7 @@ export function generatePrecisionCircles(
     const [lng, lat] = toLngLat(node.position);
     const radiusM = precisionBitsToMeters(node.position?.precisionBits ?? 0);
 
-    const safeText =
-      node.user?.shortName ??
-      numberToHexUnpadded(node.num).slice(-4).toUpperCase();
-    const color = getColorFromText(safeText);
+    const color = getColorFromNodeNum(node.num);
     const isLight = isLightColor(color);
 
     const key = `${lat},${lng}:${radiusM}`;

packages/web/src/components/PageComponents/Map/Markers/NodeMarker.tsx

@@ -68,7 +68,7 @@ export const NodeMarker = memo(function NodeMarker({
               onClick={(e) => onClick(id, { originalEvent: e.nativeEvent })}
             >
               <Avatar
-                text={label}
+                nodeNum={id}
                 className={cn(
                   "border-[1.5px] border-slate-600 shadow-m shadow-slate-600",
                   avatarClassName,

packages/web/src/components/PageComponents/Map/Popups/NodeDetail.tsx

@@ -52,7 +52,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
     <div className="p-1 text-slate-900">
       <div className="flex gap-2">
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
-          <Avatar text={shortName} size="sm" />
+          <Avatar nodeNum={node.num} size="sm" />
 
           <div
             onFocusCapture={(e) => {

packages/web/src/components/PageComponents/Messages/MessageItem.tsx

@@ -144,7 +144,7 @@ export const MessageItem = ({ message }: MessageItemProps) => {
     return message.from != null ? getNode(message.from) : null;
   }, [getNode, message.from]);
 
-  const { displayName, shortName, isFavorite } = useMemo(() => {
+  const { displayName, isFavorite, nodeNum } = useMemo(() => {
     const userIdHex = message.from.toString(16).toUpperCase().padStart(2, "0");
     const last4 = userIdHex.slice(-4);
     const fallbackName = t("fallbackName", { last4 });
@@ -157,6 +157,7 @@ export const MessageItem = ({ message }: MessageItemProps) => {
       displayName: derivedDisplayName,
       shortName: derivedShortName,
       isFavorite: isFavorite,
+      nodeNum: message.from,
     };
   }, [messageUser, message.from, t, myNodeNum]);
 
@@ -205,7 +206,7 @@ export const MessageItem = ({ message }: MessageItemProps) => {
       <div className="grid grid-cols-[auto_1fr] gap-x-2">
         <Avatar
           size="sm"
-          text={shortName}
+          nodeNum={nodeNum}
           className="pt-0.5"
           showFavorite={isFavorite}
         />

packages/web/src/components/Sidebar.tsx

@@ -204,10 +204,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
             isCollapsed={isCollapsed}
             setCommandPaletteOpen={() => setCommandPaletteOpen(true)}
             setDialogOpen={() => setDialogOpen("deviceName", true)}
-            user={{
-              longName: myNode?.user?.longName ?? t("unknown.longName"),
-              shortName: myNode?.user?.shortName ?? t("unknown.shortName"),
-            }}
+            user={myNode.user}
             firmwareVersion={
               myMetadata?.firmwareVersion ?? t("unknown.notAvailable")
             }

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

@@ -1,4 +1,5 @@
-import { getColorFromText, isLightColor } from "@app/core/utils/color";
+import { useNodeDB } from "@app/core/stores";
+import { getColorFromNodeNum, isLightColor } from "@app/core/utils/color";
 import {
   Tooltip,
   TooltipArrow,
@@ -11,7 +12,7 @@ import { LockKeyholeOpenIcon, StarIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 interface AvatarProps {
-  text: string | number;
+  nodeNum: number;
   size?: "sm" | "lg";
   className?: string;
   showError?: boolean;
@@ -19,24 +20,33 @@ interface AvatarProps {
 }
 
 export const Avatar = ({
-  text,
+  nodeNum,
   size = "sm",
   showError = false,
   showFavorite = false,
   className,
 }: AvatarProps) => {
   const { t } = useTranslation();
+  const { getNode } = useNodeDB();
+  const node = getNode(nodeNum);
+
+  if (!nodeNum) {
+    return null;
+  }
 
   const sizes = {
     sm: "size-10 text-xs font-light",
     lg: "size-16 text-lg",
   };
 
-  const safeText = text?.toString().toUpperCase();
-  const bgColor = getColorFromText(safeText);
+  const shortName = node?.user?.shortName ?? "";
+  const longName = node?.user?.longName ?? "";
+  const displayName = shortName || longName;
+
+  const bgColor = getColorFromNodeNum(nodeNum);
   const isLight = isLightColor(bgColor);
   const textColor = isLight ? "#000000" : "#FFFFFF";
-  const initials = safeText?.slice(0, 4) ?? t("unknown.shortName");
+  const initials = displayName.slice(0, 4) || t("unknown.shortName");
 
   return (
     <div