fix: Persist group collapse state across auto-refresh

Fix the issue where groups would collapse but immediately reopen on next refresh:

Problem:
- Groups collapsed correctly but reopened after 1 second due to auto-refresh
- The toggleGroup function used classList.contains('collapsed') to check state
- But displayDownloads() regenerated HTML every second, losing the collapsed state

Solution:
- Add collapsedGroups Set to store which group IDs are collapsed
- Check collapsedGroups.has(groupId) instead of DOM class
- Save state in memory when toggling (add/delete from Set)
- Apply collapsed state when generating HTML (inline styles and CSS class)
- Groups now stay collapsed across auto-refresh cycles

The collapsed state persists:
- Across auto-refresh (every second)
- When filters change (commented out optional reset)
- Until user manually expands the group again

templates/index.html

@@ -837,6 +837,7 @@
         let currentAnimeUrl = '';
         let searchResultsCache = {};
         let allDownloads = [];  // Store all downloads for filtering
+        let collapsedGroups = new Set();  // Store which groups are collapsed
 
         // Extract series name from filename (for grouping)
         function extractSeriesName(filename) {
@@ -894,6 +895,9 @@
             const groupBy = document.getElementById('groupBy').value;
             const searchTerm = document.getElementById('searchDownloads').value.toLowerCase();
 
+            // Clear collapsed groups when filters change (optional)
+            // collapsedGroups.clear();
+
             // Filter by status and search
             let filtered = allDownloads.filter(dl => {
                 const matchesStatus = statusFilter === 'all' || dl.status === statusFilter;
@@ -1547,13 +1551,17 @@
                 groupNames.forEach((groupName, index) => {
                     const groupDownloads = groups[groupName];
                     const groupId = `group-${index}`;
+                    const isCollapsed = collapsedGroups.has(groupId);
+                    const collapsedClass = isCollapsed ? 'collapsed' : '';
+                    const displayStyle = isCollapsed ? 'display: none;' : '';
+
                     html += `
                         <div class="downloads-group">
-                            <div class="downloads-group-header" onclick="toggleGroup('${groupId}')">
+                            <div class="downloads-group-header ${collapsedClass}" 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" id="${groupId}">
+                            <div class="downloads-group-items" id="${groupId}" style="${displayStyle}">
                                 ${groupDownloads.map(dl => renderDownloadItem(dl)).join('')}
                             </div>
                         </div>
@@ -1655,18 +1663,20 @@
                 return;
             }
 
-            const isCollapsed = header.classList.contains('collapsed');
+            const isCollapsed = collapsedGroups.has(groupId);
             console.log('isCollapsed:', isCollapsed);
 
             if (isCollapsed) {
                 // Expand
                 items.style.display = 'flex';
                 header.classList.remove('collapsed');
+                collapsedGroups.delete(groupId);
                 console.log('Expanded group');
             } else {
                 // Collapse
                 items.style.display = 'none';
                 header.classList.add('collapsed');
+                collapsedGroups.add(groupId);
                 console.log('Collapsed group');
             }
         }