From 471cf5eaf77be5d9871462483aa709fc61e91f17 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Mon, 3 Jun 2024 20:35:17 -0500
Subject: [PATCH] fix(web): fix sidebar tooltip pluralization (#9952)

* fix(web): fix sidebar tooltip pluralization

* Rename property

* Remove data-testid attribute

* Fix variable type
---
 .../side-bar/more-information-albums.svelte   | 24 +++++++
 .../side-bar/more-information-assets.svelte   | 17 +++++
 .../side-bar/side-bar.svelte                  | 68 +++----------------
 3 files changed, 50 insertions(+), 59 deletions(-)
 create mode 100644 web/src/lib/components/shared-components/side-bar/more-information-albums.svelte
 create mode 100644 web/src/lib/components/shared-components/side-bar/more-information-assets.svelte

diff --git a/web/src/lib/components/shared-components/side-bar/more-information-albums.svelte b/web/src/lib/components/shared-components/side-bar/more-information-albums.svelte
new file mode 100644
index 0000000000..fecc5184a2
--- /dev/null
+++ b/web/src/lib/components/shared-components/side-bar/more-information-albums.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { locale } from '$lib/stores/preferences.store.js';
+  import { s } from '$lib/utils.js';
+  import { type AlbumCountResponseDto, getAlbumCount } from '@immich/sdk';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+
+  export let albumCountType: keyof AlbumCountResponseDto;
+
+  const handleAlbumCount = async () => {
+    try {
+      return await getAlbumCount();
+    } catch {
+      return { owned: 0, shared: 0, notShared: 0 };
+    }
+  };
+</script>
+
+{#await handleAlbumCount()}
+  <LoadingSpinner />
+{:then data}
+  <div>
+    <p>{data[albumCountType].toLocaleString($locale)} Album{s(data[albumCountType])}</p>
+  </div>
+{/await}
diff --git a/web/src/lib/components/shared-components/side-bar/more-information-assets.svelte b/web/src/lib/components/shared-components/side-bar/more-information-assets.svelte
new file mode 100644
index 0000000000..f69d3b7b38
--- /dev/null
+++ b/web/src/lib/components/shared-components/side-bar/more-information-assets.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { locale } from '$lib/stores/preferences.store.js';
+  import { s } from '$lib/utils.js';
+  import { getAssetStatistics } from '@immich/sdk';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+
+  export let assetStats: NonNullable<Parameters<typeof getAssetStatistics>[0]>;
+</script>
+
+{#await getAssetStatistics(assetStats)}
+  <LoadingSpinner />
+{:then data}
+  <div>
+    <p>{data.videos.toLocaleString($locale)} Video{s(data.videos)}</p>
+    <p>{data.images.toLocaleString($locale)} Photo{s(data.images)}</p>
+  </div>
+{/await}
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index e7477c50ca..aab968b9a7 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { locale, sidebarSettings } from '$lib/stores/preferences.store';
+  import { sidebarSettings } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
-  import { getAlbumCount, getAssetStatistics } from '@immich/sdk';
   import {
     mdiAccount,
     mdiAccountOutline,
@@ -22,20 +21,11 @@
     mdiToolbox,
     mdiToolboxOutline,
   } from '@mdi/js';
-  import LoadingSpinner from '../loading-spinner.svelte';
   import StatusBox from '../status-box.svelte';
   import SideBarSection from './side-bar-section.svelte';
   import SideBarLink from './side-bar-link.svelte';
-
-  const getStats = (dto: Parameters<typeof getAssetStatistics>[0]) => getAssetStatistics(dto);
-
-  const handleAlbumCount = async () => {
-    try {
-      return await getAlbumCount();
-    } catch {
-      return { owned: 0, shared: 0, notShared: 0 };
-    }
-  };
+  import MoreInformationAssets from '$lib/components/shared-components/side-bar/more-information-assets.svelte';
+  import MoreInformationAlbums from '$lib/components/shared-components/side-bar/more-information-albums.svelte';
 
   let isArchiveSelected: boolean;
   let isFavoritesSelected: boolean;
@@ -56,14 +46,7 @@
       icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
     >
       <svelte:fragment slot="moreInformation">
-        {#await getStats({ isArchived: false })}
-          <LoadingSpinner />
-        {:then data}
-          <div>
-            <p>{data.videos.toLocaleString($locale)} Videos</p>
-            <p>{data.images.toLocaleString($locale)} Photos</p>
-          </div>
-        {/await}
+        <MoreInformationAssets assetStats={{ isArchived: false }} />
       </svelte:fragment>
     </SideBarLink>
     {#if $featureFlags.search}
@@ -95,13 +78,7 @@
         bind:isSelected={isSharingSelected}
       >
         <svelte:fragment slot="moreInformation">
-          {#await handleAlbumCount()}
-            <LoadingSpinner />
-          {:then data}
-            <div>
-              <p>{data.shared.toLocaleString($locale)} Albums</p>
-            </div>
-          {/await}
+          <MoreInformationAlbums albumCountType="shared" />
         </svelte:fragment>
       </SideBarLink>
     {/if}
@@ -117,25 +94,12 @@
       bind:isSelected={isFavoritesSelected}
     >
       <svelte:fragment slot="moreInformation">
-        {#await getStats({ isFavorite: true })}
-          <LoadingSpinner />
-        {:then data}
-          <div>
-            <p>{data.videos.toLocaleString($locale)} Videos</p>
-            <p>{data.images.toLocaleString($locale)} Photos</p>
-          </div>
-        {/await}
+        <MoreInformationAssets assetStats={{ isFavorite: true }} />
       </svelte:fragment>
     </SideBarLink>
     <SideBarLink title="Albums" routeId="/(user)/albums" icon={mdiImageAlbum} flippedLogo>
       <svelte:fragment slot="moreInformation">
-        {#await handleAlbumCount()}
-          <LoadingSpinner />
-        {:then data}
-          <div>
-            <p>{data.owned.toLocaleString($locale)} Albums</p>
-          </div>
-        {/await}
+        <MoreInformationAlbums albumCountType="owned" />
       </svelte:fragment>
     </SideBarLink>
 
@@ -153,14 +117,7 @@
       icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
     >
       <svelte:fragment slot="moreInformation">
-        {#await getStats({ isArchived: true })}
-          <LoadingSpinner />
-        {:then data}
-          <div>
-            <p>{data.videos.toLocaleString($locale)} Videos</p>
-            <p>{data.images.toLocaleString($locale)} Photos</p>
-          </div>
-        {/await}
+        <MoreInformationAssets assetStats={{ isArchived: true }} />
       </svelte:fragment>
     </SideBarLink>
 
@@ -172,14 +129,7 @@
         icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
       >
         <svelte:fragment slot="moreInformation">
-          {#await getStats({ isTrashed: true })}
-            <LoadingSpinner />
-          {:then data}
-            <div>
-              <p>{data.videos.toLocaleString($locale)} Videos</p>
-              <p>{data.images.toLocaleString($locale)} Photos</p>
-            </div>
-          {/await}
+          <MoreInformationAssets assetStats={{ isTrashed: true }} />
         </svelte:fragment>
       </SideBarLink>
     {/if}