3 files changed, 74 insertions, 9 deletions

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 8cccd0e4..bb414a9c 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -57,6 +57,7 @@ export function TimelineElement({
     updateElementTrim,
     updateElementDuration,
     removeElementFromTrack,
+    removeElementFromTrackWithRipple,
     dragState,
     splitElement,
     splitAndKeepLeft,
@@ -64,6 +65,7 @@ export function TimelineElement({
     separateAudio,
     addElementToTrack,
     replaceElementMedia,
+    rippleEditingEnabled,
   } = useTimelineStore();
   const { currentTime } = usePlaybackStore();
 
@@ -213,7 +215,11 @@ export function TimelineElement({
   };
 
   const handleElementDeleteContext = () => {
-    removeElementFromTrack(track.id, element.id);
+    if (rippleEditingEnabled) {
+      removeElementFromTrackWithRipple(track.id, element.id);
+    } else {
+      removeElementFromTrack(track.id, element.id);
+    }
   };
 
   const handleReplaceClip = () => {
diff --git a/apps/web/src/components/editor/timeline-track.tsx b/apps/web/src/components/editor/timeline-track.tsx
index 91b3ffa3..58ca411e 100644
--- a/apps/web/src/components/editor/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline-track.tsx
@@ -39,6 +39,7 @@ export function TimelineTrackContent({
     addTrack,
     moveElementToTrack,
     updateElementStartTime,
+    updateElementStartTimeWithRipple,
     addElementToTrack,
     selectedElements,
     selectElement,
@@ -49,6 +50,7 @@ export function TimelineTrackContent({
     clearSelectedElements,
     insertTrackAt,
     snappingEnabled,
+    rippleEditingEnabled,
   } = useTimelineStore();
 
   const { currentTime } = usePlaybackStore();
@@ -272,7 +274,20 @@ export function TimelineTrackContent({
 
           if (!hasOverlap) {
             if (dragState.trackId === track.id) {
-              updateElementStartTime(track.id, dragState.elementId, finalTime);
+              // Use ripple editing if enabled, otherwise regular update
+              if (rippleEditingEnabled) {
+                updateElementStartTimeWithRipple(
+                  track.id,
+                  dragState.elementId,
+                  finalTime
+                );
+              } else {
+                updateElementStartTime(
+                  track.id,
+                  dragState.elementId,
+                  finalTime
+                );
+              }
             } else {
               moveElementToTrack(
                 dragState.trackId,
@@ -280,11 +295,20 @@ export function TimelineTrackContent({
                 dragState.elementId
               );
               requestAnimationFrame(() => {
-                updateElementStartTime(
-                  track.id,
-                  dragState.elementId!,
-                  finalTime
-                );
+                // Use ripple editing if enabled, otherwise regular update
+                if (rippleEditingEnabled) {
+                  updateElementStartTimeWithRipple(
+                    track.id,
+                    dragState.elementId!,
+                    finalTime
+                  );
+                } else {
+                  updateElementStartTime(
+                    track.id,
+                    dragState.elementId!,
+                    finalTime
+                  );
+                }
               });
             }
           }
@@ -318,7 +342,16 @@ export function TimelineTrackContent({
           });
 
           if (!hasOverlap) {
-            updateElementStartTime(track.id, dragState.elementId, finalTime);
+            // Use ripple editing if enabled, otherwise regular update
+            if (rippleEditingEnabled) {
+              updateElementStartTimeWithRipple(
+                track.id,
+                dragState.elementId,
+                finalTime
+              );
+            } else {
+              updateElementStartTime(track.id, dragState.elementId, finalTime);
+            }
           }
         }
       }
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>