fix(web): layout nesting (#1881)

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/routes/(user)/+layout.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { fileUploadHandler } from '$lib/utils/file-uploader';
+	import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
+
+	const dropHandler = async ({ dataTransfer }: DragEvent) => {
+		const files = dataTransfer?.files;
+		if (!files) {
+			return;
+		}
+
+		const filesArray: File[] = Array.from<File>(files);
+		const albumId = ($page.route.id === '/albums/[albumId]' || undefined) && $page.params.albumId;
+
+		await fileUploadHandler(filesArray, albumId);
+	};
+</script>
+
+<slot />
+
+<UploadCover {dropHandler} />

web/src/routes/(user)/albums/+page.server.ts

@@ -0,0 +1,24 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ parent, locals: { api } }) => {
+	try {
+		const { user } = await parent();
+
+		if (!user) {
+			throw Error('User is not logged in');
+		}
+
+		const { data: albums } = await api.albumApi.getAllAlbums();
+
+		return {
+			user: user,
+			albums: albums,
+			meta: {
+				title: 'Albums'
+			}
+		};
+	} catch (e) {
+		throw redirect(302, '/auth/login');
+	}
+}) satisfies PageServerLoad;

web/src/routes/(user)/albums/+page.svelte

@@ -0,0 +1,118 @@
+<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 NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+	import { useAlbums } from './albums.bloc';
+	import empty1Url from '$lib/assets/empty-1.svg';
+
+	export let data: PageData;
+
+	const {
+		albums,
+		isShowContextMenu,
+		contextMenuPosition,
+		createAlbum,
+		deleteSelectedContextAlbum,
+		loadAlbums,
+		showAlbumContextMenu,
+		closeAlbumContextMenu
+	} = useAlbums({ albums: data.albums });
+
+	onMount(loadAlbums);
+
+	const handleCreateAlbum = async () => {
+		const newAlbum = await createAlbum();
+		if (newAlbum) {
+			goto('/albums/' + newAlbum.id);
+		}
+	};
+</script>
+
+<section>
+	<NavigationBar user={data.user} shouldShowUploadButton={false} />
+</section>
+
+<section
+	class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg  dark:bg-immich-dark-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 dark:bg-immich-dark-bg"
+		>
+			<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
+				<div>
+					<p class="font-medium">Albums</p>
+				</div>
+
+				<div>
+					<button
+						on:click={handleCreateAlbum}
+						class="immich-text-button text-sm dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
+					>
+						<span>
+							<PlusBoxOutline size="18" />
+						</span>
+						<p>Create album</p>
+					</button>
+				</div>
+			</div>
+
+			<div class="my-4">
+				<hr class="dark:border-immich-dark-gray" />
+			</div>
+
+			<!-- Album Card -->
+			<div class="flex flex-wrap gap-8">
+				{#each $albums as album}
+					{#key album.id}
+						<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
+							<AlbumCard
+								{album}
+								on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
+							/>
+						</a>
+					{/key}
+				{/each}
+			</div>
+
+			<!-- Empty Message -->
+			{#if $albums.length === 0}
+				<div
+					on:click={handleCreateAlbum}
+					on:keydown={handleCreateAlbum}
+					class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
+				>
+					<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
+
+					<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
+						Create an album to organize your photos and videos
+					</p>
+				</div>
+			{/if}
+		</section>
+	</section>
+
+	<!-- Context Menu -->
+	{#if $isShowContextMenu}
+		<ContextMenu {...$contextMenuPosition} on:clickoutside={closeAlbumContextMenu}>
+			<MenuOption on:click={deleteSelectedContextAlbum}>
+				<span class="flex place-items-center place-content-center gap-2">
+					<DeleteOutline size="18" />
+					<p>Delete album</p>
+				</span>
+			</MenuOption>
+		</ContextMenu>
+	{/if}
+</section>

web/src/routes/(user)/albums/[albumId]/+page.server.ts

@@ -0,0 +1,24 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ parent, params, locals: { api } }) => {
+	const { user } = await parent();
+
+	if (!user) {
+		throw redirect(302, '/auth/login');
+	}
+
+	const albumId = params['albumId'];
+
+	try {
+		const { data: album } = await api.albumApi.getAlbumInfo(albumId);
+		return {
+			album,
+			meta: {
+				title: album.albumName
+			}
+		};
+	} catch (e) {
+		throw redirect(302, '/albums');
+	}
+}) satisfies PageServerLoad;

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<div class="immich-scrollbar">
+	<AlbumViewer album={data.album} />
+</div>

web/src/routes/(user)/albums/[albumId]/photos/[assetId]/+page.ts

@@ -0,0 +1,18 @@
+import { redirect } from '@sveltejs/kit';
+export const prerender = false;
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+	const { user } = await parent();
+	if (!user) {
+		throw redirect(302, '/auth/login');
+	}
+
+	const albumId = params['albumId'];
+
+	if (albumId) {
+		throw redirect(302, `/albums/${albumId}`);
+	} else {
+		throw redirect(302, `/photos`);
+	}
+};

