Replace injury tracking dropdown with checkboxes for left/right knee

Allows tracking pain for both knees simultaneously instead of
requiring a single selection from a dropdown.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/RunForm.css

@@ -107,11 +107,40 @@
   box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
 }
 
+.injury-checkboxes {
+  display: flex;
+  gap: 1.25rem;
+  margin-top: 0.25rem;
+}
+
+.injury-checkbox-label {
+  display: flex !important;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+.injury-checkbox-label input[type="checkbox"] {
+  width: auto;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
 .pain-inputs {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.75rem;
-  margin-bottom: 0;
+  margin-bottom: 0.75rem;
+}
+
+.pain-location-label {
+  grid-column: 1 / -1;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
 }
 
 .btn-primary {

src/components/RunForm.js

@@ -26,9 +26,9 @@ function RunForm({ onAddRun }) {
   const [time, setTime] = useState('');
   const [rpe, setRpe] = useState(5);
   const [notes, setNotes] = useState('');
-  const [injuryLocation, setInjuryLocation] = useState('');
-  const [painDuring, setPainDuring] = useState('');
-  const [painAfter, setPainAfter] = useState('');
+  const [injuries, setInjuries] = useState(
+    Object.fromEntries(INJURY_LOCATIONS.map((loc) => [loc.key, { enabled: false, during: '', after: '' }]))
+  );
 
   function handleSubmit(e) {
     e.preventDefault();
@@ -44,9 +44,12 @@ function RunForm({ onAddRun }) {
       notes: notes.trim(),
     };
 
-    if (injuryLocation) {
-      runData[`${injuryLocation}_during`] = painDuring ? Number(painDuring) : null;
-      runData[`${injuryLocation}_after`] = painAfter ? Number(painAfter) : null;
+    for (const loc of INJURY_LOCATIONS) {
+      const inj = injuries[loc.key];
+      if (inj.enabled) {
+        runData[`${loc.key}_during`] = inj.during ? Number(inj.during) : null;
+        runData[`${loc.key}_after`] = inj.after ? Number(inj.after) : null;
+      }
     }
 
     onAddRun(runData);
@@ -55,9 +58,9 @@ function RunForm({ onAddRun }) {
     setTime('');
     setRpe(5);
     setNotes('');
-    setInjuryLocation('');
-    setPainDuring('');
-    setPainAfter('');
+    setInjuries(
+      Object.fromEntries(INJURY_LOCATIONS.map((loc) => [loc.key, { enabled: false, during: '', after: '' }]))
+    );
   }
 
   return (
@@ -119,43 +122,58 @@ function RunForm({ onAddRun }) {
         </div>
       </div>
       <div className="form-group">
-        <label htmlFor="injury-location">Injury Tracking</label>
-        <select
-          id="injury-location"
-          value={injuryLocation}
-          onChange={(e) => {
-            setInjuryLocation(e.target.value);
-            if (!e.target.value) { setPainDuring(''); setPainAfter(''); }
-          }}
-        >
-          <option value="">None</option>
+        <label>Injury Tracking</label>
+        <div className="injury-checkboxes">
           {INJURY_LOCATIONS.map((loc) => (
-            <option key={loc.key} value={loc.key}>{loc.label}</option>
+            <label key={loc.key} className="injury-checkbox-label">
+              <input
+                type="checkbox"
+                checked={injuries[loc.key].enabled}
+                onChange={(e) =>
+                  setInjuries((prev) => ({
+                    ...prev,
+                    [loc.key]: { ...prev[loc.key], enabled: e.target.checked, ...(!e.target.checked && { during: '', after: '' }) },
+                  }))
+                }
+              />
+              {loc.label}
+            </label>
           ))}
-        </select>
+        </div>
       </div>
-      {injuryLocation && (
-        <div className="pain-inputs">
+      {INJURY_LOCATIONS.filter((loc) => injuries[loc.key].enabled).map((loc) => (
+        <div key={loc.key} className="pain-inputs">
+          <span className="pain-location-label">{loc.label}</span>
           <div className="form-group pain-field">
-            <label htmlFor="pain-during">Pain During (1–10)</label>
+            <label htmlFor={`pain-during-${loc.key}`}>Pain During (1–10)</label>
             <input
-              id="pain-during"
+              id={`pain-during-${loc.key}`}
               type="number" min="1" max="10" step="1" placeholder="1–10"
-              value={painDuring}
-              onChange={(e) => setPainDuring(e.target.value)}
+              value={injuries[loc.key].during}
+              onChange={(e) =>
+                setInjuries((prev) => ({
+                  ...prev,
+                  [loc.key]: { ...prev[loc.key], during: e.target.value },
+                }))
+              }
             />
           </div>
           <div className="form-group pain-field">
-            <label htmlFor="pain-after">Pain After (1–10)</label>
+            <label htmlFor={`pain-after-${loc.key}`}>Pain After (1–10)</label>
             <input
-              id="pain-after"
+              id={`pain-after-${loc.key}`}
               type="number" min="1" max="10" step="1" placeholder="1–10"
-              value={painAfter}
-              onChange={(e) => setPainAfter(e.target.value)}
+              value={injuries[loc.key].after}
+              onChange={(e) =>
+                setInjuries((prev) => ({
+                  ...prev,
+                  [loc.key]: { ...prev[loc.key], after: e.target.value },
+                }))
+              }
             />
           </div>
         </div>
-      )}
+      ))}
       <div className="form-group">
         <label htmlFor="run-notes">Notes</label>
         <textarea