fix(web): missing svelte translations (immich-app#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 <[email protected]>

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

Co-authored-by: Michel Heusschen <[email protected]>

* 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 <[email protected]>

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

web/src/lib/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "account": "Account",
+  "account_settings": "Account Settings",
   "acknowledge": "Acknowledge",
   "action": "Action",
   "actions": "Actions",
@@ -296,6 +297,7 @@
   "album_updated": "Album updated",
   "album_updated_setting_description": "Receive an email notification when a shared album has new assets",
   "albums": "Albums",
+  "albums_count": "{count, plural, one {{count, number} Album} other {{count, number} Albums}}",
   "all": "All",
   "all_people": "All people",
   "allow_dark_mode": "Allow dark mode",
@@ -332,7 +334,9 @@
   "change_password": "Change password",
   "change_your_password": "Change your password",
   "changed_visibility_successfully": "Changed visibility successfully",
+  "check_all": "Check All",
   "check_logs": "Check Logs",
+  "choose_matching_people_to_merge": "Choose matching people to merge",
   "city": "City",
   "clear": "Clear",
   "clear_all": "Clear all",
@@ -345,6 +349,7 @@
   "comments_are_disabled": "Comments are disabled",
   "confirm": "Confirm",
   "confirm_admin_password": "Confirm Admin Password",
+  "confirm_delete_shared_link": "Are you sure you want to delete this shared link?",
   "confirm_password": "Confirm Password",
   "contain": "Contain",
   "context": "Context",
@@ -463,6 +468,7 @@
     "unable_to_delete_asset": "Unable to delete asset",
     "unable_to_delete_exclusion_pattern": "Unable to delete exclusion pattern",
     "unable_to_delete_import_path": "Unable to delete import path",
+    "unable_to_delete_shared_link": "Unable to delete shared link",
     "unable_to_delete_user": "Unable to delete user",
     "unable_to_edit_exclusion_pattern": "Unable to edit exclusion pattern",
     "unable_to_edit_import_path": "Unable to edit import path",
@@ -526,6 +532,7 @@
   "filename": "Filename",
   "filetype": "Filetype",
   "filter_people": "Filter people",
+  "find_them_fast": "Find them fast by name with search",
   "fix_incorrect_match": "Fix incorrect match",
   "force_re-scan_library_files": "Force Re-scan All Library Files",
   "forward": "Forward",
@@ -600,6 +607,7 @@
   "memories": "Memories",
   "memories_setting_description": "Manage what you see in your memories",
   "menu": "Menu",
+  "merge": "Merge",
   "merge_people": "Merge people",
   "merge_people_successfully": "Merge people successfully",
   "minimize": "Minimize",
@@ -624,6 +632,7 @@
   "no_albums_message": "Create an album to organize your photos and videos",
   "no_archived_assets_message": "Archive photos and videos to hide them from your Photos view",
   "no_assets_message": "CLICK TO UPLOAD YOUR FIRST PHOTO",
+  "no_duplicates_found": "No duplicates were found.",
   "no_exif_info_available": "No exif info available",
   "no_explore_results_message": "Upload more photos to explore your collection.",
   "no_favorites_message": "Add favorites to quickly find your best pictures and videos",
@@ -633,12 +642,16 @@
   "no_results": "No results",
   "no_shared_albums_message": "Create an album to share photos and videos with people in your network",
   "not_in_any_album": "Not in any album",
+  "note_apply_storage_label_to_previously_uploaded assets": "Note: To apply the Storage Label to previously uploaded assets, run the",
+  "note_unlimited_quota": "Note: Enter 0 for unlimited quota",
   "notes": "Notes",
   "notification_toggle_setting_description": "Toggle email notifications",
   "notifications": "Notifications",
   "notifications_setting_description": "Manage notifications",
   "oauth": "OAuth",
   "offline": "Offline",
+  "offline_paths": "Offline paths",
+  "offline_paths_description": "These results may be due to manual deletion of files that are not part of an external library.",
   "ok": "Ok",
   "oldest_first": "Oldest first",
   "online": "Online",
@@ -679,6 +692,7 @@
   "permanently_delete": "Permanently delete",
   "permanently_deleted_asset": "Permanently deleted asset",
   "photos": "Photos",
+  "photos_count": "{count, plural, one {{count, number} Photo} other {{count, number} Photos}}",
   "photos_from_previous_years": "Photos from previous years",
   "pick_a_location": "Pick a location",
   "place": "Place",
@@ -714,10 +728,12 @@
   "repair_no_results_message": "Untracked and missing files will show up here",
   "replace_with_upload": "Replace with upload",
   "require_password": "Require password",
+  "require_user_to_change_password_on_first_login": "Require user to change password on first login",
   "reset": "Reset",
   "reset_password": "Reset password",
   "reset_people_visibility": "Reset people visibility",
   "restore": "Restore",
+  "restore_all": "Restore all",
   "restore_user": "Restore user",
   "resume": "Resume",
   "retry_upload": "Retry upload",
@@ -760,6 +776,7 @@
   "select_trash_all": "Select trash all",
   "selected": "Selected",
   "send_message": "Send message",
+  "send_welcome_email": "Send welcome email",
   "server": "Server",
   "server_stats": "Server Stats",
   "set": "Set",
@@ -780,6 +797,7 @@
   "sharing": "Sharing",
   "sharing_sidebar_description": "Display a link to Sharing in the sidebar",
   "show_album_options": "Show album options",
+  "show_and_hide_people": "Show & hide people",
   "show_file_location": "Show file location",
   "show_gallery": "Show gallery",
   "show_hidden_people": "Show hidden people",
@@ -793,6 +811,7 @@
   "show_progress_bar": "Show Progress Bar",
   "show_search_options": "Show search options",
   "shuffle": "Shuffle",
+  "sign_out": "Sign Out",
   "sign_up": "Sign up",
   "size": "Size",
   "skip_to_content": "Skip to content",
@@ -812,6 +831,7 @@
   "stop_sharing_photos_with_user": "Stop sharing your photos with this user",
   "storage": "Storage",
   "storage_label": "Storage Label",
+  "storage_usage": "{used} of {available} used",
   "submit": "Submit",
   "suggestions": "Suggestions",
   "sunrise_on_the_beach": "Sunrise on the beach",
@@ -832,6 +852,7 @@
   "trash": "Trash",
   "trash_all": "Trash All",
   "trash_no_results_message": "Trashed photos and videos will show up here.",
+  "trashed_items_will_be_permanently_deleted_after": "Trashed items will be permanently deleted after {days, plural, one {# day} other {# days}}.",
   "type": "Type",
   "unarchive": "Unarchive",
   "unarchived": "Unarchived",
@@ -845,6 +866,8 @@
   "unlinked_oauth_account": "Unlinked OAuth account",
   "unselect_all": "Unselect all",
   "unstack": "Un-stack",
+  "untracked_files": "Untracked files",
+  "untracked_files_decription": "These files are not tracked by the application. They can be the results of failed moves, interrupted uploads, or left behind due to a bug",
   "up_next": "Up next",
   "updated_password": "Updated password",
   "upload": "Upload",
@@ -864,6 +887,7 @@
   "video_hover_setting": "Play video thumbnail on hover",
   "video_hover_setting_description": "Play video thumbnail when mouse is hovering over item. Even when disabled, playback can be started by hovering over the play icon.",
   "videos": "Videos",
+  "videos_count": "{count, plural, one {# Video} other {# Videos}}",
   "view_all": "View All",
   "view_all_users": "View all users",
   "view_links": "View links",
@@ -875,5 +899,6 @@
   "welcome_to_immich": "Welcome to immich",
   "year": "Year",
   "yes": "Yes",
+  "you_dont_have_any_shared_links": "You don't have any shared links",
   "zoom_image": "Zoom Image"
 }

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -510,7 +510,7 @@
                 disabled={album.assetCount === 0}
                 on:click={() => (viewMode = ViewMode.SELECT_USERS)}
               >
