From c5bfba544051c4e9d5b62c546031c552e5bb3d34 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sat, 21 Mar 2026 16:46:25 +0100
Subject: [PATCH] fitness: add exercise reorder buttons in template editor and
 active workout

---
 src/lib/js/workout.svelte.ts                  |  9 ++++
 src/routes/fitness/workout/+page.svelte       | 46 +++++++++++++++++--
 .../fitness/workout/active/+page.svelte       | 45 ++++++++++++++----
 3 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/src/lib/js/workout.svelte.ts b/src/lib/js/workout.svelte.ts
index 196dbaf..d1dcc63 100644
--- a/src/lib/js/workout.svelte.ts
+++ b/src/lib/js/workout.svelte.ts
@@ -276,6 +276,14 @@ export function createWorkout() {
 		_persist();
 	}
 
+	function moveExercise(index: number, direction: number) {
+		const newIndex = index + direction;
+		if (newIndex < 0 || newIndex >= exercises.length) return;
+		const [item] = exercises.splice(index, 1);
+		exercises.splice(newIndex, 0, item);
+		_persist();
+	}
+
 	function addSet(exerciseIndex: number) {
 		const ex = exercises[exerciseIndex];
 		if (ex) {
@@ -487,6 +495,7 @@ export function createWorkout() {
 		resumeTimer,
 		addExercise,
 		removeExercise,
+		moveExercise,
 		addSet,
 		removeSet,
 		updateSet,
diff --git a/src/routes/fitness/workout/+page.svelte b/src/routes/fitness/workout/+page.svelte
index 8813512..e2d90c7 100644
--- a/src/routes/fitness/workout/+page.svelte
+++ b/src/routes/fitness/workout/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import { Plus, Trash2, Play, Pencil, X, Save, CalendarClock, ChevronUp, ChevronDown, ArrowRight } from 'lucide-svelte';
+	import { Plus, Trash2, Play, Pencil, X, Save, CalendarClock, ChevronUp, ChevronDown, ArrowRight, GripVertical } from 'lucide-svelte';
 	import { getWorkout } from '$lib/js/workout.svelte';
 	import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
 	import { getExerciseById, getExerciseMetrics, METRIC_LABELS } from '$lib/data/exercises';
@@ -135,6 +135,15 @@
 		editorExercises = editorExercises.filter((_, i) => i !== idx);
 	}
 
+	/** @param {number} idx @param {number} dir */
+	function editorMoveExercise(idx, dir) {
+		const newIdx = idx + dir;
+		if (newIdx < 0 || newIdx >= editorExercises.length) return;
+		const copy = [...editorExercises];
+		[copy[idx], copy[newIdx]] = [copy[newIdx], copy[idx]];
+		editorExercises = copy;
+	}
+
 	/** @param {number} exIdx */
 	function editorAddSet(exIdx) {
 		const metrics = getExerciseMetrics(getExerciseById(editorExercises[exIdx].exerciseId));
@@ -404,9 +413,17 @@
 					<div class="editor-exercise">
 						<div class="editor-ex-header">
 							<span class="editor-ex-name">{exercise?.name ?? ex.exerciseId}</span>
-							<button class="remove-exercise" onclick={() => editorRemoveExercise(exIdx)} aria-label="Remove">
-								<Trash2 size={14} />
-							</button>
+							<div class="editor-ex-actions">
+								<button class="move-exercise" disabled={exIdx === 0} onclick={() => editorMoveExercise(exIdx, -1)} aria-label="Move up">
+									<ChevronUp size={14} />
+								</button>
+								<button class="move-exercise" disabled={exIdx === editorExercises.length - 1} onclick={() => editorMoveExercise(exIdx, 1)} aria-label="Move down">
+									<ChevronDown size={14} />
+								</button>
+								<button class="remove-exercise" onclick={() => editorRemoveExercise(exIdx)} aria-label="Remove">
+									<Trash2 size={14} />
+								</button>
+							</div>
 						</div>
 						<div class="editor-sets">
 							{#each ex.sets as set, setIdx (setIdx)}
@@ -841,6 +858,27 @@
 		font-weight: 600;
 		font-size: 0.85rem;
 	}
+	.editor-ex-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.15rem;
+	}
+	.move-exercise {
+		background: none;
+		border: none;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		padding: 0.25rem;
+		opacity: 0.6;
+	}
+	.move-exercise:hover:not(:disabled) {
+		opacity: 1;
+		color: var(--color-primary);
+	}
+	.move-exercise:disabled {
+		opacity: 0.2;
+		cursor: not-allowed;
+	}
 	.remove-exercise {
 		background: none;
 		border: none;
diff --git a/src/routes/fitness/workout/active/+page.svelte b/src/routes/fitness/workout/active/+page.svelte
index e79da9b..e58eece 100644
--- a/src/routes/fitness/workout/active/+page.svelte
+++ b/src/routes/fitness/workout/active/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { Plus, Trash2, Play, Pause, Trophy, Clock, Dumbbell, Route, RefreshCw, Check } from 'lucide-svelte';
+	import { Plus, Trash2, Play, Pause, Trophy, Clock, Dumbbell, Route, RefreshCw, Check, ChevronUp, ChevronDown } from 'lucide-svelte';
 	import { getWorkout } from '$lib/js/workout.svelte';
 	import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
 	import { getExerciseById, getExerciseMetrics } from '$lib/data/exercises';
@@ -487,13 +487,21 @@
 			<div class="exercise-block">
 				<div class="exercise-header">
 					<ExerciseName exerciseId={ex.exerciseId} />
-					<button
-						class="remove-exercise"
-						onclick={() => workout.removeExercise(exIdx)}
-						aria-label="Remove exercise"
-					>
-						<Trash2 size={16} />
-					</button>
+					<div class="exercise-header-actions">
+						<button class="move-exercise" disabled={exIdx === 0} onclick={() => workout.moveExercise(exIdx, -1)} aria-label="Move up">
+							<ChevronUp size={16} />
+						</button>
+						<button class="move-exercise" disabled={exIdx === workout.exercises.length - 1} onclick={() => workout.moveExercise(exIdx, 1)} aria-label="Move down">
+							<ChevronDown size={16} />
+						</button>
+						<button
+							class="remove-exercise"
+							onclick={() => workout.removeExercise(exIdx)}
+							aria-label="Remove exercise"
+						>
+							<Trash2 size={16} />
+						</button>
+					</div>
 				</div>
 
 				<SetTable
@@ -837,6 +845,27 @@
 		align-items: center;
 		margin-bottom: 0.5rem;
 	}
+	.exercise-header-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.15rem;
+	}
+	.move-exercise {
+		background: none;
+		border: none;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		padding: 0.25rem;
+		opacity: 0.6;
+	}
+	.move-exercise:hover:not(:disabled) {
+		opacity: 1;
+		color: var(--color-primary);
+	}
+	.move-exercise:disabled {
+		opacity: 0.2;
+		cursor: not-allowed;
+	}
 	.remove-exercise {
 		background: none;
 		border: none;