feat: added a page to view all duplicates

web/src/lib/components/utilities-page/duplicates/duplicate-thumbnail.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import type { DuplicateResponseDto } from '@immich/sdk';
+  import { mdiImageMultipleOutline } from '@mdi/js';
+
+  interface Props {
+    duplicate: DuplicateResponseDto;
+  }
+
+  let { duplicate }: Props = $props();
+
+  let assetToDisplay = duplicate.assets[0];
+  let title = $derived(
+    JSON.stringify(
+      duplicate.assets.map((asset) => asset.originalFileName),
+      null,
+      2,
+    ),
+  );
+</script>
+
+<a href="{AppRoute.DUPLICATES}/{duplicate.duplicateId}" class="block relative w-full">
+  <img
+    src={getAssetThumbnailUrl(assetToDisplay.id)}
+    alt={$getAltText(assetToDisplay)}
+    {title}
+    class="h-60 object-cover rounded-xl w-full"
+    draggable="false"
+  />
+
+  <div class="absolute top-2 right-3">
+    <div class="bg-immich-primary/90 px-2 py-1 my-0.5 rounded-xl text-xs text-white">
+      <div class="flex items-center justify-center">
+        <div class="mr-1">{duplicate.assets.length}</div>
+        <Icon path={mdiImageMultipleOutline} size="18" />
+      </div>
+    </div>
+  </div>
+</a>

web/src/routes/(user)/utilities/duplicates/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import DuplicateThumbnail from '$lib/components/utilities-page/duplicates/duplicate-thumbnail.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data = $bindable() }: Props = $props();
+
+  let duplicates = $state(data.duplicates);
+</script>
+
+<UserPageLayout title={data.meta.title + ` (${duplicates.length.toLocaleString($locale)})`} scrollbar={true}>
+  <section class="mt-2 h-[calc(100%-theme(spacing.20))] overflow-auto immich-scrollbar">
+    <div class="w-full grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 gap-2 rounded-2xl">
+      {#each duplicates as duplicate}
+        <DuplicateThumbnail {duplicate} />
+      {/each}
+    </div>
+  </section>
+</UserPageLayout>

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

@@ -54,6 +54,7 @@
     ],
   };
 
+  let activeDuplicate = $state(data.activeDuplicate);
   let duplicates = $state(data.duplicates);
   let hasDuplicates = $derived(duplicates.length > 0);
   const withConfirmation = async (callback: () => Promise<void>, prompt?: string, confirmText?: string) => {
@@ -90,9 +91,16 @@
         await deleteAssets({ assetBulkDeleteDto: { ids: trashIds, force: !$featureFlags.trash } });
         await updateAssets({ assetBulkUpdateDto: { ids: duplicateAssetIds, duplicateId: null } });
 
+        console.log('handleResolve', duplicateId, duplicateAssetIds, trashIds);
+
         duplicates = duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
 
         deletedNotification(trashIds.length);
+
+        // Move to the next duplicate
+        if (duplicates.length > 0) {
+          activeDuplicate = duplicates[0];
+        }
       },
       trashIds.length > 0 && !$featureFlags.trash ? $t('delete_duplicates_confirmation') : undefined,
       trashIds.length > 0 && !$featureFlags.trash ? $t('permanently_delete') : undefined,
@@ -104,6 +112,11 @@
     const duplicateAssetIds = assets.map((asset) => asset.id);
     await updateAssets({ assetBulkUpdateDto: { ids: duplicateAssetIds, duplicateId: null } });
     duplicates = duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
+
+    // Move to the next duplicate
+    if (duplicates.length > 0) {
+      activeDuplicate = duplicates[0];
+    }
   };
 
   const handleDeduplicateAll = async () => {
@@ -209,12 +222,12 @@
         />
       </div>
 
-      {#key duplicates[0].duplicateId}
+      {#key activeDuplicate.duplicateId}
         <DuplicatesCompareControl
-          assets={duplicates[0].assets}
+          assets={activeDuplicate.assets}
           onResolve={(duplicateAssetIds, trashIds) =>
-            handleResolve(duplicates[0].duplicateId, duplicateAssetIds, trashIds)}
-          onStack={(assets) => handleStack(duplicates[0].duplicateId, assets)}
+            handleResolve(activeDuplicate.duplicateId, duplicateAssetIds, trashIds)}
+          onStack={(assets) => handleStack(activeDuplicate.duplicateId, assets)}
         />
       {/key}
     {:else}

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

@@ -0,0 +1,32 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { getAssetDuplicates } from '@immich/sdk';
+import { fail } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+  await authenticate();
+  // const asset = await getAssetInfoFromParam(params);
+  const duplicates = await getAssetDuplicates();
+  const $t = await getFormatter();
+
+  // if (!asset) {
+  //   return fail(404);
+  // }
+
+  const activeDuplicate = duplicates.find((duplicate) => duplicate.duplicateId === params.duplicateId);
+
+  if (!activeDuplicate) {
+    return fail(404);
+  }
+
+  return {
+    // asset,
+    duplicates,
+    activeDuplicate,
+    meta: {
+      title: $t('duplicates'),
+    },
+  };
+}) satisfies PageLoad;