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

@@ -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"
 }

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) {
+            if ($settings.processing.seenCustomWarning) {
-                return writeToSettings(inputValue, type);
+                // 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}
+            {#if String($settings[settingContext][settingId]).length > 0}
-            <button
+                <button
-                class="input-inner-button"
+                    class="input-inner-button"
-                on:click={() => (inputHidden = !inputHidden)}
+                    on:click={() => {
-                aria-label={$t(
+                        inputValue = String($settings[settingContext][settingId]);
-                    inputHidden ? "button.show_input" : "button.hide_input"
+                        checkInput();
-                )}
+                    }}
-            >
+                    aria-label={$t("button.restore_input")}
-                {#if inputHidden}
+                >
-                    <IconEye />
+                    <IconArrowBack />
-                {:else}
+                </button>
-                    <IconEyeClosed />
+            {/if}
-                {/if}
-            </button>
         {/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;