fix(web): stack updates require unstack-restack

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

@@ -26,7 +26,12 @@
   import { searchStore } from '$lib/stores/search.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handlePromiseError } from '$lib/utils';
-  import { deleteAssets, updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
+  import {
+    deleteAssets,
+    refreshStackedAssetInTimeline,
+    updateStackedAssetInTimeline,
+    updateUnstackedAssetInTimeline,
+  } from '$lib/utils/actions';
   import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
   import {
@@ -526,32 +531,12 @@
       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),
-          });
+          refreshStackedAssetInTimeline(timelineManager, action.stack);
         }
         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(
-          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),
-        });
+        refreshStackedAssetInTimeline(timelineManager, action.stack, true);
         break;
       }
     }

web/src/lib/utils/actions.ts

@@ -2,7 +2,8 @@ import { notificationController, NotificationType } from '$lib/components/shared
 import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import type { StackResponse } from '$lib/utils/asset-utils';
-import { AssetVisibility, deleteAssets as deleteBulk, restoreAssets } from '@immich/sdk';
+import { toTimelineAsset } from '$lib/utils/timeline-util';
+import { AssetVisibility, deleteAssets as deleteBulk, restoreAssets, type StackResponseDto } from '@immich/sdk';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
 import { handleError } from './handle-error';
@@ -100,3 +101,26 @@ export function updateUnstackedAssetInTimeline(timelineManager: TimelineManager,
 
   timelineManager.addAssets(assets);
 }
+
+export function refreshStackedAssetInTimeline(
+  timelineManager: TimelineManager,
+  stack: StackResponseDto,
+  addPrimaryAsset: boolean = false,
+) {
+  if (stack != undefined) {
+    if (addPrimaryAsset) {
+      timelineManager.addAssets(
+        stack.assets.filter((a) => a.id === stack.primaryAssetId).map((a) => toTimelineAsset(a)),
+      );
+    }
+    timelineManager.updateAssetOperation([stack.primaryAssetId], (asset) => {
+      asset.stack = {
+        id: stack.id,
+        primaryAssetId: stack.primaryAssetId,
+        assetCount: stack.assets.length,
+      };
+      return { remove: false };
+    });
+    timelineManager.removeAssets(stack.assets.filter((a) => a.id !== stack.primaryAssetId).map(({ id }) => id));
+  }
+}