From 9f741da55033baa0825f81cf210ec5f1e9d5c8ab Mon Sep 17 00:00:00 2001
From: ajvpot <553597+ajvpot@users.noreply.github.com>
Date: Fri, 1 Aug 2025 07:58:33 +0200
Subject: [PATCH] format the node id and short name meshcore style

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

diff --git a/src/components/MapIcons.tsx b/src/components/MapIcons.tsx
index 4faefb1..e7d1602 100644
--- a/src/components/MapIcons.tsx
+++ b/src/components/MapIcons.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from "moment";
 import { formatPublicKey } from '../lib/meshcore';
+import { getNameIconLabel } from '../lib/meshcore-map-nodeutils';
 
 type NodePosition = {
   node_id: string;
@@ -40,7 +41,9 @@ export function NodeMarker({ node, showNodeNames = true }: NodeMarkerProps) {
   return (
     <div className="custom-node-marker-container">
       {showNodeNames && node.short_name && (
-        <div className="custom-node-label">{node.short_name}</div>
+        <div className="custom-node-label">
+          {node.type === "meshcore" ? getNameIconLabel(node.name || node.short_name) : node.short_name}
+        </div>
       )}
       <div className={getMarkerClass()}></div>
     </div>
@@ -147,7 +150,7 @@ export function PopupContent({ node }: PopupContentProps) {
     <div>
       <div><b>ID:</b> {node.type === "meshcore" ? formatPublicKey(node.node_id) : node.node_id}</div>
       <div><b>Full Name:</b> {node.name ?? "-"}</div>
-      <div><b>Short Name:</b> {node.short_name ?? "-"}</div>
+      <div><b>Short Name:</b> {node.type === "meshcore" && node.short_name ? getNameIconLabel(node.name || node.short_name) : (node.short_name ?? "-")}</div>
       <div><b>Type:</b> {node.type ?? "-"}</div>
       <div><b>Lat:</b> {node.latitude}</div>
       <div><b>Lng:</b> {node.longitude}</div>