feat(web): add more translations (#10700)

* feat(web): add more translations

* formatting

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

@@ -57,7 +57,12 @@
 <div class="dark:text-immich-dark-fg">
   <div
     class="storage-status grid grid-cols-[64px_auto]"
-    title="Used {getByteUnitString(usedBytes, $locale, 3)} of {getByteUnitString(availableBytes, $locale, 3)}"
+    title={$t('storage_usage', {
+      values: {
+        used: getByteUnitString(usedBytes, $locale, 3),
+        available: getByteUnitString(availableBytes, $locale, 3),
+      },
+    })}
   >
     <div class="pb-[2.15rem] pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary group-hover:sm:pb-0 md:pb-0">
       <Icon path={mdiChartPie} size="24" />

web/src/lib/components/shared-components/upload-asset-preview.svelte

@@ -67,7 +67,7 @@
         {:else if uploadAsset.state === UploadState.DUPLICATED}
           <div class="h-[15px] rounded-md bg-immich-warning transition-all" style="width: 100%" />
           <p class="absolute top-0 h-full w-full text-center text-[10px]">
-            Skipped
+            {$t('asset_skipped')}
             {#if uploadAsset.message}
               ({uploadAsset.message})
             {/if}
@@ -75,7 +75,7 @@
         {:else if uploadAsset.state === UploadState.DONE}
           <div class="h-[15px] rounded-md bg-immich-success transition-all" style="width: 100%" />
           <p class="absolute top-0 h-full w-full text-center text-[10px]">
-            Uploaded
+            {$t('asset_uploaded')}
             {#if uploadAsset.message}
               ({uploadAsset.message})
             {/if}

web/src/lib/components/shared-components/user-avatar.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
   import { getProfileImageUrl } from '$lib/utils';
   import { type UserAvatarColor } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
 
   interface User {
     id: string;
@@ -77,7 +78,7 @@
     <img
       bind:this={img}
       src={getProfileImageUrl(user.id)}
-      alt="Profile image of {title}"
+      alt={$t('profile_image_of_user', { values: { user: title } })}
       class="h-full w-full object-cover"
       class:hidden={showFallback}
       draggable="false"

web/src/lib/components/shared-components/version-announcement-box.svelte

@@ -50,7 +50,7 @@
       </FormatMessage>
     </div>
 
-    <div class="mt-4 font-medium">Your friend, Alex</div>
+    <div class="mt-4 font-medium">{$t('version_announcement_closing')}</div>
 
     <div class="font-sm mt-8">
       <code>{$t('server_version')}: {serverVersion}</code>