Delete album on web (#373)

* Show context menu

* Show context menu at the correct location

* Implement delete album button

* Delete album within album viewer

web/src/routes/albums/index.svelte

@@ -39,10 +39,17 @@
 	import AlbumCard from '$lib/components/album-page/album-card.svelte';
 	import { goto } from '$app/navigation';
 	import { onMount } from '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 DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
 
 	export let user: ImmichUser;
 	export let albums: AlbumResponseDto[];
 
+	let isShowContextMenu = false;
+	let contextMenuPosition = { x: 0, y: 0 };
+	let targetAlbum: AlbumResponseDto;
+
 	onMount(async () => {
 		const { data } = await api.albumApi.getAllAlbums();
 		albums = data;
@@ -50,7 +57,7 @@
 		// Delete album that has no photos and is named 'Untitled'
 		for (const album of albums) {
 			if (album.albumName === 'Untitled' && album.assets.length === 0) {
-				const isDeleted = await deleteAlbum(album);
+				const isDeleted = await autoDeleteAlbum(album);
 
 				if (isDeleted) {
 					albums = albums.filter((a) => a.id !== album.id);
@@ -71,15 +78,43 @@
 		}
 	};
 
-	const deleteAlbum = async (album: AlbumResponseDto) => {
+	const autoDeleteAlbum = async (album: AlbumResponseDto) => {
 		try {
 			await api.albumApi.deleteAlbum(album.id);
 			return true;
 		} catch (e) {
-			console.log('Error [deleteAlbum] ', e);
+			console.log('Error [autoDeleteAlbum] ', e);
 			return false;
 		}
 	};
+
+	const userDeleteMenu = async () => {
+		if (
+			window.confirm(
+				`Are you sure you want to delete album ${targetAlbum.albumName}? If the album is shared, other users will not be able to access it.`
+			)
+		) {
+			try {
+				await api.albumApi.deleteAlbum(targetAlbum.id);
+				albums = albums.filter((a) => a.id !== targetAlbum.id);
+			} catch (e) {
+				console.log('Error [userDeleteMenu] ', e);
+			}
+		}
+
+		isShowContextMenu = false;
+	};
+
+	const showAlbumContextMenu = (event: CustomEvent, album: AlbumResponseDto) => {
+		targetAlbum = album;
+
+		contextMenuPosition = {
+			x: event.detail.x,
+			y: event.detail.y
+		};
+
+		isShowContextMenu = !isShowContextMenu;
+	};
 </script>
 
 <svelte:head>
@@ -119,11 +154,25 @@
 			<!-- Album Card -->
 			<div class="flex flex-wrap gap-8">
 				{#each albums as album}
-					<a sveltekit:prefetch href={`albums/${album.id}`}>
-						<AlbumCard {album} />
-					</a>
+					{#key album.id}
+						<a sveltekit:prefetch href={`albums/${album.id}`}>
+							<AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e, album)} />
+						</a>
+					{/key}
 				{/each}
 			</div>
 		</section>
 	</section>
+
+	<!-- Context Menu -->
+	{#if isShowContextMenu}
+		<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowContextMenu = false)}>
+			<MenuOption on:click={userDeleteMenu}>
+				<span class="flex place-items-center place-content-center gap-2">
+					<DeleteOutline size="18" />
+					<p>Delete album</p>
+				</span>
+			</MenuOption>
+		</ContextMenu>
+	{/if}
 </section>