feat(web): add keyboard shortcut to stack selected photos (#5983)

* feat(web): add keyboard shortcut to stack selected photos

* refactor(web): deduplicate logic to stack assets

* Fix linting errors

* fix(web): incorrect count of stacked photos

* chore: cleanup

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/photos-page/actions/stack-action.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
-  import type { OnStack } from '$lib/utils/actions';
-  import { handleError } from '$lib/utils/handle-error';
-  import { updateAssets } from '@immich/sdk';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import type { OnStack } from '$lib/utils/actions';
+  import { stackAssets } from '$lib/utils/asset-utils';
   import { mdiImageMultipleOutline } from '@mdi/js';
 
   export let onStack: OnStack | undefined;
@@ -15,44 +10,10 @@
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
   const handleStack = async () => {
-    try {
-      const assets = [...getOwnedAssets()];
-      const parent = assets.at(0);
-
-      if (parent == undefined) {
-        return;
-      }
-
-      const children = assets.slice(1);
-      const ids = children.map(({ id }) => id);
-
-      if (children.length > 0) {
-        await updateAssets({ assetBulkUpdateDto: { ids, stackParentId: parent.id } });
-      }
-
-      let childrenCount = parent.stackCount ?? 0;
-      for (const asset of children) {
-        asset.stackParentId = parent?.id;
-        // Add grand-children's count to new parent
-        childrenCount += asset.stackCount == undefined ? 1 : asset.stackCount + 1;
-        // Reset children stack info
-        asset.stackCount = null;
-        asset.stack = [];
-      }
-
-      parent.stackCount = childrenCount;
+    await stackAssets([...getOwnedAssets()], (ids) => {
       onStack?.(ids);
-
-      notificationController.show({
-        message: `Stacked ${ids.length + 1} assets`,
-        type: NotificationType.Info,
-        timeout: 1500,
-      });
-
       clearSelect();
-    } catch (error) {
-      handleError(error, `Unable to stack`);
-    }
+    });
   };
 </script>
 

web/src/lib/components/photos-page/asset-grid.svelte

@@ -18,6 +18,7 @@
   import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
+  import { stackAssets } from '$lib/utils/asset-utils';
   import DeleteAssetDialog from './delete-asset-dialog.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { selectAllAssets } from '$lib/utils/asset-utils';
@@ -85,6 +86,13 @@
     handlePromiseError(trashOrDelete(true));
   };
 
+  const onStackAssets = async () => {
+    await stackAssets(Array.from($selectedAssets), (ids) => {
+      assetStore.removeAssets(ids);
+      dispatch('escape');
+    });
+  };
+
   $: shortcutList = (() => {
     if ($isSearchEnabled || $showAssetViewer) {
       return [];
@@ -102,6 +110,7 @@
         { shortcut: { key: 'Delete' }, onShortcut: onDelete },
         { shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
         { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
+        { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
       );
     }
 

web/src/lib/components/shared-components/show-shortcuts.svelte

@@ -25,6 +25,7 @@
     actions: [
       { key: ['f'], action: 'Favorite or unfavorite photo' },
       { key: ['i'], action: 'Show or hide info' },
+      { key: ['s'], action: 'Stack selected photos' },
       { key: ['⇧', 'a'], action: 'Archive or unarchive photo' },
       { key: ['⇧', 'd'], action: 'Download' },
       { key: ['Space'], action: 'Play or pause video' },

web/src/lib/utils/asset-utils.ts

@@ -11,6 +11,7 @@ import {
   createAlbum,
   defaults,
   getDownloadInfo,
+  updateAssets,
   type AssetResponseDto,
   type AssetTypeEnum,
   type DownloadInfoDto,
@@ -270,6 +271,44 @@ export const getSelectedAssets = (assets: Set<AssetResponseDto>, user: UserRespo
   return ids;
 };
 
+export async function stackAssets(assets: Array<AssetResponseDto>, onStack: (ds: string[]) => void) {
+  try {
+    const parent = assets.at(0);
+    if (!parent) {
+      return;
+    }
+
+    const children = assets.slice(1);
+    const ids = children.map(({ id }) => id);
+
+    if (children.length > 0) {
+      await updateAssets({ assetBulkUpdateDto: { ids, stackParentId: parent.id } });
+    }
+
+    let childrenCount = parent.stackCount || 1;
+    for (const asset of children) {
+      asset.stackParentId = parent.id;
+      // Add grand-children's count to new parent
+      childrenCount += asset.stackCount || 1;
+      // Reset children stack info
+      asset.stackCount = null;
+      asset.stack = [];
+    }
+
+    parent.stackCount = childrenCount;
+
+    notificationController.show({
+      message: `Stacked ${ids.length + 1} assets`,
+      type: NotificationType.Info,
+      timeout: 1500,
+    });
+
+    onStack(ids);
+  } catch (error) {
+    handleError(error, `Unable to stack`);
+  }
+}
+
 export const selectAllAssets = async (assetStore: AssetStore, assetInteractionStore: AssetInteractionStore) => {
   if (get(isSelectingAllAssets)) {
     // Selection is already ongoing