desktop app: improve trimming behaviour

apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx

@@ -197,6 +197,12 @@ export function ClipTrack(
 
 	const split = () => editorState.timeline.interactMode === "split";
 
+	// Shared state for tracking which segment is being dragged and its offset
+	const [activeDragState, setActiveDragState] = createSignal<null | {
+		segmentIndex: number;
+		offset: number;
+	}>(null);
+
 	return (
 		<TrackRoot
 			ref={props.ref}
@@ -224,13 +230,25 @@ export function ClipTrack(
 
 					const relativeSegment = createMemo(() => {
 						const ds = startHandleDrag();
-						const offset = ds ? ds.offset / segment.timescale : 0;
+						const currentOffset = ds ? ds.offset / segment.timescale : 0;
+
+						// Check if any previous segment is being dragged
+						const dragState = activeDragState();
+						let previousDragOffset = 0;
+						if (dragState && dragState.segmentIndex < i()) {
+							// Apply the drag offset from the previous segment
+							previousDragOffset = dragState.offset / segment.timescale;
+						}
 
 						return {
-							start: Math.max(prevDuration() + offset, 0),
+							start: Math.max(
+								prevDuration() + currentOffset + previousDragOffset,
+								0,
+							),
 							end:
 								prevDuration() +
-								offset +
+								currentOffset +
+								previousDragOffset +
 								(segment.end - segment.start) / segment.timescale,
 							timescale: segment.timescale,
 							recordingSegment: segment.recordingSegment,
@@ -385,6 +403,7 @@ export function ClipTrack(
 									isSelected()
 										? "wobble-wrapper border-gray-12"
 										: "border-transparent",
+									startHandleDrag() && "z-50",
 								)}
 								innerClass="ring-blue-9"
 								segment={relativeSegment()}
@@ -544,11 +563,19 @@ export function ClipTrack(
 												segment.end - 1,
 											);
 
+											const offset = clampedStart - initialStart;
+
 											setStartHandleDrag({
-												offset: clampedStart - initialStart,
+												offset: offset,
 												initialStart,
 											});
 
+											// Update shared drag state for following segments
+											setActiveDragState({
+												segmentIndex: i(),
+												offset: offset,
+											});
+
 											setProject(
 												"timeline",
 												"segments",
@@ -562,8 +589,8 @@ export function ClipTrack(
 										createRoot((dispose) => {
 											onCleanup(() => {
 												resumeHistory();
-												console.log("NUL");
 												setStartHandleDrag(null);
+												setActiveDragState(null);
 												onHandleReleased();
 											});
 

apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx

@@ -116,23 +116,27 @@ export function ZoomTrack(props: {
 				if (availableTime < minDuration) return;
 			}
 
-			if (nextSegment.value[0].start - previewTime < 1)
-				return {
-					index: nextSegment.value[1],
-					start: nextSegment.value[0].start - minDuration,
-					end: nextSegment.value[0].start,
-					max: nextSegment.value[0].start,
-				};
+			// Check if there's space between preview time and next segment
+			const spaceToNext = nextSegment.value[0].start - previewTime;
+			if (spaceToNext < minDuration) {
+				// If there's not enough space for minimum duration, don't show proposed zoom
+				return;
+			}
 		}
 
+		const max = nextSegment.pipe(
+			Option.map(([s]) => s.start),
+			Option.getOrElse(() => totalDuration()),
+		);
+
+		// Check if there's enough space before returning
+		if (max - previewTime < minDuration) return;
+
 		return {
 			index: nextSegment.pipe(Option.map(([_, i]) => i)),
 			start: previewTime,
 			end: previewTime + minDuration,
-			max: nextSegment.pipe(
-				Option.map(([s]) => s.start),
-				Option.getOrElse(() => totalDuration()),
-			),
+			max: max,
 		};
 	};
 
@@ -418,7 +422,7 @@ export function ZoomTrack(props: {
 					return (
 						<SegmentRoot
 							class={cx(
-								"border duration-200 hover:border-gray-12 transition-colors group",
+								"border duration-200 hover:border-gray-12 transition-colors group z-10",
 								"bg-gradient-to-r from-[#292929] via-[#434343] to-[#292929] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]",
 								isSelected()
 									? "wobble-wrapper border-gray-12"
@@ -609,7 +613,7 @@ export function ZoomTrack(props: {
 			>
 				{(details) => (
 					<SegmentRoot
-						class="pointer-events-none"
+						class="z-0 pointer-events-none"
 						innerClass="ring-red-300"
 						segment={details()}
 					>