feat (ui): Light/Dark Theme added Complete

webui/html/assets/js/tabs/images.js

@@ -2,18 +2,44 @@ let imagesData = [];
 let imagesSort = { field: null, dir: null };
 
 async function loadImages() {
-  const res = await fetch("/api/images");
-  const images = await res.json();
+  const tbody = document.getElementById("images-tbody");
+  try {
+    const res = await fetch("/api/images");
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const images = await res.json();
 
-  imagesData = images;
-  updateSortIndicators();
-  applyImageSorting();
+    imagesData = Array.isArray(images) ? images : [];
+    if (typeof window.updateNavCount === "function") {
+      window.updateNavCount("countNavImages", imagesData.length);
+    }
+    updateSortIndicators();
+    applyImageSorting();
+  } catch (e) {
+    imagesData = [];
+    if (typeof window.updateNavCount === "function") {
+      window.updateNavCount("countNavImages", 0);
+    }
+    if (tbody) {
+      const box = (typeof window.renderStateBox === "function")
+        ? window.renderStateBox("error", "Images laden mislukt", e.message || String(e))
+        : "Images laden mislukt.";
+      tbody.innerHTML = `<tr><td colspan="8">${box}</td></tr>`;
+    }
+  }
 }
 
 function renderImages(images) {
   const tbody = document.getElementById("images-tbody");
   tbody.innerHTML = "";
 
+  if (!images.length) {
+    const box = (typeof window.renderStateBox === "function")
+      ? window.renderStateBox("empty", "Geen images", "Er zijn momenteel geen images gevonden.")
+      : "Geen images gevonden.";
+    tbody.innerHTML = `<tr><td colspan="8">${box}</td></tr>`;
+    return;
+  }
+
   images.forEach(img => {
     const tr = document.createElement("tr");