From d8fd641825ad4e4b5d1da2698ae389891ca2f0f2 Mon Sep 17 00:00:00 2001
From: Seif Soliman <byseif21@gmail.com>
Date: Wed, 30 Jul 2025 12:17:03 +0300
Subject: [PATCH] fix: filter section doesn't toggle using local image
 (@byseif21) (#6796)

---
 .../src/ts/controllers/theme-controller.ts    | 12 +++++++
 frontend/src/ts/pages/settings.ts             | 35 +++++++++++--------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index bd3c00beb..1757656b5 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -392,6 +392,11 @@ export async function applyCustomBackground(): Promise<void> {
     backgroundUrl = localBackgroundFile;
   }
 
+  // hide the filter section initially and always
+  $(
+    ".pageSettings .section[data-config-name='customBackgroundFilter']"
+  ).addClass("hidden");
+
   if (backgroundUrl === "") {
     $("#words").removeClass("noErrorBorder");
     $("#resultWordsHistory").removeClass("noErrorBorder");
@@ -409,6 +414,13 @@ export async function applyCustomBackground(): Promise<void> {
       "onError",
       "javascript:this.style.display='none'; window.dispatchEvent(new Event('customBackgroundFailed'))"
     );
+    img.onload = () => {
+      // show the filter section only if the image loads successfully
+      $(
+        ".pageSettings .section[data-config-name='customBackgroundFilter']"
+      ).removeClass("hidden");
+    };
+
     container?.replaceChildren(img);
 
     BackgroundFilter.apply();
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 8144236eb..5be0cbb72 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -803,6 +803,23 @@ function refreshPresetsSettingsSection(): void {
   }
 }
 
+export async function updateFilterSectionVisibility(): Promise<void> {
+  const hasBackgroundUrl =
+    Config.customBackground !== "" ||
+    (await FileStorage.hasFile("LocalBackgroundFile"));
+  const isImageVisible = $(".customBackground img").is(":visible");
+
+  if (hasBackgroundUrl && isImageVisible) {
+    $(
+      ".pageSettings .section[data-config-name='customBackgroundFilter']"
+    ).removeClass("hidden");
+  } else {
+    $(
+      ".pageSettings .section[data-config-name='customBackgroundFilter']"
+    ).addClass("hidden");
+  }
+}
+
 export async function update(
   options: {
     eventKey?: ConfigEvent.ConfigEventKey;
@@ -832,6 +849,7 @@ export async function update(
   ThemePicker.updateActiveTab();
   ThemePicker.setCustomInputs(true);
   await CustomBackgroundPicker.updateUI();
+  await updateFilterSectionVisibility();
 
   const setInputValue = (
     key: ConfigKey,
@@ -887,19 +905,6 @@ export async function update(
     ).addClass("hidden");
   }
 
-  if (
-    Config.customBackground !== "" ||
-    (await FileStorage.hasFile("LocalBackgroundFile"))
-  ) {
-    $(
-      ".pageSettings .section[data-config-name='customBackgroundFilter']"
-    ).removeClass("hidden");
-  } else {
-    $(
-      ".pageSettings .section[data-config-name='customBackgroundFilter']"
-    ).addClass("hidden");
-  }
-
   setInputValue(
     "fontSize",
     ".pageSettings .section[data-config-name='fontSize'] input",
@@ -1207,7 +1212,9 @@ ConfigEvent.subscribe((eventKey, eventValue) => {
   //make sure the page doesnt update a billion times when applying a preset/config at once
   if (configEventDisabled || eventKey === "saveToLocalStorage") return;
   if (ActivePage.get() === "settings" && eventKey !== "theme") {
-    void update({ eventKey });
+    void (eventKey === "customBackground"
+      ? updateFilterSectionVisibility()
+      : update({ eventKey }));
   }
 });