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/stores/assets-panel-store.tsx

@@ -1,5 +1,6 @@
 import type { ElementType } from "react";
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 import {
 	ArrowRightDoubleIcon,
 	ClosedCaptionIcon,
@@ -81,7 +82,9 @@ export const tabs = {
 	{ icon: ElementType<{ className?: string }>; label: string }
 >;
 
-type MediaViewMode = "grid" | "list";
+export type MediaViewMode = "grid" | "list";
+export type MediaSortKey = "name" | "type" | "duration" | "size";
+export type MediaSortOrder = "asc" | "desc";
 
 interface AssetsPanelStore {
 	activeTab: Tab;
@@ -93,15 +96,34 @@ interface AssetsPanelStore {
 	/* Media */
 	mediaViewMode: MediaViewMode;
 	setMediaViewMode: (mode: MediaViewMode) => void;
+	mediaSortBy: MediaSortKey;
+	mediaSortOrder: MediaSortOrder;
+	setMediaSort: (key: MediaSortKey, order: MediaSortOrder) => void;
 }
 
-export const useAssetsPanelStore = create<AssetsPanelStore>((set) => ({
-	activeTab: "media",
-	setActiveTab: (tab) => set({ activeTab: tab }),
-	highlightMediaId: null,
-	requestRevealMedia: (mediaId) =>
-		set({ activeTab: "media", highlightMediaId: mediaId }),
-	clearHighlight: () => set({ highlightMediaId: null }),
-	mediaViewMode: "grid",
-	setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
-}));
+export const useAssetsPanelStore = create<AssetsPanelStore>()(
+	persist(
+		(set) => ({
+			activeTab: "media",
+			setActiveTab: (tab) => set({ activeTab: tab }),
+			highlightMediaId: null,
+			requestRevealMedia: (mediaId) =>
+				set({ activeTab: "media", highlightMediaId: mediaId }),
+			clearHighlight: () => set({ highlightMediaId: null }),
+			mediaViewMode: "grid",
+			setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
+			mediaSortBy: "name",
+			mediaSortOrder: "asc",
+			setMediaSort: (key, order) =>
+				set({ mediaSortBy: key, mediaSortOrder: order }),
+		}),
+		{
+			name: "assets-panel",
+			partialize: (state) => ({
+				mediaViewMode: state.mediaViewMode,
+				mediaSortBy: state.mediaSortBy,
+				mediaSortOrder: state.mediaSortOrder,
+			}),
+		},
+	),
+);

apps/web/src/stores/keybindings-store.ts

@@ -39,8 +39,8 @@ interface KeybindingsState {
 	getKeybindingString: (ev: KeyboardEvent) => ShortcutKey | null;
 }
 
-function isDOMElement(el: EventTarget | null): el is HTMLElement {
-	return !!el && (el instanceof Element || el instanceof HTMLElement);
+function isDOMElement(element: EventTarget | null): element is HTMLElement {
+	return element instanceof HTMLElement;
 }
 
 export const useKeybindingsStore = create<KeybindingsState>()(
@@ -90,11 +90,9 @@ export const useKeybindingsStore = create<KeybindingsState>()(
 				set({ keybindingsEnabled: false });
 			},
 
-			importKeybindings: (config: KeybindingConfig) => {
-				// Validate all keys and actions
-				for (const [key] of Object.entries(config)) {
-					// Validate the key format
-					if (typeof key !== "string" || key.length === 0) {
+		importKeybindings: (config: KeybindingConfig) => {
+			for (const [key] of Object.entries(config)) {
+				if (typeof key !== "string" || key.length === 0) {
 						throw new Error(`Invalid key format: ${key}`);
 					}
 				}
@@ -153,20 +151,13 @@ export const useKeybindingsStore = create<KeybindingsState>()(
 	),
 );
 
-// Utility functions
 function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
 	const target = ev.target;
-
-	// We may or may not have a modifier key
 	const modifierKey = getActiveModifier(ev);
-
-	// We will always have a non-modifier key
 	const key = getPressedKey(ev);
 	if (!key) return null;
 
-	// All key combos backed by modifiers are valid shortcuts (whether currently typing or not)
 	if (modifierKey) {
-		// If the modifier is shift and the target is an input, we ignore
 		if (
 			modifierKey === "shift" &&
 			isDOMElement(target) &&
@@ -178,61 +169,44 @@ function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
 		return `${modifierKey}+${key}` as ShortcutKey;
 	}
 
-	// no modifier key here then we do not do anything while on input
-	if (
-		isDOMElement(target) &&
-		isTypableDOMElement({ element: target as HTMLElement })
-	)
+	if (isDOMElement(target) && isTypableDOMElement({ element: target as HTMLElement }))
 		return null;
 
-	// single key while not input
 	return `${key}` as ShortcutKey;
 }
 
 function getPressedKey(ev: KeyboardEvent): string | null {
-	// Sometimes the property code is not available on the KeyboardEvent object
 	const key = (ev.key ?? "").toLowerCase();
 	const code = ev.code ?? "";
 
 	if (code === "Space" || key === " " || key === "spacebar" || key === "space")
 		return "space";
 
-	// Check arrow keys
-	if (key.startsWith("arrow")) {
-		return key.slice(5);
-	}
+	if (key.startsWith("arrow")) return key.slice(5);
 
-	// Check for special keys
+	if (key === "escape") return "escape";
 	if (key === "tab") return "tab";
 	if (key === "home") return "home";
 	if (key === "end") return "end";
 	if (key === "delete") return "delete";
 	if (key === "backspace") return "backspace";
 
-	// Check letter keys
 	if (code.startsWith("Key")) {
 		const letter = code.slice(3).toLowerCase();
-		if (letter.length === 1 && letter >= "a" && letter <= "z") {
-			return letter;
-		}
+		if (letter.length === 1 && letter >= "a" && letter <= "z") return letter;
 	}
 
-	// Check number keys using physical position for AZERTY support
+	// Use physical key position for AZERTY and other non-QWERTY layouts
 	if (code.startsWith("Digit")) {
 		const digit = code.slice(5);
-		if (digit.length === 1 && digit >= "0" && digit <= "9") {
-			return digit;
-		}
+		if (digit.length === 1 && digit >= "0" && digit <= "9") return digit;
 	}
 
-	// Fallback for other layouts
 	const isDigit = key.length === 1 && key >= "0" && key <= "9";
 	if (isDigit) return key;
 
-	// Check if slash, period or enter
 	if (key === "/" || key === "." || key === "enter") return key;
 
-	// If no other cases match, this is not a valid key
 	return null;
 }
 
@@ -243,8 +217,6 @@ function getActiveModifier(ev: KeyboardEvent): string | null {
 		shift: ev.shiftKey,
 	};
 
-	// active modifier: ctrl | alt | ctrl+alt | ctrl+shift | ctrl+alt+shift | alt+shift
-	// modiferKeys object's keys are sorted to match the above order
 	const activeModifier = Object.keys(modifierKeys)
 		.filter((key) => modifierKeys[key as keyof typeof modifierKeys])
 		.join("+");

apps/web/src/stores/keybindings/migrations/index.ts

@@ -1,18 +1,16 @@
 import { v2ToV3 } from "./v2-to-v3";
 import { v3ToV4 } from "./v3-to-v4";
+import { v4ToV5 } from "./v4-to-v5";
 
 type MigrationFn = ({ state }: { state: unknown }) => unknown;
 
-/**
- * key = version we're migrating from
- * value = migration function
- */
 const migrations: Record<number, MigrationFn> = {
 	2: v2ToV3,
 	3: v3ToV4,
+	4: v4ToV5,
 };
 
-export const CURRENT_VERSION = 4;
+export const CURRENT_VERSION = 5;
 
 export function runMigrations({
 	state,

apps/web/src/stores/keybindings/migrations/v4-to-v5.ts

@@ -0,0 +1,17 @@
+import type { KeybindingConfig } from "@/types/keybinding";
+
+interface V4State {
+	keybindings: KeybindingConfig;
+	isCustomized: boolean;
+}
+
+export function v4ToV5({ state }: { state: unknown }): unknown {
+	const v4 = state as V4State;
+	const keybindings = { ...v4.keybindings };
+
+	if (!keybindings.escape) {
+		keybindings.escape = "deselect-all";
+	}
+
+	return { ...v4, keybindings };
+}

apps/web/src/stores/properties-store.ts

@@ -0,0 +1,19 @@
+import { create } from "zustand";
+
+interface ClipEffectsTarget {
+	elementId: string;
+	trackId: string;
+}
+
+interface PropertiesState {
+	clipEffectsTarget: ClipEffectsTarget | null;
+	openClipEffects: ({ elementId, trackId }: ClipEffectsTarget) => void;
+	closeClipEffects: () => void;
+}
+
+export const usePropertiesStore = create<PropertiesState>()((set) => ({
+	clipEffectsTarget: null,
+	openClipEffects: ({ elementId, trackId }) =>
+		set({ clipEffectsTarget: { elementId, trackId } }),
+	closeClipEffects: () => set({ clipEffectsTarget: null }),
+}));