refactor: album picker modal (#19383)

Co-authored-by: Jason Rasmussen <jason@rasm.me>

i18n/en.json

@@ -464,7 +464,6 @@
   "assets": "Assets",
   "assets_added_count": "Added {count, plural, one {# asset} other {# assets}}",
   "assets_added_to_album_count": "Added {count, plural, one {# asset} other {# assets}} to the album",
-  "assets_added_to_name_count": "Added {count, plural, one {# asset} other {# assets}} to {hasName, select, true {<b>{name}</b>} other {new album}}",
   "assets_cannot_be_added_to_album_count": "{count, plural, one {Asset} other {Assets}} cannot be added to the album",
   "assets_count": "{count, plural, one {# asset} other {# assets}}",
   "assets_deleted_permanently": "{count} asset(s) deleted permanently",

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

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
   import type { OnAction } from '$lib/components/asset-viewer/actions/action';
-  import AlbumSelectionModal from '$lib/components/shared-components/album-selection/album-selection-modal.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { AssetAction } from '$lib/constants';
-  import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
+  import { addAssetsToAlbum } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
+  import type { AssetResponseDto } from '@immich/sdk';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -19,40 +19,22 @@
 
   let { asset, onAction, shared = false }: Props = $props();
 
-  let showSelectionModal = $state(false);
+  const onClick = async () => {
+    const album = await modalManager.show(AlbumPickerModal, { shared });
 
-  const handleAddToNewAlbum = async (albumName: string) => {
+    if (!album) {
-    showSelectionModal = false;
+      return;
-    const album = await addAssetsToNewAlbum(albumName, [asset.id]);
-    if (album) {
-      onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
     }
-  };
 
-  const handleAddToAlbum = async (album: AlbumResponseDto) => {
-    showSelectionModal = false;
     await addAssetsToAlbum(album.id, [asset.id]);
     onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
   };
 </script>
 
-<svelte:document
+<svelte:document use:shortcut={{ shortcut: { key: 'l', shift: shared }, onShortcut: onClick }} />
-  use:shortcut={{ shortcut: { key: 'l', shift: shared }, onShortcut: () => (showSelectionModal = true) }}
-/>
 
 <MenuOption
   icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
   text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
-  onClick={() => (showSelectionModal = true)}
+  {onClick}
 />
-
-{#if showSelectionModal}
-  <Portal target="body">
-    <AlbumSelectionModal
-      {shared}
-      onNewAlbum={handleAddToNewAlbum}
-      onAlbumClick={handleAddToAlbum}
-      onClose={() => (showSelectionModal = false)}
-    />
-  </Portal>
-{/if}

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import AlbumSelectionModal from '$lib/components/shared-components/album-selection/album-selection-modal.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
-  import type { AlbumResponseDto } from '@immich/sdk';
+  import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import type { OnAddToAlbum } from '$lib/utils/actions';
+  import { addAssetsToAlbum } from '$lib/utils/asset-utils';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import type { OnAddToAlbum } from '$lib/utils/actions';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     shared?: boolean;
@@ -15,46 +15,24 @@
 
   let { shared = false, onAddToAlbum = () => {} }: Props = $props();
 
-  let showAlbumPicker = $state(false);
-
   const { getAssets } = getAssetControlContext();
 
-  const handleHideAlbumPicker = () => {
+  const onClick = async () => {
-    showAlbumPicker = false;
+    const album = await modalManager.show(AlbumPickerModal, { shared });
-  };
 
-  const handleAddToNewAlbum = async (albumName: string) => {
-    showAlbumPicker = false;
-
-    const assetIds = [...getAssets()].map((asset) => asset.id);
-    const album = await addAssetsToNewAlbum(albumName, assetIds);
     if (!album) {
       return;
     }
 
-    onAddToAlbum(assetIds, album.id);
+    const assetIds = [...getAssets()].map(({ id }) => id);
-  };
-
-  const handleAddToAlbum = async (album: AlbumResponseDto) => {
-    showAlbumPicker = false;
-    const assetIds = [...getAssets()].map((asset) => asset.id);
     await addAssetsToAlbum(album.id, assetIds);
     onAddToAlbum(assetIds, album.id);
   };
 </script>
 
 <MenuOption
-  onClick={() => (showAlbumPicker = true)}
+  {onClick}
   text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
   icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
   shortcut={{ key: 'l', shift: shared }}
 />
-
-{#if showAlbumPicker}
-  <AlbumSelectionModal
-    {shared}
-    onNewAlbum={handleAddToNewAlbum}
-    onAlbumClick={handleAddToAlbum}
-    onClose={handleHideAlbumPicker}
-  />
-{/if}

web/src/lib/modals/AlbumPickerModal.svelte

@@ -6,12 +6,12 @@
     isSelectableRowType,
   } from '$lib/components/shared-components/album-selection/album-selection-utils';
   import { albumViewSettings } from '$lib/stores/preferences.store';
-  import { type AlbumResponseDto, getAllAlbums } from '@immich/sdk';
+  import { type AlbumResponseDto, createAlbum, getAllAlbums } from '@immich/sdk';
   import { Modal, ModalBody } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import AlbumListItem from '../../asset-viewer/album-list-item.svelte';
+  import AlbumListItem from '../components/asset-viewer/album-list-item.svelte';
-  import NewAlbumListItem from './new-album-list-item.svelte';
+  import NewAlbumListItem from '../components/shared-components/album-selection/new-album-list-item.svelte';
 
   let albums: AlbumResponseDto[] = $state([]);
   let recentAlbums: AlbumResponseDto[] = $state([]);
@@ -20,13 +20,11 @@
   let selectedRowIndex: number = $state(-1);
 
   interface Props {
-    onNewAlbum: (search: string) => void;
-    onAlbumClick: (album: AlbumResponseDto) => void;
     shared: boolean;
-    onClose: () => void;
+    onClose: (album?: AlbumResponseDto) => void;
   }
 
-  let { onNewAlbum, onAlbumClick, shared, onClose }: Props = $props();
+  let { shared, onClose }: Props = $props();
 
   onMount(async () => {
     albums = await getAllAlbums({ shared: shared || undefined });
@@ -38,7 +36,34 @@
   const albumModalRows = $derived(rowConverter.toModalRows(search, recentAlbums, albums, selectedRowIndex));
   const selectableRowCount = $derived(albumModalRows.filter((row) => isSelectableRowType(row.type)).length);
 
-  const onkeydown = (e: KeyboardEvent) => {
+  const onNewAlbum = async (name: string) => {
+    const album = await createAlbum({ createAlbumDto: { albumName: name } });
+    onClose(album);
+  };
+
+  const onEnter = async () => {
+    const item = albumModalRows.find(({ selected }) => selected);
+    if (!item) {
+      return;
+    }
+
+    switch (item.type) {
+      case AlbumModalRowType.NEW_ALBUM: {
+        await onNewAlbum(search);
+        break;
+      }
+      case AlbumModalRowType.ALBUM_ITEM: {
+        if (item.album) {
+          onClose(item.album);
+        }
+        break;
+      }
+    }
+
+    selectedRowIndex = -1;
+  };
+
+  const onkeydown = async (e: KeyboardEvent) => {
     switch (e.key) {
       case 'ArrowUp': {
         e.preventDefault();
@@ -60,15 +85,7 @@
       }
       case 'Enter': {
         e.preventDefault();
-        const selectedRow = albumModalRows.find((row) => row.selected);
+        await onEnter();
-        if (selectedRow) {
-          if (selectedRow.type === AlbumModalRowType.NEW_ALBUM) {
-            onNewAlbum(search);
-          } else if (selectedRow.type === AlbumModalRowType.ALBUM_ITEM && selectedRow.album) {
-            onAlbumClick(selectedRow.album);
-          }
-          selectedRowIndex = -1;
-        }
         break;
       }
       default: {
@@ -76,8 +93,6 @@
       }
     }
   };
-
-  const handleAlbumClick = (album: AlbumResponseDto) => () => onAlbumClick(album);
 </script>
 
 <Modal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose} size="small">
@@ -119,7 +134,7 @@
                 album={row.album}
                 selected={row.selected || false}
                 searchQuery={search}
-                onAlbumClick={handleAlbumClick(row.album)}
+                onAlbumClick={() => onClose(row.album)}
               />
             {/if}
           {/each}

web/src/lib/utils/asset-utils.ts

@@ -1,6 +1,4 @@
 import { goto } from '$app/navigation';
-import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
-import type { InterpolationValues } from '$lib/components/i18n/format-message';
 import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
 import { AppRoute } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
@@ -12,7 +10,6 @@ import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
 import { preferences } from '$lib/stores/user.store';
 import { downloadRequest, withError } from '$lib/utils';
-import { createAlbum } from '$lib/utils/album-utils';
 import { getByteUnitString } from '$lib/utils/byte-units';
 import { getFormatter } from '$lib/utils/i18n';
 import { navigate } from '$lib/utils/navigation';
@@ -39,7 +36,7 @@ import {
   type UserResponseDto,
 } from '@immich/sdk';
 import { DateTime } from 'luxon';
-import { t, type Translations } from 'svelte-i18n';
+import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
 import { handleError } from './handle-error';
 
@@ -122,47 +119,6 @@ export const removeTag = async ({
   return assetIds;
 };
 
-export const addAssetsToNewAlbum = async (albumName: string, assetIds: string[]) => {
-  const album = await createAlbum(albumName, assetIds);
-  if (!album) {
-    return;
-  }
-  const $t = get(t);
-  // for reasons beyond me <ComponentProps<typeof FormatBoldMessage>> doesn't work, even though it's (afaik) exactly this object
-  if (album.assets.length === 0) {
-    notificationController.show({
-      type: NotificationType.Info,
-      timeout: 5000,
-      message: $t('assets_cannot_be_added_to_album_count', { values: { count: assetIds.length } }),
-      button: {
-        text: $t('view_album'),
-        onClick() {
-          return goto(`${AppRoute.ALBUMS}/${album.id}`);
-        },
-      },
-    });
-  } else {
-    notificationController.show<{ key: Translations; values: InterpolationValues }>({
-      type: NotificationType.Info,
-      timeout: 5000,
-      component: {
-        type: FormatBoldMessage,
-        props: {
-          key: 'assets_added_to_name_count',
-          values: { count: album.assets.length, name: albumName, hasName: !!albumName },
-        },
-      },
-      button: {
-        text: $t('view_album'),
-        onClick() {
-          return goto(`${AppRoute.ALBUMS}/${album.id}`);
-        },
-      },
-    });
-  }
-  return album;
-};
-
 export const downloadAlbum = async (album: AlbumResponseDto) => {
   await downloadArchive(`${album.albumName}.zip`, {
     albumId: album.id,