From dd09bf2949b63d17b3e7311a688d7d84c5d6dc52 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 01:41:46 +0200
Subject: feat: add project settings

---
 .../src/components/editor/properties-panel/property-item.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'apps/web/src/components/editor/properties-panel/property-item.tsx')

diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/properties-panel/property-item.tsx
index 804ffb39..86a8d378 100644
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ b/apps/web/src/components/editor/properties-panel/property-item.tsx
@@ -17,7 +17,7 @@ export function PropertyItem({
         "flex gap-2",
         direction === "row"
           ? "items-center justify-between gap-6"
-          : "flex-col gap-1",
+          : "flex-col gap-1.5",
         className
       )}
     >
@@ -33,7 +33,11 @@ export function PropertyItemLabel({
   children: React.ReactNode;
   className?: string;
 }) {
-  return <label className={cn("text-xs", className)}>{children}</label>;
+  return (
+    <label className={cn("text-xs text-muted-foreground", className)}>
+      {children}
+    </label>
+  );
 }
 
 export function PropertyItemValue({
@@ -43,5 +47,5 @@ export function PropertyItemValue({
   children: React.ReactNode;
   className?: string;
 }) {
-  return <div className={cn("flex-1", className)}>{children}</div>;
+  return <div className={cn("flex-1 text-sm", className)}>{children}</div>;
 }
-- 
cgit v1.3.1


From 7891ed2cc1487270a847081c4ad93be1900adc8e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 12:21:24 +0200
Subject: feat: make settings items expandable

---
 .../editor/media-panel/views/settings.tsx          | 34 ++++++++++------------
 .../editor/properties-panel/property-item.tsx      | 33 +++++++++++++++++++++
 2 files changed, 48 insertions(+), 19 deletions(-)

(limited to 'apps/web/src/components/editor/properties-panel/property-item.tsx')

diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index 54387dd7..cdfa36f2 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -14,6 +14,7 @@ import {
   PropertyItem,
   PropertyItemLabel,
   PropertyItemValue,
+  PropertyGroup,
 } from "../../properties-panel/property-item";
 import { FPS_PRESETS } from "@/constants/timeline-constants";
 import { useProjectStore } from "@/stores/project-store";
@@ -55,7 +56,7 @@ function ProjectSettingsTabs() {
 
 function ProjectInfoView() {
   const { activeProject, updateProjectFps } = useProjectStore();
-  const { canvasSize, canvasPresets, setCanvasSize } = useEditorStore();
+  const { canvasPresets, setCanvasSize } = useEditorStore();
   const { getDisplayName } = useAspectRatio();
 
   const handleAspectRatioChange = (value: string) => {
@@ -147,7 +148,7 @@ const BlurPreview = memo(
         fill
         className="object-cover"
         style={{ filter: `blur(${blur.value}px)` }}
-        priority
+        loading="eager"
       />
       <div className="absolute bottom-1 left-1 right-1 text-center">
         <span className="text-xs text-white bg-black/50 px-1 rounded">
@@ -223,24 +224,19 @@ function BackgroundView() {
   );
 
   return (
-    <div className="flex flex-col gap-4">
-      <PropertyItem direction="column" className="gap-2">
-        <PropertyItemLabel>Blur</PropertyItemLabel>
-        <PropertyItemValue>
-          <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
-        </PropertyItemValue>
-      </PropertyItem>
-      <PropertyItem direction="column" className="gap-2">
-        <PropertyItemLabel>Color</PropertyItemLabel>
-        <PropertyItemValue>
-          <div className="grid grid-cols-4 gap-2 w-full">
-            <div className="w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary flex items-center justify-center">
-              <PipetteIcon className="size-4" />
-            </div>
-            {colorPreviews}
+    <div className="flex flex-col gap-5">
+      <PropertyGroup title="Blur">
+        <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
+      </PropertyGroup>
+
+      <PropertyGroup title="Color">
+        <div className="grid grid-cols-4 gap-2 w-full">
+          <div className="w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary flex items-center justify-center">
+            <PipetteIcon className="size-4" />
           </div>
-        </PropertyItemValue>
-      </PropertyItem>
+          {colorPreviews}
+        </div>
+      </PropertyGroup>
     </div>
   );
 }
diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/properties-panel/property-item.tsx
index 86a8d378..dc6b6d74 100644
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ b/apps/web/src/components/editor/properties-panel/property-item.tsx
@@ -1,4 +1,6 @@
 import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
 
 interface PropertyItemProps {
   direction?: "row" | "column";
@@ -49,3 +51,34 @@ export function PropertyItemValue({
 }) {
   return <div className={cn("flex-1 text-sm", className)}>{children}</div>;
 }
+
+interface PropertyGroupProps {
+  title: string;
+  children: React.ReactNode;
+  defaultExpanded?: boolean;
+  className?: string;
+}
+
+export function PropertyGroup({
+  title,
+  children,
+  defaultExpanded = true,
+  className,
+}: PropertyGroupProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <PropertyItem direction="column" className={cn("gap-3", className)}>
+      <div
+        className="flex items-center gap-1.5 cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <PropertyItemLabel className="cursor-pointer">
+          {title}
+        </PropertyItemLabel>
+        <ChevronDown className={cn("size-3", !isExpanded && "-rotate-90")} />
+      </div>
+      {isExpanded && <PropertyItemValue>{children}</PropertyItemValue>}
+    </PropertyItem>
+  );
+}
-- 
cgit v1.3.1