-                Share
+                {$t('share')}
               </Button>
             {/if}
           </svelte:fragment>

web/src/routes/(user)/people/+page.svelte

@@ -422,7 +422,7 @@
         <LinkButton on:click={() => (selectHidden = !selectHidden)}>
           <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
             <Icon path={mdiEyeOutline} size="18" />
-            <p class="ml-2">Show & hide people</p>
+            <p class="ml-2">{$t('show_and_hide_people')}</p>
           </div>
         </LinkButton>
       </div>

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -492,7 +492,9 @@
                       </p>
                     {:else}
                       <p class="font-medium">{$t('add_a_name')}</p>
-                      <p class="text-sm text-gray-500 dark:text-immich-gray">Find them fast by name with search</p>
+                      <p class="text-sm text-gray-500 dark:text-immich-gray">
+                        {$t('find_them_fast')}
+                      </p>
                     {/if}
                   </div>
                 </button>

web/src/routes/(user)/sharing/sharedlinks/+page.svelte

@@ -33,8 +33,8 @@
     const isConfirmed = await dialogController.show({
       id: 'delete-shared-link',
       title: $t('delete_shared_link'),
-      prompt: 'Are you sure you want to delete this shared link?',
-      confirmText: 'Delete',
+      prompt: $t('confirm_delete_shared_link'),
+      confirmText: $t('delete'),
     });
 
     if (!isConfirmed) {
@@ -46,7 +46,7 @@
       notificationController.show({ message: $t('deleted_shared_link'), type: NotificationType.Info });
       await refresh();
     } catch (error) {
-      handleError(error, 'Unable to delete shared link');
+      handleError(error, $t('errors.unable_to_delete_shared_link'));
     }
   };
 
@@ -72,7 +72,7 @@
     <div
       class="m-auto flex w-[50%] place-content-center place-items-center rounded-lg bg-gray-100 dark:bg-immich-dark-gray dark:text-immich-gray p-12"
     >
-      <p>You don't have any shared links</p>
+      <p>{$t('you_dont_have_any_shared_links')}</p>
     </div>
   {:else}
     <div class="m-auto flex w-[50%] flex-col">

web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -101,7 +101,7 @@
       <LinkButton on:click={handleRestoreTrash} disabled={$isMultiSelectState}>
         <div class="flex place-items-center gap-2 text-sm">
           <Icon path={mdiHistory} size="18" />
-          Restore all
+          {$t('restore_all')}
         </div>
       </LinkButton>
       <LinkButton on:click={() => handleEmptyTrash()} disabled={$isMultiSelectState}>
@@ -114,7 +114,7 @@
 
     <AssetGrid {assetStore} {assetInteractionStore}>
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
-        Trashed items will be permanently deleted after {$serverConfig.trashDays} days.
+        {$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
       </p>
       <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} slot="empty" />
     </AssetGrid>

web/src/routes/(user)/utilities/[duplicates]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -65,7 +65,7 @@
       {/key}
     {:else}
       <p class="text-center text-lg dark:text-white flex place-items-center place-content-center">
-        No duplicates were found.
+        {$t('no_duplicates_found')}
       </p>
     {/if}
   </div>