From c29633588f4a9ad4a11f2a85b6d24a86c700bf5b Mon Sep 17 00:00:00 2001
From: VitalCheffe <amineharchelkorane5@gmail.com>
Date: Mon, 30 Mar 2026 23:55:22 +0000
Subject: [PATCH] feat: add confirmation dialog for track deletion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Right-click → Delete track now shows an AlertDialog with element count
before removing. Prevents accidental destruction of tracks with many clips.

Fixes #738
---
 .../editor/panels/timeline/index.tsx          | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/editor/panels/timeline/index.tsx b/apps/web/src/components/editor/panels/timeline/index.tsx
index 5b1ebb967..16356a4c1 100644
--- a/apps/web/src/components/editor/panels/timeline/index.tsx
+++ b/apps/web/src/components/editor/panels/timeline/index.tsx
@@ -20,6 +20,16 @@ import {
 	ContextMenuItem,
 	ContextMenuTrigger,
 } from "@/components/ui/context-menu";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { useTimelineZoom } from "@/hooks/timeline/use-timeline-zoom";
 import {
 	useCallback,
@@ -675,6 +685,7 @@ function TimelineTrackRows({
 	const timeline = useEditor((e) => e.timeline);
 	const tracks = useEditor((e) => e.timeline.getTracks());
 	const { selectedElements } = useElementSelection();
+	const [trackToDelete, setTrackToDelete] = useState<TimelineTrack | null>(null);
 	const tracksWithSelection = useMemo(
 		() => new Set(selectedElements.map((el) => el.trackId)),
 		[selectedElements],
@@ -773,7 +784,7 @@ function TimelineTrackRows({
 								icon={<HugeiconsIcon icon={Delete02Icon} />}
 								onClick={(event: React.MouseEvent) => {
 									event.stopPropagation();
-									timeline.removeTrack({ trackId: track.id });
+									setTrackToDelete(track);
 								}}
 								variant="destructive"
 							>
@@ -783,6 +794,30 @@ function TimelineTrackRows({
 					</ContextMenuContent>
 				</ContextMenu>
 			))}
+			{trackToDelete && (
+				<AlertDialog open onOpenChange={(open) => !open && setTrackToDelete(null)}>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>Delete track?</AlertDialogTitle>
+							<AlertDialogDescription>
+								This will remove {trackToDelete.elements.length} element{trackToDelete.elements.length === 1 ? "" : "s"}.
+								This action cannot be undone.
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel>Cancel</AlertDialogCancel>
+							<AlertDialogAction
+								onClick={() => {
+									timeline.removeTrack({ trackId: trackToDelete.id });
+									setTrackToDelete(null);
+								}}
+							>
+								Delete
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			)}
 		</>
 	);
 }