refactor to integrate messageStore and unreadCounts

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/core/stores/appStore.ts

@@ -8,7 +8,6 @@ export interface RasterSource {
   tileSize: number;
 }
 
-
 interface ErrorState {
   field: string;
   message: string;
@@ -19,12 +18,7 @@ interface ErrorState {
   message: string;
 }
 
-export interface App {
+interface AppState {
-  unreadCounts: Map<number, number>;
-  setUnread: (id: number, count: number) => void;
-}
-
-export interface AppState {
   selectedDevice: number;
   devices: {
     id: number;
@@ -36,7 +30,6 @@ export interface AppState {
   connectDialogOpen: boolean;
   nodeNumDetails: number;
   errors: ErrorState[];
-  unreadCounts: Map<number, number>;
 
   setRasterSources: (sources: RasterSource[]) => void;
   addRasterSource: (source: RasterSource) => void;
@@ -57,9 +50,6 @@ export interface AppState {
   removeError: (field: string) => void;
   clearErrors: () => void;
   setNewErrors: (newErrors: ErrorState[]) => void;
-
-  // unread counts
-  setUnread: (id: number, count: number) => void;
 }
 
 export const useAppStore = create<AppState>()((set, get) => ({
@@ -72,7 +62,6 @@ export const useAppStore = create<AppState>()((set, get) => ({
   nodeNumToBeRemoved: 0,
   nodeNumDetails: 0,
   errors: [],
-  unreadCounts: new Map([[0, 100],[2718471552, 1]]),
 
   setRasterSources: (sources: RasterSource[]) => {
     set(
@@ -173,11 +162,4 @@ export const useAppStore = create<AppState>()((set, get) => ({
       }),
     );
   },
-  setUnread: (id: number, count: number) => {
-    set(
-      produce<AppState>((draft) => {
-        draft.unreadCounts.set(id, count);
-      })
-    );
-  }
 }));

src/core/stores/deviceStore.ts

@@ -74,7 +74,6 @@ export interface Device {
     refreshKeys: boolean;
     clearMessages: boolean;
   };
-  unreadCounts: Map<number, number>;
 
 
   setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -102,11 +101,12 @@ export interface Device {
   getDialogOpen: (dialog: DialogVariant) => boolean;
   processPacket: (data: ProcessPacketParams) => void;
   setMessageDraft: (message: string) => void;
-  setUnread: (id: number, count: number) => void;
   setNodeError: (nodeNum: number, error: string) => void;
   clearNodeError: (nodeNum: number) => void;
   getNodeError: (nodeNum: number) => NodeError | undefined;
   hasNodeError: (nodeNum: number) => boolean
+  incrementUnread: (nodeNum: number) => void;
+  resetUnread: (nodeNum: number) => void;
 }
 
 export interface DeviceState {
@@ -154,12 +154,13 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
             unsafeRoles: false,
             refreshKeys: false,
             rebootOTA: false,
+            clearMessages: false,
           },
           pendingSettingsChanges: false,
           messageDraft: "",
-          unreadCounts: new Map(),
           nodeErrors: new Map(),
 
+
           setStatus: (status: Types.DeviceStatusEnum) => {
             set(
               produce<DeviceState>((draft) => {
@@ -581,20 +582,6 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
               }),
             );
           },
-          setUnread: (unread_id: number, count?: number) => {
-              set(
-                produce<DeviceState>((draft) => {
-                  const device = draft.devices.get(id);
-                  if (device) {
-                    if (count == null) {
-                      let currentCount = device.unreadCounts.get(unread_id) ?? 0;
-                      count = currentCount + 1;
-                    }
-                    device.unreadCounts.set(unread_id, count);
-                  }
-                })
-              );
-            },
           setNodeError: (nodeNum, error) => {
             set(
               produce<DeviceState>((draft) => {
@@ -629,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

@@ -1,10 +1,8 @@
 import type { Device } from "@core/stores/deviceStore.ts";
 import { MeshDevice, Protobuf } from "@meshtastic/core";
-import type { MessageStore, MessageType } from "@core/stores/messageStore.ts";
+import type { MessageStore } from "@core/stores/messageStore.ts";
-import { MessageType } from "@core/stores/messageStore.ts";
 import PacketToMessageDTO from "@core/dto/PacketToMessageDTO.ts";
 
-
 export const subscribeAll = (
   device: Device,
   connection: MeshDevice,
@@ -87,15 +85,20 @@ export const subscribeAll = (
 
 
   connection.events.onMessagePacket.subscribe((messagePacket) => {
+    // incoming and outgoing messages are handled by this event listener
     const dto = new PacketToMessageDTO(messagePacket, myNodeNum);
     const message = dto.toMessage();
-    messsageStore.saveMessage(message);
+    messageStore.saveMessage(message);
 
-    message.type == MessageType.Direct 
+    if (message.type == MessageType.Direct) {
-      ? 
+      if (message.to === myNodeNum) {
-      device.setUnread(messagePacket.from);
+        device.incrementUnread(messagePacket.from);
-      :
+      }
-      device.setUnread(messagePacket.channel);  
+    } else if (message.type == MessageType.Broadcast) {
+      if (message.from !== myNodeNum) {
+        device.incrementUnread(message.channel);
+      }
+    }
   });
 
   connection.events.onTraceRoutePacket.subscribe((traceRoutePacket) => {

src/pages/Messages.tsx

@@ -15,23 +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, unreadCounts, setUnread } = 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)
-    const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
+    .map((node) => ({
-    return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
+      ...node,
-  })
+      unreadCount: unreadCounts.get(node.num) ?? 0,
-  .map((node) => ({ 
+    }))
-    ...node, 
+    .filter((node) => {
-    unreadCount: unreadCounts.get(node.num) ?? 0
+      const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
-  }))
+      return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
-  .sort((a, b) => b.unreadCount - a.unreadCount);
+    })
+    .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,
@@ -55,47 +59,44 @@ export const MessagesPage = () => {
             <SidebarButton
               key={channel.index}
               count={unreadCounts.get(channel.index)}
-              label={channel.settings?.name.length
+              label={channel.settings?.name || (channel.index === 0 ? "Primary" : `Ch ${channel.index}`)}
-                ? channel.settings?.name
+              active={activeChat === channel.index && chatType === MessageType.Broadcast}
-                : channel.index === 0
-                  ? "Primary"
-                  : `Ch ${channel.index}`}
               onClick={() => {
                 setChatType(MessageType.Broadcast);
                 setActiveChat(channel.index);
-                setUnread(channel.index, 0);
+                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
-                count={unreadCounts.get(node.num)}
+                key={node.num}
-                label={node.user?.longName ??
+                label={node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`}
-                  `!${numberToHexUnpadded(node.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);
-                  setUnread(otherNode.num, 0);
+                  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"
                   />
                 }
@@ -107,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.",
                   });
@@ -158,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">
-            <MessageInput
+            {(isBroadcast || isDirect) ? (
-              to={currentChat.type === MessageType.Direct ? activeChat : MessageType.Broadcast}
+              <MessageInput
-              channel={currentChat.type === MessageType.Direct ? Types.ChannelNumber.Primary : currentChat.id}
+                to={isDirect ? activeChat : MessageType.Broadcast}
-              maxBytes={200}
+                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,10 +24,9 @@ function shortNameFromNode(
 ): string {
   const shortNameOfNode = node.user?.shortName ??
     (node.user?.macaddr
-      ? `${
+      ? `${base16
-        base16
+        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-          .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+        .toLowerCase()
-          .toLowerCase()
       }`
       : `${numberToHexUnpadded(node.num).slice(-4)}`);
   return String(shortNameOfNode);
@@ -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,10 +123,9 @@ const NodesPage = (): JSX.Element => {
               >
                 {node.user?.longName ??
                   (node.user?.macaddr
-                    ? `Meshtastic ${
+                    ? `Meshtastic ${base16
-                      base16
+                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+                      .toLowerCase()
-                        .toLowerCase()
                     }`
                     : `!${numberToHexUnpadded(node.num)}`)}
               </h1>,
@@ -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" : ""}