refactor(web): asset select actions (#2444)

* refactor(web): asset select actions

* remaining pages/components + data flow changes

* fix check

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

@@ -1,49 +1,48 @@
 <script lang="ts">
+	import { browser } from '$app/environment';
 	import { afterNavigate, goto } from '$app/navigation';
+	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
+	import { downloadAssets } from '$lib/stores/download';
+	import { locale } from '$lib/stores/preferences.store';
+	import { clickOutside } from '$lib/utils/click-outside';
+	import { openFileUploadDialog } from '$lib/utils/file-uploader';
 	import {
 		AlbumResponseDto,
-		api,
 		AssetResponseDto,
 		SharedLinkResponseDto,
 		SharedLinkType,
-		UserResponseDto
+		UserResponseDto,
+		api
 	} from '@api';
 	import { onMount } from 'svelte';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-	import Plus from 'svelte-material-icons/Plus.svelte';
-	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
-	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
-	import CircleAvatar from '../shared-components/circle-avatar.svelte';
-	import AssetSelection from './asset-selection.svelte';
-	import UserSelectionModal from './user-selection-modal.svelte';
-	import ShareInfoModal from './share-info-modal.svelte';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-	import Close from 'svelte-material-icons/Close.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-	import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
-	import { downloadAssets } from '$lib/stores/download';
 	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
+	import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
+	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+	import Button from '../elements/buttons/button.svelte';
+	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+	import DownloadFiles from '../photos-page/actions/download-files.svelte';
+	import RemoveFromAlbum from '../photos-page/actions/remove-from-album.svelte';
+	import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
+	import CircleAvatar from '../shared-components/circle-avatar.svelte';
 	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-	import ThumbnailSelection from './thumbnail-selection.svelte';
 	import ControlAppBar from '../shared-components/control-app-bar.svelte';
-	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
-
-	import {
-		notificationController,
-		NotificationType
-	} from '../shared-components/notification/notification';
-	import { browser } from '$app/environment';
-	import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
 	import CreateSharedLinkModal from '../shared-components/create-share-link-modal/create-shared-link-modal.svelte';
-	import ThemeButton from '../shared-components/theme-button.svelte';
-	import { openFileUploadDialog } from '$lib/utils/file-uploader';
-	import { bulkDownload } from '$lib/utils/asset-utils';
-	import { locale } from '$lib/stores/preferences.store';
 	import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
-	import Button from '../elements/buttons/button.svelte';
-	import { clickOutside } from '$lib/utils/click-outside';
+	import {
+		NotificationType,
+		notificationController
+	} from '../shared-components/notification/notification';
+	import ThemeButton from '../shared-components/theme-button.svelte';
+	import AssetSelection from './asset-selection.svelte';
+	import ShareInfoModal from './share-info-modal.svelte';
+	import ThumbnailSelection from './thumbnail-selection.svelte';
+	import UserSelectionModal from './user-selection-modal.svelte';
 
 	export let album: AlbumResponseDto;
 	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -125,25 +124,6 @@
 		multiSelectAsset = new Set();
 	};
 
-	const removeSelectedAssetFromAlbum = async () => {
-		if (window.confirm('Do you want to remove selected assets from the album?')) {
-			try {
-				const { data } = await api.albumApi.removeAssetFromAlbum(album.id, {
-					assetIds: Array.from(multiSelectAsset).map((a) => a.id)
-				});
-
-				album = data;
-				multiSelectAsset = new Set();
-			} catch (e) {
-				console.error('Error [album-viewer] [removeAssetFromAlbum]', e);
-				notificationController.show({
-					type: NotificationType.Error,
-					message: 'Error removing assets from album, check console for more details'
-				});
-			}
-		}
-	};
-
 	// Update Album Name
 	$: {
 		if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
@@ -353,48 +333,20 @@
 		isShowShareUserSelection = false;
 		isShowShareLinkModal = true;
 	};
