refactor: update dataset selection functionality and UI

- Replace "Select displayed datasets" and "Deselect displayed datasets" buttons with a single "Toggle filtered" button for improved usability.
- Update event handler to toggle selection for filtered datasets based on current selection state.
- Enhance styling for buttons and icons to improve visual feedback and interaction.
- Adjust CSS for button hover and active states to reflect danger color scheme.

Author: RogersPyke

docs/css/filter/filter-control-bar.css

@@ -62,7 +62,7 @@
     background: white;
     border-color: var(--color-primary-light);
     color: var(--color-primary);
-    font-weight: 600;
+    font-weight: bold;
 }
 
 .filter-trigger-btn:hover {
@@ -96,7 +96,7 @@
 
 /* Toolbar Buttons (Select/Deselect/Add/Remove) */
 .btn-toolbar {
-    font-weight: 600;
+    font-weight: bold;
 }
 
 .btn-toolbar.primary {

docs/css/filter/filter-dropdown.css

@@ -84,13 +84,16 @@
 }
 
 .filter-reset-icon:hover {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
+    border-color: var(--color-danger);
+    color: var(--color-danger);
     transform: translateY(-1px);
     box-shadow: var(--shadow-sm);
 }
 
 .filter-reset-icon:active {
+    background: var(--color-danger);
+    color: white;
+    border-color: #991b1b;
     transform: translateY(0);
     box-shadow: none;
 }

docs/css/selection/selection-panel-base.css

@@ -33,7 +33,7 @@
     position: absolute;
     right: 1rem;
     background: none;
-    border: none;
+    border: 1px solid transparent;
     color: var(--color-text-secondary);
     cursor: pointer;
     padding: 0.4rem;
@@ -45,10 +45,19 @@
 }
 
 .btn-clear-selection:hover {
+    background: none;
+    border-color: var(--color-danger);
+    color: var(--color-danger);
+    box-shadow: var(--shadow-sm);
+    transform: translateY(-1px);
+}
+
+.btn-clear-selection:active {
     background: var(--color-danger);
     color: white;
-    box-shadow: var(--shadow-sm);
-    transform: scale(1.05);
+    border-color: #991b1b;
+    transform: translateY(0);
+    box-shadow: none;
 }
 
 .selection-title {

docs/index.html

@@ -61,7 +61,9 @@ <h1 class="header-title">RoboCOIN-DataManager</h1>
         <div class="filter-control-container">
             <div class="toolbar-left-controls">
             <button class="filter-trigger-btn" id="filterTriggerBtn">
-                <span class="filter-trigger-text">Filter datasets</span>
+                <span class="filter-trigger-text">
+                    Filter datasets
+                </span>
                 <span class="filter-trigger-count" id="filterTriggerCount"></span>
             </button>
             </div>
@@ -77,8 +79,9 @@ <h1 class="header-title">RoboCOIN-DataManager</h1>
             </div>
 
             <div class="top-selection-container">
-                <button class="btn-toolbar primary" id="selectAllBtn">Select displayed datasets</button>
-                <button class="btn-toolbar danger" id="deselectAllBtn">Deselect displayed datasets</button>
+                <button class="btn-toolbar primary" id="toggleSelectionBtn" title="Toggle selection for displayed datasets">
+                    Toggle filtered
+                </button>
             </div>
 
             <div class="filter-stats-inline">
@@ -101,10 +104,9 @@ <h1 class="header-title">RoboCOIN-DataManager</h1>
                 <div class="filter-dropdown-header-main">
                     <h3 class="filter-dropdown-title">Filter Datasets</h3>
                     <button class="filter-reset-icon" id="filterResetBtn" title="Reset filters" aria-label="Reset filters">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
-                            stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M2 12a9.9 9.9 0 0 0 10 10c5.52 0 10-4.48 10-10S17.52 2 12 2" />
-                            <polyline points="12 6 12 12 16 14" />
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="3 6 5 6 21 6"></polyline>
+                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                         </svg>
                     </button>
                 </div>

docs/js/modules/event-handlers.js

@@ -630,21 +630,11 @@ export class EventHandlers {
      * Bind toolbar button events
      */
     bindToolbarEvents() {
-        // Select/Deselect all
-        const selectAllBtn = document.getElementById('selectAllBtn');
-        const deselectAllBtn = document.getElementById('deselectAllBtn');
-
-        if (selectAllBtn) {
-            selectAllBtn.addEventListener('click', () => {
-                this.addClickAnimation(selectAllBtn);
-                this.selectAllFiltered();
-            });
-        }
-
-        if (deselectAllBtn) {
-            deselectAllBtn.addEventListener('click', () => {
-                this.addClickAnimation(deselectAllBtn);
-                this.deselectAllFiltered();
+        const toggleSelectionBtn = document.getElementById('toggleSelectionBtn');
+        if (toggleSelectionBtn) {
+            toggleSelectionBtn.addEventListener('click', () => {
+                this.addClickAnimation(toggleSelectionBtn);
+                this.toggleFilteredSelection();
             });
         }
 
@@ -783,32 +773,26 @@ export class EventHandlers {
     }
 
     /**
-     * Select all filtered datasets
+     * Toggle selection for all filtered datasets (select if any unselected, deselect if all selected)
      */
-    selectAllFiltered() {
+    toggleFilteredSelection() {
         const filteredDatasets = this.managers.filter.applyFilters(
             document.getElementById('searchBox')?.value || ''
         );
-        filteredDatasets.forEach(ds => {
-            this.selectedDatasets.add(ds.path);
-            this.managers.selectionPanel.listDatasets.add(ds.path);
-        });
-        this.managers.selectionPanel.markListChanged();
-        this.managers.videoGrid.updateCardStyles();
-        this.managers.selectionPanel.updateSelectionPanel();
-    }
+        if (filteredDatasets.length === 0) return;
+
+        const areAllSelected = filteredDatasets.every(ds => this.selectedDatasets.has(ds.path));
 
-    /**
-     * Deselect all filtered datasets
-     */
-    deselectAllFiltered() {
-        const filteredDatasets = this.managers.filter.applyFilters(
-            document.getElementById('searchBox')?.value || ''
-        );
         filteredDatasets.forEach(ds => {
-            this.selectedDatasets.delete(ds.path);
-            this.managers.selectionPanel.listDatasets.delete(ds.path);
+            if (areAllSelected) {
+                this.selectedDatasets.delete(ds.path);
+                this.managers.selectionPanel.listDatasets.delete(ds.path);
+            } else {
+                this.selectedDatasets.add(ds.path);
+                this.managers.selectionPanel.listDatasets.add(ds.path);
+            }
         });
+
         this.managers.selectionPanel.markListChanged();
         this.managers.videoGrid.updateCardStyles();
         this.managers.selectionPanel.updateSelectionPanel();