feat: Clip effects, asset sorting, and timeline improvements

Major features and improvements:

* **Clip Effects**:
  * Added UI in Properties Panel to manage effects on video/image clips (add, remove, toggle, reorder).
  * Implemented dynamic parameter fields for effects.
  * Added support for keyframing effect parameters.

* **Assets Panel**:
  * Added sorting options: Name, Type, Duration, and File Size.
  * Persisted view preferences (grid/list mode, sort order) to local storage.
  * Refactored media item rendering and drag interactions.

* **Timeline & Interaction**:
  * **Keyframe Dragging**: Added ability to drag keyframes directly on the timeline element.
  * **Resizing**: Improved resize logic to respect neighboring clips (prevents overlaps).
  * **Visuals**: Implemented tiled background rendering for video/image clips on the timeline.
  * **Shortcuts**: Added "Deselect All" action bound to the `Escape` key.
  * **Fixes**: Corrected drag-and-drop coordinate calculations when the timeline track area is scrolled.

* **Text Elements**:
  * Refactored text background storage to use an explicit `enabled` flag.
  * Added `V8toV9` storage migration to update existing projects.

* **Architecture**:
  * Moved export state management to `ProjectManager` for better lifecycle handling.
  * Refactored `PropertiesPanel` sections to be more composable (custom headers, borders).

apps/web/src/core/managers/timeline-manager.ts

@@ -1,4 +1,5 @@
 import type { EditorCore } from "@/core";
+import type { EffectParamValues } from "@/types/effects";
 import type {
 	TrackType,
 	TimelineTrack,
@@ -32,6 +33,13 @@ import {
 	UpsertKeyframeCommand,
 	RemoveKeyframeCommand,
 	RetimeKeyframeCommand,
+	AddClipEffectCommand,
+	RemoveClipEffectCommand,
+	UpdateClipEffectParamsCommand,
+	ToggleClipEffectCommand,
+	ReorderClipEffectsCommand,
+	UpsertEffectParamKeyframeCommand,
+	RemoveEffectParamKeyframeCommand,
 } from "@/lib/commands/timeline";
 import { BatchCommand, PreviewTracker } from "@/lib/commands";
 import type { InsertElementParams } from "@/lib/commands/timeline/element/insert-element";
@@ -62,17 +70,23 @@ export class TimelineManager {
 		elementId,
 		trimStart,
 		trimEnd,
+		startTime,
+		duration,
 		pushHistory = true,
 	}: {
 		elementId: string;
 		trimStart: number;
 		trimEnd: number;
+		startTime?: number;
+		duration?: number;
 		pushHistory?: boolean;
 	}): void {
 		const command = new UpdateElementTrimCommand({
 			elementId,
 			trimStart,
 			trimEnd,
+			startTime,
+			duration,
 		});
 		if (pushHistory) {
 			this.editor.command.execute({ command });
@@ -124,12 +138,14 @@ export class TimelineManager {
 		elementId,
 		newStartTime,
 		createTrack,
+		rippleEnabled = false,
 	}: {
 		sourceTrackId: string;
 		targetTrackId: string;
 		elementId: string;
 		newStartTime: number;
 		createTrack?: { type: TrackType; index: number };
+		rippleEnabled?: boolean;
 	}): void {
 		const command = new MoveElementCommand({
 			sourceTrackId,
@@ -137,6 +153,7 @@ export class TimelineManager {
 			elementId,
 			newStartTime,
 			createTrack,
+			rippleEnabled,
 		});
 		this.editor.command.execute({ command });
 	}
@@ -253,6 +270,104 @@ export class TimelineManager {
 		}
 	}
 
+	addClipEffect({
+		trackId,
+		elementId,
+		effectType,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectType: string;
+	}): string {
+		const command = new AddClipEffectCommand({
+			trackId,
+			elementId,
+			effectType,
+		});
+		this.editor.command.execute({ command });
+		return command.getEffectId() ?? "";
+	}
+
+	removeClipEffect({
+		trackId,
+		elementId,
+		effectId,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectId: string;
+	}): void {
+		const command = new RemoveClipEffectCommand({
+			trackId,
+			elementId,
+			effectId,
+		});
+		this.editor.command.execute({ command });
+	}
+
+	updateClipEffectParams({
+		trackId,
+		elementId,
+		effectId,
+		params,
+		pushHistory = true,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectId: string;
+		params: Partial<EffectParamValues>;
+		pushHistory?: boolean;
+	}): void {
+		const command = new UpdateClipEffectParamsCommand({
+			trackId,
+			elementId,
+			effectId,
+			params,
+		});
+		if (pushHistory) {
+			this.editor.command.execute({ command });
+		} else {
+			command.execute();
+		}
+	}
+
+	toggleClipEffect({
+		trackId,
+		elementId,
+		effectId,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectId: string;
+	}): void {
+		const command = new ToggleClipEffectCommand({
+			trackId,
+			elementId,
+			effectId,
+		});
+		this.editor.command.execute({ command });
+	}
+
+	reorderClipEffects({
+		trackId,
+		elementId,
+		fromIndex,
+		toIndex,
+	}: {
+		trackId: string;
+		elementId: string;
+		fromIndex: number;
+		toIndex: number;
+	}): void {
+		const command = new ReorderClipEffectsCommand({
+			trackId,
+			elementId,
+			fromIndex,
+			toIndex,
+		});
+		this.editor.command.execute({ command });
+	}
+
 	upsertKeyframes({
 		keyframes,
 	}: {
@@ -346,6 +461,61 @@ export class TimelineManager {
 		this.editor.command.execute({ command });
 	}
 
+	upsertEffectParamKeyframe({
+		trackId,
+		elementId,
+		effectId,
+		paramKey,
+		time,
+		value,
+		interpolation,
+		keyframeId,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectId: string;
+		paramKey: string;
+		time: number;
+		value: number;
+		interpolation?: "linear" | "hold";
+		keyframeId?: string;
+	}): void {
+		const command = new UpsertEffectParamKeyframeCommand({
+			trackId,
+			elementId,
+			effectId,
+			paramKey,
+			time,
+			value,
+			interpolation,
+			keyframeId,
+		});
+		this.editor.command.execute({ command });
+	}
+
+	removeEffectParamKeyframe({
+		trackId,
+		elementId,
+		effectId,
+		paramKey,
+		keyframeId,
+	}: {
+		trackId: string;
+		elementId: string;
+		effectId: string;
+		paramKey: string;
+		keyframeId: string;
+	}): void {
+		const command = new RemoveEffectParamKeyframeCommand({
+			trackId,
+			elementId,
+			effectId,
+			paramKey,
+			keyframeId,
+		});
+		this.editor.command.execute({ command });
+	}
+
 	isPreviewActive(): boolean {
 		return this.previewTracker.isActive();
 	}