web/src/routes/(user)/albums/__tests__/albums.bloc.spec.ts

@@ -0,0 +1,185 @@
+import { jest, describe, it, expect, beforeEach, afterEach } from '@jest/globals';
+import { useAlbums } from '../albums.bloc';
+import { api, CreateAlbumDto } from '@api';
+import {
+	notificationController,
+	NotificationType
+} from '$lib/components/shared-components/notification/notification';
+import { albumFactory } from '@test-data';
+import { get } from 'svelte/store';
+
+jest.mock('@api');
+
+const apiMock: jest.MockedObject<typeof api> = api as jest.MockedObject<typeof api>;
+
+function mockWindowConfirm(result: boolean) {
+	jest.spyOn(global, 'confirm').mockReturnValueOnce(result);
+}
+
+describe('Albums BLoC', () => {
+	let sut: ReturnType<typeof useAlbums>;
+	const _albums = albumFactory.buildList(5);
+
+	beforeEach(() => {
+		sut = useAlbums({ albums: [..._albums] });
+	});
+
+	afterEach(() => {
+		const notifications = get(notificationController.notificationList);
+
+		notifications.forEach((notification) =>
+			notificationController.removeNotificationById(notification.id)
+		);
+	});
+
+	it('inits with provided albums', () => {
+		const albums = get(sut.albums);
+		expect(albums.length).toEqual(5);
+		expect(albums).toEqual(_albums);
+	});
+
+	it('loads albums from the server', async () => {
+		// TODO: this method currently deletes albums with no assets and albumName === 'Untitled' which might not be the best approach
+		const loadedAlbums = [..._albums, albumFactory.build({ id: 'new_loaded_uuid' })];
+
+		apiMock.albumApi.getAllAlbums.mockResolvedValueOnce({
+			data: loadedAlbums,
+			config: {},
+			headers: {},
+			status: 200,
+			statusText: ''
+		});
+
+		await sut.loadAlbums();
+		const albums = get(sut.albums);
+
+		expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
+		expect(albums).toEqual(loadedAlbums);
+	});
+
+	it('shows error message when it fails loading albums', async () => {
+		apiMock.albumApi.getAllAlbums.mockRejectedValueOnce({}); // TODO: implement APIProblem interface in the server
+
+		expect(get(notificationController.notificationList)).toHaveLength(0);
+		await sut.loadAlbums();
+		const albums = get(sut.albums);
+		const notifications = get(notificationController.notificationList);
+
+		expect(apiMock.albumApi.getAllAlbums).toHaveBeenCalledTimes(1);
+		expect(albums).toEqual(_albums);
+		expect(notifications).toHaveLength(1);
+		expect(notifications[0].type).toEqual(NotificationType.Error);
+	});
+
+	it('creates a new album', async () => {
+		// TODO: we probably shouldn't hardcode the album name "untitled" here and let the user input the album name before creating it
+		const payload: CreateAlbumDto = {
+			albumName: 'Untitled'
+		};
+
+		const returnedAlbum = albumFactory.build();
+
+		apiMock.albumApi.createAlbum.mockResolvedValueOnce({
+			data: returnedAlbum,
+			config: {},
+			headers: {},
+			status: 200,
+			statusText: ''
+		});
+
+		const newAlbum = await sut.createAlbum();
+
+		expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
+		expect(apiMock.albumApi.createAlbum).toHaveBeenCalledWith(payload);
+		expect(newAlbum).toEqual(returnedAlbum);
+	});
+
+	it('shows error message when it fails creating an album', async () => {
+		apiMock.albumApi.createAlbum.mockRejectedValueOnce({});
+
+		const newAlbum = await sut.createAlbum();
+		const notifications = get(notificationController.notificationList);
+
+		expect(apiMock.albumApi.createAlbum).toHaveBeenCalledTimes(1);
+		expect(newAlbum).not.toBeDefined();
+		expect(notifications).toHaveLength(1);
+		expect(notifications[0].type).toEqual(NotificationType.Error);
+	});
+
+	it('selects an album and deletes it', async () => {
+		apiMock.albumApi.deleteAlbum.mockResolvedValueOnce({
+			data: undefined,
+			config: {},
+			headers: {},
+			status: 200,
+			statusText: ''
+		});
+
+		mockWindowConfirm(true);
+
+		const albumToDelete = get(sut.albums)[2]; // delete third album
+		const albumToDeleteId = albumToDelete.id;
+		const contextMenuCoords = { x: 100, y: 150 };
+
+		expect(get(sut.isShowContextMenu)).toBe(false);
+		sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
+		expect(get(sut.contextMenuPosition)).toEqual(contextMenuCoords);
+		expect(get(sut.isShowContextMenu)).toBe(true);
+
+		await sut.deleteSelectedContextAlbum();
+		const updatedAlbums = get(sut.albums);
+
+		expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
+		expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledWith(albumToDeleteId);
+		expect(updatedAlbums).toHaveLength(4);
+		expect(updatedAlbums).not.toContain(albumToDelete);
+		expect(get(sut.isShowContextMenu)).toBe(false);
+	});
+
+	it('shows error message when it fails deleting an album', async () => {
+		mockWindowConfirm(true);
+
+		const albumToDelete = get(sut.albums)[2]; // delete third album
+		const contextMenuCoords = { x: 100, y: 150 };
+
+		apiMock.albumApi.deleteAlbum.mockRejectedValueOnce({});
+
+		sut.showAlbumContextMenu(contextMenuCoords, albumToDelete);
+		const newAlbum = await sut.deleteSelectedContextAlbum();
+		const notifications = get(notificationController.notificationList);
+
+		expect(apiMock.albumApi.deleteAlbum).toHaveBeenCalledTimes(1);
+		expect(newAlbum).not.toBeDefined();
+		expect(notifications).toHaveLength(1);
+		expect(notifications[0].type).toEqual(NotificationType.Error);
+	});
+
+	it('prevents deleting an album when rejecting confirm dialog', async () => {
+		const albumToDelete = get(sut.albums)[2]; // delete third album
+
+		mockWindowConfirm(false);
+
+		sut.showAlbumContextMenu({ x: 100, y: 150 }, albumToDelete);
+		await sut.deleteSelectedContextAlbum();
+
+		expect(apiMock.albumApi.deleteAlbum).not.toHaveBeenCalled();
+	});
+
+	it('prevents deleting an album when not previously selected', async () => {
+		mockWindowConfirm(true);
+
+		await sut.deleteSelectedContextAlbum();
+
+		expect(apiMock.albumApi.deleteAlbum).not.toHaveBeenCalled();
+	});
+
+	it('closes album context menu, deselecting album', () => {
+		const albumToDelete = get(sut.albums)[2]; // delete third album
+		sut.showAlbumContextMenu({ x: 100, y: 150 }, albumToDelete);
+
+		expect(get(sut.isShowContextMenu)).toBe(true);
+
+		sut.closeAlbumContextMenu();
+		expect(get(sut.isShowContextMenu)).toBe(false);
+	});
+});

