Attempt to fix JS

static/script.js

@@ -720,37 +720,47 @@ async function categorizeRequirements(max_categories) {
  */
 function displayCategorizedRequirements(categorizedData) {
     const container = document.getElementById('categorized-requirements-list');
+    if (!container) {
+        console.error('Container element with ID "categorized-requirements-list" not found.');
+        return;
+    }
     container.innerHTML = '';
 
     categorizedData.forEach((category, categoryIndex) => {
         const categoryDiv = document.createElement('div');
-        categoryDiv.tabIndex = 0;
-        categoryDiv.className = 'collapse collapse-arrow mb-2 border border-gray-200 rounded-lg bg-white';
-
+        categoryDiv.className = 'collapse collapse-arrow mb-2 border border-gray-200 rounded-lg bg-white shadow-sm';
 
-        // Generate unique IDs for checkboxes
+        // Generate unique IDs for all checkboxes
         const globalCheckboxId = `global-checkbox-${categoryIndex}`;
 
+        // Create the HTML for the individual requirement items within a category
         const requirementsHTML = category.requirements.map((req, reqIndex) => {
             const checkboxId = `checkbox-${categoryIndex}-${reqIndex}`;
             return `
-                <div class="p-2 bg-gray-50 rounded border-l-4 border-blue-400 flex items-start gap-2" data-category-index="${categoryIndex}" data-cat-req-id="${reqIndex}">
-                    <input type="checkbox" class="item-checkbox" id="${checkboxId}" data-category-index="${categoryIndex}" />
-                    <label for="${checkboxId}" class="flex-1">
-                        <div class="text-sm font-medium text-gray-700">${req.document}</div>
+                <div class="p-2.5 bg-gray-50 rounded border-l-4 border-blue-400 flex items-start gap-3" data-category-index="${categoryIndex}" data-cat-req-id="${reqIndex}">
+                    <input type="checkbox" class="item-checkbox checkbox checkbox-sm mt-1" id="${checkboxId}" data-category-index="${categoryIndex}" />
+                    <label for="${checkboxId}" class="flex-1 cursor-pointer">
+                        <div class="text-sm font-medium text-gray-800">${req.document}</div>
                         <div class="text-sm text-gray-600">${req.requirement}</div>
                     </label>
                 </div>`;
         }).join('');
 
+        // Set the innerHTML for the entire collapsible category component
         categoryDiv.innerHTML = `
-        <div class="collapse-title font-semibold flex items-center gap-2">
-            <input type="checkbox" class="global-checkbox" id="${globalCheckboxId}" data-category-index="${categoryIndex}" />
-            <label for="${globalCheckboxId}" class="text-lg font-semibold text-blue-600">${category.title}</label>
-        </div>
-        <input type="checkbox" />
+            <!-- This hidden checkbox controls the collapse state -->
+            <input type="checkbox" name="collapse-accordion-${categoryIndex}" /> 
+            
+            <div class="collapse-title text-lg font-semibold text-blue-600">
+                <!-- This wrapper prevents the collapse from triggering when clicking the checkbox or its label -->
+                <div class="checkbox-and-title-wrapper flex items-center gap-3">
+                    <input type="checkbox" class="global-checkbox checkbox" id="${globalCheckboxId}" data-category-index="${categoryIndex}" />
+                    <label for="${globalCheckboxId}" class="cursor-pointer">${category.title}</label>
+                </div>
+            </div>
+            
             <div class="collapse-content text-sm">
-                <div class="space-y-2">
+                <div class="space-y-2 p-2">
                     ${requirementsHTML}
                 </div>
             </div>
@@ -759,7 +769,16 @@ function displayCategorizedRequirements(categorizedData) {
         container.appendChild(categoryDiv);
     });
 
-    // Event delegation to handle global checkbox logic
+    // --- Event Listeners ---
+
+    // Stop click propagation on the checkbox wrapper to isolate it from the collapse trigger
+    container.querySelectorAll('.checkbox-and-title-wrapper').forEach(wrapper => {
+        wrapper.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+    });
+
+    // Handle "select all" logic when the global checkbox is changed
     container.querySelectorAll('.global-checkbox').forEach(globalCheckbox => {
         globalCheckbox.addEventListener('change', (e) => {
             const categoryIndex = e.target.dataset.categoryIndex;
@@ -770,7 +789,7 @@ function displayCategorizedRequirements(categorizedData) {
         });
     });
 
-    // Update global checkbox state when individual checkboxes change
+    // Update the global checkbox state when any individual item checkbox is changed
     container.querySelectorAll('.item-checkbox').forEach(itemCheckbox => {
         itemCheckbox.addEventListener('change', (e) => {
             const categoryIndex = e.target.dataset.categoryIndex;
@@ -778,7 +797,18 @@ function displayCategorizedRequirements(categorizedData) {
             const globalCheckbox = container.querySelector(`.global-checkbox[data-category-index="${categoryIndex}"]`);
 
             const allChecked = Array.from(itemCheckboxes).every(cb => cb.checked);
+            const someChecked = Array.from(itemCheckboxes).some(cb => cb.checked);
+
             globalCheckbox.checked = allChecked;
+
+            // Set indeterminate state for better UX
+            if (allChecked) {
+                globalCheckbox.indeterminate = false;
+            } else if (someChecked) {
+                globalCheckbox.indeterminate = true;
+            } else {
+                globalCheckbox.indeterminate = false;
+            }
         });
     });
 }