feat(web): add RemoveFromAlbumAction to asset viewer nav bar (#27000)

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';
@@ -36,8 +39,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,
@@ -60,6 +61,7 @@
     onUndoDelete?: OnUndoDelete;
     onPlaySlideshow: () => void;
     onClose?: () => void;
+    onRemoveFromAlbum?: (assetIds: string[]) => void;
     playOriginalVideo: boolean;
     setPlayOriginalVideo: (value: boolean) => void;
   }
@@ -75,11 +77,13 @@
     onUndoDelete = undefined,
     onPlaySlideshow,
     onClose,
+    onRemoveFromAlbum,
     playOriginalVideo = false,
     setPlayOriginalVideo,
   }: 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);
 
@@ -154,6 +158,9 @@
         {/if}
 
         <ActionMenuItem action={Actions.AddToAlbum} />
+        {#if album && (isOwner || isAlbumOwner)}
+          <RemoveFromAlbumAction {album} onRemove={onRemoveFromAlbum} assetIds={[asset.id]} menuItem />
+        {/if}
 
         {#if isOwner}
           <AddToStackAction {asset} {stack} {onAction} />

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

@@ -71,6 +71,7 @@
     onAction?: OnAction;
     onUndoDelete?: OnUndoDelete;
     onClose?: (asset: AssetResponseDto) => void;
+    onRemoveFromAlbum?: (assetIds: string[]) => void;
     onRandom?: () => Promise<{ id: string } | undefined>;
   }
 
@@ -86,6 +87,7 @@
     onAction,
     onUndoDelete,
     onClose,
+    onRemoveFromAlbum,
     onRandom,
   }: Props = $props();
 
@@ -478,6 +480,7 @@
         {onUndoDelete}
         onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
         onClose={onClose ? () => onClose(asset) : undefined}
+        {onRemoveFromAlbum}
         {playOriginalVideo}
         {setPlayOriginalVideo}
       />

web/src/lib/components/timeline/TimelineAssetViewer.svelte

@@ -103,6 +103,20 @@
     await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
   };
 
+  const handleRemoveFromAlbum = async (assetIds: string[]) => {
+    timelineManager.removeAssets(assetIds);
+
+    if (!assetIds.includes(assetCursor.current.id)) {
+      return;
+    }
+
+    // keep the cleanup workflow in viewer by moving to adjacent asset first
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    (await navigateToAsset(assetCursor?.nextAsset)) ||
+      (await navigateToAsset(assetCursor?.previousAsset)) ||
+      (await handleClose(assetCursor.current));
+  };
+
   const handlePreAction = async (action: Action) => {
     switch (action.type) {
       case removeAction:
@@ -232,6 +246,7 @@
     }}
     onUndoDelete={handleUndoDelete}
     onRandom={handleRandom}
+    onRemoveFromAlbum={handleRemoveFromAlbum}
     onClose={handleClose}
   />
 {/await}

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.primary($t('assets_removed_count', { values: { count } }));
 
-      clearSelect();
+      context?.clearSelect();
     } catch (error) {
       handleError(error, $t('errors.error_removing_assets_from_album'));
     }