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/routes/settings/+layout.svelte

@@ -10,14 +10,15 @@
     import SettingsNavSection from "$components/settings/SettingsNavSection.svelte";
 
     import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
+    import IconLock from "@tabler/icons-svelte/IconLock.svelte";
 
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
     import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
-    import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
+
     import IconBug from "@tabler/icons-svelte/IconBug.svelte";
-    import IconLock from "@tabler/icons-svelte/IconLock.svelte";
-    import IconCloudNetwork from "@tabler/icons-svelte/IconCloudNetwork.svelte";
+    import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
+    import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
 
     import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
 
@@ -131,11 +132,11 @@
 
             <SettingsNavSection>
                 <SettingsNavTab
-                    tabName="processing"
-                    tabLink="processing"
+                    tabName="instances"
+                    tabLink="instances"
                     iconColor="gray"
                 >
-                    <IconCloudNetwork />
+                    <IconWorld />
                 </SettingsNavTab>
                 <SettingsNavTab
                     tabName="advanced"

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import env from "$lib/env";
+    import settings from "$lib/state/settings";
+
+    import { t } from "$lib/i18n/translations";
+
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import CustomInstanceInput from "$components/settings/CustomInstanceInput.svelte";
+
+    $: overrideDisabled = $settings.processing.enableCustomInstances;
+</script>
+
+{#if env.DEFAULT_API}
+    <SettingsCategory
+        sectionId="override"
+        title={$t("settings.processing.override")}
+        disabled={overrideDisabled}
+    >
+        <SettingsToggle
+            settingContext="processing"
+            settingId="allowDefaultOverride"
+            title={$t("settings.processing.override.title")}
+            description={$t("settings.processing.override.description")}
+            disabled={overrideDisabled}
+        />
+    </SettingsCategory>
+{/if}
+
+<SettingsCategory
+    sectionId="community"
+    title={$t("settings.processing.community")}
+>
+    <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}
+</SettingsCategory>

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

@@ -1,18 +0,0 @@
-<script lang="ts">
-    import env from "$lib/env";
-    import { t } from "$lib/i18n/translations";
-
-    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
-    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
-</script>
-
-{#if env.DEFAULT_API}
-    <SettingsCategory sectionId="override" title={$t("settings.processing.override")}>
-        <SettingsToggle
-            settingContext="processing"
-            settingId="allowDefaultOverride"
-            title={$t("settings.processing.override.title")}
-            description={$t("settings.processing.override.description")}
-        />
-    </SettingsCategory>
-{/if}