From e7dcb586c0408255a0bf788e355fdb6d50d9b923 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 2 Mar 2026 13:13:07 +0100
Subject: 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).
---
 .../editor/panels/properties/sections/blending.tsx |  8 +++----
 .../panels/properties/sections/transform.tsx       | 25 ++++++++++++++--------
 2 files changed, 20 insertions(+), 13 deletions(-)

(limited to 'apps/web/src/components/editor/panels/properties/sections')

diff --git a/apps/web/src/components/editor/panels/properties/sections/blending.tsx b/apps/web/src/components/editor/panels/properties/sections/blending.tsx
index 4343c692..66fe820f 100644
--- a/apps/web/src/components/editor/panels/properties/sections/blending.tsx
+++ b/apps/web/src/components/editor/panels/properties/sections/blending.tsx
@@ -8,7 +8,7 @@ import {
 } from "@/constants/timeline-constants";
 import { OcCheckerboardIcon } from "@opencut/ui/icons";
 import { Fragment, useRef } from "react";
-import { Section, SectionContent, SectionField, SectionHeader } from "../section";
+import { Section, SectionContent, SectionField, SectionHeader, SectionTitle } from "../section";
 import {
 	Select,
 	SelectContent,
@@ -74,7 +74,7 @@ export function BlendingSection({
 		committedBlendModeRef.current = blendMode;
 	}
 
-	const previewBlendMode = (value: BlendMode) =>
+	const previewBlendMode = ({ value }: { value: BlendMode }) =>
 		editor.timeline.previewElements({
 			updates: [
 				{ trackId, elementId: element.id, updates: { blendMode: value } },
@@ -123,7 +123,7 @@ export function BlendingSection({
 
 	return (
 		<Section collapsible sectionKey={`${element.type}:blending`}>
-			<SectionHeader title="Blending" />
+			<SectionHeader><SectionTitle>Blending</SectionTitle></SectionHeader>
 		<SectionContent>
 			<div className="flex items-start gap-2">
 				<SectionField label="Opacity" className="w-1/2">
@@ -175,7 +175,7 @@ export function BlendingSection({
 											key={option.value}
 											value={option.value}
 											onPointerEnter={() =>
-												previewBlendMode(option.value as BlendMode)
+												previewBlendMode({ value: option.value as BlendMode })
 											}
 										>
 											{option.label}
diff --git a/apps/web/src/components/editor/panels/properties/sections/transform.tsx b/apps/web/src/components/editor/panels/properties/sections/transform.tsx
index 3fdb47dc..6aaaa1fe 100644
--- a/apps/web/src/components/editor/panels/properties/sections/transform.tsx
+++ b/apps/web/src/components/editor/panels/properties/sections/transform.tsx
@@ -9,6 +9,7 @@ import {
 	SectionField,
 	SectionFields,
 	SectionHeader,
+	SectionTitle,
 } from "../section";
 import { Button } from "@/components/ui/button";
 import { HugeiconsIcon } from "@hugeicons/react";
@@ -24,12 +25,12 @@ import { getElementLocalTime, resolveTransformAtTime } from "@/lib/animation";
 import { KeyframeToggle } from "../keyframe-toggle";
 import { useKeyframedNumberProperty } from "../hooks/use-keyframed-number-property";
 
-function parseNumericInput({ input }: { input: string }): number | null {
+export function parseNumericInput({ input }: { input: string }): number | null {
 	const parsed = parseFloat(input);
 	return Number.isNaN(parsed) ? null : parsed;
 }
 
-function isPropertyAtDefault({
+export function isPropertyAtDefault({
 	hasAnimatedKeyframes,
 	isPlayheadWithinElementRange,
 	resolvedValue,
@@ -55,9 +56,11 @@ function isPropertyAtDefault({
 export function TransformSection({
 	element,
 	trackId,
+	showTopBorder = true,
 }: {
 	element: VisualElement;
 	trackId: string;
+	showTopBorder?: boolean;
 }) {
 	const editor = useEditor();
 	const [isScaleLocked, setIsScaleLocked] = useState(false);
@@ -239,8 +242,12 @@ export function TransformSection({
 	};
 
 	return (
-		<Section collapsible sectionKey={`${element.type}:transform`}>
-			<SectionHeader title="Transform" />
+		<Section
+			collapsible
+			sectionKey={`${element.type}:transform`}
+			showTopBorder={showTopBorder}
+		>
+			<SectionHeader><SectionTitle>Transform</SectionTitle></SectionHeader>
 			<SectionContent>
 				<SectionFields>
 					<SectionField
@@ -261,11 +268,11 @@ export function TransformSection({
 									<NumberField icon="H" {...scaleFieldProps} />
 								</>
 							) : (
-									<NumberField
-										icon={<HugeiconsIcon icon={ArrowExpandIcon} />}
-										{...scaleFieldProps}
-										className="flex-1"
-									/>
+								<NumberField
+									icon={<HugeiconsIcon icon={ArrowExpandIcon} />}
+									{...scaleFieldProps}
+									className="flex-1"
+								/>
 							)}
 							<Button
 								type="button"
-- 
cgit v1.3.1