refactor

1 files changed, 3 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 3a552b93..05ad5396 100644
--- a/apps/web/src/components/editor/panels/properties/index.tsx
+++ b/apps/web/src/components/editor/panels/properties/index.tsx
@@ -4,8 +4,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { AudioProperties } from "./audio-properties";
 import { VideoProperties } from "./video-properties";
 import { TextProperties } from "./text-properties";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { Settings05Icon } from "@hugeicons/core-free-icons";
+import { EmptyView } from "./empty-view";
 import { useEditor } from "@/hooks/use-editor";
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
 
@@ -18,9 +17,9 @@ export function PropertiesPanel() {
 	});
 
 	return (
-		<>
+		<div className="panel bg-background h-full rounded-sm border overflow-hidden">
 			{selectedElements.length > 0 ? (
-				<ScrollArea className="bg-panel h-full rounded-sm">
+				<ScrollArea className="h-full">
 					{elementsWithTracks.map(({ track, element }) => {
 						if (element.type === "text") {
 							return (
@@ -45,24 +44,6 @@ export function PropertiesPanel() {
 			) : (
 				<EmptyView />
 			)}
-		</>
-	);
-}
-
-function EmptyView() {
-	return (
-		<div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
-			<HugeiconsIcon
-				icon={Settings05Icon}
-				className="text-muted-foreground/75 size-10"
-				strokeWidth={1}
-			/>
-			<div className="flex flex-col gap-2 text-center">
-				<p className="text-lg font-medium">It's empty here</p>
-				<p className="text-muted-foreground text-sm text-balance">
-					Click an element on the timeline to edit its properties
-				</p>
-			</div>
 		</div>
 	);
 }