web/src/routes/(user)/albums/albums.bloc.ts

@@ -0,0 +1,114 @@
+import {
+	notificationController,
+	NotificationType
+} from '$lib/components/shared-components/notification/notification';
+import { AlbumResponseDto, api } from '@api';
+import { OnShowContextMenuDetail } from '$lib/components/album-page/album-card.svelte';
+import { writable, derived, get } from 'svelte/store';
+
+type AlbumsProps = { albums: AlbumResponseDto[] };
+
+export const useAlbums = (props: AlbumsProps) => {
+	const albums = writable([...props.albums]);
+	const contextMenuPosition = writable<OnShowContextMenuDetail>({ x: 0, y: 0 });
+	const contextMenuTargetAlbum = writable<AlbumResponseDto | undefined>();
+	const isShowContextMenu = derived(contextMenuTargetAlbum, ($selectedAlbum) => !!$selectedAlbum);
+
+	async function loadAlbums(): Promise<void> {
+		try {
+			const { data } = await api.albumApi.getAllAlbums();
+			albums.set(data);
+
+			// Delete album that has no photos and is named 'Untitled'
+			for (const album of data) {
+				if (album.albumName === 'Untitled' && album.assetCount === 0) {
+					setTimeout(async () => {
+						await deleteAlbum(album);
+						const _albums = get(albums);
+						albums.set(_albums.filter((a) => a.id !== album.id));
+					}, 500);
+				}
+			}
+		} catch {
+			notificationController.show({
+				message: 'Error loading albums',
+				type: NotificationType.Error
+			});
+		}
+	}
+
+	async function createAlbum(): Promise<AlbumResponseDto | undefined> {
+		try {
+			const { data: newAlbum } = await api.albumApi.createAlbum({
+				albumName: 'Untitled'
+			});
+
+			return newAlbum;
+		} catch {
+			notificationController.show({
+				message: 'Error creating album',
+				type: NotificationType.Error
+			});
+		}
+	}
+
+	async function deleteAlbum(album: AlbumResponseDto): Promise<void> {
+		try {
+			await api.albumApi.deleteAlbum(album.id);
+		} catch {
+			// Do nothing?
+		}
+	}
+
+	async function showAlbumContextMenu(
+		contextMenuDetail: OnShowContextMenuDetail,
+		album: AlbumResponseDto
+	): Promise<void> {
+		contextMenuTargetAlbum.set(album);
+
+		contextMenuPosition.set({
+			x: contextMenuDetail.x,
+			y: contextMenuDetail.y
+		});
+	}
+
+	function closeAlbumContextMenu() {
+		contextMenuTargetAlbum.set(undefined);
+	}
+
+	async function deleteSelectedContextAlbum(): Promise<void> {
+		const albumToDelete = get(contextMenuTargetAlbum);
+		if (!albumToDelete) {
+			return;
+		}
+		if (
+			window.confirm(
+				`Are you sure you want to delete album ${albumToDelete.albumName}? If the album is shared, other users will not be able to access it.`
+			)
+		) {
+			try {
+				await api.albumApi.deleteAlbum(albumToDelete.id);
+				const _albums = get(albums);
+				albums.set(_albums.filter((a) => a.id !== albumToDelete.id));
+			} catch {
+				notificationController.show({
+					message: 'Error deleting album',
+					type: NotificationType.Error
+				});
+			}
+		}
+
+		closeAlbumContextMenu();
+	}
+
+	return {
+		albums,
+		isShowContextMenu,
+		contextMenuPosition,
+		loadAlbums,
+		createAlbum,
+		showAlbumContextMenu,
+		closeAlbumContextMenu,
+		deleteSelectedContextAlbum
+	};
+};

