From 7a001d27a5204b792ee33093eaa52fbc0d601c6b Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Wed, 11 Jun 2025 20:18:46 +0200
Subject: [PATCH] refactor: email template preview modal (#19119)

---
 .../template-settings.svelte                  | 109 ++++++++----------
 .../modals/EmailTemplatePreviewModal.svelte   |  23 ++++
 2 files changed, 68 insertions(+), 64 deletions(-)
 create mode 100644 web/src/lib/modals/EmailTemplatePreviewModal.svelte

diff --git a/web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte b/web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte
index 8e85664750..872b4b9833 100644
--- a/web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte
+++ b/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 } });
-      htmlPreview = result.html;
+      const { html } = await getNotificationTemplateAdmin({ name, templateDto: { template } });
+      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 }}>
-    <form autocomplete="off" {onsubmit} class="mt-4">
-      <div class="flex flex-col gap-4">
-        <SettingAccordion
-          key="templates"
-          title={$t('admin.template_email_settings')}
-          subtitle={$t('admin.template_settings_description')}
-        >
-          <div class="ms-4 mt-4 flex flex-col gap-4">
-            <p class="text-sm dark:text-immich-dark-fg">
-              <FormatMessage key="admin.template_email_if_empty">
-                {$t('admin.template_email_if_empty')}
-              </FormatMessage>
-            </p>
-            <hr />
-            {#if loadingPreview}
-              <LoadingSpinner />
-            {/if}
+<div in:fade={{ duration: 500 }}>
+  <form autocomplete="off" {onsubmit} class="mt-4">
+    <div class="flex flex-col gap-4">
+      <SettingAccordion
+        key="templates"
+        title={$t('admin.template_email_settings')}
+        subtitle={$t('admin.template_settings_description')}
+      >
+        <div class="ms-4 mt-4 flex flex-col gap-4">
+          <p class="text-sm dark:text-immich-dark-fg">
+            <FormatMessage key="admin.template_email_if_empty">
+              {$t('admin.template_email_if_empty')}
+            </FormatMessage>
+          </p>
+          <hr />
+          {#if loadingPreview}
+            <LoadingSpinner />
+          {/if}
 
-            {#each templateConfigs as { label, templateKey, descriptionTags, templateName } (templateKey)}
-              <SettingTextarea
-                {label}
-                description={$t('admin.template_email_available_tags', { values: { tags: descriptionTags } })}
-                bind:value={config.templates.email[templateKey]}
-                isEdited={isEdited(templateKey)}
-                disabled={!config.notifications.smtp.enabled}
-              />
-              <div class="flex justify-between">
-                <Button
-                  size="small"
-                  shape="round"
-                  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
+          {#each templateConfigs as { label, templateKey, descriptionTags, templateName } (templateKey)}
+            <SettingTextarea
+              {label}
+              description={$t('admin.template_email_available_tags', { values: { tags: descriptionTags } })}
+              bind:value={config.templates.email[templateKey]}
+              isEdited={isEdited(templateKey)}
+              disabled={!config.notifications.smtp.enabled}
+            />
+            <div class="flex justify-between">
+              <Button
+                size="small"
+                shape="round"
+                onclick={() => getTemplate(templateName, config.templates.email[templateKey])}
                 title={$t('admin.template_email_preview')}
-                srcdoc={htmlPreview}
-                style="width: 100%; height: 100%; border: none; overflow:hidden; position: absolute; top: 0; left: 0;"
-              ></iframe>
+              >
+                <Icon path={mdiEyeOutline} class="me-1" />
+                {$t('admin.template_email_preview')}
+              </Button>
             </div>
-          </ModalBody>
-        </Modal>
-      {/if}
-    </form>
-  </div>
+          {/each}
+        </div>
+      </SettingAccordion>
+    </div>
+  </form>
 </div>
diff --git a/web/src/lib/modals/EmailTemplatePreviewModal.svelte b/web/src/lib/modals/EmailTemplatePreviewModal.svelte
new file mode 100644
index 0000000000..3165c654da
--- /dev/null
+++ b/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>