fix(web): wrap hardcoded strings with i18n translation function (#29612)

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

i18n/en.json

@@ -2150,6 +2150,7 @@
   "unknown": "Unknown",
   "unknown_country": "Unknown Country",
   "unknown_date": "Unknown date",
+  "unknown_schema": "Unknown schema",
   "unknown_year": "Unknown Year",
   "unlimited": "Unlimited",
   "unlink_motion_video": "Unlink motion video",

web/src/lib/components/SchemaConfiguration.svelte

@@ -107,6 +107,6 @@
     <Input bind:value={() => getValue<string>(), setValue} />
   </Field>
 {:else}
-  <Text>Unknown schema</Text>
+  <Text>{$t('unknown_schema')}</Text>
   <CodeBlock code={JSON.stringify(schema, null, 2)} />
 {/if}

web/src/lib/components/server-statistics/ServerStatisticsCard.svelte

@@ -37,18 +37,18 @@
   </div>
 
   {#await valuePromise}
-    <div class="relative mx-auto font-mono text-2xl font-medium">
+    <div class="relative mx-auto font-mono text-2xl font-medium" aria-label="0">
       <span class="shimmer-text text-gray-300 dark:text-gray-600">{zeros()}</span>
     </div>
   {:then data}
-    <div class="relative mx-auto font-mono text-2xl font-medium">
+    <div class="relative mx-auto font-mono text-2xl font-medium" aria-label="{data.value} {data.unit ?? ''}">
       <span class="text-gray-300 dark:text-gray-600">{zeros(data)}</span><span>{data.value}</span>
       {#if data.unit}
         <code class="font-mono text-base font-normal">{data.unit}</code>
       {/if}
     </div>
   {:catch _}
-    <div class="relative mx-auto font-mono text-2xl font-medium">
+    <div class="relative mx-auto font-mono text-2xl font-medium" aria-label="0">
       <span class="text-gray-300 dark:text-gray-600">{zeros()}</span>
     </div>
   {/await}

web/src/lib/i18n.spec.ts

@@ -58,14 +58,5 @@ describe('i18n', () => {
       expect(getClosestAvailableLocale(['sr_Cyrl'], allLocales)).toBe('sr_Cyrl');
       expect(getClosestAvailableLocale(['zh_Hant'], allLocales)).toBe('zh_Hant');
     });
-
-    it('should handle language aliases', () => {
-      const allLocales = ['zh-Hans', 'zh-Hant'];
-      expect(getClosestAvailableLocale(['zh-CN'], allLocales)).toBe('zh-Hans');
-      expect(getClosestAvailableLocale(['zh-HK'], allLocales)).toBe('zh-Hant');
-      expect(getClosestAvailableLocale(['zh-MO'], allLocales)).toBe('zh-Hant');
-      expect(getClosestAvailableLocale(['zh-SG'], allLocales)).toBe('zh-Hans');
-      expect(getClosestAvailableLocale(['zh-TW'], allLocales)).toBe('zh-Hant');
-    });
   });
 });

web/src/lib/utils/i18n.ts

@@ -13,14 +13,6 @@ export const getFormatter = async () => {
   return get(t);
 };
 
-const aliases: Record<string, string> = {
-  'zh-CN': 'zh-Hans',
-  'zh-HK': 'zh-Hant',
-  'zh-MO': 'zh-Hant',
-  'zh-SG': 'zh-Hans',
-  'zh-TW': 'zh-Hant',
-};
-
 const modules = import.meta.glob('$i18n/*.json');
 
 const fileCodes = Object.keys(modules)
@@ -41,9 +33,7 @@ const getSubLocales = (locale: string) => {
 
 export const getClosestAvailableLocale = (locales: readonly string[], allLocales: readonly string[]) => {
   const allLocalesSet = new Set(allLocales.map((locale) => convertBCP47(locale)));
-  return locales
-    .map((locale) => aliases[locale] ?? locale)
-    .find((locale) => getSubLocales(locale).some((subLocale) => allLocalesSet.has(subLocale)));
+  return locales.find((locale) => getSubLocales(locale).some((subLocale) => allLocalesSet.has(subLocale)));
 };
 
 export const getPreferredLocale = () => getClosestAvailableLocale(navigator.languages, langCodes);

web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte

@@ -3,6 +3,7 @@
   import { getFileSize } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AssetResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     asset: AssetResponseDto;
@@ -25,7 +26,9 @@
     <Thumbnail asset={toTimelineAsset(asset)} readonly onClick={() => onViewAsset(asset)} thumbnailSize={boxWidth} />
 
     {#if !!asset.libraryId}
-      <div class="absolute inset-e-3 bottom-1 rounded-xl bg-red-500 px-4 py-1 text-xs transition-colors">External</div>
+      <div class="absolute inset-e-3 bottom-1 rounded-xl bg-red-500 px-4 py-1 text-xs transition-colors">
+        {$t('external')}
+      </div>
     {/if}
   </div>
   <div class="mt-4 truncate px-4 text-center text-sm font-normal" title={asset.originalFileName}>