From adc8cb37fcec21afac848b1e5dd724394c344050 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 27 Aug 2025 00:52:39 +0200
Subject: another huge refactor

---
 apps/web/src/components/background-settings.tsx | 184 ------------------------
 1 file changed, 184 deletions(-)
 delete mode 100644 apps/web/src/components/background-settings.tsx

(limited to 'apps/web/src/components/background-settings.tsx')

diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx
deleted file mode 100644
index 0457cb05..00000000
--- a/apps/web/src/components/background-settings.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-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/solid";
-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-64 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-linear-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>
-  );
-}
-- 
cgit v1.3.1