Add ablum feature to web (#352)

* Added album page

* Refactor sidebar

* Added album assets count info

* Added album viewer page

* Refactor album sorting

* Fixed incorrectly showing selected asset in album selection

* Improve fetching speed with prefetch

* Refactor to use ImmichThubmnail component for all

* Update to the latest version of Svelte

* Implement fixed app bar in album viewer

* Added shared user avatar

* Correctly get all owned albums, including shared

web/src/routes/__layout.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
 	import '../app.css';
 
-	import { blur } from 'svelte/transition';
+	import { blur, fade, slide } from 'svelte/transition';
 
 	import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
 	import AnnouncementBox from '$lib/components/shared/announcement-box.svelte';
@@ -40,7 +40,7 @@
 
 <main>
 	{#key url}
-		<div transition:blur={{ duration: 250 }}>
+		<div in:fade={{ duration: 100 }}>
 			<slot />
 			<DownloadPanel />
 			<UploadPanel />

web/src/routes/admin/api/create-user.ts

@@ -1,7 +1,7 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { api } from '@api';
 
-export const post: RequestHandler = async ({ request }) => {
+export const POST: RequestHandler = async ({ request }) => {
 	const form = await request.formData();
 
 	const email = form.get('email');
@@ -13,22 +13,22 @@ export const post: RequestHandler = async ({ request }) => {
 		email: String(email),
 		password: String(password),
 		firstName: String(firstName),
-		lastName: String(lastName),
+		lastName: String(lastName)
 	});
 
 	if (status === 201) {
 		return {
 			status: 201,
 			body: {
-				success: 'Succesfully create user account',
-			},
+				success: 'Succesfully create user account'
+			}
 		};
 	} else {
 		return {
 			status: 400,
 			body: {
-				error: 'Error create user account',
-			},
+				error: 'Error create user account'
+			}
 		};
 	}
 };

web/src/routes/admin/index.svelte

@@ -27,7 +27,7 @@
 
 	import type { ImmichUser } from '$lib/models/immich-user';
 	import { AdminSideBarSelection } from '$lib/models/admin-sidebar-selection';
-	import SideBarButton from '$lib/components/shared/side-bar-button.svelte';
+	import SideBarButton from '$lib/components/shared/side-bar/side-bar-button.svelte';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
 	import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
 	import UserManagement from '$lib/components/admin/user-management.svelte';
@@ -59,7 +59,7 @@
 </script>
 
 <svelte:head>
-	<title>Immich - Administration</title>
+	<title>Administration - Immich</title>
 </svelte:head>
 
 <NavigationBar {user} />

web/src/routes/albums/[albumId].svelte

