feat: Add Node detail popup in Map view

src/pages/Map.tsx

@@ -1,4 +1,5 @@
 import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
+import { NodeDetail } from "@app/components/PageComponents/Map/NodeDetail";
 import { cn } from "@app/core/utils/cn.ts";
 import { PageLayout } from "@components/PageLayout.tsx";
 import { Sidebar } from "@components/Sidebar.tsx";
@@ -16,8 +17,9 @@ import {
   ZoomOutIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import { Marker, useMap } from "react-map-gl";
+import { Marker, useMap, Popup } from "react-map-gl";
 import MapGl from "react-map-gl/maplibre";
+import { Protobuf } from "@meshtastic/js";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
@@ -25,6 +27,8 @@ export const MapPage = (): JSX.Element => {
   const { default: map } = useMap();
 
   const [zoom, setZoom] = useState(0);
+  const [selectedNode, setSelectedNode] =
+    useState<Protobuf.Mesh.NodeInfo | null>(null);
 
   const allNodes = Array.from(nodes.values());
 
@@ -160,7 +164,7 @@ export const MapPage = (): JSX.Element => {
             </Source>
           ))} */}
           {allNodes.map((node) => {
-            if (node.position?.latitudeI) {
+            if (node.position?.latitudeI && node.num !== selectedNode?.num) {
               return (
                 <Marker
                   key={node.num}
@@ -169,6 +173,7 @@ export const MapPage = (): JSX.Element => {
                   style={{ filter: darkMode ? "invert(1)" : "" }}
                   anchor="bottom"
                   onClick={() => {
+                    setSelectedNode(node);
                     map?.easeTo({
                       zoom: 12,
                       center: [
@@ -189,6 +194,17 @@ export const MapPage = (): JSX.Element => {
               );
             }
           })}
+          {selectedNode?.position && (
+            <Popup
+              longitude={(selectedNode.position.longitudeI ?? 0) / 1e7}
+              latitude={(selectedNode.position.latitudeI ?? 0) / 1e7}
+              anchor="left"
+              closeOnClick={false}
+              onClose={() => setSelectedNode(null)}
+            >
+              <NodeDetail node={selectedNode} />
+            </Popup>
+          )}
         </MapGl>
       </PageLayout>
     </>