From 7c7cefe89bc1daea03ae85c413c84a57e2d18f8b Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 23 Nov 2024 19:11:19 +0600
Subject: [PATCH] web/settings: add a reusable `SettingsInput` component

---
 .../settings/CustomInstanceInput.svelte       | 167 ---------------
 .../components/settings/SettingsInput.svelte  | 193 ++++++++++++++++++
 .../routes/settings/instances/+page.svelte    |   9 +-
 3 files changed, 199 insertions(+), 170 deletions(-)
 delete mode 100644 web/src/components/settings/CustomInstanceInput.svelte
 create mode 100644 web/src/components/settings/SettingsInput.svelte

diff --git a/web/src/components/settings/CustomInstanceInput.svelte b/web/src/components/settings/CustomInstanceInput.svelte
deleted file mode 100644
index 7ebdb3cf..00000000
--- a/web/src/components/settings/CustomInstanceInput.svelte
+++ /dev/null
@@ -1,167 +0,0 @@
-<script lang="ts">
-    import { get } from "svelte/store";
-    import { t } from "$lib/i18n/translations";
-
-    import settings, { updateSetting } from "$lib/state/settings";
-    import { customInstanceWarning } from "$lib/api/safety-warning";
-
-    import IconX from "@tabler/icons-svelte/IconX.svelte";
-    import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
-
-    let inputValue = get(settings).processing.customInstanceURL;
-    let inputFocused = false;
-
-    let url: string;
-    let validUrl: boolean;
-
-    const checkUrl = () => {
-        try {
-            url = new URL(inputValue).origin.toString();
-            validUrl = true;
-        } catch {
-            validUrl = false;
-        }
-    };
-
-    const writeInput = () => {
-        let url;
-        try {
-            url = new URL(inputValue).origin.toString();
-        } catch {
-            return (validUrl = false);
-        }
-        updateSetting({
-            processing: {
-                customInstanceURL: url,
-            },
-        });
-        inputValue = get(settings).processing.customInstanceURL;
-    };
-</script>
-
-<div id="custom-instance-holder">
-    <div id="input-container" class:focused={inputFocused}>
-        <input
-            id="custom-instance-input"
-            bind:value={inputValue}
-            on:input={() => {
-                checkUrl();
-                inputFocused = true;
-            }}
-            on:input={() => (inputFocused = true)}
-            on:focus={() => (inputFocused = true)}
-            on:blur={() => (inputFocused = false)}
-            spellcheck="false"
-            autocomplete="off"
-            autocapitalize="off"
-            maxlength="64"
-            placeholder={$t("settings.processing.custom.placeholder")}
-        />
-    </div>
-    <div id="custom-instance-buttons">
-        <button
-            id="instance-save"
-            class="custom-instance-button"
-            aria-label={$t("button.save")}
-            disabled={inputValue == $settings.processing.customInstanceURL ||
-                !validUrl}
-            on:click={async () => {
-                await customInstanceWarning();
-                if ($settings.processing.seenCustomWarning) {
-                    if (inputValue) writeInput();
-                }
-            }}
-        >
-            <IconCheck />
-        </button>
-
-        <button
-            id="instance-reset"
-            class="custom-instance-button"
-            aria-label={$t("button.reset")}
-            disabled={$settings.processing.customInstanceURL.length <= 0}
-            on:click={() => {
-                updateSetting({
-                    processing: {
-                        customInstanceURL: "",
-                    },
-                });
-                inputValue = get(settings).processing.customInstanceURL;
-            }}
-        >
-            <IconX />
-        </button>
-    </div>
-</div>
-
-<style>
-    #custom-instance-holder {
-        display: flex;
-        gap: 6px;
-    }
-
-    #input-container {
-        padding: 0 18px;
-        border-radius: var(--border-radius);
-        color: var(--secondary);
-        background-color: var(--button);
-        box-shadow: var(--button-box-shadow);
-        display: flex;
-        align-items: center;
-        width: 100%;
-    }
-
-    #input-container,
-    #custom-instance-input {
-        font-size: 13.5px;
-        font-weight: 500;
-        min-width: 0;
-    }
-
-    #custom-instance-input {
-        flex: 1;
-        background-color: transparent;
-        color: var(--secondary);
-        border: none;
-        padding-block: 0;
-        padding-inline: 0;
-        padding: 12px 0;
-    }
-
-    #custom-instance-input::placeholder {
-        color: var(--gray);
-        /* fix for firefox */
-        opacity: 1;
-    }
-
-    #custom-instance-input:focus-visible {
-        box-shadow: unset !important;
-    }
-
-    #input-container.focused {
-        box-shadow: 0 0 0 2px var(--secondary) inset;
-    }
-
-    #custom-instance-buttons {
-        display: flex;
-        flex-direction: row;
-        gap: 6px;
-    }
-
-    .custom-instance-button {
-        height: 42px;
-        width: 42px;
-        padding: 0;
-    }
-
-    .custom-instance-button :global(svg) {
-        height: 21px;
-        width: 21px;
-        stroke-width: 1.5px;
-    }
-
-    .custom-instance-button[disabled] {
-        opacity: 0.5;
-        pointer-events: none;
-    }
-</style>
diff --git a/web/src/components/settings/SettingsInput.svelte b/web/src/components/settings/SettingsInput.svelte
new file mode 100644
index 00000000..3fda62b4
--- /dev/null
+++ b/web/src/components/settings/SettingsInput.svelte
@@ -0,0 +1,193 @@
+<script
+    lang="ts"
+    generics="
+        Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
+        Id extends keyof CobaltSettings[Context]
+    "
+>
+    import { get } from "svelte/store";
+    import { t } from "$lib/i18n/translations";
+    import type { CobaltSettings } from "$lib/types/settings";
+
+    import settings, { updateSetting } from "$lib/state/settings";
+    import { customInstanceWarning } from "$lib/api/safety-warning";
+
+    import IconX from "@tabler/icons-svelte/IconX.svelte";
+    import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
+
+    export let settingId: Id;
+    export let settingContext: Context;
+    export let placeholder: string;
+    export let type: "url" | "uuid" = "url";
+
+    const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
+
+    let inputValue: string = String(get(settings)[settingContext][settingId]);
+    let inputFocused = false;
+
+    let validInput: boolean;
+
+    const checkInput = () => {
+        try {
+            if (type === "uuid") {
+                const regex = UUID_REGEX.test(inputValue);
+                if (!regex) throw new Error("invalid uuid");
+            } else {
+                new URL(inputValue).origin.toString();
+            }
+            validInput = true;
+        } catch {
+            validInput = false;
+        }
+    };
+
+    const writeInput = () => {
+        let input;
+        try {
+            if (type === "uuid") {
+                const regex = UUID_REGEX.test(inputValue);
+                if (regex) input = inputValue.toString();
+            } else {
+                input = new URL(inputValue).origin.toString();
+            }
+        } catch {
+            validInput = false;
+            return;
+        }
+
+        updateSetting({
+            [settingContext]: {
+                [settingId]: input,
+            },
+        });
+        inputValue = String(get(settings)[settingContext][settingId]);
+    };
+
+    const reset = () => {
+        updateSetting({
+            [settingContext]: {
+                [settingId]: "",
+            },
+        });
+        inputValue = String(get(settings)[settingContext][settingId]);
+    }
+
+    const save = async () => {
+        await customInstanceWarning();
+        if ($settings.processing.seenCustomWarning && inputValue) {
+            writeInput();
+        }
+    }
+</script>
+
+<div id="settings-input-holder">
+    <div id="input-container" class:focused={inputFocused}>
+        <input
+            id="input-box"
+            bind:value={inputValue}
+            on:input={() => checkInput()}
+            on:input={() => (inputFocused = true)}
+            on:focus={() => (inputFocused = true)}
+            on:blur={() => (inputFocused = false)}
+            spellcheck="false"
+            autocomplete="off"
+            autocapitalize="off"
+            maxlength="64"
+            {placeholder}
+        />
+    </div>
+
+    <div id="settings-input-buttons">
+        <button
+            class="settings-input-button"
+            aria-label={$t("button.save")}
+            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={() => reset()}
+        >
+            <IconX />
+        </button>
+    </div>
+</div>
+
+<style>
+    #settings-input-holder {
+        display: flex;
+        gap: 6px;
+    }
+
+    #input-container {
+        padding: 0 18px;
+        border-radius: var(--border-radius);
+        color: var(--secondary);
+        background-color: var(--button);
+        box-shadow: var(--button-box-shadow);
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    #input-container,
+    #input-box {
+        font-size: 13.5px;
+        font-weight: 500;
+        min-width: 0;
+    }
+
+    #input-box {
+        flex: 1;
+        background-color: transparent;
+        color: var(--secondary);
+        border: none;
+        padding-block: 0;
+        padding-inline: 0;
+        padding: 12px 0;
+    }
+
+    #input-box::placeholder {
+        color: var(--gray);
+        /* fix for firefox */
+        opacity: 1;
+    }
+
+    #input-box:focus-visible {
+        box-shadow: unset !important;
+    }
+
+    #input-container.focused {
+        box-shadow: 0 0 0 2px var(--secondary) inset;
+    }
+
+    #settings-input-buttons {
+        display: flex;
+        flex-direction: row;
+        gap: 6px;
+    }
+
+    .settings-input-button {
+        height: 42px;
+        width: 42px;
+        padding: 0;
+    }
+
+    .settings-input-button :global(svg) {
+        height: 21px;
+        width: 21px;
+        stroke-width: 1.5px;
+    }
+
+    .settings-input-button[disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+</style>
diff --git a/web/src/routes/settings/instances/+page.svelte b/web/src/routes/settings/instances/+page.svelte
index 31b7934f..324a9af6 100644
--- a/web/src/routes/settings/instances/+page.svelte
+++ b/web/src/routes/settings/instances/+page.svelte
@@ -3,15 +3,14 @@
 
     import { t } from "$lib/i18n/translations";
 
+    import SettingsInput from "$components/settings/SettingsInput.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
-    import CustomInstanceInput from "$components/settings/CustomInstanceInput.svelte";
 </script>
 
 <SettingsCategory
     sectionId="community"
     title={$t("settings.processing.community")}
-    beta
 >
     <div class="category-inside-group">
         <SettingsToggle
@@ -20,7 +19,11 @@
             title={$t("settings.processing.enable_custom.title")}
         />
         {#if $settings.processing.enableCustomInstances}
-            <CustomInstanceInput />
+            <SettingsInput
+                settingContext="processing"
+                settingId="customInstanceURL"
+                placeholder="https://instance.url.example/"
+            />
         {/if}
     </div>
     <div class="subtext">