Feature: Node favourites (and ignores) (#618)

* Add favourite icon to node Avatar * Favourites WIP * Save isFavorite and isIgnored to device * Fix spelling * Clean up * Always sort favorites first * Add unread count to "Messages" top level menu * Renaming, UI tweaks * Add hook tests * Handle undefined node better
2025-05-13 08:45:24 -04:00
parent b2bb3baa01
commit 513a285fee
15 changed files with 699 additions and 256 deletions
@@ -1,18 +1,22 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { NodeDetailsDialog } from "@components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx";
-import { useDevice } from "@core/stores/deviceStore.ts";
 import { useAppStore } from "@core/stores/appStore.ts";
 import { Protobuf } from "@meshtastic/core";

-vi.mock("@core/stores/deviceStore");
+vi.mock("@core/stores/deviceStore", () => {
+  return {
+    useDevice: () => ({
+      setDialogOpen: vi.fn(),
+    }),
+  };
+});
 vi.mock("@core/stores/appStore");

-const mockUseDevice = vi.mocked(useDevice);
 const mockUseAppStore = vi.mocked(useAppStore);

 describe("NodeDetailsDialog", () => {
-  const mockDevice = {
+  const mockNode = {
    num: 1234,
    user: {
      longName: "Test Node",
@@ -38,22 +42,13 @@ describe("NodeDetailsDialog", () => {
  beforeEach(() => {
    vi.resetAllMocks();

-    mockUseDevice.mockReturnValue({
-      getNode: (nodeNum: number) => {
-        if (nodeNum === 1234) {
-          return mockDevice;
-        }
-        return undefined;
-      },
-    });
-
    mockUseAppStore.mockReturnValue({
      nodeNumDetails: 1234,
    });
  });

  it("renders node details correctly", () => {
-    render(<NodeDetailsDialog open onOpenChange={() => {}} />);
+    render(<NodeDetailsDialog open node={mockNode} onOpenChange={() => {}} />);

    expect(screen.getByText(/Node Details for Test Node \(TN\)/i))
      .toBeInTheDocument();
@@ -82,27 +77,11 @@ describe("NodeDetailsDialog", () => {
    expect(screen.getByText(/All Raw Metrics:/i)).toBeInTheDocument();
  });

-  it("renders null if device is not found", () => {
-    const requestedNodeNum = 5678;
-
-    mockUseAppStore.mockReturnValue({
-      nodeNumDetails: requestedNodeNum,
-    });
-
-    mockUseDevice.mockReturnValue({
-      getNode: (nodeNum: number) => {
-        if (nodeNum === requestedNodeNum) {
-          return undefined;
-        }
-        if (nodeNum === 1234) {
-          return mockDevice;
-        }
-        return undefined;
-      },
-    });
+  it("renders null if node is undefined", () => {
+    const mockNode = undefined;

    const { container } = render(
-      <NodeDetailsDialog open onOpenChange={() => {}} />,
+      <NodeDetailsDialog open node={mockNode} onOpenChange={() => {}} />,
    );

    expect(container.firstChild).toBeNull();
@@ -110,11 +89,15 @@ describe("NodeDetailsDialog", () => {
  });

  it("renders correctly when position is missing", () => {
-    const nodeWithoutPosition = { ...mockDevice, position: undefined };
-    mockUseDevice.mockReturnValue({ getNode: () => nodeWithoutPosition });
-    mockUseAppStore.mockReturnValue({ nodeNumDetails: 1234 });
+    const nodeWithoutPosition = { ...mockNode, position: undefined };

-    render(<NodeDetailsDialog open onOpenChange={() => {}} />);
+    render(
+      <NodeDetailsDialog
+        open
+        node={nodeWithoutPosition}
+        onOpenChange={() => {}}
+      />,
+    );

    expect(screen.queryByText(/Coordinates:/i)).not.toBeInTheDocument();
    expect(screen.queryByText(/Altitude:/i)).not.toBeInTheDocument();
@@ -122,11 +105,15 @@ describe("NodeDetailsDialog", () => {
  });

  it("renders correctly when deviceMetrics are missing", () => {
-    const nodeWithoutMetrics = { ...mockDevice, deviceMetrics: undefined };
-    mockUseDevice.mockReturnValue({ getNode: () => nodeWithoutMetrics });
-    mockUseAppStore.mockReturnValue({ nodeNumDetails: 1234 });
+    const nodeWithoutMetrics = { ...mockNode, deviceMetrics: undefined };

-    render(<NodeDetailsDialog open onOpenChange={() => {}} />);
+    render(
+      <NodeDetailsDialog
+        open
+        node={nodeWithoutMetrics}
+        onOpenChange={() => {}}
+      />,
+    );

    expect(screen.queryByText(/Device Metrics:/i)).not.toBeInTheDocument();
    expect(screen.queryByText(/Air TX utilization:/i)).not.toBeInTheDocument();
@@ -134,11 +121,11 @@ describe("NodeDetailsDialog", () => {
  });

  it("renders 'Never' for lastHeard when timestamp is 0", () => {
-    const nodeNeverHeard = { ...mockDevice, lastHeard: 0 };
-    mockUseDevice.mockReturnValue({ getNode: () => nodeNeverHeard });
-    mockUseAppStore.mockReturnValue({ nodeNumDetails: 1234 });
+    const nodeNeverHeard = { ...mockNode, lastHeard: 0 };

-    render(<NodeDetailsDialog open onOpenChange={() => {}} />);
+    render(
+      <NodeDetailsDialog open node={nodeNeverHeard} onOpenChange={() => {}} />,
+    );

    expect(screen.getByText(/Last Heard: Never/i)).toBeInTheDocument();
  });
@@ -1,5 +1,21 @@
+import { useEffect, useState } from "react";
+
 import { useAppStore } from "@core/stores/appStore.ts";
 import { useDevice } from "@core/stores/deviceStore.ts";
+import {
+  MessageType,
+  useMessageStore,
+} from "@core/stores/messageStore/index.ts";
+import { Protobuf } from "@meshtastic/core";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import { DeviceImage } from "@components/generic/DeviceImage.tsx";
+import { TimeAgo } from "@components/generic/TimeAgo.tsx";
+import { Uptime } from "@components/generic/Uptime.tsx";
+import { toast } from "@core/hooks/useToast.ts";
+import { useFavoriteNode } from "../../../core/hooks/useFavoriteNode.ts";
+import { useIgnoreNode } from "../../../core/hooks/useIgnoreNode.ts";
+import { cn } from "@core/utils/cn.ts";
+
 import {
  Accordion,
  AccordionContent,
@@ -14,51 +30,135 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@components/UI/Dialog.tsx";
-import { Protobuf } from "@meshtastic/core";
-import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
-import { DeviceImage } from "@components/generic/DeviceImage.tsx";
-import { TimeAgo } from "@components/generic/TimeAgo.tsx";
-import { Uptime } from "@components/generic/Uptime.tsx";
+import { Button } from "@components/UI/Button.tsx";
+import {
+  BellIcon,
+  BellOffIcon,
+  MapPinnedIcon,
+  MessageSquareIcon,
+  StarIcon,
+  TrashIcon,
+  WaypointsIcon,
+} from "lucide-react";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@components/UI/Tooltip.tsx";
+import { Separator } from "@components/UI/Seperator.tsx";

 export interface NodeDetailsDialogProps {
+  node: Protobuf.Mesh.NodeInfo | undefined;
  open: boolean;
  onOpenChange: (open: boolean) => void;
 }

 export const NodeDetailsDialog = ({
+  node,
  open,
  onOpenChange,
 }: NodeDetailsDialogProps) => {
-  const { getNode } = useDevice();
-  const { nodeNumDetails } = useAppStore();
+  const { setDialogOpen, connection, setActivePage } = useDevice();
+  const { setNodeNumToBeRemoved } = useAppStore();
+  const { setChatType, setActiveChat } = useMessageStore();

-  const device = getNode(nodeNumDetails);
+  const { updateFavorite } = useFavoriteNode();
+  const [isFavoriteState, setIsFavoriteState] = useState<boolean>(false);

-  if (!device) return null;
+  const { updateIgnored } = useIgnoreNode();
+  const [isIgnoredState, setIsIgnoredState] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!node) return;
+    setIsFavoriteState(node?.isFavorite);
+    setIsIgnoredState(node?.isIgnored);
+  }, [node]);
+
+  if (!node) return;
+
+  function handleDirectMessage() {
+    if (!node) return;
+
+    setChatType(MessageType.Direct);
+    setActiveChat(node.num);
+    setActivePage("messages");
+  }
+
+  function handleRequestPosition() {
+    if (!node) return;
+
+    toast({
+      title: "Requesting position, please wait...",
+    });
+    connection?.requestPosition(node.num).then(() =>
+      toast({
+        title: "Position request sent.",
+      })
+    );
+    onOpenChange(false);
+  }
+
+  function handleTraceroute() {
+    if (!node) return;
+
+    toast({
+      title: "Sending Traceroute, please wait...",
+    });
+    connection?.traceRoute(node.num).then(() =>
+      toast({
+        title: "Traceroute sent.",
+      })
+    );
+    onOpenChange(false);
+  }
+
+  function handleNodeRemove() {
+    if (!node) return;
+
+    setNodeNumToBeRemoved(node?.num);
+    setDialogOpen("nodeRemoval", true);
+    onOpenChange(false);
+  }
+
+  function handleToggleFavorite() {
+    if (!node) return;
+
+    updateFavorite({ nodeNum: node.num, isFavorite: !isFavoriteState });
+    setIsFavoriteState(!isFavoriteState);
+  }
+
+  function handleToggleIgnored() {
+    if (!node) return;
+
+    updateIgnored({ nodeNum: node.num, isIgnored: !isIgnoredState });
+    setIsIgnoredState(!isIgnoredState);
+  }

  const deviceMetricsMap = [
    {
      key: "airUtilTx",
      label: "Air TX utilization",
-      value: device.deviceMetrics?.airUtilTx,
+      value: node.deviceMetrics?.airUtilTx,
      format: (val: number) => `${val.toFixed(2)}%`,
    },
    {
      key: "channelUtilization",
      label: "Channel utilization",
-      value: device.deviceMetrics?.channelUtilization,
+      value: node.deviceMetrics?.channelUtilization,
      format: (val: number) => `${val.toFixed(2)}%`,
    },
    {
      key: "batteryLevel",
      label: "Battery level",
-      value: device.deviceMetrics?.batteryLevel,
+      value: node.deviceMetrics?.batteryLevel,
      format: (val: number) => `${val.toFixed(2)}%`,
    },
    {
      key: "voltage",
      label: "Voltage",
-      value: device.deviceMetrics?.voltage,
+      value: node.deviceMetrics?.voltage,
      format: (val: number) => `${val.toFixed(2)}V`,
    },
  ];
@@ -69,64 +169,141 @@ export const NodeDetailsDialog = ({
        <DialogClose />
        <DialogHeader>
          <DialogTitle>
-            Node Details for {device.user?.longName ?? "UNKNOWN"} (
-            {device.user?.shortName ?? "UNK"})
+            Node Details for {node.user?.longName ?? "UNKNOWN"} (
+            {node.user?.shortName ?? "UNK"})
          </DialogTitle>
        </DialogHeader>
        <DialogFooter>
          <div className="w-full">
-            <div className="flex flex-col">
-              <DeviceImage
-                className="w-32 h-32 mx-auto rounded-lg border-4 border-slate-200 dark:border-slate-800"
-                deviceType={Protobuf.Mesh
-                  .HardwareModel[device.user?.hwModel ?? 0]}
-              />
-              <div className="bg-slate-100 text-slate-900 dark:text-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-                <p className="text-lg font-semibold">Details:</p>
-                <p>
-                  Hardware:{" "}
-                  {Protobuf.Mesh.HardwareModel[device.user?.hwModel ?? 0]}
-                </p>
-                <p>Node Number: {device.num}</p>
-                <p>Node Hex: !{numberToHexUnpadded(device.num)}</p>
-                <p>
-                  Role: {Protobuf.Config.Config_DeviceConfig_Role[
-                    device.user?.role ?? 0
-                  ]}
-                </p>
-                <p>
-                  Last Heard: {device.lastHeard === 0
-                    ? "Never"
-                    : <TimeAgo timestamp={device.lastHeard * 1000} />}
-                </p>
+            <div className="flex flex-row flex-wrap space-y-1">
+              <Button className="mr-1" onClick={handleDirectMessage}>
+                <MessageSquareIcon className="mr-2" />
+                Message
+              </Button>
+              <Button className="mr-1" onClick={handleTraceroute}>
+                <WaypointsIcon className="mr-2" />
+                Trace Route
+              </Button>
+              <Button className="mr-1" onClick={handleToggleFavorite}>
+                <StarIcon
+                  className={cn(
+                    isFavoriteState ? " fill-yellow-400 stroke-yellow-400" : "",
+                  )}
+                />
+              </Button>
+              <div className="flex flex-1 justify-start"></div>
+
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      className={cn(
+                        "flex justify-end mr-1 text-white",
+                        isIgnoredState
+                          ? "bg-red-500 dark:bg-red-500 hover:bg-red-600 hover:dark:bg-red-600 text-white dark:text-white"
+                          : "",
+                      )}
+                      onClick={handleToggleIgnored}
+                    >
+                      {isIgnoredState ? <BellIcon /> : <BellOffIcon />}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
+                    {isIgnoredState ? "Unignore node" : "Ignore node"}
+                    <TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="destructive"
+                      className="flex justify-end"
+                      onClick={handleNodeRemove}
+                    >
+                      <TrashIcon />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
+                    Remove node
+                    <TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+
+            <Separator className="mt-5 mb-2" />
+
+            <div className="flex flex-col flex-wrap space-x-1 space-y-1">
+              <div className="flex flex-row space-x-2">
+                <div className="w-full bg-slate-100 text-slate-900 dark:text-slate-100 dark:bg-slate-800 p-3  rounded-lg">
+                  <p className="text-lg font-semibold">Details:</p>
+                  <p>Node Number: {node.num}</p>
+                  <p>Node Hex: !{numberToHexUnpadded(node.num)}</p>
+                  <p>
+                    Role: {Protobuf.Config.Config_DeviceConfig_Role[
+                      node.user?.role ?? 0
+                    ].replace(/_/g, " ")}
+                  </p>
+                  <p>
+                    Last Heard: {node.lastHeard === 0
+                      ? "Never"
+                      : <TimeAgo timestamp={node.lastHeard * 1000} />}
+                  </p>
+                  <p>
+                    Hardware:{" "}
+                    {(Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0] ??
+                      "Unknown")
+                      .replace(/_/g, " ")}
+                  </p>
+                </div>
+                <DeviceImage
+                  className="h-45 w-45 p-2 rounded-lg border-4 border-slate-200 dark:border-slate-800"
+                  deviceType={Protobuf.Mesh
+                    .HardwareModel[node.user?.hwModel ?? 0]}
+                />
+              </div>
+            </div>
+
+            <div>
+              <div className="text-slate-900 dark:text-slate-100 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+                <p className="text-lg font-semibold">Position:</p>
+
+                {node.position
+                  ? (
+                    <>
+                      {node.position.latitudeI &&
+                        node.position.longitudeI && (
+                        <p>
+                          Coordinates:{" "}
+                          <a
+                            className="text-blue-500 dark:text-blue-400"
+                            href={`https://www.openstreetmap.org/?mlat=${
+                              node.position.latitudeI / 1e7
+                            }&mlon=${node.position.longitudeI / 1e7}&layers=N`}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {node.position.latitudeI / 1e7},{" "}
+                            {node.position.longitudeI / 1e7}
+                          </a>
+                        </p>
+                      )}
+                      {node.position.altitude && (
+                        <p>Altitude: {node.position.altitude}m</p>
+                      )}
+                    </>
+                  )
+                  : <p>Unknown</p>}
+                <Button onClick={handleRequestPosition} className="mt-2">
+                  <MapPinnedIcon className="mr-2" />
+                  Request Position
+                </Button>
              </div>

-              {device.position && (
-                <div className="text-slate-900 dark:text-slate-100 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-                  <p className="text-lg font-semibold">Position:</p>
-                  {device.position.latitudeI && device.position.longitudeI && (
-                    <p>
-                      Coordinates:{" "}
-                      <a
-                        className="text-blue-500 dark:text-blue-400"
-                        href={`https://www.openstreetmap.org/?mlat=${
-                          device.position.latitudeI / 1e7
-                        }&mlon=${device.position.longitudeI / 1e7}&layers=N`}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {device.position.latitudeI / 1e7},{" "}
-                        {device.position.longitudeI / 1e7}
-                      </a>
-                    </p>
-                  )}
-                  {device.position.altitude && (
-                    <p>Altitude: {device.position.altitude}m</p>
-                  )}
-                </div>
-              )}
-
-              {device.deviceMetrics && (
+              {node.deviceMetrics && (
                <div className="text-slate-900 dark:text-slate-100 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
                  <p className="text-lg font-semibold text-slate-900 dark:text-slate-100">
                    Device Metrics:
@@ -139,10 +316,10 @@ export const NodeDetailsDialog = ({
                        </p>
                      ),
                  )}
-                  {device.deviceMetrics.uptimeSeconds && (
+                  {node.deviceMetrics.uptimeSeconds && (
                    <p>
                      Uptime:{" "}
-                      <Uptime seconds={device.deviceMetrics.uptimeSeconds} />
+                      <Uptime seconds={node.deviceMetrics.uptimeSeconds} />
                    </p>
                  )}
                </div>
@@ -159,7 +336,7 @@ export const NodeDetailsDialog = ({
                  </AccordionTrigger>
                  <AccordionContent className="overflow-x-scroll">
                    <pre className="text-xs w-full">
-                      {JSON.stringify(device, null, 2)}
+                      {JSON.stringify(node, null, 2)}
                    </pre>
                  </AccordionContent>
                </AccordionItem>
@@ -1,120 +0,0 @@
-import { toast } from "../../core/hooks/useToast.ts";
-import { useAppStore } from "../../core/stores/appStore.ts";
-import { useDevice } from "../../core/stores/deviceStore.ts";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "../UI/Dialog.tsx";
-import type { Protobuf } from "@meshtastic/core";
-import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
-import { TrashIcon } from "lucide-react";
-
-import { Button } from "../UI/Button.tsx";
-import {
-  MessageType,
-  useMessageStore,
-} from "../../core/stores/messageStore/index.ts";
-
-export interface NodeOptionsDialogProps {
-  node: Protobuf.Mesh.NodeInfo | undefined;
-  open: boolean;
-  onOpenChange: () => void;
-}
-
-export const NodeOptionsDialog = ({
-  node,
-  open,
-  onOpenChange,
-}: NodeOptionsDialogProps) => {
-  const { setDialogOpen, connection, setActivePage } = useDevice();
-  const {
-    setNodeNumToBeRemoved,
-    setNodeNumDetails,
-  } = useAppStore();
-  const { setChatType, setActiveChat } = useMessageStore();
-
-  if (!node) return null;
-
-  const longName = node?.user?.longName ??
-    (node ? `!${numberToHexUnpadded(node?.num)}` : "Unknown");
-  const shortName = node?.user?.shortName ??
-    (node ? `${numberToHexUnpadded(node?.num).substring(0, 4)}` : "UNK");
-
-  function handleDirectMessage() {
-    setChatType(MessageType.Direct);
-    setActiveChat(node.num);
-    setActivePage("messages");
-  }
-
-  function handleRequestPosition() {
-    toast({
-      title: "Requesting position, please wait...",
-    });
-    connection?.requestPosition(node.num).then(() =>
-      toast({
-        title: "Position request sent.",
-      })
-    );
-    onOpenChange();
-  }
-
-  function handleTraceroute() {
-    toast({
-      title: "Sending Traceroute, please wait...",
-    });
-    connection?.traceRoute(node.num).then(() =>
-      toast({
-        title: "Traceroute sent.",
-      })
-    );
-    onOpenChange();
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent aria-describedby={undefined}>
-        <DialogClose />
-        <DialogHeader>
-          <DialogTitle>{`${longName} (${shortName})`}</DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-col space-y-1">
-          <div>
-            <Button onClick={handleDirectMessage}>Direct Message</Button>
-          </div>
-          <div>
-            <Button onClick={handleRequestPosition}>Request Position</Button>
-          </div>
-          <div>
-            <Button onClick={handleTraceroute}>Trace Route</Button>
-          </div>
-          <div>
-            <Button
-              key="remove"
-              variant="destructive"
-              onClick={() => {
-                setNodeNumToBeRemoved(node?.num);
-                setDialogOpen("nodeRemoval", true);
-              }}
-            >
-              <TrashIcon />
-              Remove
-            </Button>
-          </div>
-          <div>
-            <Button
-              onClick={() => {
-                setNodeNumDetails(node?.num);
-                setDialogOpen("nodeDetails", true);
-              }}
-            >
-              More Details
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
@@ -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"
+          showFavorite={isFavorite}
+        />

        <div className="flex flex-col gap-0.5 min-w-0">
          <div className="flex items-center gap-1.5">
@@ -34,6 +34,7 @@ interface NavLink {
  name: string;
  icon: LucideIcon;
  page: Page;
+  count?: number;
 }

 const CollapseToggleButton = () => {
@@ -71,6 +72,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
    getNodesLength,
    metadata,
    activePage,
+    unreadCounts,
    setActivePage,
    setDialogOpen,
  } = useDevice();
@@ -79,8 +81,15 @@ export const Sidebar = ({ children }: SidebarProps) => {
  const { isCollapsed } = useSidebar();
  const myMetadata = metadata.get(0);

+  const numUnread = [...unreadCounts.values()].reduce((sum, v) => sum + v, 0);
+
  const pages: NavLink[] = [
-    { name: "Messages", icon: MessageSquareIcon, page: "messages" },
+    {
+      name: "Messages",
+      icon: MessageSquareIcon,
+      page: "messages",
+      count: numUnread ? numUnread : undefined,
+    },
    { name: "Map", icon: MapIcon, page: "map" },
    { name: "Config", icon: SettingsIcon, page: "config" },
    { name: "Channels", icon: LayersIcon, page: "channels" },
@@ -130,6 +139,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
        {pages.map((link) => (
          <SidebarButton
            key={link.name}
+            count={link.count}
            label={link.name}
            Icon={link.icon}
            onClick={() => {
@@ -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;
+  showFavorite?: boolean;
 }

 class ColorUtils {
@@ -62,6 +70,7 @@ export const Avatar = ({
  text,
  size = "sm",
  showError = false,
+  showFavorite = false,
  className,
 }: AvatarProps) => {
  const sizes = {
@@ -88,12 +97,43 @@ export const Avatar = ({
        color: textColor,
      }}
    >
+      {showFavorite
+        ? (
+          <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">
+                Favorite
+                <TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )
+        : null}
      {showError
        ? (
-          <LockKeyholeOpenIcon
-            className="absolute bottom-0 right-0 z-10 size-4 text-red-500 stroke-3"
-            aria-hidden="true"
-          />
+          <TooltipProvider delayDuration={300}>
+            <Tooltip>
+              <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 dark:fill-slate-600" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
        )
        : null}
      <p className="p-1">
@@ -1,10 +1,19 @@
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useState } from "react";
 import React from "react";
+import { cn } from "@core/utils/cn.ts";
+
+interface FavoriteIconProps {
+  showFavorite: boolean;
+}
+
+interface AvatarCellProps {
+  children: React.ReactElement<FavoriteIconProps>;
+}

 export interface TableProps {
  headings: Heading[];
-  rows: React.ReactNode[][];
+  rows: React.ReactElement<AvatarCellProps>[][];
 }

 export interface Heading {
@@ -61,6 +70,13 @@ export const Table = ({ headings, rows }: TableProps) => {
    const elementA = getElement(a[columnIndex]);
    const elementB = getElement(b[columnIndex]);

+    // Avatar contains the prop showFavorite which indicates isFavorite
+    const favA = a[0]?.props?.children?.props?.showFavorite ?? false;
+    const favB = b[0]?.props?.children?.props?.showFavorite ?? false;
+
+    // Always put favorites at the top
+    if (favA !== favB) return favA ? -1 : 1;
+
    if (sortColumn === "Last Heard") {
      const aTimestamp = elementA?.props?.children?.props?.timestamp ?? 0;
      const bTimestamp = elementB?.props?.children?.props?.timestamp ?? 0;
@@ -142,13 +158,17 @@ export const Table = ({ headings, rows }: TableProps) => {
              : null;
          const rowKey = firstCellKey ?? Math.random().toString(); // Use random only as last resort

+          const isFavorite = row[0]?.props?.children?.props?.showFavorite ??
+            false;
          return (
            <tr
              key={rowKey}
-              className={`
-                bg-white dark:bg-slate-900
-                odd:bg-slate-200/40 dark:odd:bg-slate-800/40
-              `}
+              className={cn(
+                "",
+                isFavorite
+                  ? "bg-yellow-100/30 dark:bg-slate-800 odd:bg-yellow-200/30 dark:odd:bg-slate-600/40"
+                  : "bg-white dark:bg-slate-900 odd:bg-slate-200/40 dark:odd:bg-slate-800/40",
+              )}
            >
              {row.map((item, cellIndex) => {
                const cellKey = `${rowKey}_${cellIndex}`;