✨ Add translation for module, fix language changer

src/components/AppShelf/AppShelf.tsx

@@ -126,7 +126,7 @@ const AppShelf = (props: any) => {
     const noCategory = config.services.filter(
       (e) => e.category === undefined || e.category === null
     );
-    const downloadEnabled = config.modules?.[DownloadsModule.title]?.enabled ?? false;
+    const downloadEnabled = config.modules?.[DownloadsModule.id]?.enabled ?? false;
     // Create an item with 0: true, 1: true, 2: true... For each category
     return (
       // TODO: Style accordion so that the bar is transparent to the user settings

src/components/Settings/LanguageSwitch.tsx

@@ -4,14 +4,17 @@ import { showNotification } from '@mantine/notifications';
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
+import { getCookie, setCookie } from 'cookies-next';
 import { getLanguageByCode, Language } from '../../languages/language';
 
 export default function LanguageSwitch() {
   const { t, i18n } = useTranslation('settings/general/internationalization');
   const { changeLanguage } = i18n;
-
+  const configLocale = getCookie('config-locale');
   const { locale, locales } = useRouter();
-  const [selectedLanguage, setSelectedLanguage] = useState<string | null | undefined>(locale);
+  const [selectedLanguage, setSelectedLanguage] = useState<string | undefined>(
+    (configLocale as string) ?? locale
+  );
 
   const data = locales
     ? locales.map((localeItem) => ({
@@ -26,9 +29,13 @@ export default function LanguageSwitch() {
     setSelectedLanguage(value);
 
     const newLanguage = getLanguageByCode(value);
-
     changeLanguage(value)
       .then(() => {
+        setCookie('config-locale', value, {
+          maxAge: 60 * 60 * 24 * 30,
+          sameSite: 'strict',
+        });
+
         showNotification({
           title: 'Language changed',
           message: `You changed the language to '${newLanguage.originalName}'`,

src/components/Settings/ModuleEnabler.tsx

@@ -1,5 +1,4 @@
-import { Checkbox, Popover, SimpleGrid, Stack, Text, Title } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { Checkbox, HoverCard, SimpleGrid, Stack, Text, Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import * as Modules from '../../modules';
 import { IModule } from '../../modules/ModuleTypes';
@@ -11,9 +10,9 @@ export default function ModuleEnabler(props: any) {
   return (
     <Stack>
       <Title order={4}>{t('title')}</Title>
-      <SimpleGrid cols={3} spacing="xs">
+      <SimpleGrid cols={3} spacing="sm">
         {modules.map((module) => (
-          <ModuleToggle module={module} />
+          <ModuleToggle key={module.id} module={module} />
         ))}
       </SimpleGrid>
     </Stack>
@@ -22,39 +21,36 @@ export default function ModuleEnabler(props: any) {
 
 const ModuleToggle = ({ module }: { module: IModule }) => {
   const { config, setConfig } = useConfig();
-  const { t: translationModules } = useTranslation(module.translationNamespace);
-  const [opened, { close, open }] = useDisclosure(false);
+  const { t } = useTranslation(`modules/${module.id}`);
 
   return (
-    <Popover opened={opened} withArrow withinPortal width={200}>
-      <Popover.Target>
-        <div onMouseEnter={open} onMouseLeave={close}>
-          <Checkbox
-            key={module.title}
-            size="md"
-            checked={config.modules?.[module.title]?.enabled ?? false}
-            label={translationModules('descriptor.name', {
-              defaultValue: 'Unknown',
-            })}
-            onChange={(e) => {
-              setConfig({
-                ...config,
-                modules: {
-                  ...config.modules,
-                  [module.title]: {
-                    ...config.modules?.[module.title],
-                    enabled: e.currentTarget.checked,
-                  },
+    <HoverCard withArrow withinPortal width={200} shadow="md" openDelay={200}>
+      <HoverCard.Target>
+        <Checkbox
+          key={module.id}
+          size="md"
+          checked={config.modules?.[module.id]?.enabled ?? false}
+          label={t('descriptor.name', {
+            defaultValue: 'Unknown',
+          })}
+          onChange={(e) => {
+            setConfig({
+              ...config,
+              modules: {
+                ...config.modules,
+                [module.id]: {
+                  ...config.modules?.[module.id],
+                  enabled: e.currentTarget.checked,
                 },
-              });
-            }}
-          />
-        </div>
-      </Popover.Target>
-      <Popover.Dropdown>
-        <Text weight="bold">{translationModules('descriptor.name')}</Text>
-        <Text>{translationModules('descriptor.description')}</Text>
-      </Popover.Dropdown>
-    </Popover>
+              },
+            });
+          }}
+        />
+      </HoverCard.Target>
+      <HoverCard.Dropdown>
+        <Title order={4}>{t('descriptor.name')}</Title>
+        <Text size="sm">{t('descriptor.description')}</Text>
+      </HoverCard.Dropdown>
+    </HoverCard>
   );
 };