Show number of nodes with a seen User packet

index.html

@@ -20,6 +20,9 @@
                                 <td>
                                     <input id="filter-expr-input" type="text"/>
                                 </td>
+                                <td>
+                                    <div id="nodes-seen" title="Nodes with a seen User packet">000</div>
+                                </td>
                                 <td>
                                     <div class="theme-switch-wrapper">
                                         <label class="theme-switch">

meshmon.css

@@ -18,6 +18,7 @@
     --selected-decoded: #f9f978;
 
     --tooltip-bg-color: #bababa;
+    --nodes-seen-bg-color: #76c2fc;
 }
 
 [data-theme="dark"] {
@@ -37,6 +38,7 @@
     --selected-decoded: #56563c;
 
     --tooltip-bg-color: #111111;
+    --nodes-seen-bg-color: #005596;
 }
 
 body {
@@ -83,6 +85,9 @@ body {
 .table-main tbody tr {
     text-align: right;
 }
+.table-main tfoot tr td {
+    border: none;
+}
 
 .packet-header-row {
     background: var(--packet-header-bg-color)
@@ -127,6 +132,17 @@ body {
     border: 0;
 }
 
+#nodes-seen {
+    font-family: var(--font-family-verbatim);
+    background-color: var(--nodes-seen-bg-color);
+    margin-left: 30px;
+    width: 32px;
+    height: 20px;
+    align-content: center;
+    padding-right: 8px;
+    border-radius: 5px;
+}
+
 /* Row selection */
 
 .selected.packet-header-row {
@@ -142,7 +158,7 @@ body {
 /* Source code link logo */
 
 .logo {
-    height: 22px;
+    height: 16px;
 }
 .logo-light {
     display: var(--logo-light-mode);

meshmon.js

@@ -431,6 +431,8 @@ function mqttOnMessage(topic, message) {
         se.parsed.status == ParseResult.Ok) {
         const user = se.parsed.value.value;
         users.set(user.id, user);
+        document.getElementById('nodes-seen').innerHTML =
+            users.size.toString().padStart(3, '0');;
     }
 
     const scrollDown = window.scrollY + window.innerHeight + 42 > document.body.scrollHeight;