chore(web): more translations for user settings and admin pages (#10161)

* chore(web): more translations for user settings and admin pages

* JobSettings translations

* feedback

* missed one

* feedback

web/src/lib/components/user-settings-page/app-settings.svelte

@@ -17,6 +17,7 @@
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import { t, init } from 'svelte-i18n';
+  import { invalidateAll } from '$app/navigation';
 
   let time = new Date();
 
@@ -77,6 +78,7 @@
       }
 
       await init({ fallbackLocale: defaultLang.code, initialLocale: newLang });
+      await invalidateAll();
     }
   };
 
@@ -143,7 +145,7 @@
       </div>
       <div class="ml-4">
         <SettingSwitch
-          title="Play video thumbnail on hover"
+          title={$t('video_hover_setting')}
           subtitle={$t('video_hover_setting_description')}
           bind:checked={$playVideoThumbnailOnHover}
           on:toggle={() => ($playVideoThumbnailOnHover = !$playVideoThumbnailOnHover)}

web/src/lib/components/user-settings-page/change-password-settings.svelte

@@ -32,7 +32,7 @@
     } catch (error) {
       console.error('Error [user-profile] [changePassword]', error);
       notificationController.show({
-        message: (error as HttpError)?.body?.message || 'Unable to change password',
+        message: (error as HttpError)?.body?.message || $t('errors.unable_to_change_password'),
         type: NotificationType.Error,
       });
     }

web/src/lib/components/user-settings-page/notifications-settings.svelte

@@ -68,7 +68,7 @@
         </div>
 
         <div class="flex justify-end">
-          <Button type="submit" size="sm" on:click={() => handleSave()}>Save</Button>
+          <Button type="submit" size="sm" on:click={() => handleSave()}>{$t('save')}</Button>
         </div>
       </div>
     </form>

web/src/lib/components/user-settings-page/oauth-settings.svelte

@@ -27,7 +27,7 @@
           type: NotificationType.Info,
         });
       } catch (error) {
-        handleError(error, 'Unable to link OAuth account');
+        handleError(error, $t('errors.unable_to_link_oauth_account'));
       } finally {
         await goto('?open=oauth');
       }

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -79,8 +79,8 @@
   const handleRemovePartner = async (partner: PartnerResponseDto) => {
     const isConfirmed = await dialogController.show({
       id: 'remove-partner',
-      title: 'Stop sharing your photos?',
-      prompt: `${partner.name} will no longer be able to access your photos.`,
+      title: $t('stop_photo_sharing'),
+      prompt: $t('stop_photo_sharing_description', { values: { partner: partner.name } }),
     });
 
     if (!isConfirmed) {
@@ -115,7 +115,7 @@
       partner.inTimeline = inTimeline;
       partners = partners;
     } catch (error) {
-      handleError(error, 'Unable to update timeline display status');
+      handleError(error, $t('errors.unable_to_update_timeline_display_status'));
     }
   };
 </script>
@@ -142,7 +142,7 @@
               on:click={() => handleRemovePartner(partner.user)}
               icon={mdiClose}
               size={'16'}
-              title="Stop sharing your photos with this user"
+              title={$t('stop_sharing_photos_with_user')}
             />
           {/if}
         </div>
@@ -151,14 +151,18 @@
           <!-- I am sharing my assets with this user -->
           {#if partner.sharedByMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
-            <p class="text-xs font-medium my-4">SHARED WITH {partner.user.name.toUpperCase()}</p>
-            <p class="text-md">{partner.user.name} can access</p>
+            <p class="text-xs font-medium my-4">
+              {$t('shared_with_partner', { values: { partner: partner.user.name } }).toUpperCase()}
+            </p>
+            <p class="text-md">{$t('partner_can_access', { values: { partner: partner.user.name } })}</p>
             <ul class="text-sm">
               <li class="flex gap-2 place-items-center py-1 mt-2">
-                <Icon path={mdiCheck} /> All your photos and videos except those in Archived and Deleted
+                <Icon path={mdiCheck} />
+                {$t('partner_can_access_assets')}
               </li>
               <li class="flex gap-2 place-items-center py-1">
-                <Icon path={mdiCheck} /> The location where your photos were taken
+                <Icon path={mdiCheck} />
+                {$t('partner_can_access_location')}
               </li>
             </ul>
           {/if}
@@ -166,7 +170,9 @@
           <!-- this user is sharing assets with me -->
           {#if partner.sharedWithMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
-            <p class="text-xs font-medium my-4">PHOTOS FROM {partner.user.name.toUpperCase()}</p>
+            <p class="text-xs font-medium my-4">
+              {$t('shared_from_partner', { values: { partner: partner.user.name } }).toUpperCase()}
+            </p>
             <SettingSwitch
               title={$t('show_in_timeline')}
               subtitle={$t('show_in_timeline_setting_description')}

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -33,7 +33,7 @@
       const data = await createApiKey({ apiKeyCreateDto: detail });
       secret = data.secret;
     } catch (error) {
-      handleError(error, 'Unable to create a new API Key');
+      handleError(error, $t('errors.unable_to_create_api_key'));
     } finally {
       await refreshKeys();
       newKey = null;
@@ -48,11 +48,11 @@
     try {
       await updateApiKey({ id: editKey.id, apiKeyUpdateDto: { name: detail.name } });
       notificationController.show({
-        message: `Saved API Key`,
+        message: $t('saved_api_key'),
         type: NotificationType.Info,
       });
     } catch (error) {
-      handleError(error, 'Unable to save API Key');
+      handleError(error, $t('errors.unable_to_save_api_key'));
     } finally {
       await refreshKeys();
       editKey = null;
@@ -62,7 +62,7 @@
   const handleDelete = async (key: ApiKeyResponseDto) => {
     const isConfirmed = await dialogController.show({
       id: 'delete-api-key',
-      prompt: 'Are you sure you want to delete this API key?',
+      prompt: $t('delete_api_key_prompt'),
     });
 
     if (!isConfirmed) {
@@ -72,11 +72,11 @@
     try {
       await deleteApiKey({ id: key.id });
       notificationController.show({
-        message: `Removed API Key: ${key.name}`,
+        message: $t('removed_api_key', { values: { name: key.name } }),
         type: NotificationType.Info,
       });
     } catch (error) {
-      handleError(error, 'Unable to remove API Key');
+      handleError(error, $t('errors.unable_to_remove_api_key'));
     } finally {
       await refreshKeys();
     }