feat(web): More localisation (#1441)

* File size localisation

* Localisation for sidebar tooltips

* Localisation for active/waiting jobs

* Localisation for selected item counts

* Prettier

* Ignore Jest coverage directory for Prettier

web/.prettierignore

@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
+/coverage
 .env
 .env.*
 !.env.example

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -22,6 +22,8 @@
 	const run = (includeAllAssets: boolean) => {
 		dispatch('click', { includeAllAssets });
 	};
+
+	const locale = navigator.language;
 </script>
 
 <div class="flex justify-between rounded-3xl bg-gray-100 dark:bg-immich-dark-gray">
@@ -43,7 +45,7 @@
 					<p>Active</p>
 					<p class="text-2xl">
 						{#if jobCounts.active !== undefined}
-							{jobCounts.active}
+							{jobCounts.active.toLocaleString(locale)}
 						{:else}
 							<LoadingSpinner />
 						{/if}
@@ -55,7 +57,7 @@
 				>
 					<p class="text-2xl">
 						{#if jobCounts.waiting !== undefined}
-							{jobCounts.waiting}
+							{jobCounts.waiting.toLocaleString(locale)}
 						{:else}
 							<LoadingSpinner />
 						{/if}

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

@@ -383,7 +383,7 @@
 		>
 			<svelte:fragment slot="leading">
 				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-					Selected {multiSelectAsset.size}
+					Selected {multiSelectAsset.size.toLocaleString(locale)}
 				</p>
 			</svelte:fragment>
 			<svelte:fragment slot="trailing">

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

@@ -28,6 +28,8 @@
 
 		assetInteractionStore.clearMultiselect();
 	};
+
+	const locale = navigator.language;
 </script>
 
 <section
@@ -44,7 +46,9 @@
 			{#if $selectedAssets.size == 0}
 				<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} selected</p>
+				<p class="text-lg dark:text-immich-dark-fg">
+					{$selectedAssets.size.toLocaleString(locale)} selected
+				</p>
 			{/if}
 		</svelte:fragment>
 

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -79,6 +79,8 @@
 			clearMultiSelectAssetAssetHandler();
 		}
 	};
+
+	const locale = navigator.language;
 </script>
 
 <section class="bg-immich-bg dark:bg-immich-dark-bg">
@@ -90,7 +92,7 @@
 		>
 			<svelte:fragment slot="leading">
 				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-					Selected {selectedAssets.size}
+					Selected {selectedAssets.size.toLocaleString(locale)}
 				</p>
 			</svelte:fragment>
 			<svelte:fragment slot="trailing">

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

@@ -42,6 +42,8 @@
 			owned: albumCount.owned
 		};
 	};
+
+	const locale = navigator.language;
 </script>
 
 <section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6 bg-immich-bg dark:bg-immich-dark-bg">
@@ -73,8 +75,8 @@
 						<LoadingSpinner />
 					{:then data}
 						<div>
-							<p>{data.videos} Videos</p>
-							<p>{data.photos} Photos</p>
+							<p>{data.videos.toLocaleString(locale)} Videos</p>
+							<p>{data.photos.toLocaleString(locale)} Photos</p>
 						</div>
 					{/await}
 				</div>
@@ -104,7 +106,7 @@
 						<LoadingSpinner />
 					{:then data}
 						<div>
-							<p>{data.shared + data.sharing} Albums</p>
+							<p>{(data.shared + data.sharing).toLocaleString(locale)} Albums</p>
 						</div>
 					{/await}
 				</div>
@@ -174,7 +176,7 @@
 						<LoadingSpinner />
 					{:then data}
 						<div>
-							<p>{data.owned} Albums</p>
+							<p>{data.owned.toLocaleString(locale)} Albums</p>
 						</div>
 					{/await}
 				</div>

web/src/lib/components/shared-components/upload-panel.svelte

@@ -6,7 +6,7 @@
 	import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
 	import type { UploadAsset } from '$lib/models/upload-asset';
 	import { notificationController, NotificationType } from './notification/notification';
-	import { getBytesWithUnit } from '../../utils/byte-units';
+	import { asByteUnitString } from '$lib/utils/byte-units';
 
 	let showDetail = true;
 
@@ -116,7 +116,7 @@
 									<input
 										disabled
 										class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
-										value={`[${getBytesWithUnit(uploadAsset.file.size)}] ${uploadAsset.file.name}`}
+										value={`[${asByteUnitString(uploadAsset.file.size)}] ${uploadAsset.file.name}`}
 									/>
 
 									<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">

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

@@ -145,6 +145,8 @@
 		assetInteractionStore.clearMultiselect();
 		isShowCreateSharedLinkModal = false;
 	};
+
+	const locale = navigator.language;
 </script>
 
 <section>
@@ -156,7 +158,7 @@
 		>
 			<svelte:fragment slot="leading">
 				<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
-					Selected {$selectedAssets.size}
+					Selected {$selectedAssets.size.toLocaleString(locale)}
 				</p>
 			</svelte:fragment>
 			<svelte:fragment slot="trailing">