From 2624f3884f29b6956439d30c2ca3f4cc0d75accd Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Tue, 28 Apr 2026 18:18:39 +0200
Subject: [PATCH] fix(web): large files: better handling of asset deletions
 (#28117)

---
 .../actions/TimelineKeyboardActions.svelte    |  5 +---
 web/src/lib/stores/websocket.ts               |  2 ++
 .../[[assetId=id]]/+page.svelte               | 23 +++++++++++++------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
index b1f3ff01bb..ebb671d491 100644
--- a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
+++ b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
@@ -45,10 +45,7 @@
 
     await deleteAssets(
       force,
-      (assetIds) => {
-        timelineManager.removeAssets(assetIds);
-        eventManager.emit('AssetsDelete', assetIds);
-      },
+      (assetIds) => timelineManager.removeAssets(assetIds),
       selectedAssets,
       force ? undefined : (assets) => timelineManager.upsertAssets(assets),
     );
diff --git a/web/src/lib/stores/websocket.ts b/web/src/lib/stores/websocket.ts
index 630d9771f9..e5cc25bcf9 100644
--- a/web/src/lib/stores/websocket.ts
+++ b/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())
diff --git a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 55bd648730..aed7570e9c 100644
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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);
-      assetViewerManager.showAssetViewer(false);
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      (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 }));