DM support

src/pages/Messages.tsx

@@ -6,63 +6,90 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
 import { HashIcon } from "lucide-react";
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
 import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { getChannelName } from "./Channels.js";
 import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, nodes, hardware } = useDevice();
-  const [activeChannel, setActiveChannel] = useState<Types.ChannelNumber>(
+  const { channels, nodes, hardware, messages } = useDevice();
+  const [chatType, setChatType] =
+    useState<Types.PacketDestination>("broadcast");
+  const [activeChat, setActiveChat] = useState<number>(
     Types.ChannelNumber.PRIMARY
   );
+  const filteredNodes = Array.from(nodes.values()).filter(
+    (n) => n.num !== hardware.myNodeNum
+  );
 
   return (
     <>
       <Sidebar>
         <SidebarSection label="Channels">
           {channels
-            .filter((ch) => ch.config.role !== Protobuf.Channel_Role.DISABLED)
+            .filter((ch) => ch.role !== Protobuf.Channel_Role.DISABLED)
             .map((channel) => (
               <SidebarButton
-                key={channel.config.index}
+                key={channel.index}
                 label={
-                  channel.config.settings?.name.length
-                    ? channel.config.settings?.name
-                    : channel.config.index === 0
+                  channel.settings?.name.length
+                    ? channel.settings?.name
+                    : channel.index === 0
                     ? "Primary"
-                    : `Ch ${channel.config.index}`
+                    : `Ch ${channel.index}`
                 }
-                active={channel.config.index === activeChannel}
-                onClick={() => setActiveChannel(channel.config.index)}
+                active={activeChat === channel.index}
+                onClick={() => {
+                  setChatType("broadcast");
+                  setActiveChat(channel.index);
+                }}
                 element={<HashIcon size={16} className="mr-2" />}
               />
             ))}
         </SidebarSection>
         <SidebarSection label="Peers">
-          {nodes
-            .filter((n) => n.data.num !== hardware.myNodeNum)
-            .map((node) => (
-              <SidebarButton
-                key={node.data.num}
-                label={node.data.user?.longName ?? "Unknown"}
-                element={
-                  <Hashicon size={20} value={node.data.num.toString()} />
-                }
-              />
-            ))}
+          {filteredNodes.map((node) => (
+            <SidebarButton
+              key={node.num}
+              label={node.user?.longName ?? "Unknown"}
+              active={activeChat === node.num}
+              onClick={() => {
+                setChatType("direct");
+                setActiveChat(node.num);
+              }}
+              element={<Hashicon size={20} value={node.num.toString()} />}
+            />
+          ))}
         </SidebarSection>
       </Sidebar>
       <PageLayout
         label={`Messages: ${
-          channels[activeChannel]
-            ? getChannelName(channels[activeChannel].config)
+          chatType === "broadcast" && channels[activeChat]
+            ? getChannelName(channels[activeChat])
+            : chatType === "direct" && nodes.get(activeChat)
+            ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
             : "Loading..."
         }`}
       >
         {channels.map(
           (channel) =>
-            channel.config.index === activeChannel && (
-              <ChannelChat key={channel.config.index} channel={channel} />
+            activeChat === channel.index && (
+              <ChannelChat
+                key={channel.index}
+                to="broadcast"
+                messages={messages.broadcast.get(channel.index)}
+                channel={channel.index}
+              />
+            )
+        )}
+        {filteredNodes.map(
+          (node) =>
+            activeChat === node.num && (
+              <ChannelChat
+                key={node.num}
+                to={activeChat}
+                messages={messages.direct.get(node.num)}
+                channel={Types.ChannelNumber.PRIMARY}
+              />
             )
         )}
       </PageLayout>