Visually show that toggles have been selected on libraries page without opening each toggle

static/css/styles.css

@@ -165,6 +165,51 @@ label {
     padding-bottom: 10px;
 }
 
+/* -------------------- */
+/* ACCORDION STYLES     */
+/* -------------------- */
+
+.accordion {
+    --bs-accordion-bg: #191d20;
+}
+
+.accordion-body,
+.card-group {
+    background-color: #212529;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+/* ✅ Add a green left border when an accordion has selected items */
+.accordion-header.selected {
+    border-left: 4px solid #00bc8c !important; /* Bright green left border */
+    padding-left: 10px !important; /* Space text from border */
+}
+
+/* ✅ Ensure expanded accordion does NOT fill with green */
+.accordion-button:not(.collapsed) {
+    background-color: transparent !important; /* No background fill */
+    color: white !important;
+    border-color: #343a40 !important; /* Keep border subtle */
+}
+
+/* ✅ Prevent hover/focus from changing colors too much */
+.accordion-button:not(.collapsed):hover,
+.accordion-button:not(.collapsed):focus {
+    background-color: transparent !important;
+    color: white !important;
+    border-color: #343a40 !important;
+}
+
+/* ✅ Keep expand/collapse arrow white when expanded */
+.accordion-button:not(.collapsed)::after {
+    color: white !important;
+}
+
+/* ✅ Keep expand/collapse arrow white when collapsed */
+.accordion-button.collapsed::after {
+    color: white !important;
+}
 
 .mb-3.small {
     margin-bottom: 0rem !important;
@@ -323,4 +368,4 @@ div#loading {
 
 .img-fluid {
     max-height: 500px;
-}
+}

static/local-js/025-libraries.js

@@ -1,6 +1,56 @@
 /* global $, showToast */
 
 document.addEventListener('DOMContentLoaded', function () {
+  function updateAccordionHighlights () {
+    document.querySelectorAll('.accordion-item').forEach((accordion) => {
+      const isCheckedOrSelected = accordion.querySelector(
+        "input[type='checkbox']:checked, input[type='radio']:checked, select option:checked:not([value='']):not([value='none'])"
+      ) !== null
+
+      const accordionHeader = accordion.querySelector('.accordion-header')
+
+      if (isCheckedOrSelected) {
+        highlightParentAccordions(accordionHeader)
+      } else {
+        removeHighlightIfEmpty(accordionHeader)
+      }
+    })
+  }
+  function highlightParentAccordions (element) {
+    while (element) {
+      if (element.classList.contains('accordion-header')) {
+        element.classList.add('selected')
+      }
+      element = element.closest('.accordion-item')?.parentElement.closest('.accordion-item')
+    }
+  }
+
+  function removeHighlightIfEmpty (element) {
+    if (!element) return
+    const accordionItem = element.closest('.accordion-item')
+    if (!accordionItem) return
+
+    const hasSelections = accordionItem.querySelector(
+      "input[type='checkbox']:checked, input[type='radio']:checked, select option:checked:not([value='']):not([value='none'])"
+    )
+
+    if (!hasSelections) {
+      element.classList.remove('selected')
+    }
+
+    // Recursively check parents
+    const parentAccordionHeader = accordionItem.parentElement.closest('.accordion-item')?.querySelector('.accordion-header')
+    removeHighlightIfEmpty(parentAccordionHeader)
+  }
+
+  // Attach event listeners to checkboxes, radio buttons, and dropdowns
+  document.querySelectorAll("input[type='checkbox'], input[type='radio'], select").forEach((input) => {
+    input.addEventListener('change', updateAccordionHighlights)
+  })
+
+  // Run on page load to update any previously selected items
+  updateAccordionHighlights()
+
   fetch('/check_base_images')
     .then(response => response.json())
     .then(data => {
@@ -19,6 +69,7 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     })
     .catch(error => console.error('Error checking base images:', error))
+
   const previewMovieButton = document.getElementById('previewOverlayButtonMovie')
   const previewShowButton = document.getElementById('previewOverlayButtonShow')
   const uploadMovieInput = document.getElementById('baseImageUploadMovie')