Merge pull request #61 from ipnet-mesh/feature/ui-improvements

Remove SNR column from messages and add last seen to members

src/meshcore_hub/web/static/js/utils.js

@@ -56,8 +56,23 @@ function populateReceiverTooltips() {
     });
 }
 
+/**
+ * Populate <time> elements with data-relative-time attribute
+ * Uses the datetime attribute as the timestamp source
+ */
+function populateRelativeTimeElements() {
+    document.querySelectorAll('time[data-relative-time]').forEach(el => {
+        const timestamp = el.getAttribute('datetime');
+        if (timestamp) {
+            const relTime = formatRelativeTime(timestamp);
+            el.textContent = relTime ? `${relTime} ago` : '';
+        }
+    });
+}
+
 // Auto-populate when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
     populateRelativeTimestamps();
     populateReceiverTooltips();
+    populateRelativeTimeElements();
 });

src/meshcore_hub/web/templates/members.html

@@ -50,7 +50,7 @@
                             📦
                             {% endif %}
                         </span>
-                        <div>
+                        <div class="flex-1 min-w-0">
                             {% if display_name %}
                             <div class="font-medium text-sm">{{ display_name }}</div>
                             <div class="font-mono text-xs opacity-60">{{ node.public_key[:12] }}...</div>
@@ -58,6 +58,9 @@
                             <div class="font-mono text-sm">{{ node.public_key[:12] }}...</div>
                             {% endif %}
                         </div>
+                        {% if node.last_seen %}
+                        <time class="text-xs opacity-60 whitespace-nowrap" datetime="{{ node.last_seen }}" title="{{ node.last_seen[:19].replace('T', ' ') }}" data-relative-time>-</time>
+                        {% endif %}
                     </a>
                     {% endfor %}
             </div>

src/meshcore_hub/web/templates/messages.html

@@ -79,9 +79,6 @@
                     </div>
                 </div>
                 <div class="flex items-center gap-2 flex-shrink-0">
-                    {% if msg.snr is not none %}
-                    <span class="badge badge-ghost badge-xs">{{ "%.1f"|format(msg.snr) }}dB</span>
-                    {% endif %}
                     {% if msg.receivers and msg.receivers|length >= 1 %}
                     <div class="flex gap-0.5">
                         {% for recv in msg.receivers %}
@@ -110,7 +107,6 @@
                 <th>Time</th>
                 <th>From/Channel</th>
                 <th>Message</th>
-                <th class="text-center">SNR</th>
                 <th>Receivers</th>
             </tr>
         </thead>
@@ -135,13 +131,6 @@
                     {% endif %}
                 </td>
                 <td class="break-words max-w-md" style="white-space: pre-wrap;">{{ msg.text or '-' }}</td>
-                <td class="text-center whitespace-nowrap">
-                    {% if msg.snr is not none %}
-                    <span class="badge badge-ghost badge-sm">{{ "%.1f"|format(msg.snr) }}</span>
-                    {% else %}
-                    -
-                    {% endif %}
-                </td>
                 <td>
                     {% if msg.receivers and msg.receivers|length >= 1 %}
                     <div class="flex gap-1">
@@ -158,7 +147,7 @@
             </tr>
             {% else %}
             <tr>
-                <td colspan="6" class="text-center py-8 opacity-70">No messages found.</td>
+                <td colspan="5" class="text-center py-8 opacity-70">No messages found.</td>
             </tr>
             {% endfor %}
         </tbody>