From c9d45eee86092ad59b52bc674c028938174c5a99 Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Wed, 14 May 2025 13:52:04 +0200
Subject: [PATCH] refactor: duplicates information modal (#18282)

---
 .../shared-components/duplicates-modal.svelte | 20 -----------------
 .../modals/DuplicatesInformationModal.svelte  | 22 +++++++++++++++++++
 .../[[assetId=id]]/+page.svelte               | 10 ++-------
 3 files changed, 24 insertions(+), 28 deletions(-)
 delete mode 100644 web/src/lib/components/shared-components/duplicates-modal.svelte
 create mode 100644 web/src/lib/modals/DuplicatesInformationModal.svelte

diff --git a/web/src/lib/components/shared-components/duplicates-modal.svelte b/web/src/lib/components/shared-components/duplicates-modal.svelte
deleted file mode 100644
index c9abea1377..0000000000
--- a/web/src/lib/components/shared-components/duplicates-modal.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { t } from 'svelte-i18n';
-  import FullScreenModal from './full-screen-modal.svelte';
-
-  interface Props {
-    onClose: () => void;
-  }
-
-  let { onClose }: Props = $props();
-</script>
-
-<FullScreenModal title={$t('deduplication_info')} width="auto" {onClose}>
-  <div class="text-sm dark:text-white">
-    <p>{$t('deduplication_info_description')}</p>
-    <ol class="ms-8 mt-2" style="list-style: decimal">
-      <li>{$t('deduplication_criteria_1')}</li>
-      <li>{$t('deduplication_criteria_2')}</li>
-    </ol>
-  </div>
-</FullScreenModal>
diff --git a/web/src/lib/modals/DuplicatesInformationModal.svelte b/web/src/lib/modals/DuplicatesInformationModal.svelte
new file mode 100644
index 0000000000..b32165a1ae
--- /dev/null
+++ b/web/src/lib/modals/DuplicatesInformationModal.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Modal, ModalBody } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    onClose: () => void;
+  }
+
+  let { onClose }: Props = $props();
+</script>
+
+<Modal title={$t('deduplication_info')} size="small" {onClose}>
+  <ModalBody>
+    <div class="text-sm dark:text-white">
+      <p>{$t('deduplication_info_description')}</p>
+      <ol class="ms-8 mt-2" style="list-style: decimal">
+        <li>{$t('deduplication_criteria_1')}</li>
+        <li>{$t('deduplication_criteria_2')}</li>
+      </ol>
+    </div>
+  </ModalBody>
+</Modal>
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 0bb581b885..bbad882b24 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import DuplicatesInformationModal from '$lib/modals/DuplicatesInformationModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
@@ -27,8 +27,6 @@
 
   let { data = $bindable() }: Props = $props();
 
-  let isShowDuplicateInfo = $state(false);
-
   interface Shortcuts {
     general: ExplainedShortcut[];
     actions: ExplainedShortcut[];
@@ -201,7 +199,7 @@
           title={$t('deduplication_info')}
           size="16"
           padding="2"
-          onclick={() => (isShowDuplicateInfo = true)}
+          onclick={() => modalManager.show(DuplicatesInformationModal, {})}
         />
       </div>
 
@@ -220,7 +218,3 @@
     {/if}
   </div>
 </UserPageLayout>
-
-{#if isShowDuplicateInfo}
-  <DuplicatesModal onClose={() => (isShowDuplicateInfo = false)} />
-{/if}