feat(web): Add stacking option to deduplication utilities (#11114)

* feat(web): Add stacking option to deduplication utilities

* Update web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte

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

* Fix prettier

* Draft for server side modifications. Endpoint for stacks (PUT,DELETE)

* Fix error

* Disable stakc button if less or more than one asset selected

* Remove unnecesarry log

* Revert to first commit

* Further Revert

* Actually Revert to Origin

* Only one stack button

* Update +page.svelte

* Fix optional arguments

* Fix Prettier

* Fix Linting

* Add stack information to asset view

* clean up

---------

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

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

@@ -6,6 +6,7 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
+  import type { AssetResponseDto } from '@immich/sdk';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { deleteAssets, updateAssets } from '@immich/sdk';
@@ -13,10 +14,11 @@
   import type { PageData } from './$types';
   import { suggestDuplicateByFileSize } from '$lib/utils';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import { mdiCheckOutline, mdiTrashCanOutline } from '@mdi/js';
+  import { stackAssets } from '$lib/utils/asset-utils';
   import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { mdiKeyboard } from '@mdi/js';
-  import { mdiCheckOutline, mdiTrashCanOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
 
@@ -40,6 +42,7 @@
       { key: ['s'], action: $t('view') },
       { key: ['d'], action: $t('unselect_all_duplicates') },
       { key: ['⇧', 'c'], action: $t('resolve_duplicates') },
+      { key: ['⇧', 'c'], action: $t('stack_duplicates') },
     ],
   };
 
@@ -88,6 +91,13 @@
     );
   };
 
+  const handleStack = async (duplicateId: string, assets: AssetResponseDto[]) => {
+    await stackAssets(assets, false);
+    const duplicateAssetIds = assets.map((asset) => asset.id);
+    await updateAssets({ assetBulkUpdateDto: { ids: duplicateAssetIds, duplicateId: null } });
+    data.duplicates = data.duplicates.filter((duplicate) => duplicate.duplicateId !== duplicateId);
+  };
+
   const handleDeduplicateAll = async () => {
     const idsToKeep = data.duplicates
       .map((group) => suggestDuplicateByFileSize(group.assets))
@@ -174,6 +184,7 @@
           assets={data.duplicates[0].assets}
           onResolve={(duplicateAssetIds, trashIds) =>
             handleResolve(data.duplicates[0].duplicateId, duplicateAssetIds, trashIds)}
+          onStack={(assets) => handleStack(data.duplicates[0].duplicateId, assets)}
         />
       {/key}
     {:else}