fix(web): large files: better handling of asset deletions (#28117)

web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte

@@ -45,10 +45,7 @@
 
     await deleteAssets(
       force,
-      (assetIds) => {
+      (assetIds) => timelineManager.removeAssets(assetIds),
-        timelineManager.removeAssets(assetIds);
-        eventManager.emit('AssetsDelete', assetIds);
-      },
       selectedAssets,
       force ? undefined : (assets) => timelineManager.upsertAssets(assets),
     );

web/src/lib/stores/websocket.ts

@@ -80,6 +80,8 @@ websocket
   .on('on_new_release', (event) => eventManager.emit('ReleaseEvent', event))
   .on('on_session_delete', () => eventManager.emit('SessionDelete'))
   .on('on_user_delete', (id) => eventManager.emit('UserAdminDeleted', { id }))
+  .on('on_asset_delete', (asset) => eventManager.emit('AssetsDelete', [asset]))
+  .on('on_asset_trash', (assets) => eventManager.emit('AssetsDelete', assets))
   .on('on_asset_update', (asset) => eventManager.emit('AssetUpdate', asset))
   .on('on_person_thumbnail', (id) => eventManager.emit('PersonThumbnailReady', { id }))
   .on('on_notification', () => notificationManager.refresh())

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

@@ -1,11 +1,12 @@
 <script lang="ts">
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import LargeAssetData from './LargeAssetData.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { handlePromiseError } from '$lib/utils';
-  import { getNextAsset, getPreviousAsset } from '$lib/utils/asset-utils';
+  import { getNextAsset, getPreviousAsset, navigateToAsset } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
   import type { AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
@@ -17,7 +18,7 @@
 
   let { data }: Props = $props();
 
-  let assets = $derived(data.assets);
+  let assets = $state(data.assets);
   let asset = $derived(data.asset);
 
   $effect(() => {
@@ -36,13 +37,19 @@
     return asset;
   };
 
-  const onAction = (payload: Action) => {
+  const preAction = async (payload: Action) => {
     if (payload.type == 'trash') {
-      assets = assets.filter((a) => a.id != payload.asset.id);
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      assetViewerManager.showAssetViewer(false);
+      (await navigateToAsset(assetCursor?.nextAsset)) ||
+        (await navigateToAsset(assetCursor?.previousAsset)) ||
+        assetViewerManager.showAssetViewer(false);
     }
   };
 
+  const onAssetsDelete = (assetIds: string[]) => {
+    assets = assets.filter(({ id }) => !assetIds.includes(id));
+  };
+
   const onViewAsset = async (asset: AssetResponseDto) => {
     await navigate({ targetRoute: 'current', assetId: asset.id });
   };
@@ -54,9 +61,11 @@
   });
 </script>
 
+<OnEvents {onAssetsDelete} />
+
 <UserPageLayout title={data.meta.title} scrollbar={true}>
   <div class="grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
-    {#if assets && data.assets.length > 0}
+    {#if assets && assets.length > 0}
       {#each assets as asset (asset.id)}
         <LargeAssetData {asset} {onViewAsset} />
       {/each}
@@ -75,7 +84,7 @@
         cursor={assetCursor}
         showNavigation={assets.length > 1}
         {onRandom}
-        {onAction}
+        {preAction}
         onClose={() => {
           assetViewerManager.showAssetViewer(false);
           handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));