1 files changed, 27 insertions, 1 deletions
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index bfb663c6..8eb00875 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -19,6 +19,7 @@ import {
   ZoomIn,
   ZoomOut,
   LockOpen,
+  Link,
 } from "lucide-react";
 import {
   Tooltip,
@@ -71,6 +72,7 @@ export function Timeline() {
     addTrack,
     addElementToTrack,
     removeElementFromTrack,
+    removeElementFromTrackWithRipple,
     getTotalDuration,
     selectedElements,
     clearSelectedElements,
@@ -84,6 +86,8 @@ export function Timeline() {
     redo,
     snappingEnabled,
     toggleSnapping,
+    rippleEditingEnabled,
+    toggleRippleEditing,
     dragState,
   } = useTimelineStore();
   const { mediaItems, addMediaItem } = useMediaStore();
@@ -496,7 +500,11 @@ export function Timeline() {
       return;
     }
     selectedElements.forEach(({ trackId, elementId }) => {
-      removeElementFromTrack(trackId, elementId);
+      if (rippleEditingEnabled) {
+        removeElementFromTrackWithRipple(trackId, elementId);
+      } else {
+        removeElementFromTrack(trackId, elementId);
+      }
     });
     clearSelectedElements();
   };
@@ -770,6 +778,24 @@ export function Timeline() {
               </TooltipTrigger>
               <TooltipContent>Auto snapping</TooltipContent>
             </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="text"
+                  size="icon"
+                  onClick={toggleRippleEditing}
+                >
+                  <Link
+                    className={`h-4 w-4 ${rippleEditingEnabled ? "text-primary" : ""}`}
+                  />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {rippleEditingEnabled
+                  ? "Disable Ripple Editing"
+                  : "Enable Ripple Editing"}
+              </TooltipContent>
+            </Tooltip>
           </TooltipProvider>
         </div>
       </div>