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);
-            if (test) url = new URL(inputValue).origin.toString();
+            url = new URL(inputValue).origin.toString();
             validUrl = true;
         } catch {
             validUrl = false;
@@ -36,35 +39,47 @@
     };
 </script>
 
-<input
-    id="link-area"
+<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="128"
-    placeholder="instance url"
-/>
-
-<button
+            maxlength="64"
+            placeholder={$t("settings.processing.custom.placeholder")}
+        />
+    </div>
+    <div id="custom-instance-buttons">
+        <button
             id="instance-save"
-    disabled={inputValue == $settings.processing.customInstanceURL || !validUrl}
+            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();
                 }
             }}
->
-    {$t("button.save")}
-</button>
+        >
+            <IconCheck />
+        </button>
 
-{#if $settings.processing.customInstanceURL.length > 0}
         <button
             id="instance-reset"
+            class="custom-instance-button"
+            aria-label={$t("button.reset")}
+            disabled={$settings.processing.customInstanceURL.length <= 0}
             on:click={() => {
                 updateSetting({
                     processing: {
@@ -74,12 +89,78 @@
                 inputValue = get(settings).processing.customInstanceURL;
             }}
         >
-        {$t("button.reset")}
+            <IconX />
         </button>
-{/if}
+    </div>
+</div>
 
 <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")}
 >
+    <div class="category-inside-group">
         <SettingsToggle
             settingContext="processing"
             settingId="enableCustomInstances"
             title={$t("settings.processing.enable_custom.title")}
-        description={$t("settings.processing.enable_custom.description")}
         />
         {#if $settings.processing.enableCustomInstances}
             <CustomInstanceInput />
         {/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>