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 } }) => {
+export const load = (async ({ locals: { api, user } }) => {
-	try {
-		const { user } = await parent();
-
 	if (!user) {
-			throw Error('User is not logged in');
+		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,28 +30,8 @@
 	};
 </script>
 
-<section>
+<UserPageLayout user={data.user} title={data.meta.title}>
-	<NavigationBar user={data.user} shouldShowUploadButton={false} />
+	<div slot="buttons">
-</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"
-		>
-			<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"
@@ -63,11 +42,6 @@
 			<p>Create album</p>
 		</button>
 	</div>
-			</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">
@@ -97,8 +71,7 @@
 			</p>
 		</div>
 	{/if}
-		</section>
+</UserPageLayout>
-	</section>
 
 <!-- Context Menu -->
 {#if $isShowContextMenu}
@@ -111,4 +84,3 @@
 		</MenuOption>
 	</ContextMenu>
 {/if}
-</section>

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 } }) => {
+export const load = (async ({ params, locals: { api, user } }) => {
-	const { user } = await parent();
-
 	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,31 +38,7 @@
 	places = places.slice(0, MAX_ITEMS);
 </script>
 
-<section>
+<UserPageLayout user={data.user} title={data.meta.title}>
-	<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">
-				<div>
-					<p class="font-medium">Explore</p>
-				</div>
-			</div>
-
-			<div class="my-4">
-				<hr class="dark:border-immich-dark-gray" />
-			</div>
-
 	<div class="mx-4 flex flex-col">
 		{#if places.length > 0}
 			<div class="mb-6 mt-2">
@@ -168,6 +143,4 @@
 			</div>
 		</div>
 	</div>
-		</section>
+</UserPageLayout>
-	</section>
-</section>

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

@@ -1,11 +1,10 @@
 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 }) => {
+export const load = (async ({ locals: { user } }) => {
-	try {
-		const { user } = await parent();
 	if (!user) {
-			throw error(400, 'Not logged in');
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
 
 	return {
@@ -14,8 +13,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			title: 'Favorites'
 		}
 	};
-	} catch (e) {
+}) satisfies PageServerLoad;
-		console.log('Photo page load error', e);
-		throw redirect(302, '/auth/login');
-	}
-};

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';
-
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	export let data: PageData;
+	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,15 +60,6 @@
 	};
 </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
@@ -106,22 +96,8 @@
 	/>
 {/if}
 
-	<!-- Main Section -->
+<UserPageLayout user={data.user} title={data.meta.title} hideNavbar={isMultiSelectionMode}>
-	<section class="overflow-y-auto relative immich-scrollbar">
+	<section>
-		<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
@@ -137,5 +113,4 @@
 
 		<GalleryViewer assets={favorites} bind:selectedAssets />
 	</section>
-	</section>
+</UserPageLayout>
-</section>

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

@@ -1,11 +1,10 @@
 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 }) => {
+export const load = (async ({ locals: { user } }) => {
-	try {
-		const { user } = await parent();
 	if (!user) {
-			throw error(400, 'Not logged in');
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
 
 	return {
@@ -14,8 +13,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			title: 'Photos'
 		}
 	};
-	} catch (e) {
+}) satisfies PageServerLoad;
-		console.log('Photo page load error', e);
-		throw redirect(302, '/auth/login');
-	}
-};

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,7 +143,8 @@
 	};
 </script>
 
-<section>
+<UserPageLayout user={data.user} hideNavbar={$isMultiSelectStoreState} showUploadButton>
+	<svelte:fragment slot="header">
 		{#if $isMultiSelectStoreState}
 			<ControlAppBar
 				on:close-button-click={() => assetInteractionStore.clearMultiselect()}
@@ -175,8 +175,6 @@
 					/>
 				</svelte:fragment>
 			</ControlAppBar>
-	{:else}
-		<NavigationBar user={data.user} on:uploadClicked={() => openFileUploadDialog()} />
 		{/if}
 
 		{#if isShowAddMenu}
@@ -206,11 +204,7 @@
 				on:close={handleCloseSharedLinkModal}
 			/>
 		{/if}
-</section>
+	</svelte:fragment>
 
-<section
+	<AssetGrid slot="content" />
-	class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
+</UserPageLayout>
->
-	<SideBar />
-	<AssetGrid />
-</section>

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 } }) => {
+export const load = (async ({ params, locals: { api } }) => {
-	const { user } = await parent();
-
 	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 } }) => {
+export const load = (async ({ locals: { api, user } }) => {
-	try {
-		const { user } = await parent();
 	if (!user) {
-			throw redirect(302, '/auth/login');
+		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,27 +32,8 @@
 	};
 </script>
 
-<section>
+<UserPageLayout user={data.user} title={data.meta.title}>
-	<NavigationBar user={data.user} shouldShowUploadButton={false} />
+	<div class="flex" slot="buttons">
-</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"
@@ -75,12 +54,8 @@
 			<p>Shared links</p>
 		</button>
 	</div>
-			</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}
@@ -102,5 +77,4 @@
 			</div>
 		{/if}
 	</section>
-	</section>
+</UserPageLayout>
-</section>

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

@@ -1,12 +1,10 @@
+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 }) => {
+export const load = (async ({ locals: { user } }) => {
-	try {
-		const { user } = await parent();
 	if (!user) {
-			throw redirect(302, '/auth/login');
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	}
 
 	return {
@@ -15,7 +13,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			title: 'Shared Links'
 		}
 	};
-	} catch (e) {
+}) satisfies PageServerLoad;
-		throw redirect(302, '/auth/login');
-	}
-};

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

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

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