✨ Migrate integrations to widgets

src/components/Dashboard/Tiles/tilesDefinitions.tsx

@@ -1,15 +1,14 @@
-import { IntegrationsType } from '../../../types/integration';
-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 calendarDefinition from '../../../widgets/calendar/CalendarTile';
+import clockDefinition from '../../../widgets/clock/ClockTile';
+import dashDotDefinition from '../../../widgets/dashDot/DashDotTile';
+import useNetDefinition from '../../../widgets/useNet/UseNetTile';
+import weatherDefinition from '../../../widgets/weather/WeatherTile';
 import { EmptyTile } from './EmptyTile';
 import { ServiceTile } from './Service/ServiceTile';
 
 // 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']: {
+  [key in keyof any | 'service']: {
     minWidth?: number;
     minHeight?: number;
     maxWidth?: number;
@@ -18,7 +17,6 @@ type TileDefinitionProps = {
   };
 };
 
-// TODO: change components for other modules
 export const Tiles: TileDefinitionProps = {
   service: {
     component: ServiceTile,
@@ -28,49 +26,49 @@ export const Tiles: TileDefinitionProps = {
     maxHeight: 12,
   },
   bitTorrent: {
-    component: EmptyTile, //CalendarTile,
+    component: EmptyTile,
     minWidth: 4,
     maxWidth: 12,
     minHeight: 5,
     maxHeight: 12,
   },
   calendar: {
-    component: CalendarTile,
+    component: calendarDefinition.component,
     minWidth: 4,
     maxWidth: 12,
     minHeight: 5,
     maxHeight: 12,
   },
   clock: {
-    component: ClockTile,
+    component: clockDefinition.component,
     minWidth: 4,
     maxWidth: 12,
     minHeight: 2,
     maxHeight: 12,
   },
   dashDot: {
-    component: DashDotTile,
+    component: dashDotDefinition.component,
     minWidth: 4,
     maxWidth: 9,
     minHeight: 5,
     maxHeight: 14,
   },
   torrentNetworkTraffic: {
-    component: EmptyTile, //CalendarTile,
+    component: EmptyTile,
     minWidth: 4,
     maxWidth: 12,
     minHeight: 5,
     maxHeight: 12,
   },
   useNet: {
-    component: UseNetTile,
+    component: useNetDefinition.component,
     minWidth: 4,
     maxWidth: 12,
     minHeight: 5,
     maxHeight: 12,
   },
   weather: {
-    component: WeatherTile,
+    component: weatherDefinition.component,
     minWidth: 4,
     maxWidth: 12,
     minHeight: 2,

src/components/Dashboard/Views/DashboardView.tsx

@@ -2,6 +2,7 @@ import { Group, Stack } from '@mantine/core';
 import { useMemo } from 'react';
 import { useConfigContext } from '../../../config/provider';
 import { useScreenLargerThan } from '../../../tools/hooks/useScreenLargerThan';
+import { useScreenSmallerThan } from '../../../tools/hooks/useScreenSmallerThan';
 import { CategoryType } from '../../../types/category';
 import { WrapperType } from '../../../types/wrapper';
 import { DashboardCategory } from '../Wrappers/Category/Category';
@@ -11,11 +12,11 @@ import { DashboardWrapper } from '../Wrappers/Wrapper/Wrapper';
 export const DashboardView = () => {
   const wrappers = useWrapperItems();
   const layoutSettings = useConfigContext()?.config?.settings.customization.layout;
-  const showSidebars = useScreenLargerThan('md');
+  const doNotShowSidebar = useScreenSmallerThan('md');
 
   return (
     <Group align="top" h="100%">
-      {layoutSettings?.enabledLeftSidebar && showSidebars ? (
+      {layoutSettings?.enabledLeftSidebar && !doNotShowSidebar ? (
         <DashboardSidebar location="left" />
       ) : null}
       <Stack mx={-10} style={{ flexGrow: 1 }}>
@@ -27,7 +28,7 @@ export const DashboardView = () => {
           )
         )}
       </Stack>
-      {layoutSettings?.enabledRightSidebar && showSidebars ? (
+      {layoutSettings?.enabledRightSidebar && !doNotShowSidebar ? (
         <DashboardSidebar location="right" />
       ) : null}
     </Group>

src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx

@@ -34,7 +34,6 @@ export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
         );
       })}
       {Object.entries(integrations).map(([k, v]) => {
-        console.log(k);
         const { component: TileComponent, ...tile } = Tiles[k as keyof typeof Tiles];
 
         return (