fix: sidebar bug, tab name translation

.gitignore

@@ -11,6 +11,5 @@ yarn-error.log
 .eslintcache
 stats.json
 yarn.lock
+keys.json
 *.zip
-
-keys.json

src/components/modals/main/scss/modules/_sidebar.scss

@@ -43,6 +43,7 @@
       border: none;
       background: none;
       min-width: calc(100% - 1.2em);
+      text-align: left;
 
       &:hover {
         background: t($modal-sidebarActive);

src/components/modals/main/settings/Radio.jsx

@@ -9,6 +9,7 @@ import {
 } from '@mui/material';
 
 import EventBus from 'modules/helpers/eventbus';
+import translations from 'modules/translations';
 
 export default class Radio extends PureComponent {
   constructor(props) {
@@ -18,7 +19,7 @@ export default class Radio extends PureComponent {
     };
   }
 
-  handleChange = (e) => {
+  handleChange = async (e) => {
     const { value } = e.target;
 
     if (value === 'loading') {
@@ -31,10 +32,9 @@ export default class Radio extends PureComponent {
         localStorage.getItem('tabName') ===
         variables.language.getMessage(variables.languagecode, 'tabname')
       ) {
-        // todo: fix this it doesn't work and shows as undefined
         localStorage.setItem(
           'tabName',
-          import(`../../../../translations/${value.replace('-', '_')}.json`).tabname,
+          translations[value.replace('-', '_')].tabname,
         );
       }
     }

src/components/widgets/background/PhotoInformation.jsx

@@ -15,7 +15,6 @@ import Tooltip from '../../helpers/tooltip/Tooltip';
 import Modal from 'react-modal';
 import ShareModal from '../../helpers/sharemodal/ShareModal';
 //import Hotkeys from 'react-hot-keys';
-import { toast } from 'react-toastify';
 
 const toDataURL = async (url) => {
   const res = await fetch(url);

src/index.jsx

@@ -15,16 +15,7 @@ import Stats from 'modules/helpers/stats';
 import I18n from '@eartharoid/i18n';
 
 // this is because of vite
-import * as de_DE from './translations/de_DE.json';
+import translations from 'modules/translations';
-import * as en_GB from './translations/en_GB.json';
-import * as en_US from './translations/en_US.json';
-import * as es from './translations/es.json';
-import * as fr from './translations/fr.json';
-import * as nl from './translations/nl.json';
-import * as no from './translations/no.json';
-import * as ru from './translations/ru.json';
-import * as zh_CN from './translations/zh_CN.json';
-import * as id_ID from './translations/id_ID.json';
 
 const languagecode = localStorage.getItem('language') || 'en_GB';
 
@@ -36,16 +27,16 @@ if (languagecode === 'en') {
 }
 
 variables.language = new I18n(variables.languagecode, {
-  de_DE,
+  de_DE: translations.de_DE,
-  en_GB,
+  en_GB: translations.en_GB,
-  en_US,
+  en_US: translations.en_US,
-  es,
+  es: translations.es,
-  fr,
+  fr: translations.fr,
-  nl,
+  nl: translations.nl,
-  no,
+  no: translations.no,
-  ru,
+  ru: translations.ru,
-  zh_CN,
+  zh_CN: translations.zh_CN,
-  id_ID,
+  id_ID: translations.id_ID,
 });
 
 // set html language tag

src/modules/translations.js

@@ -0,0 +1,25 @@
+import * as de_DE from '../translations/de_DE.json';
+import * as en_GB from '../translations/en_GB.json';
+import * as en_US from '../translations/en_US.json';
+import * as es from '../translations/es.json';
+import * as fr from '../translations/fr.json';
+import * as nl from '../translations/nl.json';
+import * as no from '../translations/no.json';
+import * as ru from '../translations/ru.json';
+import * as zh_CN from '../translations/zh_CN.json';
+import * as id_ID from '../translations/id_ID.json';
+
+const translations = {
+    de_DE,
+    en_GB,
+    en_US,
+    es,
+    fr,
+    nl,
+    no,
+    ru,
+    zh_CN,
+    id_ID
+};
+
+export default translations;