refactor: duplicates information modal (#18282)

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}