feat(web): View all duplicates page

i18n/en.json

@@ -537,6 +537,7 @@
   "delete_library": "Delete Library",
   "delete_link": "Delete link",
   "delete_others": "Delete others",
+  "has_duplicates": "Has duplicates",
   "delete_shared_link": "Delete shared link",
   "delete_tag": "Delete tag",
   "delete_tag_confirmation_prompt": "Are you sure you want to delete {tagName} tag?",

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -31,6 +31,7 @@
     mdiClose,
     mdiEye,
     mdiEyeOff,
+    mdiImageMultipleOutline,
     mdiImageOutline,
     mdiInformationOutline,
     mdiPencil,
@@ -464,6 +465,23 @@
       </div>
     {/if}
 
+    {#if asset.duplicateId}
+      <div class="flex gap-4 py-4">
+        <div><Icon path={mdiImageMultipleOutline} size="24" /></div>
+
+        <div>
+          <p>
+            <a
+              href="{AppRoute.DUPLICATES}/{asset.duplicateId}"
+              class="hover:dark:text-immich-dark-primary hover:text-immich-primary"
+            >
+              {$t('has_duplicates')}
+            </a>
+          </p>
+        </div>
+      </div>
+    {/if}
+
     <DetailPanelLocation {isOwner} {asset} />
   </div>
 </section>

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 } });
 
+        const currentDuplicateIndex = duplicates.findIndex((duplicate) => duplicate.duplicateId === duplicateId);
         duplicates = duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
 
         deletedNotification(trashIds.length);
+
+        // Move to the next duplicate
+        if (duplicates.length > 0) {
+          // The index of the next duplicate is the same as the current one, since we removed the current one
+          activeDuplicate = duplicates[currentDuplicateIndex] || duplicates[0];
+        }
       },
       trashIds.length > 0 && !$featureFlags.trash ? $t('delete_duplicates_confirmation') : undefined,
       trashIds.length > 0 && !$featureFlags.trash ? $t('permanently_delete') : undefined,
@@ -103,7 +111,14 @@
     await stackAssets(assets, false);
     const duplicateAssetIds = assets.map((asset) => asset.id);
     await updateAssets({ assetBulkUpdateDto: { ids: duplicateAssetIds, duplicateId: null } });
+    const currentDuplicateIndex = duplicates.findIndex((duplicate) => duplicate.duplicateId === duplicateId);
     duplicates = duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
+
+    // Move to the next duplicate
+    if (duplicates.length > 0) {
+      // The index of the next duplicate is the same as the current one, since we removed the current one
+      activeDuplicate = duplicates[currentDuplicateIndex] || duplicates[0];
+    }
   };
 
   const handleDeduplicateAll = async () => {
@@ -209,12 +224,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,25 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getAssetDuplicates } from '@immich/sdk';
+import { fail } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+  await authenticate();
+  const duplicates = await getAssetDuplicates();
+  const $t = await getFormatter();
+
+  const activeDuplicate = duplicates.find((duplicate) => duplicate.duplicateId === params.duplicateId);
+
+  if (!activeDuplicate) {
+    return fail(404);
+  }
+
+  return {
+    duplicates,
+    activeDuplicate,
+    meta: {
+      title: $t('duplicates'),
+    },
+  };
+}) satisfies PageLoad;