From f527a335de51f39fc119c01d13ee55f5ce6c2ac2 Mon Sep 17 00:00:00 2001
From: root <root@audiOhm.lanro.eu>
Date: Fri, 23 Jan 2026 10:53:15 +0000
Subject: [PATCH] fix: Use ID-based toggle for group collapse/expand

Change from using 'this' pointer to using unique IDs for group toggling:

- Generate unique IDs for each group (group-0, group-1, etc.)
- Pass group ID to toggleGroup() function instead of DOM element
- Use getElementById() and previousElementSibling to find elements
- Add error handling with console.error for missing elements
- Add console.log statements for debugging

This approach is more reliable than relying on inline onclick handlers
with 'this' keyword, especially when the HTML is dynamically generated.
---
 templates/index.html | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 1af6a1d..e40f1c1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1544,15 +1544,16 @@
 
                 // Display grouped downloads
                 let html = '';
-                groupNames.forEach(groupName => {
+                groupNames.forEach((groupName, index) => {
                     const groupDownloads = groups[groupName];
+                    const groupId = `group-${index}`;
                     html += `
                         <div class="downloads-group">
-                            <div class="downloads-group-header" onclick="toggleGroup(this)">
+                            <div class="downloads-group-header" onclick="toggleGroup('${groupId}')">
                                 <div class="downloads-group-title">${escapeHtml(groupName)}</div>
                                 <div class="downloads-group-count">${groupDownloads.length}</div>
                             </div>
-                            <div class="downloads-group-items">
+                            <div class="downloads-group-items" id="${groupId}">
                                 ${groupDownloads.map(dl => renderDownloadItem(dl)).join('')}
                             </div>
                         </div>
@@ -1644,18 +1645,29 @@
             `;
         }
 
-        function toggleGroup(header) {
-            const items = header.nextElementSibling;
+        function toggleGroup(groupId) {
+            console.log('toggleGroup called with ID:', groupId);
+            const items = document.getElementById(groupId);
+            const header = items.previousElementSibling;
+
+            if (!items || !header) {
+                console.error('Could not find group elements');
+                return;
+            }
+
             const isCollapsed = header.classList.contains('collapsed');
+            console.log('isCollapsed:', isCollapsed);
 
             if (isCollapsed) {
                 // Expand
                 items.style.display = 'flex';
                 header.classList.remove('collapsed');
+                console.log('Expanded group');
             } else {
                 // Collapse
                 items.style.display = 'none';
                 header.classList.add('collapsed');
+                console.log('Collapsed group');
             }
         }