refactor(web): common layout for user pages (#1995)

* refactor(web): common layout for user pages

* remove unused imports

web/src/lib/components/layouts/user-page-layout.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { openFileUploadDialog } from '$lib/utils/file-uploader';
+	import type { UserResponseDto } from '@api';
+	import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
+	import SideBar from '../shared-components/side-bar/side-bar.svelte';
+
+	export let user: UserResponseDto;
+	export let hideNavbar = false;
+	export let showUploadButton = false;
+	export let title: string | undefined = undefined;
+</script>
+
+<header>
+	{#if !hideNavbar}
+		<NavigationBar
+			{user}
+			shouldShowUploadButton={showUploadButton}
+			on:uploadClicked={() => openFileUploadDialog()}
+		/>
+	{/if}
+
+	<slot name="header" />
+</header>
+
+<main
+	class="grid grid-cols-[250px_auto] relative pt-[4.25rem] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
+>
+	<SideBar />
+
+	<slot name="content">
+		<section class="my-8 mx-4 bg-immich-bg dark:bg-immich-dark-bg">
+			{#if title}
+				<div class="flex justify-between place-items-center dark:text-immich-dark-fg px-4 h-10">
+					<p class="font-medium">{title}</p>
+
+					<slot name="buttons" />
+				</div>
+
+				<div class="my-4">
+					<hr class="dark:border-immich-dark-gray" />
+				</div>
+			{/if}
+
+			<slot />
+		</section>
+	</slot>
+</main>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -40,14 +40,14 @@
 
 <section
 	id="dashboard-navbar"
-	class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
+	class="fixed h-[4.25rem] w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
 >
 	<div
 		class="grid grid-cols-[250px_auto] border-b dark:border-b-immich-dark-gray items-center py-2"
 	>
 		<a
 			data-sveltekit-preload-data="hover"
-			class="flex gap-2 px-6 place-items-center hover:cursor-pointer"
+			class="flex gap-2 mx-6 place-items-center"
 			href={AppRoute.PHOTOS}
 		>
 			<ImmichLogo height="35" width="35" />

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -25,7 +25,7 @@
 
 <form
 	autocomplete="off"
-	class="relative text-base"
+	class="relative text-sm"
 	action={AppRoute.SEARCH}
 	on:reset={() => (value = '')}
 	on:submit|preventDefault={onSearch}

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

@@ -1,14 +1,13 @@
+import { AppRoute } from '$lib/constants';
 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');
-		}
+export const load = (async ({ locals: { api, user } }) => {
+	if (!user) {
+		throw redirect(302, AppRoute.AUTH_LOGIN);
+	}
 
+	try {
 		const { data: albums } = await api.albumApi.getAllAlbums();
 
 		return {
@@ -19,6 +18,6 @@ export const load = (async ({ parent, locals: { api } }) => {
 			}
 		};
 	} catch (e) {
-		throw redirect(302, '/auth/login');
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
 }) satisfies PageServerLoad;

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

@@ -5,11 +5,10 @@
 	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';
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 
 	export let data: PageData;
 
@@ -31,84 +30,57 @@
 	};
 </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 pr-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
+<UserPageLayout user={data.user} title={data.meta.title}>
+	<div slot="buttons">
+		<button
+			on:click={handleCreateAlbum}
+			class="immich-text-button text-sm dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
 		>
-			<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>
+			<span>
+				<PlusBoxOutline size="18" />
+			</span>
+			<p>Create album</p>
+		</button>
+	</div>
 
-			<div class="my-4">
-				<hr class="dark:border-immich-dark-gray" />
-			</div>
+	<!-- Album Card -->
+	<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] 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>
 
-			<!-- Album Card -->
-			<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] 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>
+	<!-- 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" />
 
-	<!-- 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>
+			<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>
+</UserPageLayout>
+
+<!-- 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}

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