web/src/routes/(user)/favorites/+page.server.ts

@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	try {
+		const { user } = await parent();
+		if (!user) {
+			throw error(400, 'Not logged in');
+		}
+
+		return {
+			user,
+			meta: {
+				title: 'Favorites'
+			}
+		};
+	} catch (e) {
+		console.log('Photo page load error', e);
+		throw redirect(302, '/auth/login');
+	}
+};

web/src/routes/(user)/favorites/+page.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import CircleIconButton from '$lib/components/shared-components/circle-icon-button.svelte';
+	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+	import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import { handleError } from '$lib/utils/handle-error';
+	import { api, AssetResponseDto, SharedLinkType } from '@api';
+	import { onMount } from 'svelte';
+	import Close from 'svelte-material-icons/Close.svelte';
+	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+	import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
+	import Error from '../../+error.svelte';
+	import type { PageData } from './$types';
+	import empty1Url from '$lib/assets/empty-1.svg';
+
+	export let data: PageData;
+
+	let favorites: AssetResponseDto[] = [];
+	let isShowCreateSharedLinkModal = false;
+	let selectedAssets: Set<AssetResponseDto> = new Set();
+
+	$: isMultiSelectionMode = selectedAssets.size > 0;
+
+	onMount(async () => {
+		try {
+			const { data: assets } = await api.assetApi.getAllAssets(true);
+			favorites = assets;
+		} catch {
+			handleError(Error, 'Unable to load favorites');
+		}
+	});
+
+	const clearMultiSelectAssetAssetHandler = () => {
+		selectedAssets = new Set();
+	};
+
+	const handleCreateSharedLink = async () => {
+		isShowCreateSharedLinkModal = true;
+	};
+
+	const handleCloseSharedLinkModal = () => {
+		clearMultiSelectAssetAssetHandler();
+		isShowCreateSharedLinkModal = false;
+	};
+
+	const handleRemoveFavorite = async () => {
+		for (const asset of selectedAssets) {
+			try {
+				await api.assetApi.updateAsset(asset.id, {
+					isFavorite: false
+				});
+				favorites = favorites.filter((a) => a.id != asset.id);
+			} catch {
+				handleError(Error, 'Error updating asset favorite state');
+			}
+		}
+
+		clearMultiSelectAssetAssetHandler();
+	};
+</script>
+
+<section>
+	<NavigationBar user={data.user} shouldShowUploadButton={false} />
+</section>
+
+<section
+	class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg  dark:bg-immich-dark-bg"
+>
+	<SideBar />
+
+	<!-- Multiselection mode app bar -->
+	{#if isMultiSelectionMode}
+		<ControlAppBar
+			on:close-button-click={clearMultiSelectAssetAssetHandler}
+			backIcon={Close}
+			tailwindClasses={'bg-white shadow-md'}
+		>
+			<svelte:fragment slot="leading">
+				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
+					Selected {selectedAssets.size}
+				</p>
+			</svelte:fragment>
+			<svelte:fragment slot="trailing">
+				<CircleIconButton
+					title="Share"
+					logo={ShareVariantOutline}
+					on:click={handleCreateSharedLink}
+				/>
+				<CircleIconButton
+					title="Remove Favorite"
+					logo={StarMinusOutline}
+					on:click={handleRemoveFavorite}
+				/>
+			</svelte:fragment>
+		</ControlAppBar>
+	{/if}
+
+	<!-- Create shared link modal -->
+	{#if isShowCreateSharedLinkModal}
+		<CreateSharedLinkModal
+			sharedAssets={Array.from(selectedAssets)}
+			shareType={SharedLinkType.Individual}
+			on:close={handleCloseSharedLinkModal}
+		/>
+	{/if}
+
+	<!-- Main Section -->
+	<section class="overflow-y-auto relative immich-scrollbar">
+		<section
+			id="favorite-content"
+			class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
+		>
+			<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
+				<div>
+					<p class="font-medium">Favorites</p>
+				</div>
+			</div>
+
+			<div class="my-4">
+				<hr class="dark:border-immich-dark-gray" />
+			</div>
+
+			<!-- Empty Message -->
+			{#if favorites.length === 0}
+				<div
+					class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
+				>
+					<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
+
+					<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
+						Add favorites to quickly find your best pictures and videos
+					</p>
+				</div>
+			{/if}
+
+			<GalleryViewer assets={favorites} bind:selectedAssets />
+		</section>
+	</section>
+</section>

web/src/routes/(user)/favorites/[assetId]/+page.server.ts

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit';
+export const prerender = false;
+
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	const { user } = await parent();
+
+	if (!user) {
+		throw redirect(302, '/auth/login');
+	} else {
+		throw redirect(302, '/favorites');
+	}
+};

web/src/routes/(user)/photos/+page.server.ts

@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	try {
+		const { user } = await parent();
+		if (!user) {
+			throw error(400, 'Not logged in');
+		}
+
+		return {
+			user,
+			meta: {
+				title: 'Photos'
+			}
+		};
+	} catch (e) {
+		console.log('Photo page load error', e);
+		throw redirect(302, '/auth/login');
+	}
+};

web/src/routes/(user)/photos/+page.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+	import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
+	import CircleIconButton from '$lib/components/shared-components/circle-icon-button.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 ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+	import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import {
+		assetInteractionStore,
+		isMultiSelectStoreState,
+		selectedAssets
+	} from '$lib/stores/asset-interaction.store';
+	import { assetStore } from '$lib/stores/assets.store';
+	import { addAssetsToAlbum, bulkDownload } from '$lib/utils/asset-utils';
+	import { openFileUploadDialog } from '$lib/utils/file-uploader';
+	import { AlbumResponseDto, api, SharedLinkType } from '@api';
+	import Close from 'svelte-material-icons/Close.svelte';
+	import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
+	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+	import type { PageData } from './$types';
+	import { locale } from '$lib/stores/preferences.store';
+
+	export let data: PageData;
+	let isShowCreateSharedLinkModal = false;
+	const deleteSelectedAssetHandler = async () => {
+		try {
+			if (
+				window.confirm(
+					`Caution! Are you sure you want to delete ${$selectedAssets.size} assets? This step also deletes assets in the album(s) to which they belong. You can not undo this action!`
+				)
+			) {
+				const { data: deletedAssets } = await api.assetApi.deleteAsset({
+					ids: Array.from($selectedAssets).map((a) => a.id)
+				});
+
+				for (const asset of deletedAssets) {
+					if (asset.status == 'SUCCESS') {
+						assetStore.removeAsset(asset.id);
+					}
+				}
+
+				assetInteractionStore.clearMultiselect();
+			}
+		} catch (e) {
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error deleting assets, check console for more details'
+			});
+			console.error('Error deleteSelectedAssetHandler', e);
+		}
+	};
+
+	let contextMenuPosition = { x: 0, y: 0 };
+	let isShowAddMenu = false;
+	let isShowAlbumPicker = false;
+	let addToSharedAlbum = false;
+
+	const handleShowMenu = ({ x, y }: MouseEvent) => {
+		contextMenuPosition = { x, y };
+		isShowAddMenu = !isShowAddMenu;
+	};
+
+	const handleAddToFavorites = () => {
+		isShowAddMenu = false;
+
+		let cnt = 0;
+		for (const asset of $selectedAssets) {
+			if (!asset.isFavorite) {
+				api.assetApi.updateAsset(asset.id, {
+					isFavorite: true
+				});
+				assetStore.updateAsset(asset.id, true);
+				cnt = cnt + 1;
+			}
+		}
+
+		notificationController.show({
+			message: `Added ${cnt} to favorites`,
+			type: NotificationType.Info
+		});
+
+		assetInteractionStore.clearMultiselect();
+	};
+
+	const handleShowAlbumPicker = (shared: boolean) => {
+		isShowAddMenu = false;
+		isShowAlbumPicker = true;
+		addToSharedAlbum = shared;
+	};
+
+	const handleAddToNewAlbum = (event: CustomEvent) => {
+		isShowAlbumPicker = false;
+
+		const { albumName }: { albumName: string } = event.detail;
+		const assetIds = Array.from($selectedAssets).map((asset) => asset.id);
+		api.albumApi.createAlbum({ albumName, 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);
+
+		addAssetsToAlbum(album.id, assetIds).then(() => {
+			assetInteractionStore.clearMultiselect();
+		});
+	};
+
+	const handleDownloadFiles = async () => {
+		await bulkDownload('immich', Array.from($selectedAssets), () => {
+			assetInteractionStore.clearMultiselect();
+		});
+	};
+
+	const handleCreateSharedLink = async () => {
+		isShowCreateSharedLinkModal = true;
+	};
+
+	const handleCloseSharedLinkModal = () => {
+		assetInteractionStore.clearMultiselect();
+		isShowCreateSharedLinkModal = false;
+	};
+</script>
+
+<section>
+	{#if $isMultiSelectStoreState}
+		<ControlAppBar
+			on:close-button-click={() => assetInteractionStore.clearMultiselect()}
+			backIcon={Close}
+			tailwindClasses={'bg-white shadow-md'}
+		>
+			<svelte:fragment slot="leading">
+				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
+					Selected {$selectedAssets.size.toLocaleString($locale)}
+				</p>
+			</svelte:fragment>
+			<svelte:fragment slot="trailing">
+				<CircleIconButton
+					title="Share"
+					logo={ShareVariantOutline}
+					on:click={handleCreateSharedLink}
+				/>
+				<CircleIconButton
+					title="Download"
+					logo={CloudDownloadOutline}
+					on:click={handleDownloadFiles}
+				/>
+				<CircleIconButton title="Add" logo={Plus} on:click={handleShowMenu} />
+				<CircleIconButton
+					title="Delete"
+					logo={DeleteOutline}
+					on:click={deleteSelectedAssetHandler}
+				/>
+			</svelte:fragment>
+		</ControlAppBar>
+	{:else}
+		<NavigationBar user={data.user} on:uploadClicked={() => openFileUploadDialog()} />
+	{/if}
+
+	{#if isShowAddMenu}
+		<ContextMenu {...contextMenuPosition} on:clickoutside={() => (isShowAddMenu = false)}>
+			<div class="flex flex-col rounded-lg ">
+				<MenuOption on:click={handleAddToFavorites} text="Add to Favorites" />
+				<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}
+
+	{#if isShowCreateSharedLinkModal}
+		<CreateSharedLinkModal
+			sharedAssets={Array.from($selectedAssets)}
+			shareType={SharedLinkType.Individual}
+			on:close={handleCloseSharedLinkModal}
+		/>
+	{/if}
+</section>
+
+<section
+	class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
+>
+	<SideBar />
+	<AssetGrid />
+</section>

web/src/routes/(user)/photos/[assetId]/+page.server.ts

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit';
+export const prerender = false;
+
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	const { user } = await parent();
+
+	if (!user) {
+		throw redirect(302, '/auth/login');
+	} else {
+		throw redirect(302, '/photos');
+	}
+};

web/src/routes/(user)/share/[key]/+error.svelte

@@ -0,0 +1,9 @@
+<svelte:head>
+	<title>Opps! Error - Immich</title>
+</svelte:head>
+
+<section class="w-screen h-screen flex place-items-center place-content-center">
+	<div class="p-20 text-4xl dark:text-immich-dark-primary text-immich-primary">
+		Page not found :/
+	</div>
+</section>

web/src/routes/(user)/share/[key]/+page.server.ts

@@ -0,0 +1,36 @@
+export const prerender = false;
+import { error } from '@sveltejs/kit';
+
+import { getThumbnailUrl } from '$lib/utils/asset-utils';
+import { ThumbnailFormat } from '@api';
+import type { PageServerLoad } from './$types';
+import featurePanelUrl from '$lib/assets/feature-panel.png';
+
+export const load: PageServerLoad = async ({ params, parent, locals: { api } }) => {
+	const { user } = await parent();
+
+	const { key } = params;
+
+	try {
+		const { data: sharedLink } = await api.shareApi.getMySharedLink(key);
+
+		const assetCount = sharedLink.assets.length;
+		const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
+
+		return {
+			sharedLink,
+			meta: {
+				title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
+				description: sharedLink.description || `${assetCount} shared photos & videos.`,
+				imageUrl: assetId
+					? getThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
+					: featurePanelUrl
+			},
+			user
+		};
+	} catch (e) {
+		throw error(404, {
+			message: 'Invalid shared link'
+		});
+	}
+};

web/src/routes/(user)/share/[key]/+page.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+	import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
+	import { AlbumResponseDto, SharedLinkType } from '@api';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	const { sharedLink } = data;
+
+	let album: AlbumResponseDto | null = null;
+	let isOwned = data.user ? data.user.id === sharedLink.userId : false;
+	if (sharedLink.album) {
+		album = { ...sharedLink.album, assets: sharedLink.assets };
+	}
+</script>
+
+{#if sharedLink.type == SharedLinkType.Album && album}
+	<div class="immich-scrollbar">
+		<AlbumViewer {album} {sharedLink} />
+	</div>
+{/if}
+
+{#if sharedLink.type == SharedLinkType.Individual}
+	<div class="immich-scrollbar">
+		<IndividualSharedViewer {sharedLink} {isOwned} />
+	</div>
+{/if}

web/src/routes/(user)/share/[key]/photos/[assetId]/+page.server.ts

@@ -0,0 +1,18 @@
+export const prerender = false;
+
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ params, locals: { api } }) => {
+	try {
+		const { key, assetId } = params;
+		const { data: asset } = await api.assetApi.getAssetById(assetId, key);
+
+		if (!asset) {
+			return error(404, 'Asset not found');
+		}
+		return { asset, key };
+	} catch (e) {
+		console.log('Error', e);
+	}
+}) satisfies PageServerLoad;

web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
+	import type { PageData } from './$types';
+	import { goto } from '$app/navigation';
+	export let data: PageData;
+</script>
+
+{#if data.asset && data.key}
+	<AssetViewer
+		asset={data.asset}
+		publicSharedKey={data.key}
+		on:navigate-previous={() => null}
+		on:navigate-next={() => null}
+		showNavigation={false}
+		on:close={() => goto(`/share/${data.key}`)}
+	/>
+{/if}

web/src/routes/(user)/sharing/+page.server.ts

@@ -0,0 +1,25 @@
+export const prerender = false;
+
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ parent, locals: { api } }) => {
+	try {
+		const { user } = await parent();
+		if (!user) {
+			throw redirect(302, '/auth/login');
+		}
+
+		const { data: sharedAlbums } = await api.albumApi.getAllAlbums(true);
+
+		return {
+			user: user,
+			sharedAlbums,
+			meta: {
+				title: 'Albums'
+			}
+		};
+	} catch (e) {
+		throw redirect(302, '/auth/login');
+	}
+}) satisfies PageServerLoad;

