homebridge-unifi-protect 7.21.0 → 7.23.0

package/homebridge-ui/public/lib/webUi-featureoptions.mjs

@@ -156,6 +156,9 @@ import { FeatureOptions} from "./featureoptions.js";
  */
 export class webUiFeatureOptions {
 
+  // Map of category UI state indexed by context key (serial number or "global").
+  #categoryStates;
+
   // Table containing the currently displayed feature options.
   #configTable;
 
@@ -241,6 +244,7 @@ export class webUiFeatureOptions {
     } = options;
 
     // Initialize all our properties. We cache DOM elements for performance and maintain state for the current controller and device context.
+    this.#categoryStates = {};
     this.#configTable = document.getElementById("configTable");
     this.#controller = null;
     this.#controllersContainer = document.getElementById("controllersContainer");
@@ -476,19 +480,18 @@ export class webUiFeatureOptions {
 
           const isCollapsed = tbody.style.display === "none";
 
-          tbody.style.display = isCollapsed ? "" : "none";
-
-          const arrow = table.querySelector(".arrow");
+          // Use the shared method to update the state.
+          this.#setCategoryState(table, !isCollapsed);
 
-          if(arrow) {
+          document.getElementById("toggleAllCategories")?.updateState?.();
 
-            arrow.textContent = isCollapsed ? "\u25BC " : "\u25B6 ";
-          }
+          // Save the state after toggling this category.
+          const currentContext = this.#getCurrentContextKey();
 
-          // Update accessibility state to reflect the current expansion state for assistive technologies.
-          headerCell.setAttribute("aria-expanded", isCollapsed ? "true" : "false");
+          if(currentContext) {
 
-          document.getElementById("toggleAllCategories")?.updateState?.();
+            this.#saveCategoryStates(currentContext);
+          }
         }
 
         return;
@@ -556,13 +559,11 @@ export class webUiFeatureOptions {
 
         const searchInput = event.target;
 
-        if(!searchInput._searchTimeout) {
+        if(searchInput._searchTimeout) {
 
-          searchInput._searchTimeout = null;
+          clearTimeout(searchInput._searchTimeout);
         }
 
-        clearTimeout(searchInput._searchTimeout);
-
         searchInput._searchTimeout = setTimeout(() => {
 
           this.#handleSearch(searchInput.value.trim(),
@@ -691,6 +692,35 @@ export class webUiFeatureOptions {
     }
   }
 
+  /**
+   * Set the expansion state of a category table.
+   *
+   * @param {HTMLTableElement} table - The category table element.
+   * @param {boolean} isCollapsed - True to collapse, false to expand.
+   * @private
+   */
+  #setCategoryState(table, isCollapsed) {
+
+    const tbody = table.querySelector("tbody");
+    const arrow = table.querySelector(".arrow");
+    const headerCell = table.querySelector("thead th[role='button']");
+
+    if(tbody) {
+
+      tbody.style.display = isCollapsed ? "none" : "";
+    }
+
+    if(arrow) {
+
+      arrow.textContent = isCollapsed ? "\u25B6 " : "\u25BC ";
+    }
+
+    if(headerCell) {
+
+      headerCell.setAttribute("aria-expanded", isCollapsed ? "false" : "true");
+    }
+  }
+
   /**
    * Hide the feature options webUI and clean up all resources.
    *
@@ -726,6 +756,13 @@ export class webUiFeatureOptions {
    */
   #showGlobalOptions() {
 
+    // Save the current UI state before switching contexts.
+    const previousContext = this.#getCurrentContextKey();
+
+    if(previousContext && this.#configTable.querySelector("table[data-category]")) {
+
+      this.#saveCategoryStates(previousContext);
+    }
 
     // Clear the devices container since global options don't have associated devices, but only when we have controllers defined.
     if(this.#getControllers) {
@@ -750,6 +787,14 @@ export class webUiFeatureOptions {
    */
   async #showControllerOptions(controllerSerial) {
 
+    // Save the current UI state before switching contexts.
+    const previousContext = this.#getCurrentContextKey();
+
+    if(previousContext && this.#configTable.querySelector("table[data-category]")) {
+
+      this.#saveCategoryStates(previousContext);
+    }
+
     const entry = (await this.#getControllers())?.find(c => c.serialNumber === controllerSerial);
 
     if(!entry) {
@@ -788,6 +833,23 @@ export class webUiFeatureOptions {
     // Make sure we have the refreshed configuration. This ensures we're always working with the latest saved settings.
     this.currentConfig = await homebridge.getPluginConfig();
 
+    // Load any persisted UI states from localStorage.
+    try {
+
+      const storageKey = "homebridge-" + (this.currentConfig[0]?.platform ?? "plugin") + "-category-states";
+      const stored = window.localStorage.getItem(storageKey);
+
+      if(stored) {
+
+        this.#categoryStates = JSON.parse(stored);
+      }
+
+      // eslint-disable-next-line no-unused-vars
+    } catch(error) {
+
+      this.#categoryStates = {};
+    }
+
     // Keep our revert snapshot aligned with whatever was *last saved* (not just first render).
     // We compare to the current config and update the snapshot if it differs, so "Revert to Saved" reflects the latest saved state.
     const loadedOptions = (this.currentConfig[0]?.options ?? []);
@@ -809,6 +871,9 @@ export class webUiFeatureOptions {
     // Ensure the DOM is ready before we render our UI. We wait for Bootstrap styles to be applied before proceeding.
     await this.#waitForBootstrap();
 
+    // Initialize theme sync before injecting styles so CSS variables are defined and current.
+    await this.#setupThemeAutoUpdate();
+
     // Add our custom styles for hover effects, dark mode support, and modern layouts. These enhance the visual experience and ensure consistency with the
     // Homebridge UI theme.
     this.#injectCustomStyles();
@@ -969,11 +1034,14 @@ export class webUiFeatureOptions {
 
     const headerInfo = document.getElementById("headerInfo");
 
-    headerInfo.style.fontWeight = "bold";
-    headerInfo.innerHTML = "Feature options are applied in prioritized order, from global to device-specific options:" +
-      "<br><i class=\"text-warning\">Global options</i> (lowest priority) &rarr; " +
-      (this.#getControllers ? "<i class=\"text-success\">Controller options</i> &rarr; " : "") +
-      "<i class=\"text-info\">Device options</i> (highest priority)";
+    if(headerInfo) {
+
+      headerInfo.style.fontWeight = "bold";
+      headerInfo.innerHTML = "Feature options are applied in prioritized order, from global to device-specific options:" +
+        "<br><i class=\"text-warning\">Global options</i> (lowest priority) &rarr; " +
+        (this.#getControllers ? "<i class=\"text-success\">Controller options</i> &rarr; " : "") +
+        "<i class=\"text-info\">Device options</i> (highest priority)";
+    }
   }
 
   /**
@@ -1061,198 +1129,6 @@ export class webUiFeatureOptions {
     }
   }
 
-  /**
-   * Inject custom styles for hover effects, dark mode support, and modern layouts.
-   *
-   * These styles enhance the visual experience and ensure our UI integrates well with both light and dark modes. We use media queries to automatically adapt
-   * to the user's system preferences. The styles include support for flexbox layouts, responsive design, and theme-aware coloring.
-   *
-   * @private
-   */
-  #injectCustomStyles() {
-
-    // Ensure we do not inject duplicate styles when re-entering this view. We make this idempotent for stability across navigations.
-    if(document.getElementById("feature-options-styles")) {
-
-      return;
-    }
-
-    // Extract our theme color from .btn-primary to ensure consistency with the Homebridge theme.
-    const probeBtn = document.createElement("button");
-
-    probeBtn.className = "btn btn-primary";
-    probeBtn.style.display = "none";
-    document.body.appendChild(probeBtn);
-
-    this.#themeColor.background = getComputedStyle(probeBtn).backgroundColor;
-    this.#themeColor.text = getComputedStyle(probeBtn).color;
-
-    document.body.removeChild(probeBtn);
-
-    // Quick utility to help us convert RGB values to RGBA for use in CSS.
-    const rgba = (rgb, alpha) => {
-
-      const match = rgb.match(/\d+/g);
-
-      if(!match || (match.length < 3)) {
-
-        return rgb;
-      }
-
-      return "rgba(" + match[0] + ", " + match[1] + ", " + match[2] + ", " + alpha + ")";
-    };
-
-    const styles = [
-
-      /* eslint-disable @stylistic/max-len */
-      // Remove margin collapse and enable clean layout flow.
-      "html, body { margin: 0; padding: 0; }",
-
-      // Compensate for misbehavior in Homebridge Config UI X when switching to or from dark mode.
-      "body { background-color: #fff !important; }",
-
-      // Page root uses a column layout with full width.
-      "#pageFeatureOptions { display: flex !important; flex-direction: column; width: 100%; }",
-
-      // Sidebar + content layout is horizontal (row).
-      ".feature-main-content { display: flex !important; flex-direction: row !important; width: 100%; }",
-
-      // Sidebar layout and appearance.
-      "#sidebar { display: block; width: 200px; min-width: 200px; max-width: 200px; background-color: var(--bs-gray-100); position: relative; }",
-
-      // Remove internal scrolling from sidebar content.
-      "#sidebar .sidebar-content { padding: 0rem; overflow: unset; }",
-
-      // Sidebar containers.
-      "#controllersContainer { padding: 0; margin-bottom: 0; }",
-      "#devicesContainer { padding: 0; margin-top: 0; padding-top: 0 !important; }",
-
-      // Feature content (right-hand pane).
-      ".feature-content { display: flex !important; flex-direction: column !important; flex: 1 1 auto; min-width: 0; }",
-      ".category-border { border: 1px solid " + this.#themeColor.background + " !important; box-shadow: 0 0 0 1px " + rgba(this.#themeColor.background, 0.1) + "; }",
-
-      // Ensure the table itself uses separate borders when we have rounded tbody elements. This is necessary for border-radius to work properly.
-      "table[data-category] { border-collapse: separate !important; border-spacing: 0; }",
-
-      // How we define row visibility for feature options. We need this complexity because we hide or make visible rows depending on what the user has chosen to expose.
-      //
-      // "table[data-category] tbody tr.fo-visible,"
-      // "table[data-category] tbody tr:not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none']){}",
-
-      // Create the outer border of the table on the left and right sides.
-      "table[data-category] tbody tr:not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none']) td:first-child{",
-      "  border-left:1px solid " + this.#themeColor.background + ";",
-      "}",
-      "table[data-category] tbody tr:not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none']) td:last-child{",
-      "  border-right:1px solid " + this.#themeColor.background + ";",
-      "}",
-
-      // Provide the top border on the first visible row.
-      "table[data-category] tbody tr:nth-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td{",
-      "  border-top:1px solid " + this.#themeColor.background + ";",
-      "}",
-
-      // Provide the bottom border on the last visible row.
-      "table[data-category] tbody tr:nth-last-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td{",
-      "  border-bottom:1px solid " + this.#themeColor.background + ";",
-      "}",
-
-      // Create rounded corners at the top and bottom rows.
-      "table[data-category] tbody tr:nth-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td:first-child{",
-      "  border-top-left-radius:.5rem;",
-      "}",
-      "table[data-category] tbody tr:nth-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td:last-child{",
-      "  border-top-right-radius:.5rem;",
-      "}",
-      "table[data-category] tbody tr:nth-last-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td:first-child{",
-      "  border-bottom-left-radius:.5rem;",
-      "}",
-      "table[data-category] tbody tr:nth-last-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td:last-child{",
-      "  border-bottom-right-radius:.5rem;",
-      "}",
-
-      // Main options area - remove scroll behavior, just layout styling.
-      ".options-content { padding: 1rem; margin: 0; }",
-
-      // Info header styling.
-      "#headerInfo { flex-shrink: 0; padding: 0.5rem !important; margin-bottom: 0.5rem !important; }",
-
-      // Device stats grid layout.
-      ".device-stats-grid { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; padding: 0 0.75rem; flex-wrap: nowrap; overflow: hidden; }",
-      ".device-stats-grid .stat-item:first-child { flex: 0 0 25% }",
-      ".device-stats-grid .stat-item:not(:first-child) { flex-grow: 1; min-width: 0; }",
-
-      ".stat-item { display: flex; flex-direction: column; gap: 0.125rem; }",
-      ".stat-label { font-weight: 600; color: var(--bs-gray-600); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
-      ".stat-value { font-size: 0.875rem; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
-
-      // Responsive hiding for our device stats grid.
-      "@media (max-width: 700px) { .device-stats-grid .stat-item:nth-last-of-type(1) { display: none !important; } }",
-      "@media (max-width: 500px) { .device-stats-grid .stat-item:nth-last-of-type(2) { display: none !important; } }",
-      "@media (max-width: 300px) { .device-stats-grid .stat-item:nth-last-of-type(3) { display: none !important; } }",
-
-      // Responsive hiding for feature option status information.
-      "@media (max-width: 400px) { #statusInfo { display: none !important; } }",
-
-      // Navigation styles.
-      ".nav-link { border-radius: 0.375rem; transition: all 0.2s; position: relative; padding: 0.25rem 0.75rem !important; line-height: 1.2; font-size: 0.8125rem; }",
-      ".nav-link:hover { background-color: " + rgba(this.#themeColor.background, 0.1) + "; color: " + this.#themeColor.background + " !important; }",
-      ".nav-link.active { background-color: " + this.#themeColor.background + "; color: " + this.#themeColor.text + " !important; }",
-      ".nav-header { border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 0.125rem; padding: 0.25rem 0.75rem !important; font-size: 0.75rem !important; line-height: 1.2; }",
-      "#devicesContainer .nav-header { font-weight: 600; margin-top: 0 !important; padding-top: 0.5rem !important; }",
-      "#controllersContainer .nav-header { font-weight: 600; margin-top: 0 !important; padding-top: 0.5rem !important; }",
-
-      // Search bar.
-      ".search-toolbar { border-radius: 0.5rem; padding: 0 0 0.5rem 0; }",
-      ".search-input-wrapper { min-width: 0; }",
-      ".filter-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }",
-
-      // Grouped option visual indicator.
-      ".grouped-option { background-color: " + rgba(this.#themeColor.background, 0.08) + "; }",
-      ".grouped-option td:nth-child(2) label { padding-left: 20px; position: relative; }",
-      ".grouped-option td:nth-child(2) label::before { content: \"\\21B3\"; position: absolute; left: 4px; color: #666; }",
-
-      // Dark mode refinements.
-      "@media (prefers-color-scheme: dark) {",
-
-      // Compensate for misbehavior in Homebridge Config UI X when switching to or from dark mode.
-      "  body { background-color: #242424 !important; }",
-      "  #sidebar { background-color: #1A1A1A !important; }",
-      "  .nav-header { border-bottom-color: rgba(255, 255, 255, 0.1); }",
-      "  .text-body { color: #999 !important; }",
-      "  .text-muted { color: #999 !important; }",
-      "  .device-stats-grid { background-color: #1A1A1A; border-color: #444; }",
-      "  .stat-label { color: #999; }",
-      "  .stat-value { color: #999; }",
-      "  #search .form-control { background-color: #1A1A1A; border-color: #444; color: #F8F9FA; }",
-      "  #search .form-control:focus { background-color: #1A1A1A; border-color: #666; color: #F8F9FA; box-shadow: 0 0 0 0.2rem rgba(255, 160, 0, 0.25); }",
-      "  #search .form-control::placeholder { color: #999; }",
-      "  #statusInfo .text-muted { color: #B8B8B8 !important; }",
-      "}",
-
-      // Table hover styling.
-      ".table-hover tbody tr { transition: background-color 0.15s; }",
-      ".table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.03); }",
-      "@media (prefers-color-scheme: dark) { .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.20); } }",
-
-      // Utility styles.
-      ".btn-xs { font-size: 0.75rem !important; padding: 0.125rem 0.5rem !important; line-height: 1.5; touch-action: manipulation; }",
-      ".cursor-pointer { cursor: pointer; }",
-      ".user-select-none { user-select: none; -webkit-user-select: none; }",
-
-      // Use CSS for the category header hover emphasis to avoid JS event handlers for simple hover effects.
-      "table[data-category] thead th[role='button']:hover { color: " + this.#themeColor.background + " !important; }",
-
-      // Respect reduced motion settings for accessibility.
-      "@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }"
-      /* eslint-enable @stylistic/max-len */
-    ];
-
-    const styleElement = this.#createElement("style", { id: "feature-options-styles" }, [styles.join("\n")]);
-
-    document.head.appendChild(styleElement);
-  }
-
   /**
    * Show the device list taking the controller context into account.
    *
@@ -1467,6 +1343,15 @@ export class webUiFeatureOptions {
 
     homebridge.showSpinner();
 
+    // Retrieve our current context before we change the active link.
+    const previousActive = this.#devicesContainer.querySelector(".nav-link.active[data-navigation='device']");
+
+    // Save the current category UI state before switching contexts.
+    if(previousActive && (previousActive.name !== deviceId) && this.#configTable.querySelector("table[data-category]")) {
+
+      this.#saveCategoryStates(previousActive.name);
+    }
+
     // Clean up event listeners from previous option displays. This ensures we don't accumulate listeners as users navigate between devices.
     this.#cleanupOptionEventListeners();
 
@@ -1487,6 +1372,9 @@ export class webUiFeatureOptions {
     // Create option tables for each category. Categories group related options together for better organization.
     this.#createOptionTables(currentDevice);
 
+    // Restore saved category UI state context for this device.
+    this.#restoreCategoryStates(deviceId);
+
     // Set up search functionality if available. This includes debounced search and keyboard shortcuts.
     this.#setupSearchFunctionality();
 
@@ -1565,7 +1453,7 @@ export class webUiFeatureOptions {
       return;
     }
 
-    this.#deviceStatsContainer.style.display = device ? "" : "none";
+    this.#deviceStatsContainer.style.display = "";
     this.#infoPanel(device);
   }
 
@@ -1995,6 +1883,14 @@ export class webUiFeatureOptions {
     }
 
     toggleBtn.updateState();
+
+    // Save the category UI state after toggling all categories.
+    const currentContext = this.#getCurrentContextKey();
+
+    if(currentContext) {
+
+      this.#saveCategoryStates(currentContext);
+    }
   }
 
   /**
@@ -2041,6 +1937,7 @@ export class webUiFeatureOptions {
     // Create a unique id for the tbody so that the header can reference it for accessibility.
     const tbodyId = "tbody-" + category.name.replace(/\s+/g, "-");
 
+    // We default category tables to collapsed.
     const tbody = this.#createElement("tbody", {
 
       classList: [ "border", "category-border" ],
@@ -2121,6 +2018,7 @@ export class webUiFeatureOptions {
 
     const scopeLabel = !currentDevice ? " (Global)" : (this.#ui.isController(currentDevice) ? " (Controller-specific)" : " (Device-specific)");
 
+    // We default category tables to collapsed.
     const th = this.#createElement("th", {
 
       "aria-controls": tbodyId,
@@ -2390,6 +2288,98 @@ export class webUiFeatureOptions {
     return label;
   }
 
+  /**
+   * Save the current category UI state for the given context.
+   *
+   * @param {string} contextKey - The context identifier (device serial or "Global Options").
+   * @private
+   */
+  #saveCategoryStates(contextKey) {
+
+    const states = {};
+    const tables = document.querySelectorAll("#configTable table[data-category]");
+
+    for(const table of tables) {
+
+      const categoryName = table.getAttribute("data-category");
+      const tbody = table.querySelector("tbody");
+
+      if(tbody) {
+
+        // Store true if collapsed (display: none), false if expanded.
+        states[categoryName] = tbody.style.display === "none";
+      }
+    }
+
+    this.#categoryStates[contextKey] = states;
+
+    // Finally, we persist to localStorage to remember user preferences.
+    try {
+
+      const storageKey = "homebridge-" + (this.currentConfig[0]?.platform ?? "plugin") + "-category-states";
+
+      window.localStorage.setItem(storageKey, JSON.stringify(this.#categoryStates));
+
+      // eslint-disable-next-line no-empty, no-unused-vars
+    } catch(error) {
+
+    }
+  }
+
+  /**
+   * Restore saved category UI state for the given context.
+   *
+   * @param {string} contextKey - The context identifier (device serial or "Global Options").
+   * @private
+   */
+  #restoreCategoryStates(contextKey) {
+
+    const savedStates = this.#categoryStates[contextKey];
+
+    if(!savedStates) {
+
+      return;
+    }
+
+    const tables = document.querySelectorAll("#configTable table[data-category]");
+
+    for(const table of tables) {
+
+      const categoryName = table.getAttribute("data-category");
+
+      if(categoryName in savedStates) {
+
+        this.#setCategoryState(table, savedStates[categoryName]);
+      }
+    }
+
+    // Update the toggle button state after restoring.
+    document.getElementById("toggleAllCategories")?.updateState?.();
+  }
+
+  /**
+   * Get the current context key for UI state tracking.
+   *
+   * @returns {string} The context key for the current view.
+   * @private
+   */
+  #getCurrentContextKey() {
+
+    // Check devices first - if there's an active device, that's our context.
+    const activeDevice = this.#devicesContainer.querySelector(".nav-link.active[data-navigation='device']");
+
+    if(activeDevice) {
+
+      return activeDevice.name;
+    }
+
+    // No active device, so check for either the active controller or global context.
+    const activeController = this.#controllersContainer.querySelector(".nav-link.active[data-navigation]");
+
+    // Default to our global options if we don't have a current controller.
+    return (activeController?.name !== "Global Options") ? this.#devices[0].serialNumber : "Global Options";
+  }
+
   /**
    * Handle option state changes with full hierarchy and dependency management.
    *
@@ -2930,6 +2920,11 @@ export class webUiFeatureOptions {
    */
   #showDeviceInfoPanel(device) {
 
+    if(!this.#deviceStatsContainer) {
+
+      return;
+    }
+
     if(!device) {
 
       this.#deviceStatsContainer.textContent = "";
@@ -3109,10 +3104,11 @@ export class webUiFeatureOptions {
 
           row.style.display = this.#rowMatchesFilter(row, filterType) ? "" : "none";
         }
-      } else {
 
-        row.style.display = this.#rowMatchesFilter(row, filterType) ? "" : "none";
+        continue;
       }
+
+      row.style.display = this.#rowMatchesFilter(row, filterType) ? "" : "none";
     }
 
     // Update counts and visibility. We need to update various UI elements to reflect the filtered view.
@@ -3145,11 +3141,13 @@ export class webUiFeatureOptions {
     switch(filterType) {
 
       case "modified":
+
         // Modified options have the text-info class to indicate they differ from defaults.
         return row.querySelector("label")?.classList.contains("text-info") ?? false;
 
       case "all":
       default:
+
         return true;
     }
   }
@@ -3403,6 +3401,282 @@ export class webUiFeatureOptions {
     }
   }
 
+  /**
+   * Inject custom styles for hover effects, dark mode support, and modern layouts.
+   *
+   * These styles enhance the visual experience and ensure our UI integrates well with both light and dark modes. We use media queries to automatically adapt
+   * to the user's system preferences. The styles include support for flexbox layouts, responsive design, and theme-aware coloring.
+   *
+   * @private
+   */
+  #injectCustomStyles() {
+
+    // Ensure we do not inject duplicate styles when re-entering this view. We make this idempotent for stability across navigations.
+    if(document.getElementById("feature-options-styles")) {
+
+      return;
+    }
+
+    const styles = [
+
+      /* eslint-disable @stylistic/max-len */
+      // Define CSS variables used throughout our webUI. We update these when the theme changes so the UI can respond according to the visual environment.
+      ":root {",
+      "  --plugin-primary-bg: " + this.#themeColor.background + ";",
+      "  --plugin-primary-fg: " + this.#themeColor.text + ";",
+      "  --plugin-primary-hover: rgba(0,0,0,0.05); /* placeholder, JS will override with a color-specific value */",
+      "  --plugin-primary-subtle: rgba(0,0,0,0.03); /* placeholder, JS will override with a color-specific value */",
+      "  --plugin-body-bg-light: #ffffff;",
+      "  --plugin-body-bg-dark: #242424;",
+      "  --plugin-sidebar-bg-light: var(--bs-gray-100);",
+      "  --plugin-sidebar-bg-dark: #1A1A1A;",
+      "}",
+
+      // We start with a base layout reset - remove margin collapse and enable clean layout flow.
+      "html, body { margin: 0; padding: 0; }",
+
+      // Theme-scoped body and sidebar backgrounds. We scope to app-driven theme first.
+      ":root[data-plugin-theme='light'] body { background-color: var(--plugin-body-bg-light) !important; }",
+      ":root[data-plugin-theme='dark'] body { background-color: var(--plugin-body-bg-dark) !important; }",
+      ":root[data-plugin-theme='light'] #sidebar { background-color: var(--plugin-sidebar-bg-light) !important; }",
+      ":root[data-plugin-theme='dark'] #sidebar { background-color: var(--plugin-sidebar-bg-dark) !important; }",
+
+      // Page root uses a column layout with full width.
+      "#pageFeatureOptions { display: flex !important; flex-direction: column; width: 100%; }",
+
+      // Sidebar + content layout is horizontal (row).
+      ".feature-main-content { display: flex !important; flex-direction: row !important; width: 100%; }",
+
+      // Sidebar layout and appearance.
+      "#sidebar { display: block; width: 200px; min-width: 200px; max-width: 200px; position: relative; }",
+
+      // Remove internal scrolling from sidebar content.
+      "#sidebar .sidebar-content { padding: 0rem; overflow: unset; }",
+
+      // Sidebar containers.
+      "#controllersContainer { padding: 0; margin-bottom: 0; }",
+      "#devicesContainer { padding: 0; margin-top: 0; padding-top: 0 !important; }",
+
+      // Feature content (right-hand pane).
+      ".feature-content { display: flex !important; flex-direction: column !important; flex: 1 1 auto; min-width: 0; }",
+      // ".category-border { border: 1px solid " + this.#themeColor.background + " !important; box-shadow: 0 0 0 1px " + rgba(this.#themeColor.background, 0.1) + "; }",
+      ".category-border { border: 1px solid var(--plugin-primary-bg) !important; box-shadow: 0 0 0 1px var(--plugin-primary-hover); }",
+
+      // Ensure the table itself uses separate borders when we have rounded tbody elements. This is necessary for border-radius to work properly.
+      "table[data-category] { border-collapse: separate !important; border-spacing: 0; }",
+
+      // How we define row visibility for feature options. We need this complexity because we hide or make visible rows depending on what the user has chosen to expose.
+      //
+      // "table[data-category] tbody tr.fo-visible,"
+      // "table[data-category] tbody tr:not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none']){}",
+
+      // Create the outer border of the table on the left and right sides.
+      "table[data-category] tbody tr:not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none']) td:first-child{",
+      "  border-left:1px solid var(--plugin-primary-bg);",
+      "}",
+      "table[data-category] tbody tr:not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none']) td:last-child{",
+      "  border-right:1px solid var(--plugin-primary-bg);",
+      "}",
+
+      // Provide the top border on the first visible row.
+      "table[data-category] tbody tr:nth-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td{",
+      "  border-top:1px solid var(--plugin-primary-bg);",
+      "}",
+
+      // Provide the bottom border on the last visible row.
+      "table[data-category] tbody tr:nth-last-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td{",
+      "  border-bottom:1px solid var(--plugin-primary-bg);",
+      "}",
+
+      // Create rounded corners at the top and bottom rows.
+      "table[data-category] tbody tr:nth-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td:first-child{",
+      "  border-top-left-radius:.5rem;",
+      "}",
+      "table[data-category] tbody tr:nth-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td:last-child{",
+      "  border-top-right-radius:.5rem;",
+      "}",
+      "table[data-category] tbody tr:nth-last-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td:first-child{",
+      "  border-bottom-left-radius:.5rem;",
+      "}",
+      "table[data-category] tbody tr:nth-last-child(1 of :not([hidden]):not(.d-none):not(.is-hidden):not([style*='display: none'])) td:last-child{",
+      "  border-bottom-right-radius:.5rem;",
+      "}",
+
+      // Main options area - remove scroll behavior, just layout styling.
+      ".options-content { padding: 1rem; margin: 0; }",
+
+      // Info header styling.
+      "#headerInfo { flex-shrink: 0; padding: 0.5rem !important; margin-bottom: 0.5rem !important; }",
+
+      // Device stats grid layout.
+      ".device-stats-grid { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; padding: 0 0.75rem; flex-wrap: nowrap; overflow: hidden; }",
+      ".device-stats-grid .stat-item:first-child { flex: 0 0 25% }",
+      ".device-stats-grid .stat-item:not(:first-child) { flex-grow: 1; min-width: 0; }",
+
+      ".stat-item { display: flex; flex-direction: column; gap: 0.125rem; }",
+      ".stat-label { font-weight: 600; color: var(--bs-gray-600); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+      ".stat-value { font-size: 0.875rem; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+
+      // Responsive hiding for our device stats grid.
+      "@media (max-width: 700px) { .device-stats-grid .stat-item:nth-last-of-type(1) { display: none !important; } }",
+      "@media (max-width: 500px) { .device-stats-grid .stat-item:nth-last-of-type(2) { display: none !important; } }",
+      "@media (max-width: 300px) { .device-stats-grid .stat-item:nth-last-of-type(3) { display: none !important; } }",
+
+      // Responsive hiding for feature option status information.
+      "@media (max-width: 400px) { #statusInfo { display: none !important; } }",
+
+      // Navigation styles.
+      ".nav-link { border-radius: 0.375rem; transition: all 0.2s; position: relative; padding: 0.25rem 0.75rem !important; line-height: 1.2; font-size: 0.8125rem; }",
+      ".nav-link:hover { background-color: var(--plugin-primary-hover); color: var(--plugin-primary-bg) !important; }",
+      ".nav-link.active { background-color: var(--plugin-primary-bg); color: var(--plugin-primary-fg) !important; }",
+      ".nav-header { border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 0.125rem; padding: 0.25rem 0.75rem !important; font-size: 0.75rem !important; line-height: 1.2; }",
+      "#devicesContainer .nav-header { font-weight: 600; margin-top: 0 !important; padding-top: 0.5rem !important; }",
+      "#controllersContainer .nav-header { font-weight: 600; margin-top: 0 !important; padding-top: 0.5rem !important; }",
+
+      // Search bar.
+      ".search-toolbar { border-radius: 0.5rem; padding: 0 0 0.5rem 0; }",
+      ".search-input-wrapper { min-width: 0; }",
+      ".filter-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }",
+
+      // Grouped option visual indicator.
+      ".grouped-option { background-color: var(--plugin-primary-subtle); }",
+      ".grouped-option td:nth-child(2) label { padding-left: 20px; position: relative; }",
+      ".grouped-option td:nth-child(2) label::before { content: \"\\21B3\"; position: absolute; left: 4px; color: #666; }",
+
+      // Dark-mode refinements.
+      ":root[data-plugin-theme='dark'] .nav-header { border-bottom-color: rgba(255, 255, 255, 0.1); }",
+      ":root[data-plugin-theme='dark'] .text-body { color: #999 !important; }",
+      ":root[data-plugin-theme='dark'] .text-muted { color: #999 !important; }",
+      ":root[data-plugin-theme='dark'] .device-stats-grid { background-color: #1A1A1A; border-color: #444; }",
+      ":root[data-plugin-theme='dark'] .stat-label { color: #999; }",
+      ":root[data-plugin-theme='dark'] .stat-value { color: #999; }",
+      ":root[data-plugin-theme='dark'] #search .form-control { background-color: #1A1A1A; border-color: #444; color: #F8F9FA; }",
+      ":root[data-plugin-theme='dark'] #search .form-control:focus { background-color: #1A1A1A; border-color: #666; color: #F8F9FA; box-shadow: 0 0 0 0.2rem rgba(255, 160, 0, 0.25); }",
+      ":root[data-plugin-theme='dark'] #search .form-control::placeholder { color: #999; }",
+      ":root[data-plugin-theme='dark'] #statusInfo .text-muted { color: #B8B8B8 !important; }",
+
+      // Table hover styling.
+      ".table-hover tbody tr { transition: background-color 0.15s; }",
+      ":root[data-plugin-theme='light'] .table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.03); }",
+      ":root[data-plugin-theme='dark'] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.20); }",
+
+
+      // Utility styles.
+      ".btn-xs { font-size: 0.75rem !important; padding: 0.125rem 0.5rem !important; line-height: 1.5; touch-action: manipulation; }",
+      ".cursor-pointer { cursor: pointer; }",
+      ".user-select-none { user-select: none; -webkit-user-select: none; }",
+
+      // Use CSS for the category header hover emphasis to avoid JS event handlers for simple hover effects.
+      "table[data-category] thead th[role='button']:hover { color: var(--plugin-primary-bg) !important; }",
+
+      // Respect reduced motion settings for accessibility.
+      "@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }"
+      /* eslint-enable @stylistic/max-len */
+    ];
+
+    const styleElement = this.#createElement("style", { id: "feature-options-styles" }, [styles.join("\n")]);
+
+    document.head.appendChild(styleElement);
+  }
+
+  /**
+   * Set up automatic theme detection and live updates.
+   *
+   * We rely on Config UI X to tell us what the preferred color scheme is. Once we have it, we recompute our color variables derived from .btn-primary whenever the theme
+   * changes before mirroring all that to :root[data-plugin-theme="light|dark"] so our injected CSS is instantly reflected in our webUI.
+   *
+   * @private
+   */
+  async #setupThemeAutoUpdate() {
+
+    // Apply the current theme lighting mode and compute color variables.
+    this.#setPluginTheme(await homebridge.userCurrentLightingMode());
+
+    // Finally, we listen for system and browser changes to the current dark mode setting.
+    this.#addEventListener(window.matchMedia("(prefers-color-scheme: dark)"), "change", async () => this.#setPluginTheme(await homebridge.userCurrentLightingMode()));
+  }
+
+  /**
+   * Apply the current theme to :root and recompute JS-derived CSS variables.
+   *
+   * @param {"light"|"dark"} mode
+   * @private
+   */
+  #setPluginTheme(mode) {
+
+    // Sanity check.
+    if(![ "dark", "light" ].includes(mode)) {
+
+      return;
+    }
+
+    // See if we're already set appropriately. If so, we're done.
+    const current = document.documentElement.getAttribute("data-plugin-theme");
+
+    if(current === mode) {
+
+      return;
+    }
+
+    // Update our theme.
+    document.documentElement.setAttribute("data-plugin-theme", mode);
+
+    this.#computeThemeColors();
+    this.#updateCssVariablesFromTheme();
+  }
+
+  /**
+   * Compute current primary background and foreground from Bootstrap's .btn-primary.
+   *
+   * This gives us a theme-correct color pair regardless of the configured palette in Config UI X.
+   *
+   * @private
+   */
+  #computeThemeColors() {
+
+    const probeBtn = document.createElement("button");
+
+    probeBtn.className = "btn btn-primary";
+    probeBtn.style.display = "none";
+    document.body.appendChild(probeBtn);
+
+    this.#themeColor.background = getComputedStyle(probeBtn).backgroundColor;
+    this.#themeColor.text = getComputedStyle(probeBtn).color;
+
+    document.body.removeChild(probeBtn);
+  }
+
+  /**
+   * Update CSS custom properties used by our injected styles so they immediately reflect the current theme.
+   *
+   * @private
+   */
+  #updateCssVariablesFromTheme() {
+
+    const rootStyle = document.documentElement.style;
+
+    const rgba = (rgb, alpha) => {
+
+      const match = rgb.match(/\d+/g);
+
+      if(!match || (match.length < 3)) {
+
+        return rgb;
+      }
+
+      return "rgba(" + match[0] + ", " + match[1] + ", " + match[2] + ", " + alpha + ")";
+    };
+
+
+    // These variables are consumed by our injected CSS.
+    rootStyle.setProperty("--plugin-primary-bg", this.#themeColor.background);
+    rootStyle.setProperty("--plugin-primary-fg", this.#themeColor.text);
+
+    // Derivatives used for hover/subtle surfaces.
+    rootStyle.setProperty("--plugin-primary-hover", rgba(this.#themeColor.background, 0.10));
+    rootStyle.setProperty("--plugin-primary-subtle", rgba(this.#themeColor.background, 0.08));
+  }
+
   /**
    * Clean up all resources when the instance is no longer needed.
    *
@@ -3413,6 +3687,7 @@ export class webUiFeatureOptions {
    */
   cleanup() {
 
+    this.#categoryStates = {};
     this.#cleanupEventListeners();
     this.#eventListeners.clear();