fix: filter section doesn't toggle using local image (@byseif21) (monkeytypegame#6796)

Author: byseif21

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

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