Migrate SvelteKit to the latest version 431 (#526)

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

@@ -0,0 +1,157 @@
+<script lang="ts">
+	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';
+	import type { PageData } from './$types';
+	import { AlbumResponseDto, api } from '@api';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+
+	export let data: PageData;
+
+	let isShowContextMenu = false;
+	let contextMenuPosition = { x: 0, y: 0 };
+	let targetAlbum: AlbumResponseDto;
+
+	onMount(async () => {
+		const getAllAlbumsRes = await api.albumApi.getAllAlbums();
+		data.albums = getAllAlbumsRes.data;
+
+		// Delete album that has no photos and is named 'Untitled'
+		for (const album of data.albums) {
+			if (album.albumName === 'Untitled' && album.assetCount === 0) {
+				setTimeout(async () => {
+					await autoDeleteAlbum(album);
+					data.albums = data.albums.filter((a) => a.id !== album.id);
+				}, 500);
+			}
+		}
+	});
+
+	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 autoDeleteAlbum = async (album: AlbumResponseDto) => {
+		try {
+			await api.albumApi.deleteAlbum(album.id);
+			return true;
+		} catch (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);
+				data.albums = data.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>
+	<title>Albums - Immich</title>
+</svelte:head>
+
+<section>
+	<NavigationBar user={data.user} on:uploadClicked={() => {}} />
+</section>
+
+<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg ">
+	<SideBar />
+
+	<!-- Main Section -->
+
+	<section class="overflow-y-auto relative immich-scrollbar">
+		<section id="album-content" class="relative pt-8 pl-4 mb-12 bg-immich-bg">
+			<div class="px-4 flex justify-between place-items-center">
+				<div>
+					<p class="font-medium">Albums</p>
+				</div>
+
+				<div>
+					<button on:click={createAlbum} class="immich-text-button text-sm">
+						<span>
+							<PlusBoxOutline size="18" />
+						</span>
+						<p>Create album</p>
+					</button>
+				</div>
+			</div>
+
+			<div class="my-4">
+				<hr />
+			</div>
+
+			<!-- Album Card -->
+			<div class="flex flex-wrap gap-8">
+				{#each data.albums as album}
+					{#key album.id}
+						<a sveltekit:prefetch href={`albums/${album.id}`}>
+							<AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e, album)} />
+						</a>
+					{/key}
+				{/each}
+			</div>
+
+			<!-- Empty Message -->
+			{#if data.albums.length === 0}
+				<div
+					class="border p-5 w-[50%] m-auto mt-10 bg-gray-50 rounded-3xl flex flex-col place-content-center place-items-center"
+				>
+					<img src="/empty-1.svg" alt="Empty shared album" width="500" />
+
+					<p class="text-center text-immich-text-gray-500">
+						Create an album to organize your photos and videos
+					</p>
+				</div>
+			{/if}
+		</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>