From 93cfd969a81df83cbcc030da0c32cf36cab411ed Mon Sep 17 00:00:00 2001
From: ajvpot <553597+ajvpot@users.noreply.github.com>
Date: Wed, 10 Sep 2025 03:49:39 +0200
Subject: [PATCH] link target for embed view

---
 src/app/(embed)/embed/map/page.tsx |  2 +-
 src/components/MapIcons.tsx        |  4 +++-
 src/components/MapView.tsx         | 28 ++++++++++++++++++++--------
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/app/(embed)/embed/map/page.tsx b/src/app/(embed)/embed/map/page.tsx
index d433ad7..fc95dd7 100644
--- a/src/app/(embed)/embed/map/page.tsx
+++ b/src/app/(embed)/embed/map/page.tsx
@@ -7,7 +7,7 @@ const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
 export default function EmbedMapPage() {
   return (
     <div className="relative w-full h-screen">
-      <MapView />
+      <MapView target="_blank" />
       <div className="absolute bottom-4 left-4 z-[1000]">
         <a
           href="/"
diff --git a/src/components/MapIcons.tsx b/src/components/MapIcons.tsx
index 3288166..910e294 100644
--- a/src/components/MapIcons.tsx
+++ b/src/components/MapIcons.tsx
@@ -17,6 +17,7 @@ interface ClusterMarkerProps {
 
 interface PopupContentProps {
   node: NodePosition;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
 // Individual node marker component
@@ -145,7 +146,7 @@ export function ClusterMarker({ children }: ClusterMarkerProps) {
 }
 
 // Popup content component
-export function PopupContent({ node }: PopupContentProps) {
+export function PopupContent({ node, target = '_self' }: PopupContentProps) {
   return (
     <div>
       <div><b>ID:</b> {node.type === "meshcore" ? formatPublicKey(node.node_id) : node.node_id}</div>
@@ -175,6 +176,7 @@ export function PopupContent({ node }: PopupContentProps) {
         <div style={{marginTop: '8px', paddingTop: '8px', borderTop: '1px solid #e5e7eb'}}>
           <a 
             href={`/meshcore/node/${node.node_id}`}
+            target={target}
             style={{
               display: 'inline-block',
               padding: '4px 8px',
diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx
index ff5ac62..5250f4e 100644
--- a/src/components/MapView.tsx
+++ b/src/components/MapView.tsx
@@ -34,6 +34,7 @@ type ClusteredMarkersProps = {
   selectedNodeId: string | null;
   onNodeClick: (nodeId: string | null) => void;
   isLoadingNeighbors?: boolean;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 };
 
 // Individual marker component
@@ -42,13 +43,15 @@ const IndividualMarker = React.memo(function IndividualMarker({
   showNodeNames, 
   selectedNodeId, 
   onNodeClick,
-  isLoadingNeighbors = false
+  isLoadingNeighbors = false,
+  target = '_self'
 }: { 
   node: NodePosition; 
   showNodeNames: boolean; 
   selectedNodeId: string | null;
   onNodeClick: (nodeId: string | null) => void;
   isLoadingNeighbors?: boolean;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }) {
   const map = useMap();
   const markerRef = useRef<L.Marker | null>(null);
@@ -79,7 +82,7 @@ const IndividualMarker = React.memo(function IndividualMarker({
 
     const marker = L.marker([node.latitude, node.longitude], { icon });
     (marker as any).options.nodeData = node;
-    marker.bindPopup(renderToString(<PopupContent node={node} />));
+    marker.bindPopup(renderToString(<PopupContent node={node} target={target} />));
     
     // Add hover handler for meshcore nodes
     if (node.type === "meshcore") {
@@ -118,7 +121,7 @@ const IndividualMarker = React.memo(function IndividualMarker({
         ),
       });
       markerRef.current.setIcon(icon);
-      markerRef.current.getPopup()?.setContent(renderToString(<PopupContent node={node} />));
+      markerRef.current.getPopup()?.setContent(renderToString(<PopupContent node={node} target={target} />));
     }
   }, [node, showNodeNames, selectedNodeId, isLoadingNeighbors]);
 
@@ -141,13 +144,15 @@ const ClusteredMarkersGroup = React.memo(function ClusteredMarkersGroup({
   showNodeNames, 
   selectedNodeId, 
   onNodeClick,
-  isLoadingNeighbors = false
+  isLoadingNeighbors = false,
+  target = '_self'
 }: { 
   nodes: NodePosition[]; 
   showNodeNames: boolean; 
   selectedNodeId: string | null;
   onNodeClick: (nodeId: string | null) => void;
   isLoadingNeighbors?: boolean;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }) {
   const map = useMap();
   const clusterGroupRef = useRef<any>(null);
@@ -194,7 +199,7 @@ const ClusteredMarkersGroup = React.memo(function ClusteredMarkersGroup({
       });
       const marker = L.marker([node.latitude, node.longitude], { icon });
       (marker as any).options.nodeData = node;
-      marker.bindPopup(renderToString(<PopupContent node={node} />));
+      marker.bindPopup(renderToString(<PopupContent node={node} target={target} />));
       
       // Add hover handler for meshcore nodes
       if (node.type === "meshcore") {
@@ -240,7 +245,7 @@ const ClusteredMarkersGroup = React.memo(function ClusteredMarkersGroup({
           ),
         });
         marker.setIcon(icon);
-        marker.getPopup()?.setContent(renderToString(<PopupContent node={nodeData} />));
+        marker.getPopup()?.setContent(renderToString(<PopupContent node={nodeData} target={target} />));
       }
     });
   }, [showNodeNames, selectedNodeId, isLoadingNeighbors]);
@@ -248,7 +253,7 @@ const ClusteredMarkersGroup = React.memo(function ClusteredMarkersGroup({
   return null;
 });
 
-const ClusteredMarkers = React.memo(function ClusteredMarkers({ nodes, selectedNodeId, onNodeClick, isLoadingNeighbors = false }: ClusteredMarkersProps) {
+const ClusteredMarkers = React.memo(function ClusteredMarkers({ nodes, selectedNodeId, onNodeClick, isLoadingNeighbors = false, target = '_self' }: ClusteredMarkersProps) {
   const configResult = useConfig();
   const config = configResult?.config;
   const showNodeNames = config?.showNodeNames !== false;
@@ -265,6 +270,7 @@ const ClusteredMarkers = React.memo(function ClusteredMarkers({ nodes, selectedN
             selectedNodeId={selectedNodeId}
             onNodeClick={onNodeClick}
             isLoadingNeighbors={isLoadingNeighbors}
+            target={target}
           />
         ))}
       </>
@@ -278,6 +284,7 @@ const ClusteredMarkers = React.memo(function ClusteredMarkers({ nodes, selectedN
         selectedNodeId={selectedNodeId}
         onNodeClick={onNodeClick}
         isLoadingNeighbors={isLoadingNeighbors}
+        target={target}
       />
     );
   }
@@ -346,7 +353,11 @@ function NeighborLines({
   );
 }
 
-export default function MapView() {
+interface MapViewProps {
+  target?: '_blank' | '_self' | '_parent' | '_top';
+}
+
+export default function MapView({ target = '_self' }: MapViewProps = {}) {
   const [nodePositions, setNodePositions] = useState<NodePosition[]>([]);
   const [bounds, setBounds] = useState<[[number, number], [number, number]] | null>(null);
   const [loading, setLoading] = useState(false);
@@ -607,6 +618,7 @@ export default function MapView() {
           selectedNodeId={selectedNodeId}
           onNodeClick={handleNodeClick}
           isLoadingNeighbors={neighborsLoading}
+          target={target}
         />
         <NeighborLines 
           selectedNodeId={selectedNodeId}