From 73164a44298c068c7ae3dd006b879f29bc299bad Mon Sep 17 00:00:00 2001
From: rd-code-23 <rddeveloper23@gmail.com>
Date: Thu, 3 Sep 2026 20:10:18 -0700
Subject: [PATCH 1/2] fix(web): refine routine exercise table

---
 .../routines/create/editor/routine-editor.tsx |  8 ++---
 .../create/editor/routine-exercise-list.tsx   | 30 ++++++++++++++-----
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/features/routines/create/editor/routine-editor.tsx b/apps/web/src/features/routines/create/editor/routine-editor.tsx
index c6f667f..19f4d60 100644
--- a/apps/web/src/features/routines/create/editor/routine-editor.tsx
+++ b/apps/web/src/features/routines/create/editor/routine-editor.tsx
@@ -26,12 +26,12 @@ export function RoutineEditor() {
       <EditorHeader onClear={() => reset()} />
 
       <form className="grid gap-6 lg:grid-cols-2">
-        <div className="space-y-6">
-          <RoutineDetails />
+        <RoutineDetails />
+        <RoutineScheduleField />
+
+        <div className="lg:col-span-2">
           <ExerciseSection onAddExercise={() => void addExercise()} />
         </div>
-
-        <RoutineScheduleField />
       </form>
     </section>
   );
