Fix AppShelf circular imports

components/AppShelf/AddAppShelfItem.tsx

@@ -18,7 +18,7 @@ import { useState } from 'react';
 import { Apps } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList } from '../../tools/types';
-import { AppShelfItemWrapper } from './AppShelf';
+import { AppShelfItemWrapper } from './AppShelfItemWrapper';
 
 export default function AddItemShelfItem(props: any) {
   const { addService } = useConfig();

components/AppShelf/AppShelf.tsx

@@ -3,7 +3,6 @@ import { motion } from 'framer-motion';
 import {
   Text,
   AspectRatio,
-  createStyles,
   SimpleGrid,
   Card,
   useMantineTheme,
@@ -11,31 +10,12 @@ import {
   Group,
   Space,
 } from '@mantine/core';
-import AppShelfMenu from './AppShelfMenu';
-import AddItemShelfItem from './AddAppShelfItem';
 import { useConfig } from '../../tools/state';
 import { pingQbittorrent } from '../../tools/api';
 import { serviceItem } from '../../tools/types';
-
+import AddItemShelfItem from './AddAppShelfItem';
-export function AppShelfItemWrapper(props: any) {
+import { AppShelfItemWrapper } from './AppShelfItemWrapper';
-  const { children, hovering } = props;
+import AppShelfMenu from './AppShelfMenu';
-  const theme = useMantineTheme();
-  return (
-    <Card
-      style={{
-        boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
-
-        //TODO: #3 Fix this temporary fix and make the width and height dynamic / responsive
-        width: 200,
-        height: 180,
-      }}
-      radius="md"
-    >
-      {children}
-    </Card>
-  );
-}
 
 const AppShelf = (props: any) => {
   const { config, addService, removeService, setConfig } = useConfig();

components/AppShelf/AppShelfItemWrapper.tsx

@@ -0,0 +1,21 @@
+import { useMantineTheme, Card } from '@mantine/core';
+
+export function AppShelfItemWrapper(props: any) {
+  const { children, hovering } = props;
+  const theme = useMantineTheme();
+  return (
+    <Card
+      style={{
+        boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+
+        //TODO: #3 Fix this temporary fix and make the width and height dynamic / responsive
+        width: 200,
+        height: 180,
+      }}
+      radius="md"
+    >
+      {children}
+    </Card>
+  );
+}