Add onboarding weather and template gradients

src/web/public/js/dashboard/dashboard-page.js

@@ -7,7 +7,9 @@
   var setButtonVariant = webUiHelpers.setButtonVariant;
   var normalizeDisplayIp = webUiHelpers.normalizeDisplayIp;
   var LIST_PAGE_SIZE = 25;
+  var CLIENT_ROW_REMOVAL_DELAY_MS = 1000;
   var latestDashboardState = null;
+  var pendingClientRowRemovals = {};
 
   function getClientSearchInput() {
     var table = document.getElementById('dashboard-clients-table');
@@ -276,6 +278,21 @@
       return compareClientSortValues(leftValue, rightValue);
     }
 
+    function compareClientNames(leftValue, rightValue) {
+      var leftName = String(leftValue || '').trim();
+      var rightName = String(rightValue || '').trim();
+      if (!leftName && !rightName) {
+        return 0;
+      }
+      if (!leftName) {
+        return 1;
+      }
+      if (!rightName) {
+        return -1;
+      }
+      return leftName.localeCompare(rightName, undefined, { sensitivity: 'base', numeric: true });
+    }
+
     var sortKeys = accessors[normalizedSortKey]
       ? [normalizedSortKey]
       : ['client'];
@@ -283,7 +300,9 @@
     return (Array.isArray(clients) ? clients.slice() : []).sort(function (leftClient, rightClient) {
       for (var index = 0; index < sortKeys.length; index += 1) {
         var sortKeyName = sortKeys[index];
-        var comparison = compareValues(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient));
+        var comparison = sortKeyName === 'client'
+          ? compareClientNames(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient))
+          : compareValues(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient));
 
         if (comparison !== 0) {
           return index === 0 && normalizedDirection === 'desc' ? comparison * -1 : comparison;
@@ -336,7 +355,7 @@
       form: document.getElementById('client-move-screen-form'),
       targetSelect: document.getElementById('client-move-screen-target'),
       connectionInput: document.querySelector('[data-client-move-connection-id]'),
-      deviceInput: document.querySelector('[data-client-move-device-id]'),
+      clientIdInput: document.querySelector('[data-client-move-client-id]'),
       clientNameInput: document.querySelector('[data-client-move-client-name]'),
       playerBaseUrlInput: document.querySelector('[data-client-move-player-base-url]')
     };
@@ -350,7 +369,7 @@
 
     var currentScreenSlug = String(row.getAttribute('data-client-screen-slug') || '').trim();
     var connectionId = String(row.getAttribute('data-client-id') || '').trim();
-    var deviceId = String(row.getAttribute('data-client-device-id') || '').trim();
+    var clientId = String(row.getAttribute('data-client-client-id') || '').trim();
     var playerBaseUrl = String(row.getAttribute('data-client-player-base-url') || '').trim();
     var clientNameCell = row.querySelector('td[data-label="Client"] > div');
     var clientName = String(clientNameCell && clientNameCell.textContent || '').trim();
@@ -367,8 +386,8 @@
     if (elements.connectionInput) {
       elements.connectionInput.value = connectionId;
     }
-    if (elements.deviceInput) {
-      elements.deviceInput.value = deviceId;
+    if (elements.clientIdInput) {
+      elements.clientIdInput.value = clientId;
     }
     if (elements.clientNameInput) {
       elements.clientNameInput.value = clientName;
@@ -687,11 +706,6 @@
       && typeof tbody.removeChild === 'function'
       && typeof document.createElement === 'function';
 
-    if (!visibleClients.length) {
-      tbody.innerHTML = '<tr><td colspan="' + (hasActionsColumn ? '7' : '6') + '" class="empty">No connected clients yet.</td></tr>';
-      return;
-    }
-
     if (!canPatchRows) {
       tbody.innerHTML = visibleClients.map(function (client) {
         return renderClientRow(client, hasActionsColumn);
@@ -704,8 +718,32 @@
       existingRows[String(row.getAttribute('data-client-key') || '').trim()] = row;
     });
 
+    var visibleRowKeys = {};
+    visibleClients.forEach(function (client) {
+      visibleRowKeys[String(getClientRowKey(client) || '').trim()] = true;
+    });
+
+    function getClientIdentity(client) {
+      return [
+        String(client && (client.client_name || client.name || '') || '').trim().toLowerCase(),
+        String(client && (client.player_url || client.playerPublicBaseUrl || '') || '').trim().replace(/\/$/, '').toLowerCase()
+      ].join('|');
+    }
+
+    var visibleClientIdentities = {};
+    visibleClients.forEach(function (client) {
+      var identity = getClientIdentity(client);
+      if (identity !== '|') {
+        visibleClientIdentities[identity] = true;
+      }
+    });
+
     var nextRows = visibleClients.map(function (client) {
       var rowKey = String(getClientRowKey(client) || '').trim();
+      if (pendingClientRowRemovals[rowKey]) {
+        clearTimeout(pendingClientRowRemovals[rowKey]);
+        delete pendingClientRowRemovals[rowKey];
+      }
       var row = existingRows[rowKey] || null;
 
       if (!row) {
@@ -719,6 +757,44 @@
       return Boolean(row);
     });
 
+    Object.keys(existingRows).forEach(function (rowKey) {
+      if (visibleRowKeys[rowKey]) {
+        return;
+      }
+
+      var existingRow = existingRows[rowKey];
+      var existingNameCell = existingRow.querySelector('td[data-label="Client"] > div');
+      var existingIdentity = [
+        String(existingNameCell && existingNameCell.textContent || '').trim().toLowerCase(),
+        String(existingRow.getAttribute('data-client-player-base-url') || '').trim().replace(/\/$/, '').toLowerCase()
+      ].join('|');
+      if (existingIdentity !== '|' && visibleClientIdentities[existingIdentity]) {
+        if (pendingClientRowRemovals[rowKey]) {
+          clearTimeout(pendingClientRowRemovals[rowKey]);
+          delete pendingClientRowRemovals[rowKey];
+        }
+        if (existingRow.parentNode === tbody) {
+          tbody.removeChild(existingRow);
+        }
+        return;
+      }
+
+      if (pendingClientRowRemovals[rowKey]) {
+        return;
+      }
+
+      pendingClientRowRemovals[rowKey] = setTimeout(function () {
+        delete pendingClientRowRemovals[rowKey];
+        var row = existingRows[rowKey];
+        if (row && row.parentNode === tbody && !visibleRowKeys[rowKey]) {
+          tbody.removeChild(row);
+        }
+        if (!tbody.querySelector('tr[data-client-key]')) {
+          tbody.innerHTML = '<tr><td colspan="' + (hasActionsColumn ? '7' : '6') + '" class="empty">No connected clients yet.</td></tr>';
+        }
+      }, CLIENT_ROW_REMOVAL_DELAY_MS);
+    });
+
     nextRows.forEach(function (row, index) {
       var referenceNode = tbody.children[index] || null;
       if (referenceNode !== row) {
@@ -726,8 +802,8 @@
       }
     });
 
-    while (tbody.children.length > nextRows.length) {
-      tbody.removeChild(tbody.lastElementChild);
+    if (!visibleClients.length && !tbody.querySelector('tr[data-client-key]')) {
+      tbody.innerHTML = '<tr><td colspan="' + (hasActionsColumn ? '7' : '6') + '" class="empty">No connected clients yet.</td></tr>';
     }
 
   }