Support independent per-location injury tracking

Replace single injury dropdown with checkboxes for each location
(left knee, right knee) so both can be tracked on the same run.
Each has its own during/after pain inputs in both form and inline
edit. Backward-compatible with legacy single-location data.

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

src/components/RunForm.css

@@ -89,29 +89,39 @@
   color: var(--color-text-muted);
 }
 
-.form-group select {
-  width: 100%;
+.injury-block {
+  margin-top: 0.5rem;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--color-border);
+  background: var(--color-bg);
   border-radius: var(--radius);
-  font-size: 1rem;
-  background: var(--color-card);
+}
+
+.injury-block + .injury-block {
+  margin-top: 0.5rem;
+}
+
+.injury-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
   color: var(--color-text);
-  box-sizing: border-box;
   cursor: pointer;
 }
 
-.form-group select:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+.injury-toggle input[type="checkbox"] {
+  accent-color: var(--color-primary);
+  width: 1rem;
+  height: 1rem;
 }
 
 .pain-inputs {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.75rem;
-  margin-bottom: 0rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
 }
 
 .btn-primary {

src/components/RunForm.js

@@ -2,9 +2,8 @@ import { useState } from 'react';
 import './RunForm.css';
 
 const INJURY_LOCATIONS = [
-  { value: '', label: 'None' },
-  { value: 'left_knee', label: 'Left Knee' },
-  { value: 'right_knee', label: 'Right Knee' },
+  { key: 'left_knee', label: 'Left Knee' },
+  { key: 'right_knee', label: 'Right Knee' },
 ];
 
 const RPE_DESCRIPTIONS = {
@@ -27,9 +26,23 @@ 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({});
+
+  function updateInjury(locKey, field, value) {
+    setInjuries((prev) => ({ ...prev, [locKey]: { ...prev[locKey], [field]: value } }));
+  }
+
+  function toggleInjury(locKey, checked) {
+    if (checked) {
+      setInjuries((prev) => ({ ...prev, [locKey]: { enabled: true, during: '', after: '' } }));
+    } else {
+      setInjuries((prev) => {
+        const next = { ...prev };
+        delete next[locKey];
+        return next;
+      });
+    }
+  }
 
   function handleSubmit(e) {
     e.preventDefault();
@@ -45,10 +58,12 @@ function RunForm({ onAddRun }) {
       notes: notes.trim(),
     };
 
-    if (injuryLocation) {
-      runData.injury_location = injuryLocation;
-      runData.pain_during = painDuring ? Number(painDuring) : null;
-      runData.pain_after = painAfter ? Number(painAfter) : null;
+    for (const loc of INJURY_LOCATIONS) {
+      const injury = injuries[loc.key];
+      if (injury?.enabled) {
+        runData[`${loc.key}_during`] = injury.during ? Number(injury.during) : null;
+        runData[`${loc.key}_after`] = injury.after ? Number(injury.after) : null;
+      }
     }
 
     onAddRun(runData);
@@ -57,9 +72,7 @@ function RunForm({ onAddRun }) {
     setTime('');
     setRpe(5);
     setNotes('');
-    setInjuryLocation('');
-    setPainDuring('');
-    setPainAfter('');
+    setInjuries({});
   }
 
   return (
@@ -121,50 +134,44 @@ 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(''); }
-          }}
-        >
-          {INJURY_LOCATIONS.map((loc) => (
-            <option key={loc.value} value={loc.value}>{loc.label}</option>
-          ))}
-        </select>
+        <label>Injury Tracking</label>
+        {INJURY_LOCATIONS.map((loc) => {
+          const injury = injuries[loc.key];
+          const enabled = !!injury?.enabled;
+          return (
+            <div key={loc.key} className="injury-block">
+              <label className="injury-toggle">
+                <input
+                  type="checkbox"
+                  checked={enabled}
+                  onChange={(e) => toggleInjury(loc.key, e.target.checked)}
+                />
+                {loc.label}
+              </label>
+              {enabled && (
+                <div className="pain-inputs">
+                  <div className="form-group pain-field">
+                    <label>During (1–10)</label>
+                    <input
+                      type="number" min="1" max="10" step="1" placeholder="1–10"
+                      value={injury.during}
+                      onChange={(e) => updateInjury(loc.key, 'during', e.target.value)}
+                    />
+                  </div>
+                  <div className="form-group pain-field">
+                    <label>After (1–10)</label>
+                    <input
+                      type="number" min="1" max="10" step="1" placeholder="1–10"
+                      value={injury.after}
+                      onChange={(e) => updateInjury(loc.key, 'after', e.target.value)}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
       </div>
-      {injuryLocation && (
-        <div className="pain-inputs">
-          <div className="form-group pain-field">
-            <label htmlFor="pain-during">Pain During (1–10)</label>
-            <input
-              id="pain-during"
-              type="number"
-              min="1"
-              max="10"
-              step="1"
-              placeholder="1–10"
-              value={painDuring}
-              onChange={(e) => setPainDuring(e.target.value)}
-            />
-          </div>
-          <div className="form-group pain-field">
-            <label htmlFor="pain-after">Pain After (1–10)</label>
-            <input
-              id="pain-after"
-              type="number"
-              min="1"
-              max="10"
-              step="1"
-              placeholder="1–10"
-              value={painAfter}
-              onChange={(e) => setPainAfter(e.target.value)}
-            />
-          </div>
-        </div>
-      )}
       <div className="form-group">
         <label htmlFor="run-notes">Notes</label>
         <textarea

src/components/RunLog.css

@@ -78,17 +78,37 @@
   font-style: italic;
 }
 
-/* Inline editing extras */
-.editing-row select {
-  width: 100%;
-  min-width: 80px;
-  padding: 0.25rem 0.375rem;
-  border: 1px solid var(--color-primary);
-  border-radius: 4px;
+/* Pain display */
+.pain-display-cell {
+  white-space: normal;
   font-size: 0.85rem;
-  background: var(--color-card);
-  color: var(--color-text);
-  box-sizing: border-box;
+}
+
+/* Inline injury editing */
+.injury-edit-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.injury-edit-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.injury-edit-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.8rem;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.injury-edit-toggle input[type="checkbox"] {
+  accent-color: var(--color-primary);
 }
 
 .pain-edit-cell {

src/components/RunLog.js

@@ -2,7 +2,10 @@ import { useState } from 'react';
 import { formatPace } from '../utils/weekUtils';
 import './RunLog.css';
 
-const INJURY_LABELS = { left_knee: 'L Knee', right_knee: 'R Knee' };
+const INJURY_LOCS = [
+  { key: 'left_knee', label: 'L Knee' },
+  { key: 'right_knee', label: 'R Knee' },
+];
 
 function RunLog({ runs, onEditRun, onDeleteRun }) {
   const [editingId, setEditingId] = useState(null);
@@ -26,18 +29,52 @@ function RunLog({ runs, onEditRun, onDeleteRun }) {
 
   function handleEdit(run) {
     setEditingId(run.id);
+    const injuries = {};
+    for (const loc of INJURY_LOCS) {
+      const d = run[`${loc.key}_during`];
+      const a = run[`${loc.key}_after`];
+      // Also support legacy single-location format
+      const legacyMatch = run.injury_location === loc.key;
+      if (d != null || a != null || legacyMatch) {
+        injuries[loc.key] = {
+          enabled: true,
+          during: legacyMatch && d == null ? (run.pain_during ?? '') : (d ?? ''),
+          after: legacyMatch && a == null ? (run.pain_after ?? '') : (a ?? ''),
+        };
+      }
+    }
     setEditForm({
       date: run.date,
       distance_km: run.distance_km,
       time_minutes: run.time_minutes,
       rpe: run.rpe,
       notes: run.notes || '',
-      injury_location: run.injury_location || '',
-      pain_during: run.pain_during ?? '',
-      pain_after: run.pain_after ?? '',
+      injuries,
+    });
+  }
+
+  function toggleEditInjury(locKey, checked) {
+    setEditForm((prev) => {
+      const injuries = { ...prev.injuries };
+      if (checked) {
+        injuries[locKey] = { enabled: true, during: '', after: '' };
+      } else {
+        delete injuries[locKey];
+      }
+      return { ...prev, injuries };
     });
   }
 
+  function updateEditInjury(locKey, field, value) {
+    setEditForm((prev) => ({
+      ...prev,
+      injuries: {
+        ...prev.injuries,
+        [locKey]: { ...prev.injuries[locKey], [field]: value },
+      },
+    }));
+  }
+
   function handleSave() {
     const dist = parseFloat(editForm.distance_km);
     const mins = parseFloat(editForm.time_minutes);
@@ -50,10 +87,23 @@ function RunLog({ runs, onEditRun, onDeleteRun }) {
       time_minutes: mins,
       rpe,
       notes: (editForm.notes || '').trim(),
-      injury_location: editForm.injury_location || null,
-      pain_during: editForm.injury_location && editForm.pain_during !== '' ? Number(editForm.pain_during) : null,
-      pain_after: editForm.injury_location && editForm.pain_after !== '' ? Number(editForm.pain_after) : null,
+      // Clear legacy fields
+      injury_location: null,
+      pain_during: null,
+      pain_after: null,
     };
+
+    for (const loc of INJURY_LOCS) {
+      const injury = editForm.injuries?.[loc.key];
+      if (injury?.enabled) {
+        updated[`${loc.key}_during`] = injury.during !== '' ? Number(injury.during) : null;
+        updated[`${loc.key}_after`] = injury.after !== '' ? Number(injury.after) : null;
+      } else {
+        updated[`${loc.key}_during`] = null;
+        updated[`${loc.key}_after`] = null;
+      }
+    }
+
     onEditRun(editingId, updated);
     setEditingId(null);
   }
@@ -86,7 +136,6 @@ function RunLog({ runs, onEditRun, onDeleteRun }) {
               <th>Pace</th>
               <th>RPE</th>
               <th>Load</th>
-              <th>Injury</th>
               <th>Pain (D/A)</th>
               <th>Notes</th>
               <th></th>
@@ -141,42 +190,45 @@ function RunLog({ runs, onEditRun, onDeleteRun }) {
                     {(parseFloat(editForm.distance_km || 0) * parseInt(editForm.rpe || 0, 10)).toFixed(0)}
                   </td>
                   <td>
-                    <select
-                      value={editForm.injury_location}
-                      onChange={(e) => {
-                        const loc = e.target.value;
-                        setEditForm({ ...editForm, injury_location: loc, ...(!loc && { pain_during: '', pain_after: '' }) });
-                      }}
-                    >
-                      <option value="">None</option>
-                      <option value="left_knee">L Knee</option>
-                      <option value="right_knee">R Knee</option>
-                    </select>
-                  </td>
-                  <td>
-                    {editForm.injury_location ? (
-                      <div className="pain-edit-cell">
-                        <input
-                          type="number" min="1" max="10" step="1"
-                          value={editForm.pain_during}
-                          onChange={(e) => setEditForm({ ...editForm, pain_during: e.target.value })}
-                          onKeyDown={handleKeyDown}
-                          placeholder="D"
-                          className="pain-input"
-                        />
-                        <span>/</span>
-                        <input
-                          type="number" min="1" max="10" step="1"
-                          value={editForm.pain_after}
-                          onChange={(e) => setEditForm({ ...editForm, pain_after: e.target.value })}
-                          onKeyDown={handleKeyDown}
-                          placeholder="A"
-                          className="pain-input"
-                        />
-                      </div>
-                    ) : (
-                      <span className="computed-cell">–</span>
-                    )}
+                    <div className="injury-edit-stack">
+                      {INJURY_LOCS.map((loc) => {
+                        const injury = editForm.injuries?.[loc.key];
+                        const enabled = !!injury?.enabled;
+                        return (
+                          <div key={loc.key} className="injury-edit-row">
+                            <label className="injury-edit-toggle">
+                              <input
+                                type="checkbox"
+                                checked={enabled}
+                                onChange={(e) => toggleEditInjury(loc.key, e.target.checked)}
+                              />
+                              <span>{loc.label}</span>
+                            </label>
+                            {enabled && (
+                              <div className="pain-edit-cell">
+                                <input
+                                  type="number" min="1" max="10" step="1"
+                                  value={injury.during}
+                                  onChange={(e) => updateEditInjury(loc.key, 'during', e.target.value)}
+                                  onKeyDown={handleKeyDown}
+                                  placeholder="D"
+                                  className="pain-input"
+                                />
+                                <span>/</span>
+                                <input
+                                  type="number" min="1" max="10" step="1"
+                                  value={injury.after}
+                                  onChange={(e) => updateEditInjury(loc.key, 'after', e.target.value)}
+                                  onKeyDown={handleKeyDown}
+                                  placeholder="A"
+                                  className="pain-input"
+                                />
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
                   </td>
                   <td>
                     <input
@@ -200,8 +252,22 @@ function RunLog({ runs, onEditRun, onDeleteRun }) {
                   <td>{formatPace(run.time_minutes, run.distance_km)}/km</td>
                   <td>{run.rpe}/10</td>
                   <td>{(run.distance_km * run.rpe).toFixed(0)}</td>
-                  <td>{run.injury_location ? INJURY_LABELS[run.injury_location] || run.injury_location : '–'}</td>
-                  <td>{run.injury_location ? `${run.pain_during ?? '–'} / ${run.pain_after ?? '–'}` : '–'}</td>
+                  <td className="pain-display-cell">
+                    {(() => {
+                      const entries = INJURY_LOCS.filter((loc) => {
+                        // Support new per-location fields and legacy single-location format
+                        const hasNew = run[`${loc.key}_during`] != null || run[`${loc.key}_after`] != null;
+                        const hasLegacy = run.injury_location === loc.key;
+                        return hasNew || hasLegacy;
+                      });
+                      if (entries.length === 0) return '–';
+                      return entries.map((loc) => {
+                        const d = run[`${loc.key}_during`] ?? (run.injury_location === loc.key ? run.pain_during : null);
+                        const a = run[`${loc.key}_after`] ?? (run.injury_location === loc.key ? run.pain_after : null);
+                        return <div key={loc.key}>{loc.label}: {d ?? '–'}/{a ?? '–'}</div>;
+                      });
+                    })()}
+                  </td>
                   <td className="notes-cell">{run.notes || ''}</td>
                   <td className="action-buttons">
                     <button className="btn-edit" onClick={() => handleEdit(run)} aria-label="Edit run">✎</button>

src/utils/weekUtils.js

@@ -118,17 +118,31 @@ export function buildPainChartData(runs) {
       const row = { week: weekKey, label: weekKey.replace(/^\d{4}-/, '') };
 
       for (const loc of locations) {
-        const locRuns = weekRuns.filter((r) => r.injury_location === loc);
-        if (locRuns.length > 0) {
-          const duringVals = locRuns.filter((r) => r.pain_during != null).map((r) => r.pain_during);
-          const afterVals = locRuns.filter((r) => r.pain_after != null).map((r) => r.pain_after);
-          if (duringVals.length > 0) {
-            row[`${loc}_during`] = +(duringVals.reduce((s, v) => s + v, 0) / duringVals.length).toFixed(1);
+        const duringVals = [];
+        const afterVals = [];
+
+        for (const r of weekRuns) {
+          // New per-location fields take priority
+          if (r[`${loc}_during`] != null) {
+            duringVals.push(r[`${loc}_during`]);
+          } else if (r.injury_location === loc && r.pain_during != null) {
+            // Legacy single-location format fallback
+            duringVals.push(r.pain_during);
           }
-          if (afterVals.length > 0) {
-            row[`${loc}_after`] = +(afterVals.reduce((s, v) => s + v, 0) / afterVals.length).toFixed(1);
+
+          if (r[`${loc}_after`] != null) {
+            afterVals.push(r[`${loc}_after`]);
+          } else if (r.injury_location === loc && r.pain_after != null) {
+            afterVals.push(r.pain_after);
           }
         }
+
+        if (duringVals.length > 0) {
+          row[`${loc}_during`] = +(duringVals.reduce((s, v) => s + v, 0) / duringVals.length).toFixed(1);
+        }
+        if (afterVals.length > 0) {
+          row[`${loc}_after`] = +(afterVals.reduce((s, v) => s + v, 0) / afterVals.length).toFixed(1);
+        }
       }
 
       return row;