web/CustomInstanceInput: proper style

web/i18n/en/settings.json

@@ -111,11 +111,13 @@
     "advanced.export": "export",
 
     "processing.override": "default instance override",
-    "processing.override.title": "use instance-provided processing server",
+    "processing.override.title": "use the instance-provided processing server",
     "processing.override.description": "if web instance provides its own default processing server, you can choose to use it over the main processing server. make sure it's a server by someone you trust.",
 
     "processing.community": "community instances",
 
     "processing.enable_custom.title": "use a custom processing server",
-    "processing.enable_custom.description": "cobalt will use a custom processing server if you choose to. even though cobalt has some security measures in place, we are not responsible for any damage done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust."
+    "processing.enable_custom.description": "cobalt will use a custom processing server if you choose to. even though cobalt has some security measures in place, we are not responsible for any damage done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.",
+
+    "processing.custom.placeholder": "custom instance domain"
 }

web/src/components/settings/CustomInstanceInput.svelte

@@ -5,15 +5,18 @@
     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 {
-            let test = /^https:/i.test(new URL(inputValue).protocol);
+            url = new URL(inputValue).origin.toString();
-            if (test) url = new URL(inputValue).origin.toString();
             validUrl = true;
         } catch {
             validUrl = false;
@@ -36,50 +39,128 @@
     };
 </script>
 
-<input
+<div id="custom-instance-holder">
-    id="link-area"
+    <div id="input-container" class:focused={inputFocused}>
-    bind:value={inputValue}
+        <input
-    on:input={() => {
+            id="custom-instance-input"
-        checkUrl();
+            bind:value={inputValue}
-    }}
+            on:input={() => {
-    spellcheck="false"
+                checkUrl();
-    autocomplete="off"
+                inputFocused = true;
-    autocapitalize="off"
+            }}
-    maxlength="128"
+            on:input={() => (inputFocused = true)}
-    placeholder="instance url"
+            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
+        <button
-    id="instance-save"
+            id="instance-reset"
-    disabled={inputValue == $settings.processing.customInstanceURL || !validUrl}
+            class="custom-instance-button"
-    on:click={async () => {
+            aria-label={$t("button.reset")}
-        await customInstanceWarning();
+            disabled={$settings.processing.customInstanceURL.length <= 0}
-        if ($settings.processing.seenCustomWarning) {
+            on:click={() => {
-            if (inputValue) writeInput();
+                updateSetting({
-        }
+                    processing: {
-    }}
+                        customInstanceURL: "",
->
+                    },
-    {$t("button.save")}
+                });
-</button>
+                inputValue = get(settings).processing.customInstanceURL;
-
+            }}
-{#if $settings.processing.customInstanceURL.length > 0}
+        >
-    <button
+            <IconX />
-        id="instance-reset"
+        </button>
-        on:click={() => {
+    </div>
-            updateSetting({
+</div>
-                processing: {
-                    customInstanceURL: "",
-                },
-            });
-            inputValue = get(settings).processing.customInstanceURL;
-        }}
-    >
-        {$t("button.reset")}
-    </button>
-{/if}
 
 <style>
-    #instance-save[disabled] {
+    #custom-instance-holder {
+        width: 100%;
+        display: flex;
+        gap: 6px;
+    }
+
+    #input-container {
+        padding: 0 18px;
+        border-radius: var(--border-radius);
+        color: var(--white);
+        background-color: var(--button);
+        box-shadow: var(--button-box-shadow);
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    #input-container,
+    #custom-instance-input {
+        font-size: 14px;
+        font-weight: 500;
+        min-width: 0;
+    }
+
+    #custom-instance-input {
+        flex: 1;
+        background-color: transparent;
+        color: var(--white);
+        border: none;
+        padding-block: 0;
+        padding-inline: 0;
+        padding: 12px 0;
+    }
+
+    #custom-instance-input::placeholder {
+        color: var(--white);
+        opacity: 0.5;
+    }
+
+    #custom-instance-input:focus-visible {
+        box-shadow: unset !important;
+    }
+
+    #input-container.focused {
+        box-shadow: 0 0 0 2px var(--white) inset;
+    }
+
+    #custom-instance-buttons {
+        display: flex;
+        flex-direction: row;
+        gap: 6px;
+    }
+
+    .custom-instance-button {
+        height: 100%;
+        aspect-ratio: 1 / 1;
+        padding: 0px 8px;
+    }
+
+    .custom-instance-button :global(svg) {
+        height: 21px;
+        width: 21px;
+        stroke-width: 1.5px;
+    }
+
+    .custom-instance-button[disabled] {
         opacity: 0.5;
         pointer-events: none;
     }

web/src/routes/settings/instances/+page.svelte

@@ -31,13 +31,29 @@
     sectionId="community"
     title={$t("settings.processing.community")}
 >
-    <SettingsToggle
+    <div class="category-inside-group">
-        settingContext="processing"
+        <SettingsToggle
-        settingId="enableCustomInstances"
+            settingContext="processing"
-        title={$t("settings.processing.enable_custom.title")}
+            settingId="enableCustomInstances"
-        description={$t("settings.processing.enable_custom.description")}
+            title={$t("settings.processing.enable_custom.title")}
-    />
+        />
-    {#if $settings.processing.enableCustomInstances}
+        {#if $settings.processing.enableCustomInstances}
-        <CustomInstanceInput />
+            <CustomInstanceInput />
-    {/if}
+        {/if}
+    </div>
+    <div class="subtext">
+        {$t("settings.processing.enable_custom.description")}
+    </div>
 </SettingsCategory>
+
+<style>
+    .category-inside-group {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    .subtext {
+        margin-top: -3px;
+    }
+</style>