feat(web): translations (#9854)

* First test

* Added translation using Weblate (French)

* Translated using Weblate (German)

Currently translated at 100.0% (4 of 4 strings)

Translation: immich/web
Translate-URL: http://familie-mach.net/projects/immich/web/de/

* Translated using Weblate (French)

Currently translated at 100.0% (4 of 4 strings)

Translation: immich/web
Translate-URL: http://familie-mach.net/projects/immich/web/fr/

* Further testing

* Further testing

* Translated using Weblate (German)

Currently translated at 100.0% (18 of 18 strings)

Translation: immich/web
Translate-URL: http://familie-mach.net/projects/immich/web/de/

* Further work

* Update string file.

* More strings

* Automatically changed strings

* Add automatically translated german file for testing purposes

* Fix merge-face-selector component

* Make server stats strings uppercase

* Fix uppercase string

* Fix some strings in jobs-panel

* Fix lower and uppercase strings. Add a few additional string. Fix a few unnecessary replacements

* Update german test translations

* Fix typo in locales file

* Change string keys

* Extract more strings

* Extract and replace some more strings

* Update testtranslationfile

* Change translation keys

* Fix rebase errors

* Fix one more rebase error

* Remove german translation file

* Co-authored-by: Daniel Dietzler <danieldietzler@users.noreply.github.com>

* chore: clean up translations

* chore: add new line

* fix formatting

* chore: fixes

* fix: loading and tests

---------

Co-authored-by: root <root@Blacki>
Co-authored-by: admin <admin@example.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -6,6 +6,7 @@
   import { getMenuContext } from '../asset-select-context-menu.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   export let shared = false;
 
@@ -37,7 +38,7 @@
 
 <MenuOption
   on:click={() => (showAlbumPicker = true)}
-  text={shared ? 'Add to shared album' : 'Add to album'}
+  text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
   icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
 />
 

web/src/lib/components/photos-page/actions/archive-action.svelte

@@ -10,13 +10,14 @@
   import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline, mdiTimerSand } from '@mdi/js';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { t } from 'svelte-i18n';
 
   export let onArchive: OnArchive;
 
   export let menuItem = false;
   export let unarchive = false;
 
-  $: text = unarchive ? 'Unarchive' : 'Archive';
+  $: text = unarchive ? $t('unarchive') : $t('archive');
   $: icon = unarchive ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline;
 
   let loading = false;
@@ -42,7 +43,7 @@
       onArchive(ids, isArchived);
 
       notificationController.show({
-        message: `${isArchived ? 'Archived' : 'Unarchived'} ${ids.length}`,
+        message: `${isArchived ? $t('archived') : $t('unarchived')} ${ids.length}`,
         type: NotificationType.Info,
       });
 
@@ -61,7 +62,7 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title="Loading" icon={mdiTimerSand} />
+    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
   {:else}
     <CircleIconButton title={text} {icon} on:click={handleArchive} />
   {/if}

web/src/lib/components/photos-page/actions/asset-job-actions.svelte

@@ -8,6 +8,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { AssetJobName, AssetTypeEnum, runAssetJobs } from '@immich/sdk';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { t } from 'svelte-i18n';
 
   export let jobs: AssetJobName[] = [
     AssetJobName.RegenerateThumbnail,
@@ -26,7 +27,7 @@
       notificationController.show({ message: getAssetJobMessage(name), type: NotificationType.Info });
       clearSelect();
     } catch (error) {
-      handleError(error, 'Unable to submit job');
+      handleError(error, $t('errors.unable_to_submit_job'));
     }
   };
 </script>

web/src/lib/components/photos-page/actions/change-date-action.svelte