-
-	const handleDownloadSelectedAssets = async () => {
-		await bulkDownload(
-			album.albumName,
-			Array.from(multiSelectAsset),
-			() => {
-				isMultiSelectionMode = false;
-				clearMultiSelectAssetAssetHandler();
-			},
-			sharedLink?.key
-		);
-	};
 </script>
 
 <section class="bg-immich-bg dark:bg-immich-dark-bg" class:hidden={isShowThumbnailSelection}>
 	<!-- Multiselection mode app bar -->
 	{#if isMultiSelectionMode}
-		<ControlAppBar
-			on:close-button-click={clearMultiSelectAssetAssetHandler}
-			backIcon={Close}
-			tailwindClasses={'bg-white shadow-md'}
+		<AssetSelectControlBar
+			assets={multiSelectAsset}
+			clearSelect={clearMultiSelectAssetAssetHandler}
 		>
-			<svelte:fragment slot="leading">
-				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-					Selected {multiSelectAsset.size.toLocaleString($locale)}
-				</p>
-			</svelte:fragment>
-			<svelte:fragment slot="trailing">
-				<CircleIconButton
-					title="Download"
-					on:click={handleDownloadSelectedAssets}
-					logo={CloudDownloadOutline}
-				/>
-				{#if isOwned}
-					<CircleIconButton
-						title="Remove from album"
-						on:click={removeSelectedAssetFromAlbum}
-						logo={DeleteOutline}
-					/>
-				{/if}
-			</svelte:fragment>
-		</ControlAppBar>
+			<DownloadFiles filename={album.albumName} sharedLinkKey={sharedLink?.key} />
+			{#if isOwned}
+				<RemoveFromAlbum bind:album />
+			{/if}
+		</AssetSelectControlBar>
 	{/if}
 
 	<!-- Default app bar -->

web/src/lib/components/photos-page/actions/create-shared-link.svelte

@@ -0,0 +1,23 @@
+<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 { SharedLinkType } from '@api';
+	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	let showModal = false;
+	const { getAssets, clearSelect } = getAssetControlContext();
+</script>
+
+<CircleIconButton title="Share" logo={ShareVariantOutline} on:click={() => (showModal = true)} />
+
+{#if showModal}
+	<CreateSharedLinkModal
+		sharedAssets={Array.from(getAssets())}
+		shareType={SharedLinkType.Individual}
+		on:close={() => {
+			showModal = false;
+			clearSelect();
+		}}
+	/>
+{/if}

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { api } from '@api';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let onAssetDelete: OnAssetDelete;
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const deleteSelectedAssetHandler = async () => {
+		try {
+			if (
+				window.confirm(
+					`Caution! Are you sure you want to delete ${
+						getAssets().size
+					} assets? This step also deletes assets in the album(s) to which they belong. You can not undo this action!`
+				)
+			) {
+				const { data: deletedAssets } = await api.assetApi.deleteAsset({
+					ids: Array.from(getAssets()).map((a) => a.id)
+				});
+
+				for (const asset of deletedAssets) {
+					if (asset.status === 'SUCCESS') {
+						onAssetDelete(asset.id);
+					}
+				}
+
+				clearSelect();
+			}
+		} catch (e) {
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error deleting assets, check console for more details'
+			});
+			console.error('Error deleteSelectedAssetHandler', e);
+		}
+	};
+</script>
+
+<CircleIconButton title="Delete" logo={DeleteOutline} on:click={deleteSelectedAssetHandler} />

web/src/lib/components/photos-page/actions/download-files.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import { bulkDownload } from '$lib/utils/asset-utils';
+	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let filename = 'immich';
+	export let sharedLinkKey: string | undefined = undefined;
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleDownloadFiles = async () => {
+		await bulkDownload(filename, Array.from(getAssets()), clearSelect, sharedLinkKey);
+	};
+</script>
+
+<CircleIconButton title="Download" logo={CloudDownloadOutline} on:click={handleDownloadFiles} />

web/src/lib/components/photos-page/actions/move-to-archive.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { api } from '@api';
+	import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
+	import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let onAssetArchive: OnAssetArchive = (asset, archive) => {
+		asset.isArchived = archive;
+	};
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleArchive = async () => {
+		let cnt = 0;
+
+		for (const asset of getAssets()) {
+			if (!asset.isArchived) {
+				api.assetApi.updateAsset(asset.id, {
+					isArchived: true
+				});
+
+				onAssetArchive(asset, true);
+				cnt = cnt + 1;
+			}
+		}
+
+		notificationController.show({
+			message: `Archived ${cnt}`,
+			type: NotificationType.Info
+		});
+
+		clearSelect();
+	};
+</script>
+
+<CircleIconButton title="Archive" logo={ArchiveArrowDownOutline} on:click={handleArchive} />

web/src/lib/components/photos-page/actions/remove-favorite.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import { handleError } from '$lib/utils/handle-error';
+	import { api } from '@api';
+	import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
+	import { getAssetControlContext, OnAssetFavorite } from '../asset-select-control-bar.svelte';
+
+	export let onAssetFavorite: OnAssetFavorite = (asset, favorite) => {
+		asset.isFavorite = favorite;
+	};
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleRemoveFavorite = async () => {
+		for (const asset of getAssets()) {
+			try {
+				await api.assetApi.updateAsset(asset.id, {
+					isFavorite: false
+				});
+				onAssetFavorite(asset, false);
+			} catch {
+				handleError(Error, 'Error updating asset favorite state');
+			}
+		}
+
+		clearSelect();
+	};
+</script>
+
+<slot {handleRemoveFavorite}>
+	<CircleIconButton
+		title="Remove Favorite"
+		logo={HeartMinusOutline}
+		on:click={handleRemoveFavorite}
+	/>
+</slot>

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { AlbumResponseDto, api } from '@api';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let album: AlbumResponseDto;
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleRemoveFromAlbum = async () => {
+		if (window.confirm('Do you want to remove selected assets from the album?')) {
+			try {
+				const { data } = await api.albumApi.removeAssetFromAlbum(album.id, {
+					assetIds: Array.from(getAssets()).map((a) => a.id)
+				});
+
+				album = data;
+				clearSelect();
+			} catch (e) {
+				console.error('Error [album-viewer] [removeAssetFromAlbum]', e);
+				notificationController.show({
+					type: NotificationType.Error,
+					message: 'Error removing assets from album, check console for more details'
+				});
+			}
+		}
+	};
+</script>
+
+<CircleIconButton title="Remove from album" on:click={handleRemoveFromAlbum} logo={DeleteOutline} />

web/src/lib/components/photos-page/actions/remove-from-archive.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { api } from '@api';
+	import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
+	import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let onAssetArchive: OnAssetArchive = (asset, archived) => {
+		asset.isArchived = archived;
+	};
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleUnarchive = async () => {
+		let cnt = 0;
+		for (const asset of getAssets()) {
+			if (asset.isArchived) {
+				api.assetApi.updateAsset(asset.id, {
+					isArchived: false
+				});
+
+				onAssetArchive(asset, false);
+				cnt = cnt + 1;
+			}
+		}
+
+		notificationController.show({
+			message: `Removed ${cnt} from archive`,
+			type: NotificationType.Info
+		});
+
+		clearSelect();
+	};
+</script>
+
+<CircleIconButton title="Unarchive" logo={ArchiveArrowUpOutline} on:click={handleUnarchive} />

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import { AssetResponseDto, SharedLinkResponseDto, api } from '@api';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let sharedLink: SharedLinkResponseDto;
+	export let allAssets: AssetResponseDto[];
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+
+	const handleRemoveAssetsFromSharedLink = async () => {
+		if (window.confirm('Do you want to remove selected assets from the shared link?')) {
+			// TODO: Rename API method or change functionality. The assetIds passed
+			// in are kept instead of removed.
+			const assetsToKeep = allAssets.filter((a) => !getAssets().has(a));
+			await api.assetApi.removeAssetsFromSharedLink(
+				{
+					assetIds: assetsToKeep.map((a) => a.id)
+				},
+				sharedLink?.key
+			);
+
+			sharedLink.assets = assetsToKeep;
+			clearSelect();
+		}
+	};
+</script>
+
+<CircleIconButton
+	title="Remove from album"
+	on:click={handleRemoveAssetsFromSharedLink}
+	logo={DeleteOutline}
+/>

web/src/lib/components/photos-page/asset-select-context-menu.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+	import { createContext } from '$lib/utils/context';
+
+	const { get: getMenuContext, set: setContext } = createContext<() => void>();
+	export { getMenuContext };
+</script>
+
+<script lang="ts">
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+	import type Icon from 'svelte-material-icons/AbTesting.svelte';
+
+	export let icon: typeof Icon;
+	export let title: string;
+
+	let showContextMenu = false;
+	let contextMenuPosition = { x: 0, y: 0 };
+
+	const handleShowMenu = ({ x, y }: MouseEvent) => {
+		contextMenuPosition = { x, y };
+		showContextMenu = !showContextMenu;
+	};
+
+	setContext(() => (showContextMenu = false));
+</script>
+
+<CircleIconButton {title} logo={icon} on:click={handleShowMenu} />
+
+{#if showContextMenu}
+	<ContextMenu {...contextMenuPosition} on:clickoutside={() => (showContextMenu = false)}>
+		<div class="flex flex-col rounded-lg">
+			<slot />
+		</div>
+	</ContextMenu>
+{/if}

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" context="module">
+	import { createContext } from '$lib/utils/context';
+
+	export type OnAssetDelete = (assetId: string) => void;
+	export type OnAssetArchive = (asset: AssetResponseDto, archived: boolean) => void;
+	export type OnAssetFavorite = (asset: AssetResponseDto, favorite: boolean) => void;
+
+	export interface AssetControlContext {
+		// Wrap assets in a function, because context isn't reactive.
+		getAssets: () => Set<AssetResponseDto>;
+		clearSelect: () => void;
+	}
+
+	const { get: getAssetControlContext, set: setContext } = createContext<AssetControlContext>();
+	export { getAssetControlContext };
+</script>
+
+<script lang="ts">
+	import { locale } from '$lib/stores/preferences.store';
+	import { AssetResponseDto } from '@api';
+	import Close from 'svelte-material-icons/Close.svelte';
+	import ControlAppBar from '../shared-components/control-app-bar.svelte';
+
+	export let assets: Set<AssetResponseDto>;
+	export let clearSelect: () => void;
+
+	setContext({ getAssets: () => assets, clearSelect });
+</script>
+
+<ControlAppBar
+	on:close-button-click={clearSelect}
+	backIcon={Close}
+	tailwindClasses="bg-white shadow-md"
+>
+	<p class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
+		Selected {assets.size.toLocaleString($locale)}
+	</p>
+	<slot slot="trailing" />
+</ControlAppBar>

web/src/lib/components/photos-page/menu-options/option-add-to-album.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
+	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { addAssetsToAlbum } from '$lib/utils/asset-utils';
+	import { AlbumResponseDto, api } from '@api';
+	import { getMenuContext } from '../asset-select-context-menu.svelte';
+	import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let shared = false;
+	let showAlbumPicker = false;
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+	const closeMenu = getMenuContext();
+
+	const handleHideAlbumPicker = () => {
+		showAlbumPicker = false;
+		closeMenu();
+	};
+
+	const handleAddToNewAlbum = (event: CustomEvent) => {
+		showAlbumPicker = false;
+
+		const { albumName }: { albumName: string } = event.detail;
+		const assetIds = Array.from(getAssets()).map((asset) => asset.id);
+		api.albumApi.createAlbum({ albumName, assetIds }).then((response) => {
+			const { id, albumName } = response.data;
+
+			notificationController.show({
+				message: `Added ${assetIds.length} to ${albumName}`,
+				type: NotificationType.Info
+			});
+
+			clearSelect();
+
+			goto('/albums/' + id);
+		});
+	};
+
+	const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
+		showAlbumPicker = false;
+		const album = event.detail.album;
+
+		const assetIds = Array.from(getAssets()).map((asset) => asset.id);
+
+		addAssetsToAlbum(album.id, assetIds).then(clearSelect);
+	};
+</script>
+
+<MenuOption
+	on:click={() => (showAlbumPicker = true)}
+	text={shared ? 'Add to Shared Album' : 'Add to Album'}
+/>
+
+{#if showAlbumPicker}
+	<AlbumSelectionModal
+		{shared}
+		on:newAlbum={handleAddToNewAlbum}
+		on:newSharedAlbum={handleAddToNewAlbum}
+		on:album={handleAddToAlbum}
+		on:close={handleHideAlbumPicker}
+	/>
+{/if}

web/src/lib/components/photos-page/menu-options/option-add-to-favorites.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+	import {
+		NotificationType,
+		notificationController
+	} from '$lib/components/shared-components/notification/notification';
+	import { api } from '@api';
+	import { getMenuContext } from '../asset-select-context-menu.svelte';
+	import { OnAssetFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
+
+	export let onAssetFavorite: OnAssetFavorite = (asset, favorite) => {
+		asset.isFavorite = favorite;
+	};
+
+	const { getAssets, clearSelect } = getAssetControlContext();
+	const closeMenu = getMenuContext();
+
+	const handleAddToFavorites = () => {
+		closeMenu();
+
+		let cnt = 0;
+		for (const asset of getAssets()) {
+			if (!asset.isFavorite) {
+				api.assetApi.updateAsset(asset.id, {
+					isFavorite: true
+				});
+				onAssetFavorite(asset, true);
+				cnt = cnt + 1;
+			}
+		}
+
+		notificationController.show({
+			message: `Added ${cnt} to favorites`,
+			type: NotificationType.Info
+		});
+
+		clearSelect();
+	};
+</script>
+
+<MenuOption on:click={handleAddToFavorites} text="Add to Favorites" />

web/src/lib/components/photos-page/menu-options/option-remove-from-favorites.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+	import RemoveFavorite from '../actions/remove-favorite.svelte';
+	import { getMenuContext } from '../asset-select-context-menu.svelte';
+	import { OnAssetFavorite } from '../asset-select-control-bar.svelte';
+
+	export let onAssetFavorite: OnAssetFavorite | undefined = undefined;
+	const closeMenu = getMenuContext();
+</script>
+
+<RemoveFavorite let:handleRemoveFavorite {onAssetFavorite}>
+	<MenuOption
+		on:click={() => {
+			closeMenu();
+			handleRemoveFavorite();
+		}}
+		text="Remove from favorites"
+	/>
+</RemoveFavorite>

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -1,47 +1,37 @@
 <script lang="ts">
-	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-
-	import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
-	import ControlAppBar from '../shared-components/control-app-bar.svelte';
 	import { goto } from '$app/navigation';
-	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+	import { bulkDownload } from '$lib/utils/asset-utils';
+	import { openFileUploadDialog } from '$lib/utils/file-uploader';
+	import { api, AssetResponseDto, SharedLinkResponseDto } from '@api';
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
 	import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
 	import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
-	import { openFileUploadDialog } from '$lib/utils/file-uploader';
-	import { bulkDownload } from '$lib/utils/asset-utils';
-	import Close from 'svelte-material-icons/Close.svelte';
-	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+	import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+	import DownloadFiles from '../photos-page/actions/download-files.svelte';
+	import RemoveFromSharedLink from '../photos-page/actions/remove-from-shared-link.svelte';
+	import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
+	import ControlAppBar from '../shared-components/control-app-bar.svelte';
 	import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
-	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
 	import {
 		notificationController,
 		NotificationType
 	} from '../shared-components/notification/notification';
-	import { locale } from '$lib/stores/preferences.store';
 
 	export let sharedLink: SharedLinkResponseDto;
 	export let isOwned: boolean;
 
-	let assets = sharedLink.assets;
 	let selectedAssets: Set<AssetResponseDto> = new Set();
 
+	$: assets = sharedLink.assets;
 	$: isMultiSelectionMode = selectedAssets.size > 0;
 
 	const clearMultiSelectAssetAssetHandler = () => {
 		selectedAssets = new Set();
 	};
 
-	const downloadAssets = async (isAll: boolean) => {
-		await bulkDownload(
-			'immich-shared',
-			isAll ? assets : Array.from(selectedAssets),
-			() => {
-				isMultiSelectionMode = false;
-				clearMultiSelectAssetAssetHandler();
-			},
-			sharedLink?.key
-		);
+	const downloadAssets = async () => {
+		await bulkDownload('immich-shared', assets, undefined, sharedLink?.key);
 	};
 
 	const handleUploadAssets = async () => {
@@ -65,49 +55,16 @@
 			console.error('handleUploadAssets', e);
 		}
 	};
-
-	const handleRemoveAssetsFromSharedLink = async () => {
-		if (window.confirm('Do you want to remove selected assets from the shared link?')) {
-			await api.assetApi.removeAssetsFromSharedLink(
-				{
-					assetIds: assets.filter((a) => !selectedAssets.has(a)).map((a) => a.id)
-				},
-				sharedLink?.key
-			);
-
-			assets = assets.filter((a) => !selectedAssets.has(a));
-			clearMultiSelectAssetAssetHandler();
-		}
-	};
 </script>
 
 <section class="bg-immich-bg dark:bg-immich-dark-bg">
 	{#if isMultiSelectionMode}
-		<ControlAppBar
-			on:close-button-click={clearMultiSelectAssetAssetHandler}
-			backIcon={Close}
-			tailwindClasses={'bg-white shadow-md'}
-		>
-			<svelte:fragment slot="leading">
-				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-					Selected {selectedAssets.size.toLocaleString($locale)}
-				</p>
-			</svelte:fragment>
-			<svelte:fragment slot="trailing">
-				<CircleIconButton
-					title="Download"
-					on:click={() => downloadAssets(false)}
-					logo={CloudDownloadOutline}
-				/>
-				{#if isOwned}
-					<CircleIconButton
-						title="Remove from album"
-						on:click={handleRemoveAssetsFromSharedLink}
-						logo={DeleteOutline}
-					/>
-				{/if}
-			</svelte:fragment>
-		</ControlAppBar>
+		<AssetSelectControlBar assets={selectedAssets} clearSelect={clearMultiSelectAssetAssetHandler}>
+			<DownloadFiles filename="immich-shared" sharedLinkKey={sharedLink.key} />
+			{#if isOwned}
+				<RemoveFromSharedLink bind:sharedLink allAssets={assets} />
+			{/if}
+		</AssetSelectControlBar>
 	{:else}
 		<ControlAppBar
 			on:close-button-click={() => goto('/photos')}
@@ -139,7 +96,7 @@
 				{#if sharedLink?.allowDownload}
 					<CircleIconButton
 						title="Download"
-						on:click={() => downloadAssets(true)}
+						on:click={downloadAssets}
 						logo={FolderDownloadOutline}
 					/>
 				{/if}