chore(web): another missing translations

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -2,13 +2,20 @@ import { sdkMock } from '$lib/__mocks__/sdk.mock';
 import { albumFactory } from '@test-data';
 import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor, type RenderResult } from '@testing-library/svelte';
+import { init, register, waitLocale } from 'svelte-i18n';
 import AlbumCard from '../album-card.svelte';
 
 const onShowContextMenu = vi.fn();
 
 describe('AlbumCard component', () => {
   let sut: RenderResult<AlbumCard>;
 
+  beforeAll(async () => {
+    await init({ fallbackLocale: 'en-US' });
+    register('en-US', () => import('$lib/i18n/en.json'));
+    await waitLocale('en-US');
+  });
+
   it.each([
     {
       album: albumFactory.build({ albumThumbnailAssetId: null, shared: false, assetCount: 0 }),
@@ -36,7 +43,7 @@ describe('AlbumCard component', () => {
     const albumImgElement = sut.getByTestId('album-image');
     const albumNameElement = sut.getByTestId('album-name');
     const albumDetailsElement = sut.getByTestId('album-details');
-    const detailsText = `${count} items` + (shared ? ' . shared' : '');
+    const detailsText = `${count} items` + (shared ? ' . Shared' : '');
 
     expect(albumImgElement).toHaveAttribute('src');
     expect(albumImgElement).toHaveAttribute('alt', album.albumName);

web/src/lib/components/album-page/album-card.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import type { AlbumResponseDto } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { getContextMenuPosition, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { s } from '$lib/utils';
   import { t } from 'svelte-i18n';
 
   export let album: AlbumResponseDto;
@@ -66,8 +64,7 @@
     <span class="flex gap-2 text-sm dark:text-immich-dark-fg" data-testid="album-details">
       {#if showItemCount}
         <p>
-          {album.assetCount.toLocaleString($locale)}
-          item{s(album.assetCount)}
+          {$t('items_count', { values: { count: album.assetCount } })}
         </p>
       {/if}
 
@@ -79,7 +76,7 @@
         {#if $user.id === album.ownerId}
           <p>{$t('owned')}</p>
         {:else if album.owner}
-          <p>Shared by {album.owner.name}</p>
+          <p>{$t('shared_by_user', { values: { user: album.owner.name } })}</p>
         {:else}
           <p>{$t('shared')}</p>
         {/if}

web/src/lib/components/album-page/album-options.svelte

@@ -65,7 +65,7 @@
           />
         {/if}
         <SettingSwitch
-          title="Comments & likes"
+          title={$t('comments_and_likes')}
           subtitle={$t('let_others_respond')}
           checked={album.isActivityEnabled}
           on:toggle={() => dispatch('toggleEnableActivity')}

web/src/lib/components/album-page/album-summary.svelte

@@ -2,6 +2,7 @@
   import { dateFormats } from '$lib/constants';
   import { locale } from '$lib/stores/preferences.store';
   import type { AlbumResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
 
   export let album: AlbumResponseDto;
 
@@ -28,5 +29,5 @@
 <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
   <span>{getDateRange(startDate, endDate)}</span>
   <span>•</span>
-  <span>{album.assetCount} items</span>
+  <span>{$t('items_count', { values: { count: album.assetCount } })}</span>
 </span>

web/src/lib/components/album-page/albums-controls.svelte

@@ -4,6 +4,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import {
     AlbumFilter,
+    AlbumSortBy,
     AlbumGroupBy,
     AlbumViewMode,
     albumViewSettings,
@@ -25,6 +26,7 @@
     type AlbumGroupOptionMetadata,
     type AlbumSortOptionMetadata,
     findGroupOptionMetadata,
+    findFilterOption,
     findSortOptionMetadata,
     getSelectedAlbumGroupOption,
     groupOptionsMetadata,
@@ -43,6 +45,11 @@
     return ordering === SortOrder.Asc ? SortOrder.Desc : SortOrder.Asc;
   };
 
+  const handleChangeAlbumFilter = (filter: string, defaultFilter: AlbumFilter) => {
+    $albumViewSettings.filter =
+      Object.keys(albumFilterNames).find((key) => albumFilterNames[key as AlbumFilter] === filter) ?? defaultFilter;
+  };
+
   const handleChangeGroupBy = ({ id, defaultOrder }: AlbumGroupOptionMetadata) => {
     if ($albumViewSettings.groupBy === id) {
       $albumViewSettings.groupOrder = flipOrdering($albumViewSettings.groupOrder);
@@ -76,6 +83,8 @@
     }
   }
 
+  $: selectedFilterOption = albumFilterNames[findFilterOption($albumViewSettings.filter)];
+
   $: selectedSortOption = findSortOptionMetadata($albumViewSettings.sortBy);
 
   $: {
@@ -88,14 +97,35 @@
   }
 
   $: sortIcon = $albumViewSettings.sortOrder === SortOrder.Desc ? mdiArrowDownThin : mdiArrowUpThin;
+
+  const albumFilterNames: { [key in AlbumFilter]: string } = {
+    [AlbumFilter.All]: $t('all'),
+    [AlbumFilter.Owned]: $t('owned'),
+    [AlbumFilter.Shared]: $t('shared'),
+  };
+
+  const albumSortByNames: { [key in AlbumSortBy]: string } = {
+    [AlbumSortBy.Title]: $t('sort_title'),
+    [AlbumSortBy.ItemCount]: $t('sort_items'),
+    [AlbumSortBy.DateModified]: $t('sort_modified'),
+    [AlbumSortBy.DateCreated]: $t('sort_created'),
+    [AlbumSortBy.MostRecentPhoto]: $t('sort_recent'),
+    [AlbumSortBy.OldestPhoto]: $t('sort_oldest'),
+  };
+
+  const albumGroupByNames: { [key in AlbumGroupBy]: string } = {
+    [AlbumGroupBy.None]: $t('group_no'),
+    [AlbumGroupBy.Owner]: $t('group_owner'),
+    [AlbumGroupBy.Year]: $t('group_year'),
+  };
 </script>
 
 <!-- Filter Albums by Sharing Status (All, Owned, Shared) -->
 <div class="hidden xl:block h-10">
   <GroupTab
-    filters={Object.keys(AlbumFilter)}
-    selected={$albumViewSettings.filter}
-    onSelect={(selected) => ($albumViewSettings.filter = selected)}
+    filters={Object.values(albumFilterNames)}
+    selected={selectedFilterOption}
+    onSelect={(selected) => handleChangeAlbumFilter(selected, AlbumFilter.All)}
   />
 </div>
 
@@ -118,8 +148,8 @@
   options={Object.values(sortOptionsMetadata)}
   selectedOption={selectedSortOption}
   on:select={({ detail }) => handleChangeSortBy(detail)}
-  render={({ text }) => ({
-    title: text,
+  render={({ id }) => ({
+    title: albumSortByNames[id],
     icon: sortIcon,
   })}
 />
@@ -130,8 +160,8 @@
   options={Object.values(groupOptionsMetadata)}
   selectedOption={selectedGroupOption}
   on:select={({ detail }) => handleChangeGroupBy(detail)}
-  render={({ text, isDisabled }) => ({
-    title: text,
+  render={({ id, isDisabled }) => ({
+    title: albumGroupByNames[id],
     icon: groupIcon,
     disabled: isDisabled(),
   })}

web/src/lib/components/album-page/albums-list.svelte

@@ -304,7 +304,7 @@
 
     const isConfirmed = await dialogController.show({
       id: 'delete-album',
-      prompt: `Are you sure you want to delete the album ${albumToDelete.albumName}?\nIf this album is shared, other users will not be able to access it anymore.`,
+      prompt: $t('album_delete_confirmation', { values: { album: albumToDelete.albumName } }),
     });
 
     if (!isConfirmed) {
@@ -340,7 +340,7 @@
       message: $t('album_info_updated'),
       type: NotificationType.Info,
       button: {
-        text: 'View Album',
+        text: $t('view_album'),
         onClick() {
           return goto(`${AppRoute.ALBUMS}/${album.id}`);
         },

web/src/lib/components/album-page/albums-table-header.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { albumViewSettings, SortOrder } from '$lib/stores/preferences.store';
+  import { albumViewSettings, SortOrder, AlbumSortBy } from '$lib/stores/preferences.store';
   import type { AlbumSortOptionMetadata } from '$lib/utils/album-utils';
+  import { t } from 'svelte-i18n';
 
   export let option: AlbumSortOptionMetadata;
 
@@ -12,6 +13,15 @@
       $albumViewSettings.sortOrder = option.defaultOrder;
     }
   };
+
+  const albumSortByNames: { [key in AlbumSortBy]: string } = {
+    [AlbumSortBy.Title]: $t('sort_title'),
+    [AlbumSortBy.ItemCount]: $t('sort_items'),
+    [AlbumSortBy.DateModified]: $t('sort_modified'),
+    [AlbumSortBy.DateCreated]: $t('sort_created'),
+    [AlbumSortBy.MostRecentPhoto]: $t('sort_recent'),
+    [AlbumSortBy.OldestPhoto]: $t('sort_oldest'),
+  };
 </script>
 
 <th class="text-sm font-medium {option.columnStyle}">
@@ -27,6 +37,6 @@
         &#8593;
       {/if}
     {/if}
-    {option.text}
+    {albumSortByNames[option.id]}
   </button>
 </th>

web/src/lib/components/album-page/albums-table-row.svelte

@@ -34,7 +34,9 @@
         path={mdiShareVariantOutline}
         size="16"
         class="inline ml-1 opacity-70"
-        title={album.ownerId === $user.id ? $t('shared_by_you') : `Shared by ${album.owner.name}`}
+        title={album.ownerId === $user.id
+          ? $t('shared_by_you')
+          : $t('shared_by_user', { values: { user: album.owner.name } })}
       />
     {/if}
   </td>

web/src/lib/components/asset-viewer/album-list-item-details.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { AlbumResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
 
   export let album: AlbumResponseDto;
 </script>
 
-<span>{album.assetCount} items</span>
+<span>{$t('items_count', { values: { count: album.assetCount } })}</span>
 {#if album.shared}
   <span>• Shared</span>
 {/if}

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -253,18 +253,18 @@
               <MenuOption
                 icon={mdiDatabaseRefreshOutline}
                 on:click={() => onJobClick(AssetJobName.RefreshMetadata)}
-                text={getAssetJobName(AssetJobName.RefreshMetadata)}
+                text={$getAssetJobName(AssetJobName.RefreshMetadata)}
               />
               <MenuOption
                 icon={mdiImageRefreshOutline}
                 on:click={() => onJobClick(AssetJobName.RegenerateThumbnail)}
-                text={getAssetJobName(AssetJobName.RegenerateThumbnail)}
+                text={$getAssetJobName(AssetJobName.RegenerateThumbnail)}
               />
               {#if asset.type === AssetTypeEnum.Video}
                 <MenuOption
                   icon={mdiCogRefreshOutline}
                   on:click={() => onJobClick(AssetJobName.TranscodeVideo)}
-                  text={getAssetJobName(AssetJobName.TranscodeVideo)}
+                  text={$getAssetJobName(AssetJobName.TranscodeVideo)}
                 />
               {/if}
             {/if}

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

@@ -162,7 +162,7 @@
           reactions = [...reactions, isLiked];
         }
       } catch (error) {
-        handleError(error, "Can't change favorite for asset");
+        handleError(error, $t('errors.unable_to_change_favorite'));
       }
     }
   };
@@ -189,7 +189,7 @@
         const { comments } = await getActivityStatistics({ assetId: asset.id, albumId: album.id });
         numberOfComments = comments;
       } catch (error) {
-        handleError(error, "Can't get number of comments");
+        handleError(error, $t('errors.unable_to_get_comments_number'));
       }
     }
   };
@@ -395,10 +395,10 @@
 
       notificationController.show({
         type: NotificationType.Info,
-        message: asset.isFavorite ? `Added to favorites` : `Removed from favorites`,
+        message: $t(asset.isFavorite ? 'added_to_favorites' : 'removed_from_favorites'),
       });
     } catch (error) {
-      handleError(error, `Unable to ${asset.isFavorite ? `add asset to` : `remove asset from`} favorites`);
+      handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
     }
   };
 
@@ -429,7 +429,7 @@
 
       notificationController.show({
         type: NotificationType.Info,
-        message: `Restored asset`,
+        message: $t('restored_asset'),
       });
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_assets'));
@@ -446,9 +446,9 @@
   const handleRunJob = async (name: AssetJobName) => {
     try {
       await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
-      notificationController.show({ type: NotificationType.Info, message: getAssetJobMessage(name) });
+      notificationController.show({ type: NotificationType.Info, message: $getAssetJobMessage(name) });
     } catch (error) {
-      handleError(error, `Unable to submit job`);
+      handleError(error, $t('errors.unable_to_submit_job'));
     }
   };
 
@@ -528,7 +528,7 @@
         timeout: 1500,
       });
     } catch (error) {
-      handleError(error, 'Unable to update album cover');
+      handleError(error, $t('errors.unable_to_update_album_cover'));
     }
   };
 

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

@@ -153,8 +153,7 @@
         <div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">{$t('asset_offline')}</div>
         <div class="rounded-b border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
           <p>
-            This asset is offline. Immich can not access its file location. Please ensure the asset is available and
-            then rescan the library.
+            {$t('asset_offline_description')}
           </p>
         </div>
       </div>
@@ -170,8 +169,8 @@
         <div class="flex gap-2 items-center">
           {#if unassignedFaces.length > 0}
             <Icon
-              ariaLabel="Asset has unassigned faces"
-              title="Asset has unassigned faces"
+              ariaLabel={$t('asset_has_unassigned_faces')}
+              title={$t('asset_has_unassigned_faces')}
               color="currentColor"
               path={mdiAccountOff}
               size="24"
@@ -243,11 +242,11 @@
                     )}
                   >
                     {#if ageInMonths <= 11}
-                      Age {ageInMonths} months
+                      {$t('age_months', { values: { months: ageInMonths } })}
                     {:else if ageInMonths > 12 && ageInMonths <= 23}
-                      Age 1 year, {ageInMonths - 12} months
+                      {$t('age_year_months', { values: { months: ageInMonths - 12 } })}
                     {:else}
-                      Age {age}
+                      {$t('age_years', { values: { years: age } })}
                     {/if}
                   </p>
                 {/if}
@@ -452,7 +451,7 @@
               target="_blank"
               class="font-medium text-immich-primary"
             >
-              Open in OpenStreetMap
+              {$t('open_in_openstreetmap')}
             </a>
           </div>
         </svelte:fragment>

web/src/lib/components/faces-page/people-search.svelte

@@ -62,7 +62,7 @@
       searchedPeople = data;
       searchWord = searchName;
     } catch (error) {
-      handleError(error, $t('cant_search_people'));
+      handleError(error, $t('errors.cant_search_people'));
     } finally {
       clearTimeout(timeout);
       timeout = null;