Add localization support (#333)

* Add updated i18n config and en locale

src/renderer/features/shared/components/library-header.tsx

@@ -1,5 +1,6 @@
-import { Group } from '@mantine/core';
 import { forwardRef, ReactNode, Ref, useState } from 'react';
+import { Group } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import styles from './library-header.module.scss';
 import { LibraryItem } from '/@/renderer/api/types';
@@ -20,12 +21,30 @@ export const LibraryHeader = forwardRef(
         { imageUrl, imagePlaceholderUrl, background, title, item, children }: LibraryHeaderProps,
         ref: Ref<HTMLDivElement>,
     ) => {
+        const { t } = useTranslation();
         const [isImageError, setIsImageError] = useState<boolean | null>(false);
 
         const onImageError = () => {
             setIsImageError(true);
         };
 
+        const itemTypeString = () => {
+            switch (item.type) {
+                case LibraryItem.ALBUM:
+                    return t('entity.album', { count: 1 });
+                case LibraryItem.ARTIST:
+                    return t('entity.artist', { count: 1 });
+                case LibraryItem.ALBUM_ARTIST:
+                    return t('entity.albumArtist', { count: 1 });
+                case LibraryItem.PLAYLIST:
+                    return t('entity.playlist', { count: 1 });
+                case LibraryItem.SONG:
+                    return t('entity.track', { count: 1 });
+                default:
+                    return t('common.unknown');
+            }
+        };
+
         return (
             <div
                 ref={ref}
@@ -59,7 +78,7 @@ export const LibraryHeader = forwardRef(
                             tt="uppercase"
                             weight={600}
                         >
-                            {item.type}
+                            {itemTypeString()}
                         </Text>
                     </Group>
                     <h1 className={styles.title}>{title}</h1>

src/renderer/features/shared/components/order-toggle-button.tsx

@@ -1,4 +1,5 @@
 import { ButtonProps } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import { RiSortAsc, RiSortDesc } from 'react-icons/ri';
 import { SortOrder } from '/@/renderer/api/types';
 import { Button, Tooltip } from '/@/renderer/components';
@@ -10,8 +11,15 @@ interface OrderToggleButtonProps {
 }
 
 export const OrderToggleButton = ({ sortOrder, onToggle, buttonProps }: OrderToggleButtonProps) => {
+    const { t } = useTranslation();
     return (
-        <Tooltip label={sortOrder}>
+        <Tooltip
+            label={
+                sortOrder === SortOrder.ASC
+                    ? t('common.ascending', { postProcess: 'titleCase' })
+                    : t('common.descending', { postProcess: 'titleCase' })
+            }
+        >
             <Button
                 compact
                 fw="600"

src/renderer/features/shared/utils.ts

@@ -1,16 +1,17 @@
+import i18n from '/@/i18n/i18n';
 import { Play } from '/@/renderer/types';
 
 export const PLAY_TYPES = [
     {
-        label: 'Play',
+        label: i18n.t('player.play', { postProcess: 'sentenceCase' }),
         play: Play.NOW,
     },
     {
-        label: 'Add to queue',
+        label: i18n.t('player.addLast', { postProcess: 'sentenceCase' }),
         play: Play.LAST,
     },
     {
-        label: 'Add to queue next',
+        label: i18n.t('player.addNext', { postProcess: 'sentenceCase' }),
         play: Play.NEXT,
     },
 ];