diff --git a/apps/web/src/features/routines/create/editor/routine-exercise-list.tsx b/apps/web/src/features/routines/create/editor/routine-exercise-list.tsx
index 84529a8..fababfb 100644
--- a/apps/web/src/features/routines/create/editor/routine-exercise-list.tsx
+++ b/apps/web/src/features/routines/create/editor/routine-exercise-list.tsx
@@ -10,7 +10,7 @@ export function RoutineExerciseList({
   exercises: RoutineDraftExerciseFormValues[];
 }) {
   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',
@@ -43,7 +43,7 @@ function RoutineExerciseRow({
   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,21 +64,37 @@ 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"
+        className={cn(
+          'absolute top-1/2 right-3 size-4 -translate-y-1/2',
+          'text-muted-foreground',
+          'sm:static sm:translate-y-0 sm:justify-self-end',
+        )}
       />
     </li>
   );

From 521188d45cd458ef5c2f9f1ca815ccc9c37609f6 Mon Sep 17 00:00:00 2001
From: rd-code-23 <rddeveloper23@gmail.com>
Date: Tue, 8 Sep 2026 13:33:18 -0700
Subject: [PATCH 2/2] feat(web): edit routine draft exercises

---
 apps/web/src/components/ui/dropdown-menu.tsx  | 51 ++++++++++++++++
 .../routines/create/editor/routine-editor.tsx | 51 ++++++++++++++--
 .../create/editor/routine-exercise-list.tsx   | 58 ++++++++++++++++---
 .../exercise-configuration.test.tsx           | 34 ++++++++++-
 .../exercise-configuration.tsx                | 53 ++++++++++++-----
 .../routines_.new_.exercises_.$exerciseId.tsx |  9 ++-
 6 files changed, 227 insertions(+), 29 deletions(-)
 create mode 100644 apps/web/src/components/ui/dropdown-menu.tsx

diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..a3c2863
--- /dev/null
+++ b/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,
+};
diff --git a/apps/web/src/features/routines/create/editor/routine-editor.tsx b/apps/web/src/features/routines/create/editor/routine-editor.tsx
index 19f4d60..89b4a5e 100644
--- a/apps/web/src/features/routines/create/editor/routine-editor.tsx
+++ b/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,6 +24,14 @@ 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()} />
@@ -30,7 +41,10 @@ export function RoutineEditor() {
         <RoutineScheduleField />
 
         <div className="lg:col-span-2">
-          <ExerciseSection onAddExercise={() => void addExercise()} />
+          <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">
diff --git a/apps/web/src/features/routines/create/editor/routine-exercise-list.tsx b/apps/web/src/features/routines/create/editor/routine-exercise-list.tsx
index fababfb..dd5ac0a 100644
--- a/apps/web/src/features/routines/create/editor/routine-exercise-list.tsx
+++ b/apps/web/src/features/routines/create/editor/routine-exercise-list.tsx
@@ -1,13 +1,24 @@
 /** 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 w-full overflow-hidden rounded-lg bg-surface-elevated lg:w-fit lg:max-w-3xl">
@@ -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,8 +53,12 @@ export function RoutineExerciseList({
 
 function RoutineExerciseRow({
   exercise,
+  onEdit,
+  onRemove,
 }: {
   exercise: RoutineDraftExerciseFormValues;
+  onEdit: (exercise: RoutineDraftExerciseFormValues) => void;
+  onRemove: (position: number) => void;
 }) {
   return (
     <li
@@ -88,14 +108,34 @@ function RoutineExerciseRow({
       >
         {exercise.restBetweenSetsSeconds}s
       </span>
-      <MoreHorizontal
-        aria-hidden="true"
-        className={cn(
-          'absolute top-1/2 right-3 size-4 -translate-y-1/2',
-          'text-muted-foreground',
-          'sm:static sm:translate-y-0 sm:justify-self-end',
-        )}
-      />
+      <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>
   );
 }
diff --git a/apps/web/src/features/routines/create/exercise-configuration/exercise-configuration.test.tsx b/apps/web/src/features/routines/create/exercise-configuration/exercise-configuration.test.tsx
index 4f988aa..dae0a35 100644
--- a/apps/web/src/features/routines/create/exercise-configuration/exercise-configuration.test.tsx
+++ b/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();
diff --git a/apps/web/src/features/routines/create/exercise-configuration/exercise-configuration.tsx b/apps/web/src/features/routines/create/exercise-configuration/exercise-configuration.tsx
index 99e239f..01ed6c0 100644
--- a/apps/web/src/features/routines/create/exercise-configuration/exercise-configuration.tsx
+++ b/apps/web/src/features/routines/create/exercise-configuration/exercise-configuration.tsx
@@ -33,10 +33,12 @@ type RoutineExerciseInput = z.output<typeof createRoutineExerciseInputSchema>;
 
 type ExerciseConfigurationProps = {
   exerciseId: string;
+  editPosition?: number;
 };
 
 export function ExerciseConfiguration({
   exerciseId,
+  editPosition,
 }: ExerciseConfigurationProps) {
   const exercisesQuery = useExercises();
   const exercise = exercisesQuery.data?.exercises.find(
@@ -54,7 +56,12 @@ export function ExerciseConfiguration({
       </p>
     );
   } else if (exercise) {
-    content = <ExerciseConfigurationForm exercise={exercise} />;
+    content = (
+      <ExerciseConfigurationForm
+        editPosition={editPosition}
+        exercise={exercise}
+      />
+    );
   }
 
   return (
@@ -86,17 +93,27 @@ function ConfigurationHeader() {
 
 function ExerciseConfigurationForm({
   exercise,
+  editPosition,
 }: {
   exercise: ExerciseSummary;
+  editPosition?: number;
 }) {
   const navigate = useNavigate();
   const { getValues, setValue: setDraftValue } =
     useFormContext<RoutineDraftFormValues>();
 
-  const defaultValues = createRoutineExerciseInputSchema.parse({
-    exerciseId: exercise.id,
-    position: getValues('exercises').length,
-  });
+  const existingExercise = getValues('exercises').find(
+    (draftExercise) =>
+      draftExercise.position === editPosition &&
+      draftExercise.exerciseId === exercise.id,
+  );
+
+  const defaultValues = existingExercise
+    ? createRoutineExerciseInputSchema.strip().parse(existingExercise)
+    : createRoutineExerciseInputSchema.parse({
+        exerciseId: exercise.id,
+        position: getValues('exercises').length,
+      });
 
   const {
     handleSubmit,
@@ -108,15 +125,25 @@ function ExerciseConfigurationForm({
     resolver: zodResolver(createRoutineExerciseInputSchema),
   });
 
+  if (editPosition !== undefined && !existingExercise) {
+    return <ExerciseNotFound />;
+  }
+
   async function saveExercise(input: RoutineExerciseInput) {
-    setDraftValue(
-      'exercises',
-      [...getValues('exercises'), { ...input, name: exercise.name }],
-      {
-        shouldDirty: true,
-        shouldValidate: true,
-      },
-    );
+    const configuredExercise = { ...input, name: exercise.name };
+    const currentExercises = getValues('exercises');
+    const exercises = existingExercise
+      ? currentExercises.map((draftExercise) =>
+          draftExercise.position === existingExercise.position
+            ? configuredExercise
+            : draftExercise,
+        )
+      : [...currentExercises, configuredExercise];
+
+    setDraftValue('exercises', exercises, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
     await navigate({ to: '/routines/new' });
   }
 
diff --git a/apps/web/src/routes/_app._routine-create/routines_.new_.exercises_.$exerciseId.tsx b/apps/web/src/routes/_app._routine-create/routines_.new_.exercises_.$exerciseId.tsx
index 16eee46..4498a9c 100644
--- a/apps/web/src/routes/_app._routine-create/routines_.new_.exercises_.$exerciseId.tsx
+++ b/apps/web/src/routes/_app._routine-create/routines_.new_.exercises_.$exerciseId.tsx
@@ -1,5 +1,6 @@
 /** Registers exercise configuration inside the persistent routine form flow. */
 import { createFileRoute } from '@tanstack/react-router';
+import { z } from 'zod';
 
 import { ExerciseConfiguration } from '../../features/routines/create/exercise-configuration/exercise-configuration';
 
@@ -7,10 +8,16 @@ export const Route = createFileRoute(
   '/_app/_routine-create/routines_/new_/exercises_/$exerciseId',
 )({
   component: ExerciseConfigurationRoute,
+  validateSearch: z.object({
+    position: z.coerce.number().int().nonnegative().optional(),
+  }),
 });
 
 function ExerciseConfigurationRoute() {
   const { exerciseId } = Route.useParams();
+  const { position } = Route.useSearch();
 
-  return <ExerciseConfiguration exerciseId={exerciseId} />;
+  return (
+    <ExerciseConfiguration exerciseId={exerciseId} editPosition={position} />
+  );
 }