web: base custom instance functionality

also:
- renamed processing tab in settings to "instances"
- improved override description
- prefer custom over override (and grey out the option)
- dedicated lib for all api safety warnings
- left aligned small popup with smaller icon
- ability to grey out settings category & toggle

web/src/components/settings/CustomInstanceInput.svelte

@@ -0,0 +1,86 @@
+<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";
+
+    let inputValue = get(settings).processing.customInstanceURL;
+
+    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();
+            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>
+
+<input
+    id="link-area"
+    bind:value={inputValue}
+    on:input={() => {
+        checkUrl();
+    }}
+    spellcheck="false"
+    autocomplete="off"
+    autocapitalize="off"
+    maxlength="128"
+    placeholder="instance url"
+/>
+
+<button
+    id="instance-save"
+    disabled={inputValue == $settings.processing.customInstanceURL || !validUrl}
+    on:click={async () => {
+        await customInstanceWarning();
+        if ($settings.processing.seenCustomWarning) {
+            if (inputValue) writeInput();
+        }
+    }}
+>
+    {$t("button.save")}
+</button>
+
+{#if $settings.processing.customInstanceURL.length > 0}
+    <button
+        id="instance-reset"
+        on:click={() => {
+            updateSetting({
+                processing: {
+                    customInstanceURL: "",
+                },
+            });
+            inputValue = get(settings).processing.customInstanceURL;
+        }}
+    >
+        {$t("button.reset")}
+    </button>
+{/if}
+
+<style>
+    #instance-save[disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+</style>

web/src/components/settings/SettingsCategory.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
-    export let sectionId: string;
     export let title: string;
+    export let sectionId: string;
+
+    export let disabled = false;
 
     let animate = false;
 
@@ -17,6 +19,8 @@
     id={sectionId}
     class="settings-content"
     class:animate
+    class:disabled
+    aria-hidden={disabled}
 >
     <h3 class="settings-content-title">{title}</h3>
     <slot></slot>
@@ -29,6 +33,11 @@
         gap: var(--padding);
         padding: calc(var(--settings-padding) / 2);
         border-radius: 18px;
+        transition: opacity 0.2s;
+    }
+
+    .settings-content.disabled {
+        opacity: 0.5;
     }
 
     .settings-content.animate {