Refine routine exercise editing and save routines

apps/web/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,51 @@
+import type { ComponentProps } from 'react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        className={cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'border-border bg-surface-elevated text-foreground',
+          className,
+        )}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item>) {
+  return (
+    <DropdownMenuPrimitive.Item
+      className={cn(
+        'flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        'select-none focus:bg-accent focus:text-accent-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+};

apps/web/src/features/routines/create/editor/routine-editor.tsx

@@ -9,7 +9,10 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { PageTitle } from '@/components/ui/page-title';
 import { cn } from '@/lib/utils';
-import type { RoutineDraftFormValues } from '../routine-draft-form';
+import type {
+  RoutineDraftExerciseFormValues,
+  RoutineDraftFormValues,
+} from '../routine-draft-form';
 import { RoutineExerciseList } from './routine-exercise-list';
 import { RoutineScheduleField } from './routine-schedule-field';
 
@@ -21,17 +24,28 @@ export function RoutineEditor() {
     await navigate({ to: '/routines/new/exercises' });
   };
 
+  const editExercise = async (exercise: RoutineDraftExerciseFormValues) => {
+    await navigate({
+      params: { exerciseId: exercise.exerciseId },
+      search: { position: exercise.position },
+      to: '/routines/new/exercises/$exerciseId',
+    });
+  };
+
   return (
     <section className="mx-auto w-full max-w-5xl">
       <EditorHeader onClear={() => reset()} />
 
       <form className="grid gap-6 lg:grid-cols-2">
-        <div className="space-y-6">
-          <RoutineDetails />
-          <ExerciseSection onAddExercise={() => void addExercise()} />
-        </div>
-
+        <RoutineDetails />
         <RoutineScheduleField />
+
+        <div className="lg:col-span-2">
+          <ExerciseSection
+            onAddExercise={() => void addExercise()}
+            onEditExercise={(exercise) => void editExercise(exercise)}
+          />
+        </div>
       </form>
     </section>
   );
@@ -93,17 +107,44 @@ function RoutineDetails() {
   );
 }
 
-function ExerciseSection({ onAddExercise }: { onAddExercise: () => void }) {
-  const { control } = useFormContext<RoutineDraftFormValues>();
+function ExerciseSection({
+  onAddExercise,
+  onEditExercise,
+}: {
+  onAddExercise: () => void;
+  onEditExercise: (exercise: RoutineDraftExerciseFormValues) => void;
+}) {
+  const { control, getValues, setValue } =
+    useFormContext<RoutineDraftFormValues>();
   const exercises = useWatch({ control, name: 'exercises' });
 
+  function removeExercise(position: number) {
+    const remainingExercises = getValues('exercises')
+      .filter((exercise) => exercise.position !== position)
+      .map((exercise, nextPosition) => ({
+        ...exercise,
+        position: nextPosition,
+      }));
+
+    setValue('exercises', remainingExercises, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  }
+
   return (
     <div>
       <Label asChild>
         <h2>Exercises ({exercises.length})</h2>
       </Label>
 
-      {exercises.length > 0 && <RoutineExerciseList exercises={exercises} />}
+      {exercises.length > 0 && (
+        <RoutineExerciseList
+          exercises={exercises}
+          onEdit={onEditExercise}
+          onRemove={removeExercise}
+        />
+      )}
 
       <div className={exercises.length > 0 ? 'mt-1' : 'mt-3'}>
         <AddActionButton onClick={onAddExercise} type="button">

apps/web/src/features/routines/create/editor/routine-exercise-list.tsx

@@ -1,16 +1,27 @@
 /** Displays configured exercises in the routine draft. */
 import { Dumbbell, GripVertical, MoreHorizontal } from 'lucide-react';
 
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
 import type { RoutineDraftExerciseFormValues } from '../routine-draft-form';
 
 export function RoutineExerciseList({
   exercises,
+  onEdit,
+  onRemove,
 }: {
   exercises: RoutineDraftExerciseFormValues[];
+  onEdit: (exercise: RoutineDraftExerciseFormValues) => void;
+  onRemove: (position: number) => void;
 }) {
   return (
-    <div className="mt-3 overflow-hidden rounded-lg bg-surface-elevated">
+    <div className="mt-3 w-full overflow-hidden rounded-lg bg-surface-elevated lg:w-fit lg:max-w-3xl">
       <div
         className={cn(
           'hidden grid-cols-[minmax(0,1fr)_3.5rem_3.5rem_5rem_4rem_2rem] items-center gap-2 px-3 py-2',
@@ -28,7 +39,12 @@ export function RoutineExerciseList({
 
       <ul>
         {exercises.map((exercise) => (
-          <RoutineExerciseRow exercise={exercise} key={exercise.position} />
+          <RoutineExerciseRow
+            exercise={exercise}
+            key={exercise.position}
+            onEdit={onEdit}
+            onRemove={onRemove}
+          />
         ))}
       </ul>
     </div>
@@ -37,13 +53,17 @@ export function RoutineExerciseList({
 
 function RoutineExerciseRow({
   exercise,
+  onEdit,
+  onRemove,
 }: {
   exercise: RoutineDraftExerciseFormValues;
+  onEdit: (exercise: RoutineDraftExerciseFormValues) => void;
+  onRemove: (position: number) => void;
 }) {
   return (
     <li
       className={cn(
-        'grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-t border-border/30 px-3 py-3 first:border-t-0',
+        'relative grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-t border-border/30 px-3 py-3 first:border-t-0',
         'sm:grid-cols-[minmax(0,1fr)_3.5rem_3.5rem_5rem_4rem_2rem] sm:gap-2 sm:py-2.5',
       )}
     >
@@ -64,22 +84,58 @@ function RoutineExerciseRow({
         </div>
       </div>
 
-      <span className="hidden text-center text-sm sm:block">
+      <span
+        className="hidden min-w-0 truncate px-1 text-center text-sm sm:block"
+        title={String(exercise.sets)}
+      >
         {exercise.sets}
       </span>
-      <span className="hidden text-center text-sm sm:block">
+      <span
+        className="hidden min-w-0 truncate px-1 text-center text-sm sm:block"
+        title={String(exercise.targetReps)}
+      >
         {exercise.targetReps}
       </span>
-      <span className="hidden text-center text-sm sm:block">
+      <span
+        className="hidden min-w-0 truncate px-1 text-center text-sm sm:block"
+        title={`${exercise.weight} ${exercise.weightUnit}`}
+      >
         {exercise.weight} {exercise.weightUnit}
       </span>
-      <span className="hidden text-center text-sm sm:block">
+      <span
+        className="hidden min-w-0 truncate px-1 text-center text-sm sm:block"
+        title={`${exercise.restBetweenSetsSeconds}s`}
+      >
         {exercise.restBetweenSetsSeconds}s
       </span>
-      <MoreHorizontal
-        aria-hidden="true"
-        className="size-4 text-muted-foreground"
-      />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            aria-label={`Actions for ${exercise.name}`}
+            className={cn(
+              'absolute top-1/2 right-1 size-8 -translate-y-1/2',
+              'text-muted-foreground',
+              'sm:static sm:translate-y-0 sm:justify-self-end',
+            )}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <MoreHorizontal aria-hidden="true" className="size-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onSelect={() => onEdit(exercise)}>
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onSelect={() => onRemove(exercise.position)}
+          >
+            Remove
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </li>
   );
 }

apps/web/src/features/routines/create/exercise-configuration/exercise-configuration.test.tsx

@@ -30,8 +30,16 @@ function renderConfiguration(exerciseId: string) {
   const configurationRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: '/routines/new/exercises/$exerciseId',
-    component: () => <ExerciseConfiguration exerciseId={exerciseId} />,
+    component: ConfigurationRoute,
   });
+
+  function ConfigurationRoute() {
+    const { position } = configurationRoute.useSearch();
+
+    return (
+      <ExerciseConfiguration editPosition={position} exerciseId={exerciseId} />
+    );
+  }
   const editorRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: '/routines/new',
@@ -103,6 +111,30 @@ it('shows the selected exercise and initial configuration fields', async () => {
   expect(screen.getByText('10 lb')).toBeVisible();
   expect(screen.getByText('60s')).toBeVisible();
 
+  await user.click(
+    screen.getByRole('button', { name: 'Actions for Bicep Curl' }),
+  );
+  await user.click(screen.getByRole('menuitem', { name: 'Edit' }));
+
+  const setsInput = await screen.findByLabelText('Sets');
+  await user.clear(setsInput);
+  await user.type(setsInput, '5');
+  await user.click(screen.getByRole('button', { name: 'Done' }));
+
+  expect(
+    await screen.findByRole('heading', { name: 'Exercises (1)' }),
+  ).toBeVisible();
+  expect(screen.getByTitle('5')).toBeVisible();
+
+  await user.click(
+    screen.getByRole('button', { name: 'Actions for Bicep Curl' }),
+  );
+  await user.click(screen.getByRole('menuitem', { name: 'Remove' }));
+
+  expect(
+    await screen.findByRole('heading', { name: 'Exercises (0)' }),
+  ).toBeVisible();
+
   await user.click(screen.getByRole('button', { name: 'Add Exercise' }));
 
   expect(await screen.findByLabelText('Search exercises')).toBeVisible();