feat: make settings items expandable

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>
   );
 }