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/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>