big optimizations

Overlord-Server/public/assets/data.js

@@ -10,6 +10,31 @@ let dashboardWs = null;
 let dashboardWsConnected = false;
 let wsReconnectTimer = null;
 
+function moveClientCardImmediately(msg) {
+  const clientId = typeof msg?.clientId === "string" ? msg.clientId : "";
+  if (!clientId) return;
+  const selectorId =
+    typeof CSS !== "undefined" && typeof CSS.escape === "function"
+      ? CSS.escape(clientId)
+      : clientId;
+  const grid = document.getElementById("grid");
+  const card = grid?.querySelector(`article[data-id="${selectorId}"]`);
+  if (!grid || !card) return;
+
+  if (msg.event === "client_online") {
+    card.dataset.online = "true";
+    card.classList.remove("card-offline");
+    grid.prepend(card);
+    return;
+  }
+
+  if (msg.event === "client_offline") {
+    card.dataset.online = "false";
+    card.classList.add("card-offline");
+    grid.appendChild(card);
+  }
+}
+
 export function registerRenderer(fn) {
   render = fn;
 }
@@ -129,6 +154,11 @@ function connectDashboardWs() {
       const msg = typeof event.data === "string" ? JSON.parse(event.data) : null;
       if (msg && msg.type === "clients_changed") {
         loadWithOptions({ force: false, reorder: true });
+        return;
+      }
+      if (msg && msg.type === "client_event") {
+        moveClientCardImmediately(msg);
+        loadWithOptions({ force: false, reorder: true });
       }
     } catch {}
   };

Overlord-Server/public/assets/render.js

@@ -33,6 +33,13 @@ export function createRenderer({
   const TOUCH_MOVE_CANCEL_PX = 10;
   let renderToken = 0;
 
+  function reorderCards(items) {
+    items.forEach((client) => {
+      const card = grid.querySelector(`article[data-id="${client.id}"]`);
+      if (card) grid.appendChild(card);
+    });
+  }
+
   function renderMerge(data, options = {}) {
     const { reorder = false } = options;
     totalPill.textContent = `${data.online ?? data.total} online / ${data.total} total`;
@@ -66,10 +73,7 @@ export function createRenderer({
       .forEach((el) => el.remove());
 
     if (reorder) {
-      items.forEach((client) => {
-        const card = grid.querySelector(`article[data-id="${client.id}"]`);
-        if (card) grid.appendChild(card);
-      });
+      reorderCards(items);
     }
 
     if (newClients.length === 0) {
@@ -101,6 +105,7 @@ export function createRenderer({
         requestAnimationFrame(insertBatch);
         return;
       }
+      reorderCards(items);
     };
 
     insertBatch();