feat(web): Remove from Stack (#19703)

* - add component
- update server's StackCreateDto for merge parameter
- Update stackRepo to only merge stacks when merge=true (default)
- update web action handlers to show stack changes

* - make open-api

* lint & format

* - Add proper icon to 'remove from stack'
- change web unstack icon to image-off-outline

* - cleanup

* - format & lint

* - make open-api: StackCreateDto merge optional

* initial addition of new endpoint

* remove stack endpoint

* - fix up remove stack endpoint
- open-api

* - Undo stackCreate merge parameter

* - open-api typescript

* open-api dart

* Tests:
- add tests
- update assetStub.imageFrom2015 to have required stack attributes to include it with tests

* update event name

* Fix event name in test

* remove asset_update check

* - merge stack.removeAsset params into one object
- refactor asset existence check (no need for asset fetch)
- fix tests

* Don't return updated stack

* Create specialized stack id & primary asset fetch for asset removal checks

* Correct new permission names

* make sql

* - fix open-api

* - cleanup

web/src/lib/components/asset-viewer/actions/action.ts

@@ -1,6 +1,6 @@
 import type { AssetAction } from '$lib/constants';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import type { AlbumResponseDto, StackResponseDto } from '@immich/sdk';
+import type { AlbumResponseDto, AssetResponseDto, StackResponseDto } from '@immich/sdk';
 
 type ActionMap = {
   [AssetAction.ARCHIVE]: { asset: TimelineAsset };
@@ -15,6 +15,7 @@ type ActionMap = {
   [AssetAction.UNSTACK]: { assets: TimelineAsset[] };
   [AssetAction.KEEP_THIS_DELETE_OTHERS]: { asset: TimelineAsset };
   [AssetAction.SET_STACK_PRIMARY_ASSET]: { stack: StackResponseDto };
+  [AssetAction.REMOVE_ASSET_FROM_STACK]: { stack: StackResponseDto | null; asset: AssetResponseDto };
   [AssetAction.SET_VISIBILITY_LOCKED]: { asset: TimelineAsset };
   [AssetAction.SET_VISIBILITY_TIMELINE]: { asset: TimelineAsset };
 };

web/src/lib/components/asset-viewer/actions/remove-asset-from-stack.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+
+  import { AssetAction } from '$lib/constants';
+  import { removeAssetFromStack, type AssetResponseDto, type StackResponseDto } from '@immich/sdk';
+  import { mdiImageMinusOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  interface Props {
+    asset: AssetResponseDto;
+    stack: StackResponseDto;
+    onAction: OnAction;
+  }
+
+  let { asset, stack, onAction }: Props = $props();
+
+  const handleRemoveFromStack = async () => {
+    await removeAssetFromStack({
+      id: stack.id,
+      assetId: asset.id,
+    });
+    const updatedStack = {
+      ...stack,
+      assets: stack.assets.filter((a) => a.id !== asset.id),
+    };
+    onAction({ type: AssetAction.REMOVE_ASSET_FROM_STACK, stack: updatedStack, asset });
+  };
+</script>
+
+<MenuOption icon={mdiImageMinusOutline} onClick={handleRemoveFromStack} text={$t('viewer_remove_from_stack')} />

web/src/lib/components/asset-viewer/actions/unstack-action.svelte

@@ -4,7 +4,7 @@
   import { deleteStack } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { StackResponseDto } from '@immich/sdk';
-  import { mdiImageMinusOutline } from '@mdi/js';
+  import { mdiImageOffOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction } from './action';
 
@@ -23,4 +23,4 @@
   };
 </script>
 
-<MenuOption icon={mdiImageMinusOutline} onClick={handleUnstack} text={$t('unstack')} />
+<MenuOption icon={mdiImageOffOutline} onClick={handleUnstack} text={$t('unstack')} />

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -9,6 +9,7 @@
   import DownloadAction from '$lib/components/asset-viewer/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/asset-viewer/actions/favorite-action.svelte';
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
+  import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
   import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte';
   import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
   import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte';
@@ -195,6 +196,9 @@
             <KeepThisDeleteOthersAction {stack} {asset} {onAction} />
             {#if stack?.primaryAssetId !== asset.id}
               <SetStackPrimaryAsset {stack} {asset} {onAction} />
+              {#if stack?.assets?.length > 2}
+                <RemoveAssetFromStack {asset} {stack} {onAction} />
+              {/if}
             {/if}
           {/if}
           {#if album}

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

@@ -328,6 +328,13 @@
         await handleGetAllAlbums();
         break;
       }
+      case AssetAction.REMOVE_ASSET_FROM_STACK: {
+        stack = action.stack;
+        if (stack) {
+          asset = stack.assets[0];
+        }
+        break;
+      }
       case AssetAction.SET_STACK_PRIMARY_ASSET: {
         stack = action.stack;
         break;

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

@@ -4,7 +4,7 @@
   import type { OnStack, OnUnstack } from '$lib/utils/actions';
   import { deleteStack, stackAssets } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { mdiImageMinusOutline, mdiImageMultipleOutline } from '@mdi/js';
+  import { mdiImageMultipleOutline, mdiImageOffOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -42,7 +42,7 @@
 </script>
 
 {#if unstack}
-  <MenuOption text={$t('unstack')} icon={mdiImageMinusOutline} onClick={handleUnstack} />
+  <MenuOption text={$t('unstack')} icon={mdiImageOffOutline} onClick={handleUnstack} />
 {:else}
   <MenuOption text={$t('stack')} icon={mdiImageMultipleOutline} onClick={handleStack} />
 {/if}

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

@@ -523,6 +523,23 @@
         updateUnstackedAssetInTimeline(timelineManager, action.assets);
         break;
       }
+      case AssetAction.REMOVE_ASSET_FROM_STACK: {
+        timelineManager.addAssets([toTimelineAsset(action.asset)]);
+        if (action.stack) {
+          //Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
+          updateUnstackedAssetInTimeline(
+            timelineManager,
+            action.stack.assets.map((asset) => toTimelineAsset(asset)),
+          );
+          updateStackedAssetInTimeline(timelineManager, {
+            stack: action.stack,
+            toDeleteIds: action.stack.assets
+              .filter((asset) => asset.id !== action.stack?.primaryAssetId)
+              .map((asset) => asset.id),
+          });
+        }
+        break;
+      }
       case AssetAction.SET_STACK_PRIMARY_ASSET: {
         //Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
         updateUnstackedAssetInTimeline(

web/src/lib/constants.ts

@@ -11,6 +11,7 @@ export enum AssetAction {
   UNSTACK = 'unstack',
   KEEP_THIS_DELETE_OTHERS = 'keep-this-delete-others',
   SET_STACK_PRIMARY_ASSET = 'set-stack-primary-asset',
+  REMOVE_ASSET_FROM_STACK = 'remove-asset-from-stack',
   SET_VISIBILITY_LOCKED = 'set-visibility-locked',
   SET_VISIBILITY_TIMELINE = 'set-visibility-timeline',
 }