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

* feat(web): add more translations

* formatting

web/src/lib/components/admin-page/delete-confirm-dialogue.svelte

@@ -74,7 +74,7 @@
       <div class="flex justify-center m-4 gap-2">
         <Checkbox
           id="queue-user-deletion-checkbox"
-          label="Queue user and assets for immediate deletion"
+          label={$t('admin.user_delete_immediately_checkbox')}
           labelClass="text-sm dark:text-immich-dark-fg"
           bind:checked={forceDelete}
           on:change={() => {

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -51,7 +51,7 @@
   >
     <svelte:fragment slot="prompt">
       <div class="flex flex-col gap-4">
-        <p>Are you sure you want to disable all login methods? Login will be completely disabled.</p>
+        <p>{$t('admin.authentication_settings_disable_all')}</p>
         <p>
           <FormatMessage key="admin.authentication_settings_reenable" let:message>
             <a

web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte

@@ -18,7 +18,7 @@
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
 
-  const cronExpressionOptions = [
+  $: cronExpressionOptions = [
     { title: $t('interval.night_at_midnight'), expression: '0 0 * * *' },
     { title: $t('interval.night_at_twoam'), expression: '0 2 * * *' },
     { title: $t('interval.day_at_onepm'), expression: '0 13 * * *' },

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -11,6 +11,7 @@
     SettingInputFieldType,
   } from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import { t } from 'svelte-i18n';
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;
@@ -52,12 +53,16 @@
         <SettingAccordion key="reverse-geocoding" title={$t('admin.map_reverse_geocoding_settings')}>
           <svelte:fragment slot="subtitle">
             <p class="text-sm dark:text-immich-dark-fg">
-              Manage <a
-                href="https://immich.app/docs/features/reverse-geocoding"
-                class="underline"
-                target="_blank"
-                rel="noreferrer">{$t('admin.map_reverse_geocoding')}</a
-              > settings
+              <FormatMessage key="admin.map_manage_reverse_geocoding_settings" let:message>
+                <a
+                  href="https://immich.app/docs/features/reverse-geocoding"
+                  class="underline"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {message}
+                </a>
+              </FormatMessage>
             </p>
           </svelte:fragment>
           <div class="ml-4 mt-4 flex flex-col gap-4">

web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte

@@ -12,13 +12,13 @@
 </script>
 
 <div class="mt-2 text-sm">
-  <h4>DATE & TIME</h4>
+  <h4>{$t('date_and_time').toUpperCase()}</h4>
 </div>
 
 <div class="mt-2 rounded-lg bg-gray-200 p-4 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
   <div class="mb-2 text-gray-600 dark:text-immich-dark-fg">
-    <p>Asset's creation timestamp is used for the datetime information</p>
-    <p>Sample time 2022-02-03T04:56:05.250</p>
+    <p>{$t('admin.storage_template_date_time_description')}</p>
+    <p>{$t('admin.storage_template_date_time_sample', { values: { date: '2022-02-03T04:56:05.250' } })}</p>
   </div>
   <div class="flex gap-[40px]">
     <div>

web/src/lib/components/asset-viewer/detail-panel-description.svelte

@@ -18,7 +18,7 @@
       await updateAsset({ id: asset.id, updateAssetDto: { description: newDescription } });
       notificationController.show({
         type: NotificationType.Info,
-        message: 'Asset description has been updated',
+        message: $t('asset_description_updated'),
       });
     } catch (error) {
       handleError(error, $t('cannot_update_the_description'));

web/src/lib/components/asset-viewer/panorama-viewer.svelte

@@ -4,6 +4,7 @@
   import type { AdapterConstructor, PluginConstructor } from '@photo-sphere-viewer/core';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { t } from 'svelte-i18n';
   export let asset: Pick<AssetResponseDto, 'id' | 'type'>;
 
   const photoSphereConfigs =
@@ -35,6 +36,6 @@
   {:then [data, module, adapter, plugins, navbar]}
     <svelte:component this={module.default} panorama={data} plugins={plugins ?? undefined} {navbar} {adapter} />
   {:catch}
-    Failed to load asset
+    {$t('errors.failed_to_load_asset')}
   {/await}
 </div>

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -209,7 +209,7 @@
         </div>
       {:else}
         {#each peopleWithFaces as face, index}
-          {@const personName = face.person ? face.person?.name : 'Unassigned'}
+          {@const personName = face.person ? face.person?.name : $t('face_unassigned')}
           <div class="relative z-[20001] h-[115px] w-[95px]">
             <div
               role="button"
@@ -261,8 +261,8 @@
                       curve
                       shadow
                       url="/src/lib/assets/no-thumbnail.png"
-                      altText="Unassigned"
-                      title="Unassigned"
+                      altText={$t('face_unassigned')}
+                      title={$t('face_unassigned')}
                       widthStyle="90px"
                       heightStyle="90px"
                       thumbhash={null}
@@ -273,8 +273,8 @@
                       curve
                       shadow
                       url={data === null ? '/src/lib/assets/no-thumbnail.png' : data}
-                      altText="Unassigned"
-                      title="Unassigned"
+                      altText={$t('face_unassigned')}
+                      title={$t('face_unassigned')}
                       widthStyle="90px"
                       heightStyle="90px"
                       thumbhash={null}
@@ -289,7 +289,7 @@
                   {#if selectedPersonToReassign[face.id]?.id}
                     {selectedPersonToReassign[face.id]?.name}
                   {:else}
-                    <span class={personName == 'Unassigned' ? 'dark:text-gray-500' : ''}>{personName}</span>
+                    <span class={personName === $t('face_unassigned') ? 'dark:text-gray-500' : ''}>{personName}</span>
                   {/if}
                 </p>
               {/if}
@@ -322,7 +322,7 @@
                   <div
                     class="flex place-content-center place-items-center rounded-full bg-[#d3d3d3] p-1 transition-all absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                   >
-                    <Icon color="primary" path={mdiAccountOff} ariaLabel="Just a face" size="18" />
+                    <Icon color="primary" path={mdiAccountOff} ariaHidden size="18" />
                   </div>
                 {/if}
               </div>

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>

web/src/lib/components/user-settings-page/device-card.svelte

@@ -51,7 +51,7 @@
     <div class="flex flex-col justify-center gap-1 dark:text-white">
       <span class="text-sm">
         {#if device.deviceType || device.deviceOS}
-          <span>{device.deviceOS || 'Unknown'} • {device.deviceType || 'Unknown'}</span>
+          <span>{device.deviceOS || $t('unknown')} • {device.deviceType || $t('unknown')}</span>
         {:else}
           <span>{$t('unknown')}</span>
         {/if}