Add localization support (#333)

* Add updated i18n config and en locale

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -1,5 +1,6 @@
 import { Group, Center } from '@mantine/core';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import { RiFileMusicLine, RiFileTextLine, RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
@@ -50,11 +51,12 @@ const GridContainer = styled.div<TransparendGridContainerProps>`
     grid-template-rows: auto minmax(0, 1fr);
     grid-template-columns: 1fr;
     padding: 1rem;
-    background: rgb(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
+    background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
     border-radius: 5px;
 `;
 
 export const FullScreenPlayerQueue = () => {
+    const { t } = useTranslation();
     const { activeTab, opacity } = useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
 
@@ -62,19 +64,19 @@ export const FullScreenPlayerQueue = () => {
         {
             active: activeTab === 'queue',
             icon: <RiFileMusicLine size="1.5rem" />,
-            label: 'Up Next',
+            label: t('page.fullScreenPlayer.upNext'),
             onClick: () => setStore({ activeTab: 'queue' }),
         },
         {
             active: activeTab === 'related',
             icon: <HiOutlineQueueList size="1.5rem" />,
-            label: 'Related',
+            label: t('page.fullScreenPlayer.related'),
             onClick: () => setStore({ activeTab: 'related' }),
         },
         {
             active: activeTab === 'lyrics',
             icon: <RiFileTextLine size="1.5rem" />,
-            label: 'Lyrics',
+            label: t('page.fullScreenPlayer.lyrics'),
             onClick: () => setStore({ activeTab: 'lyrics' }),
         },
     ];
@@ -125,7 +127,7 @@ export const FullScreenPlayerQueue = () => {
                             order={3}
                             weight={700}
                         >
-                            COMING SOON
+                            {t('common.comingSoon', { postProcess: 'upperCase' })}
                         </TextTitle>
                     </Group>
                 </Center>