Implement album creation on web (#365)

* Added album creation button functionality

* Added input for album title

* Added select photos button

* Added page to select assets

* Show photo selection timeline

* Implemented update album name mechanism:

* Added selection mechanism

* Added selection mechanism with existing assets in album

* Refactored and added comments

* Refactored and added comments - 2

* Refactor album app bar

* Added modal for select user

* Implemented choose users

* Added additional share user button

* Added rule to show add users button

web/src/routes/albums/index.svelte

@@ -17,10 +17,10 @@
 			};
 		}
 
-		let allAlbums: AlbumResponseDto[] = [];
+		let albums: AlbumResponseDto[] = [];
 		try {
 			const { data } = await api.albumApi.getAllAlbums();
-			allAlbums = data;
+			albums = data;
 		} catch (e) {
 			console.log('Error [getAllAlbums] ', e);
 		}
@@ -29,7 +29,7 @@
 			status: 200,
 			props: {
 				user: session.user,
-				allAlbums: allAlbums
+				albums: albums
 			}
 		};
 	};
@@ -38,12 +38,47 @@
 <script lang="ts">
 	import AlbumCard from '$lib/components/album-page/album-card.svelte';
 	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
 
 	export let user: ImmichUser;
-	export let allAlbums: AlbumResponseDto[];
+	export let albums: AlbumResponseDto[];
 
-	const showAlbum = (event: CustomEvent) => {
-		goto('/albums/' + event.detail.id);
+	onMount(async () => {
+		const { data } = await api.albumApi.getAllAlbums();
+		albums = data;
+
+		// 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);
+
+				if (isDeleted) {
+					albums = albums.filter((a) => a.id !== album.id);
+				}
+			}
+		}
+	});
+
+	const createAlbum = async () => {
+		try {
+			const { data: newAlbum } = await api.albumApi.createAlbum({
+				albumName: 'Untitled'
+			});
+
+			goto('/albums/' + newAlbum.id);
+		} catch (e) {
+			console.log('Error [createAlbum] ', e);
+		}
+	};
+
+	const deleteAlbum = async (album: AlbumResponseDto) => {
+		try {
+			await api.albumApi.deleteAlbum(album.id);
+			return true;
+		} catch (e) {
+			console.log('Error [deleteAlbum] ', e);
+			return false;
+		}
 	};
 </script>
 
@@ -68,9 +103,7 @@
 				</div>
 
 				<div>
-					<button
-						class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700"
-					>
+					<button on:click={createAlbum} class="immich-text-button text-sm">
 						<span>
 							<PlusBoxOutline size="18" />
 						</span>
@@ -85,8 +118,10 @@
 
 			<!-- Album Card -->
 			<div class="flex flex-wrap gap-8">
-				{#each allAlbums as album}
-					<a sveltekit:prefetch href={`albums/${album.id}`}> <AlbumCard {album} /></a>
+				{#each albums as album}
+					<a sveltekit:prefetch href={`albums/${album.id}`}>
+						<AlbumCard {album} />
+					</a>
 				{/each}
 			</div>
 		</section>

web/src/routes/photos/index.svelte

@@ -173,7 +173,7 @@
 								<ImmichThumbnail
 									{asset}
 									on:mouseEvent={thumbnailMouseEventHandler}
-									on:viewAsset={viewAssetHandler}
+									on:click={viewAssetHandler}
 									{groupIndex}
 								/>
 							{/each}

web/src/routes/sharing/index.svelte

@@ -28,6 +28,28 @@
 			}
 		};
 	};
+
+	const createSharedAlbum = async () => {
+		try {
+			const { data: newAlbum } = await api.albumApi.createAlbum({
+				albumName: 'Untitled'
+			});
+
+			goto('/albums/' + newAlbum.id);
+		} catch (e) {
+			console.log('Error [createAlbum] ', e);
+		}
+	};
+
+	const deleteAlbum = async (album: AlbumResponseDto) => {
+		try {
+			await api.albumApi.deleteAlbum(album.id);
+			return true;
+		} catch (e) {
+			console.log('Error [deleteAlbum] ', e);
+			return false;
+		}
+	};
 </script>
 
 <script lang="ts">
@@ -36,6 +58,7 @@
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import AlbumCard from '$lib/components/album-page/album-card.svelte';
 	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
+	import { goto } from '$app/navigation';
 
 	export let user: UserResponseDto;
 	export let sharedAlbums: AlbumResponseDto[];
@@ -62,6 +85,7 @@
 
 				<div>
 					<button
+						on:click={createSharedAlbum}
 						class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700"
 					>
 						<span>