Revert "merge main"

This reverts commit 1ccacf6bb5db579cf6f343d9de57bce92d296f5f.

1 files changed, 184 insertions, 184 deletions

diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx
index a640dc4c..721564ea 100644
--- a/apps/web/src/components/background-settings.tsx
+++ b/apps/web/src/components/background-settings.tsx
@@ -1,184 +1,184 @@
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { Button } from "./ui/button";
-import { BackgroundIcon } from "./icons";
-import { cn } from "@/lib/utils";
-import Image from "next/image";
-import { colors } from "@/data/colors";
-import { useProjectStore } from "@/stores/project-store";
-import { PipetteIcon } from "lucide-react";
-
-type BackgroundTab = "color" | "blur";
-
-export function BackgroundSettings() {
-  const { activeProject, updateBackgroundType } = useProjectStore();
-
-  // ✅ Good: derive activeTab from activeProject during rendering
-  const activeTab = activeProject?.backgroundType || "color";
-
-  const handleColorSelect = (color: string) => {
-    updateBackgroundType("color", { backgroundColor: color });
-  };
-
-  const handleBlurSelect = (blurIntensity: number) => {
-    updateBackgroundType("blur", { blurIntensity });
-  };
-
-  const tabs = [
-    {
-      label: "Color",
-      value: "color",
-    },
-    {
-      label: "Blur",
-      value: "blur",
-    },
-  ];
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="text"
-          size="icon"
-          className="!size-4 border border-muted-foreground"
-        >
-          <BackgroundIcon className="!size-3" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="flex flex-col items-start w-[20rem] h-[16rem] overflow-hidden p-0">
-        <div className="flex items-center justify-between w-full gap-2 z-10 bg-popover p-3">
-          <h2 className="text-sm">Background</h2>
-          <div className="flex items-center gap-2 text-sm">
-            {tabs.map((tab) => (
-              <span
-                key={tab.value}
-                onClick={() => {
-                  // Switch to the background type when clicking tabs
-                  if (tab.value === "color") {
-                    updateBackgroundType("color", {
-                      backgroundColor:
-                        activeProject?.backgroundColor || "#000000",
-                    });
-                  } else {
-                    updateBackgroundType("blur", {
-                      blurIntensity: activeProject?.blurIntensity || 8,
-                    });
-                  }
-                }}
-                className={cn(
-                  "text-muted-foreground cursor-pointer",
-                  activeTab === tab.value && "text-foreground"
-                )}
-              >
-                {tab.label}
-              </span>
-            ))}
-          </div>
-        </div>
-        {activeTab === "color" ? (
-          <ColorView
-            selectedColor={activeProject?.backgroundColor || "#000000"}
-            onColorSelect={handleColorSelect}
-          />
-        ) : (
-          <BlurView
-            selectedBlur={activeProject?.blurIntensity || 8}
-            onBlurSelect={handleBlurSelect}
-          />
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function ColorView({
-  selectedColor,
-  onColorSelect,
-}: {
-  selectedColor: string;
-  onColorSelect: (color: string) => void;
-}) {
-  return (
-    <div className="w-full h-full">
-      <div className="absolute top-8 left-0 w-[calc(100%-1rem)] h-12 bg-gradient-to-b from-popover to-transparent pointer-events-none" />
-      <div className="grid grid-cols-4 gap-2 w-full h-full p-3 pt-0 overflow-auto">
-        <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>
-        {colors.map((color) => (
-          <ColorItem
-            key={color}
-            color={color}
-            isSelected={color === selectedColor}
-            onClick={() => onColorSelect(color)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ColorItem({
-  color,
-  isSelected,
-  onClick,
-}: {
-  color: string;
-  isSelected: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary",
-        isSelected && "border-2 border-primary"
-      )}
-      style={{ backgroundColor: color }}
-      onClick={onClick}
-    />
-  );
-}
-
-function BlurView({
-  selectedBlur,
-  onBlurSelect,
-}: {
-  selectedBlur: number;
-  onBlurSelect: (blurIntensity: number) => void;
-}) {
-  const blurLevels = [
-    { label: "Light", value: 4 },
-    { label: "Medium", value: 8 },
-    { label: "Heavy", value: 18 },
-  ];
-  const blurImage =
-    "https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
-
-  return (
-    <div className="grid grid-cols-3 gap-2 w-full p-3 pt-0">
-      {blurLevels.map((blur) => (
-        <div
-          key={blur.value}
-          className={cn(
-            "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary relative overflow-hidden",
-            selectedBlur === blur.value && "border-2 border-primary"
-          )}
-          onClick={() => onBlurSelect(blur.value)}
-        >
-          <Image
-            src={blurImage}
-            alt={`Blur preview ${blur.label}`}
-            fill
-            className="object-cover"
-            style={{ filter: `blur(${blur.value}px)` }}
-          />
-          <div className="absolute bottom-1 left-1 right-1 text-center">
-            <span className="text-xs text-white bg-black/50 px-1 rounded">
-              {blur.label}
-            </span>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";

+import { Button } from "./ui/button";

+import { BackgroundIcon } from "./icons";

+import { cn } from "@/lib/utils";

+import Image from "next/image";

+import { colors } from "@/data/colors";

+import { useProjectStore } from "@/stores/project-store";

+import { PipetteIcon } from "lucide-react";

+

+type BackgroundTab = "color" | "blur";

+

+export function BackgroundSettings() {

+  const { activeProject, updateBackgroundType } = useProjectStore();

+

+  // ✅ Good: derive activeTab from activeProject during rendering

+  const activeTab = activeProject?.backgroundType || "color";

+

+  const handleColorSelect = (color: string) => {

+    updateBackgroundType("color", { backgroundColor: color });

+  };

+

+  const handleBlurSelect = (blurIntensity: number) => {

+    updateBackgroundType("blur", { blurIntensity });

+  };

+

+  const tabs = [

+    {

+      label: "Color",

+      value: "color",

+    },

+    {

+      label: "Blur",

+      value: "blur",

+    },

+  ];

+

+  return (

+    <Popover>

+      <PopoverTrigger asChild>

+        <Button

+          variant="text"

+          size="icon"

+          className="!size-4 border border-muted-foreground"

+        >

+          <BackgroundIcon className="!size-3" />

+        </Button>

+      </PopoverTrigger>

+      <PopoverContent className="flex flex-col items-start w-[20rem] h-[16rem] overflow-hidden p-0">

+        <div className="flex items-center justify-between w-full gap-2 z-10 bg-popover p-3">

+          <h2 className="text-sm">Background</h2>

+          <div className="flex items-center gap-2 text-sm">

+            {tabs.map((tab) => (

+              <span

+                key={tab.value}

+                onClick={() => {

+                  // Switch to the background type when clicking tabs

+                  if (tab.value === "color") {

+                    updateBackgroundType("color", {

+                      backgroundColor:

+                        activeProject?.backgroundColor || "#000000",

+                    });

+                  } else {

+                    updateBackgroundType("blur", {

+                      blurIntensity: activeProject?.blurIntensity || 8,

+                    });

+                  }

+                }}

+                className={cn(

+                  "text-muted-foreground cursor-pointer",

+                  activeTab === tab.value && "text-foreground"

+                )}

+              >

+                {tab.label}

+              </span>

+            ))}

+          </div>

+        </div>

+        {activeTab === "color" ? (

+          <ColorView

+            selectedColor={activeProject?.backgroundColor || "#000000"}

+            onColorSelect={handleColorSelect}

+          />

+        ) : (

+          <BlurView

+            selectedBlur={activeProject?.blurIntensity || 8}

+            onBlurSelect={handleBlurSelect}

+          />

+        )}

+      </PopoverContent>

+    </Popover>

+  );

+}

+

+function ColorView({

+  selectedColor,

+  onColorSelect,

+}: {

+  selectedColor: string;

+  onColorSelect: (color: string) => void;

+}) {

+  return (

+    <div className="w-full h-full">

+      <div className="absolute top-8 left-0 w-[calc(100%-1rem)] h-12 bg-gradient-to-b from-popover to-transparent pointer-events-none"></div>

+      <div className="grid grid-cols-4 gap-2 w-full h-full p-3 pt-0 overflow-auto">

+        <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>

+        {colors.map((color) => (

+          <ColorItem

+            key={color}

+            color={color}

+            isSelected={color === selectedColor}

+            onClick={() => onColorSelect(color)}

+          />

+        ))}

+      </div>

+    </div>

+  );

+}

+

+function ColorItem({

+  color,

+  isSelected,

+  onClick,

+}: {

+  color: string;

+  isSelected: boolean;

+  onClick: () => void;

+}) {

+  return (

+    <div

+      className={cn(

+        "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary",

+        isSelected && "border-2 border-primary"

+      )}

+      style={{ backgroundColor: color }}

+      onClick={onClick}

+    />

+  );

+}

+

+function BlurView({

+  selectedBlur,

+  onBlurSelect,

+}: {

+  selectedBlur: number;

+  onBlurSelect: (blurIntensity: number) => void;

+}) {

+  const blurLevels = [

+    { label: "Light", value: 4 },

+    { label: "Medium", value: 8 },

+    { label: "Heavy", value: 18 },

+  ];

+  const blurImage =

+    "https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";

+

+  return (

+    <div className="grid grid-cols-3 gap-2 w-full p-3 pt-0">

+      {blurLevels.map((blur) => (

+        <div

+          key={blur.value}

+          className={cn(

+            "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary relative overflow-hidden",

+            selectedBlur === blur.value && "border-2 border-primary"

+          )}

+          onClick={() => onBlurSelect(blur.value)}

+        >

+          <Image

+            src={blurImage}

+            alt={`Blur preview ${blur.label}`}

+            fill

+            className="object-cover"

+            style={{ filter: `blur(${blur.value}px)` }}

+          />

+          <div className="absolute bottom-1 left-1 right-1 text-center">

+            <span className="text-xs text-white bg-black/50 px-1 rounded">

+              {blur.label}

+            </span>

+          </div>

+        </div>

+      ))}

+    </div>

+  );

+}