@@ -8,6 +8,7 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiCalendarEditOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
   export let menuItem = false;
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
@@ -20,14 +21,14 @@
     try {
       await updateAssets({ assetBulkUpdateDto: { ids, dateTimeOriginal } });
     } catch (error) {
-      handleError(error, 'Unable to change date');
+      handleError(error, $t('errors.unable_to_change_date'));
     }
     clearSelect();
   };
 </script>
 
 {#if menuItem}
-  <MenuOption text="Change date" icon={mdiCalendarEditOutline} on:click={() => (isShowChangeDate = true)} />
+  <MenuOption text={$t('change_date')} icon={mdiCalendarEditOutline} on:click={() => (isShowChangeDate = true)} />
 {/if}
 {#if isShowChangeDate}
   <ChangeDate

web/src/lib/components/photos-page/actions/change-location-action.svelte

@@ -7,6 +7,7 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiMapMarkerMultipleOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   export let menuItem = false;
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
@@ -20,7 +21,7 @@
     try {
       await updateAssets({ assetBulkUpdateDto: { ids, latitude: point.lat, longitude: point.lng } });
     } catch (error) {
-      handleError(error, 'Unable to update location');
+      handleError(error, $t('errors.unable_to_update_location'));
     }
     clearSelect();
   }
@@ -28,7 +29,7 @@
 
 {#if menuItem}
   <MenuOption
-    text="Change location"
+    text={$t('change_location')}
     icon={mdiMapMarkerMultipleOutline}
     on:click={() => (isShowChangeLocation = true)}
   />

web/src/lib/components/photos-page/actions/create-shared-link.svelte

@@ -3,12 +3,13 @@
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { t } from 'svelte-i18n';
 
   let showModal = false;
   const { getAssets } = getAssetControlContext();
 </script>
 
-<CircleIconButton title="Share" icon={mdiShareVariantOutline} on:click={() => (showModal = true)} />
+<CircleIconButton title={$t('share')} icon={mdiShareVariantOutline} on:click={() => (showModal = true)} />
 
 {#if showModal}
   <CreateSharedLinkModal assetIds={[...getAssets()].map(({ id }) => id)} onClose={() => (showModal = false)} />

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -6,6 +6,7 @@
   import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js';
   import { type OnDelete, deleteAssets } from '$lib/utils/actions';
   import DeleteAssetDialog from '../delete-asset-dialog.svelte';
+  import { t } from 'svelte-i18n';
 
   export let onAssetDelete: OnDelete;
   export let menuItem = false;
@@ -16,7 +17,7 @@
   let isShowConfirmation = false;
   let loading = false;
 
-  $: label = force ? 'Permanently delete' : 'Delete';
+  $: label = force ? $t('permanently_delete') : $t('delete');
 
   const handleTrash = async () => {
     if (force) {
@@ -40,7 +41,7 @@
 {#if menuItem}
   <MenuOption text={label} icon={mdiDeleteOutline} on:click={handleTrash} />
 {:else if loading}
-  <CircleIconButton title="Loading" icon={mdiTimerSand} />
+  <CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
 {:else}
   <CircleIconButton title={label} icon={mdiDeleteOutline} on:click={handleTrash} />
 {/if}

web/src/lib/components/photos-page/actions/download-action.svelte

@@ -4,6 +4,7 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { mdiCloudDownloadOutline, mdiFileDownloadOutline, mdiFolderDownloadOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   export let filename = 'immich.zip';
   export let menuItem = false;
@@ -26,7 +27,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text="Download" icon={menuItemIcon} on:click={handleDownloadFiles} />
+  <MenuOption text={$t('download')} icon={menuItemIcon} on:click={handleDownloadFiles} />
 {:else}
-  <CircleIconButton title="Download" icon={mdiCloudDownloadOutline} on:click={handleDownloadFiles} />
+  <CircleIconButton title={$t('download')} icon={mdiCloudDownloadOutline} on:click={handleDownloadFiles} />
 {/if}

web/src/lib/components/photos-page/actions/favorite-action.svelte

@@ -10,13 +10,14 @@
   import { updateAssets } from '@immich/sdk';
   import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { t } from 'svelte-i18n';
 
   export let onFavorite: OnFavorite;
 
   export let menuItem = false;
   export let removeFavorite: boolean;
 
-  $: text = removeFavorite ? 'Remove from favorites' : 'Favorite';
+  $: text = removeFavorite ? $t('remove_from_favorites') : $t('favorite');
   $: icon = removeFavorite ? mdiHeartMinusOutline : mdiHeartOutline;
 
   let loading = false;
@@ -62,7 +63,7 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title="Loading" icon={mdiTimerSand} />
+    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
   {:else}
     <CircleIconButton title={text} {icon} on:click={handleFavorite} />
   {/if}

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -10,6 +10,7 @@
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { s } from '$lib/utils';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import { t } from 'svelte-i18n';
 
   export let album: AlbumResponseDto;
   export let onRemove: ((assetIds: string[]) => void) | undefined;
@@ -56,7 +57,7 @@
 </script>
 
 {#if menuItem}
-  <MenuOption text="Remove from album" icon={mdiImageRemoveOutline} on:click={removeFromAlbum} />
+  <MenuOption text={$t('remove_from_album')} icon={mdiImageRemoveOutline} on:click={removeFromAlbum} />
 {:else}
-  <CircleIconButton title="Remove from album" icon={mdiDeleteOutline} on:click={removeFromAlbum} />
+  <CircleIconButton title={$t('remove_from_album')} icon={mdiDeleteOutline} on:click={removeFromAlbum} />
 {/if}

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -7,6 +7,7 @@
   import { NotificationType, notificationController } from '../../shared-components/notification/notification';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import { t } from 'svelte-i18n';
 
   export let sharedLink: SharedLinkResponseDto;
 
@@ -55,4 +56,4 @@
   };
 </script>
 
-<CircleIconButton title="Remove from shared link" on:click={handleRemove} icon={mdiDeleteOutline} />
+<CircleIconButton title={$t('remove_from_shared_link')} on:click={handleRemove} icon={mdiDeleteOutline} />

web/src/lib/components/photos-page/actions/restore-assets.svelte

@@ -10,6 +10,7 @@
   import { mdiHistory } from '@mdi/js';
   import Button from '../../elements/buttons/button.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { t } from 'svelte-i18n';
 
   export let onRestore: OnRestore | undefined;
 
@@ -32,7 +33,7 @@
 
       clearSelect();
     } catch (error) {
-      handleError(error, 'Error restoring assets');
+      handleError(error, $t('errors.unable_to_restore_assets'));
     } finally {
       loading = false;
     }
@@ -41,5 +42,5 @@
 
 <Button disabled={loading} size="sm" color="transparent-gray" shadow={false} rounded="lg" on:click={handleRestore}>
   <Icon path={mdiHistory} size="24" />
-  <span class="ml-2">Restore</span>
+  <span class="ml-2">{$t('restore')}</span>
 </Button>

web/src/lib/components/photos-page/actions/select-all-assets.svelte

@@ -4,6 +4,7 @@
   import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets.store';
   import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
   import { selectAllAssets } from '$lib/utils/asset-utils';
+  import { t } from 'svelte-i18n';
 
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
@@ -19,7 +20,7 @@
 </script>
 
 {#if $isSelectingAllAssets}
-  <CircleIconButton title="Unselect all" icon={mdiSelectRemove} on:click={handleCancel} />
+  <CircleIconButton title={$t('unselect_all')} icon={mdiSelectRemove} on:click={handleCancel} />
 {:else}
-  <CircleIconButton title="Select all" icon={mdiSelectAll} on:click={handleSelectAll} />
+  <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} on:click={handleSelectAll} />
 {/if}

web/src/lib/components/photos-page/actions/stack-action.svelte

@@ -4,6 +4,7 @@
   import { mdiImageMinusOutline, mdiImageMultipleOutline } from '@mdi/js';
   import { stackAssets, unstackAssets } from '$lib/utils/asset-utils';
   import type { OnStack, OnUnstack } from '$lib/utils/actions';
+  import { t } from 'svelte-i18n';
 
   export let unstack = false;
   export let onStack: OnStack | undefined;
@@ -39,7 +40,7 @@
 </script>
 
 {#if unstack}
-  <MenuOption text="Un-stack" icon={mdiImageMinusOutline} on:click={handleUnstack} />
+  <MenuOption text={$t('un-stack')} icon={mdiImageMinusOutline} on:click={handleUnstack} />
 {:else}
-  <MenuOption text="Stack" icon={mdiImageMultipleOutline} on:click={handleStack} />
+  <MenuOption text={$t('stack')} icon={mdiImageMultipleOutline} on:click={handleStack} />
 {/if}

web/src/lib/components/photos-page/delete-asset-dialog.svelte

@@ -4,6 +4,7 @@
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import Checkbox from '$lib/components/elements/checkbox.svelte';
   import { s } from '$lib/utils';
+  import { t } from 'svelte-i18n';
 
   export let size: number;
 
@@ -24,7 +25,7 @@
 
 <ConfirmDialog
   title="Permanently delete asset{s(size)}"
-  confirmText="Delete"
+  confirmText={$t('delete')}
   onConfirm={handleConfirm}
   onCancel={() => dispatch('cancel')}
 >