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/buttons/SettingsToggle.svelte

@@ -10,28 +10,37 @@
 
     import Toggle from "$components/misc/Toggle.svelte";
 
-    export let settingContext: Context;
     export let settingId: Id;
+    export let settingContext: Context;
 
     export let title: string;
     export let description: string = "";
 
+    export let disabled = false;
+    export let disabledOpacity = false;
+
     $: setting = $settings[settingContext][settingId];
     $: isEnabled = !!setting;
 </script>
 
-<div id="setting-toggle-{settingContext}-{String(settingId)}" class="toggle-parent">
+<div
+    id="setting-toggle-{settingContext}-{String(settingId)}"
+    class="toggle-parent"
+    class:disabled
+    class:faded={disabledOpacity}
+    aria-hidden={disabled}
+>
     <button
         class="toggle-container"
         role="switch"
         aria-checked={isEnabled}
+        disabled={disabled}
         on:click={() =>
             updateSetting({
                 [settingContext]: {
                     [settingId]: !isEnabled,
                 },
-            })
-        }
+            })}
     >
         <h4 class="toggle-title">{title}</h4>
         <Toggle enabled={isEnabled} />
@@ -51,6 +60,15 @@
         flex-direction: column;
         gap: 8px;
         overflow: hidden;
+        transition: opacity 0.2s;
+    }
+
+    .toggle-parent.disabled {
+        pointer-events: none;
+    }
+
+    .toggle-parent.faded {
+        opacity: 0.5;
     }
 
     .toggle-container {

web/src/components/dialog/SmallDialog.svelte

@@ -18,12 +18,17 @@
     export let bodySubText = "";
     export let buttons: Optional<DialogButton[]> = undefined;
     export let dismissable = true;
+    export let leftAligned = false;
 
     let close: () => void;
 </script>
 
 <DialogContainer {id} {dismissable} bind:close>
-    <div class="dialog-body small-dialog" class:meowbalt-visible={meowbalt}>
+    <div
+        class="dialog-body small-dialog"
+        class:meowbalt-visible={meowbalt}
+        class:align-left={leftAligned}
+    >
         {#if meowbalt}
             <div class="meowbalt-container">
                 <Meowbalt emotion={meowbalt} />
@@ -46,7 +51,7 @@
                 <div class="body-text" tabindex="-1">{bodyText}</div>
             {/if}
             {#if bodySubText}
-                <div class="subtext">{bodySubText}</div>
+                <div class="subtext popup-subtext">{bodySubText}</div>
             {/if}
         </div>
         {#if buttons}
@@ -72,7 +77,7 @@
         text-align: center;
         max-width: 340px;
         width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
-        max-height: 50%;
+        max-height: 85%;
         margin: calc(var(--padding) / 2);
     }
 
@@ -98,10 +103,13 @@
         align-items: center;
     }
 
-    .popup-icon.warn-red :global(svg) {
+    .popup-icon :global(svg) {
         stroke-width: 1.5px;
         height: 50px;
         width: 50px;
+    }
+
+    .warn-red :global(svg) {
         stroke: var(--red);
     }
 
@@ -119,4 +127,24 @@
     .popup-title:focus-visible {
         box-shadow: none !important;
     }
+
+    .popup-subtext {
+        opacity: 0.7;
+        padding: 0;
+    }
+
+    .align-left .body-text {
+        text-align: left;
+    }
+
+    .align-left .popup-header {
+        align-items: start;
+        gap: 2px;
+    }
+
+    .align-left .popup-icon :global(svg) {
+        height: 40px;
+        width: 40px;
+        stroke-width: 1.8px;
+    }
 </style>

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 {