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

Author: kaic

src/components/SoftwareSelector/CategorySection.jsx

@@ -1,38 +1,80 @@
 import { useState } from 'react';
 import SoftwareCard from './SoftwareCard';
+import { useSelection } from '../../context/SelectionContext';
 
 const CategorySection = ({ category, software }) => {
   const [expanded, setExpanded] = useState(true);
+  const { isAllCategorySelected, selectAllInCategory, deselectAllInCategory } = useSelection();
+
+  const allSelected = isAllCategorySelected(category.id);
+
+  const handleSelectAll = (e) => {
+    e.stopPropagation();
+    if (allSelected) {
+      deselectAllInCategory(category.id);
+    } else {
+      selectAllInCategory(category.id);
+    }
+  };
 
   return (
     <section id={`category-${category.id}`} style={{ marginBottom: '16px' }}>
-      <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} category`}
         >
           <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>