Add favourite icon to node Avatar

src/components/PageComponents/Messages/MessageItem.tsx

@@ -87,14 +87,20 @@ export const MessageItem = ({ message }: MessageItemProps) => {
   }, [getNode, message.from]);
 
   const myNodeNum = useMemo(() => getMyNodeNum(), [getMyNodeNum]);
-  const { displayName, shortName } = useMemo(() => {
+  const { displayName, shortName, isFavorite } = useMemo(() => {
     const userIdHex = message.from.toString(16).toUpperCase().padStart(2, "0");
     const last4 = userIdHex.slice(-4);
     const fallbackName = `Meshtastic ${last4}`;
     const longName = messageUser?.user?.longName;
     const derivedShortName = messageUser?.user?.shortName || fallbackName;
     const derivedDisplayName = longName || derivedShortName;
-    return { displayName: derivedDisplayName, shortName: derivedShortName };
+    const isFavorite = messageUser?.num !== myNodeNum &&
+      messageUser?.isFavorite;
+    return {
+      displayName: derivedDisplayName,
+      shortName: derivedShortName,
+      isFavorite: isFavorite,
+    };
   }, [messageUser, message.from]);
 
   const messageStatusInfo = getMessageStatusInfo(message.state);
@@ -140,7 +146,12 @@ export const MessageItem = ({ message }: MessageItemProps) => {
   return (
     <li className={messageItemWrapperClass}>
       <div className="grid grid-cols-[auto_1fr] gap-x-2">
-        <Avatar size="sm" text={shortName} className="pt-0.5" />
+        <Avatar
+          size="sm"
+          text={shortName}
+          className="pt-0.5"
+          showFavourite={isFavorite}
+        />
 
         <div className="flex flex-col gap-0.5 min-w-0">
           <div className="flex items-center gap-1.5">

src/components/UI/Avatar.tsx

@@ -1,5 +1,12 @@
 import { cn } from "@core/utils/cn.ts";
-import { LockKeyholeOpenIcon } from "lucide-react";
+import { LockKeyholeOpenIcon, StarIcon } from "lucide-react";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@components/UI/Tooltip.tsx";
 
 type RGBColor = {
   r: number;
@@ -13,6 +20,7 @@ interface AvatarProps {
   size?: "sm" | "lg";
   className?: string;
   showError?: boolean;
+  showFavourite?: boolean;
 }
 
 class ColorUtils {
@@ -62,6 +70,7 @@ export const Avatar = ({
   text,
   size = "sm",
   showError = false,
+  showFavourite = false,
   className,
 }: AvatarProps) => {
   const sizes = {
@@ -88,12 +97,43 @@ export const Avatar = ({
         color: textColor,
       }}
     >
+      {showFavourite
+        ? (
+          <TooltipProvider delayDuration={300}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <StarIcon
+                  className="absolute -top-0.5 -right-0.5 z-10 size-4 stroke-1 fill-yellow-400"
+                  aria-hidden="true"
+                  style={{
+                    color: `rgb(${bgColor.r}, ${bgColor.g}, ${bgColor.b})`,
+                  }}
+                />
+              </TooltipTrigger>
+              <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
+                Favourite
+                <TooltipArrow className="fill-slate-800" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )
+        : null}
       {showError
         ? (
-          <LockKeyholeOpenIcon
+          <TooltipProvider delayDuration={300}>
-            className="absolute bottom-0 right-0 z-10 size-4 text-red-500 stroke-3"
+            <Tooltip>
-            aria-hidden="true"
+              <TooltipTrigger asChild>
-          />
+                <LockKeyholeOpenIcon
+                  className="absolute -bottom-0.5 -right-0.5 z-10 size-4 text-red-500 stroke-3"
+                  aria-hidden="true"
+                />
+              </TooltipTrigger>
+              <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
+                Node error
+                <TooltipArrow className="fill-slate-800" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )
         : null}
       <p className="p-1">

src/pages/Map/index.tsx

@@ -35,7 +35,7 @@ const convertToLatLng = (position: {
 });
 
 const MapPage = () => {
-  const { getNodes, waypoints } = useDevice();
+  const { getNodes, waypoints, hasNodeError } = useDevice();
   const { theme } = useTheme();
   const { default: map } = useMap();
 
@@ -146,6 +146,8 @@ const MapPage = () => {
             <Avatar
               text={node.user?.shortName?.toString() ?? node.num.toString()}
               className="border-[1.5px] border-slate-600 shadow-xl shadow-slate-600"
+              showError={hasNodeError(node.num)}
+              showFavourite={node.isFavorite}
             />
           </Marker>
         );

src/pages/Messages.tsx

@@ -239,6 +239,7 @@ export const MessagesPage = () => {
                 text={node.user?.shortName ?? "UNK"}
                 className={cn(hasNodeError(node.num) && "text-red-500")}
                 showError={hasNodeError(node.num)}
+                showFavourite={node.isFavorite}
                 size="sm"
               />
             </SidebarButton>

src/pages/Nodes.tsx

@@ -27,7 +27,7 @@ export interface DeleteNoteDialogProps {
 }
 
 const NodesPage = (): JSX.Element => {
-  const { getNodes, hardware, connection } = useDevice();
+  const { getNodes, hardware, connection, hasNodeError } = useDevice();
   const [selectedNode, setSelectedNode] = useState<
     Protobuf.Mesh.NodeInfo | undefined
   >(undefined);
@@ -110,7 +110,11 @@ const NodesPage = (): JSX.Element => {
             ]}
             rows={filteredNodes.map((node) => [
               <div key={node.num}>
-                <Avatar text={node.user?.shortName ?? "UNK "} />
+                <Avatar
+                  text={node.user?.shortName ?? "UNK "}
+                  showFavourite={node.isFavorite}
+                  showError={hasNodeError(node.num)}
+                />
               </div>,
               <h1
                 key="longName"