🚧 wip migrate to next-i18n

src/components/Settings/AdvancedSettings.tsx

@@ -1,14 +1,15 @@
 import { TextInput, Button, Stack } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 import { ColorSelector } from './ColorSelector';
 import { OpacitySelector } from './OpacitySelector';
 import { AppCardWidthSelector } from './AppCardWidthSelector';
 import { ShadeSelector } from './ShadeSelector';
-import { t } from 'i18next';
 
 export default function TitleChanger() {
   const { config, setConfig } = useConfig();
+  const { t } = useTranslation('settings/customization/page-appearance');
 
   const form = useForm({
     initialValues: {
@@ -42,26 +43,26 @@ export default function TitleChanger() {
       <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
         <Stack>
           <TextInput
-            label={t('settings.tabs.customizations.settings.pageTitle.label')}
-            placeholder={t('settings.tabs.customizations.settings.pageTitle.placeholder')}
+            label={t('pageTitle.label')}
+            placeholder={t('pageTitle.placeholder')}
             {...form.getInputProps('title')}
           />
           <TextInput
-            label={t('settings.tabs.customizations.settings.logo.label')}
-            placeholder={t('settings.tabs.customizations.settings.logo.placeholder')}
+            label={t('logo.label')}
+            placeholder={t('logo.placeholder')}
             {...form.getInputProps('logo')}
           />
           <TextInput
-            label={t('settings.tabs.customizations.settings.favicon.label')}
-            placeholder={t('settings.tabs.customizations.settings.favicon.placeholder')}
+            label={t('favicon.label')}
+            placeholder={t('favicon.placeholder')}
             {...form.getInputProps('favicon')}
           />
           <TextInput
-            label={t('settings.tabs.customizations.settings.background.label')}
-            placeholder={t('settings.tabs.customizations.settings.background.placeholder')}
+            label={t('background.label')}
+            placeholder={t('background.placeholder')}
             {...form.getInputProps('background')}
           />
-          <Button type="submit">{t('settings.tabs.customizations.settings.buttons.submit')}</Button>
+          <Button type="submit">{t('buttons.submit')}</Button>
         </Stack>
       </form>
       <ColorSelector type="primary" />

src/components/Settings/ColorSelector.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { ColorSwatch, Grid, Group, Popover, Text, useMantineTheme } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 import { useColorTheme } from '../../tools/color';
-import { t } from 'i18next';
 
 interface ColorControlProps {
   type: string;
@@ -11,8 +11,8 @@ interface ColorControlProps {
 export function ColorSelector({ type }: ColorControlProps) {
   const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
-
   const { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor } = useColorTheme();
+  const { t } = useTranslation('settings/customization/color-selector');
 
   const theme = useMantineTheme();
   const colors = Object.keys(theme.colors).map((color) => ({
@@ -84,7 +84,7 @@ export function ColorSelector({ type }: ColorControlProps) {
         </Popover.Dropdown>
       </Popover>
       <Text>
-        {t('settings.tabs.customizations.settings.colorSelector.suffix', {
+        {t('suffix', {
           color: type[0].toUpperCase() + type.slice(1),
         })}
       </Text>

src/components/Settings/CommonSettings.tsx

@@ -1,5 +1,6 @@
 import { Text, SegmentedControl, TextInput, Stack } from '@mantine/core';
 import { useState } from 'react';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionSwitch';
@@ -7,11 +8,14 @@ import ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
 import Tip from '../layout/Tip';
-import { t } from 'i18next';
 import LanguageSwitch from './LanguageSwitch';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
+  const { t } = useTranslation([
+    'settings/general/search-engine',
+    'settings/general/config-changer',
+  ]);
 
   const matches = [
     { label: 'Google', value: 'https://google.com/search?q=' },
@@ -28,12 +32,12 @@ export default function CommonSettings(args: any) {
   return (
     <Stack mb="md" mr="sm">
       <Stack spacing={0} mt="xs">
-        <Text>{t('settings.tabs.common.settings.searchEngine.title')}</Text>
-        <Tip>{t('settings.tabs.common.settings.searchEngine.tips.generalTip')}</Tip>
+        <Text>{t('title')}</Text>
+        <Tip>{t('tips.generalTip')}</Tip>
         <SegmentedControl
           fullWidth
           mb="sm"
-          title={t('settings.tabs.common.settings.searchEngine.title')}
+          title={t('title')}
           value={
             // Match config.settings.searchUrl with a key in the matches array
             searchUrl
@@ -55,10 +59,10 @@ export default function CommonSettings(args: any) {
         />
         {searchUrl === 'Custom' && (
           <>
-            <Tip>{t('settings.tabs.common.settings.searchEngine.tips.placeholderTip')}</Tip>
+            <Tip>{t('tips.placeholderTip')}</Tip>
             <TextInput
-              label={t('settings.tabs.common.settings.searchEngine.customEngine.label')}
-              placeholder={t('settings.tabs.common.settings.searchEngine.customEngine.placeholder')}
+              label={t('customEngine.label')}
+              placeholder={t('customEngine.placeholder')}
               value={customSearchUrl}
               onChange={(event) => {
                 setCustomSearchUrl(event.currentTarget.value);
@@ -80,7 +84,7 @@ export default function CommonSettings(args: any) {
       <LanguageSwitch />
       <ConfigChanger />
       <SaveConfigComponent />
-      <Tip>{t('settings.tabs.common.settings.configTip')}</Tip>
+      <Tip>{t('configTip')}</Tip>
     </Stack>
   );
 }

src/components/Settings/Credits.tsx

@@ -1,10 +1,12 @@
 import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
 import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
-import { t } from 'i18next';
+import { useTranslation } from 'next-i18next';
 
 import { CURRENT_VERSION } from '../../../data/constants';
 
 export default function Credits(props: any) {
+  const { t } = useTranslation('settings/common');
+
   return (
     <Group position="center" mt="xs">
       <Group spacing={0}>
@@ -29,7 +31,7 @@ export default function Credits(props: any) {
             color: 'gray',
           }}
         >
-          {t('settings.credits.madeWithLove')}
+          {t('credits.madeWithLove')}
           <Anchor
             href="https://github.com/ajnart"
             style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}

src/components/Settings/LanguageSwitch.tsx

@@ -3,27 +3,26 @@ import { showNotification } from '@mantine/notifications';
 import { IconLanguage } from '@tabler/icons';
 
 import { forwardRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { convertCodeToName } from '../../translations/i18n';
+import { useTranslation } from 'next-i18next';
 
 export default function LanguageSwitch() {
-  const { t, i18n } = useTranslation();
-  const { language, languages, changeLanguage } = i18n;
+  const { t, i18n } = useTranslation('settings/general/internationalization');
+  /*const { language, languages, changeLanguage } = i18n;
 
   const [selectedLanguage, setSelectedLanguage] = useState<string | null>(language);
 
   const data = languages.map((language) => ({
     image: `https://countryflagsapi.com/png/${language.split('-').pop()}`,
-    label: convertCodeToName(language),
+    label: 'JA',
     value: language,
-  }));
+  }));*/
 
   const onChangeSelect = (value: string) => {
-    setSelectedLanguage(value);
+    //setSelectedLanguage(value);
 
-    const languageName = convertCodeToName(value);
+    const languageName = 'JA IS HALZ SCHEISSE NE';
 
-    changeLanguage(value)
+    /*changeLanguage(value)
       .then(() => {
         showNotification({
           title: 'Language changed',
@@ -39,20 +38,27 @@ export default function LanguageSwitch() {
           color: 'red',
           autoClose: 5000,
         });
-      });
+      });*/
   };
 
   return (
     <Stack>
       <Select
         icon={<IconLanguage size={18} />}
-        label={t('settings.tabs.common.settings.language.title')}
-        data={data}
+        label={t('label')}
+        data={[
+          {
+            value: 'uwu',
+            label: 'asdf',
+          },
+        ]}
         itemComponent={SelectItem}
         nothingFound="Nothing found"
         onChange={onChangeSelect}
+        /*
         value={selectedLanguage}
         defaultValue={language}
+        */
       />
     </Stack>
   );

src/components/Settings/ModuleEnabler.tsx

@@ -1,14 +1,15 @@
 import { Checkbox, SimpleGrid, Stack, Title } from '@mantine/core';
-import { t } from 'i18next';
+import { useTranslation } from 'next-i18next';
 import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';
 
 export default function ModuleEnabler(props: any) {
   const { config, setConfig } = useConfig();
+  const { t } = useTranslation('settings/general/module-enabler');
   const modules = Object.values(Modules).map((module) => module);
   return (
     <Stack>
-      <Title order={4}>{t('settings.tabs.common.settings.moduleEnabler.title')}</Title>
+      <Title order={4}>{t('title')}</Title>
       <SimpleGrid cols={3} spacing="xs">
         {modules.map((module) => (
           <Checkbox

src/components/Settings/OpacitySelector.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Text, Slider, Stack } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
-import { t } from 'i18next';
 
 export function OpacitySelector() {
   const { config, setConfig } = useConfig();
+  const { t } = useTranslation('settings/customization/shade-selector');
 
   const MARKS = [
     { value: 10, label: '10' },
@@ -31,7 +32,7 @@ export function OpacitySelector() {
 
   return (
     <Stack spacing="xs">
-      <Text>{t('settings.tabs.customizations.settings.opacitySelector.label')}</Text>
+      <Text>{t('label')}</Text>
       <Slider
         defaultValue={config.settings.appOpacity || 100}
         step={10}

src/components/Settings/SettingsMenu.tsx

@@ -2,18 +2,20 @@ import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/c
 import { useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
 import { IconSettings } from '@tabler/icons';
-import { t } from 'i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdvancedSettings from './AdvancedSettings';
 import CommonSettings from './CommonSettings';
 import Credits from './Credits';
 
 function SettingsMenu(props: any) {
+  const { t } = useTranslation('settings/common');
+
   return (
     <Tabs defaultValue="Common">
       <Tabs.List grow>
-        <Tabs.Tab value="Common">{t('settings.tabs.common.title')}</Tabs.Tab>
-        <Tabs.Tab value="Customizations">{t('settings.tabs.customizations.title')}</Tabs.Tab>
+        <Tabs.Tab value="Common">{t('tabs.common')}</Tabs.Tab>
+        <Tabs.Tab value="Customizations">{t('tabs.customizations')}</Tabs.Tab>
       </Tabs.List>
       <Tabs.Panel data-autofocus value="Common">
         <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
@@ -31,22 +33,24 @@ function SettingsMenu(props: any) {
 
 export function SettingsMenuButton(props: any) {
   useHotkeys([['ctrl+L', () => setOpened(!opened)]]);
+  const { t } = useTranslation('settings/common');
 
   const [opened, setOpened] = useState(false);
+
   return (
     <>
       <Drawer
         size="xl"
         padding="lg"
         position="right"
-        title={<Title order={5}>{t('settings.title')}</Title>}
+        title={<Title order={5}>{t('title')}</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
         <SettingsMenu />
         <Credits />
       </Drawer>
-      <Tooltip label={t('settings.tooltip')}>
+      <Tooltip label={t('tooltip')}>
         <ActionIcon
           variant="default"
           radius="md"

src/components/Settings/ShadeSelector.tsx

@@ -9,13 +9,14 @@ import {
   Stack,
   Grid,
 } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 import { useColorTheme } from '../../tools/color';
-import { t } from 'i18next';
 
 export function ShadeSelector() {
   const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
+  const { t } = useTranslation('settings/general/shade-selector');
 
   const { primaryColor, secondaryColor, primaryShade, setPrimaryShade } = useColorTheme();
 
@@ -95,7 +96,7 @@ export function ShadeSelector() {
           </Stack>
         </Popover.Dropdown>
       </Popover>
-      <Text>{t('settings.tabs.customizations.settings.shadeSelector.label')}</Text>
+      <Text>{t('label')}</Text>
     </Group>
   );
 }