Add direct message button

src/components/Dialog/NodeOptionsDialog.tsx

@@ -24,8 +24,13 @@ export const NodeOptionsDialog = ({
   open,
   onOpenChange,
 }: NodeOptionsDialogProps): JSX.Element => {
-  const { setDialogOpen, connection } = useDevice();
-  const { setNodeNumToBeRemoved, setNodeNumDetails } = useAppStore();
+  const { setDialogOpen, connection, setActivePage } = useDevice();
+  const {
+    setNodeNumToBeRemoved,
+    setNodeNumDetails,
+    setChatType,
+    setActiveChat,
+  } = useAppStore();
   const longName =
     node?.user?.longName ??
     (node ? `!${numberToHexUnpadded(node?.num)}` : "Unknown");
@@ -33,6 +38,13 @@ export const NodeOptionsDialog = ({
     node?.user?.shortName ??
     (node ? `${numberToHexUnpadded(node?.num).substring(0, 4)}` : "UNK");
 
+  function handleDirectMessage() {
+    if (!node) return;
+    setChatType("direct");
+    setActiveChat(node.num);
+    setActivePage("messages");
+  }
+
   function handleRequestPosition() {
     if (!node) return;
     toast({
@@ -66,6 +78,9 @@ export const NodeOptionsDialog = ({
           <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>

src/core/stores/appStore.ts

@@ -1,3 +1,4 @@
+import { Types } from "@meshtastic/js";
 import { produce } from "immer";
 import { create } from "zustand";
 
@@ -30,6 +31,8 @@ interface AppState {
   accent: AccentColor;
   connectDialogOpen: boolean;
   nodeNumDetails: number;
+  activeChat: number;
+  chatType: "broadcast" | "direct";
 
   setRasterSources: (sources: RasterSource[]) => void;
   addRasterSource: (source: RasterSource) => void;
@@ -44,6 +47,8 @@ interface AppState {
   setAccent: (color: AccentColor) => void;
   setConnectDialogOpen: (open: boolean) => void;
   setNodeNumDetails: (nodeNum: number) => void;
+  setActiveChat: (chat: number) => void;
+  setChatType: (type: "broadcast" | "direct") => void;
 }
 
 export const useAppStore = create<AppState>()((set) => ({
@@ -60,6 +65,8 @@ export const useAppStore = create<AppState>()((set) => ({
   connectDialogOpen: false,
   nodeNumToBeRemoved: 0,
   nodeNumDetails: 0,
+  activeChat: Types.ChannelNumber.Primary,
+  chatType: "broadcast",
 
   setRasterSources: (sources: RasterSource[]) => {
     set(
@@ -131,4 +138,12 @@ export const useAppStore = create<AppState>()((set) => ({
     set((state) => ({
       nodeNumDetails: nodeNum,
     })),
+  setActiveChat: (chat) =>
+    set(() => ({
+      activeChat: chat,
+    })),
+  setChatType: (type) =>
+    set(() => ({
+      chatType: type,
+    })),
 }));

src/pages/Messages.tsx

@@ -1,3 +1,4 @@
+import { useAppStore } from "@app/core/stores/appStore";
 import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.tsx";
 import { PageLayout } from "@components/PageLayout.tsx";
 import { Sidebar } from "@components/Sidebar.tsx";
@@ -5,21 +6,17 @@ import { Avatar } from "@components/UI/Avatar.tsx";
 import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
 import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
 import { useToast } from "@core/hooks/useToast.ts";
-import { Device, useDevice, useDeviceStore } from "@core/stores/deviceStore.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf, Types } from "@meshtastic/js";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { getChannelName } from "@pages/Channels.tsx";
 import { HashIcon, LockIcon, LockOpenIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
 
-const MessagesPage = () => {
+export const MessagesPage = () => {
   const { channels, nodes, hardware, messages, traceroutes, connection } =
     useDevice();
-  const [chatType, setChatType] =
-    useState<Types.PacketDestination>("broadcast");
-  const [activeChat, setActiveChat] = useState<number>(
-    Types.ChannelNumber.Primary,
-  );
+  const { activeChat, chatType, setActiveChat, setChatType } = useAppStore();
   const [searchTerm, setSearchTerm] = useState<string>("");
   const filteredNodes = Array.from(nodes.values()).filter((node) => {
     if (node.num === hardware.myNodeNum) return false;