refactor(web): asset viewer actions (#11449)

* refactor(web): asset viewer actions

* motion photo slot and more refactoring

e2e/src/web/specs/asset-viewer/navbar.e2e-spec.ts

@@ -10,6 +10,9 @@ test.describe('Asset Viewer Navbar', () => {
     utils.initSdk();
     await utils.resetDatabase();
     admin = await utils.adminSetup();
+  });
+
+  test.beforeEach(async () => {
     asset = await utils.createAsset(admin.accessToken);
   });
 
@@ -49,4 +52,14 @@ test.describe('Asset Viewer Navbar', () => {
       }
     });
   });
+
+  test.describe('actions', () => {
+    test('favorite asset with shortcut', async ({ context, page }) => {
+      await utils.setAuthCookies(context, admin.accessToken);
+      await page.goto(`/photos/${asset.id}`);
+      await page.waitForSelector('#immich-asset-viewer');
+      await page.keyboard.press('f');
+      await expect(page.locator('#notification-list').getByTestId('message')).toHaveText('Added to favorites');
+    });
+  });
 });

e2e/src/web/specs/asset-viewer/slideshow.e2e-spec.ts

@@ -0,0 +1,56 @@
+import { AssetMediaResponseDto, LoginResponseDto } from '@immich/sdk';
+import { expect, type Page, test } from '@playwright/test';
+import { utils } from 'src/utils';
+
+test.describe('Slideshow', () => {
+  let admin: LoginResponseDto;
+  let asset: AssetMediaResponseDto;
+
+  test.beforeAll(async () => {
+    utils.initSdk();
+    await utils.resetDatabase();
+    admin = await utils.adminSetup();
+    asset = await utils.createAsset(admin.accessToken);
+  });
+
+  const openSlideshow = async (page: Page) => {
+    await page.goto(`/photos/${asset.id}`);
+    await page.waitForSelector('#immich-asset-viewer');
+    await page.getByRole('button', { name: 'More' }).click();
+    await page.getByRole('menuitem', { name: 'Slideshow' }).click();
+  };
+
+  test('open slideshow', async ({ context, page }) => {
+    await utils.setAuthCookies(context, admin.accessToken);
+    await openSlideshow(page);
+    await expect(page.getByRole('button', { name: 'Exit Slideshow' })).toBeVisible();
+  });
+
+  test('exit slideshow with button', async ({ context, page }) => {
+    await utils.setAuthCookies(context, admin.accessToken);
+    await openSlideshow(page);
+
+    const exitButton = page.getByRole('button', { name: 'Exit Slideshow' });
+    await exitButton.click();
+    await expect(exitButton).not.toBeVisible();
+  });
+
+  test('exit slideshow with shortcut', async ({ context, page }) => {
+    await utils.setAuthCookies(context, admin.accessToken);
+    await openSlideshow(page);
+
+    const exitButton = page.getByRole('button', { name: 'Exit Slideshow' });
+    await expect(exitButton).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(exitButton).not.toBeVisible();
+  });
+
+  test('favorite shortcut is disabled', async ({ context, page }) => {
+    await utils.setAuthCookies(context, admin.accessToken);
+    await openSlideshow(page);
+
+    await expect(page.getByRole('button', { name: 'Exit Slideshow' })).toBeVisible();
+    await page.keyboard.press('f');
+    await expect(page.locator('#notification-list')).not.toBeVisible();
+  });
+});

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

@@ -0,0 +1,20 @@
+import type { AssetAction } from '$lib/constants';
+import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
+
+type ActionMap = {
+  [AssetAction.ARCHIVE]: { asset: AssetResponseDto };
+  [AssetAction.UNARCHIVE]: { asset: AssetResponseDto };
+  [AssetAction.FAVORITE]: { asset: AssetResponseDto };
+  [AssetAction.UNFAVORITE]: { asset: AssetResponseDto };
+  [AssetAction.TRASH]: { asset: AssetResponseDto };
+  [AssetAction.DELETE]: { asset: AssetResponseDto };
+  [AssetAction.RESTORE]: { asset: AssetResponseDto };
+  [AssetAction.ADD]: { asset: AssetResponseDto };
+  [AssetAction.ADD_TO_ALBUM]: { asset: AssetResponseDto; album: AlbumResponseDto };
+  [AssetAction.UNSTACK]: { assets: AssetResponseDto[] };
+};
+
+export type Action = {
+  [K in AssetAction]: { type: K } & ActionMap[K];
+}[AssetAction];
+export type OnAction = (action: Action) => void;

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { OnAction } from '$lib/components/asset-viewer/actions/action';
+  import AlbumSelectionModal from '$lib/components/shared-components/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 type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
+  import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+  export let shared = false;
+
+  let showSelectionModal = false;
+
+  const handleAddToNewAlbum = async (albumName: string) => {
+    showSelectionModal = false;
+    const album = await addAssetsToNewAlbum(albumName, [asset.id]);
+    if (album) {
+      onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
+    }
+  };
+
+  const handleAddToAlbum = async (album: AlbumResponseDto) => {
+    showSelectionModal = false;
+    await addAssetsToAlbum(album.id, [asset.id]);
+    onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
+  };
+</script>
+
+<MenuOption
+  icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
+  text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
+  onClick={() => (showSelectionModal = true)}
+/>
+
+{#if showSelectionModal}
+  <Portal target="body">
+    <AlbumSelectionModal
+      {shared}
+      on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
+      on:album={({ detail }) => handleAddToAlbum(detail)}
+      onClose={() => (showSelectionModal = false)}
+    />
+  </Portal>
+{/if}

web/src/lib/components/asset-viewer/actions/archive-action.svelte

@@ -0,0 +1,28 @@
+<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 { toggleArchive } from '$lib/utils/asset-utils';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+
+  const onArchive = async () => {
+    const updatedAsset = await toggleArchive(asset);
+    if (updatedAsset) {
+      onAction({ type: asset.isArchived ? AssetAction.ARCHIVE : AssetAction.UNARCHIVE, asset });
+    }
+  };
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'a', shift: true }, onShortcut: onArchive }} />
+
+<MenuOption
+  icon={asset.isArchived ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline}
+  text={asset.isArchived ? $t('unarchive') : $t('to_archive')}
+  onClick={onArchive}
+/>

