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(null); const tracksWithSelection = useMemo( () => new Set(selectedElements.map((el) => el.trackId)), [selectedElements], @@ -773,7 +784,7 @@ function TimelineTrackRows({ icon={} onClick={(event: React.MouseEvent) => { event.stopPropagation(); - timeline.removeTrack({ trackId: track.id }); + setTrackToDelete(track); }} variant="destructive" > @@ -783,6 +794,30 @@ function TimelineTrackRows({ ))} + {trackToDelete && ( + !open && setTrackToDelete(null)}> + + + Delete track? + + This will remove {trackToDelete.elements.length} element{trackToDelete.elements.length === 1 ? "" : "s"}. + This action cannot be undone. + + + + Cancel + { + timeline.removeTrack({ trackId: trackToDelete.id }); + setTrackToDelete(null); + }} + > + Delete + + + + + )} ); }