chore(web): translate alt text (#10922)

* chore(web): translate image alt text

* fix: capitalize translations, improve unit test

* fix: unit testing against the actual en.json file

* fix: use derived store to generate alt text

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

@@ -123,7 +123,7 @@
   <img
     style="display:none"
     src={imageLoaderUrl}
-    alt={getAltText(asset)}
+    alt={$getAltText(asset)}
     on:load={() => ((imageLoaded = true), (assetFileUrl = imageLoaderUrl))}
     on:error={() => (imageError = imageLoaded = true)}
   />
@@ -136,7 +136,7 @@
       {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
         <img
           src={assetFileUrl}
-          alt={getAltText(asset)}
+          alt={$getAltText(asset)}
           class="absolute top-0 left-0 -z-10 object-cover h-full w-full blur-lg"
           draggable="false"
         />
@@ -144,7 +144,7 @@
       <img
         bind:this={$photoViewer}
         src={assetFileUrl}
-        alt={getAltText(asset)}
+        alt={$getAltText(asset)}
         class="h-full w-full {$slideshowState === SlideshowState.None
           ? 'object-contain'
           : slideshowLookCssMapping[$slideshowLook]}"

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -186,7 +186,7 @@
         {#if asset.resized}
           <ImageThumbnail
             url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, checksum: asset.checksum })}
-            altText={getAltText(asset)}
+            altText={$getAltText(asset)}
             widthStyle="{width}px"
             heightStyle="{height}px"
             thumbhash={asset.thumbhash}

web/src/lib/components/photos-page/memory-lane.svelte

@@ -76,7 +76,7 @@
             <img
               class="h-full w-full rounded-xl object-cover"
               src={getAssetThumbnailUrl(memory.assets[0].id)}
-              alt={`Memory Lane ${getAltText(memory.assets[0])}`}
+              alt={`Memory Lane ${$getAltText(memory.assets[0])}`}
               draggable="false"
             />
             <p class="absolute bottom-2 left-4 z-10 text-lg text-white">

web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte

@@ -32,7 +32,7 @@
       <!-- THUMBNAIL-->
       <img
         src={getAssetThumbnailUrl(asset.id)}
-        alt={getAltText(asset)}
+        alt={$getAltText(asset)}
         title={assetData}
         class="h-60 object-cover rounded-t-xl w-full"
         draggable="false"