Refactor CSS on mydashboard started needs completed

client/src/components/dashboard/SettingsButton.jsx

@@ -1,4 +1,4 @@
-import {useState, useMemo, useRef} from "react";
+import {useState, useMemo, useRef, useEffect, useCallback} from "react";
 import {
   Button,
   Box,
@@ -13,13 +13,13 @@ import {
   useRecipe,
   useSlotRecipe
 } from "@chakra-ui/react";
-import {Settings, LayoutGrid, Move, Save, X} from 'lucide-react';
+import {Settings, LayoutGrid, Move, Save, X, ChevronRight, ChevronLeft} from 'lucide-react';
 import {useDashboardStore} from "../../store/useDashboardStore.jsx";
 import {WIDGET_REGISTRY} from "../../constants/widgetRegistry.jsx";
 
 // 🚨 NEW: Tiny helper to convert size keys into abbreviations
 const getSizeAbbreviation = (key) => {
-  const mapping = { small: "S", medium: "M", large: "L", xlarge: "XL" };
+  const mapping = {small: "S", medium: "M", large: "L", xlarge: "XL"};
   return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
 };
 
@@ -41,6 +41,29 @@ export function SettingsButton() {
 
   const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
+  // ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
+  const tabsRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const checkScroll = useCallback(() => {
+    if (tabsRef.current) {
+      const {scrollLeft, scrollWidth, clientWidth} = tabsRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      // We use -1 here to account for sub-pixel rendering in some browsers
+      setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isLibraryOpen) {
+      // Small timeout ensures the DOM has rendered the tabs before measuring
+      setTimeout(checkScroll, 50);
+      window.addEventListener('resize', checkScroll);
+      return () => window.removeEventListener('resize', checkScroll);
+    }
+  }, [isLibraryOpen, checkScroll]);
+
   // Smart Add Handler
   const handleAddWidget = (widgetId, sizeKey) => {
     enterEditMode();
@@ -76,10 +99,10 @@ export function SettingsButton() {
             css={tabStyles}
             data-state="open"
             onClick={() => setIsLibraryOpen(true)}
-            color={{ base: "blue.500", _dark: "blue.300" }}
-            _hover={{ bg: "rgba(66, 153, 225, 0.1)" }}
+            color={{base: "blue.500", _dark: "blue.300"}}
+            _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
           >
-            <LayoutGrid size={20} style={{ flexShrink: 0 }} />
+            <LayoutGrid size={20} style={{flexShrink: 0}}/>
             <Box as="span">Widget Library</Box>
           </Box>
 
@@ -89,10 +112,10 @@ export function SettingsButton() {
             css={tabStyles}
             data-state="open"
             onClick={saveEdit}
-            color={{ base: "green.600", _dark: "green.400" }}
-            _hover={{ bg: "rgba(72, 187, 120, 0.1)" }}
+            color={{base: "green.600", _dark: "green.400"}}
+            _hover={{bg: "rgba(72, 187, 120, 0.1)"}}
           >
-            <Save size={20} style={{ flexShrink: 0 }} />
+            <Save size={20} style={{flexShrink: 0}}/>
             <Box as="span">Save Layout</Box>
           </Box>
 
@@ -102,20 +125,20 @@ export function SettingsButton() {
             css={tabStyles}
             data-state="open"
             onClick={cancelEdit}
-            color={{ base: "red.500", _dark: "red.400" }}
-            _hover={{ bg: "rgba(245, 101, 101, 0.1)" }}
+            color={{base: "red.500", _dark: "red.400"}}
+            _hover={{bg: "rgba(245, 101, 101, 0.1)"}}
           >
-            <X size={20} style={{ flexShrink: 0 }} />
+            <X size={20} style={{flexShrink: 0}}/>
             <Box as="span">Discard</Box>
           </Box>
         </HStack>
       ) : (
         // 👀 VIEW MODE: The Static Dropdown Menu
-        <Menu.Root positioning={{ getAnchorRect }}>
+        <Menu.Root positioning={{getAnchorRect}}>
           <Menu.Trigger asChild>
             <Box ref={menuRef} as="button" css={tabStyles}>
               {/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
-              <Settings size={24} style={{ flexShrink: 0 }} />
+              <Settings size={24} style={{flexShrink: 0}}/>
               <Box as="span">Dashboard Settings</Box>
             </Box>
           </Menu.Trigger>
@@ -125,9 +148,9 @@ export function SettingsButton() {
               <Menu.Item
                 onClick={enterEditMode}
                 cursor="pointer"
-                _hover={{ WebkitTextStroke: "0.5px currentColor" }}
+                _hover={{WebkitTextStroke: "0.5px currentColor"}}
               >
-                <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
+                <Move size={16} style={{marginRight: '8px'}}/> Edit Layout
               </Menu.Item>
 
               <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
@@ -147,7 +170,7 @@ export function SettingsButton() {
         </Menu.Root>
       )}
 
-              {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
+      {/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
       <Dialog.Root
         open={isLibraryOpen}
         onOpenChange={(e) => setIsLibraryOpen(e.open)}
@@ -160,7 +183,7 @@ export function SettingsButton() {
         {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
         <Dialog.Positioner>
 
-                  <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>
+          <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="60%" minH="80%" p={0}>
 
             <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
                            borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
@@ -168,15 +191,119 @@ export function SettingsButton() {
             </Dialog.Header>
 
             <Dialog.Body p={0}>
-                      <Tabs.Root defaultValue={categories[0]} variant="enclosed" colorScheme="blue">
-                        <Tabs.List bg="transparent" px={4} pt={4}
-                                   borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
+              <Tabs.Root defaultValue={categories[0]} variant="unstyled">
+                <Box position="relative" display="flex" mx="auto" maxWidth="100%" mx={5} mt={4} mb={6}>
+
+                  {/* LEFT GLASS CRESCENT */}
+                  {canScrollLeft && (
+                    <Flex
+                      position="absolute"
+                      left="0" top="0" bottom="0"
+                      w="50px"
+                      align="center" justify="center"
+                      zIndex={2}
+                      cursor="pointer"
+                      onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}
+                      bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
+                      backdropFilter="blur(1px)"
+                      borderTopLeftRadius="full"
+                      borderBottomLeftRadius="full"
+
+                      // THE MAGIC: Bites a transparent circle out of the flat right side!
+                      WebkitMaskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 19px)"
+                      maskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 35px)"
+
+                      color={{base: "gray.600", _dark: "gray.300"}}
+                      transition="background-color 0.2s"
+                      _hover={{
+                        color: {base: "blue.500", _dark: "blue.300"},
+                        bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
+                      }}
+                    >
+                      {/* Shifted slightly left to optically center it in the crescent mass */}
+                      <ChevronLeft size={18} style={{ marginLeft: "-30px" }}/>
+                    </Flex>
+                  )}
+                  <Tabs.List
+                    ref={tabsRef}
+                    onScroll={checkScroll}
+                    bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
+                    p={1}
+                    borderRadius="full"
+                    display="flex"
+                    flexWrap="nowrap"
+                    overflowX="auto"
+                    maxWidth="100%"
+                    border="1px solid"
+                    borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
+                    css={{
+                      scrollbarWidth: "none",
+                      "&::-webkit-scrollbar": {display: "none"},
+                    }}
+                    // This is for desktop users not on trackpad to scroll the
+                    onWheel={(e) => {
+                      if (e.currentTarget) {
+                        e.currentTarget.scrollLeft += e.deltaY;
+                      }
+                    }}
+                  >
                     {categories.map(cat => (
-                            <Tabs.Trigger key={cat} value={cat} pb={2}
-                                          _selected={{color: "blue.500", borderColor: "blue.500"}}>{cat}</Tabs.Trigger>
+                      <Tabs.Trigger
+                        key={cat}
+                        value={cat}
+                        px={5}
+                        py={2}
+                        borderRadius="full"
+                        whiteSpace="nowrap"
+                        flexShrink={0}
+                        color={{base: "gray.500", _dark: "gray.400"}}
+                        fontWeight="medium"
+                        transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
+                        _hover={{
+                          color: {base: "gray.800", _dark: "gray.200"}
+                        }}
+                        _selected={{
+                          bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
+                          color: {base: "blue.600", _dark: "blue.200"},
+                          boxShadow: "sm",
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {cat}
+                      </Tabs.Trigger>
                     ))}
                   </Tabs.List>
+                  {canScrollRight && (
+                    <Flex
+                      position="absolute"
+                      right="0" top="0" bottom="0"
+                      w="50px"
+                      align="center" justify="center"
+                      zIndex={2}
+                      cursor="pointer"
+                      onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}
+                      bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
+                      backdropFilter="blur(1px)"
+                      borderTopRightRadius="full"
+                      borderBottomRightRadius="full"
 
+                      // THE MAGIC: Bites a transparent circle out of the flat left side!
+                      WebkitMaskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 19px)"
+                      maskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 35px)"
+
+                      color={{base: "gray.600", _dark: "gray.300"}}
+                      transition="background-color 0.2s"
+                      _hover={{
+                        color: {base: "blue.500", _dark: "blue.300"},
+                        bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
+                      }}
+                    >
+                      {/* Shifted slightly right to optically center it in the crescent mass */}
+                      <ChevronRight size={18} style={{ marginRight: "-30px" }}/>
+                    </Flex>
+                  )}
+
+                </Box>
                 {categories.map(cat => (
                   <Tabs.Content key={cat} value={cat} p={6}>
                     <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
@@ -209,7 +336,7 @@ export function SettingsButton() {
                                   onClick={() => handleAddWidget(widget.id, sizeKey)}
                                   color={{base: "blue.600", _dark: "blue.300"}}
                                 >
-                                          {/* 🚨 THE ABBREVIATION ICON: Always visible */}
+                                  {/* THE ABBREVIATION ICON: Always visible */}
                                   <Flex
                                     align="center"
                                     justify="center"
@@ -217,7 +344,7 @@ export function SettingsButton() {
                                     h="24px"
                                     flexShrink={0}
                                     borderRadius="full"
-                                            bg={{ base: "blue.50", _dark: "whiteAlpha.200" }}
+                                    bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
                                     fontWeight="black"
                                     fontSize="xs"
                                     bg='transparent'
@@ -225,7 +352,7 @@ export function SettingsButton() {
                                     {getSizeAbbreviation(sizeKey)}
                                   </Flex>
 
-                                          {/* 🚨 THE EXPANDED TEXT: Only visible on hover */}
+                                  {/* THE EXPANDED TEXT: Only visible on hover */}
                                   <Box as="span">Add Widget</Box>
                                 </Box>
                               ))}
@@ -238,7 +365,8 @@ export function SettingsButton() {
                 ))}
               </Tabs.Root>
             </Dialog.Body>
-                    <Dialog.CloseTrigger position="absolute" top={3} right={3} color={{ base: "gray.500", _dark: "whiteAlpha.800" }} _hover={{ color: "red.400" }} />
+            <Dialog.CloseTrigger position="absolute" top={3} right={3}
+                                 color={{base: "gray.500", _dark: "whiteAlpha.800"}} _hover={{color: "red.400"}}/>
           </Dialog.Content>
         </Dialog.Positioner>
       </Dialog.Root>

client/src/components/layout/Header.jsx

@@ -20,20 +20,11 @@ export default function Header() {
     const displayEmail = user?.email || "LDAP User";
 
     return (
-        <Flex css={styles} justify="space-between" align="center" width="100%">
-            {/*/!* Home Link Logo *!/*/}
-            {/*<Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">*/}
-            {/*    VDAP*/}
-            {/*</Button>*/}
+        <Flex css={styles} >
             <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />
-
             {/* User Profile Section */}
             <Flex align="center" gap={3} pr={6}>
-                <Text color="color" fontWeight="bold" textStyle="md" >{displayName}</Text>
-                {/*<Stack gap="0" textAlign="right" cursor="default">*/}
-                {/*    <Text color="color" fontWeight="bold" textStyle="md" width="100%" >{displayName}</Text>*/}
-                {/*    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>*/}
-                {/*</Stack>*/}
+                <Text fontWeight="bold" textStyle="md" >{displayName}</Text>
                 <UserAvatarMenu
                     name={avatarname}
                     // avatar={user.avatar}

client/src/components/layout/Sidebar.jsx

@@ -1,22 +1,24 @@
-import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
-import { ColorModeButton } from "@/components/ui/color-mode.jsx";
-import { useState } from "react";
-import { NavLink } from "react-router-dom";
+import {useSlotRecipe, Box, Button, IconButton} from "@chakra-ui/react";
+import {ColorModeButton} from "@/components/ui/color-mode.jsx";
+import {useState} from "react";
+import {NavLink} from "react-router-dom";
 import Tooltip from "../ui/Tooltip.jsx";
-import { Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import {Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
 
 const SIDEBAR_DEFAULT_BUTTONS = [
-  { icon: House, name: "Home", url: "/home" },
-  { icon: Earth, name: "Global Map", url: "/global-map" },
-  { icon: MapPin, name: "Regional Map", url: "/regional-map" },
-  { icon: Mountain, name: "Volcano", url: "/volcano" },
-  { icon: ShieldUser, name: "Admin", url: "/admin" } // TODO remove in the future as default should not have admin
+  {icon: House, name: "Home", url: "/home"},
+  {icon: Earth, name: "Global Map", url: "/global-map"},
+  {icon: MapPin, name: "Regional Map", url: "/regional-map"},
+  {icon: Mountain, name: "Volcano", url: "/volcano"},
+  {icon: ShieldUser, name: "Admin", url: "/admin"} // TODO remove in the future as default should not have admin
 ];
 
 export default function Sidebar() {
+
   const [isOpen, setIsOpen] = useState(true);
-  const recipe = useSlotRecipe({ key: "sidebar" });
-  const styles = recipe();
+
+  const recipe = useSlotRecipe({key: "sidebar"});
+  const styles = recipe({state: isOpen ? "open" : "closed"});
 
   // TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
   const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;
@@ -24,89 +26,49 @@ export default function Sidebar() {
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
-      <Box
-          css={styles.root}
-          width={isOpen ? "190px" : "71px"}
-          transition="width 0.4s ease"
-          position="relative"
-          display="flex"
-          flexDirection="column"
-          gap={4} // Increased gap slightly to help with the squashed look
-          pt={4} // Added top padding to give the logo room to breathe
-      >
+    <Box css={styles.root}>
       {/* Home Link Logo */}
       <Button
         as={NavLink}
         to="/home"
-            color="color"
+        css={styles.logo}
         variant="plain"
-            fontWeight="bold"
-            height="auto" // Prevents the large text from squashing vertically
-            overflow="hidden"
-            px={0}
-            justifyContent={isOpen ? "center" : "center"} // Center the 'V' when collapsed
-            ml={isOpen ? 3 : 0} // Align with other buttons when open
-            textStyle={isOpen ? "4xl" : "3xl"} // Scale down slightly when closed
       >
         {isOpen ? "🌋 VDAP" : "🌋"}
       </Button>
 
 
-
       {/* Navigation Buttons */}
       {visibleButtons.map((button) => {
         const Icon = button.icon;
         return (
-              // <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
           <Button
             as={NavLink}
             to={button.url}
             css={styles.buttons}
-                    justifyContent="flex-start"
-                    width="100%"
-                    // overflow="hidden" // Prevents text popout on collapse
-                >
-                  <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
-
-                  {/* Cleaned conditional transition styling */}
-                  <Box
-                      as="span"
-                      ml={isOpen ? 3 : 0}
-                      opacity={isOpen ? 1 : 0}
-                      visibility={isOpen ? "visible" : "hidden"} // Prevents phantom width calculations and overflow into canvas
-                      transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
-                      whiteSpace="nowrap"
           >
+            {/* Navigation buttons are [icon text] */}
+            <Icon/>
+            <Box as="span" css={styles.button_text}>
               {button.name}
             </Box>
           </Button>
-              // </Tooltip>
         );
       })}
-        <Box
-            mt="auto"
-            display="flex"
-            flexDirection={isOpen ? "row" : "column-reverse"}
-            justifyContent="center"
-            alignItems="center"
-            gap={isOpen ? 16 : 2}
-            pb={4}
-            pr={2}
-            transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
-        >
+      <Box css={styles.footer}>
         {/* Menu Trigger */}
         <IconButton
           aria-label="Toggle Sidebar"
           variant="plain"
           size="md"
           onClick={toggleSidebar}
-              transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
+          css={styles.collapse_button}
         >
-            {isOpen ? <PanelLeftClose style={{ flexShrink: 0 }} /> : <PanelLeftOpen style={{ flexShrink: 0 }} />}
+          {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
         </IconButton>
 
           {/* Theme Toggler */}
-          <ColorModeButton />
+          <ColorModeButton _hover={{ bg: "transparent" }} />
         </Box>
       </Box>
   );

client/src/pages/home/tabs/MyDashboard.jsx

@@ -3,7 +3,7 @@ import {X, MoreVertical} from "lucide-react";
 import {Responsive, WidthProvider} from "react-grid-layout";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {Suspense, useEffect, useRef} from 'react';
-import {useColorModeValue} from "@/components/ui/color-mode";
+
 // 1. Import database messenger
 import useAuthStore from "@/store/authStore";
 
@@ -14,11 +14,6 @@ import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export default function MyDashboard() {
-  // 🌗 Let's adjust for our light and dark mode
-  const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
-  const titleColor = useColorModeValue("gray.800", "#FFFFFF");
-  const iconColor = useColorModeValue("gray.600", "#FFFFFF");
-  const iconHoverBg = useColorModeValue("gray.100", "gray.700");
 
   // ☁️ Database Connection
   const {user} = useAuthStore();

client/src/theme.js

@@ -14,22 +14,8 @@ const headerRecipe = defineRecipe({
   }
 });
 
-const dashboardRecipe = defineRecipe({
-  base: {
-    bg: "{MainBackground}"
-  }
-});
-
-const canvasRecipe = defineRecipe({
-  base: {
-    bg: "{transparent}",
-    zIndex: "-1",
-    color: "{text}"
-  }
-});
-
 const sidebarRecipe = defineSlotRecipe({
-  slots: ["root", "close_button", "buttons", "dark_mode_button"],
+  slots: ["root", "logo", "footer", "button_text","buttons", "collapse_button"],
   base: {
     root: {
       // 1. Semi-transparent backgrounds
@@ -57,14 +43,17 @@ const sidebarRecipe = defineSlotRecipe({
       margin: "8px",
       display: "flex",
       flexDirection: "column",
+      position: "relative",
       justifyContent: "start",
       alignItems: "stretch",
-      gap: 2,
+      gap: 4,
+      transition: "width 0.4s ease",
 
       // CRITICAL: Adjust padding and overflow to allow the button to touch the right edge
       pl: 2, // Keep left padding
       py: 2, // Keep top/bottom padding
       pr: 0, // Remove right padding
+      pt: 4, // Added top padding to give the logo room to breathe
       overflow: "visible", // Allows the curved corner patches to render outside the button
       zIndex: 10,
     },
@@ -72,10 +61,12 @@ const sidebarRecipe = defineSlotRecipe({
       position: "relative", // Required to anchor the corner patches
       bg: "transparent",
 
+      justifyContent: "flex-start",
       transition: "background-color 0.4s ease, color 0.4s ease",
 
       "& svg": {
-        transition: "stroke-width 0.4s ease"
+        transition: "stroke-width 0.4s ease",
+        flexShrink: "0"
       },
 
       _hover: {
@@ -138,6 +129,59 @@ const sidebarRecipe = defineSlotRecipe({
         }
       },
     },
+    logo: {
+      width: "100%",
+      height: "auto",
+      overflow: "hidden",
+      fontWeight: "bold",
+      px: 0,
+    },
+    footer: {
+      mt: "auto",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      pb: 4,
+      pr: 2,
+      transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
+    },
+    button_text: {
+      transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+      whiteSpace: "nowrap"
+    },
+    collapse_button: {
+      "& svg": { flexShrink: "0" },
+    },
+  },
+  variants: {
+    state: {
+      open: {
+        root: { width: "190px" },
+        logo: { justifyContent: "flex-start", ml: 2, textStyle: "4xl" },
+        footer: { gap: 16, flexDirection: "row" },
+        button_text: {ml: 3, opacity: 1, visibility: "visible"},
+      },
+      closed: {
+        root: { width: "71px" },
+        logo: { justifyContent: "center", ml: -1, textStyle: "3xl" },
+        footer: { gap: 2, flexDirection: "column-reverse"  },
+        button_text: {ml: 0, opacity: 0, visibility: "hidden"},
+      }
+    }
+  }
+});
+
+const dashboardRecipe = defineRecipe({
+  base: {
+    bg: "{MainBackground}"
+  }
+});
+
+const canvasRecipe = defineRecipe({
+  base: {
+    bg: "{transparent}",
+    zIndex: "-1",
+    color: "{text}"
   }
 });
 
@@ -224,6 +268,17 @@ const glassPanelRecipe = defineSlotRecipe({
           WebkitBackdropFilter: "blur(15px)",
         }
       }
+    },
+    mode: {
+      editing: {
+        root: {
+          boxShadow: "outline",
+          borderStyle: "dashed",
+          borderWidth: "2px",
+          borderColor: "orange.300",
+          cursor: "grab",
+        }
+      }
     }
   },
 
@@ -231,6 +286,7 @@ const glassPanelRecipe = defineSlotRecipe({
     layout: "widget"
   }
 });
+
 const glassTabRecipe = defineRecipe({
   base: {
     display: "flex",