From 53500ffabc4b6b4321180ecd701f215cbe618000 Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Wed, 24 Aug 2022 20:13:53 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20accidental=20translation=20of=20?=
 =?UTF-8?q?module=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/ModuleEnabler.tsx     | 72 ++++++++++++-------
 src/modules/ModuleTypes.d.ts                  |  1 -
 src/modules/calendar/CalendarModule.tsx       |  3 +-
 src/modules/dashdot/DashdotModule.tsx         |  3 +-
 src/modules/date/DateModule.tsx               |  3 +-
 src/modules/docker/DockerModule.tsx           |  3 +-
 src/modules/downloads/DownloadsModule.tsx     |  3 +-
 .../downloads/TotalDownloadsModule.tsx        |  3 +-
 src/modules/overseerr/OverseerrModule.tsx     |  3 +-
 src/modules/ping/PingModule.tsx               |  3 +-
 src/modules/search/SearchModule.tsx           |  3 +-
 src/modules/weather/WeatherModule.tsx         |  3 +-
 12 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/src/components/Settings/ModuleEnabler.tsx b/src/components/Settings/ModuleEnabler.tsx
index 6379eefb6..8f2aa12d3 100644
--- a/src/components/Settings/ModuleEnabler.tsx
+++ b/src/components/Settings/ModuleEnabler.tsx
@@ -1,42 +1,60 @@
-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) => {
-          const { t: translationModules } = useTranslation(module.translationNamespace);
-          return (
-            <Checkbox
-              key={module.title}
-              size="md"
-              checked={config.modules?.[module.title]?.enabled ?? false}
-              label={translationModules(module.title, {
-                defaultValue: 'UNKNOWN MODULE NAME',
-              })}
-              onChange={(e) => {
-                setConfig({
-                  ...config,
-                  modules: {
-                    ...config.modules,
-                    [module.title]: {
-                      ...config.modules?.[module.title],
-                      enabled: e.currentTarget.checked,
-                    },
-                  },
-                });
-              }}
-            />
-          );
-        })}
+        {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('descriptor.name', {
+              defaultValue: 'Unknown',
+            })}
+            onChange={(e) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...config.modules?.[module.title],
+                    enabled: e.currentTarget.checked,
+                  },
+                },
+              });
+            }}
+          />
+        </div>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Text weight="bold">{translationModules('descriptor.name')}</Text>
+        <Text>{translationModules('descriptor.description')}</Text>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};
diff --git a/src/modules/ModuleTypes.d.ts b/src/modules/ModuleTypes.d.ts
index d1b31d54f..8db822d02 100644
--- a/src/modules/ModuleTypes.d.ts
+++ b/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;
diff --git a/src/modules/calendar/CalendarModule.tsx b/src/modules/calendar/CalendarModule.tsx
index a793fd6d2..03b539858 100644
--- a/src/modules/calendar/CalendarModule.tsx
+++ b/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',
-  description: 'descriptor.description',
+  title: 'Calendar',
   icon: CalendarIcon,
   component: CalendarComponent,
   options: {
diff --git a/src/modules/dashdot/DashdotModule.tsx b/src/modules/dashdot/DashdotModule.tsx
index 46e168060..22b8da60f 100644
--- a/src/modules/dashdot/DashdotModule.tsx
+++ b/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',
-  description: 'descriptor.description',
+  title: 'Dash.',
   icon: CalendarIcon,
   component: DashdotComponent,
   options: {
diff --git a/src/modules/date/DateModule.tsx b/src/modules/date/DateModule.tsx
index ee8282215..51697cd0d 100644
--- a/src/modules/date/DateModule.tsx
+++ b/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',
-  description: 'descriptor.description',
+  title: 'Date',
   icon: Clock,
   component: DateComponent,
   options: {
diff --git a/src/modules/docker/DockerModule.tsx b/src/modules/docker/DockerModule.tsx
index 2e89a48d4..c279f5f95 100644
--- a/src/modules/docker/DockerModule.tsx
+++ b/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',
-  description: 'descriptor.description',
+  title: 'Docker',
   icon: IconBrandDocker,
   component: DockerMenuButton,
   translationNamespace: 'modules/docker-module',
diff --git a/src/modules/downloads/DownloadsModule.tsx b/src/modules/downloads/DownloadsModule.tsx
index 9babcdc19..38b470890 100644
--- a/src/modules/downloads/DownloadsModule.tsx
+++ b/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',
-  description: 'descriptor.description',
+  title: 'Torrent',
   icon: Download,
   component: DownloadComponent,
   options: {
diff --git a/src/modules/downloads/TotalDownloadsModule.tsx b/src/modules/downloads/TotalDownloadsModule.tsx
index 12b4b5600..d3c7ddc2b 100644
--- a/src/modules/downloads/TotalDownloadsModule.tsx
+++ b/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',
-  description: 'descriptor.description',
+  title: 'Download Speed',
   icon: Download,
   component: TotalDownloadsComponent,
   translationNamespace: 'modules/total-downloads-module',
diff --git a/src/modules/overseerr/OverseerrModule.tsx b/src/modules/overseerr/OverseerrModule.tsx
index 86bfac0b8..45f6b46bf 100644
--- a/src/modules/overseerr/OverseerrModule.tsx
+++ b/src/modules/overseerr/OverseerrModule.tsx
@@ -3,8 +3,7 @@ import { OverseerrMediaDisplay } from '../common';
 import { IModule } from '../ModuleTypes';
 
 export const OverseerrModule: IModule = {
-  title: 'descriptor.name',
-  description: 'descriptor.description',
+  title: 'Overseerr',
   icon: IconEyeglass,
   component: OverseerrMediaDisplay,
   translationNamespace: 'modules/overseerr-module',
diff --git a/src/modules/ping/PingModule.tsx b/src/modules/ping/PingModule.tsx
index 94f0d207e..e86865e0a 100644
--- a/src/modules/ping/PingModule.tsx
+++ b/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',
-  description: 'descriptor.description',
+  title: 'Ping Services',
   icon: Plug,
   component: PingComponent,
   translationNamespace: 'modules/ping-module',
diff --git a/src/modules/search/SearchModule.tsx b/src/modules/search/SearchModule.tsx
index c5c66c677..2ad3a0665 100644
--- a/src/modules/search/SearchModule.tsx
+++ b/src/modules/search/SearchModule.tsx
@@ -27,8 +27,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export const SearchModule: IModule = {
-  title: 'descriptor.name',
-  description: 'descriptor.description',
+  title: 'Search',
   icon: Search,
   component: SearchBar,
   translationNamespace: 'modules/search-module',
diff --git a/src/modules/weather/WeatherModule.tsx b/src/modules/weather/WeatherModule.tsx
index 756f9b6ba..d6d957838 100644
--- a/src/modules/weather/WeatherModule.tsx
+++ b/src/modules/weather/WeatherModule.tsx
@@ -19,8 +19,7 @@ import { IModule } from '../ModuleTypes';
 import { WeatherResponse } from './WeatherInterface';
 
 export const WeatherModule: IModule = {
-  title: 'descriptor.name',
-  description: 'descriptor.description',
+  title: 'Weather',
   icon: Sun,
   component: WeatherComponent,
   options: {