🔥 Remove old and unused components

src/modules/docker/ContainerActionBar.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Button, Group } from '@mantine/core';
-import { closeModal, openModal } from '@mantine/modals';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
   IconCheck,
@@ -17,9 +16,7 @@ import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { TFunction } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
-import { tryMatchService } from '../../tools/addToHomarr';
 import { openContextModalGeneric } from '../../tools/mantineModalManagerExtensions';
-import { useConfig } from '../../tools/state';
 import { AppType } from '../../types/app';
 
 let t: TFunction<'modules/docker', undefined>;
@@ -71,7 +68,6 @@ export interface ContainerActionBarProps {
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
   t = useTranslation('modules/docker').t;
   const [isLoading, setisLoading] = useState(false);
-  const { config, setConfig } = useConfig();
 
   return (
     <Group spacing="xs">
@@ -182,7 +178,10 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
                   externalUrl: '',
                 },
                 area: {
-                  type: 'wrapper', // TODO: Set the wrapper automatically
+                  type: 'sidebar', // TODO: Set the wrapper automatically
+                  properties: {
+                    location: 'right',
+                  },
                 },
                 shape: {
                   location: {
@@ -194,6 +193,10 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
                     width: 1,
                   },
                 },
+                integration: {
+                  type: null,
+                  properties: [],
+                },
               },
             },
           });

src/modules/docker/DockerModule.tsx

@@ -1,15 +1,15 @@
 import { ActionIcon, Drawer, Text, Tooltip } from '@mantine/core';
-import axios from 'axios';
-import { useEffect, useState } from 'react';
-import Docker from 'dockerode';
-import { IconBrandDocker, IconX } from '@tabler/icons';
 import { showNotification } from '@mantine/notifications';
+import { IconBrandDocker, IconX } from '@tabler/icons';
+import axios from 'axios';
+import Docker from 'dockerode';
 import { useTranslation } from 'next-i18next';
+import { useEffect, useState } from 'react';
 
+import { useConfigContext } from '../../config/provider';
+import { IModule } from '../ModuleTypes';
 import ContainerActionBar from './ContainerActionBar';
 import DockerTable from './DockerTable';
-import { useConfig } from '../../tools/state';
-import { IModule } from '../ModuleTypes';
 
 export const DockerModule: IModule = {
   title: 'Docker',
@@ -22,17 +22,18 @@ export default function DockerMenuButton(props: any) {
   const [opened, setOpened] = useState(false);
   const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
   const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
-  const { config } = useConfig();
-  const moduleEnabled = config.modules?.[DockerModule.id]?.enabled ?? false;
+  const { config } = useConfigContext();
+
+  const dockerEnabled = config?.settings.customization.layout.enabledDocker || false;
 
   const { t } = useTranslation('modules/docker');
 
   useEffect(() => {
     reload();
-  }, [config.modules]);
+  }, [config?.settings]);
 
   function reload() {
-    if (!moduleEnabled) {
+    if (!dockerEnabled) {
       return;
     }
     setTimeout(() => {
@@ -56,8 +57,8 @@ export default function DockerMenuButton(props: any) {
         });
     }, 300);
   }
-  const exists = config.modules?.[DockerModule.id]?.enabled ?? false;
-  if (!exists) {
+
+  if (!dockerEnabled) {
     return null;
   }
   // Check if the user has at least one container