feat(server,web): migrate oauth settings from env to system config (#1061)

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

@@ -1,3 +1,82 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import NavigationBar from '$lib/components/shared-components/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';
+	import Cog from 'svelte-material-icons/Cog.svelte';
+	import Server from 'svelte-material-icons/Server.svelte';
+	import StatusBox from '$lib/components/shared-components/status-box.svelte';
+	import { goto } from '$app/navigation';
+	import { AppRoute } from '../../lib/constants';
+
+	const getPageTitle = (routeId: string | null) => {
+		switch (routeId) {
+			case AppRoute.ADMIN_USER_MANAGEMENT:
+				return 'User Management';
+			case AppRoute.ADMIN_SETTINGS:
+				return 'Settings';
+			case AppRoute.ADMIN_JOBS:
+				return 'Jobs';
+			case AppRoute.ADMIN_STATS:
+				return 'Server Stats';
+			default:
+				return '';
+		}
+	};
+</script>
+
+<svelte:head>
+	<title>Administration - Immich</title>
+</svelte:head>
+
+<NavigationBar user={$page.data.user} />
+
 <main>
-	<slot />
+	<section class="grid grid-cols-[250px_auto] pt-[72px] h-screen">
+		<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col gap-1">
+			<SideBarButton
+				title="Users"
+				logo={AccountMultipleOutline}
+				isSelected={$page.route.id === AppRoute.ADMIN_USER_MANAGEMENT}
+				on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
+			/>
+			<SideBarButton
+				title="Jobs"
+				logo={Sync}
+				isSelected={$page.route.id === AppRoute.ADMIN_JOBS}
+				on:selected={() => goto(AppRoute.ADMIN_JOBS)}
+			/>
+			<SideBarButton
+				title="Settings"
+				logo={Cog}
+				isSelected={$page.route.id === AppRoute.ADMIN_SETTINGS}
+				on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
+			/>
+			<SideBarButton
+				title="Server Stats"
+				logo={Server}
+				isSelected={$page.route.id === AppRoute.ADMIN_STATS}
+				on:selected={() => goto(AppRoute.ADMIN_STATS)}
+			/>
+			<div class="mb-6 mt-auto">
+				<StatusBox />
+			</div>
+		</section>
+
+		<section class="overflow-y-auto ">
+			<div id="setting-title" class="pt-10 fixed w-full z-50 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($page.route.id)}
+				</h1>
+				<hr class="dark:border-immich-dark-gray" />
+			</div>
+
+			<section id="setting-content" class="pt-[85px] flex place-content-center">
+				<section class="w-[800px] pt-5">
+					<slot />
+				</section>
+			</section>
+		</section>
+	</section>
 </main>