feat(web): add selected asset on main timeline to album from selection (#926)

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

@@ -9,7 +9,7 @@
 	import { goto } from '$app/navigation';
 	import { downloadAssets } from '$lib/stores/download';
 	import VideoViewer from './video-viewer.svelte';
-	import AlbumSelectionModal from './album-selection-modal.svelte';
+	import AlbumSelectionModal from '../shared-components/album-selection-modal.svelte';
 	import {
 		api,
 		AddAssetsResponseDto,
@@ -300,7 +300,6 @@
 			on:album={handleAddToAlbum}
 			on:close={() => (isShowAlbumPicker = false)}
 		/>
-		<div class="w-full h-full">Hello</div>
 	{/if}
 </section>
 

web/src/lib/components/asset-viewer/album-selection-modal.svelte → web/src/lib/components/shared-components/album-selection-modal.svelte

@@ -2,8 +2,8 @@
 	import { AlbumResponseDto, api } from '@api';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import Plus from 'svelte-material-icons/Plus.svelte';
-	import BaseModal from '../shared-components/base-modal.svelte';
-	import AlbumListItem from './album-list-item.svelte';
+	import BaseModal from './base-modal.svelte';
+	import AlbumListItem from '../asset-viewer/album-list-item.svelte';
 
 	let albums: AlbumResponseDto[] = [];
 	let recentAlbums: AlbumResponseDto[] = [];

web/src/routes/photos/+page.svelte

@@ -2,6 +2,10 @@
 	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+	import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
+	import { goto } from '$app/navigation';
 
 	import type { PageData } from './$types';
 
@@ -15,7 +19,8 @@
 	import Close from 'svelte-material-icons/Close.svelte';
 	import CircleIconButton from '$lib/components/shared-components/circle-icon-button.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-	import { api } from '@api';
+	import Plus from 'svelte-material-icons/Plus.svelte';
+	import { AlbumResponseDto, api } from '@api';
 	import {
 		notificationController,
 		NotificationType
@@ -51,6 +56,59 @@
 			console.error('Error deleteSelectedAssetHandler', e);
 		}
 	};
+
+	let contextMenuPosition = { x: 0, y: 0 };
+	let isShowAddMenu = false;
+	let isShowAlbumPicker = false;
+	let addToSharedAlbum = false;
+
+	const handleShowMenu = (event: CustomEvent) => {
+		contextMenuPosition = {
+			x: event.detail.mouseEvent.x,
+			y: event.detail.mouseEvent.y
+		};
+
+		isShowAddMenu = !isShowAddMenu;
+	};
+
+	const handleShowAlbumPicker = (shared: boolean) => {
+		isShowAddMenu = false;
+		isShowAlbumPicker = true;
+		addToSharedAlbum = shared;
+	};
+
+	const handleAddToNewAlbum = () => {
+		isShowAlbumPicker = false;
+
+		const assetIds = Array.from($selectedAssets).map((asset) => asset.id);
+		api.albumApi.createAlbum({ albumName: 'Untitled', assetIds }).then((response) => {
+			const { id, albumName } = response.data;
+
+			notificationController.show({
+				message: `Added ${assetIds.length} to ${albumName}`,
+				type: NotificationType.Info
+			});
+
+			assetInteractionStore.clearMultiselect();
+
+			goto('/albums/' + id);
+		});
+	};
+
+	const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
+		isShowAlbumPicker = false;
+		const album = event.detail.album;
+
+		const assetIds = Array.from($selectedAssets).map((asset) => asset.id);
+		api.albumApi.addAssetsToAlbum(album.id, { assetIds }).then(({ data: dto }) => {
+			notificationController.show({
+				message: `Added ${dto.successfullyAdded} to ${dto.album?.albumName}`,
+				type: NotificationType.Info
+			});
+
+			assetInteractionStore.clearMultiselect();
+		});
+	};
 </script>
 
 <svelte:head>
@@ -70,6 +128,7 @@
 				</p>
 			</svelte:fragment>
 			<svelte:fragment slot="trailing">
+				<CircleIconButton title="Add" logo={Plus} on:click={handleShowMenu} />
 				<CircleIconButton
 					title="Delete"
 					logo={DeleteOutline}
@@ -83,6 +142,25 @@
 			on:uploadClicked={() => openFileUploadDialog(UploadType.GENERAL)}
 		/>
 	{/if}
+
+	{#if isShowAddMenu}
+		<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAddMenu = false)}>
+			<div class="flex flex-col rounded-lg ">
+				<MenuOption on:click={() => handleShowAlbumPicker(false)} text="Add to Album" />
+				<MenuOption on:click={() => handleShowAlbumPicker(true)} text="Add to Shared Album" />
+			</div>
+		</ContextMenu>
+	{/if}
+
+	{#if isShowAlbumPicker}
+		<AlbumSelectionModal
+			shared={addToSharedAlbum}
+			on:newAlbum={handleAddToNewAlbum}
+			on:newSharedAlbum={handleAddToNewAlbum}
+			on:album={handleAddToAlbum}
+			on:close={() => (isShowAlbumPicker = false)}
+		/>
+	{/if}
 </section>
 
 <section