web/src/lib/components/asset-viewer/actions/close-action.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { mdiArrowLeft } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let onClose: () => void;
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />
+
+<CircleIconButton color="opaque" icon={mdiArrowLeft} title={$t('go_back')} on:click={onClose} />

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

@@ -1,20 +1,19 @@
-import { type AssetResponseDto } from '@immich/sdk';
+import type { AssetResponseDto } from '@immich/sdk';
-
 import { assetFactory } from '@test-data/factories/asset-factory';
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/svelte';
-import DeleteButton from './delete-button.svelte';
+import DeleteAction from './delete-action.svelte';
 
 let asset: AssetResponseDto;
 
-describe('DeleteButton component', () => {
+describe('DeleteAction component', () => {
   describe('given an asset which is not trashed yet', () => {
     beforeEach(() => {
       asset = assetFactory.build({ isTrashed: false });
     });
 
     it('displays a button to move the asset to the trash bin', () => {
-      const { getByTitle, queryByTitle } = render(DeleteButton, { asset });
+      const { getByTitle, queryByTitle } = render(DeleteAction, { asset, onAction: vi.fn() });
       expect(getByTitle('delete')).toBeInTheDocument();
       expect(queryByTitle('deletePermanently')).toBeNull();
     });
@@ -26,7 +25,7 @@ describe('DeleteButton component', () => {
     });
 
     it('displays a button to permanently delete the asset', () => {
-      const { getByTitle, queryByTitle } = render(DeleteButton, { asset });
+      const { getByTitle, queryByTitle } = render(DeleteAction, { asset, onAction: vi.fn() });
       expect(getByTitle('permanently_delete')).toBeInTheDocument();
       expect(queryByTitle('delete')).toBeNull();
     });

web/src/lib/components/asset-viewer/actions/delete-action.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { shortcuts } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
+  import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+
+  let showConfirmModal = false;
+
+  const trashOrDelete = async (force = false) => {
+    if (force || !$featureFlags.trash) {
+      if ($showDeleteModal) {
+        showConfirmModal = true;
+        return;
+      }
+      await deleteAsset();
+      return;
+    }
+
+    await trashAsset();
+    return;
+  };
+
+  const trashAsset = async () => {
+    try {
+      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
+      onAction({ type: AssetAction.TRASH, asset });
+
+      notificationController.show({
+        message: $t('moved_to_trash'),
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_trash_asset'));
+    }
+  };
+
+  const deleteAsset = async () => {
+    try {
+      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
+      onAction({ type: AssetAction.DELETE, asset });
+
+      notificationController.show({
+        message: $t('permanently_deleted_asset'),
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_delete_asset'));
+    } finally {
+      showConfirmModal = false;
+    }
+  };
+</script>
+
+<svelte:window
+  use:shortcuts={[
+    { shortcut: { key: 'Delete' }, onShortcut: () => trashOrDelete(asset.isTrashed) },
+    { shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) },
+  ]}
+/>
+
+<CircleIconButton
+  color="opaque"
+  icon={asset.isTrashed ? mdiDeleteForeverOutline : mdiDeleteOutline}
+  title={asset.isTrashed ? $t('permanently_delete') : $t('delete')}
+  on:click={() => trashOrDelete(asset.isTrashed)}
+/>
+
+{#if showConfirmModal}
+  <Portal target="body">
+    <DeleteAssetDialog size={1} on:cancel={() => (showConfirmModal = false)} on:confirm={() => deleteAsset()} />
+  </Portal>
+{/if}

web/src/lib/components/asset-viewer/actions/download-action.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { downloadFile } from '$lib/utils/asset-utils';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiFolderDownloadOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let menuItem = false;
+
+  const onDownloadFile = () => downloadFile(asset);
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'd', shift: true }, onShortcut: onDownloadFile }} />
+
+{#if !menuItem}
+  <CircleIconButton color="opaque" icon={mdiFolderDownloadOutline} title={$t('download')} on:click={onDownloadFile} />
+{:else}
+  <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} onClick={onDownloadFile} />
+{/if}

web/src/lib/components/asset-viewer/actions/favorite-action.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { AssetAction } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAsset, type AssetResponseDto } from '@immich/sdk';
+  import { mdiHeart, mdiHeartOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+
+  const toggleFavorite = async () => {
+    try {
+      const data = await updateAsset({
+        id: asset.id,
+        updateAssetDto: {
+          isFavorite: !asset.isFavorite,
+        },
+      });
+
+      asset.isFavorite = data.isFavorite;
+      onAction({ type: asset.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE, asset });
+
+      notificationController.show({
+        type: NotificationType.Info,
+        message: asset.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'),
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
+    }
+  };
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'f' }, onShortcut: toggleFavorite }} />
+
+<CircleIconButton
+  color="opaque"
+  icon={asset.isFavorite ? mdiHeart : mdiHeartOutline}
+  title={asset.isFavorite ? $t('unfavorite') : $t('to_favorite')}
+  on:click={toggleFavorite}
+/>

web/src/lib/components/asset-viewer/actions/motion-photo-action.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { mdiMotionPauseOutline, mdiPlaySpeed } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let isPlaying: boolean;
+  export let onClick: (shouldPlay: boolean) => void;
+</script>
+
+<CircleIconButton
+  color="opaque"
+  icon={isPlaying ? mdiMotionPauseOutline : mdiPlaySpeed}
+  title={isPlaying ? $t('stop_motion_photo') : $t('play_motion_photo')}
+  on:click={() => onClick(!isPlaying)}
+/>

web/src/lib/components/asset-viewer/actions/next-asset-action.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiChevronRight } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import NavigationArea from '../navigation-area.svelte';
+
+  export let onNextAsset: () => void;
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'ArrowRight' }, onShortcut: onNextAsset }} />
+
+<NavigationArea onClick={onNextAsset} label={$t('view_next_asset')}>
+  <Icon path={mdiChevronRight} size="36" ariaHidden />
+</NavigationArea>

web/src/lib/components/asset-viewer/actions/previous-asset-action.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiChevronLeft } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import NavigationArea from '../navigation-area.svelte';
+
+  export let onPreviousAsset: () => void;
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'ArrowLeft' }, onShortcut: onPreviousAsset }} />
+
+<NavigationArea onClick={onPreviousAsset} label={$t('view_previous_asset')}>
+  <Icon path={mdiChevronLeft} size="36" ariaHidden />
+</NavigationArea>

