Merge branch 'dev' into ripple-editing

1 files changed, 39 insertions, 22 deletions

diff --git a/apps/web/src/components/editor/panels/properties/index.tsx b/apps/web/src/components/editor/panels/properties/index.tsx
index 05ad5396..75dd81a9 100644
--- a/apps/web/src/components/editor/panels/properties/index.tsx
+++ b/apps/web/src/components/editor/panels/properties/index.tsx
@@ -4,9 +4,37 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { AudioProperties } from "./audio-properties";
 import { VideoProperties } from "./video-properties";
 import { TextProperties } from "./text-properties";
+import { EffectProperties } from "./effect-properties";
 import { EmptyView } from "./empty-view";
 import { useEditor } from "@/hooks/use-editor";
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
+import type { TimelineElement, TimelineTrack } from "@/types/timeline";
+
+function ElementProperties({
+	track,
+	element,
+}: {
+	track: TimelineTrack;
+	element: TimelineElement;
+}) {
+	if (element.type === "text") {
+		return <TextProperties element={element} trackId={track.id} />;
+	}
+	if (element.type === "audio") {
+		return <AudioProperties _element={element} />;
+	}
+	if (
+		element.type === "video" ||
+		element.type === "image" ||
+		element.type === "sticker"
+	) {
+		return <VideoProperties element={element} trackId={track.id} />;
+	}
+	if (element.type === "effect") {
+		return <EffectProperties element={element} trackId={track.id} />;
+	}
+	return null;
+}
 
 export function PropertiesPanel() {
 	const editor = useEditor();
@@ -16,30 +44,19 @@ export function PropertiesPanel() {
 		elements: selectedElements,
 	});
 
+	const hasSelection = selectedElements.length > 0;
+
 	return (
 		<div className="panel bg-background h-full rounded-sm border overflow-hidden">
-			{selectedElements.length > 0 ? (
-				<ScrollArea className="h-full">
-					{elementsWithTracks.map(({ track, element }) => {
-						if (element.type === "text") {
-							return (
-								<div key={element.id}>
-									<TextProperties element={element} trackId={track.id} />
-								</div>
-							);
-						}
-						if (element.type === "audio") {
-							return <AudioProperties key={element.id} _element={element} />;
-						}
-						if (element.type === "video" || element.type === "image") {
-							return (
-								<div key={element.id}>
-									<VideoProperties _element={element} />
-								</div>
-							);
-						}
-						return null;
-					})}
+			{hasSelection ? (
+				<ScrollArea className="h-full scrollbar-hidden">
+					{elementsWithTracks.map(({ track, element }) => (
+						<ElementProperties
+							key={element.id}
+							track={track}
+							element={element}
+						/>
+					))}
 				</ScrollArea>
 			) : (
 				<EmptyView />