feat(02-01): refactor ExerciseCard to dynamic setList with add-set modal and delete-set

- Replace fixed setInputs object with setList array state
- Add showAddModal state and set-type chooser modal (Vanligt set / Dropset)
- handleAddNormal: append one set pre-filled from last row's weight and reps
- handleAddDropset: append 3 sets at 100%/80%/60% weight (rounded to 2.5kg), 10 reps
- handleDeleteSet: remove by index with last-set guard (no delete when only 1 remains)
- handleComplete and handleInputChange updated to use array index (idx+1 as set_number)
- Progress badge and all-done class use setList.length instead of exercise.sets
- onDeleteSet prop added (optional stub for backend wiring in plan 02)
- Add trash icon SVG to Icons.jsx (outline trash can, consistent with icon library)

frontend/src/components/Icons.jsx

@@ -216,6 +216,17 @@ export const Icons = {
     </svg>
   ),
 
+  // Actions
+  trash: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="3 6 5 6 21 6"/>
+      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+      <path d="M10 11v6"/>
+      <path d="M14 11v6"/>
+      <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
+    </svg>
+  ),
+
   // Brand
   gravl: (
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

frontend/src/pages/WorkoutPage.jsx

@@ -257,44 +257,64 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) {
   )
 }
 
-function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSet }) {
-  const [setInputs, setSetInputs] = useState({})
+function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSet, onDeleteSet }) {
+  const [setList, setSetList] = useState([])
+  const [showAddModal, setShowAddModal] = useState(false)
 
   useEffect(() => {
-    // Initialize with suggested weight or last logged
-    const initial = {}
+    const initial = []
     for (let i = 1; i <= exercise.sets; i++) {
       const existingLog = logs.find(l => l.set_number === i)
-      initial[i] = {
-        weight: existingLog?.weight || progression?.suggestedWeight || '',
-        reps: existingLog?.reps || '',
+      initial.push({
+        weight: existingLog?.weight?.toString() || progression?.suggestedWeight?.toString() || '',
+        reps: existingLog?.reps?.toString() || '',
         completed: existingLog?.completed || false
+      })
     }
-    }
-    setSetInputs(initial)
+    setSetList(initial)
   }, [exercise, logs, progression])
 
-  const handleInputChange = (setNum, field, value) => {
-    setSetInputs(prev => ({
-      ...prev,
-      [setNum]: { ...prev[setNum], [field]: value }
-    }))
+  const handleInputChange = (idx, field, value) => {
+    setSetList(prev => prev.map((s, i) => i === idx ? { ...s, [field]: value } : s))
   }
 
-  const handleComplete = (setNum) => {
-    const input = setInputs[setNum]
+  const handleComplete = (idx) => {
+    const input = setList[idx]
     const newCompleted = !input.completed
-    setSetInputs(prev => ({
-      ...prev,
-      [setNum]: { ...prev[setNum], completed: newCompleted }
-    }))
-    onLogSet(exercise.id, setNum, input.weight, input.reps, newCompleted)
+    setSetList(prev => prev.map((s, i) => i === idx ? { ...s, completed: newCompleted } : s))
+    onLogSet(exercise.id, idx + 1, input.weight, input.reps, newCompleted)
   }
 
-  const completedSets = Object.values(setInputs).filter(s => s.completed).length
+  const handleAddNormal = () => {
+    const last = setList[setList.length - 1] || { weight: '', reps: '' }
+    setSetList(prev => [...prev, { weight: last.weight, reps: last.reps, completed: false }])
+    setShowAddModal(false)
+  }
+
+  const handleAddDropset = () => {
+    const last = setList[setList.length - 1] || { weight: '0', reps: '10' }
+    const baseWeight = parseFloat(last.weight) || 0
+    const drop1 = Math.round((baseWeight * 0.80) / 2.5) * 2.5
+    const drop2 = Math.round((baseWeight * 0.60) / 2.5) * 2.5
+    const newSets = [
+      { weight: last.weight, reps: '10', completed: false },
+      { weight: drop1.toString(), reps: '10', completed: false },
+      { weight: drop2.toString(), reps: '10', completed: false },
+    ]
+    setSetList(prev => [...prev, ...newSets])
+    setShowAddModal(false)
+  }
+
+  const handleDeleteSet = (idx) => {
+    if (setList.length <= 1) return
+    setSetList(prev => prev.filter((_, i) => i !== idx))
+    if (onDeleteSet) onDeleteSet(exercise.id, idx + 1)
+  }
+
+  const completedSets = setList.filter(s => s.completed).length
 
   return (
-    <div className={`exercise-card ${expanded ? 'expanded' : ''} ${completedSets === exercise.sets ? 'all-done' : ''}`}>
+    <div className={`exercise-card ${expanded ? 'expanded' : ''} ${completedSets === setList.length && setList.length > 0 ? 'all-done' : ''}`}>
       <div className="exercise-header" onClick={onToggle}>
         <div className="exercise-info">
           <h3>{exercise.name}</h3>
@@ -302,8 +322,8 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
         </div>
         <div className="exercise-meta">
           <span className="sets-info">{exercise.sets}×{exercise.reps_min}-{exercise.reps_max}</span>
-          <span className={`progress-badge ${completedSets === exercise.sets ? 'complete' : ''}`}>
-            {completedSets}/{exercise.sets}
+          <span className={`progress-badge ${completedSets === setList.length ? 'complete' : ''}`}>
+            {completedSets}/{setList.length}
           </span>
         </div>
       </div>
@@ -320,32 +340,63 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
           )}
 
           <div className="sets-list">
-            {Array.from({ length: exercise.sets }, (_, i) => i + 1).map(setNum => {
-              const input = setInputs[setNum] || { weight: '', reps: '', completed: false }
-              return (
-                <div key={setNum} className={`set-row ${input.completed ? 'completed' : ''}`}>
-                  <span className="set-number">Set {setNum}</span>
+            {setList.map((input, idx) => (
+              <div key={idx} className={`set-row ${input.completed ? 'completed' : ''}`}>
+                <span className="set-number">Set {idx + 1}</span>
                 <div className="set-inputs">
                   <WeightInput
                     value={input.weight}
-                      onChange={(val) => handleInputChange(setNum, 'weight', val)}
+                    onChange={(val) => handleInputChange(idx, 'weight', val)}
                   />
                   <span className="input-separator">×</span>
                   <RepsInput
                     value={input.reps}
-                      onChange={(val) => handleInputChange(setNum, 'reps', val)}
+                    onChange={(val) => handleInputChange(idx, 'reps', val)}
                   />
                 </div>
+                <button
+                  className={`delete-set-btn ${setList.length <= 1 ? 'disabled' : ''}`}
+                  onClick={() => handleDeleteSet(idx)}
+                  disabled={setList.length <= 1}
+                  aria-label={`Ta bort set ${idx + 1}`}
+                >
+                  <Icon name="trash" size={16} />
+                </button>
                 <button
                   className={`complete-btn ${input.completed ? 'done' : ''}`}
-                    onClick={() => handleComplete(setNum)}
+                  onClick={() => handleComplete(idx)}
                 >
                   {input.completed ? <Icon name="check" size={18} /> : ''}
                 </button>
               </div>
-              )
-            })}
+            ))}
           </div>
+
+          <button
+            className="add-set-btn"
+            onClick={() => setShowAddModal(true)}
+          >
+            + Lägg till set
+          </button>
+
+          {showAddModal && (
+            <div className="set-type-modal-overlay" onClick={() => setShowAddModal(false)}>
+              <div className="set-type-modal" onClick={e => e.stopPropagation()}>
+                <h3>Välj settyp</h3>
+                <button className="set-type-option" onClick={handleAddNormal}>
+                  <strong>Vanligt set</strong>
+                  <span>Lägg till ett set</span>
+                </button>
+                <button className="set-type-option dropset" onClick={handleAddDropset}>
+                  <strong>Dropset</strong>
+                  <span>3 set med viktnedtrappning (20% per steg)</span>
+                </button>
+                <button className="set-type-cancel" onClick={() => setShowAddModal(false)}>
+                  Avbryt
+                </button>
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>