From 5aee5c0fb8a036964f5e3d46cc155f8908fcb940 Mon Sep 17 00:00:00 2001
From: Kiel Hurley <kielhurley@gmail.com>
Date: Sat, 28 Jan 2023 18:57:25 +1300
Subject: [PATCH] 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                                    |  1 +
 web/src/lib/components/admin-page/jobs/job-tile.svelte |  6 ++++--
 web/src/lib/components/album-page/album-viewer.svelte  |  2 +-
 .../lib/components/album-page/asset-selection.svelte   |  6 +++++-
 .../share-page/individual-shared-viewer.svelte         |  4 +++-
 .../shared-components/side-bar/side-bar.svelte         | 10 ++++++----
 .../components/shared-components/upload-panel.svelte   |  4 ++--
 web/src/routes/photos/+page.svelte                     |  4 +++-
 8 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/web/.prettierignore b/web/.prettierignore
index a2f960d9e..12583c47d 100644
--- a/web/.prettierignore
+++ b/web/.prettierignore
@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
+/coverage
 .env
 .env.*
 !.env.example
diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte
index 9ea6839d1..9c92c8491 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile.svelte
+++ b/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}
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 63e51b8d3..f177d4e09 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/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">
diff --git a/web/src/lib/components/album-page/asset-selection.svelte b/web/src/lib/components/album-page/asset-selection.svelte
index bba448fe2..401d581c2 100644
--- a/web/src/lib/components/album-page/asset-selection.svelte
+++ b/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>
 
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index 6dd723e08..4b5dcc1cd 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/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">
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index a7e63f96e..dd133b5ad 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/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>
diff --git a/web/src/lib/components/shared-components/upload-panel.svelte b/web/src/lib/components/shared-components/upload-panel.svelte
index 4596ed286..7e24627d8 100644
--- a/web/src/lib/components/shared-components/upload-panel.svelte
+++ b/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">
diff --git a/web/src/routes/photos/+page.svelte b/web/src/routes/photos/+page.svelte
index 306f21f46..6b261ffb7 100644
--- a/web/src/routes/photos/+page.svelte
+++ b/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">