✨ Add gridstack dashboard layout

src/components/Dashboard/Views/DashboardView.tsx

@@ -1,24 +1,29 @@
 import { Group, Stack } from '@mantine/core';
 import { useMemo } from 'react';
 import { useConfigContext } from '../../../config/provider';
-import { ServiceTile } from '../Tiles/Service/Service';
+import { CategoryType } from '../../../types/category';
+import { WrapperType } from '../../../types/wrapper';
+import { DashboardCategory } from '../Wrappers/Category/Category';
 import { DashboardSidebar } from '../Wrappers/Sidebar/Sidebar';
+import { DashboardWrapper } from '../Wrappers/Wrapper/Wrapper';
 
 export const DashboardView = () => {
   const wrappers = useWrapperItems();
+  const clockModule = useConfigContext().config?.integrations.clock;
 
   return (
     <Group align="top" h="100%">
-      {/*<DashboardSidebar location="left" />*/}
+      <DashboardSidebar location="left" />
       <Stack mx={-10} style={{ flexGrow: 1 }}>
-        {wrappers.map(
-          (item) =>
-            item.type === 'category'
-              ? 'category' //<DashboardCategory key={item.id} category={item as unknown as CategoryType} />
-              : 'wrapper' //<DashboardWrapper key={item.id} wrapper={item as WrapperType} />
+        {wrappers.map((item) =>
+          item.type === 'category' ? (
+            <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
+          ) : (
+            <DashboardWrapper key={item.id} wrapper={item as WrapperType} />
+          )
         )}
       </Stack>
-      {/*<DashboardSidebar location="right" />*/}
+      <DashboardSidebar location="right" />
     </Group>
   );
 };

src/components/Dashboard/Views/ViewToggleButton.tsx

@@ -0,0 +1,45 @@
+import { ActionIcon, Button, Text, Tooltip } from '@mantine/core';
+import { IconEdit, IconEditOff } from '@tabler/icons';
+import { useScreenLargerThan } from '../../../tools/hooks/useScreenLargerThan';
+import { useEditModeStore } from './useEditModeStore';
+
+export const ViewToggleButton = () => {
+  const screenLargerThanMd = useScreenLargerThan('md');
+  const { enabled: isEditMode, toggleEditMode } = useEditModeStore();
+
+  return (
+    <Tooltip
+      label={
+        <Text align="center">
+          In edit mode, you can adjust
+          <br />
+          the size and position of your tiles.
+        </Text>
+      }
+    >
+      {screenLargerThanMd ? (
+        <Button
+          variant={isEditMode ? 'filled' : 'default'}
+          h={44}
+          w={180}
+          leftIcon={isEditMode ? <IconEditOff /> : <IconEdit />}
+          onClick={() => toggleEditMode()}
+          color={isEditMode ? 'red' : undefined}
+          radius="md"
+        >
+          <Text>{isEditMode ? 'Exit Edit Mode' : 'Enter Edit Mode'}</Text>
+        </Button>
+      ) : (
+        <ActionIcon
+          onClick={() => toggleEditMode()}
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+        >
+          {isEditMode ? <IconEditOff /> : <IconEdit />}
+        </ActionIcon>
+      )}
+    </Tooltip>
+  );
+};