feat: empty state on properties panel

3 files changed, 29 insertions, 104 deletions

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 03579144..cae8e779 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -199,7 +199,7 @@ export default function Editor() {
                   minSize={15}
                   maxSize={40}
                   onResize={setPropertiesPanel}
-                  className="min-w-0"
+                  className="min-w-0 rounded-sm"
                 >
                   <PropertiesPanel />
                 </ResizablePanel>
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index f1b3f6a3..6c79327e 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -1,95 +1,22 @@
 "use client";
 
-import { FPS_PRESETS } from "@/constants/timeline-constants";
-import { useAspectRatio } from "@/hooks/use-aspect-ratio";
 import { useMediaStore } from "@/stores/media-store";
-import { useProjectStore } from "@/stores/project-store";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { Label } from "../../ui/label";
 import { ScrollArea } from "../../ui/scroll-area";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../ui/select";
 import { AudioProperties } from "./audio-properties";
 import { MediaProperties } from "./media-properties";
-import {
-  PropertyItem,
-  PropertyItemLabel,
-  PropertyItemValue,
-} from "./property-item";
 import { TextProperties } from "./text-properties";
+import { SquareSlashIcon } from "lucide-react";
 
 export function PropertiesPanel() {
-  const { activeProject, updateProjectFps } = useProjectStore();
-  const { getDisplayName, canvasSize } = useAspectRatio();
   const { selectedElements, tracks } = useTimelineStore();
   const { mediaItems } = useMediaStore();
 
-  const handleFpsChange = (value: string) => {
-    const fps = parseFloat(value);
-    if (!isNaN(fps) && fps > 0) {
-      updateProjectFps(fps);
-    }
-  };
-
-  const emptyView = (
-    <div className="space-y-4 p-5">
-      {/* Media Properties */}
-      <div className="flex flex-col gap-3">
-        <PropertyItem direction="column">
-          <PropertyItemLabel className="text-xs text-muted-foreground">
-            Name:
-          </PropertyItemLabel>
-          <PropertyItemValue className="text-xs truncate">
-            {activeProject?.name || ""}
-          </PropertyItemValue>
-        </PropertyItem>
-        <PropertyItem direction="column">
-          <PropertyItemLabel className="text-xs text-muted-foreground">
-            Aspect ratio:
-          </PropertyItemLabel>
-          <PropertyItemValue className="text-xs truncate">
-            {getDisplayName()}
-          </PropertyItemValue>
-        </PropertyItem>
-        <PropertyItem direction="column">
-          <PropertyItemLabel className="text-xs text-muted-foreground">
-            Resolution:
-          </PropertyItemLabel>
-          <PropertyItemValue className="text-xs truncate">
-            {`${canvasSize.width} × ${canvasSize.height}`}
-          </PropertyItemValue>
-        </PropertyItem>
-        <div className="flex flex-col gap-1">
-          <Label className="text-xs text-muted-foreground">Frame rate:</Label>
-          <Select
-            value={(activeProject?.fps || "N/A").toString()}
-            onValueChange={handleFpsChange}
-          >
-            <SelectTrigger className="w-32 h-6 text-xs">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {FPS_PRESETS.map(({ value, label }) => (
-                <SelectItem key={value} value={value} className="text-xs">
-                  {label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  );
-
   return (
-    <ScrollArea className="h-full bg-panel rounded-sm">
-      {selectedElements.length > 0
-        ? selectedElements.map(({ trackId, elementId }) => {
+    <>
+      {selectedElements.length > 0 ? (
+        <ScrollArea className="h-full bg-panel rounded-sm">
+          {selectedElements.map(({ trackId, elementId }) => {
             const track = tracks.find((t) => t.id === trackId);
             const element = track?.elements.find((e) => e.id === elementId);
 
@@ -116,8 +43,28 @@ export function PropertiesPanel() {
               );
             }
             return null;
-          })
-        : emptyView}
-    </ScrollArea>
+          })}
+        </ScrollArea>
+      ) : (
+        <EmptyView />
+      )}
+    </>
+  );
+}
+
+function EmptyView() {
+  return (
+    <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
+      <SquareSlashIcon
+        className="w-10 h-10 text-muted-foreground"
+        strokeWidth={1.5}
+      />
+      <div className="flex flex-col gap-2 text-center">
+        <p className="text-lg font-medium">It’s empty here</p>
+        <p className="text-sm text-muted-foreground text-balance">
+          Click an element on the timeline to edit its properties
+        </p>
+      </div>
+    </div>
   );
 }
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 065a123d..43f953e8 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -163,25 +163,3 @@ export function DataBuddyIcon({
     </svg>
   );
 }
-
-export function SquareSlashIcon({
-  className,
-  size = 24,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      className={className}
-      fill="none"
-      viewBox="0 0 256 256"
-    >
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <line x1="9" x2="15" y1="15" y2="9" />
-    </svg>
-  );
-}