From 6d4a7a75175d8f70a65eec03c910c5aa8234d45f Mon Sep 17 00:00:00 2001
From: timonrieger <mail@timonrieger.de>
Date: Tue, 17 Mar 2026 22:43:51 +0100
Subject: [PATCH] feat(web): add RemoveFromAlbumAction to asset viewer nav bar

---
 .../asset-viewer/asset-viewer-nav-bar.svelte         |  9 +++++++--
 .../timeline/actions/RemoveFromAlbumAction.svelte    | 12 +++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index 3ccadf944f..f5688df707 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -8,6 +8,7 @@
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
   import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
   import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
+  import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.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';
@@ -15,8 +16,10 @@
   import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/set-stack-primary-asset.svelte';
   import SetVisibilityAction from '$lib/components/asset-viewer/actions/set-visibility-action.svelte';
   import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
+  import LoadingDots from '$lib/components/LoadingDots.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { languageManager } from '$lib/managers/language-manager.svelte';
   import { Route } from '$lib/route';
@@ -35,8 +38,6 @@
     type StackResponseDto,
   } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider, Tooltip, type ActionItem } from '@immich/ui';
-  import LoadingDots from '$lib/components/LoadingDots.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import {
     mdiArrowLeft,
     mdiArrowRight,
@@ -79,6 +80,7 @@
   }: Props = $props();
 
   const isOwner = $derived($user && asset.ownerId === $user?.id);
+  const isAlbumOwner = $derived($user && album?.ownerId === $user?.id);
   const isLocked = $derived(asset.visibility === AssetVisibility.Locked);
   const smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
 
@@ -153,6 +155,9 @@
         {/if}
 
         <ActionMenuItem action={Actions.AddToAlbum} />
+        {#if album && (isOwner || isAlbumOwner)}
+          <RemoveFromAlbumAction {album} onRemove={undefined} assetIds={[asset.id]} menuItem />
+        {/if}
 
         {#if isOwner}
           <AddToStackAction {asset} {stack} {onAction} />
diff --git a/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte b/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte
index 5ad696767e..3bbbce8a8c 100644
--- a/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte
+++ b/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte
@@ -10,16 +10,19 @@
   interface Props {
     album: AlbumResponseDto;
     onRemove: ((assetIds: string[]) => void) | undefined;
+    assetIds?: string[];
     menuItem?: boolean;
   }
 
-  let { album = $bindable(), onRemove, menuItem = false }: Props = $props();
+  let { album = $bindable(), onRemove, assetIds, menuItem = false }: Props = $props();
 
-  const { getAssets, clearSelect } = getAssetControlContext();
+  const context = getAssetControlContext();
 
   const removeFromAlbum = async () => {
+    const ids = assetIds ?? context?.getAssets().map(({ id }) => id) ?? [];
+
     const isConfirmed = await modalManager.showDialog({
-      prompt: $t('remove_assets_album_confirmation', { values: { count: getAssets().length } }),
+      prompt: $t('remove_assets_album_confirmation', { values: { count: ids.length } }),
     });
 
     if (!isConfirmed) {
@@ -27,7 +30,6 @@
     }
 
     try {
-      const ids = [...getAssets()].map((a) => a.id);
       const results = await removeAssetFromAlbum({
         id: album.id,
         bulkIdsDto: { ids },
@@ -40,7 +42,7 @@
       const count = results.filter(({ success }) => success).length;
       toastManager.success($t('assets_removed_count', { values: { count } }));
 
-      clearSelect();
+      context?.clearSelect();
     } catch (error) {
       handleError(error, $t('errors.error_removing_assets_from_album'));
     }