Expanded UI

js/history.js

@@ -1,7 +1,11 @@
 document.addEventListener('DOMContentLoaded', function() {
     const selectionGrid = document.getElementById('selection-grid');
-    const filterButtons = document.querySelectorAll('.filter-buttons .filter-btn');
-    const orientationButtons = document.querySelectorAll('.orientation-filters .filter-btn');
+        // Unified filter state
+    const filterState = {
+        action: 'all',
+        orientation: 'all',
+        resolution: 'all'
+    };
     const resolutionFilter = document.getElementById('resolution-filter');
     const selectAllBtn = document.getElementById('select-all');
     const deselectAllBtn = document.getElementById('deselect-all');
@@ -19,9 +23,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const cancelResetBtn = document.getElementById('cancel-reset');
     const resetMessage = document.getElementById('reset-message');
     
-    let currentFilter = 'all';
-    let currentOrientation = 'all';
-    let currentResolution = 'all';
+    let cachedSelections = [];
     let selectedItems = [];
     let currentSelectionId = null;
     
@@ -32,8 +34,9 @@ document.addEventListener('DOMContentLoaded', function() {
             .then(response => response.json())
             .then(data => {
                 if (data.selections && data.selections.length > 0) {
-                    populateResolutionFilter(data.selections);
-                    renderSelections(data.selections);
+                                        cachedSelections = data.selections;
+                    populateResolutionFilter(cachedSelections);
+                    renderSelections();
                 } else {
                     selectionGrid.innerHTML = '<div class="no-selections">No selections found</div>';
                 }
@@ -55,13 +58,14 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     };
     
-    const renderSelections = (selections) => {
+    const renderSelections = () => {
         selectionGrid.innerHTML = '';
+        const selections = cachedSelections;
         
         const filteredSelections = selections.filter(s => 
-            (currentFilter === 'all' || s.action === currentFilter) &&
-            (currentOrientation === 'all' || s.orientation === currentOrientation) &&
-            (currentResolution === 'all' || s.resolution === currentResolution)
+            (filterState.action === 'all' || s.action === filterState.action) &&
+            (filterState.orientation === 'all' || s.orientation === filterState.orientation) &&
+            (filterState.resolution === 'all' || s.resolution === filterState.resolution)
         );
         
         if (filteredSelections.length === 0) {
@@ -78,7 +82,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     <input type="checkbox" class="selection-checkbox">
                 </div>
                 <img src="${selection.image_path}" alt="Selected image" loading="lazy">
-                <div class="selection-action action-${selection.action}">${getActionName(selection.action)}</div>
+                <div class="selection-action action-${actionClass(selection.action)}">${selection.action}</div>
                 <div class="selection-info">
                     <p>${selection.image_path.split('/').pop()}</p>
                     <p>Resolution: ${selection.resolution}</p>
@@ -92,10 +96,11 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     };
 
-    const getActionName = (action) => {
-        const names = { left: 'Discard', right: 'Keep', up: 'Favorite', down: 'Review' };
-        return names[action] || action;
+    const actionClass = (action) => {
+        const map = { 'Discard':'discard', 'Keep':'keep', 'Favorite':'favorite', 'Review':'review' };
+        return map[action] || 'discard';
     };
+    const getActionName = (action) => action;
 
     const updateDownloadButton = () => {
         downloadSelectedBtn.disabled = selectedItems.length === 0;
@@ -130,23 +135,29 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    filterButtons.forEach(button => button.addEventListener('click', function() {
-        filterButtons.forEach(btn => btn.classList.remove('active'));
-        this.classList.add('active');
-        currentFilter = this.dataset.filter;
-        loadSelections();
-    }));
+        // Delegated click handler for any filter button
+    document.querySelector('.filter-container').addEventListener('click', (e) => {
+        const btn = e.target.closest('.filter-btn');
+        if (!btn) return;
 
-    orientationButtons.forEach(button => button.addEventListener('click', function() {
-        orientationButtons.forEach(btn => btn.classList.remove('active'));
-        this.classList.add('active');
-        currentOrientation = this.dataset.orientation;
-        loadSelections();
-    }));
+        // Determine filter type and value
+        const { filter, orientation } = btn.dataset;
+        if (filter !== undefined) {
+            filterState.action = filter;
+            // update active classes within the same group
+            btn.parentElement.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        }
+        if (orientation !== undefined) {
+            filterState.orientation = orientation;
+            btn.parentElement.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        }
+        btn.classList.add('active');
+        renderSelections();
+    });
 
     resolutionFilter.addEventListener('change', function() {
-        currentResolution = this.value;
-        loadSelections();
+        filterState.resolution = this.value;
+        renderSelections();
     });
 
     selectAllBtn.addEventListener('click', () => {