feat(web): theme/locale preferences and improve SSR (#1832)

web/src/routes/+layout.svelte

@@ -19,11 +19,9 @@
 	let localVersion: string;
 	let remoteVersion: string;
 	let showNavigationLoadingBar = false;
-	let canShow = false;
 	let showUploadCover = false;
 
 	onMount(async () => {
-		checkUserTheme();
 		const res = await checkAppVersion();
 
 		shouldShowAnnouncement = res.shouldShowAnnouncement;
@@ -31,21 +29,6 @@
 		remoteVersion = res.remoteVersion ?? 'unknown';
 	});
 
-	const checkUserTheme = () => {
-		// On page load or when changing themes, best to add inline in `head` to avoid FOUC
-		if (
-			localStorage.getItem('color-theme') === 'dark' ||
-			(!('color-theme' in localStorage) &&
-				window.matchMedia('(prefers-color-scheme: dark)').matches)
-		) {
-			document.documentElement.classList.add('dark');
-		} else {
-			document.documentElement.classList.remove('dark');
-		}
-
-		canShow = true;
-	};
-
 	beforeNavigate(() => {
 		showNavigationLoadingBar = true;
 	});
@@ -99,32 +82,30 @@
 </svelte:head>
 
 <main on:dragenter={() => (showUploadCover = true)}>
-	{#if canShow}
-		<div in:fade={{ duration: 100 }}>
-			{#if showNavigationLoadingBar}
-				<NavigationLoadingBar />
-			{/if}
+	<div in:fade={{ duration: 100 }}>
+		{#if showNavigationLoadingBar}
+			<NavigationLoadingBar />
+		{/if}
 
-			<slot />
+		<slot />
 
-			{#if showUploadCover}
-				<UploadCover
-					{dropHandler}
-					{dragOverHandler}
-					dragLeaveHandler={() => (showUploadCover = false)}
-				/>
-			{/if}
+		{#if showUploadCover}
+			<UploadCover
+				{dropHandler}
+				{dragOverHandler}
+				dragLeaveHandler={() => (showUploadCover = false)}
+			/>
+		{/if}
 
-			<DownloadPanel />
-			<UploadPanel />
-			<NotificationList />
-			{#if shouldShowAnnouncement}
-				<AnnouncementBox
-					{localVersion}
-					{remoteVersion}
-					on:close={() => (shouldShowAnnouncement = false)}
-				/>
-			{/if}
-		</div>
-	{/if}
+		<DownloadPanel />
+		<UploadPanel />
+		<NotificationList />
+		{#if shouldShowAnnouncement}
+			<AnnouncementBox
+				{localVersion}
+				{remoteVersion}
+				on:close={() => (shouldShowAnnouncement = false)}
+			/>
+		{/if}
+	</div>
 </main>

web/src/routes/admin/user-management/+page.svelte

@@ -11,6 +11,7 @@
 	import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
 	import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
 	import { page } from '$app/stores';
+	import { locale } from '$lib/stores/preferences.store';
 
 	let allUsers: UserResponseDto[] = [];
 	let shouldShowEditUserForm = false;
@@ -28,7 +29,6 @@
 		return user.deletedAt != null;
 	};
 
-	const locale = navigator.language;
 	const deleteDateFormat: Intl.DateTimeFormatOptions = {
 		month: 'long',
 		day: 'numeric',
@@ -38,7 +38,7 @@
 	const getDeleteDate = (user: UserResponseDto): string => {
 		let deletedAt = new Date(user.deletedAt ? user.deletedAt : Date.now());
 		deletedAt.setDate(deletedAt.getDate() + 7);
-		return deletedAt.toLocaleString(locale, deleteDateFormat);
+		return deletedAt.toLocaleString($locale, deleteDateFormat);
 	};
 
 	const onUserCreated = async () => {

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

@@ -28,6 +28,7 @@
 	import Plus from 'svelte-material-icons/Plus.svelte';
 	import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
 	import type { PageData } from './$types';
+	import { locale } from '$lib/stores/preferences.store';
 
 	export let data: PageData;
 	let isShowCreateSharedLinkModal = false;
@@ -141,8 +142,6 @@
 		assetInteractionStore.clearMultiselect();
 		isShowCreateSharedLinkModal = false;
 	};
-
-	const locale = navigator.language;
 </script>
 
 <section>
@@ -154,7 +153,7 @@
 		>
 			<svelte:fragment slot="leading">
 				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-					Selected {$selectedAssets.size.toLocaleString(locale)}
+					Selected {$selectedAssets.size.toLocaleString($locale)}
 				</p>
 			</svelte:fragment>
 			<svelte:fragment slot="trailing">