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

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -9,7 +9,7 @@
 <section
 	in:fade={{ duration: 100 }}
 	out:fade={{ duration: 100 }}
-	class="absolute w-full h-full bg-black/40 z-[100] flex place-items-center place-content-center "
+	class="absolute left-0 top-0 w-full h-full bg-black/40 z-[100] flex place-items-center place-content-center"
 >
 	<div class="z-[9999]" use:clickOutside on:out-click={() => dispatch('clickOutside')}>
 		<slot />

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

@@ -7,6 +7,7 @@
 	import { clickOutside } from '../../utils/click-outside';
 	import { api, UserResponseDto } from '@api';
 	import ThemeButton from './theme-button.svelte';
+	import { AppRoute } from '../../constants';
 
 	export let user: UserResponseDto;
 	export let shouldShowUploadButton = true;
@@ -70,7 +71,7 @@
 		<section class="flex gap-4 place-items-center">
 			<ThemeButton />
 
-			{#if $page.url.pathname !== '/admin' && shouldShowUploadButton}
+			{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
 				<button
 					in:fly={{ x: 50, duration: 250 }}
 					on:click={() => dispatch('uploadClicked')}
@@ -82,10 +83,10 @@
 			{/if}
 
 			{#if user.isAdmin}
-				<a data-sveltekit-preload-data="hover" href={`admin`}>
+				<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
 					<button
 						class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5  dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
-							$page.url.pathname == '/admin' &&
+							$page.url.pathname.includes('/admin') &&
 							'text-immich-primary dark:immich-dark-primary underline'
 						}`}>Administration</button
 					>

web/src/lib/components/shared-components/side-bar/side-bar-button.svelte

@@ -3,22 +3,12 @@
 	// TODO: why `any` here? There should be a expected type for this
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let logo: any;
-	export let actionType: AdminSideBarSelection | AppSideBarSelection;
 	export let isSelected: boolean;
 
 	import { createEventDispatcher } from 'svelte';
-	import type {
-		AdminSideBarSelection,
-		AppSideBarSelection
-	} from '../../../models/admin-sidebar-selection';
 
 	const dispatch = createEventDispatcher();
-
-	const onButtonClicked = () => {
-		dispatch('selected', {
-			actionType
-		});
-	};
+	const onButtonClicked = () => dispatch('selected');
 </script>
 
 <div

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
-	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
 	import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
@@ -11,28 +9,12 @@
 	import { api } from '@api';
 	import { fade } from 'svelte/transition';
 	import LoadingSpinner from '../loading-spinner.svelte';
-
-	let selectedAction: AppSideBarSelection;
+	import { AppRoute } from '../../../constants';
 
 	let showAssetCount = false;
 	let showSharingCount = false;
 	let showAlbumsCount = false;
 
-	// let domCount = 0;
-	onMount(async () => {
-		if ($page.route.id == 'albums') {
-			selectedAction = AppSideBarSelection.ALBUMS;
-		} else if ($page.route.id == 'photos') {
-			selectedAction = AppSideBarSelection.PHOTOS;
-		} else if ($page.route.id == 'sharing') {
-			selectedAction = AppSideBarSelection.SHARING;
-		}
-
-		// setInterval(() => {
-		// 	domCount = document.getElementsByTagName('*').length;
-		// }, 500);
-	});
-
 	const getAssetCount = async () => {
 		const { data: assetCount } = await api.assetApi.getAssetCountByUserId();
 
@@ -56,14 +38,13 @@
 	<a
 		data-sveltekit-preload-data="hover"
 		data-sveltekit-noscroll
-		href={$page.route.id !== 'photos' ? `/photos` : null}
+		href={AppRoute.PHOTOS}
 		class="relative"
 	>
 		<SideBarButton
 			title={`Photos`}
 			logo={ImageOutline}
-			actionType={AppSideBarSelection.PHOTOS}
-			isSelected={selectedAction === AppSideBarSelection.PHOTOS}
+			isSelected={$page.route.id === AppRoute.PHOTOS}
 		/>
 		<div
 			id="asset-count-info"
@@ -75,7 +56,6 @@
 			{#if showAssetCount}
 				<div
 					transition:fade={{ duration: 200 }}
-					id="asset-count-info-detail"
 					class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center"
 				>
 					{#await getAssetCount()}
@@ -91,16 +71,11 @@
 		</div>
 	</a>
 
-	<a
-		data-sveltekit-preload-data="hover"
-		href={$page.route.id !== 'sharing' ? `/sharing` : null}
-		class="relative"
-	>
+	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} class="relative">
 		<SideBarButton
 			title="Sharing"
 			logo={AccountMultipleOutline}
-			actionType={AppSideBarSelection.SHARING}
-			isSelected={selectedAction === AppSideBarSelection.SHARING}
+			isSelected={$page.route.id === AppRoute.SHARING}
 		/>
 		<div
 			id="sharing-count-info"
@@ -112,7 +87,6 @@
 			{#if showSharingCount}
 				<div
 					transition:fade={{ duration: 200 }}
-					id="asset-count-info-detail"
 					class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center"
 				>
 					{#await getAlbumCount()}
@@ -129,16 +103,11 @@
 	<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
 		<p>LIBRARY</p>
 	</div>
-	<a
-		data-sveltekit-preload-data="hover"
-		href={$page.route.id !== 'albums' ? `/albums` : null}
-		class="relative"
-	>
+	<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative">
 		<SideBarButton
 			title="Albums"
 			logo={ImageAlbum}
-			actionType={AppSideBarSelection.ALBUMS}
-			isSelected={selectedAction === AppSideBarSelection.ALBUMS}
+			isSelected={$page.route.id === AppRoute.ALBUMS}
 		/>
 
 		<div