feat(web): Improve duplicate suggestion (#14947)

* feat: Improve duplicate suggestion

* format

* feat(web): Add deduplication info popup

* fix: lint

* fmt

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -12,11 +12,12 @@
   import { deleteAssets, updateAssets } from '@immich/sdk';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { suggestDuplicateByFileSize } from '$lib/utils';
+  import { suggestDuplicate } from '$lib/utils/duplicate-utils';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
-  import { mdiCheckOutline, mdiTrashCanOutline } from '@mdi/js';
+  import { mdiCheckOutline, mdiInformationOutline, mdiTrashCanOutline } from '@mdi/js';
   import { stackAssets } from '$lib/utils/asset-utils';
   import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
+  import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { mdiKeyboard } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
@@ -25,9 +26,14 @@
   interface Props {
     data: PageData;
     isShowKeyboardShortcut?: boolean;
+    isShowDuplicateInfo?: boolean;
   }
 
-  let { data = $bindable(), isShowKeyboardShortcut = $bindable(false) }: Props = $props();
+  let {
+    data = $bindable(),
+    isShowKeyboardShortcut = $bindable(false),
+    isShowDuplicateInfo = $bindable(false),
+  }: Props = $props();
 
   interface Shortcuts {
     general: ExplainedShortcut[];
@@ -103,7 +109,7 @@
   };
 
   const handleDeduplicateAll = async () => {
-    const idsToKeep = duplicates.map((group) => suggestDuplicateByFileSize(group.assets)).map((asset) => asset?.id);
+    const idsToKeep = duplicates.map((group) => suggestDuplicate(group.assets)).map((asset) => asset?.id);
     const idsToDelete = duplicates.flatMap((group, i) =>
       group.assets.map((asset) => asset.id).filter((asset) => asset !== idsToKeep[i]),
     );
@@ -178,11 +184,21 @@
     </div>
   {/snippet}
 
-  <div class="mt-4">
+  <div class="">
     {#if duplicates && duplicates.length > 0}
-      <div class="mb-4 text-sm dark:text-white">
-        <p>{$t('duplicates_description')}</p>
+      <div class="flex items-center mb-2">
+        <div class="text-sm dark:text-white">
+          <p>{$t('duplicates_description')}</p>
+        </div>
+        <CircleIconButton
+          icon={mdiInformationOutline}
+          title={$t('deduplication_info')}
+          size="16"
+          padding="2"
+          onclick={() => (isShowDuplicateInfo = true)}
+        />
       </div>
+
       {#key duplicates[0].duplicateId}
         <DuplicatesCompareControl
           assets={duplicates[0].assets}
@@ -202,3 +218,6 @@
 {#if isShowKeyboardShortcut}
   <ShowShortcuts shortcuts={duplicateShortcuts} onClose={() => (isShowKeyboardShortcut = false)} />
 {/if}
+{#if isShowDuplicateInfo}
+  <DuplicatesModal onClose={() => (isShowDuplicateInfo = false)} />
+{/if}