web/src/lib/components/asset-viewer/actions/restore-action.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { AssetAction } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { restoreAssets, type AssetResponseDto } from '@immich/sdk';
+  import { mdiHistory } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+
+  const handleRestoreAsset = async () => {
+    try {
+      await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
+      asset.isTrashed = false;
+
+      onAction({ type: AssetAction.RESTORE, asset });
+
+      notificationController.show({
+        type: NotificationType.Info,
+        message: $t('restored_asset'),
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_restore_assets'));
+    }
+  };
+</script>
+
+<MenuOption icon={mdiHistory} onClick={handleRestoreAsset} text={$t('restore')} />

web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAlbumInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
+  import { mdiImageOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let album: AlbumResponseDto;
+
+  const handleUpdateThumbnail = async () => {
+    try {
+      await updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          albumThumbnailAssetId: asset.id,
+        },
+      });
+      notificationController.show({
+        type: NotificationType.Info,
+        message: $t('album_cover_updated'),
+        timeout: 1500,
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_update_album_cover'));
+    }
+  };
+</script>
+
+<MenuOption text={$t('set_as_album_cover')} icon={mdiImageOutline} onClick={handleUpdateThumbnail} />

web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import ProfileImageCropper from '$lib/components/shared-components/profile-image-cropper.svelte';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiAccountCircleOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+
+  let showProfileImageCrop = false;
+</script>
+
+<MenuOption
+  icon={mdiAccountCircleOutline}
+  onClick={() => (showProfileImageCrop = true)}
+  text={$t('set_as_profile_picture')}
+/>
+
+{#if showProfileImageCrop}
+  <Portal target="body">
+    <ProfileImageCropper {asset} onClose={() => (showProfileImageCrop = false)} />
+  </Portal>
+{/if}

web/src/lib/components/asset-viewer/actions/share-action.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiShareVariantOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+
+  let showModal = false;
+</script>
+
+<CircleIconButton
+  color="opaque"
+  icon={mdiShareVariantOutline}
+  on:click={() => (showModal = true)}
+  title={$t('share')}
+/>
+
+{#if showModal}
+  <Portal target="body">
+    <CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (showModal = false)} />
+  </Portal>
+{/if}

web/src/lib/components/asset-viewer/actions/show-detail-action.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { mdiInformationOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let onShowDetail: () => void;
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'i' }, onShortcut: onShowDetail }} />
+
+<CircleIconButton color="opaque" icon={mdiInformationOutline} on:click={onShowDetail} title={$t('info')} />

web/src/lib/components/asset-viewer/actions/unstack-action.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { unstackAssets } from '$lib/utils/asset-utils';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiImageMinusOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  export let stackedAssets: AssetResponseDto[];
+  export let onAction: OnAction;
+
+  const handleUnstack = async () => {
+    const unstackedAssets = await unstackAssets(stackedAssets);
+    if (unstackedAssets) {
+      onAction({ type: AssetAction.UNSTACK, assets: unstackedAssets });
+    }
+  };
+</script>
+
+<MenuOption icon={mdiImageMinusOutline} onClick={handleUnstack} text={$t('unstack')} />

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

@@ -1,135 +1,80 @@
 <script lang="ts">
+  import type { OnAction } from '$lib/components/asset-viewer/actions/action';
+  import AddToAlbumAction from '$lib/components/asset-viewer/actions/add-to-album-action.svelte';
+  import ArchiveAction from '$lib/components/asset-viewer/actions/archive-action.svelte';
+  import CloseAction from '$lib/components/asset-viewer/actions/close-action.svelte';
+  import DeleteAction from '$lib/components/asset-viewer/actions/delete-action.svelte';
+  import DownloadAction from '$lib/components/asset-viewer/actions/download-action.svelte';
+  import FavoriteAction from '$lib/components/asset-viewer/actions/favorite-action.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 SetProfilePictureAction from '$lib/components/asset-viewer/actions/set-profile-picture-action.svelte';
+  import ShareAction from '$lib/components/asset-viewer/actions/share-action.svelte';
+  import ShowDetailAction from '$lib/components/asset-viewer/actions/show-detail-action.svelte';
+  import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import DeleteButton from './delete-button.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 { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getAssetJobName } from '$lib/utils';
+  import { getAssetJobName, getSharedLink } from '$lib/utils';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { AssetJobName, AssetTypeEnum, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
   import {
-    mdiAccountCircleOutline,
     mdiAlertOutline,
-    mdiArchiveArrowDownOutline,
-    mdiArchiveArrowUpOutline,
-    mdiArrowLeft,
     mdiCogRefreshOutline,
     mdiContentCopy,
     mdiDatabaseRefreshOutline,
     mdiDotsVertical,
-    mdiFolderDownloadOutline,
-    mdiHeart,
-    mdiHeartOutline,
-    mdiHistory,
-    mdiImageAlbum,
-    mdiImageMinusOutline,
-    mdiImageOutline,
     mdiImageRefreshOutline,
-    mdiInformationOutline,
     mdiMagnifyMinusOutline,
     mdiMagnifyPlusOutline,
-    mdiMotionPauseOutline,
-    mdiPlaySpeed,
     mdiPresentationPlay,
-    mdiShareVariantOutline,
     mdiUpload,
   } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
+  import { canCopyImagesToClipboard } from 'copy-image-clipboard';
-  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import { t } from 'svelte-i18n';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
 
   export let asset: AssetResponseDto;
   export let album: AlbumResponseDto | null = null;
-  export let showCopyButton: boolean;
+  export let stackedAssets: AssetResponseDto[];
-  export let showZoomButton: boolean;
-  export let showMotionPlayButton: boolean;
-  export let isMotionPhotoPlaying = false;
-  export let showDownloadButton: boolean;
   export let showDetailButton: boolean;
-  export let showShareButton: boolean;
   export let showSlideshow = false;
   export let hasStackChildren = false;
   export let onZoomImage: () => void;
   export let onCopyImage: () => void;
+  export let onAction: OnAction;
+  export let onRunJob: (name: AssetJobName) => void;
+  export let onPlaySlideshow: () => void;
+  export let onShowDetail: () => void;
+  export let onClose: () => void;
+
+  const sharedLink = getSharedLink();
 
   $: isOwner = $user && asset.ownerId === $user?.id;
-
+  $: showDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
-  type EventTypes = {
-    back: void;
-    stopMotionPhoto: void;
-    playMotionPhoto: void;
-    download: void;
-    showDetail: void;
-    favorite: void;
-    delete: void;
-    permanentlyDelete: void;
-    toggleArchive: void;
-    addToAlbum: void;
-    restoreAsset: void;
-    addToSharedAlbum: void;
-    asProfileImage: void;
-    setAsAlbumCover: void;
-    runJob: AssetJobName;
-    playSlideShow: void;
-    unstack: void;
-    showShareModal: void;
-  };
-
-  const dispatch = createEventDispatcher<EventTypes>();
-
-  const onJobClick = (name: AssetJobName) => {
-    dispatch('runJob', name);
-  };
-
-  const onMenuClick = (eventName: keyof EventTypes) => {
-    dispatch(eventName);
-  };
 </script>
 
 <div
   class="z-[1001] flex h-16 place-items-center justify-between bg-gradient-to-b from-black/40 px-3 transition-transform duration-200"
 >
   <div class="text-white">
-    <CircleIconButton color="opaque" icon={mdiArrowLeft} title={$t('go_back')} on:click={() => dispatch('back')} />
+    <CloseAction {onClose} />
   </div>
   <div
     class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white"
     data-testid="asset-viewer-navbar-actions"
   >
-    {#if showShareButton}
+    {#if !asset.isTrashed && $user}
-      <CircleIconButton
+      <ShareAction {asset} />
-        color="opaque"
-        icon={mdiShareVariantOutline}
-        on:click={() => dispatch('showShareModal')}
-        title={$t('share')}
-      />
     {/if}
     {#if asset.isOffline}
-      <CircleIconButton
+      <CircleIconButton color="opaque" icon={mdiAlertOutline} on:click={onShowDetail} title={$t('asset_offline')} />
-        color="opaque"
-        icon={mdiAlertOutline}
-        on:click={() => dispatch('showDetail')}
-        title={$t('asset_offline')}
-      />
     {/if}
-    {#if showMotionPlayButton}
+    {#if asset.livePhotoVideoId}
-      {#if isMotionPhotoPlaying}
+      <slot name="motion-photo" />
-        <CircleIconButton
-          color="opaque"
-          icon={mdiMotionPauseOutline}
-          title={$t('stop_motion_photo')}
-          on:click={() => dispatch('stopMotionPhoto')}
-        />
-      {:else}
-        <CircleIconButton
-          color="opaque"
-          icon={mdiPlaySpeed}
-          title={$t('play_motion_photo')}
-          on:click={() => dispatch('playMotionPhoto')}
-        />
-      {/if}
     {/if}
-    {#if showZoomButton}
+    {#if asset.type === AssetTypeEnum.Image}
       <CircleIconButton
         color="opaque"
         hideMobile={true}
@@ -138,84 +83,50 @@
         on:click={onZoomImage}
       />
     {/if}
-    {#if showCopyButton}
+    {#if canCopyImagesToClipboard() && asset.type === AssetTypeEnum.Image}
       <CircleIconButton color="opaque" icon={mdiContentCopy} title={$t('copy_image')} on:click={onCopyImage} />
     {/if}
 
     {#if !isOwner && showDownloadButton}
-      <CircleIconButton
+      <DownloadAction {asset} />
-        color="opaque"
-        icon={mdiFolderDownloadOutline}
-        on:click={() => dispatch('download')}
-        title={$t('download')}
-      />
     {/if}
 
     {#if showDetailButton}
-      <CircleIconButton
+      <ShowDetailAction {onShowDetail} />
-        color="opaque"
-        icon={mdiInformationOutline}
-        on:click={() => dispatch('showDetail')}
-        title={$t('info')}
-      />
     {/if}
 
     {#if isOwner}
-      <CircleIconButton
+      <FavoriteAction {asset} {onAction} />
-        color="opaque"
-        icon={asset.isFavorite ? mdiHeart : mdiHeartOutline}
-        on:click={() => dispatch('favorite')}
-        title={asset.isFavorite ? $t('unfavorite') : $t('to_favorite')}
-      />
     {/if}
 
     {#if isOwner}
-      <DeleteButton
+      <DeleteAction {asset} {onAction} />
-        {asset}
+
-        on:delete={() => dispatch('delete')}
-        on:permanentlyDelete={() => dispatch('permanentlyDelete')}
-      />
       <ButtonContextMenu direction="left" align="top-right" color="opaque" title={$t('more')} icon={mdiDotsVertical}>
         {#if showSlideshow}
-          <MenuOption icon={mdiPresentationPlay} onClick={() => onMenuClick('playSlideShow')} text={$t('slideshow')} />
+          <MenuOption icon={mdiPresentationPlay} text={$t('slideshow')} onClick={onPlaySlideshow} />
         {/if}
         {#if showDownloadButton}
-          <MenuOption icon={mdiFolderDownloadOutline} onClick={() => onMenuClick('download')} text={$t('download')} />
+          <DownloadAction {asset} menuItem />
         {/if}
         {#if asset.isTrashed}
-          <MenuOption icon={mdiHistory} onClick={() => onMenuClick('restoreAsset')} text={$t('restore')} />
+          <RestoreAction {asset} {onAction} />
         {:else}
-          <MenuOption icon={mdiImageAlbum} onClick={() => onMenuClick('addToAlbum')} text={$t('add_to_album')} />
+          <AddToAlbumAction {asset} {onAction} />
-          <MenuOption
+          <AddToAlbumAction {asset} {onAction} shared />
-            icon={mdiShareVariantOutline}
-            onClick={() => onMenuClick('addToSharedAlbum')}
-            text={$t('add_to_shared_album')}
-          />
         {/if}
 
         {#if isOwner}
           {#if hasStackChildren}
-            <MenuOption icon={mdiImageMinusOutline} onClick={() => onMenuClick('unstack')} text={$t('unstack')} />
+            <UnstackAction {stackedAssets} {onAction} />
           {/if}
           {#if album}
-            <MenuOption
+            <SetAlbumCoverAction {asset} {album} />
-              text={$t('set_as_album_cover')}
-              icon={mdiImageOutline}
-              onClick={() => onMenuClick('setAsAlbumCover')}
-            />
           {/if}
           {#if asset.type === AssetTypeEnum.Image}
-            <MenuOption
+            <SetProfilePictureAction {asset} />
-              icon={mdiAccountCircleOutline}
-              onClick={() => onMenuClick('asProfileImage')}
-              text={$t('set_as_profile_picture')}
-            />
           {/if}
-          <MenuOption
+          <ArchiveAction {asset} {onAction} />
-            onClick={() => onMenuClick('toggleArchive')}
-            icon={asset.isArchived ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline}
-            text={asset.isArchived ? $t('unarchive') : $t('to_archive')}
-          />
           <MenuOption
             icon={mdiUpload}
             onClick={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
@@ -224,18 +135,18 @@
           <hr />
           <MenuOption
             icon={mdiDatabaseRefreshOutline}
-            onClick={() => onJobClick(AssetJobName.RefreshMetadata)}
+            onClick={() => onRunJob(AssetJobName.RefreshMetadata)}
             text={$getAssetJobName(AssetJobName.RefreshMetadata)}
           />
           <MenuOption
             icon={mdiImageRefreshOutline}
-            onClick={() => onJobClick(AssetJobName.RegenerateThumbnail)}
+            onClick={() => onRunJob(AssetJobName.RegenerateThumbnail)}
             text={$getAssetJobName(AssetJobName.RegenerateThumbnail)}
           />
           {#if asset.type === AssetTypeEnum.Video}
             <MenuOption
               icon={mdiCogRefreshOutline}
-              onClick={() => onJobClick(AssetJobName.TranscodeVideo)}
+              onClick={() => onRunJob(AssetJobName.TranscodeVideo)}
               text={$getAssetJobName(AssetJobName.TranscodeVideo)}
             />
           {/if}

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

@@ -1,25 +1,21 @@
 <script lang="ts">
+  import { focusTrap } from '$lib/actions/focus-trap';
+  import type { Action, OnAction } from '$lib/components/asset-viewer/actions/action';
+  import MotionPhotoAction from '$lib/components/asset-viewer/actions/motion-photo-action.svelte';
+  import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
+  import PreviousAssetAction from '$lib/components/asset-viewer/actions/previous-asset-action.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import { AssetAction, ProjectionType } from '$lib/constants';
   import { updateNumberOfComments } from '$lib/stores/activity.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import type { AssetStore } from '$lib/stores/assets.store';
-  import { isShowDetail, showDeleteModal } from '$lib/stores/preferences.store';
+  import { isShowDetail } from '$lib/stores/preferences.store';
-  import { featureFlags } from '$lib/stores/server-config.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-  import { stackAssetsStore } from '$lib/stores/stacked-asset.store';
   import { user } from '$lib/stores/user.store';
+  import { websocketEvents } from '$lib/stores/websocket';
   import { getAssetJobMessage, getSharedLink, handlePromiseError, isSharedLink } from '$lib/utils';
-  import {
-    addAssetsToAlbum,
-    addAssetsToNewAlbum,
-    downloadFile,
-    unstackAssets,
-    toggleArchive,
-  } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { shortcuts } from '$lib/actions/shortcut';
+  import { navigate } from '$lib/utils/navigation';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
   import {
     AssetJobName,
@@ -27,49 +23,37 @@
     ReactionType,
     createActivity,
     deleteActivity,
-    deleteAssets,
     getActivities,
     getActivityStatistics,
     getAllAlbums,
     runAssetJobs,
-    restoreAssets,
-    updateAsset,
-    updateAlbumInfo,
     type ActivityResponseDto,
     type AlbumResponseDto,
     type AssetResponseDto,
   } from '@immich/sdk';
-  import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
+  import { mdiImageBrokenVariant } from '@mdi/js';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-  import DeleteAssetDialog from '../photos-page/delete-asset-dialog.svelte';
-  import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte';
   import ActivityStatus from './activity-status.svelte';
   import ActivityViewer from './activity-viewer.svelte';
   import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
   import DetailPanel from './detail-panel.svelte';
-  import NavigationArea from './navigation-area.svelte';
   import PanoramaViewer from './panorama-viewer.svelte';
   import PhotoViewer from './photo-viewer.svelte';
   import SlideshowBar from './slideshow-bar.svelte';
   import VideoViewer from './video-wrapper-viewer.svelte';
-  import { navigate } from '$lib/utils/navigation';
-  import { websocketEvents } from '$lib/stores/websocket';
-  import { canCopyImagesToClipboard } from 'copy-image-clipboard';
-  import { t } from 'svelte-i18n';
-  import { focusTrap } from '$lib/actions/focus-trap';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
   export let preloadAssets: AssetResponseDto[] = [];
   export let showNavigation = true;
-  $: isTrashEnabled = $featureFlags.trash;
   export let withStacked = false;
   export let isShared = false;
   export let album: AlbumResponseDto | null = null;
+  export let onAction: OnAction | undefined = undefined;
 
   let reactions: ActivityResponseDto[] = [];
 
@@ -82,23 +66,16 @@
   } = slideshowStore;
 
   const dispatch = createEventDispatcher<{
-    action: { type: AssetAction; asset: AssetResponseDto };
     close: void;
     next: void;
     previous: void;
   }>();
 
   let appearsInAlbums: AlbumResponseDto[] = [];
-  let isShowAlbumPicker = false;
+  let stackedAssets: AssetResponseDto[] = [];
-  let isShowDeleteConfirmation = false;
-  let isShowShareModal = false;
-  let addToSharedAlbum = true;
   let shouldPlayMotionPhoto = false;
-  let isShowProfileImageCrop = false;
   let sharedLink = getSharedLink();
-  let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
   let enableDetailPanel = asset.hasMetadata;
-  let shouldShowShareModal = !asset.isTrashed;
   let slideshowStateUnsubscribe: () => void;
   let shuffleSlideshowUnsubscribe: () => void;
   let previewStackedAsset: AssetResponseDto | undefined;
@@ -109,23 +86,24 @@
   let unsubscribe: () => void;
   let zoomToggle = () => void 0;
   let copyImage: () => Promise<void>;
+
   $: isFullScreen = fullscreenElement !== null;
 
   $: {
     if (asset.stackCount && asset.stack) {
-      $stackAssetsStore = asset.stack;
+      stackedAssets = asset.stack;
-      $stackAssetsStore = [...$stackAssetsStore, asset].sort(
+      stackedAssets = [...stackedAssets, asset].sort(
         (a, b) => new Date(b.fileCreatedAt).getTime() - new Date(a.fileCreatedAt).getTime(),
       );
 
       // if its a stack, add the next stack image in addition to the next asset
       if (asset.stackCount > 1) {
-        preloadAssets.push($stackAssetsStore[1]);
+        preloadAssets.push(stackedAssets[1]);
       }
     }
 
-    if (!$stackAssetsStore.map((a) => a.id).includes(asset.id)) {
+    if (!stackedAssets.map((a) => a.id).includes(asset.id)) {
-      $stackAssetsStore = [];
+      stackedAssets = [];
     }
   }
 
@@ -230,12 +208,12 @@
     }
 
     if (asset.stackCount && asset.stack) {
-      $stackAssetsStore = asset.stack;
+      stackedAssets = asset.stack;
-      $stackAssetsStore = [...$stackAssetsStore, asset].sort(
+      stackedAssets = [...stackedAssets, asset].sort(
         (a, b) => new Date(a.fileCreatedAt).getTime() - new Date(b.fileCreatedAt).getTime(),
       );
     } else {
-      $stackAssetsStore = [];
+      stackedAssets = [];
     }
   });
 
@@ -277,12 +255,8 @@
   };
 
   const closeViewer = async () => {
-    if ($slideshowState === SlideshowState.None) {
+    dispatch('close');
-      dispatch('close');
+    await navigate({ targetRoute: 'current', assetId: null });
-      await navigate({ targetRoute: 'current', assetId: null });
-    } else {
-      $slideshowState = SlideshowState.StopSlideshow;
-    }
   };
 
   const navigateAssetRandom = async () => {
@@ -328,121 +302,6 @@
     dispatch(order);
   };
 
-  const showDetailInfoHandler = () => {
-    if (isShowActivity) {
-      isShowActivity = false;
-    }
-    $isShowDetail = !$isShowDetail;
-  };
-
-  const trashOrDelete = async (force: boolean = false) => {
-    if (force || !isTrashEnabled) {
-      if ($showDeleteModal) {
-        isShowDeleteConfirmation = true;
-        return;
-      }
-      await deleteAsset();
-      return;
-    }
-
-    await trashAsset();
-    return;
-  };
-
-  const trashAsset = async () => {
-    try {
-      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
-
-      dispatch('action', { type: AssetAction.TRASH, asset });
-
-      notificationController.show({
-        message: $t('moved_to_trash'),
-        type: NotificationType.Info,
-      });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_trash_asset'));
-    }
-  };
-
-  const deleteAsset = async () => {
-    try {
-      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
-
-      dispatch('action', { type: AssetAction.DELETE, asset });
-
-      notificationController.show({
-        message: $t('permanently_deleted_asset'),
-        type: NotificationType.Info,
-      });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_delete_asset'));
-    } finally {
-      isShowDeleteConfirmation = false;
-    }
-  };
-
-  const toggleFavorite = async () => {
-    try {
-      const data = await updateAsset({
-        id: asset.id,
-        updateAssetDto: {
-          isFavorite: !asset.isFavorite,
-        },
-      });
-
-      asset.isFavorite = data.isFavorite;
-      dispatch('action', { type: data.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE, asset: data });
-
-      notificationController.show({
-        type: NotificationType.Info,
-        message: asset.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'),
-      });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
-    }
-  };
-
-  const openAlbumPicker = (shared: boolean) => {
-    isShowAlbumPicker = true;
-    addToSharedAlbum = shared;
-  };
-
-  const handleAddToNewAlbum = async (albumName: string) => {
-    isShowAlbumPicker = false;
-
-    await addAssetsToNewAlbum(albumName, [asset.id]);
-  };
-
-  const handleAddToAlbum = async (album: AlbumResponseDto) => {
-    isShowAlbumPicker = false;
-
-    await addAssetsToAlbum(album.id, [asset.id]);
-    await handleGetAllAlbums();
-  };
-
-  const handleRestoreAsset = async () => {
-    try {
-      await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
-      asset.isTrashed = false;
-
-      dispatch('action', { type: AssetAction.RESTORE, asset });
-
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('restored_asset'),
-      });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_restore_assets'));
-    }
-  };
-
-  const toggleAssetArchive = async () => {
-    const updatedAsset = await toggleArchive(asset);
-    if (updatedAsset) {
-      dispatch('action', { type: asset.isArchived ? AssetAction.ARCHIVE : AssetAction.UNARCHIVE, asset: asset });
-    }
-  };
-
   const handleRunJob = async (name: AssetJobName) => {
     try {
       await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
@@ -498,59 +357,21 @@
     previewStackedAsset = isMouseOver ? asset : undefined;
   };
 
-  const handleUnstack = async () => {
+  const handleAction = async (action: Action) => {
-    const unstackedAssets = await unstackAssets($stackAssetsStore);
+    switch (action.type) {
-    if (unstackedAssets) {
+      case AssetAction.ADD_TO_ALBUM: {
-      for (const asset of unstackedAssets) {
+        await handleGetAllAlbums();
-        dispatch('action', {
+        break;
-          type: AssetAction.ADD,
+      }
-          asset,
+      case AssetAction.UNSTACK: {
-        });
+        await closeViewer();
       }
-      await closeViewer();
     }
-  };
 
-  const handleUpdateThumbnail = async () => {
+    onAction?.(action);
-    if (!album) {
-      return;
-    }
-    try {
-      await updateAlbumInfo({
-        id: album.id,
-        updateAlbumDto: {
-          albumThumbnailAssetId: asset.id,
-        },
-      });
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('album_cover_updated'),
-        timeout: 1500,
-      });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_update_album_cover'));
-    }
   };
-
-  $: if (!$user) {
-    shouldShowShareModal = false;
-  }
 </script>
 
-<svelte:window
-  use:shortcuts={[
-    { shortcut: { key: 'a', shift: true }, onShortcut: toggleAssetArchive },
-    { shortcut: { key: 'ArrowLeft' }, onShortcut: () => navigateAsset('previous') },
-    { shortcut: { key: 'ArrowRight' }, onShortcut: () => navigateAsset('next') },
-    { shortcut: { key: 'd', shift: true }, onShortcut: () => downloadFile(asset) },
-    { shortcut: { key: 'Delete' }, onShortcut: () => trashOrDelete(asset.isTrashed) },
-    { shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) },
-    { shortcut: { key: 'Escape' }, onShortcut: closeViewer },
-    { shortcut: { key: 'f' }, onShortcut: toggleFavorite },
-    { shortcut: { key: 'i' }, onShortcut: toggleDetailPanel },
-  ]}
-/>
-
 <svelte:document bind:fullscreenElement />
 
 <section
@@ -564,44 +385,30 @@
       <AssetViewerNavBar
         {asset}
         {album}
-        isMotionPhotoPlaying={shouldPlayMotionPhoto}
+        {stackedAssets}
-        showCopyButton={canCopyImagesToClipboard() && asset.type === AssetTypeEnum.Image}
-        showZoomButton={asset.type === AssetTypeEnum.Image}
-        showMotionPlayButton={!!asset.livePhotoVideoId}
-        showDownloadButton={shouldShowDownloadButton}
         showDetailButton={enableDetailPanel}
         showSlideshow={!!assetStore}
-        hasStackChildren={$stackAssetsStore.length > 0}
+        hasStackChildren={stackedAssets.length > 0}
-        showShareButton={shouldShowShareModal}
         onZoomImage={zoomToggle}
         onCopyImage={copyImage}
-        on:back={closeViewer}
+        onAction={handleAction}
-        on:showDetail={showDetailInfoHandler}
+        onRunJob={handleRunJob}
-        on:download={() => downloadFile(asset)}
+        onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
-        on:delete={() => trashOrDelete()}
+        onShowDetail={toggleDetailPanel}
-        on:permanentlyDelete={() => trashOrDelete(true)}
+        onClose={closeViewer}
-        on:favorite={toggleFavorite}
+      >
-        on:addToAlbum={() => openAlbumPicker(false)}
+        <MotionPhotoAction
-        on:restoreAsset={() => handleRestoreAsset()}
+          slot="motion-photo"
-        on:addToSharedAlbum={() => openAlbumPicker(true)}
+          isPlaying={shouldPlayMotionPhoto}
-        on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
+          onClick={(shouldPlay) => (shouldPlayMotionPhoto = shouldPlay)}
-        on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
+        />
-        on:toggleArchive={toggleAssetArchive}
+      </AssetViewerNavBar>
-        on:asProfileImage={() => (isShowProfileImageCrop = true)}
-        on:setAsAlbumCover={handleUpdateThumbnail}
-        on:runJob={({ detail: job }) => handleRunJob(job)}
-        on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
-        on:unstack={handleUnstack}
-        on:showShareModal={() => (isShowShareModal = true)}
-      />
     </div>
   {/if}
 
   {#if $slideshowState === SlideshowState.None && showNavigation}
     <div class="z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
-      <NavigationArea onClick={(e) => navigateAsset('previous', e)} label={$t('view_previous_asset')}>
+      <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
-        <Icon path={mdiChevronLeft} size="36" ariaHidden />
-      </NavigationArea>
     </div>
   {/if}
 
@@ -698,9 +505,7 @@
 
   {#if $slideshowState === SlideshowState.None && showNavigation}
     <div class="z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
-      <NavigationArea onClick={(e) => navigateAsset('next', e)} label={$t('view_next_asset')}>
+      <NextAssetAction onNextAsset={() => navigateAsset('next')} />
-        <Icon path={mdiChevronRight} size="36" ariaHidden />
-      </NavigationArea>
     </div>
   {/if}
 
@@ -715,13 +520,13 @@
     </div>
   {/if}
 
-  {#if $stackAssetsStore.length > 0 && withStacked}
+  {#if stackedAssets.length > 0 && withStacked}
     <div
       id="stack-slideshow"
       class="z-[1002] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto horizontal-scrollbar"
     >
       <div class="relative w-full whitespace-nowrap transition-all">
-        {#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
+        {#each stackedAssets as stackedAsset, index (stackedAsset.id)}
           <div
             class="{stackedAsset.id == asset.id
               ? '-translate-y-[1px]'
@@ -735,7 +540,7 @@
               onClick={(stackedAsset, event) => {
                 event.preventDefault();
                 asset = stackedAsset;
-                preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
+                preloadAssets = index + 1 >= stackedAssets.length ? [] : [stackedAssets[index + 1]];
               }}
               on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
               readonly
@@ -777,27 +582,6 @@
       />
     </div>
   {/if}
-
-  {#if isShowAlbumPicker}
-    <AlbumSelectionModal
-      shared={addToSharedAlbum}
-      on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
-      on:album={({ detail }) => handleAddToAlbum(detail)}
-      onClose={() => (isShowAlbumPicker = false)}
-    />
-  {/if}
-
-  {#if isShowDeleteConfirmation}
-    <DeleteAssetDialog size={1} on:cancel={() => (isShowDeleteConfirmation = false)} on:confirm={() => deleteAsset()} />
-  {/if}
-
-  {#if isShowProfileImageCrop}
-    <ProfileImageCropper {asset} onClose={() => (isShowProfileImageCrop = false)} />
-  {/if}
-
-  {#if isShowShareModal}
-    <CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (isShowShareModal = false)} />
-  {/if}
 </section>
 
 <style>

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

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { createEventDispatcher } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import { mdiDeleteOutline, mdiDeleteForeverOutline } from '@mdi/js';
-  import { type AssetResponseDto } from '@immich/sdk';
-
-  export let asset: AssetResponseDto;
-
-  type EventTypes = {
-    delete: void;
-    permanentlyDelete: void;
-  };
-
-  const dispatch = createEventDispatcher<EventTypes>();
-</script>
-
-{#if asset.isTrashed}
-  <CircleIconButton
-    color="opaque"
-    icon={mdiDeleteForeverOutline}
-    on:click={() => dispatch('permanentlyDelete')}
-    title={$t('permanently_delete')}
-  />
-{:else}
-  <CircleIconButton color="opaque" icon={mdiDeleteOutline} on:click={() => dispatch('delete')} title={$t('delete')} />
-{/if}

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

@@ -1,12 +1,13 @@
 <script lang="ts">
+  import { shortcuts } from '$lib/actions/shortcut';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import ProgressBar, { ProgressBarStatus } from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
   import SlideshowSettings from '$lib/components/slideshow-settings.svelte';
   import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
-  import { fly } from 'svelte/transition';
   import { t } from 'svelte-i18n';
+  import { fly } from 'svelte/transition';
 
   export let isFullScreen: boolean;
   export let onNext = () => {};
@@ -85,7 +86,14 @@
   };
 </script>
 
-<svelte:window on:mousemove={showControlBar} />
+<svelte:window
+  on:mousemove={showControlBar}
+  use:shortcuts={[
+    { shortcut: { key: 'Escape' }, onShortcut: onClose },
+    { shortcut: { key: 'ArrowLeft' }, onShortcut: onPrevious },
+    { shortcut: { key: 'ArrowRight' }, onShortcut: onNext },
+  ]}
+/>
 
 {#if showControls}
   <div

web/src/lib/components/photos-page/asset-grid.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
+  import type { Action } from '$lib/components/asset-viewer/actions/action';
   import { AppRoute, AssetAction } from '$lib/constants';
   import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -7,8 +9,10 @@
   import { locale, showDeleteModal } from '$lib/stores/preferences.store';
   import { isSearchEnabled } from '$lib/stores/search.store';
   import { featureFlags } from '$lib/stores/server-config.store';
+  import { handlePromiseError } from '$lib/utils';
   import { deleteAssets } from '$lib/utils/actions';
-  import { type ShortcutOptions, shortcuts } from '$lib/actions/shortcut';
+  import { archiveAssets, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
+  import { navigate } from '$lib/utils/navigation';
   import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
   import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
@@ -18,17 +22,18 @@
   import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
-  import { archiveAssets, stackAssets } from '$lib/utils/asset-utils';
   import DeleteAssetDialog from './delete-asset-dialog.svelte';
-  import { handlePromiseError } from '$lib/utils';
-  import { selectAllAssets } from '$lib/utils/asset-utils';
-  import { navigate } from '$lib/utils/navigation';
 
   export let isSelectionMode = false;
   export let singleSelect = false;
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
-  export let removeAction: AssetAction | null = null;
+  export let removeAction:
+    | AssetAction.UNARCHIVE
+    | AssetAction.ARCHIVE
+    | AssetAction.FAVORITE
+    | AssetAction.UNFAVORITE
+    | null = null;
   export let withStacked = false;
   export let showArchiveIcon = false;
   export let isShared = false;
@@ -193,8 +198,8 @@
 
   const handleClose = () => assetViewingStore.showAssetViewer(false);
 
-  const handleAction = async (action: AssetAction, asset: AssetResponseDto) => {
+  const handleAction = async (action: Action) => {
-    switch (action) {
+    switch (action.type) {
       case removeAction:
       case AssetAction.TRASH:
       case AssetAction.RESTORE:
@@ -203,7 +208,7 @@
         (await handleNext()) || (await handlePrevious()) || handleClose();
 
         // delete after find the next one
-        assetStore.removeAssets([asset.id]);
+        assetStore.removeAssets([action.asset.id]);
         break;
       }
 
@@ -211,14 +216,18 @@
       case AssetAction.UNARCHIVE:
       case AssetAction.FAVORITE:
       case AssetAction.UNFAVORITE: {
-        assetStore.updateAssets([asset]);
+        assetStore.updateAssets([action.asset]);
         break;
       }
 
       case AssetAction.ADD: {
-        assetStore.addAssets([asset]);
+        assetStore.addAssets([action.asset]);
         break;
       }
+
+      case AssetAction.UNSTACK: {
+        assetStore.addAssets(action.assets);
+      }
     }
   };
 
@@ -501,10 +510,10 @@
         preloadAssets={$preloadAssets}
         {isShared}
         {album}
+        onAction={handleAction}
         on:previous={handlePrevious}
         on:next={handleNext}
         on:close={handleClose}
-        on:action={({ detail: action }) => handleAction(action.type, action.asset)}
       />
     {/await}
   {/if}

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-  import Portal from '../portal/portal.svelte';
+  import { goto } from '$app/navigation';
+  import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import { AppRoute, AssetAction } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import type { BucketPosition, Viewport } from '$lib/stores/assets.store';
-  import { handleError } from '$lib/utils/handle-error';
-  import { type AssetResponseDto } from '@immich/sdk';
-  import { createEventDispatcher, onDestroy } from 'svelte';
-  import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-  import justifiedLayout from 'justified-layout';
   import { getAssetRatio } from '$lib/utils/asset-utils';
-  import { calculateWidth } from '$lib/utils/timeline-util';
+  import { handleError } from '$lib/utils/handle-error';
   import { navigate } from '$lib/utils/navigation';
-  import { AppRoute, AssetAction } from '$lib/constants';
+  import { calculateWidth } from '$lib/utils/timeline-util';
-  import { goto } from '$app/navigation';
+  import { type AssetResponseDto } from '@immich/sdk';
+  import justifiedLayout from 'justified-layout';
+  import { createEventDispatcher, onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
+  import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
+  import Portal from '../portal/portal.svelte';
 
   const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();
 
@@ -68,13 +69,13 @@
     }
   };
 
-  const handleAction = async (action: AssetAction, asset: AssetResponseDto) => {
+  const handleAction = async (action: Action) => {
-    switch (action) {
+    switch (action.type) {
       case AssetAction.ARCHIVE:
       case AssetAction.DELETE:
       case AssetAction.TRASH: {
         assets.splice(
-          assets.findIndex((a) => a.id === asset.id),
+          assets.findIndex((a) => a.id === action.asset.id),
           1,
         );
         assets = assets;
@@ -149,11 +150,6 @@
 <!-- Overlay Asset Viewer -->
 {#if $isViewerOpen}
   <Portal target="body">
-    <AssetViewer
+    <AssetViewer asset={$viewingAsset} onAction={handleAction} on:previous={handlePrevious} on:next={handleNext} />
-      asset={$viewingAsset}
-      on:action={({ detail: action }) => handleAction(action.type, action.asset)}
-      on:previous={handlePrevious}
-      on:next={handleNext}
-    />
   </Portal>
 {/if}

web/src/lib/constants.ts

@@ -7,6 +7,8 @@ export enum AssetAction {
   DELETE = 'delete',
   RESTORE = 'restore',
   ADD = 'add',
+  ADD_TO_ALBUM = 'add-to-album',
+  UNSTACK = 'unstack',
 }
 
 export enum AppRoute {

web/src/lib/stores/stacked-asset.store.ts

@@ -1,4 +0,0 @@
-import type { AssetResponseDto } from '@immich/sdk';
-import { writable } from 'svelte/store';
-
-export const stackAssetsStore = writable<AssetResponseDto[]>([]);