From c0308532a152ba6e8e0714ab3c264dacc832c967 Mon Sep 17 00:00:00 2001
From: James Thomas <james9074@gmail.com>
Date: Thu, 27 Mar 2025 17:21:40 -0400
Subject: [PATCH 1/4] Adding DM from Map function

---
 .../PageComponents/Map/NodeDetail.tsx         | 67 +++++++++++++++----
 1 file changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/components/PageComponents/Map/NodeDetail.tsx b/src/components/PageComponents/Map/NodeDetail.tsx
index 71dbad96..66b41c49 100644
--- a/src/components/PageComponents/Map/NodeDetail.tsx
+++ b/src/components/PageComponents/Map/NodeDetail.tsx
@@ -16,31 +16,51 @@ import {
   Dot,
   LockIcon,
   LockOpenIcon,
+  MessageSquareIcon,
   MountainSnow,
   Star,
 } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
 
 export interface NodeDetailProps {
   node: ProtobufType.Mesh.NodeInfo;
 }
 
 export const NodeDetail = ({ node }: NodeDetailProps) => {
+  const { setChatType, setActiveChat } = useAppStore();
+  const { setActivePage } = useDevice();
   const name = node.user?.longName || `!${numberToHexUnpadded(node.num)}`;
+  const shortName = node.user?.shortName ?? "UNK";
   const hwModel = node.user?.hwModel ?? 0;
   const hardwareType =
     Protobuf.Mesh.HardwareModel[hwModel]?.replaceAll("_", " ") ?? `${hwModel}`;
 
+  function handleDirectMessage() {
+    setChatType("direct");
+    setActiveChat(node.num);
+    setActivePage("messages");
+  }
+
   return (
     <div className="dark:text-slate-900 p-1">
       <div className="flex gap-2">
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
-          <Avatar text={node.user?.shortName ?? "UNK"} />
+          <Avatar text={shortName} />
+
+          <div>            
 
-          <div>
             {node.user?.publicKey && node.user?.publicKey.length > 0
               ? (
                 <LockIcon
-                  className="text-green-600"
+                  className="text-green-600 mb-1.5"
                   size={12}
                   strokeWidth={3}
                   aria-label="Public Key Enabled"
@@ -48,19 +68,42 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
               )
               : (
                 <LockOpenIcon
-                  className="text-yellow-500"
+                  className="text-yellow-500 mb-1.5"
                   size={12}
                   strokeWidth={3}
                   aria-label="No Public Key"
                 />
               )}
-          </div>
 
-          <Star
-            fill={node.isFavorite ? "black" : "none"}
-            size={15}
-            aria-label={node.isFavorite ? "Favorite" : "Not a Favorite"}
-          />
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <MessageSquareIcon 
+                    size={14}
+                    onClick={handleDirectMessage}
+                    className="cursor-pointer hover:text-blue-500"
+                    title="Send Message"
+                  />
+                </TooltipTrigger>
+                <TooltipPortal>
+                  <TooltipContent
+                    className="rounded-md bg-slate-800 px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95"
+                    side="top"
+                    align="center"
+                    sideOffset={5}
+                  >
+                    Direct Message {shortName}
+                  </TooltipContent>
+                </TooltipPortal>
+              </Tooltip>
+            </TooltipProvider>
+
+            <Star
+              fill={node.isFavorite ? "black" : "none"}
+              size={15}
+              aria-label={node.isFavorite ? "Favorite" : "Not a Favorite"}
+            />
+          </div>
         </div>
 
         <div>
@@ -70,7 +113,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
 
           {!!node.deviceMetrics?.batteryLevel && (
             <div
-              className="flex items-center gap-1"
+              className="flex items-center gap-1 mt-0.5"
               title={`${node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
                 } volts`}
             >
@@ -88,7 +131,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
               </Subtle>
             </div>
           )}
-
+          
           <div className="flex gap-2 items-center">
             {node.user?.shortName && <div>"{node.user?.shortName}"</div>}
             {node.user?.id && <div>{node.user?.id}</div>}

From 626970865f1218f6965dd3ac434c71a364e9d4d2 Mon Sep 17 00:00:00 2001
From: James Thomas <james9074@gmail.com>
Date: Thu, 27 Mar 2025 17:34:42 -0400
Subject: [PATCH 2/4] Lint

---
 src/components/PageComponents/Map/NodeDetail.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/PageComponents/Map/NodeDetail.tsx b/src/components/PageComponents/Map/NodeDetail.tsx
index 66b41c49..23e2f8d5 100644
--- a/src/components/PageComponents/Map/NodeDetail.tsx
+++ b/src/components/PageComponents/Map/NodeDetail.tsx
@@ -56,7 +56,6 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
           <Avatar text={shortName} />
 
           <div>            
-
             {node.user?.publicKey && node.user?.publicKey.length > 0
               ? (
                 <LockIcon
@@ -131,7 +130,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
               </Subtle>
             </div>
           )}
-          
+
           <div className="flex gap-2 items-center">
             {node.user?.shortName && <div>"{node.user?.shortName}"</div>}
             {node.user?.id && <div>{node.user?.id}</div>}

From 77b3a7ac85196355c75f2a42067e11077ab55823 Mon Sep 17 00:00:00 2001
From: James Thomas <james9074@gmail.com>
Date: Thu, 27 Mar 2025 17:35:18 -0400
Subject: [PATCH 3/4] Lint

---
 src/components/PageComponents/Map/NodeDetail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Map/NodeDetail.tsx b/src/components/PageComponents/Map/NodeDetail.tsx
index 23e2f8d5..506b814d 100644
--- a/src/components/PageComponents/Map/NodeDetail.tsx
+++ b/src/components/PageComponents/Map/NodeDetail.tsx
@@ -55,7 +55,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
           <Avatar text={shortName} />
 
-          <div>            
+          <div>
             {node.user?.publicKey && node.user?.publicKey.length > 0
               ? (
                 <LockIcon

From 8da38ab2e485efefccd5016d55ac188b983f2ba8 Mon Sep 17 00:00:00 2001
From: James Thomas <james9074@gmail.com>
Date: Fri, 28 Mar 2025 09:57:35 -0400
Subject: [PATCH 4/4] Prevent tooltip from appearing by default

---
 src/components/PageComponents/Map/NodeDetail.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/PageComponents/Map/NodeDetail.tsx b/src/components/PageComponents/Map/NodeDetail.tsx
index 506b814d..4e57f75a 100644
--- a/src/components/PageComponents/Map/NodeDetail.tsx
+++ b/src/components/PageComponents/Map/NodeDetail.tsx
@@ -54,8 +54,11 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
       <div className="flex gap-2">
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
           <Avatar text={shortName} />
-
-          <div>
+          
+          <div onFocusCapture={(e) => {
+            // Required to prevent DM tooltip auto-appearing on creation
+            e.stopPropagation();
+          }}>
             {node.user?.publicKey && node.user?.publicKey.length > 0
               ? (
                 <LockIcon