feat(web): use user layout on admin pages (#2550)

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

@@ -11,11 +11,7 @@
 
 <header>
 	{#if !hideNavbar}
-		<NavigationBar
-			{user}
-			shouldShowUploadButton={showUploadButton}
-			on:uploadClicked={() => openFileUploadDialog()}
-		/>
+		<NavigationBar {user} {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
 	{/if}
 
 	<slot name="header" />
@@ -24,7 +20,9 @@
 <main
 	class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen overflow-hidden bg-immich-bg dark:bg-immich-dark-bg"
 >
-	<SideBar />
+	<slot name="sidebar">
+		<SideBar />
+	</slot>
 	<slot name="content">
 		{#if title}
 			<section class="relative">

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

@@ -17,7 +17,7 @@
 	import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
 	import Cog from 'svelte-material-icons/Cog.svelte';
 	export let user: UserResponseDto;
-	export let shouldShowUploadButton = true;
+	export let showUploadButton = true;
 
 	let shouldShowAccountInfo = false;
 	let shouldShowAccountInfoPanel = false;
@@ -72,7 +72,7 @@
 
 				<ThemeButton />
 
-				{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
+				{#if !$page.url.pathname.includes('/admin') && showUploadButton}
 					<div in:fly={{ x: 50, duration: 250 }}>
 						<LinkButton on:click={() => dispatch('uploadClicked')}>
 							<div class="flex gap-2">

web/src/routes/admin/+layout.svelte

@@ -6,7 +6,6 @@
 	// This is an issue in SvelteKit caused by using the page store in layouts and
 	// using transitions on pages: https://github.com/sveltejs/kit/issues/7405
 
-	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
 	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
 	import Sync from 'svelte-material-icons/Sync.svelte';
@@ -17,6 +16,7 @@
 	import { AppRoute } from '../../lib/constants';
 	import type { LayoutData } from './$types';
 	import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 
 	export let data: LayoutData;
 
@@ -38,55 +38,40 @@
 	};
 </script>
 
-<NavigationBar user={data.user} />
+<UserPageLayout user={data.user} showUploadButton={false} title={getPageTitle(data.routeId)}>
+	<SideBarSection slot="sidebar">
+		<SideBarButton
+			title="Users"
+			logo={AccountMultipleOutline}
+			isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
+			on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
+		/>
+		<SideBarButton
+			title="Jobs"
+			logo={Sync}
+			isSelected={data.routeId === AppRoute.ADMIN_JOBS}
+			on:selected={() => goto(AppRoute.ADMIN_JOBS)}
+		/>
+		<SideBarButton
+			title="Settings"
+			logo={Cog}
+			isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
+			on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
+		/>
+		<SideBarButton
+			title="Server Stats"
+			logo={Server}
+			isSelected={data.routeId === AppRoute.ADMIN_STATS}
+			on:selected={() => goto(AppRoute.ADMIN_STATS)}
+		/>
+		<div class="mb-6 mt-auto">
+			<StatusBox />
+		</div>
+	</SideBarSection>
 
-<main>
-	<section
-		class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] pt-[var(--navbar-height)] h-screen"
-	>
-		<SideBarSection>
-			<SideBarButton
-				title="Users"
-				logo={AccountMultipleOutline}
-				isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
-				on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
-			/>
-			<SideBarButton
-				title="Jobs"
-				logo={Sync}
-				isSelected={data.routeId === AppRoute.ADMIN_JOBS}
-				on:selected={() => goto(AppRoute.ADMIN_JOBS)}
-			/>
-			<SideBarButton
-				title="Settings"
-				logo={Cog}
-				isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
-				on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
-			/>
-			<SideBarButton
-				title="Server Stats"
-				logo={Server}
-				isSelected={data.routeId === AppRoute.ADMIN_STATS}
-				on:selected={() => goto(AppRoute.ADMIN_STATS)}
-			/>
-			<div class="mb-6 mt-auto">
-				<StatusBox />
-			</div>
-		</SideBarSection>
-
-		<section class="overflow-y-auto immich-scrollbar">
-			<div id="setting-title" class="pt-10 w-full 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">
-					{getPageTitle(data.routeId)}
-				</h1>
-				<hr class="dark:border-immich-dark-gray" />
-			</div>
-
-			<section id="setting-content" class="flex place-content-center mx-4">
-				<section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
-					<slot />
-				</section>
-			</section>
+	<section id="setting-content" class="flex place-content-center mx-4">
+		<section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
+			<slot />
 		</section>
 	</section>
-</main>
+</UserPageLayout>