web/src/routes/(user)/sharing/+page.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
+	import Link from 'svelte-material-icons/Link.svelte';
+
+	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
+	import { goto } from '$app/navigation';
+	import { api } from '@api';
+	import type { PageData } from './$types';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import empty2Url from '$lib/assets/empty-2.svg';
+
+	export let data: PageData;
+
+	const createSharedAlbum = async () => {
+		try {
+			const { data: newAlbum } = await api.albumApi.createAlbum({
+				albumName: 'Untitled'
+			});
+
+			goto('/albums/' + newAlbum.id);
+		} catch (e) {
+			notificationController.show({
+				message: 'Error creating album, check console for more details',
+				type: NotificationType.Error
+			});
+
+			console.log('Error [createAlbum] ', e);
+		}
+	};
+</script>
+
+<section>
+	<NavigationBar user={data.user} shouldShowUploadButton={false} />
+</section>
+
+<section
+	class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
+>
+	<SideBar />
+
+	<section class="overflow-y-auto relative">
+		<section
+			id="album-content"
+			class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
+		>
+			<!-- Main Section -->
+			<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
+				<div>
+					<p class="font-medium">Sharing</p>
+				</div>
+
+				<div class="flex">
+					<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 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
+					>
+						<span>
+							<PlusBoxOutline size="18" />
+						</span>
+						<p>Create shared album</p>
+					</button>
+
+					<button
+						on:click={() => goto('/sharing/sharedlinks')}
+						class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
+					>
+						<span>
+							<Link size="18" />
+						</span>
+						<p>Shared links</p>
+					</button>
+				</div>
+			</div>
+
+			<div class="my-4">
+				<hr class="dark:border-immich-dark-gray" />
+			</div>
+
+			<!-- Share Album List -->
+			<div class="w-full flex flex-col place-items-center">
+				{#each data.sharedAlbums as album}
+					<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
+						<SharedAlbumListTile {album} user={data.user} />
+					</a>
+				{/each}
+			</div>
+
+			<!-- Empty List -->
+			{#if data.sharedAlbums.length === 0}
+				<div
+					class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
+				>
+					<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
+					<p class="text-center text-immich-text-gray-500">
+						Create a shared album to share photos and videos with people in your network
+					</p>
+				</div>
+			{/if}
+		</section>
+	</section>
+</section>

web/src/routes/(user)/sharing/sharedlinks/+page.server.ts

@@ -0,0 +1,21 @@
+import { redirect } from '@sveltejs/kit';
+export const prerender = false;
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	try {
+		const { user } = await parent();
+		if (!user) {
+			throw redirect(302, '/auth/login');
+		}
+
+		return {
+			user,
+			meta: {
+				title: 'Shared Links'
+			}
+		};
+	} catch (e) {
+		throw redirect(302, '/auth/login');
+	}
+};

web/src/routes/(user)/sharing/sharedlinks/+page.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+
+	import { api, SharedLinkResponseDto } from '@api';
+	import { goto } from '$app/navigation';
+	import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
+	import {
+		notificationController,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { onMount } from 'svelte';
+	import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+
+	let sharedLinks: SharedLinkResponseDto[] = [];
+	let showEditForm = false;
+	let editSharedLink: SharedLinkResponseDto;
+
+	onMount(async () => {
+		sharedLinks = await getSharedLinks();
+	});
+
+	const getSharedLinks = async () => {
+		const { data: sharedLinks } = await api.shareApi.getAllSharedLinks();
+
+		return sharedLinks;
+	};
+
+	const handleDeleteLink = async (linkId: string) => {
+		if (window.confirm('Do you want to delete the shared link? ')) {
+			try {
+				await api.shareApi.removeSharedLink(linkId);
+				notificationController.show({
+					message: 'Shared link deleted',
+					type: NotificationType.Info
+				});
+
+				sharedLinks = await getSharedLinks();
+			} catch (e) {
+				console.error(e);
+				notificationController.show({
+					message: 'Failed to delete shared link',
+					type: NotificationType.Error
+				});
+			}
+		}
+	};
+
+	const handleEditLink = async (id: string) => {
+		const { data } = await api.shareApi.getSharedLinkById(id);
+		editSharedLink = data;
+		showEditForm = true;
+	};
+
+	const handleEditDone = async () => {
+		sharedLinks = await getSharedLinks();
+		showEditForm = false;
+	};
+
+	const handleCopy = async (key: string) => {
+		const link = `${window.location.origin}/share/${key}`;
+		await navigator.clipboard.writeText(link);
+		notificationController.show({
+			message: 'Link copied to clipboard',
+			type: NotificationType.Info
+		});
+	};
+</script>
+
+<ControlAppBar backIcon={ArrowLeft} on:close-button-click={() => goto('/sharing')}>
+	<svelte:fragment slot="leading">Shared links</svelte:fragment>
+</ControlAppBar>
+
+<section class="flex flex-col  pb-[120px] mt-[120px]">
+	<div class="w-[50%] m-auto mb-4 dark:text-immich-gray">
+		<p>Manage shared links</p>
+	</div>
+	{#if sharedLinks.length === 0}
+		<div
+			class="w-[50%] m-auto bg-gray-100 flex place-items-center place-content-center rounded-lg p-12"
+		>
+			<p>You don't have any shared links</p>
+		</div>
+	{:else}
+		<div class="flex flex-col w-[50%] m-auto">
+			{#each sharedLinks as link (link.id)}
+				<SharedLinkCard
+					{link}
+					on:delete={() => handleDeleteLink(link.id)}
+					on:edit={() => handleEditLink(link.id)}
+					on:copy={() => handleCopy(link.key)}
+				/>
+			{/each}
+		</div>
+	{/if}
+</section>
+
+{#if showEditForm}
+	<CreateSharedLinkModal
+		editingLink={editSharedLink}
+		shareType={editSharedLink.type}
+		album={editSharedLink.album}
+		on:close={handleEditDone}
+	/>
+{/if}

web/src/routes/(user)/user-settings/+page.server.ts

@@ -0,0 +1,21 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	try {
+		const { user } = await parent();
+
+		if (!user) {
+			throw Error('User is not logged in');
+		}
+
+		return {
+			user,
+			meta: {
+				title: 'Settings'
+			}
+		};
+	} catch (e) {
+		throw redirect(302, '/auth/login');
+	}
+};

web/src/routes/(user)/user-settings/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<section>
+	<NavigationBar user={data.user} shouldShowUploadButton={false} />
+</section>
+
+<section
+	class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
+>
+	<SideBar />
+
+	<section class="overflow-y-auto ">
+		<div
+			id="user-setting-title"
+			class="pt-10 fixed w-full z-10 bg-immich-bg dark:bg-immich-dark-bg"
+		>
+			<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
+				User Settings
+			</h1>
+			<hr class="dark:border-immich-dark-gray" />
+		</div>
+
+		<section id="user-setting-content" class="pt-[85px] flex place-content-center">
+			<section class="w-[800px] pt-5">
+				<UserSettingsList user={data.user} />
+			</section>
+		</section>
+	</section>
+</section>