From ccd2b1ef2821c99e321d21d0a66b60d72a435017 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Sun, 16 Jun 2024 15:41:36 +0200
Subject: [PATCH] impr: add button to remove custom theme background (@fehmer)
 (#5488)

* impr: add button to remove theme background (@fehmer)

* update notification if custom background cannot be loaded. Always update remove button visibility

* update error message
---
 frontend/src/html/pages/settings.html         | 11 ++++++---
 frontend/src/styles/settings.scss             |  4 ++++
 .../src/ts/controllers/theme-controller.ts    |  7 +++---
 frontend/src/ts/pages/settings.ts             | 23 +++++++++++++++++++
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index 60f742ce6..b409b2307 100644
--- a/frontend/src/html/pages/settings.html
+++ b/frontend/src/html/pages/settings.html
@@ -1114,9 +1114,14 @@
             tabindex="0"
             onClick="this.select();"
           />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
+          <span>
+            <button class="hidden remove no-auto-handle">
+              <i class="fas fa-trash fa-fw"></i>
+            </button>
+            <button class="save no-auto-handle">
+              <i class="fas fa-save fa-fw"></i>
+            </button>
+          </span>
         </div>
         <div class="buttons">
           <button data-config-value="cover">cover</button>
diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index e0fd0187d..524dfdc43 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -57,6 +57,10 @@
       gap: 0.5rem;
       margin-bottom: 0.5rem;
 
+      span {
+        display: flex;
+        gap: 0.5rem;
+      }
       .button {
         height: auto;
 
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index e1a1ff1ca..c16c25124 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -4,7 +4,7 @@ import * as Misc from "../utils/misc";
 import * as Arrays from "../utils/arrays";
 import * as JSONData from "../utils/json-data";
 import { isColorDark, isColorLight } from "../utils/colors";
-import Config, { setAutoSwitchTheme, setCustomBackground } from "../config";
+import Config, { setAutoSwitchTheme } from "../config";
 import * as BackgroundFilter from "../elements/custom-background-filter";
 import * as ConfigEvent from "../observables/config-event";
 import * as DB from "../db";
@@ -428,7 +428,8 @@ ConfigEvent.subscribe(async (eventKey, eventValue, nosave) => {
 
 window.addEventListener("customBackgroundFailed", () => {
   Notifications.add(
-    "The custom background cannot be loaded and will be removed from your configuration."
+    "Custom background link is either temporairly unavailable or expired. Please make sure the URL is correct or change it",
+    0,
+    { duration: 5 }
   );
-  setCustomBackground("");
 });
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index b8495c7c2..be5fd62bf 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -654,6 +654,7 @@ async function fillSettingsPage(): Promise<void> {
   $(
     ".pageSettings .section[data-config-name='customBackgroundSize'] input"
   ).val(Config.customBackground);
+  updateCustomBackgroundRemoveButtonVisibility();
 
   $(".pageSettings .section[data-config-name='fontSize'] input").val(
     Config.fontSize
@@ -950,6 +951,8 @@ export async function update(groupUpdate = true): Promise<void> {
       ".pageSettings .section[data-config-name='customBackgroundFilter']"
     ).addClass("hidden");
   }
+  updateCustomBackgroundRemoveButtonVisibility();
+
   $(
     ".pageSettings .section[data-config-name='customBackgroundSize'] input"
   ).val(Config.customBackground);
@@ -987,6 +990,20 @@ function toggleSettingsGroup(groupName: string): void {
   }
 }
 
+function updateCustomBackgroundRemoveButtonVisibility(): void {
+  const button = $(
+    ".pageSettings .section[data-config-name='customBackgroundSize'] button.remove"
+  );
+  if (
+    Config.customBackground !== undefined &&
+    Config.customBackground.length > 0
+  ) {
+    button.removeClass("hidden");
+  } else {
+    button.addClass("hidden");
+  }
+}
+
 $(".pageSettings .section[data-config-name='paceCaret']").on(
   "focusout",
   "input.customPaceCaretSpeed",
@@ -1175,6 +1192,12 @@ $(
   );
 });
 
+$(
+  ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton button.remove"
+).on("click", () => {
+  UpdateConfig.setCustomBackground("");
+});
+
 $(
   ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
 ).on("keypress", (e) => {