Fine tune the admin UI.

data/www/components/uptime-card.js

@@ -0,0 +1,59 @@
+class UptimeCard extends HTMLElement {
+  constructor() {
+    super();
+    this.source = null;
+  }
+
+  connectedCallback() {
+    this.innerHTML = `
+      <style>
+        :host{display:block}section{height:100%;box-sizing:border-box}.liveValue{font-size:34px;font-weight:700;line-height:1.15;margin-top:10px}.state{display:inline-flex;align-items:center;gap:6px;margin-top:6px}.dot{width:9px;height:9px;border-radius:50%;background:#b3261e}.dot.on{background:#188038}
+      </style>
+      <section>
+        <h3>Live uptime</h3>
+        <div class="muted">Server-Sent Events</div>
+        <div class="liveValue"><span id="seconds">--</span>s</div>
+        <div class="muted state"><span id="dot" class="dot"></span><span id="state">Disconnected</span></div>
+      </section>`;
+    window.addEventListener('app:login', event => this.start(event.detail.token));
+    window.addEventListener('beforeunload', () => this.stop());
+    if (window.App && window.App.token()) this.start(window.App.token());
+  }
+
+  disconnectedCallback() {
+    this.stop();
+  }
+
+  setState(text, connected) {
+    this.querySelector('#state').textContent = text;
+    this.querySelector('#dot').classList.toggle('on', !!connected);
+  }
+
+  start(token) {
+    this.stop();
+    if (!token || !window.EventSource) {
+      this.setState('Unavailable', false);
+      return;
+    }
+    this.setState('Connecting', false);
+    this.source = new EventSource('/api/uptime/events?token=' + encodeURIComponent(token));
+    this.source.addEventListener('open', () => this.setState('Connected', true));
+    this.source.addEventListener('uptime', event => {
+      try {
+        const json = JSON.parse(event.data);
+        this.querySelector('#seconds').textContent = json.uptimeSeconds;
+        this.setState('Connected', true);
+      } catch (error) {
+        this.setState('Invalid event', false);
+      }
+    });
+    this.source.addEventListener('error', () => this.setState('Reconnecting', false));
+  }
+
+  stop() {
+    if (this.source) this.source.close();
+    this.source = null;
+  }
+}
+
+customElements.define('uptime-card', UptimeCard);