refactor(web): use derived instead of get(t) (#10884)

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -109,8 +109,8 @@
                   curve
                   shadow
                   url={getPeopleThumbnailUrl(person)}
-                  altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                  title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
+                  altText={$getPersonNameWithHiddenValue(person.name, person.isHidden)}
+                  title={$getPersonNameWithHiddenValue(person.name, person.isHidden)}
                   widthStyle="90px"
                   heightStyle="90px"
                   thumbhash={null}
@@ -118,7 +118,7 @@
                 />
               </div>
 
-              <p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
+              <p class="mt-1 truncate font-medium" title={$getPersonNameWithHiddenValue(person.name, person.isHidden)}>
                 {person.name}
               </p>
             </button>

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -236,7 +236,7 @@
                     shadow
                     url={getPeopleThumbnailUrl(selectedPersonToReassign[face.id])}
                     altText={selectedPersonToReassign[face.id].name}
-                    title={getPersonNameWithHiddenValue(
+                    title={$getPersonNameWithHiddenValue(
                       selectedPersonToReassign[face.id].name,
                       selectedPersonToReassign[face.id]?.isHidden,
                     )}
@@ -250,7 +250,7 @@
                     shadow
                     url={getPeopleThumbnailUrl(face.person)}
                     altText={face.person.name}
-                    title={getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)}
+                    title={$getPersonNameWithHiddenValue(face.person.name, face.person.isHidden)}
                     widthStyle={thumbnailWidth}
                     heightStyle={thumbnailWidth}
                     hidden={face.person.isHidden}

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -169,7 +169,7 @@
     <ControlAppBar on:close={() => goto(AppRoute.PHOTOS)} forceDark>
       <svelte:fragment slot="leading">
         <p class="text-lg">
-          {memoryLaneTitle(currentMemory.yearsAgo)}
+          {$memoryLaneTitle(currentMemory.yearsAgo)}
         </p>
       </svelte:fragment>
 
@@ -261,7 +261,7 @@
             {#if previousMemory}
               <div class="absolute bottom-4 right-4 text-left text-white">
                 <p class="text-xs font-semibold text-gray-200">{$t('previous').toUpperCase()}</p>
-                <p class="text-xl">{memoryLaneTitle(previousMemory.yearsAgo)}</p>
+                <p class="text-xl">{$memoryLaneTitle(previousMemory.yearsAgo)}</p>
               </div>
             {/if}
           </button>
@@ -344,7 +344,7 @@
             {#if nextMemory}
               <div class="absolute bottom-4 left-4 text-left text-white">
                 <p class="text-xs font-semibold text-gray-200">{$t('up_next').toUpperCase()}</p>
-                <p class="text-xl">{memoryLaneTitle(nextMemory.yearsAgo)}</p>
+                <p class="text-xl">{$memoryLaneTitle(nextMemory.yearsAgo)}</p>
               </div>
             {/if}
           </button>

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

@@ -80,7 +80,7 @@
               draggable="false"
             />
             <p class="absolute bottom-2 left-4 z-10 text-lg text-white">
-              {memoryLaneTitle(memory.yearsAgo)}
+              {$memoryLaneTitle(memory.yearsAgo)}
             </p>
             <div
               class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"

web/src/lib/utils.ts

@@ -317,10 +317,9 @@ export const handlePromiseError = <T>(promise: Promise<T>): void => {
   promise.catch((error) => console.error(`[utils.ts]:handlePromiseError ${error}`, error));
 };
 
-export const memoryLaneTitle = (yearsAgo: number) => {
-  const $t = get(t);
-  return $t('years_ago', { values: { years: yearsAgo } });
-};
+export const memoryLaneTitle = derived(t, ($t) => {
+  return (yearsAgo: number) => $t('years_ago', { values: { years: yearsAgo } });
+});
 
 export const withError = async <T>(fn: () => Promise<T>): Promise<[undefined, T] | [unknown, undefined]> => {
   try {

web/src/lib/utils/person.ts

@@ -1,6 +1,6 @@
 import type { PersonResponseDto } from '@immich/sdk';
 import { t } from 'svelte-i18n';
-import { get } from 'svelte/store';
+import { derived } from 'svelte/store';
 
 export const searchNameLocal = (
   name: string,
@@ -27,7 +27,6 @@ export const searchNameLocal = (
         .slice(0, slice);
 };
 
-export const getPersonNameWithHiddenValue = (name: string, isHidden: boolean) => {
-  const $t = get(t);
-  return $t('person_hidden', { values: { name: name, hidden: isHidden } });
-};
+export const getPersonNameWithHiddenValue = derived(t, ($t) => {
+  return (name: string, isHidden: boolean) => $t('person_hidden', { values: { name: name, hidden: isHidden } });
+});