@@ -0,0 +1,49 @@
+<script context="module" lang="ts">
+	export const prerender = false;
+
+	import type { Load } from '@sveltejs/kit';
+	import { AlbumResponseDto, api } from '@api';
+
+	export const load: Load = async ({ session, params }) => {
+		if (!session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+		const albumId = params['albumId'];
+
+		let album: AlbumResponseDto;
+
+		try {
+			const { data } = await api.albumApi.getAlbumInfo(albumId);
+			album = data;
+		} catch (e) {
+			return {
+				status: 302,
+				redirect: '/albums'
+			};
+		}
+
+		return {
+			status: 200,
+			props: {
+				album: album
+			}
+		};
+	};
+</script>
+
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	import AlbumViewer from '$lib/components/album/album-viewer.svelte';
+
+	export let album: AlbumResponseDto;
+</script>
+
+<svelte:head>
+	<title>{album.albumName} - Immich</title>
+</svelte:head>
+
+<AlbumViewer {album} />

web/src/routes/albums/index.svelte

@@ -0,0 +1,94 @@
+<script context="module" lang="ts">
+	export const prerender = false;
+
+	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+
+	import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
+	import { ImmichUser } from '$lib/models/immich-user';
+	import type { Load } from '@sveltejs/kit';
+	import SideBar from '$lib/components/shared/side-bar/side-bar.svelte';
+	import { AlbumResponseDto, api } from '@api';
+
+	export const load: Load = async ({ session }) => {
+		if (!session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
+		let allAlbums: AlbumResponseDto[] = [];
+		try {
+			const { data } = await api.albumApi.getAllAlbums();
+			allAlbums = data;
+		} catch (e) {
+			console.log('Error [getAllAlbums] ', e);
+		}
+
+		return {
+			status: 200,
+			props: {
+				user: session.user,
+				allAlbums: allAlbums
+			}
+		};
+	};
+</script>
+
+<script lang="ts">
+	import AlbumCard from '$lib/components/album/album-card.svelte';
+	import { goto } from '$app/navigation';
+
+	export let user: ImmichUser;
+	export let allAlbums: AlbumResponseDto[];
+
+	const showAlbum = (event: CustomEvent) => {
+		goto('/albums/' + event.detail.id);
+	};
+</script>
+
+<svelte:head>
+	<title>Albums - Immich</title>
+</svelte:head>
+
+<section>
+	<NavigationBar {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">
+		<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>Albums</p>
+				</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"
+					>
+						<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 allAlbums as album}
+					<a sveltekit:prefetch href={`albums/${album.id}`}> <AlbumCard {album} /></a>
+				{/each}
+			</div>
+		</section>
+	</section>
+</section>

web/src/routes/auth/change-password/index.svelte

@@ -57,7 +57,7 @@
 </script>
 
 <svelte:head>
-	<title>Immich - Change Password</title>
+	<title>Change Password - Immich</title>
 </svelte:head>
 
 <section class="h-screen w-screen flex place-items-center place-content-center">

web/src/routes/auth/change-password/index.ts

@@ -1,13 +1,13 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { api } from '@api';
 
-export const post: RequestHandler = async ({ request, locals }) => {
+export const POST: RequestHandler = async ({ request, locals }) => {
 	if (!locals.user) {
 		return {
 			status: 401,
 			body: {
-				error: 'Unauthorized',
-			},
+				error: 'Unauthorized'
+			}
 		};
 	}
 
@@ -17,22 +17,22 @@ export const post: RequestHandler = async ({ request, locals }) => {
 	const { status } = await api.userApi.updateUser({
 		id: locals.user.id,
 		password: String(password),
-		shouldChangePassword: false,
+		shouldChangePassword: false
 	});
 
 	if (status === 200) {
 		return {
 			status: 200,
 			body: {
-				success: 'Succesfully change password',
-			},
+				success: 'Succesfully change password'
+			}
 		};
 	} else {
 		return {
 			status: 400,
 			body: {
-				error: 'Error change password',
-			},
+				error: 'Error change password'
+			}
 		};
 	}
 };

web/src/routes/auth/login/index.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <svelte:head>
-	<title>Immich - Login</title>
+	<title>Login - Immich</title>
 </svelte:head>
 
 <section class="h-screen w-screen flex place-items-center place-content-center">

web/src/routes/auth/login/index.ts

@@ -2,7 +2,7 @@ import type { RequestHandler } from '@sveltejs/kit';
 import * as cookie from 'cookie';
 import { api } from '@api';
 
-export const post: RequestHandler = async ({ request }) => {
+export const POST: RequestHandler = async ({ request }) => {
 	const form = await request.formData();
 
 	const email = form.get('email');
@@ -11,7 +11,7 @@ export const post: RequestHandler = async ({ request }) => {
 	try {
 		const { data: authUser } = await api.authenticationApi.login({
 			email: String(email),
-			password: String(password),
+			password: String(password)
 		});
 
 		return {
@@ -24,9 +24,9 @@ export const post: RequestHandler = async ({ request }) => {
 					lastName: authUser.lastName,
 					isAdmin: authUser.isAdmin,
 					email: authUser.userEmail,
-					shouldChangePassword: authUser.shouldChangePassword,
+					shouldChangePassword: authUser.shouldChangePassword
 				},
-				success: 'success',
+				success: 'success'
 			},
 			headers: {
 				'Set-Cookie': cookie.serialize(
@@ -37,23 +37,23 @@ export const post: RequestHandler = async ({ request }) => {
 						firstName: authUser.firstName,
 						lastName: authUser.lastName,
 						isAdmin: authUser.isAdmin,
-						email: authUser.userEmail,
+						email: authUser.userEmail
 					}),
 					{
 						path: '/',
 						httpOnly: true,
 						sameSite: 'strict',
-						maxAge: 60 * 60 * 24 * 30,
-					},
-				),
-			},
+						maxAge: 60 * 60 * 24 * 30
+					}
+				)
+			}
 		};
 	} catch (error) {
 		return {
 			status: 400,
 			body: {
-				error: 'Incorrect email or password',
-			},
+				error: 'Incorrect email or password'
+			}
 		};
 	}
 };

web/src/routes/auth/logout.ts

@@ -1,12 +1,12 @@
 import type { RequestHandler } from '@sveltejs/kit';
 
-export const post: RequestHandler = async () => {
+export const POST: RequestHandler = async () => {
 	return {
 		headers: {
-			'Set-Cookie': 'session=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT',
+			'Set-Cookie': 'session=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
 		},
 		body: {
-			ok: true,
-		},
+			ok: true
+		}
 	};
 };

web/src/routes/auth/register/index.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <svelte:head>
-	<title>Immich - Admin Registration</title>
+	<title>Admin Registration - Immich</title>
 </svelte:head>
 
 <section class="h-screen w-screen flex place-items-center place-content-center">

