chore(web): translations in page load functions (#10260)

web/src/lib/i18n/en.json

@@ -410,6 +410,7 @@
   "done": "Done",
   "download": "Download",
   "downloading": "Downloading",
+  "duplicates": "Duplicates",
   "duration": "Duration",
   "durations": {
     "days": "{days, plural, one {day} other {{days, number} days}}",
@@ -551,6 +552,7 @@
   "hour": "Hour",
   "image": "Image",
   "immich_logo": "Immich Logo",
+  "immich_web_interface": "Immich Web Interface",
   "import_from_json": "Import from JSON",
   "import_path": "Import path",
   "in_archive": "In archive",
@@ -793,6 +795,7 @@
   "shared_by_you": "Shared by you",
   "shared_from_partner": "Photos from {partner}",
   "shared_links": "Shared links",
+  "shared_photos_and_videos_count": "{assetCount} shared photos & videos.",
   "shared_with_partner": "Shared with {partner}",
   "sharing": "Sharing",
   "sharing_sidebar_description": "Display a link to Sharing in the sidebar",
@@ -896,6 +899,7 @@
   "viewer": "Viewer",
   "waiting": "Waiting",
   "week": "Week",
+  "welcome": "Welcome",
   "welcome_to_immich": "Welcome to immich",
   "year": "Year",
   "yes": "Yes",

web/src/routes/(user)/albums/+page.ts

@@ -1,17 +1,20 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAllAlbums } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
   const sharedAlbums = await getAllAlbums({ shared: true });
   const albums = await getAllAlbums({});
+  const $t = get(t);
 
   return {
     albums,
     sharedAlbums,
     meta: {
-      title: 'Albums',
+      title: $t('albums'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,15 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
 
   return {
     asset,
     meta: {
-      title: 'Archive',
+      title: $t('archive'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/(user)/explore/+page.ts

@@ -1,16 +1,19 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAllPeople, getExploreData } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
   const [items, response] = await Promise.all([getExploreData(), getAllPeople({ withHidden: false })]);
+  const $t = get(t);
 
   return {
     items,
     response,
     meta: {
-      title: 'Explore',
+      title: $t('explore'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,15 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
 
   return {
     asset,
     meta: {
-      title: 'Favorites',
+      title: $t('favorites'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,15 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
 
   return {
     asset,
     meta: {
-      title: 'Map',
+      title: $t('map'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,16 +1,19 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   const user = await authenticate();
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
 
   return {
     user,
     asset,
     meta: {
-      title: 'Memory',
+      title: $t('memory'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,6 +1,8 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getUser } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
@@ -8,11 +10,13 @@ export const load = (async ({ params }) => {
 
   const partner = await getUser({ id: params.userId });
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
+
   return {
     asset,
     partner,
     meta: {
-      title: 'Partner',
+      title: $t('partner'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,15 +1,19 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAllPeople } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
 
   const people = await getAllPeople({ withHidden: true });
+  const $t = get(t);
+
   return {
     people,
     meta: {
-      title: 'People',
+      title: $t('people'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,6 +1,8 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getPerson, getPersonStatistics } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
@@ -11,13 +13,14 @@ export const load = (async ({ params }) => {
     getPersonStatistics({ id: params.personId }),
     getAssetInfoFromParam(params),
   ]);
+  const $t = get(t);
 
   return {
     person,
     statistics,
     asset,
     meta: {
-      title: person.name || 'Person',
+      title: person.name || $t('person'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,14 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
+
   return {
     asset,
     meta: {
-      title: 'Photos',
+      title: $t('photos'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/(user)/places/+page.ts

@@ -1,15 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetsByCity } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
   const items = await getAssetsByCity();
+  const $t = get(t);
 
   return {
     items,
     meta: {
-      title: 'Places',
+      title: $t('places'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,14 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
+
   return {
     asset,
     meta: {
-      title: 'Search',
+      title: $t('search'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -2,12 +2,15 @@ import { getAssetThumbnailUrl, setSharedLink } from '$lib/utils';
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getMySharedLink, isHttpError } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   const { key } = params;
   await authenticate({ public: true });
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
 
   try {
     const sharedLink = await getMySharedLink({ key });
@@ -20,8 +23,8 @@ export const load = (async ({ params }) => {
       asset,
       key,
       meta: {
-        title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
+        title: sharedLink.album ? sharedLink.album.albumName : $t('public_share'),
-        description: sharedLink.description || `${assetCount} shared photos & videos.`,
+        description: sharedLink.description || $t('shared_photos_and_videos_count', { values: { assetCount } }),
         imageUrl: assetId ? getAssetThumbnailUrl(assetId) : '/feature-panel.png',
       },
     };
@@ -31,7 +34,7 @@ export const load = (async ({ params }) => {
         passwordRequired: true,
         sharedLinkKey: key,
         meta: {
-          title: 'Password Required',
+          title: $t('password_required'),
         },
       };
     }

web/src/routes/(user)/sharing/+page.ts

@@ -1,17 +1,20 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAllAlbums, getPartners } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
   const sharedAlbums = await getAllAlbums({ shared: true });
   const partners = await getPartners({ direction: 'shared-with' });
+  const $t = get(t);
 
   return {
     sharedAlbums,
     partners,
     meta: {
-      title: 'Sharing',
+      title: $t('sharing'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,11 +1,15 @@
 import { authenticate } from '$lib/utils/auth';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
+  const $t = get(t);
+
   return {
     meta: {
-      title: 'Shared Links',
+      title: $t('shared_links'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,14 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
+
   return {
     asset,
     meta: {
-      title: 'Trash',
+      title: $t('trash'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/(user)/utilities/+page.ts

@@ -1,15 +1,18 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
+  const $t = get(t);
 
   return {
     asset,
     meta: {
-      title: 'Utilities',
+      title: $t('utilities'),
     },
   };
 }) satisfies PageLoad;

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

@@ -1,18 +1,21 @@
 import { authenticate } from '$lib/utils/auth';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { getAssetDuplicates } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   await authenticate();
   const asset = await getAssetInfoFromParam(params);
   const duplicates = await getAssetDuplicates();
+  const $t = get(t);
 
   return {
     asset,
     duplicates,
     meta: {
-      title: 'Duplicates',
+      title: $t('duplicates'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/+page.ts

@@ -1,6 +1,8 @@
 import { AppRoute } from '$lib/constants';
 import { getServerConfig } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
+import { t } from 'svelte-i18n';
+import { get } from 'svelte/store';
 import { loadUser } from '../lib/utils/auth';
 import type { PageLoad } from './$types';
 
@@ -19,10 +21,12 @@ export const load = (async () => {
     redirect(302, AppRoute.AUTH_LOGIN);
   }
 
+  const $t = get(t);
+
   return {
     meta: {
-      title: 'Welcome 🎉',
+      title: $t('welcome') + ' 🎉',
-      description: 'Immich Web Interface',
+      description: $t('immich_web_interface'),
     },
   };
 }) satisfies PageLoad;