🎨 Moved integrations in widgets directory

src/components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal.tsx

@@ -3,7 +3,7 @@ import { closeModal, ContextModalProps } from '@mantine/modals';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { IntegrationsType } from '../../../../types/integration';
-import { IntegrationChangePositionModalInnerProps } from '../../Tiles/Integrations/IntegrationsMenu';
+import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
 import { Tiles } from '../../Tiles/tilesDefinitions';
 import { ChangePositionModal } from './ChangePositionModal';
 
@@ -11,7 +11,7 @@ export const ChangeIntegrationPositionModal = ({
   context,
   id,
   innerProps,
-}: ContextModalProps<IntegrationChangePositionModalInnerProps>) => {
+}: ContextModalProps<WidgetChangePositionModalInnerProps>) => {
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
 

src/components/Dashboard/Tiles/Service/ServiceMenu.tsx

@@ -15,6 +15,11 @@ export const ServiceMenu = ({ service }: TileMenuProps) => {
         service,
         allowServiceNamePropagation: false,
       },
+      styles: {
+        root: {
+          zIndex: 201,
+        },
+      },
     });
   };
 
@@ -24,6 +29,11 @@ export const ServiceMenu = ({ service }: TileMenuProps) => {
       innerProps: {
         service,
       },
+      styles: {
+        root: {
+          zIndex: 201,
+        },
+      },
     });
   };
 

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -2,11 +2,11 @@ import { Button, Group, MultiSelect, Stack, Switch, TextInput } from '@mantine/c
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
-import { DashDotGraphType, IntegrationsType } from '../../../types/integration';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
+import { DashDotGraphType, IntegrationsType } from '../../../../types/integration';
 
-export type IntegrationEditModalInnerProps<
+export type WidgetEditModalInnerProps<
   TIntegrationKey extends keyof IntegrationsType = keyof IntegrationsType
 > = {
   integration: TIntegrationKey;
@@ -14,11 +14,11 @@ export type IntegrationEditModalInnerProps<
   labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
 };
 
-export const IntegrationsEditModal = ({
+export const WidgetsEditModal = ({
   context,
   id,
   innerProps,
-}: ContextModalProps<IntegrationEditModalInnerProps>) => {
+}: ContextModalProps<WidgetEditModalInnerProps>) => {
   const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
   const { t } = useTranslation([translationKey ?? '', 'common']);
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);

src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx

@@ -4,38 +4,38 @@ import { openContextModalGeneric } from '../../../../tools/mantineModalManagerEx
 import { IntegrationsType } from '../../../../types/integration';
 import { TileBaseType } from '../../../../types/tile';
 import { GenericTileMenu } from '../GenericTileMenu';
-import { IntegrationRemoveModalInnerProps } from '../IntegrationRemoveModal';
+import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
 import {
-  IntegrationEditModalInnerProps,
+  WidgetEditModalInnerProps,
   integrationModuleTranslationsMap,
   IntegrationOptionLabels,
   IntegrationOptions,
-} from '../IntegrationsEditModal';
+} from './WidgetsEditModal';
 