web/src/routes/auth/register/index.ts

@@ -1,7 +1,7 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { api } from '@api';
 
-export const post: RequestHandler = async ({ request }) => {
+export const POST: RequestHandler = async ({ request }) => {
 	const form = await request.formData();
 
 	const email = form.get('email');
@@ -13,22 +13,22 @@ export const post: RequestHandler = async ({ request }) => {
 		email: String(email),
 		password: String(password),
 		firstName: String(firstName),
-		lastName: String(lastName),
+		lastName: String(lastName)
 	});
 
 	if (status === 201) {
 		return {
 			status: 201,
 			body: {
-				success: 'Succesfully create admin account',
-			},
+				success: 'Succesfully create admin account'
+			}
 		};
 	} else {
 		return {
 			status: 400,
 			body: {
-				error: 'Error create admin account',
-			},
+				error: 'Error create admin account'
+			}
 		};
 	}
 };

web/src/routes/index.svelte

@@ -33,7 +33,7 @@
 </script>
 
 <svelte:head>
-	<title>Immich - Welcome 🎉</title>
+	<title>Welcome 🎉 - Immich</title>
 	<meta name="description" content="Immich Web Interface" />
 </svelte:head>
 

web/src/routes/photos/index.svelte

@@ -8,7 +8,7 @@
 		if (!session.user) {
 			return {
 				status: 302,
-				redirect: '/auth/login',
+				redirect: '/auth/login'
 			};
 		}
 
@@ -17,8 +17,8 @@
 		return {
 			status: 200,
 			props: {
-				user: session.user,
-			},
+				user: session.user
+			}
 		};
 	};
 </script>
@@ -27,26 +27,19 @@
 	import type { ImmichUser } from '$lib/models/immich-user';
 
 	import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
-	import SideBarButton from '$lib/components/shared/side-bar-button.svelte';
 	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
-
-	import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
-	import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
-	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { session } from '$app/stores';
 	import { assetsGroupByDate, flattenAssetGroupByDate } from '$lib/stores/assets';
-	import ImmichThumbnail from '$lib/components/asset-viewer/immich-thumbnail.svelte';
+	import ImmichThumbnail from '$lib/components/shared/immich-thumbnail.svelte';
 	import moment from 'moment';
 	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
-	import StatusBox from '$lib/components/shared/status-box.svelte';
 	import { fileUploader } from '$lib/utils/file-uploader';
 	import { AssetResponseDto } from '@api';
+	import SideBar from '$lib/components/shared/side-bar/side-bar.svelte';
 
 	export let user: ImmichUser;
 
-	let selectedAction: AppSideBarSelection;
-
 	let selectedGroupThumbnail: number | null;
 	let isMouseOverGroup: boolean;
 	$: if (isMouseOverGroup == false) {
@@ -57,14 +50,6 @@
 	let currentViewAssetIndex = 0;
 	let currentSelectedAsset: AssetResponseDto;
 
-	const onButtonClicked = (buttonType: CustomEvent) => {
-		selectedAction = buttonType.detail['actionType'] as AppSideBarSelection;
-	};
-
-	onMount(async () => {
-		selectedAction = AppSideBarSelection.PHOTOS;
-	});
-
 	const thumbnailMouseEventHandler = (event: CustomEvent) => {
 		const { selectedGroupIndex }: { selectedGroupIndex: number } = event.detail;
 
@@ -92,7 +77,7 @@
 					const files = Array.from<File>(e.target.files);
 
 					const acceptedFile = files.filter(
-						(e) => e.type.split('/')[0] === 'video' || e.type.split('/')[0] === 'image',
+						(e) => e.type.split('/')[0] === 'video' || e.type.split('/')[0] === 'image'
 					);
 
 					for (const asset of acceptedFile) {
@@ -109,7 +94,7 @@
 </script>
 
 <svelte:head>
-	<title>Immich - Photos</title>
+	<title>Photos - Immich</title>
 </svelte:head>
 
 <section>
@@ -117,22 +102,7 @@
 </section>
 
 <section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
-	<!-- Sidebar -->
-	<section id="sidebar" class="flex flex-col gap-4 pt-8 pr-6">
-		<SideBarButton
-			title="Photos"
-			logo={ImageOutline}
-			actionType={AppSideBarSelection.PHOTOS}
-			isSelected={selectedAction === AppSideBarSelection.PHOTOS}
-			on:selected={onButtonClicked}
-		/>
-
-		<!-- Status Box -->
-
-		<div class="mb-6 mt-auto">
-			<StatusBox />
-		</div>
-	</section>
+	<SideBar />
 
 	<!-- Main Section -->
 	<section class="overflow-y-auto relative">