From e4244857615cef8153d1516e5eacd9cdaa0de984 Mon Sep 17 00:00:00 2001
From: l5y <220195275+l5yth@users.noreply.github.com>
Date: Tue, 16 Sep 2025 18:58:29 +0200
Subject: [PATCH] Add long name tooltip to short name badge (#102)

---
 web/views/index.erb | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/views/index.erb b/web/views/index.erb
index 57c88f7..3401011 100644
--- a/web/views/index.erb
+++ b/web/views/index.erb
@@ -255,13 +255,15 @@
         .replace(/'/g, '&#39;');
     }
 
-    function renderShortHtml(short, role){
+    function renderShortHtml(short, role, longName){
+      const safeTitle = longName ? escapeHtml(String(longName)) : '';
+      const titleAttr = safeTitle ? ` title="${safeTitle}"` : '';
       if (!short) {
-        return `<span class="short-name" style="background:#ccc">?&nbsp;&nbsp;&nbsp;</span>`;
+        return `<span class="short-name" style="background:#ccc"${titleAttr}>?&nbsp;&nbsp;&nbsp;</span>`;
       }
       const padded = escapeHtml(String(short).padStart(4, ' ')).replace(/ /g, '&nbsp;');
       const color = roleColors[role] || roleColors.CLIENT;
-      return `<span class="short-name" style="background:${color}">${padded}</span>`;
+      return `<span class="short-name" style="background:${color}"${titleAttr}>${padded}</span>`;
     }
 
     function appendChatEntry(div) {
@@ -292,7 +294,7 @@
       const div = document.createElement('div');
       const ts = formatTime(new Date(n.first_heard * 1000));
       div.className = 'chat-entry-node';
-      const short = renderShortHtml(n.short_name, n.role);
+      const short = renderShortHtml(n.short_name, n.role, n.long_name);
       const longName = escapeHtml(n.long_name || '');
       div.innerHTML = `[${ts}] ${short} <em>New node: ${longName}</em>`;
       appendChatEntry(div);
@@ -302,7 +304,7 @@
       maybeAddDateDivider(m.rx_time);
       const div = document.createElement('div');
       const ts = formatTime(new Date(m.rx_time * 1000));
-      const short = renderShortHtml(m.node?.short_name, m.node?.role);
+      const short = renderShortHtml(m.node?.short_name, m.node?.role, m.node?.long_name);
       const text = escapeHtml(m.text || '');
       div.className = 'chat-entry-msg';
       div.innerHTML = `[${ts}] ${short} ${text}`;
@@ -399,7 +401,7 @@
         const tr = document.createElement('tr');
         tr.innerHTML = `
           <td class="mono">${n.node_id || ""}</td>
-          <td>${renderShortHtml(n.short_name, n.role)}</td>
+          <td>${renderShortHtml(n.short_name, n.role, n.long_name)}</td>
           <td>${n.long_name || ""}</td>
           <td>${timeAgo(n.last_heard, nowSec)}</td>
           <td>${n.role || "CLIENT"}</td>
@@ -439,7 +441,7 @@
         });
         const lines = [
           `<b>${n.long_name || ''}</b>`,
-          `${renderShortHtml(n.short_name, n.role)} <span class="mono">${n.node_id || ''}</span>`,
+          `${renderShortHtml(n.short_name, n.role, n.long_name)} <span class="mono">${n.node_id || ''}</span>`,
           n.hw_model ? `Model: ${fmtHw(n.hw_model)}` : null,
           `Role: ${n.role || 'CLIENT'}`,
           (n.battery_level != null ? `Battery: ${fmtAlt(n.battery_level, "%")}, ${fmtAlt(n.voltage, "V")}` : null),