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/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	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';
@@ -15,7 +15,7 @@
 			case AppRoute.ADMIN_USER_MANAGEMENT:
 				return 'User Management';
 			case AppRoute.ADMIN_SETTINGS:
-				return 'Settings';
+				return 'System Settings';
 			case AppRoute.ADMIN_JOBS:
 				return 'Jobs';
 			case AppRoute.ADMIN_STATS:

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

@@ -18,7 +18,7 @@
 </script>
 
 <svelte:head>
-	<title>Settings - Immich</title>
+	<title>System Settings - Immich</title>
 </svelte:head>
 
 <section class="">

web/src/routes/albums/+page.svelte

@@ -6,7 +6,7 @@
 	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.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 PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import { useAlbums } from './albums.bloc';

web/src/routes/photos/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import NavigationBar from '$lib/components/shared-components/navigation-bar.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 AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
 	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';

web/src/routes/sharing/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import NavigationBar from '$lib/components/shared-components/navigation-bar.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 PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';

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

@@ -0,0 +1,18 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	try {
+		const { user } = await parent();
+
+		if (!user) {
+			throw Error('User is not logged in');
+		}
+
+		return {
+			user: user
+		};
+	} catch (e) {
+		throw redirect(302, '/auth/login');
+	}
+};

web/src/routes/user-settings/+page.svelte

@@ -0,0 +1,40 @@
+<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 UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	<title>Settings - Immich</title>
+</svelte:head>
+
+<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 />
+
+	<section class="overflow-y-auto ">
+		<div
+			id="user-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">
+				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} />
+			</section>
+		</section>
+	</section>
+</section>