From 7a4c430f2a167d4edf0d289605f614f1c51fa413 Mon Sep 17 00:00:00 2001
From: Meierschlumpf <meierschlumpf@gmail.com>
Date: Sun, 18 Dec 2022 23:22:45 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Made=20addable=20integrations=20dyn?=
 =?UTF-8?q?amic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AvailableIntegrationsTab.tsx              | 69 -------------------
 .../Components/Shared/GenericElementType.tsx  | 17 ++---
 .../AvailableStaticElementsTab.tsx            |  2 +-
 .../WidgetsTab/AvailableWidgetsTab.tsx        | 39 +++++++++++
 .../WidgetsTab/WidgetElementType.tsx          | 26 +++++++
 .../SelectElement/SelectElementModal.tsx      |  2 +-
 src/widgets/bitTorrent/BitTorrentTile.tsx     |  4 +-
 .../TorrentNetworkTrafficTile.tsx             |  4 +-
 8 files changed, 77 insertions(+), 86 deletions(-)
 delete mode 100644 src/components/Dashboard/Modals/SelectElement/Components/IntegrationsTab/AvailableIntegrationsTab.tsx
 create mode 100644 src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx
 create mode 100644 src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

diff --git a/src/components/Dashboard/Modals/SelectElement/Components/IntegrationsTab/AvailableIntegrationsTab.tsx b/src/components/Dashboard/Modals/SelectElement/Components/IntegrationsTab/AvailableIntegrationsTab.tsx
deleted file mode 100644
index 09e8109f7..000000000
--- a/src/components/Dashboard/Modals/SelectElement/Components/IntegrationsTab/AvailableIntegrationsTab.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Grid, Text } from '@mantine/core';
-import {
-  IconArrowsUpDown,
-  IconCalendarTime,
-  IconClock,
-  IconCloudRain,
-  IconFileDownload,
-} from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
-import { GenericAvailableElementType } from '../Shared/GenericElementType';
-import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
-
-interface AvailableIntegrationElementsProps {
-  onClickBack: () => void;
-}
-
-export const AvailableIntegrationElements = ({
-  onClickBack,
-}: AvailableIntegrationElementsProps) => {
-  const { t } = useTranslation('layout/element-selector/selector');
-  return (
-    <>
-      <SelectorBackArrow onClickBack={onClickBack} />
-
-      <Text mb="md" color="dimmed">
-        Integrations interact with your apps, to provide you with more control over your
-        applications. They usually require a few configurations before use.
-      </Text>
-
-      <Grid>
-        <GenericAvailableElementType
-          name="Usenet downloads"
-          description="Display and manage your Usenet downloads directly from Homarr"
-          image={<IconFileDownload />}
-        />
-        <GenericAvailableElementType
-          name="BitTorrent downloads"
-          description="Display and manage your Torrent downloads directly from Homarr"
-          image={<IconFileDownload />}
-        />
-        <GenericAvailableElementType
-          name="Calendar"
-          description="Integrate your Sonarr, Radarr, Lidarr and Readarr releases in a calendar"
-          image={<IconCalendarTime />}
-        />
-        <GenericAvailableElementType
-          name="Date & Time"
-          description="Display the current date & time"
-          image={<IconClock />}
-        />
-        <GenericAvailableElementType
-          name="Weather"
-          description="Display the current weather of a specified location"
-          image={<IconCloudRain />}
-        />
-        <GenericAvailableElementType
-          name="Dash."
-          description="Display hardware data in realtime on your dashboard"
-          image="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/dashdot.png"
-        />
-        <GenericAvailableElementType
-          name="Torrrent network traffic"
-          description="Display the current download & upload of your torrent clients"
-          image={<IconArrowsUpDown />}
-        />
-      </Grid>
-    </>
-  );
-};
diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx
index b6d24498f..7e07c9fb6 100644
--- a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx
@@ -1,13 +1,13 @@
-import { Box, Button, Card, Center, Grid, Stack, Text, UnstyledButton } from '@mantine/core';
-import { IconChevronRight } from '@tabler/icons';
+import { Button, Card, Center, Grid, Stack, Text } from '@mantine/core';
+import { TablerIcon } from '@tabler/icons';
 import Image from 'next/image';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { useStyles } from './styles';
 
 interface GenericAvailableElementTypeProps {
   name: string;
   description?: string;
-  image: string | ReactNode;
+  image: string | TablerIcon;
   disabled?: boolean;
 }
 
