set empty

src/pages/settings/components/DesignSettings.tsx

@@ -61,9 +61,7 @@ const DesignSettings: FC = () => {
     setAppliedColor(color);
 
     if (savedBgUrl) {
-      const matchingPattern = backgroundItems.find(
-        (item) => getBackgroundPatternUrl(item) === normalizeBgUrl(savedBgUrl) || getPatternBgUrl(item) === savedBgUrl,
-      );
+      const matchingPattern = backgroundItems.find((item) => getBackgroundPatternUrl(item) === normalizeBgUrl(savedBgUrl) || getPatternBgUrl(item) === savedBgUrl);
 
       if (matchingPattern) {
         setBackgroundType("pattern");
@@ -76,8 +74,8 @@ const DesignSettings: FC = () => {
         setImageBlur(Number(restaurantData.bgBlur) || 0);
         setOverlayDarkness(Number(restaurantData.bgOverlay) || 0);
       }
-    } else if (backgroundItems[0]?.id) {
-      setSelectedPatternId(backgroundItems[0].id);
+    } else {
+      setSelectedPatternId("0");
     }
 
     setIsInitialized(true);
@@ -146,12 +144,16 @@ const DesignSettings: FC = () => {
       {
         onSuccess: () => {
           if (backgroundType === "pattern") {
-            const selectedItem = backgroundItems.find((item) => item.id === selectedPatternId);
-            const bgUrl = selectedItem ? getPatternBgUrl(selectedItem) : "";
+            let bgUrl = "";
 
-            if (!bgUrl) {
-              toast.error("لطفاً یک پترن انتخاب کنید");
-              return;
+            if (selectedPatternId !== "0") {
+              const selectedItem = backgroundItems.find((item) => item.id === selectedPatternId);
+              bgUrl = selectedItem ? getPatternBgUrl(selectedItem) : "";
+
+              if (!bgUrl) {
+                toast.error("لطفاً یک پترن انتخاب کنید");
+                return;
+              }
             }
 
             setBackground(
@@ -223,6 +225,13 @@ const DesignSettings: FC = () => {
                 {isPatternsLoading && Array.from({ length: 6 }).map((_, index) => <div key={index} className="w-16 h-[139px] rounded-lg bg-secondary animate-pulse" />)}
                 {!isPatternsLoading && isPatternsError && <div className="text-sm text-description">خطا در بارگذاری پترن‌ها</div>}
                 {!isPatternsLoading && !isPatternsError && patterns.length === 0 && <div className="text-sm text-description">پترنی یافت نشد</div>}
+                <button
+                  onClick={() => setSelectedPatternId("0")}
+                  type="button"
+                  className={clx("relative w-16 h-[139px] rounded-lg bg-white border overflow-hidden", selectedPatternId === "0" ? "border-black" : "border-border")}
+                >
+                  <div className="absolute inset-0" style={{ backgroundColor: appliedColor, opacity: PATTERN_BACKGROUND_OPACITY }} />
+                </button>
                 {patterns.map((pattern) => (
                   <button
                     key={pattern.id}