simplified mail settings ui

ui/src/components/settings/EmailTemplateAccordion.svelte

@@ -4,14 +4,16 @@
     import { errors, removeError } from "@/stores/errors";
     import { addInfoToast } from "@/stores/toasts";
     import CommonHelper from "@/utils/CommonHelper";
-    import Accordion from "@/components/base/Accordion.svelte";
     import Field from "@/components/base/Field.svelte";
+    import Accordion from "@/components/base/Accordion.svelte";
 
     export let key;
     export let title;
     export let config = {};
 
     let accordion;
+    let editorComponent;
+    let isEditorComponentLoading = false;
 
     $: hasErrors = !CommonHelper.isEmpty(CommonHelper.getNestedVal($errors, key));
 
@@ -31,6 +33,20 @@
         accordion?.collapseSiblings();
     }
 
+    async function loadEditorComponent() {
+        if (editorComponent || isEditorComponentLoading) {
+            return; // already loaded or in the process
+        }
+
+        isEditorComponentLoading = true;
+
+        editorComponent = (await import("@/components/base/CodeEditor.svelte")).default;
+
+        isEditorComponentLoading = false;
+    }
+
+    loadEditorComponent();
+
     function copy(param) {
         CommonHelper.copyToClipboard(param);
         addInfoToast(`Copied ${param} to clipboard`, 2000);
@@ -90,14 +106,25 @@
 
     <Field class="form-field m-0 required" name="{key}.body" let:uniqueId>
         <label for={uniqueId}>Body (HTML)</label>
-        <textarea
-            id={uniqueId}
-            bind:value={config.body}
-            class="txt-mono"
-            spellcheck="false"
-            rows="12"
-            required
-        />
+
+        {#if editorComponent && !isEditorComponentLoading}
+            <svelte:component
+                this={editorComponent}
+                id={uniqueId}
+                language="html"
+                bind:value={config.body}
+            />
+        {:else}
+            <textarea
+                id={uniqueId}
+                class="txt-mono"
+                spellcheck="false"
+                rows="12"
+                required
+                bind:value={config.body}
+            />
+        {/if}
+
         <div class="help-block">
             Available placeholder parameters:
             <span class="label label-sm link-primary txt-mono" on:click={() => copy("{APP_NAME}")}>

ui/src/components/settings/PageMail.svelte

@@ -5,6 +5,7 @@
     import { pageTitle } from "@/stores/app";
     import { setErrors } from "@/stores/errors";
     import { addSuccessToast } from "@/stores/toasts";
+    import tooltip from "@/actions/tooltip";
     import PageWrapper from "@/components/base/PageWrapper.svelte";
     import Field from "@/components/base/Field.svelte";
     import ObjectSelect from "@/components/base/ObjectSelect.svelte";
@@ -19,7 +20,6 @@
 
     $pageTitle = "Mail settings";
 
-    let firstAccordion;
     let originalFormSettings = {};
     let formSettings = {};
     let isLoading = false;
@@ -55,7 +55,6 @@
             const settings = await ApiClient.settings.update(CommonHelper.filterRedactedProps(formSettings));
             init(settings);
             setErrors({});
-            firstAccordion?.collapseSiblings();
             addSuccessToast("Successfully saved mail settings.");
         } catch (err) {
             ApiClient.errorResponseHandler(err);
@@ -125,7 +124,6 @@
 
                 <div class="accordions">
                     <EmailTemplateAccordion
-                        bind:this={firstAccordion}
                         single
                         key="meta.verificationTemplate"
                         title={'Default "Verification" email template'}
@@ -151,22 +149,19 @@
 
                 <Field class="form-field form-field-toggle m-b-sm" let:uniqueId>
                     <input type="checkbox" id={uniqueId} required bind:checked={formSettings.smtp.enabled} />
-                    <label for={uniqueId}>Use SMTP mail server</label>
+                    <label for={uniqueId}>
+                        <span class="txt">Use SMTP mail server <strong>(recommended)</strong></span>
+                        <i
+                            class="ri-information-line link-hint"
+                            use:tooltip={{
+                                text: 'By default PocketBase uses the unix "sendmail" command for sending emails. For better emails deliverability it is recommended to use a SMTP mail server.',
+                                position: "top",
+                            }}
+                        />
+                    </label>
                 </Field>
 
-                {#if !formSettings.smtp.enabled}
-                    <div class="content" transition:slide|local={{ duration: 150 }}>
-                        <p>
-                            By default PocketBase uses the OS <code>sendmail</code> command for sending
-                            emails.
-                            <br />
-                            <strong class="txt-bold">
-                                For better emails deliverability it is recommended to use a SMTP mail server.
-                            </strong>
-                        </p>
-                        <div class="clearfix m-t-lg" />
-                    </div>
-                {:else}
+                {#if formSettings.smtp.enabled}
                     <div class="grid" transition:slide|local={{ duration: 150 }}>
                         <div class="col-lg-6">
                             <Field class="form-field required" name="smtp.host" let:uniqueId>