feat: improve UI spacing and add analytics

- Increase card internal padding from 8px to 12px (inline style)
  - Better spacing for checkbox and badges from card borders
  - Applied to SoftwareCard and ConfigOption components
- Remove "Select All" / "Deselect All" buttons from categories
  - Simplify category header to single expand/collapse button
  - Cleaner, more focused UI
- Remove gray background containers from grid layouts
  - Cleaner visual appearance
  - Cards now sit directly on page background
- Add Umami Analytics tracking script
  - Privacy-focused analytics with defer loading
  - Website ID: 0b493e9f-c3e3-4eb8-a119-4bf453dcec5b

Bundle size: 370.45 KB (119.53 KB gzipped)

Author: kaic

src/components/ConfigurationSelector/ConfigSection.jsx

@@ -39,7 +39,7 @@ const ConfigSection = ({ category, configs }) => {
         <div style={{
           display: 'grid',
           gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-          gap: '8px'
+          gap: '12px'
         }}>
           {configs.map((config) => (
             <ConfigOption key={config.id} config={config} />

src/components/SoftwareSelector/CategorySection.jsx

@@ -1,68 +1,45 @@
 import { useState } from 'react';
-import { useSelection } from '../../context/SelectionContext';
 import SoftwareCard from './SoftwareCard';
 
 const CategorySection = ({ category, software }) => {
   const [expanded, setExpanded] = useState(true);
-  const { selectAllInCategory, deselectAllInCategory, isAllCategorySelected } =
-    useSelection();
-
-  const allSelected = isAllCategorySelected(category.id);
-
-  const handleToggleAll = () => {
-    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 style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', flexWrap: 'wrap' }}>
-          <button
-            onClick={() => setExpanded(!expanded)}
-            className="win98-button"
-            style={{
-              flex: 1,
-              minWidth: '200px',
-              minHeight: '50px',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '8px',
-              justifyContent: 'flex-start',
-              padding: '8px 12px'
-            }}
-          >
-            <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' }}>
-                {category.name}
-              </div>
-              <div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: '#000', lineHeight: '1.3' }}>
-                {category.description}
-              </div>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="win98-button"
+          style={{
+            width: '100%',
+            minHeight: '50px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            justifyContent: 'flex-start',
+            padding: '8px 12px'
+          }}
+        >
+          <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' }}>
+              {category.name}
             </div>
-            <span style={{ fontSize: '10px', marginLeft: 'auto', flexShrink: 0 }}>
-              {expanded ? '▼' : '▶'}
-            </span>
-          </button>
-          <button
-            onClick={handleToggleAll}
-            className={allSelected ? 'win98-button win98-button-danger' : 'win98-button win98-button-primary'}
-            style={{ minWidth: '100px' }}
-          >
-            {allSelected ? 'Deselect All' : 'Select All'}
-          </button>
-        </div>
+            <div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: '#000', lineHeight: '1.3' }}>
+              {category.description}
+            </div>
+          </div>
+          <span style={{ fontSize: '10px', marginLeft: 'auto', flexShrink: 0 }}>
+            {expanded ? '▼' : '▶'}
+          </span>
+        </button>
       </div>
 
       {expanded && (
         <div style={{
           display: 'grid',
           gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-          gap: '8px'
+          gap: '12px'
         }}>
           {software.map((sw) => (
             <SoftwareCard key={sw.id} software={sw} />