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/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}>