feat(web) add user setting page (#1115)

* refactoring

* refactor

* fix naming

* Added animation

* add user setting page

* Add skeleton for user setting page

* styling

* styling

* Spelling

web/src/routes/admin/system-settings/+page.server.ts

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	const { user } = await parent();
+
+	if (!user) {
+		throw redirect(302, '/auth/login');
+	} else if (!user.isAdmin) {
+		throw redirect(302, '/photos');
+	}
+
+	return { user };
+};

web/src/routes/admin/system-settings/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import FFmpegSettings from '$lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte';
+	import OAuthSettings from '$lib/components/admin-page/settings/oauth/oauth-settings.svelte';
+	import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
+	import StorageTemplateSettings from '$lib/components/admin-page/settings/storate-template/storage-template-settings.svelte';
+	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+	import { api, SystemConfigDto } from '@api';
+	import type { PageData } from './$types';
+
+	let systemConfig: SystemConfigDto;
+	export let data: PageData;
+	const getConfig = async () => {
+		const { data } = await api.systemConfigApi.getConfig();
+		systemConfig = data;
+
+		return data;
+	};
+</script>
+
+<svelte:head>
+	<title>System Settings - Immich</title>
+</svelte:head>
+
+<section class="">
+	{#await getConfig()}
+		<LoadingSpinner />
+	{:then configs}
+		<SettingAccordion
+			title="FFmpeg Settings"
+			subtitle="Manage the resolution and encoding information of the video files"
+		>
+			<FFmpegSettings ffmpegConfig={configs.ffmpeg} />
+		</SettingAccordion>
+
+		<SettingAccordion title="OAuth Settings" subtitle="Manage the OAuth integration to Immich app">
+			<OAuthSettings oauthConfig={configs.oauth} />
+		</SettingAccordion>
+
+		<SettingAccordion
+			title="Storage Template"
+			subtitle="Manage the folder structure and file name of the upload asset"
+		>
+			<StorageTemplateSettings storageConfig={configs.storageTemplate} user={data.user} />
+		</SettingAccordion>
+	{/await}
+</section>