feat(web): more localized number formatting (#11401)

web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte

@@ -108,7 +108,10 @@
               {/if}
               <span class="text-immich-primary dark:text-immich-dark-primary">
                 {#if user.quotaSizeInBytes}
-                  ({((user.usage / user.quotaSizeInBytes) * 100).toFixed(0)}%)
+                  ({(user.usage / user.quotaSizeInBytes).toLocaleString($locale, {
+                    style: 'percent',
+                    maximumFractionDigits: 0,
+                  })})
                 {:else}
                   ({$t('unlimited')})
                 {/if}

web/src/lib/components/asset-viewer/activity-status.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { locale } from '$lib/stores/preferences.store';
   import type { ActivityResponseDto } from '@immich/sdk';
   import { mdiCommentOutline, mdiHeart, mdiHeartOutline } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
@@ -24,7 +25,7 @@
     <div class="flex gap-2 items-center justify-center">
       <Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
       {#if numberOfComments}
-        <div class="text-xl">{numberOfComments}</div>
+        <div class="text-xl">{numberOfComments.toLocaleString($locale)}</div>
       {/if}
     </div>
   </button>

web/src/lib/components/asset-viewer/download-panel.svelte

@@ -35,7 +35,9 @@
                 <div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`} />
               </div>
               <p class="min-w-[4em] whitespace-nowrap text-right">
-                <span class="text-immich-primary">{download.percentage}%</span>
+                <span class="text-immich-primary">
+                  {(download.percentage / 100).toLocaleString($locale, { style: 'percent' })}
+                </span>
               </p>
             </div>
           </div>

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -6,7 +6,7 @@
   import { getAltText } from '$lib/utils/thumbnail-util';
   import { timeToSeconds } from '$lib/utils/date-time';
   import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
-  import { playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
+  import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
   import { getAssetPlaybackUrl } from '$lib/utils';
   import {
     mdiArchiveArrowDownOutline,
@@ -177,7 +177,7 @@
               : 'top-7 right-1'} z-20 flex place-items-center gap-1 text-xs font-medium text-white"
           >
             <span class="pr-2 pt-2 flex place-items-center gap-1">
-              <p>{asset.stackCount}</p>
+              <p>{asset.stackCount.toLocaleString($locale)}</p>
               <Icon path={mdiCameraBurst} size="24" />
             </span>
           </div>

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

@@ -38,6 +38,7 @@
   import { tweened } from 'svelte/motion';
   import { fade } from 'svelte/transition';
   import { t } from 'svelte-i18n';
+  import { locale } from '$lib/stores/preferences.store';
 
   const parseIndex = (s: string | null, max: number | null) =>
     Math.max(Math.min(Number.parseInt(s ?? '') || 0, max ?? 0), 0);
@@ -201,7 +202,7 @@
 
           <div>
             <p class="text-small">
-              {assetIndex + 1}/{currentMemory.assets.length}
+              {(assetIndex + 1).toLocaleString($locale)}/{currentMemory.assets.length.toLocaleString($locale)}
             </p>
           </div>
         </div>

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

@@ -9,6 +9,7 @@
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { mdiCog, mdiWindowMinimize, mdiCancel, mdiCloudUploadOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import { locale } from '$lib/stores/preferences.store';
 
   let showDetail = false;
   let showOptions = false;
@@ -73,9 +74,14 @@
               })}
             </p>
             <p class="immich-form-label text-xs">
-              {$t('upload_status_uploaded')} <span class="text-immich-success">{$successCounter}</span> -
-              {$t('upload_status_errors')} <span class="text-immich-error">{$errorCounter}</span> -
-              {$t('upload_status_duplicates')} <span class="text-immich-warning">{$duplicateCounter}</span>
+              {$t('upload_status_uploaded')}
+              <span class="text-immich-success">{$successCounter.toLocaleString($locale)}</span>
+              -
+              {$t('upload_status_errors')}
+              <span class="text-immich-error">{$errorCounter.toLocaleString($locale)}</span>
+              -
+              {$t('upload_status_duplicates')}
+              <span class="text-immich-warning">{$duplicateCounter.toLocaleString($locale)}</span>
             </p>
           </div>
           <div class="flex flex-col items-end">
@@ -139,7 +145,7 @@
           on:click={() => (showDetail = true)}
           class="absolute -left-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-primary p-5 text-xs text-gray-200"
         >
-          {$remainingUploads}
+          {$remainingUploads.toLocaleString($locale)}
         </button>
         {#if $hasError}
           <button
@@ -148,7 +154,7 @@
             on:click={() => (showDetail = true)}
             class="absolute -right-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-error p-5 text-xs text-gray-200"
           >
-            {$errorCounter}
+            {$errorCounter.toLocaleString($locale)}
           </button>
         {/if}
         <button