From b05d532941f0b0558cea8a23a7ab0e806c2e2182 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 1 Nov 2023 05:40:42 -0700
Subject: [PATCH] Add missing translation keys to sidebar

---
 .../components/general/sidebar-settings.tsx   | 16 +++++++++++++-
 .../sidebar/components/collapsed-sidebar.tsx  | 21 ++++++++++++++++++-
 .../features/sidebar/components/sidebar.tsx   | 20 +++++++++++++++++-
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/renderer/features/settings/components/general/sidebar-settings.tsx b/src/renderer/features/settings/components/general/sidebar-settings.tsx
index 4b67035f..439e3be4 100644
--- a/src/renderer/features/settings/components/general/sidebar-settings.tsx
+++ b/src/renderer/features/settings/components/general/sidebar-settings.tsx
@@ -7,6 +7,20 @@ import { MdDragIndicator } from 'react-icons/md';
 import { Button, Checkbox, Switch } from '/@/renderer/components';
 import { useSettingsStoreActions, useGeneralSettings } from '../../../../store/settings.store';
 import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
+import i18n from '/@/i18n/i18n';
+
+const translatedSidebarItemMap = {
+    Albums: i18n.t('page.sidebar.albums', { postProcess: 'titleCase' }),
+    Artists: i18n.t('page.sidebar.artists', { postProcess: 'titleCase' }),
+    Folders: i18n.t('page.sidebar.folders', { postProcess: 'titleCase' }),
+    Genres: i18n.t('page.sidebar.genres', { postProcess: 'titleCase' }),
+    Home: i18n.t('page.sidebar.home', { postProcess: 'titleCase' }),
+    'Now Playing': i18n.t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
+    Playlists: i18n.t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+    Search: i18n.t('page.sidebar.search', { postProcess: 'titleCase' }),
+    Settings: i18n.t('page.sidebar.settings', { postProcess: 'titleCase' }),
+    Tracks: i18n.t('page.sidebar.tracks', { postProcess: 'titleCase' }),
+};
 
 const DragHandle = ({ dragControls }: any) => {
     return (
@@ -48,7 +62,7 @@ const DraggableSidebarItem = ({ item, handleChangeDisabled }: DraggableSidebarIt
                     onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
                 />
                 <DragHandle dragControls={dragControls} />
-                {item.id}
+                {translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap]}
             </Group>
         </Reorder.Item>
     );
diff --git a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
index 5d0019dc..c170e928 100644
--- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+++ b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
@@ -30,6 +30,22 @@ export const CollapsedSidebar = () => {
     const { windowBarStyle } = useWindowSettings();
     const { sidebarItems, sidebarCollapsedNavigation } = useGeneralSettings();
 
+    const translatedSidebarItemMap = useMemo(
+        () => ({
+            Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
+            Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
+            Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
+            Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
+            Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
+            'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
+            Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+            Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
+            Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
+            Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
+        }),
+        [t],
+    );
+
     const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
         if (!sidebarItems) return [];
 
@@ -37,10 +53,13 @@ export const CollapsedSidebar = () => {
             .filter((item) => !item.disabled)
             .map((item) => ({
                 ...item,
+                label:
+                    translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap] ??
+                    item.label,
             }));
 
         return items;
-    }, [sidebarItems]);
+    }, [sidebarItems, translatedSidebarItemMap]);
 
     return (
         <SidebarContainer $windowBarStyle={windowBarStyle}>
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index b70f765a..9a823c93 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -78,6 +78,21 @@ export const Sidebar = () => {
     const imageUrl = useCurrentSong()?.imageUrl;
     const server = useCurrentServer();
 
+    const translatedSidebarItemMap = useMemo(
+        () => ({
+            Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
+            Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
+            Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
+            Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
+            Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
+            'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
+            Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+            Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
+            Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
+            Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
+        }),
+        [t],
+    );
     const upsizedImageUrl = imageUrl
         ?.replace(/size=\d+/, 'size=450')
         .replace(/width=\d+/, 'width=450')
@@ -121,10 +136,13 @@ export const Sidebar = () => {
             .filter((item) => !item.disabled)
             .map((item) => ({
                 ...item,
+                label:
+                    translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap] ??
+                    item.label,
             }));
 
         return items;
-    }, [sidebarItems]);
+    }, [sidebarItems, translatedSidebarItemMap]);
 
     return (
         <SidebarContainer