visual refactor

static/js/ui.js

@@ -0,0 +1,63 @@
+// static/js/ui.js
+(() => {
+    const docEl = document.documentElement;
+
+    // ---- THEME ----
+    const THEME_KEY = "pve-ui-theme";
+    const storedTheme = localStorage.getItem(THEME_KEY);
+    if (storedTheme === "light" || storedTheme === "dark") {
+        docEl.setAttribute("data-bs-theme", storedTheme);
+    }
+
+    const btnTheme = document.getElementById("btnTheme");
+    if (btnTheme) {
+        btnTheme.addEventListener("click", () => {
+            const current = docEl.getAttribute("data-bs-theme") === "light" ? "dark" : "light";
+            docEl.setAttribute("data-bs-theme", current);
+            localStorage.setItem(THEME_KEY, current);
+            btnTheme.innerHTML = current === "dark"
+                ? '<i class="bi bi-moon-stars"></i> Theme'
+                : '<i class="bi bi-sun"></i> Theme';
+        });
+    }
+
+    // ---- DENSITY ----
+    const DENSITY_KEY = "pve-ui-density";
+    const storedDensity = localStorage.getItem(DENSITY_KEY);
+    if (storedDensity === "compact") {
+        docEl.setAttribute("data-density", "compact");
+    }
+
+    const btnDensity = document.getElementById("btnDensity");
+    if (btnDensity) {
+        btnDensity.addEventListener("click", () => {
+            const isCompact = docEl.getAttribute("data-density") === "compact";
+            if (isCompact) {
+                docEl.removeAttribute("data-density");
+                localStorage.setItem(DENSITY_KEY, "normal");
+            } else {
+                docEl.setAttribute("data-density", "compact");
+                localStorage.setItem(DENSITY_KEY, "compact");
+            }
+        });
+    }
+
+    // ---- PRE blocks: keep nicely scrollable ----
+    const pres = document.querySelectorAll("pre.pre-scrollable");
+    pres.forEach((p) => {
+        p.style.maxHeight = "40vh";
+        p.style.overflow = "auto";
+    });
+
+    // Optional: subtle overflow shadows for horizontally scrollable areas
+    const scrollables = document.querySelectorAll(".table-responsive, .overflow-auto");
+    scrollables.forEach((el) => {
+        el.addEventListener("scroll", () => {
+            // Add classes for left/right shadow indicators
+            const atStart = el.scrollLeft <= 0;
+            const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+            el.classList.toggle("is-scrolled-start", !atStart);
+            el.classList.toggle("is-scrolled-end", !atEnd);
+        });
+    });
+})();