fix(web): missing svelte translations (#10199)

* fix(web): missing svelte translations

* fixes

* format fix

* translation keys fix

* "merge" key fix

* Update web/src/lib/components/shared-components/side-bar/more-information-albums.svelte

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* Update web/src/lib/i18n/en.json

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* suggestion fix

* trash pluralization

* video+photo count fix

* format fix

* unused removal

* translation key fix

* duplicate key removal

* format fix

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -101,23 +101,23 @@
   <ControlAppBar on:close={onClose}>
     <svelte:fragment slot="leading">
       {#if hasSelection}
-        Selected {selectedPeople.length}
+        {$t('selected')} {selectedPeople.length}
       {:else}
-        Merge people
+        {$t('merge_people')}
       {/if}
       <div />
     </svelte:fragment>
     <svelte:fragment slot="trailing">
       <Button size={'sm'} disabled={!hasSelection} on:click={handleMerge}>
         <Icon path={mdiMerge} size={18} />
-        <span class="ml-2"> Merge</span></Button
+        <span class="ml-2">{$t('merge')}</span></Button
       >
     </svelte:fragment>
   </ControlAppBar>
   <section class="bg-immich-bg px-[70px] pt-[100px] dark:bg-immich-dark-bg">
     <section id="merge-face-selector relative">
       <div class="mb-10 h-[200px] place-content-center place-items-center">
-        <p class="mb-4 text-center uppercase dark:text-white">Choose matching people to merge</p>
+        <p class="mb-4 text-center uppercase dark:text-white">{$t('choose_matching_people_to_merge')}</p>
 
         <div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">
           {#each selectedPeople as person (person.id)}

web/src/lib/components/faces-page/merge-suggestion-modal.svelte

@@ -31,7 +31,7 @@
   };
 </script>
 
-<FullScreenModal title="Merge people - {title}" onClose={() => dispatch('close')}>
+<FullScreenModal title="{$t('merge_people')} - {title}" onClose={() => dispatch('close')}>
   <div class="flex items-center justify-center py-4 md:h-36 md:py-4">
     {#if !choosePersonToMerge}
       <div class="flex h-20 w-20 items-center px-1 md:h-24 md:w-24 md:px-2">

web/src/lib/components/faces-page/show-hide.svelte

@@ -54,7 +54,7 @@
     <div class="flex items-center">
       <CircleIconButton title={$t('close')} icon={mdiClose} on:click={onClose} />
       <div class="flex gap-2 items-center">
-        <p class="ml-2">Show & hide people</p>
+        <p class="ml-2">{$t('show_and_hide_people')}</p>
         <p class="text-sm text-gray-400 dark:text-gray-600">({countTotalPeople.toLocaleString($locale)})</p>
       </div>
     </div>

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
   import { createContext } from '$lib/utils/context';
+  import { t } from 'svelte-i18n';
 
   export interface AssetControlContext {
     // Wrap assets in a function, because context isn't reactive.
@@ -32,7 +33,8 @@
 
 <ControlAppBar on:close={clearSelect} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
   <p class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
-    Selected {assets.size.toLocaleString($locale)}
+    {$t('selected')}
+    {assets.size.toLocaleString($locale)}
   </p>
   <slot slot="trailing" />
 </ControlAppBar>

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -78,7 +78,7 @@
         <Button color="dark-gray" size="sm" shadow={false} border>
           <div class="flex place-content-center place-items-center gap-2 px-2">
             <Icon path={mdiCog} size="18" />
-            Account Settings
+            {$t('account_settings')}
           </div>
         </Button>
       </a>
@@ -91,7 +91,7 @@
         on:click={() => dispatch('logout')}
       >
         <Icon path={mdiLogout} size={24} />
-        Sign Out</button
+        {$t('sign_out')}</button
       >
     </div>
   </div>

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

@@ -93,7 +93,7 @@
                     ? 'item text-immich-primary underline dark:text-immich-dark-primary'
                     : ''}
                 >
-                  Administration
+                  {$t('administration')}
                 </span>
               </div>
               <div class="block sm:hidden" aria-hidden="true">

web/src/lib/components/shared-components/side-bar/more-information-albums.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store.js';
-  import { s } from '$lib/utils.js';
   import { type AlbumCountResponseDto, getAlbumCount } from '@immich/sdk';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { t } from 'svelte-i18n';
 
   export let albumCountType: keyof AlbumCountResponseDto;
 
@@ -19,6 +18,6 @@
   <LoadingSpinner />
 {:then data}
   <div>
-    <p>{data[albumCountType].toLocaleString($locale)} Album{s(data[albumCountType])}</p>
+    <p>{$t('albums_count', { values: { count: data[albumCountType] } })}</p>
   </div>
 {/await}

web/src/lib/components/shared-components/side-bar/more-information-assets.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store.js';
-  import { s } from '$lib/utils.js';
   import { getAssetStatistics } from '@immich/sdk';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { t } from 'svelte-i18n';
 
   export let assetStats: NonNullable<Parameters<typeof getAssetStatistics>[0]>;
 </script>
@@ -11,7 +10,7 @@
   <LoadingSpinner />
 {:then data}
   <div>
-    <p>{data.videos.toLocaleString($locale)} Video{s(data.videos)}</p>
-    <p>{data.images.toLocaleString($locale)} Photo{s(data.images)}</p>
+    <p>{$t('videos_count', { values: { count: data.videos } })}</p>
+    <p>{$t('photos_count', { values: { count: data.images } })}</p>
   </div>
 {/await}

web/src/lib/components/shared-components/status-box.svelte

@@ -59,8 +59,12 @@
           <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%" />
         </div>
         <p class="text-xs">
-          {asByteUnitString(usedBytes, $locale)} of
-          {asByteUnitString(availableBytes, $locale)} used
+          {$t('storage_usage', {
+            values: {
+              used: asByteUnitString(usedBytes, $locale),
+              available: asByteUnitString(availableBytes, $locale),
+            },
+          })}
         </p>
       {:else}
         <div class="mt-2">