Merge pull request #497 from Hunter275/unread-counts

Unread Counts

src/components/Dialog/RefreshKeysDialog/useRefreshKeysDialog.test.ts

@@ -3,8 +3,8 @@ import { useRefreshKeysDialog } from "./useRefreshKeysDialog.ts";
 import { beforeEach, describe, expect, it, Mock, vi } from "vitest";
 import { useDevice } from "@core/stores/deviceStore.ts";
 
-vi.mock("@core/stores/appStore.ts", () => ({
+vi.mock("@core/stores/messageStore.ts", () => ({
-  useAppStore: vi.fn(() => ({ activeChat: "chat-123" })),
+  useMessageStore: vi.fn(() => ({ activeChat: "chat-123" })),
 }));
 
 vi.mock("@core/stores/deviceStore.ts", () => ({

src/components/Dialog/RefreshKeysDialog/useRefreshKeysDialog.ts

@@ -1,10 +1,10 @@
 import { useCallback } from "react";
-import { useAppStore } from "@core/stores/appStore.ts";
 import { useDevice } from "@core/stores/deviceStore.ts";
+import { useMessageStore } from "@core/stores/messageStore.ts";
 
 export function useRefreshKeysDialog() {
   const { removeNode, setDialogOpen, clearNodeError, getNodeError } = useDevice();
-  const { activeChat } = useAppStore();
+  const { activeChat } = useMessageStore();
 
   const handleNodeRemove = useCallback(() => {
     const nodeWithError = getNodeError(activeChat);

src/components/UI/Sidebar/sidebarButton.tsx

@@ -3,6 +3,7 @@ import type { LucideIcon } from "lucide-react";
 
 export interface SidebarButtonProps {
   label: string;
+  count?: number;
   active?: boolean;
   Icon?: LucideIcon;
   element?;
@@ -14,6 +15,7 @@ export const SidebarButton = ({
   label,
   active,
   Icon,
+  count,
   element,
   onClick,
   disabled = false,
@@ -28,5 +30,6 @@ export const SidebarButton = ({
     {Icon && <Icon size={16} />}
     {element && element}
     <span className="flex flex-1 justify-start shrink-0">{label}</span>
+    {count > 0 && !active && <div className="justify-end text-white rounded-[20%] px-[2%] bg-[rgb(195,0,0)]">{count}</div>}
   </Button>
 );

src/core/stores/deviceStore.ts

@@ -105,6 +105,8 @@ export interface Device {
   clearNodeError: (nodeNum: number) => void;
   getNodeError: (nodeNum: number) => NodeError | undefined;
   hasNodeError: (nodeNum: number) => boolean
+  incrementUnread: (nodeNum: number) => void;
+  resetUnread: (nodeNum: number) => void;
 }
 
 export interface DeviceState {
@@ -152,6 +154,7 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
             unsafeRoles: false,
             refreshKeys: false,
             rebootOTA: false,
+            clearMessages: false,
           },
           pendingSettingsChanges: false,
           messageDraft: "",
@@ -613,7 +616,35 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
             }
             return device.nodeErrors.has(nodeNum);
           },
+          incrementUnread: (nodeNum: number) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (!device) {
+                  console.warn(`incrementUnread: Device with ID ${id} not found.`);
+                  return;
+                }
+                const currentCount = device.unreadCounts.get(nodeNum) ?? 0;
+                device.unreadCounts.set(nodeNum, currentCount + 1);
+              })
+            );
+          },
+          resetUnread: (nodeNum: number) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (!device) {
+                  console.warn(`resetUnread: Device with ID ${id} not found.`);
+                  return;
+                }
+                device.unreadCounts.set(nodeNum, 0);
 
+                if (device.unreadCounts.get(nodeNum) === 0) {
+                  device.unreadCounts.delete(nodeNum);
+                }
+              })
+            );
+          },
         });
       }),
     );

src/core/stores/messageStore.test.ts

