refactor: add to album (#26366)

web/src/lib/components/asset-viewer/actions/action.ts

@@ -1,6 +1,6 @@
 import type { AssetAction } from '$lib/constants';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto, StackResponseDto } from '@immich/sdk';
+import type { AssetResponseDto, PersonResponseDto, StackResponseDto } from '@immich/sdk';
 
 type ActionMap = {
   [AssetAction.ARCHIVE]: { asset: TimelineAsset };
@@ -8,7 +8,6 @@ type ActionMap = {
   [AssetAction.TRASH]: { asset: TimelineAsset };
   [AssetAction.DELETE]: { asset: TimelineAsset };
   [AssetAction.RESTORE]: { asset: TimelineAsset };
-  [AssetAction.ADD_TO_ALBUM]: { asset: TimelineAsset; album: AlbumResponseDto };
   [AssetAction.STACK]: { stack: StackResponseDto };
   [AssetAction.UNSTACK]: { assets: TimelineAsset[] };
   [AssetAction.SET_STACK_PRIMARY_ASSET]: { stack: StackResponseDto };

web/src/lib/components/asset-viewer/actions/add-to-album-action.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import { shortcut } from '$lib/actions/shortcut';
-  import type { OnAction } from '$lib/components/asset-viewer/actions/action';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { AssetAction } from '$lib/constants';
-  import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
-  import { addAssetsToAlbum, addAssetsToAlbums } from '$lib/utils/asset-utils';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import type { AssetResponseDto } from '@immich/sdk';
-  import { modalManager } from '@immich/ui';
-  import { mdiImageAlbum } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    asset: AssetResponseDto;
-    onAction: OnAction;
-  }
-
-  let { asset, onAction }: Props = $props();
-
-  const onClick = async () => {
-    const albums = await modalManager.show(AlbumPickerModal, {});
-
-    if (!albums || albums.length === 0) {
-      return;
-    }
-
-    if (albums.length === 1) {
-      const album = albums[0];
-      await addAssetsToAlbum(album.id, [asset.id]);
-      onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
-    } else {
-      await addAssetsToAlbums(
-        albums.map((a) => a.id),
-        [asset.id],
-      );
-      onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album: albums[0] });
-    }
-  };
-</script>
-
-<svelte:document use:shortcut={{ shortcut: { key: 'l' }, onShortcut: onClick }} />
-
-<MenuOption icon={mdiImageAlbum} text={$t('add_to_album')} {onClick} />

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

@@ -3,7 +3,6 @@
   import ActionButton from '$lib/components/ActionButton.svelte';
   import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  import AddToAlbumAction from '$lib/components/asset-viewer/actions/add-to-album-action.svelte';
   import AddToStackAction from '$lib/components/asset-viewer/actions/add-to-stack-action.svelte';
   import ArchiveAction from '$lib/components/asset-viewer/actions/archive-action.svelte';
   import DeleteAction from '$lib/components/asset-viewer/actions/delete-action.svelte';
@@ -102,6 +101,7 @@
     Unfavorite,
     PlayMotionPhoto,
     StopMotionPhoto,
+    AddToAlbum,
     ZoomIn,
     ZoomOut,
     Copy,
@@ -129,6 +129,7 @@
     Unfavorite,
     PlayMotionPhoto,
     StopMotionPhoto,
+    AddToAlbum,
     ZoomIn,
     ZoomOut,
     Copy,
@@ -181,14 +182,12 @@
         <ActionMenuItem action={Download} />
         <ActionMenuItem action={DownloadOriginal} />
 
-        {#if !isLocked}
-          {#if asset.isTrashed}
-            <RestoreAction {asset} {onAction} />
-          {:else}
-            <AddToAlbumAction {asset} {onAction} />
-          {/if}
+        {#if !isLocked && asset.isTrashed}
+          <RestoreAction {asset} {onAction} />
         {/if}
 
+        <ActionMenuItem action={AddToAlbum} />
+
         {#if isOwner}
           <AddToStackAction {asset} {stack} {onAction} />
           {#if stack}

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

@@ -167,9 +167,7 @@
       }),
     );
 
-    if (!sharedLink) {
-      await handleGetAllAlbums();
-    }
+    await onAlbumAddAssets();
   });
 
   onDestroy(() => {
@@ -182,7 +180,7 @@
     syncAssetViewerOpenClass(false);
   });
 
