From 12539fedf3020468fded3945d5dfc4c8396e7750 Mon Sep 17 00:00:00 2001
From: cashmere <cashmere@autistici.org>
Date: Sun, 26 Jul 2026 22:13:01 +0200
Subject: feat: single undo step for freeze frame

The handler fired four separate commands (asset add, split, move, insert),
producing four undo steps. It now builds one BatchCommand and executes it
once. The new ShiftSplitRemainderCommand resolves the split's right-side
elements lazily at execute() so it can be composed after the split in the
batch, and rebuilds the inner move on redo since a re-executed split
generates fresh element ids.
---
 apps/web/src/actions/use-editor-actions.ts | 46 ++++++++++++++++--------------
 1 file changed, 25 insertions(+), 21 deletions(-)

(limited to 'apps/web/src/actions')

diff --git a/apps/web/src/actions/use-editor-actions.ts b/apps/web/src/actions/use-editor-actions.ts
index 41408635..598e73b0 100644
--- a/apps/web/src/actions/use-editor-actions.ts
+++ b/apps/web/src/actions/use-editor-actions.ts
@@ -28,6 +28,13 @@ import {
 import { useCommittedRef } from "@/hooks/use-committed-ref";
 import { toast } from "sonner";
 import { generateImageThumbnail } from "@/media/processing";
+import {
+	AddMediaAssetCommand,
+	BatchCommand,
+	InsertElementCommand,
+	ShiftSplitRemainderCommand,
+	SplitElementsCommand,
+} from "@/commands";
 
 export function useEditorActions() {
 	const editor = useEditor();
@@ -413,7 +420,9 @@ export function useEditorActions() {
 			const { thumbnailUrl } = await generateImageThumbnail({
 				imageFile: file,
 			});
-			const asset = await editor.media.addMediaAsset({
+
+			const freezeDuration = mediaTimeFromSeconds({ seconds: 3 });
+			const addMediaCommand = new AddMediaAssetCommand({
 				projectId: activeProject.metadata.id,
 				asset: {
 					file,
@@ -425,32 +434,19 @@ export function useEditorActions() {
 					height: activeProject.settings.canvasSize.height,
 				},
 			});
-			if (!asset) {
-				return;
-			}
-
-			const freezeDuration = mediaTimeFromSeconds({ seconds: 3 });
-			const rightSideElements = editor.timeline.splitElements({
+			const splitCommand = new SplitElementsCommand({
 				elements: [
 					{ trackId: target.track.id, elementId: target.element.id },
 				],
 				splitTime: currentTime,
 			});
-
-			if (rightSideElements.length > 0) {
-				editor.timeline.moveElements({
-					moves: rightSideElements.map((element) => ({
-						sourceTrackId: element.trackId,
-						targetTrackId: element.trackId,
-						elementId: element.elementId,
-						newStartTime: addMediaTime({ a: currentTime, b: freezeDuration }),
-					})),
-				});
-			}
-
-			editor.timeline.insertElement({
+			const shiftCommand = new ShiftSplitRemainderCommand({
+				split: splitCommand,
+				newStartTime: addMediaTime({ a: currentTime, b: freezeDuration }),
+			});
+			const insertCommand = new InsertElementCommand({
 				element: buildElementFromMedia({
-					mediaId: asset.id,
+					mediaId: addMediaCommand.getAssetId(),
 					mediaType: "image",
 					name: "Freeze frame",
 					duration: freezeDuration,
@@ -458,6 +454,14 @@ export function useEditorActions() {
 				}),
 				placement: { mode: "explicit", trackId: target.track.id },
 			});
+			editor.command.execute({
+				command: new BatchCommand([
+					addMediaCommand,
+					splitCommand,
+					shiftCommand,
+					insertCommand,
+				]),
+			});
 		},
 		undefined,
 	);
-- 
cgit v1.3.1