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/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">