-  const handleGetAllAlbums = async () => {
+  const onAlbumAddAssets = async () => {
     if (authManager.isSharedLink) {
       return;
     }
@@ -303,10 +301,6 @@
   };
   const handleAction = async (action: Action) => {
     switch (action.type) {
-      case AssetAction.ADD_TO_ALBUM: {
-        await handleGetAllAlbums();
-        break;
-      }
       case AssetAction.DELETE:
       case AssetAction.TRASH: {
         eventManager.emit('AssetsDelete', [asset.id]);
@@ -369,7 +363,7 @@
 
   const refresh = async () => {
     await refreshStack();
-    await handleGetAllAlbums();
+    await onAlbumAddAssets();
     ocrManager.clear();
     if (!sharedLink) {
       if (previewStackedAsset) {
@@ -441,7 +435,7 @@
 </script>
 
 <CommandPaletteDefaultProvider name={$t('assets')} actions={[Tag]} />
-<OnEvents {onAssetReplace} {onAssetUpdate} />
+<OnEvents {onAssetReplace} {onAssetUpdate} {onAlbumAddAssets} />
 
 <svelte:document bind:fullscreenElement />
 

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -10,7 +10,6 @@
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
@@ -25,6 +24,7 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import { Route } from '$lib/route';
+  import { getAssetBulkActions } from '$lib/services/asset.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { memoryStore, type MemoryAsset } from '$lib/stores/memory.store.svelte';
@@ -34,7 +34,7 @@
   import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetMediaSize, AssetTypeEnum, getAssetInfo } from '@immich/sdk';
-  import { IconButton, toastManager } from '@immich/ui';
+  import { ActionButton, IconButton, toastManager } from '@immich/ui';
   import {
     mdiCardsOutline,
     mdiChevronDown,
@@ -328,6 +328,7 @@
       assets={assetInteraction.selectedAssets}
       clearSelect={() => cancelMultiselect(assetInteraction)}
     >
+      {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
       <CreateSharedLink />
       <IconButton
         shape="round"
@@ -338,7 +339,7 @@
         onclick={handleSelectAll}
       />
 
-      <AddToAlbum />
+      <ActionButton action={Actions.AddToAlbum} />
 
       <FavoriteAction removeFavorite={assetInteraction.isAllFavorite} />
 

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

@@ -1,54 +0,0 @@
-<script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
-  import type { OnAddToAlbum } from '$lib/utils/actions';
-  import { addAssetsToAlbum, addAssetsToAlbums } from '$lib/utils/asset-utils';
-  import { getAssetControlContext } from '$lib/utils/context';
-  import { IconButton, modalManager } from '@immich/ui';
-  import { mdiImageAlbum, mdiPlus } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    onAddToAlbum?: OnAddToAlbum;
-    menuItem?: boolean;
-  }
-
-  let { onAddToAlbum = () => {}, menuItem = false }: Props = $props();
-
-  const { getAssets } = getAssetControlContext();
-
-  const onClick = async () => {
-    const albums = await modalManager.show(AlbumPickerModal, {});
-    if (!albums || albums.length === 0) {
-      return;
-    }
-
-    const assetIds = [...getAssets()].map(({ id }) => id);
-    if (albums.length === 1) {
-      const album = albums[0];
-      await addAssetsToAlbum(album.id, assetIds);
-      onAddToAlbum(assetIds, album.id);
-    } else {
-      await addAssetsToAlbums(
-        albums.map(({ id }) => id),
-        assetIds,
-      );
-      onAddToAlbum(assetIds, albums[0].id);
-    }
-  };
-</script>
-
-{#if menuItem}
-  <MenuOption {onClick} text={$t('add_to_album')} icon={mdiImageAlbum} shortcut={{ key: 'l' }} />
-{/if}
-
-{#if !menuItem}
-  <IconButton
-    shape="round"
-    color="secondary"
-    variant="ghost"
-    icon={mdiPlus}
-    aria-label={$t('add_to_album')}
-    onclick={onClick}
-  />
-{/if}