@@ -9,19 +9,15 @@ import {
 let memoryStorage: Record<string, string> = {};
 
 vi.mock('./storage/indexDB.ts', () => {
-  console.log("Mocking zustandIndexDBStorage...");
   return {
     zustandIndexDBStorage: {
       getItem: vi.fn(async (name: string): Promise<string | null> => {
-        console.log(`Mock getItem: ${name}`, memoryStorage[name] ?? null);
         return memoryStorage[name] ?? null;
       }),
       setItem: vi.fn(async (name: string, value: string): Promise<void> => {
-        console.log(`Mock setItem: ${name}`, value);
         memoryStorage[name] = value;
       }),
       removeItem: vi.fn(async (name: string): Promise<void> => {
-        console.log(`Mock removeItem: ${name}`);
         delete memoryStorage[name];
       }),
     },
@@ -211,11 +207,14 @@ describe('useMessageStore', () => {
       expect(messages).toEqual([]);
     });
 
-    it('should return empty array if myNodeNum is not provided for direct messages', () => {
+    it('should return combined direct messages when myNodeNum and otherNodeNum are provided', () => {
       const messages = useMessageStore.getState().getMessages(MessageType.Direct, {
+        myNodeNum: myNodeNum,         // Keep this
         otherNodeNum: otherNodeNum1
       });
-      expect(messages).toEqual([]);
+      expect(messages).toHaveLength(2);
+      expect(messages[0]).toEqual(directMessageToOther1);
+      expect(messages[1]).toEqual(directMessageFromOther1);
     });
   });
 

src/core/subscriptions.ts

@@ -89,6 +89,16 @@ export const subscribeAll = (
     const dto = new PacketToMessageDTO(messagePacket, myNodeNum);
     const message = dto.toMessage();
     messageStore.saveMessage(message);
+
+    if (message.type == MessageType.Direct) {
+      if (message.to === myNodeNum) {
+        device.incrementUnread(messagePacket.from);
+      }
+    } else if (message.type == MessageType.Broadcast) {
+      if (message.from !== myNodeNum) {
+        device.incrementUnread(message.channel);
+      }
+    }
   });
 
   connection.events.onTraceRoutePacket.subscribe((traceRoutePacket) => {

src/pages/Messages.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, vi, expect } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { MessagesPage } from "./Messages.tsx";
+import { useDevice } from "../core/stores/deviceStore";
+import { Protobuf } from "@meshtastic/core";
+
+vi.mock("../core/stores/deviceStore", () => ({
+  useDevice: vi.fn()
+}));
+
+const mockUseDevice = {
+    channels: new Map([
+        [0, {
+            index: 0,
+            settings: { name: "Primary" },
+            role: Protobuf.Channel.Channel_Role.PRIMARY
+        }]
+    ]),
+    nodes: new Map([
+        [0, {
+            num: 0,
+            user: { longName: "Test Node 0", shortName: "TN0", publicKey: "0000" }
+        }],
+        [1111, {
+            num: 1111,
+            user: { longName: "Test Node 1", shortName: "TN1", publicKey: "12345" }
+        }],
+        [2222, {
+            num: 2222,
+            user: { longName: "Test Node 2", shortName: "TN2", publicKey: "67890" }
+        }],
+        [3333, {
+            num: 3333,
+            user: { longName: "Test Node 3", shortName: "TN3", publicKey: "11111" }
+        }]
+    ]),
+    hardware: { myNodeNum: 1 },
+    messages: { broadcast: new Map(), direct: new Map() },
+    metadata: new Map(),
+    unreadCounts: new Map([[1111, 3], [2222, 10]]),
+    resetUnread: vi.fn(),
+    hasNodeError: vi.fn()
+};
+
+
+describe("Messages Page", () => {
+    beforeEach(() => {
+        vi.mocked(useDevice).mockReturnValue(mockUseDevice);
+    });
+
+    it("sorts unreads to the top", () => {
+        render(<MessagesPage />);
+        const buttonOrder = screen.getAllByRole("button").filter(b => b.textContent.includes("Test Node"));
+        expect(buttonOrder[0].textContent).toContain("TN2Test Node 210");
+        expect(buttonOrder[1].textContent).toContain("TN1Test Node 13");
+        expect(buttonOrder[2].textContent).toContain("TN0Test Node 0");
+        expect(buttonOrder[3].textContent).toContain("TN3Test Node 3");
+    });
+
+    it("updates unread when active chat changes",() => {
+        render(<MessagesPage />);
+        const nodeButton = screen.getAllByRole("button").filter(b => b.textContent.includes("TN1Test Node 13"))[0];
+        fireEvent.click(nodeButton);
+        expect(mockUseDevice.resetUnread).toHaveBeenCalledWith(1111, 0);
+    });
+
+    it("does not update the incorrect node", async () => {
+        render(<MessagesPage />);
+        const nodeButton = screen.getAllByRole("button").filter(b => b.textContent.includes("TN1Test Node 1"))[0];
+        fireEvent.click(nodeButton);
+        expect(mockUseDevice.resetUnread).toHaveBeenCalledWith(1111, 0);
+        expect(mockUseDevice.unreadCounts.get(2222)).toBe(10);
+    });
+});

src/pages/Messages.tsx

@@ -15,17 +15,27 @@ import { MessageInput } from "@components/PageComponents/Messages/MessageInput.t
 import { cn } from "@core/utils/cn.ts";
 import { MessageType, useMessageStore } from "@core/stores/messageStore.ts";
 
+type NodeInfoWithUnread = Protobuf.Mesh.NodeInfo & { unreadCount: number };
+
 export const MessagesPage = () => {
-  const { channels, nodes, hardware, hasNodeError } = useDevice();
+  const { channels, nodes, hardware, hasNodeError, unreadCounts, resetUnread } = useDevice();
   const { getNodeNum, getMessages, setActiveChat, chatType, activeChat, setChatType } = useMessageStore()
   const { toast } = useToast();
   const [searchTerm, setSearchTerm] = useState<string>("");
 
-  const filteredNodes = Array.from(nodes.values()).filter((node) => {
+  const filteredNodes: NodeInfoWithUnread[] = Array.from(nodes.values())
-    if (node.num === hardware.myNodeNum) return false;
+    .filter((node) => node.num !== hardware.myNodeNum)
+    .map((node) => ({
+      ...node,
+      unreadCount: unreadCounts.get(node.num) ?? 0,
+    }))
+    .filter((node) => {
       const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
       return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
-  });
+    })
+    .sort((a, b) => b.unreadCount - a.unreadCount);
+
+
   const allChannels = Array.from(channels.values());
   const filteredChannels = allChannels.filter(
     (ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED,
@@ -48,45 +58,45 @@ export const MessagesPage = () => {
           {filteredChannels.map((channel) => (
             <SidebarButton
               key={channel.index}
-              label={channel.settings?.name.length
+              count={unreadCounts.get(channel.index)}
-                ? channel.settings?.name
+              label={channel.settings?.name || (channel.index === 0 ? "Primary" : `Ch ${channel.index}`)}
-                : channel.index === 0
+              active={activeChat === channel.index && chatType === MessageType.Broadcast}
-                  ? "Primary"
-                  : `Ch ${channel.index}`}
               onClick={() => {
                 setChatType(MessageType.Broadcast);
                 setActiveChat(channel.index);
+                resetUnread(channel.index);
               }}
               element={<HashIcon size={16} className="mr-2" />}
             />
           ))}
         </SidebarSection>
         <SidebarSection label="Nodes">
-          <div className="p-4">
+          <div className="p-1 mb-4">
             <input
               type="text"
               placeholder="Search nodes..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900"
+              className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
           </div>
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-3.5">
-            {filteredNodes.map((otherNode) => (
+            {filteredNodes.map((node) => (
               <SidebarButton
-                key={otherNode.num}
+                key={node.num}
-                label={otherNode.user?.longName ??
+                label={node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`}
-                  `!${numberToHexUnpadded(otherNode.num)}`}
+                count={node.unreadCount > 0 ? node.unreadCount : undefined}
-                active={activeChat === otherNode.num && chatType === MessageType.Direct}
+                active={activeChat === node.num && chatType === MessageType.Direct}
                 onClick={() => {
                   setChatType(MessageType.Direct);
-                  setActiveChat(otherNode.num);
+                  setActiveChat(node.num);
+                  resetUnread(node.num);
                 }}
                 element={
                   <Avatar
-                    text={otherNode?.user?.shortName ?? otherNode.num.toString()}
+                    text={node.user?.shortName ?? node.num.toString()}
-                    className={cn(hasNodeError(otherNode?.num) && "text-red-500")}
+                    className={cn(hasNodeError(node.num) && "text-red-500")}
-                    showError={hasNodeError(otherNode?.num)}
+                    showError={hasNodeError(node.num)}
                     size="sm"
                   />
                 }
@@ -98,26 +108,22 @@ export const MessagesPage = () => {
       <div className="flex flex-col w-full h-full container mx-auto">
         <PageLayout
           className="flex flex-col h-full"
-          label={`Messages: ${MessageType.Broadcast && currentChannel
+          label={`Messages: ${isBroadcast && currentChannel
             ? getChannelName(currentChannel)
-            : chatType === MessageType.Direct && nodes.get(activeChat)
+            : isDirect && otherNode
-              ? (nodes.get(activeChat)?.user?.longName ?? nodeHex)
+              ? (otherNode.user?.longName ?? nodeHex)
-              : "Loading..."
+              : "Select a Chat"
             }`}
-          actions={chatType === MessageType.Direct
+          actions={isDirect && otherNode
             ? [
               {
-                icon: nodes.get(activeChat)?.user?.publicKey.length
+                icon: otherNode.user?.publicKey?.length ? LockIcon : LockOpenIcon,
-                  ? LockIcon
+                iconClasses: otherNode.user?.publicKey?.length
-                  : LockOpenIcon,
-                iconClasses: nodes.get(activeChat)?.user?.publicKey.length
                   ? "text-green-600"
                   : "text-yellow-300",
                 onClick() {
-                  const targetNode = nodes.get(activeChat)?.num;
-                  if (targetNode === undefined) return;
                   toast({
-                    title: nodes.get(activeChat)?.user?.publicKey.length
+                    title: otherNode.user?.publicKey?.length
                       ? "Chat is using PKI encryption."
                       : "Chat is using PSK encryption.",
                   });
@@ -149,14 +155,24 @@ export const MessagesPage = () => {
                 </div>
               </div>
             )}
+
+            {!isBroadcast && !isDirect && (
+              <div className="flex items-center justify-center h-full text-slate-500">
+                Select a channel or node to start messaging.
+              </div>
+            )}
           </div>
 
           <div className="shrink-0 p-4 w-full dark:bg-slate-900">
+            {(isBroadcast || isDirect) ? (
               <MessageInput
-              to={currentChat.type === MessageType.Direct ? activeChat : MessageType.Broadcast}
+                to={isDirect ? activeChat : MessageType.Broadcast}
-              channel={currentChat.type === MessageType.Direct ? Types.ChannelNumber.Primary : currentChat.id}
+                channel={isDirect ? Types.ChannelNumber.Primary : currentChat.id}
                 maxBytes={200}
               />
+            ) : (
+              <div className="text-center text-slate-400 italic">Select a chat to send a message.</div>
+            )}
           </div>
         </PageLayout>
       </div>

src/pages/Nodes.tsx

@@ -24,8 +24,7 @@ function shortNameFromNode(
 ): string {
   const shortNameOfNode = node.user?.shortName ??
     (node.user?.macaddr
-      ? `${
+      ? `${base16
-        base16
         .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
         .toLowerCase()
       }`
@@ -93,7 +92,7 @@ const NodesPage = (): JSX.Element => {
             placeholder="Search nodes..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900"
+            className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
         <div className="overflow-y-auto h-full">
@@ -124,8 +123,7 @@ const NodesPage = (): JSX.Element => {
               >
                 {node.user?.longName ??
                   (node.user?.macaddr
-                    ? `Meshtastic ${
+                    ? `Meshtastic ${base16
-                      base16
                       .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
                       .toLowerCase()
                     }`
@@ -135,8 +133,7 @@ const NodesPage = (): JSX.Element => {
                 {node.lastHeard !== 0
                   ? node.viaMqtt === false && node.hopsAway === 0
                     ? "Direct"
-                    : `${node.hopsAway?.toString()} ${
+                    : `${node.hopsAway?.toString()} ${node.hopsAway > 1 ? "hops" : "hop"
-                      node.hopsAway > 1 ? "hops" : "hop"
                     } away`
                   : "-"}
                 {node.viaMqtt === true ? ", via MQTT" : ""}