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

web/src/lib/components/album-page/album-card.svelte

@@ -17,6 +17,7 @@
 	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 	import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
+	import { locale } from '$lib/stores/preferences.store';
 
 	export let album: AlbumResponseDto;
 
@@ -52,8 +53,6 @@
 	onMount(async () => {
 		imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
 	});
-
-	const locale = navigator.language;
 </script>
 
 <div
@@ -91,7 +90,10 @@
 		</p>
 
 		<span class="text-xs flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
-			<p>{album.assetCount.toLocaleString(locale)} {album.assetCount == 1 ? `item` : `items`}</p>
+			<p>
+				{album.assetCount.toLocaleString($locale)}
+				{album.assetCount == 1 ? `item` : `items`}
+			</p>
 
 			{#if album.shared}
 				<p>·</p>

web/src/lib/components/album-page/album-viewer.svelte

@@ -39,6 +39,7 @@
 	import ThemeButton from '../shared-components/theme-button.svelte';
 	import { openFileUploadDialog } from '$lib/utils/file-uploader';
 	import { bulkDownload } from '$lib/utils/asset-utils';
+	import { locale } from '$lib/stores/preferences.store';
 	import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
 	import ImmichLogo from '../shared-components/immich-logo.svelte';
 
@@ -88,7 +89,6 @@
 		}
 	});
 
-	const locale = navigator.language;
 	const albumDateFormat: Intl.DateTimeFormatOptions = {
 		month: 'short',
 		day: 'numeric',
@@ -99,8 +99,8 @@
 		const startDate = new Date(album.assets[0].fileCreatedAt);
 		const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
 
-		const startDateString = startDate.toLocaleDateString(locale, albumDateFormat);
-		const endDateString = endDate.toLocaleDateString(locale, albumDateFormat);
+		const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
+		const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
 
 		// If the start and end date are the same, only show one date
 		return startDateString === endDateString
@@ -380,7 +380,7 @@
 		>
 			<svelte:fragment slot="leading">
 				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-					Selected {multiSelectAsset.size.toLocaleString(locale)}
+					Selected {multiSelectAsset.size.toLocaleString($locale)}
 				</p>
 			</svelte:fragment>
 			<svelte:fragment slot="trailing">

web/src/lib/components/album-page/asset-selection.svelte

@@ -11,12 +11,12 @@
 		assetsInAlbumStoreState,
 		selectedAssets
 	} from '$lib/stores/asset-interaction.store';
+	import { locale } from '$lib/stores/preferences.store';
 
 	const dispatch = createEventDispatcher();
 
 	export let albumId: string;
 	export let assetsInAlbum: AssetResponseDto[];
-	const locale = navigator.language;
 
 	onMount(() => {
 		$assetsInAlbumStoreState = assetsInAlbum;
@@ -51,7 +51,7 @@
 				<p class="text-lg dark:text-immich-dark-fg">Add to album</p>
 			{:else}
 				<p class="text-lg dark:text-immich-dark-fg">
-					{$selectedAssets.size.toLocaleString(locale)} selected
+					{$selectedAssets.size.toLocaleString($locale)} selected
 				</p>
 			{/if}
 		</svelte:fragment>