From 4f50b44e68d1ba190083fb253d731fd72a4cdf0f Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 5 Feb 2025 19:01:30 +0600
Subject: [PATCH] web/SettingsInput: make the clear button non-destructive

clear button now clears data only in the input box, not actual data

if you accidentally clear old data and don't save it, you can restore it with one click :3
---
 web/i18n/en/button.json                       |  4 +-
 .../components/settings/SettingsInput.svelte  | 89 ++++++++++++-------
 2 files changed, 58 insertions(+), 35 deletions(-)

diff --git a/web/i18n/en/button.json b/web/i18n/en/button.json
index e75ac3d1..f387e7d4 100644
--- a/web/i18n/en/button.json
+++ b/web/i18n/en/button.json
@@ -19,5 +19,7 @@
     "no": "no",
     "clear": "clear",
     "show_input": "show input",
-    "hide_input": "hide input"
+    "hide_input": "hide input",
+    "restore_input": "restore input",
+    "clear_input": "clear input"
 }
diff --git a/web/src/components/settings/SettingsInput.svelte b/web/src/components/settings/SettingsInput.svelte
index 9bf90a47..267d4cf1 100644
--- a/web/src/components/settings/SettingsInput.svelte
+++ b/web/src/components/settings/SettingsInput.svelte
@@ -14,10 +14,13 @@
 
     import IconX from "@tabler/icons-svelte/IconX.svelte";
     import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
+    import IconArrowBack from "@tabler/icons-svelte/IconArrowBack.svelte";
 
     import IconEye from "@tabler/icons-svelte/IconEye.svelte";
     import IconEyeClosed from "@tabler/icons-svelte/IconEyeClosed.svelte";
 
+    type SettingsInputType = "url" | "uuid";
+
     export let settingId: Id;
     export let settingContext: Context;
     export let placeholder: string;
@@ -41,7 +44,11 @@
 
     $: inputType = sensitive && inputHidden ? "password" : "text";
 
-    const writeToSettings = (value: string, type: "url" | "uuid" | "text") => {
+    const checkInput = () => {
+        validInput = input.checkValidity() || inputValue === "";
+    }
+
+    const writeToSettings = (value: string, type: SettingsInputType) => {
         updateSetting({
             [settingContext]: {
                 [settingId]:
@@ -55,8 +62,9 @@
         if (showInstanceWarning) {
             await customInstanceWarning();
 
-            if ($settings.processing.seenCustomWarning && inputValue) {
-                return writeToSettings(inputValue, type);
+            if ($settings.processing.seenCustomWarning) {
+                // allow writing empty strings
+                return writeToSettings(inputValue, inputValue ? type : "uuid");
             }
 
             return;
@@ -70,7 +78,6 @@
     <div
         id="input-container"
         class:focused={inputFocused}
-        class:extra-button={sensitive && inputValue.length > 0}
         aria-hidden="false"
     >
         <input
@@ -78,8 +85,8 @@
             bind:this={input}
             bind:value={inputValue}
             on:input={() => {
-                validInput = input.checkValidity();
                 inputFocused = true;
+                checkInput();
             }}
             on:focus={() => (inputFocused = true)}
             on:blur={() => (inputFocused = false)}
@@ -93,26 +100,52 @@
             {...{ type: inputType }}
         />
 
+        {#if inputValue.length > 0}
+            <button
+                class="input-inner-button"
+                on:click={() => {
+                    inputValue = "";
+                    checkInput();
+                }}
+                aria-label={$t("button.clear_input")}
+            >
+                <IconX />
+            </button>
+
+            {#if sensitive}
+                <button
+                    class="input-inner-button"
+                    on:click={() => (inputHidden = !inputHidden)}
+                    aria-label={$t(
+                        inputHidden ? "button.show_input" : "button.hide_input"
+                    )}
+                >
+                    {#if inputHidden}
+                        <IconEye />
+                    {:else}
+                        <IconEyeClosed />
+                    {/if}
+                </button>
+            {/if}
+        {/if}
+
         {#if inputValue.length === 0}
             <span class="input-placeholder" aria-hidden="true">
                 {placeholder}
             </span>
-        {/if}
 
-        {#if sensitive && inputValue.length > 0}
-            <button
-                class="input-inner-button"
-                on:click={() => (inputHidden = !inputHidden)}
-                aria-label={$t(
-                    inputHidden ? "button.show_input" : "button.hide_input"
-                )}
-            >
-                {#if inputHidden}
-                    <IconEye />
-                {:else}
-                    <IconEyeClosed />
-                {/if}
-            </button>
+            {#if String($settings[settingContext][settingId]).length > 0}
+                <button
+                    class="input-inner-button"
+                    on:click={() => {
+                        inputValue = String($settings[settingContext][settingId]);
+                        checkInput();
+                    }}
+                    aria-label={$t("button.restore_input")}
+                >
+                    <IconArrowBack />
+                </button>
+            {/if}
         {/if}
     </div>
 
@@ -120,20 +153,11 @@
         <button
             class="settings-input-button"
             aria-label={$t("button.save")}
-            disabled={inputValue == $settings[settingContext][settingId] || !validInput}
+            disabled={inputValue === $settings[settingContext][settingId] || !validInput}
             on:click={save}
         >
             <IconCheck />
         </button>
-
-        <button
-            class="settings-input-button"
-            aria-label={$t("button.reset")}
-            disabled={String($settings[settingContext][settingId]).length <= 0}
-            on:click={() => writeToSettings("", "text")}
-        >
-            <IconX />
-        </button>
     </div>
 </div>
 
@@ -145,6 +169,7 @@
 
     #input-container {
         padding: 0 16px;
+        padding-right: 4px;
         border-radius: var(--border-radius);
         color: var(--secondary);
         background-color: var(--button);
@@ -156,10 +181,6 @@
         overflow: hidden;
     }
 
-    #input-container.extra-button {
-        padding-right: 4px;
-    }
-
     #input-container,
     #input-box {
         font-size: 13.5px;