🐛 accidental translation of module name

src/components/Settings/ModuleEnabler.tsx

@@ -1,25 +1,40 @@
-import { Checkbox, SimpleGrid, Stack, Title } from '@mantine/core';
+import { Checkbox, Popover, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import * as Modules from '../../modules';
+import { IModule } from '../../modules/ModuleTypes';
 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('title')}</Title>
       <SimpleGrid cols={3} spacing="xs">
-        {modules.map((module) => {
+        {modules.map((module) => (
+          <ModuleToggle module={module} />
+        ))}
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+const ModuleToggle = ({ module }: { module: IModule }) => {
+  const { config, setConfig } = useConfig();
   const { t: translationModules } = useTranslation(module.translationNamespace);
+  const [opened, { close, open }] = useDisclosure(false);
+
   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(module.title, {
+            label={translationModules('descriptor.name', {
-                defaultValue: 'UNKNOWN MODULE NAME',
+              defaultValue: 'Unknown',
             })}
             onChange={(e) => {
               setConfig({
@@ -34,9 +49,12 @@ export default function ModuleEnabler(props: any) {
               });
             }}
           />
+        </div>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Text weight="bold">{translationModules('descriptor.name')}</Text>
+        <Text>{translationModules('descriptor.description')}</Text>
+      </Popover.Dropdown>
+    </Popover>
   );
-        })}
+};
-      </SimpleGrid>
-    </Stack>
-  );
-}

src/modules/ModuleTypes.d.ts

@@ -7,7 +7,6 @@ import { TablerIcon } from '@tabler/icons';
 // Note: Maybe use context to keep track of the modules
 export interface IModule {
   title: string;
-  description: string;
   icon: TablerIcon;
   component: React.ComponentType;
   options?: Option;

src/modules/calendar/CalendarModule.tsx

@@ -25,8 +25,7 @@ import { serviceItem } from '../../tools/types';
 import { useColorTheme } from '../../tools/color';
 
 export const CalendarModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Calendar',
-  description: 'descriptor.description',
   icon: CalendarIcon,
   component: CalendarComponent,
   options: {

src/modules/dashdot/DashdotModule.tsx

@@ -9,8 +9,7 @@ import { IModule } from '../ModuleTypes';
 
 const asModule = <T extends IModule>(t: T) => t;
 export const DashdotModule = asModule({
-  title: 'descriptor.name',
+  title: 'Dash.',
-  description: 'descriptor.description',
   icon: CalendarIcon,
   component: DashdotComponent,
   options: {

src/modules/date/DateModule.tsx

@@ -7,8 +7,7 @@ import { IModule } from '../ModuleTypes';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 
 export const DateModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Date',
-  description: 'descriptor.description',
   icon: Clock,
   component: DateComponent,
   options: {

src/modules/docker/DockerModule.tsx

@@ -12,8 +12,7 @@ import { useConfig } from '../../tools/state';
 import { IModule } from '../ModuleTypes';
 
 export const DockerModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Docker',
-  description: 'descriptor.description',
   icon: IconBrandDocker,
   component: DockerMenuButton,
   translationNamespace: 'modules/docker-module',

src/modules/downloads/DownloadsModule.tsx

@@ -23,8 +23,7 @@ import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 import { humanFileSize } from '../../tools/humanFileSize';
 
 export const DownloadsModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Torrent',
-  description: 'descriptor.description',
   icon: Download,
   component: DownloadComponent,
   options: {

src/modules/downloads/TotalDownloadsModule.tsx

@@ -15,8 +15,7 @@ import { IModule } from '../ModuleTypes';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 
 export const TotalDownloadsModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Download Speed',
-  description: 'descriptor.description',
   icon: Download,
   component: TotalDownloadsComponent,
   translationNamespace: 'modules/total-downloads-module',

src/modules/overseerr/OverseerrModule.tsx

@@ -3,8 +3,7 @@ import { OverseerrMediaDisplay } from '../common';
 import { IModule } from '../ModuleTypes';
 
 export const OverseerrModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Overseerr',
-  description: 'descriptor.description',
   icon: IconEyeglass,
   component: OverseerrMediaDisplay,
   translationNamespace: 'modules/overseerr-module',

src/modules/ping/PingModule.tsx

@@ -8,8 +8,7 @@ import { useConfig } from '../../tools/state';
 import { IModule } from '../ModuleTypes';
 
 export const PingModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Ping Services',
-  description: 'descriptor.description',
   icon: Plug,
   component: PingComponent,
   translationNamespace: 'modules/ping-module',

src/modules/search/SearchModule.tsx

@@ -27,8 +27,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export const SearchModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Search',
-  description: 'descriptor.description',
   icon: Search,
   component: SearchBar,
   translationNamespace: 'modules/search-module',

src/modules/weather/WeatherModule.tsx

@@ -19,8 +19,7 @@ import { IModule } from '../ModuleTypes';
 import { WeatherResponse } from './WeatherInterface';
 
 export const WeatherModule: IModule = {
-  title: 'descriptor.name',
+  title: 'Weather',
-  description: 'descriptor.description',
   icon: Sun,
   component: WeatherComponent,
   options: {