@@ -1,11 +1,10 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load = (async ({ parent, params, locals: { api } }) => {
-	const { user } = await parent();
-
+export const load = (async ({ params, locals: { api, user } }) => {
 	if (!user) {
-		throw redirect(302, '/auth/login');
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
 
 	const albumId = params['albumId'];
@@ -19,6 +18,6 @@ export const load = (async ({ parent, params, locals: { api } }) => {
 			}
 		};
 	} catch (e) {
-		throw redirect(302, '/albums');
+		throw redirect(302, AppRoute.ALBUMS);
 	}
 }) satisfies PageServerLoad;

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 	import ImmichThumbnail from '$lib/components/shared-components/immich-thumbnail.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 { AppRoute } from '$lib/constants';
 	import { AssetTypeEnum, SearchExploreItem } from '@api';
 	import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
@@ -39,135 +38,109 @@
 	places = places.slice(0, MAX_ITEMS);
 </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 immich-scrollbar">
-		<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">
+<UserPageLayout user={data.user} title={data.meta.title}>
+	<div class="mx-4 flex flex-col">
+		{#if places.length > 0}
+			<div class="mb-6 mt-2">
 				<div>
-					<p class="font-medium">Explore</p>
+					<p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
+				</div>
+				<div class="flex flex-row flex-wrap gap-4">
+					{#each places as item}
+						<a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
+							<div class="filter brightness-75 rounded-xl overflow-hidden">
+								<ImmichThumbnail
+									isRoundedCorner={true}
+									thumbnailSize={156}
+									asset={item.data}
+									readonly={true}
+								/>
+							</div>
+							<span
+								class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+							>
+								{item.value}
+							</span>
+						</a>
+					{/each}
 				</div>
 			</div>
+		{/if}
 
-			<div class="my-4">
-				<hr class="dark:border-immich-dark-gray" />
+		{#if things.length > 0}
+			<div class="mb-6 mt-2">
+				<div>
+					<p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
+				</div>
+				<div class="flex flex-row flex-wrap gap-4">
+					{#each things as item}
+						<a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
+							<div class="filter brightness-75 rounded-xl overflow-hidden">
+								<ImmichThumbnail
+									isRoundedCorner={true}
+									thumbnailSize={156}
+									asset={item.data}
+									readonly={true}
+								/>
+							</div>
+							<span
+								class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+							>
+								{item.value}
+							</span>
+						</a>
+					{/each}
+				</div>
 			</div>
+		{/if}
 
-			<div class="mx-4 flex flex-col">
-				{#if places.length > 0}
-					<div class="mb-6 mt-2">
-						<div>
-							<p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
-						</div>
-						<div class="flex flex-row flex-wrap gap-4">
-							{#each places as item}
-								<a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
-									<div class="filter brightness-75 rounded-xl overflow-hidden">
-										<ImmichThumbnail
-											isRoundedCorner={true}
-											thumbnailSize={156}
-											asset={item.data}
-											readonly={true}
-										/>
-									</div>
-									<span
-										class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
-									>
-										{item.value}
-									</span>
-								</a>
-							{/each}
-						</div>
-					</div>
-				{/if}
+		<hr class="dark:border-immich-dark-gray mb-4" />
 
-				{#if things.length > 0}
-					<div class="mb-6 mt-2">
-						<div>
-							<p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
-						</div>
-						<div class="flex flex-row flex-wrap gap-4">
-							{#each things as item}
-								<a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
-									<div class="filter brightness-75 rounded-xl overflow-hidden">
-										<ImmichThumbnail
-											isRoundedCorner={true}
-											thumbnailSize={156}
-											asset={item.data}
-											readonly={true}
-										/>
-									</div>
-									<span
-										class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
-									>
-										{item.value}
-									</span>
-								</a>
-							{/each}
-						</div>
-					</div>
-				{/if}
-
-				<hr class="dark:border-immich-dark-gray mb-4" />
-
-				<div
-					class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8"
-				>
-					<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
-						<p class="text-sm">YOUR ACTIVITY</p>
-						<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
-							<a
-								href={AppRoute.FAVORITES}
-								class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
-								draggable="false"
-							>
-								<StarOutline size={24} />
-								<span>Favorites</span>
-							</a>
-							<a
-								href="/search?recent=true"
-								class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
-								draggable="false"
-							>
-								<ClockOutline size={24} />
-								<span>Recently added</span>
-							</a>
-						</div>
-					</div>
-					<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
-						<p class="text-sm">CATEGORIES</p>
-						<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
-							<a
-								href="/search?type={AssetTypeEnum.Video}"
-								class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
-							>
-								<PlayCircleOutline size={24} />
-								<span>Videos</span>
-							</a>
-							<div>
-								<a
-									href="/search?motion=true"
-									class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
-								>
-									<MotionPlayOutline size={24} />
-									<span>Motion photos</span>
-								</a>
-							</div>
-						</div>
+		<div
+			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8"
+		>
+			<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
+				<p class="text-sm">YOUR ACTIVITY</p>
+				<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
+					<a
+						href={AppRoute.FAVORITES}
+						class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
+						draggable="false"
+					>
+						<StarOutline size={24} />
+						<span>Favorites</span>
+					</a>
+					<a
+						href="/search?recent=true"
+						class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
+						draggable="false"
+					>
+						<ClockOutline size={24} />
+						<span>Recently added</span>
+					</a>
+				</div>
+			</div>
+			<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
+				<p class="text-sm">CATEGORIES</p>
+				<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
+					<a
+						href="/search?type={AssetTypeEnum.Video}"
+						class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
+					>
+						<PlayCircleOutline size={24} />
+						<span>Videos</span>
+					</a>
+					<div>
+						<a
+							href="/search?motion=true"
+							class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
+						>
+							<MotionPlayOutline size={24} />
+							<span>Motion photos</span>
+						</a>
 					</div>
 				</div>
 			</div>
-		</section>
-	</section>
-</section>
+		</div>
+	</div>
+</UserPageLayout>

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

@@ -1,21 +1,16 @@
 import type { PageServerLoad } from './$types';
-import { redirect, error } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
+import { AppRoute } from '$lib/constants';
 
-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');
+export const load = (async ({ locals: { user } }) => {
+	if (!user) {
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
-};
+
+	return {
+		user,
+		meta: {
+			title: 'Favorites'
+		}
+	};
+}) satisfies PageServerLoad;

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

@@ -3,8 +3,6 @@
 	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';
@@ -12,15 +10,16 @@
 	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;
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+	import type { PageData } from './$types';
 
 	let favorites: AssetResponseDto[] = [];
 	let isShowCreateSharedLinkModal = false;
 	let selectedAssets: Set<AssetResponseDto> = new Set();
 
+	export let data: PageData;
+
 	$: isMultiSelectionMode = selectedAssets.size > 0;
 
 	onMount(async () => {
@@ -61,81 +60,57 @@
 	};
 </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}
+<!-- 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}
+
+<UserPageLayout user={data.user} title={data.meta.title} hideNavbar={isMultiSelectionMode}>
+	<section>
+		<!-- 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>
-			</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>
+		{/if}
 
-			<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>
+		<GalleryViewer assets={favorites} bind:selectedAssets />
 	</section>
-</section>
+</UserPageLayout>

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

@@ -1,21 +1,16 @@
 import type { PageServerLoad } from './$types';
-import { redirect, error } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
+import { AppRoute } from '$lib/constants';
 
-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');
+export const load = (async ({ locals: { user } }) => {
+	if (!user) {
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
-};
+
+	return {
+		user,
+		meta: {
+			title: 'Photos'
+		}
+	};
+}) satisfies PageServerLoad;

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

@@ -7,12 +7,10 @@
 	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,
@@ -20,17 +18,18 @@
 	} 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';
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+	import type { PageData } from './$types';
 
 	export let data: PageData;
+
 	let isShowCreateSharedLinkModal = false;
 	const deleteSelectedAssetHandler = async () => {
 		try {
@@ -144,73 +143,68 @@
 	};
 </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>
+<UserPageLayout user={data.user} hideNavbar={$isMultiSelectStoreState} showUploadButton>
+	<svelte:fragment slot="header">
+		{#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>
+		{/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}
+	</svelte:fragment>
+
+	<AssetGrid slot="content" />
+</UserPageLayout>

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

@@ -1,14 +1,10 @@
-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();
-
+export const load = (async ({ params, locals: { api } }) => {
 	const { key } = params;
 
 	try {
@@ -25,12 +21,11 @@ export const load: PageServerLoad = async ({ params, parent, locals: { api } })
 				imageUrl: assetId
 					? getThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
 					: featurePanelUrl
-			},
-			user
+			}
 		};
 	} catch (e) {
 		throw error(404, {
 			message: 'Invalid shared link'
 		});
 	}
-};
+}) satisfies PageServerLoad;

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

@@ -1,25 +1,23 @@
-export const prerender = false;
-
+import { AppRoute } from '$lib/constants';
 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');
-		}
+export const load = (async ({ locals: { api, user } }) => {
+	if (!user) {
+		throw redirect(302, AppRoute.AUTH_LOGIN);
+	}
 
+	try {
 		const { data: sharedAlbums } = await api.albumApi.getAllAlbums(true);
 
 		return {
-			user: user,
+			user,
 			sharedAlbums,
 			meta: {
 				title: 'Albums'
 			}
 		};
 	} catch (e) {
-		throw redirect(302, '/auth/login');
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
 }) satisfies PageServerLoad;

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

@@ -1,9 +1,6 @@
 <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';
@@ -13,6 +10,7 @@
 		NotificationType
 	} from '$lib/components/shared-components/notification/notification';
 	import empty2Url from '$lib/assets/empty-2.svg';
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 
 	export let data: PageData;
 
@@ -34,73 +32,49 @@
 	};
 </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"
+<UserPageLayout user={data.user} title={data.meta.title}>
+	<div class="flex" slot="buttons">
+		<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"
 		>
-			<!-- 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>
+			<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>
+		<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 class="my-4">
-				<hr class="dark:border-immich-dark-gray" />
-			</div>
+	<section>
+		<!-- 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>
 
-			<!-- 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}
+		<!-- 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>
-
-			<!-- 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>
+		{/if}
 	</section>
-</section>
+</UserPageLayout>

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

@@ -1,21 +1,16 @@
+import { AppRoute } from '$lib/constants';
 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');
+export const load = (async ({ locals: { user } }) => {
+	if (!user) {
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
-};
+
+	return {
+		user,
+		meta: {
+			title: 'Shared Links'
+		}
+	};
+}) satisfies PageServerLoad;

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

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

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

@@ -1,36 +1,15 @@
 <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 UserPageLayout from '$lib/components/layouts/user-page-layout.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" />
+<UserPageLayout user={data.user} title={data.meta.title}>
+	<section class="flex place-content-center mx-4">
+		<div class="w-full max-w-3xl">
+			<UserSettingsList user={data.user} />
 		</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>
+</UserPageLayout>