feat(ui): add select all button to configuration sections (#32)

* feat(ui): add select all button to category headers

* feat(core): add SearchContext for global state management

* feat(ui): implement search bar in ActionBar with Win98 styling

* feat(logic): enable filtering and auto-expansion in catalogs

* fix(lint): resolve react-hooks and refresh lint errors

* feat(ui): add select all button to configuration sections

Author: kaic

src/components/ConfigurationSelector/ConfigSection.jsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
 import ConfigOption from './ConfigOption';
+import { useSelection } from '../../context/SelectionContext';
 
 const ConfigSection = ({ category, configs, isSearching }) => {
   const [expanded, setExpanded] = useState(true);
   const [prevIsSearching, setPrevIsSearching] = useState(isSearching);
+  const { isAllConfigCategorySelected, selectAllConfigsInCategory, deselectAllConfigsInCategory } = useSelection();
 
   if (isSearching !== prevIsSearching) {
     setPrevIsSearching(isSearching);
@@ -12,35 +14,75 @@ const ConfigSection = ({ category, configs, isSearching }) => {
     }
   }
 
+  const allSelected = isAllConfigCategorySelected(category.id);
+
+  const handleSelectAll = (e) => {
+    e.stopPropagation();
+    if (allSelected) {
+      deselectAllConfigsInCategory(category.id);
+    } else {
+      selectAllConfigsInCategory(category.id);
+    }
+  };
+
   return (
     <section style={{ marginBottom: '12px' }}>
-      <div className="win98-raised" style={{ padding: '8px', marginBottom: '8px' }}>
+      <div className="win98-raised" style={{ padding: '6px', marginBottom: '8px', display: 'flex', gap: '6px', alignItems: 'stretch' }}>
         <button
           onClick={() => setExpanded(!expanded)}
           className="win98-button"
           style={{
-            width: '100%',
-            minHeight: '50px',
+            flex: 1,
+            minHeight: '52px',
             display: 'flex',
             alignItems: 'center',
-            gap: '8px',
+            gap: '10px',
             justifyContent: 'flex-start',
-            padding: '8px 12px'
+            padding: '8px 12px',
+            textAlign: 'left'
           }}
           aria-expanded={expanded}
           aria-label={`${expanded ? 'Collapse' : 'Expand'} ${category.name} configuration section`}
         >
           <span style={{ fontSize: '20px', flexShrink: 0 }}>{category.icon}</span>
-          <div style={{ textAlign: 'left', flex: 1, overflow: 'hidden' }}>
-            <div style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '3px', lineHeight: '1.2' }}>
+          <div style={{ flex: 1, overflow: 'hidden' }}>
+            <div style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '2px', lineHeight: '1.2' }}>
               {category.name}
+              <span style={{ fontSize: '10px', marginLeft: '8px', verticalAlign: 'middle', fontWeight: 'normal', color: 'var(--win98-gray-dark)' }}>
+                {expanded ? '▼' : '▶'}
+              </span>
             </div>
             <div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: 'var(--win95-black)', lineHeight: '1.3' }}>
               {category.description}
             </div>
           </div>
-          <span style={{ fontSize: '10px', marginLeft: 'auto', flexShrink: 0 }}>
-            {expanded ? '▼' : '▶'}
+        </button>
+
+        <button
+          onClick={handleSelectAll}
+          className={`win98-button ${allSelected ? 'win98-button-danger' : ''}`}
+          style={{
+            minWidth: '100px',
+            minHeight: '52px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '4px',
+            padding: '4px 12px',
+            flexShrink: 0
+          }}
+          title={allSelected ? "Deselect all items in this category" : "Select all items in this category"}
+        >
+          <input
+            type="checkbox"
+            checked={allSelected}
+            readOnly
+            className="win98-checkbox"
+            style={{ pointerEvents: 'none', marginBottom: '2px' }}
+          />
+          <span style={{ fontSize: '10px', fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+            {allSelected ? 'Deselect All' : 'Select All'}
           </span>
         </button>
       </div>

src/context/SelectionContext.jsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
 import { softwareCatalog } from '../data/software-catalog';
+import { configurations } from '../data/configurations';
 import { getCategoryItemIds } from '../utils/catalogHelpers';
 import { STORAGE_KEYS } from '../constants';
 
@@ -73,9 +74,31 @@ export function SelectionProvider({ children }) {
   // Check if all items in category are selected
   const isAllCategorySelected = useCallback((categoryId) => {
     const categoryItems = getCategoryItemIds(softwareCatalog, categoryId);
+    if (categoryItems.length === 0) return false;
     return categoryItems.every((id) => selectedSoftware.includes(id));
   }, [selectedSoftware]);
 
+  // Select all configurations in a category
+  const selectAllConfigsInCategory = useCallback((categoryId) => {
+    const categoryItems = getCategoryItemIds(configurations, categoryId);
+    setSelectedConfigs((prev) => [...new Set([...prev, ...categoryItems])]);
+  }, []);
+
+  // Deselect all configurations in a category
+  const deselectAllConfigsInCategory = useCallback((categoryId) => {
+    const categoryItems = getCategoryItemIds(configurations, categoryId);
+    setSelectedConfigs((prev) =>
+      prev.filter((id) => !categoryItems.includes(id))
+    );
+  }, []);
+
+  // Check if all configurations in category are selected
+  const isAllConfigCategorySelected = useCallback((categoryId) => {
+    const categoryItems = getCategoryItemIds(configurations, categoryId);
+    if (categoryItems.length === 0) return false;
+    return categoryItems.every((id) => selectedConfigs.includes(id));
+  }, [selectedConfigs]);
+
   // Clear all selections
   const clearAll = useCallback(() => {
     setSelectedSoftware([]);
@@ -100,6 +123,9 @@ export function SelectionProvider({ children }) {
     selectAllInCategory,
     deselectAllInCategory,
     isAllCategorySelected,
+    selectAllConfigsInCategory,
+    deselectAllConfigsInCategory,
+    isAllConfigCategorySelected,
     clearAll,
     clearSoftware,
     clearConfigs,
@@ -111,6 +137,9 @@ export function SelectionProvider({ children }) {
     selectAllInCategory,
     deselectAllInCategory,
     isAllCategorySelected,
+    selectAllConfigsInCategory,
+    deselectAllConfigsInCategory,
+    isAllConfigCategorySelected,
     clearAll,
     clearSoftware,
     clearConfigs,