-export type IntegrationChangePositionModalInnerProps = {
+export type WidgetChangePositionModalInnerProps = {
   integration: keyof IntegrationsType;
   module: TileBaseType;
 };
 
-interface IntegrationsMenuProps<TIntegrationKey extends keyof IntegrationsType> {
+interface WidgetsMenuProps<TIntegrationKey extends keyof IntegrationsType> {
   integration: TIntegrationKey;
   module: TileBaseType | undefined;
   options: IntegrationOptions<TIntegrationKey> | undefined;
   labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
 }
 
-export const IntegrationsMenu = <TIntegrationKey extends keyof IntegrationsType>({
+export const WidgetsMenu = <TIntegrationKey extends keyof IntegrationsType>({
   integration,
   options,
   labels,
   module,
-}: IntegrationsMenuProps<TIntegrationKey>) => {
+}: WidgetsMenuProps<TIntegrationKey>) => {
   const { t } = useTranslation(integrationModuleTranslationsMap.get(integration));
 
   if (!module) return null;
 
   const handleDeleteClick = () => {
-    openContextModalGeneric<IntegrationRemoveModalInnerProps>({
+    openContextModalGeneric<WidgetsRemoveModalInnerProps>({
       modal: 'integrationRemove',
       title: <Title order={4}>{t('descriptor.remove.title')}</Title>,
       innerProps: {
@@ -45,7 +45,7 @@ export const IntegrationsMenu = <TIntegrationKey extends keyof IntegrationsType>
   };
 
   const handleChangeSizeClick = () => {
-    openContextModalGeneric<IntegrationChangePositionModalInnerProps>({
+    openContextModalGeneric<WidgetChangePositionModalInnerProps>({
       modal: 'changeIntegrationPositionModal',
       size: 'xl',
       title: null,
@@ -57,7 +57,7 @@ export const IntegrationsMenu = <TIntegrationKey extends keyof IntegrationsType>
   };
 
   const handleEditClick = () => {
-    openContextModalGeneric<IntegrationEditModalInnerProps<TIntegrationKey>>({
+    openContextModalGeneric<WidgetEditModalInnerProps<TIntegrationKey>>({
       modal: 'integrationOptions',
       title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
       innerProps: {

src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
-import { IntegrationsType } from '../../../types/integration';
-import { integrationModuleTranslationsMap } from './IntegrationsEditModal';
+import { IntegrationsType } from '../../../../types/integration';
+import { integrationModuleTranslationsMap } from './WidgetsEditModal';
 
-export type IntegrationRemoveModalInnerProps = {
+export type WidgetsRemoveModalInnerProps = {
   integration: keyof IntegrationsType;
 };
 
-export const IntegrationRemoveModal = ({
+export const WidgetsRemoveModal = ({
   context,
   id,
   innerProps,
-}: ContextModalProps<IntegrationRemoveModalInnerProps>) => {
+}: ContextModalProps<WidgetsRemoveModalInnerProps>) => {
   const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
   const { t } = useTranslation([translationKey ?? '', 'common']);
   const handleDeletion = () => {

src/components/Dashboard/Tiles/tilesDefinitions.tsx

@@ -1,15 +1,13 @@
 import { IntegrationsType } from '../../../types/integration';
-import { CalendarTile } from './Calendar/CalendarTile';
-import { ClockTile } from './Clock/ClockTile';
-import { DashDotTile } from './DashDot/DashDotTile';
+import { CalendarTile } from '../../../widgets/calendar/CalendarTile';
+import { ClockTile } from '../../../widgets/clock/ClockTile';
+import { DashDotTile } from '../../../widgets/dashDot/DashDotTile';
+import { UseNetTile } from '../../../widgets/useNet/UseNetTile';
+import { WeatherTile } from '../../../widgets/weather/WeatherTile';
 import { EmptyTile } from './EmptyTile';
 import { ServiceTile } from './Service/ServiceTile';
-import { UseNetTile } from './UseNet/UseNetTile';
-import { WeatherTile } from './Weather/WeatherTile';
-/*import { CalendarTile } from './calendar';
-import { ClockTile } from './clock';
-import { DashDotTile } from './dash-dot';*/
 
+// TODO: just remove and use service (later app) directly. For widgets the the definition should contain min/max width/height
 type TileDefinitionProps = {
   [key in keyof IntegrationsType | 'service']: {
     minWidth?: number;

src/pages/_app.tsx

@@ -13,8 +13,8 @@ import { ChangeIntegrationPositionModal } from '../components/Dashboard/Modals/C
 import { ChangeServicePositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeServicePositionModal';
 import { EditServiceModal } from '../components/Dashboard/Modals/EditService/EditServiceModal';
 import { SelectElementModal } from '../components/Dashboard/Modals/SelectElement/SelectElementModal';
-import { IntegrationRemoveModal } from '../components/Dashboard/Tiles/IntegrationRemoveModal';
-import { IntegrationsEditModal } from '../components/Dashboard/Tiles/IntegrationsEditModal';
+import { WidgetsRemoveModal } from '../components/Dashboard/Tiles/Widgets/WidgetsRemoveModal';
+import { WidgetsEditModal } from '../components/Dashboard/Tiles/Widgets/WidgetsEditModal';
 import { CategoryEditModal } from '../components/Dashboard/Wrappers/Category/CategoryEditModal';
 import { ConfigProvider } from '../config/provider';
 import '../styles/global.scss';
@@ -88,8 +88,8 @@ function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
                     modals={{
                       editService: EditServiceModal,
                       selectElement: SelectElementModal,
-                      integrationOptions: IntegrationsEditModal,
-                      integrationRemove: IntegrationRemoveModal,
+                      integrationOptions: WidgetsEditModal,
+                      integrationRemove: WidgetsRemoveModal,
                       categoryEditModal: CategoryEditModal,
                       changeServicePositionModal: ChangeServicePositionModal,
                       changeIntegrationPositionModal: ChangeIntegrationPositionModal,

src/widgets/calendar/CalendarTile.tsx

@@ -2,17 +2,17 @@ import { createStyles, MantineThemeColors, useMantineTheme } from '@mantine/core
 import { Calendar } from '@mantine/dates';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
-import { useConfigContext } from '../../../../config/provider';
-import { useColorTheme } from '../../../../tools/color';
-import { isToday } from '../../../../tools/isToday';
-import { CalendarIntegrationType } from '../../../../types/integration';
-import { HomarrCardWrapper } from '../HomarrCardWrapper';
-import { BaseTileProps } from '../type';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { useConfigContext } from '../../config/provider';
+import { useColorTheme } from '../../tools/color';
+import { isToday } from '../../tools/isToday';
+import { CalendarIntegrationType } from '../../types/integration';
 import { CalendarDay } from './CalendarDay';
 import { MediasType } from './type';
 
 interface CalendarTileProps extends BaseTileProps {
-  module: CalendarIntegrationType | undefined;
+  module: CalendarIntegrationType | undefined; // TODO: change to new type defined through widgetDefinition
 }
 
 export const CalendarTile = ({ className, module }: CalendarTileProps) => {

src/widgets/calendar/MediaList.tsx

@@ -5,7 +5,7 @@ import {
   RadarrMediaDisplay,
   ReadarrMediaDisplay,
   SonarrMediaDisplay,
-} from '../../../../modules/common';
+} from '../../modules/common';
 import { MediasType } from './type';
 
 interface MediaListProps {

src/widgets/clock/ClockTile.tsx

@@ -1,23 +1,24 @@
 import { Center, Stack, Text, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
-import { useSetSafeInterval } from '../../../../tools/hooks/useSetSafeInterval';
-import { ClockIntegrationType } from '../../../../types/integration';
-import { HomarrCardWrapper } from '../HomarrCardWrapper';
-import { IntegrationsMenu } from '../Integrations/IntegrationsMenu';
-import { BaseTileProps } from '../type';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
+import { ClockIntegrationType } from '../../types/integration';
 
 interface ClockTileProps extends BaseTileProps {
-  module: ClockIntegrationType | undefined;
+  module: ClockIntegrationType; // TODO: change to new type defined through widgetDefinition
 }
 
 export const ClockTile = ({ className, module }: ClockTileProps) => {
   const date = useDateState();
   const formatString = module?.properties.is24HoursFormat ? 'HH:mm' : 'h:mm A';
 
+  // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <HomarrCardWrapper className={className}>
-      <IntegrationsMenu<'clock'>
+      <WidgetsMenu<'clock'>
         integration="clock"
         module={module}
         options={module?.properties}

src/widgets/dashDot/DashDotCompactNetwork.tsx

@@ -1,7 +1,7 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
-import { bytes } from '../../../../tools/bytesHelper';
+import { bytes } from '../../tools/bytesHelper';
 
 interface DashDotCompactNetworkProps {
   info: DashDotInfo;

src/widgets/dashDot/DashDotCompactStorage.tsx

@@ -2,10 +2,10 @@ import { Group, Stack, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useTranslation } from 'next-i18next';
-import { useConfigContext } from '../../../../config/provider';
-import { bytes } from '../../../../tools/bytesHelper';
-import { percentage } from '../../../../tools/percentage';
-import { DashDotInfo } from './DashDotTile';
+import { useConfigContext } from '../../config/provider';
+import { bytes } from '../../tools/bytesHelper';
+import { percentage } from '../../tools/percentage';
+import { DashDotInfo } from './DashDotCompactNetwork';
 
 interface DashDotCompactStorageProps {
   info: DashDotInfo;

src/widgets/dashDot/DashDotTile.tsx

@@ -3,16 +3,16 @@ import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useTranslation } from 'next-i18next';
 import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
-import { BaseTileProps } from '../type';
 import { DashDotGraph } from './DashDotGraph';
-import { DashDotIntegrationType } from '../../../../types/integration';
-import { IntegrationsMenu } from '../Integrations/IntegrationsMenu';
-import { useConfigContext } from '../../../../config/provider';
-import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { DashDotCompactStorage } from './DashDotCompactStorage';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { DashDotIntegrationType } from '../../types/integration';
+import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { useConfigContext } from '../../config/provider';
 
 interface DashDotTileProps extends BaseTileProps {
-  module: DashDotIntegrationType | undefined;
+  module: DashDotIntegrationType; // TODO: change to new type defined through widgetDefinition
 }
 
 export const DashDotTile = ({ module, className }: DashDotTileProps) => {
@@ -39,7 +39,8 @@ export const DashDotTile = ({ module, className }: DashDotTileProps) => {
   );
 
   const menu = (
-    <IntegrationsMenu<'dashDot'>
+    // TODO: add widgetWrapper that is generic and uses the definition
+    <WidgetsMenu<'dashDot'>
       module={module}
       integration="dashDot"
       options={module?.properties}

src/widgets/dashDot/types.ts

@@ -1,4 +1,4 @@
-import { DashDotGraphType } from '../../../../types/integration';
+import { DashDotGraphType } from '../../types/integration';
 
 export interface DashDotGraph {
   id: DashDotGraphType;

src/widgets/index.ts

@@ -0,0 +1,2 @@
+export {};
+// TODO: add exports of new IWidgetDefinitions to here

src/widgets/useNet/UseNetTile.tsx

@@ -16,18 +16,14 @@ import { useElementSize } from '@mantine/hooks';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
-import { useConfigContext } from '../../../../config/provider';
 import { UsenetQueueList } from './UsenetQueueList';
-import {
-  useGetUsenetInfo,
-  usePauseUsenetQueue,
-  useResumeUsenetQueue,
-} from '../../../../tools/hooks/api';
-import { humanFileSize } from '../../../../tools/humanFileSize';
-import { ServiceIntegrationType } from '../../../../types/service';
-import { HomarrCardWrapper } from '../HomarrCardWrapper';
-import { BaseTileProps } from '../type';
 import { UsenetHistoryList } from './UsenetHistoryList';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { ServiceIntegrationType } from '../../types/service';
+import { useConfigContext } from '../../config/provider';
+import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../tools/hooks/api';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { humanFileSize } from '../../tools/humanFileSize';
 
 dayjs.extend(duration);
 

src/widgets/useNet/UsenetHistoryList.tsx

@@ -18,9 +18,9 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
-import { useGetUsenetHistory } from '../../../../tools/hooks/api';
-import { humanFileSize } from '../../../../tools/humanFileSize';
-import { parseDuration } from '../../../../tools/parseDuration';
+import { useGetUsenetHistory } from '../../tools/hooks/api';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { parseDuration } from '../../tools/parseDuration';
 
 dayjs.extend(duration);
 

src/widgets/useNet/UsenetQueueList.tsx

@@ -21,8 +21,8 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
-import { useGetUsenetDownloads } from '../../../../tools/hooks/api';
-import { humanFileSize } from '../../../../tools/humanFileSize';
+import { useGetUsenetDownloads } from '../../tools/hooks/api';
+import { humanFileSize } from '../../tools/humanFileSize';
 
 dayjs.extend(duration);
 

src/widgets/weather/WeatherTile.tsx

@@ -1,14 +1,14 @@
 import { Center, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { IconArrowDownRight, IconArrowUpRight } from '@tabler/icons';
-import { WeatherIcon } from './WeatherIcon';
-import { BaseTileProps } from '../type';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { WeatherIntegrationType } from '../../types/integration';
 import { useWeatherForCity } from './useWeatherForCity';
-import { WeatherIntegrationType } from '../../../../types/integration';
-import { HomarrCardWrapper } from '../HomarrCardWrapper';
-import { IntegrationsMenu } from '../Integrations/IntegrationsMenu';
+import { WeatherIcon } from './WeatherIcon';
 
 interface WeatherTileProps extends BaseTileProps {
-  module: WeatherIntegrationType | undefined;
+  module: WeatherIntegrationType; // TODO: change to new type defined through widgetDefinition
 }
 
 export const WeatherTile = ({ className, module }: WeatherTileProps) => {
@@ -43,9 +43,10 @@ export const WeatherTile = ({ className, module }: WeatherTileProps) => {
     );
   }
 
+  // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <HomarrCardWrapper className={className}>
-      <IntegrationsMenu
+      <WidgetsMenu
         integration="weather"
         module={module}
         options={module?.properties}