@@ -19,13 +19,8 @@ export const GenericAvailableElementType = ({
 }: GenericAvailableElementTypeProps) => {
   const { classes } = useStyles();
 
-  const Icon = () => {
-    if (React.isValidElement(image)) {
-      return <>{image}</>;
-    }
-
-    return <Image src={image as string} width={24} height={24} />;
-  };
+  const Icon =
+    typeof image === 'string' ? () => <Image src={image} width={24} height={24} /> : image;
 
   return (
     <Grid.Col span={3}>
diff --git a/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx b/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx
index 7bcc13d99..305e1085b 100644
--- a/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx
@@ -23,7 +23,7 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
         <GenericAvailableElementType
           name="Static Text"
           description="Display a fixed string on your dashboard"
-          image={<IconCursorText />}
+          image={IconCursorText}
         />
       </Grid>
     </>
diff --git a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx
new file mode 100644
index 000000000..c0821f395
--- /dev/null
+++ b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx
@@ -0,0 +1,39 @@
+import { Grid, Text } from '@mantine/core';
+import {
+  IconArrowsUpDown,
+  IconCalendarTime,
+  IconClock,
+  IconCloudRain,
+  IconFileDownload,
+} from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import widgets from '../../../../../../widgets';
+import { GenericAvailableElementType } from '../Shared/GenericElementType';
+import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
+import { WidgetElementType } from './WidgetElementType';
+
+interface AvailableIntegrationElementsProps {
+  onClickBack: () => void;
+}
+
+export const AvailableIntegrationElements = ({
+  onClickBack,
+}: AvailableIntegrationElementsProps) => {
+  const { t } = useTranslation('layout/element-selector/selector');
+  return (
+    <>
+      <SelectorBackArrow onClickBack={onClickBack} />
+
+      <Text mb="md" color="dimmed">
+        Widgets interact with your apps, to provide you with more control over your applications.
+        They usually require a few configurations before use.
+      </Text>
+
+      <Grid>
+        {Object.entries(widgets).map(([k, v]) => (
+          <WidgetElementType key={k} id={k} image={v.icon} />
+        ))}
+      </Grid>
+    </>
+  );
+};
diff --git a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
new file mode 100644
index 000000000..978f55ab0
--- /dev/null
+++ b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
@@ -0,0 +1,26 @@
+import { Button, Card, Center, Grid, Stack, Text } from '@mantine/core';
+import { TablerIcon } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import Image from 'next/image';
+import React, { ReactNode } from 'react';
+import { AvailableElementTypes } from '../Overview/AvailableElementsOverview';
+import { GenericAvailableElementType } from '../Shared/GenericElementType';
+
+interface WidgetElementTypeProps {
+  id: string;
+  image: string | TablerIcon;
+  disabled?: boolean;
+}
+
+export const WidgetElementType = ({ id, image, disabled }: WidgetElementTypeProps) => {
+  const { t } = useTranslation(`modules/${id}`);
+
+  return (
+    <GenericAvailableElementType
+      name={t('descriptor.name')}
+      description={t('descriptor.description')}
+      image={image}
+      disabled={disabled}
+    />
+  );
+};
diff --git a/src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx b/src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx
index c6b36beb8..bf2836636 100644
--- a/src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx
@@ -1,6 +1,6 @@
 import { ContextModalProps } from '@mantine/modals';
 import { useState } from 'react';
-import { AvailableIntegrationElements } from './Components/IntegrationsTab/AvailableIntegrationsTab';
+import { AvailableIntegrationElements } from './Components/WidgetsTab/AvailableWidgetsTab';
 import { AvailableElementTypes } from './Components/Overview/AvailableElementsOverview';
 import { AvailableStaticTypes } from './Components/StaticElementsTab/AvailableStaticElementsTab';
 
diff --git a/src/widgets/bitTorrent/BitTorrentTile.tsx b/src/widgets/bitTorrent/BitTorrentTile.tsx
index b61f2b987..9ad15ef3c 100644
--- a/src/widgets/bitTorrent/BitTorrentTile.tsx
+++ b/src/widgets/bitTorrent/BitTorrentTile.tsx
@@ -1,4 +1,4 @@
-import { IconClock } from '@tabler/icons';
+import { IconClock, IconFileDownload } from '@tabler/icons';
 import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
 import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
 import { defineWidget } from '../helper';
@@ -6,7 +6,7 @@ import { IWidget } from '../widgets';
 
 const definition = defineWidget({
   id: 'torrents-status',
-  icon: IconClock,
+  icon: IconFileDownload,
   options: {},
   gridstack: {
     minWidth: 2,
diff --git a/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx b/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx
index 8495076e8..22bd4f36c 100644
--- a/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx
+++ b/src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx
@@ -1,4 +1,4 @@
-import { IconClock } from '@tabler/icons';
+import { IconArrowsUpDown, IconClock } from '@tabler/icons';
 import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
 import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
 import { defineWidget } from '../helper';
@@ -6,7 +6,7 @@ import { IWidget } from '../widgets';
 
 const definition = defineWidget({
   id: 'dlspeed',
-  icon: IconClock,
+  icon: IconArrowsUpDown,
   options: {},
 
   gridstack: {