Enhancement : Decouple the UI by using conditional rendering for each module

components/layout/Header.tsx

@@ -13,7 +13,7 @@ import { NextLink } from '@mantine/next';
 import { Logo } from './Logo';
 import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
-import CalendarComponent from '../calendar/CalendarComponent';
+import CalendarComponent from '../modules/calendar/CalendarModule';
 
 const HEADER_HEIGHT = 60;
 

components/layout/Layout.tsx

@@ -1,7 +1,7 @@
 import { AppShell, Aside, Center, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import CalendarComponent from '../calendar/CalendarComponent';
+import CalendarComponent from '../modules/calendar/CalendarModule';
 
 const useStyles = createStyles((theme) => ({
   main: {

components/modules/calendar/CalendarComponent.story.tsx

@@ -1,4 +1,4 @@
-import CalendarComponent from './CalendarComponent';
+import CalendarComponent from './CalendarModule';
 
 export default {
   title: 'Calendar component',

components/modules/calendar/CalendarModule.tsx

@@ -3,11 +3,19 @@ import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
-import { useConfig } from '../../tools/state';
+import { useConfig } from '../../../tools/state';
+import { CalendarIcon } from '@modulz/radix-icons';
+import { MHPModule } from '../modules';
+
+export const CalendarModule: MHPModule = {
+  title: 'Calendar',
+  description: 'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
+  icon: CalendarIcon,
+  component: CalendarComponent,
+};
 
 export default function CalendarComponent(props: any) {
   const { config } = useConfig();
-  const [opened, setOpened] = useState(false);
   const [sonarrMedias, setSonarrMedias] = useState([] as any);
   const [radarrMedias, setRadarrMedias] = useState([] as any);
 

components/modules/modules.tsx

@@ -0,0 +1,11 @@
+// This interface is to be used in all the modules of the project
+// Each module should have its own interface and call the following function:
+// TODO: Add a function to register a module
+// Note: Maybe use context to keep track of the modules
+export interface MHPModule {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  component: React.ComponentType;
+  props?: any;
+}