refactor: email template preview modal (#19119)

web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte

@@ -4,9 +4,11 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import EmailTemplatePreviewModal from '$lib/modals/EmailTemplatePreviewModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk';
-  import { Button, Modal, ModalBody } from '@immich/ui';
+  import { Button } from '@immich/ui';
   import { mdiEyeOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -18,14 +20,13 @@
 
   let { savedConfig, config = $bindable() }: Props = $props();
 
-  let htmlPreview = $state('');
   let loadingPreview = $state(false);
 
   const getTemplate = async (name: string, template: string) => {
     try {
       loadingPreview = true;
-      const result = await getNotificationTemplateAdmin({ name, templateDto: { template } });
+      const { html } = await getNotificationTemplateAdmin({ name, templateDto: { template } });
-      htmlPreview = result.html;
+      await modalManager.show(EmailTemplatePreviewModal, { html });
     } catch (error) {
       handleError(error, 'Could not load template.');
     } finally {
@@ -33,10 +34,6 @@
     }
   };
 
-  const closePreviewModal = () => {
-    htmlPreview = '';
-  };
-
   const templateConfigs = [
     {
       label: $t('admin.template_email_welcome'),
@@ -66,63 +63,47 @@
   };
 </script>
 
-<div>
+<div in:fade={{ duration: 500 }}>
-  <div in:fade={{ duration: 500 }}>
+  <form autocomplete="off" {onsubmit} class="mt-4">
-    <form autocomplete="off" {onsubmit} class="mt-4">
+    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-4">
+      <SettingAccordion
-        <SettingAccordion
+        key="templates"
-          key="templates"
+        title={$t('admin.template_email_settings')}
-          title={$t('admin.template_email_settings')}
+        subtitle={$t('admin.template_settings_description')}
-          subtitle={$t('admin.template_settings_description')}
+      >
-        >
+        <div class="ms-4 mt-4 flex flex-col gap-4">
-          <div class="ms-4 mt-4 flex flex-col gap-4">
+          <p class="text-sm dark:text-immich-dark-fg">
-            <p class="text-sm dark:text-immich-dark-fg">
+            <FormatMessage key="admin.template_email_if_empty">
-              <FormatMessage key="admin.template_email_if_empty">
+              {$t('admin.template_email_if_empty')}
-                {$t('admin.template_email_if_empty')}
+            </FormatMessage>
-              </FormatMessage>
+          </p>
-            </p>
+          <hr />
-            <hr />
+          {#if loadingPreview}
-            {#if loadingPreview}
+            <LoadingSpinner />
-              <LoadingSpinner />
+          {/if}
-            {/if}
 
-            {#each templateConfigs as { label, templateKey, descriptionTags, templateName } (templateKey)}
+          {#each templateConfigs as { label, templateKey, descriptionTags, templateName } (templateKey)}
-              <SettingTextarea
+            <SettingTextarea
-                {label}
+              {label}
-                description={$t('admin.template_email_available_tags', { values: { tags: descriptionTags } })}
+              description={$t('admin.template_email_available_tags', { values: { tags: descriptionTags } })}
-                bind:value={config.templates.email[templateKey]}
+              bind:value={config.templates.email[templateKey]}
-                isEdited={isEdited(templateKey)}
+              isEdited={isEdited(templateKey)}
-                disabled={!config.notifications.smtp.enabled}
+              disabled={!config.notifications.smtp.enabled}
-              />
+            />
-              <div class="flex justify-between">
+            <div class="flex justify-between">
-                <Button
+              <Button
-                  size="small"
+                size="small"
-                  shape="round"
+                shape="round"
-                  onclick={() => getTemplate(templateName, config.templates.email[templateKey])}
+                onclick={() => getTemplate(templateName, config.templates.email[templateKey])}
-                  title={$t('admin.template_email_preview')}
-                >
-                  <Icon path={mdiEyeOutline} class="me-1" />
-                  {$t('admin.template_email_preview')}
-                </Button>
-              </div>
-            {/each}
-          </div>
-        </SettingAccordion>
-      </div>
-
-      {#if htmlPreview}
-        <Modal title={$t('admin.template_email_preview')} onClose={closePreviewModal} size="medium">
-          <ModalBody>
-            <div style="position:relative; width:100%; height:90vh; overflow: hidden">
-              <iframe
                 title={$t('admin.template_email_preview')}
-                srcdoc={htmlPreview}
+              >
-                style="width: 100%; height: 100%; border: none; overflow:hidden; position: absolute; top: 0; left: 0;"
+                <Icon path={mdiEyeOutline} class="me-1" />
-              ></iframe>
+                {$t('admin.template_email_preview')}
+              </Button>
             </div>
-          </ModalBody>
+          {/each}
-        </Modal>
+        </div>
-      {/if}
+      </SettingAccordion>
-    </form>
+    </div>
-  </div>
+  </form>
 </div>

web/src/lib/modals/EmailTemplatePreviewModal.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Modal, ModalBody } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    html: string;
+    onClose: () => void;
+  }
+
+  let { html, onClose }: Props = $props();
+</script>
+
+<Modal title={$t('admin.template_email_preview')} {onClose} size="giant">
+  <ModalBody>
+    <div class="relative w-full h-240 overflow-hidden">
+      <iframe
+        title={$t('admin.template_email_preview')}
+        srcdoc={html}
+        class="absolute top-0 left-0 w-full h-full border-none"
+      ></iframe>
+    </div>
+  </ModalBody>
+</Modal>