reformatting slot recipes for better orginization

refactoring theme.js by breaking up the root slot into further header, body slots to better compartmentalize css in components
fixed disappearing color mode button on re-opening of sidebar
2026-09-15 14:45:32 -07:00 · 2026-09-15 10:59:20 -07:00 · 2026-09-15 08:30:53 -07:00 · 2026-09-14 15:50:28 -07:00 · 2026-09-14 15:31:23 -07:00 · 2026-09-14 09:04:16 -07:00
22 changed files with 1278 additions and 1042 deletions
@@ -24,6 +24,6 @@ export default defineConfig([globalIgnores(['dist']), {
    },
  },
  rules: {
-    'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    'no-unused-vars': 'off',
  },
 }, ...storybook.configs["flat/recommended"]])
@@ -2,6 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="volcano.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VDAP</title>
@@ -1,7 +1,7 @@
 import 'leaflet/dist/leaflet.css';
-import { useEffect } from 'react';
-import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
-import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";
+import {useEffect} from 'react';
+import {Routes, Route, Navigate, Outlet} from 'react-router-dom';
+import {useRecipe, Grid, GridItem, useDialog, Flex, Heading} from "@chakra-ui/react";

 // --- NEW AUTH IMPORTS ---
 import useAuthStore from './store/authStore';
@@ -19,41 +19,7 @@ import GlobalMap from "./pages/maps/GlobalMap.jsx";
 import Admin from "./pages/admin/Admin.jsx";
 import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";

-function AppFoundation() {
-  const recipe = useRecipe({ key: "dashboard" });
-  const styles = recipe();
-  const dialog = useDialog();
-
-  return (
-    <>
-      <DialogPopup dialog={dialog} />
-      <Grid css={styles}
-        templateRows="1fr 11fr"
-        templateColumns="auto 1fr"
-        height="100vh"
-        width="100vw"
-      >
-        <GridItem rowSpan={1} colSpan={2}>
-          <Header />
-        </GridItem>
-        <GridItem colSpan={1}>
-          <Sidebar />
-        </GridItem>
-        <GridItem colSpan={1} width="100%" overflow="auto">
-          <Outlet />
-        </GridItem>
-      </Grid>
-    </>
-  )
-}
-
-const Placeholder = ({ name }) => (
-    <Flex width="100%" height="100%" align="center" justify="center">
-        <Heading color="gray.500" _dark={{ color: "gray.200" }} size="lg">{name} Dashboard - Coming Soon</Heading>
-    </Flex>
-);
-
-function App() {
+export default function App() {
  // 1. Pull the initialization function from Zustand
  const checkAuth = useAuthStore((state) => state.checkAuth);

@@ -65,34 +31,63 @@ function App() {
  return (
    <Routes>
      {/* --- Public Routes --- */}
-            <Route path="/login" element={<Login />} />
+      <Route path="/login" element={<Login/>}/>

-            {/* --- SECURE ROUTES --- */}
-            <Route element={<ProtectedRoute />}>
+      {/* --- Secure Routes --- */}
+      <Route element={<ProtectedRoute/>}>

        {/* --- Non-Public Routes (Now completely locked down) --- */}
-                <Route element={<AppFoundation />}>
+        <Route element={<AppFoundation/>}>

-                    <Route path="/home" element={<Home />}>
-                        <Route index element={<MyDashboard />} />
-                        <Route path="gas" element={<Placeholder name="Gas" />} />
-                        <Route path="seismic" element={<Placeholder name="Seismic" />} />
-                        <Route path="remote" element={<Placeholder name="Remote Sensing" />} />
-                        <Route path="daily" element={<Placeholder name="Daily Activity" />} />
+          <Route path="/home" element={<Home/>}>
+            <Route index element={<MyDashboard/>}/>
+            <Route path="gas" element={<Placeholder name="Gas"/>}/>
+            <Route path="seismic" element={<Placeholder name="Seismic"/>}/>
+            <Route path="remote" element={<Placeholder name="Remote Sensing"/>}/>
+            <Route path="daily" element={<Placeholder name="Daily Activity"/>}/>
          </Route>

-                    <Route path="/global-map" element={<GlobalMap />} />
-                    <Route path="/regional-map" element={<RegionalMap />} />
-                    <Route path="/volcano" element={<Volcano />} />
-                    <Route path="/admin" element={<Admin />} />
+          <Route path="/global-map" element={<GlobalMap/>}/>
+          <Route path="/regional-map" element={<RegionalMap/>}/>
+          <Route path="/volcano" element={<Volcano/>}/>
+          <Route path="/admin" element={<Admin/>}/>
        </Route>

      </Route>

      {/* --- Redirect Routes --- */}
-            <Route path="/" element={<Navigate to="/home" replace />} />
+      <Route path="/" element={<Navigate to="/home" replace/>}/>
    </Routes>
  );
 }

-export default App;
+// The fundamental layout of the webpage
+function AppFoundation() {
+  const recipe = useRecipe({key: "dashboard"});
+  const styles = recipe();
+  const dialog = useDialog();
+
+  return (
+    <>
+      <DialogPopup dialog={dialog}/>
+      <Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
+        <GridItem rowSpan={2} colSpan={1}>
+          <Sidebar/>
+        </GridItem>
+        <GridItem rowSpan={1} colSpan={1}>
+          <Header/>
+        </GridItem>
+        <GridItem colSpan={1}>
+          <Outlet/>
+        </GridItem>
+      </Grid>
+    </>
+  )
+}
+
+// A dummy page that acts as a placeholder for pages that aren't developed yet but are navigatable to
+const Placeholder = ({name}) => (
+  <Flex width="100%" height="100%" align="center" justify="center">
+    <Heading color="gray.500" _dark={{color: "gray.200"}} size="lg">{name} Dashboard - Coming Soon</Heading>
+  </Flex>
+);
@@ -1,7 +1,6 @@
-import { useState, useMemo, useRef } from "react";
+import {useState, useMemo, useRef, useEffect, useCallback} from "react";
 import {
  Button,
-    IconButton,
  Box,
  Text,
  Flex,
@@ -10,25 +9,62 @@ import {
  Tabs,
  Badge,
  Menu,
-    HStack
+  HStack,
+  useRecipe,
+  useSlotRecipe
 } from "@chakra-ui/react";
-import { Settings, Plus, LayoutGrid, Move, Save, X } from 'lucide-react';
-import { useDashboardStore } from "../../store/useDashboardStore.jsx";
-import { WIDGET_REGISTRY } from "../../constants/widgetRegistry.jsx";
+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"};
+  return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
+};

 export function SettingsButton() {
  // 1. ☁Store connections
  const isEditing = useDashboardStore(state => state.isEditing);
  const enterEditMode = useDashboardStore(state => state.enterEditMode);
-
-    // This now handles both local UI lock AND database saving!
  const saveEdit = useDashboardStore(state => state.saveEdit);
-
  const cancelEdit = useDashboardStore(state => state.cancelEdit);
  const addWidget = useDashboardStore(state => state.addWidget);

+  const glassTabRecipe = useRecipe({key: "glassTab"});
+  const tabStyles = glassTabRecipe();
+
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Pull the glass container styles for the dropdown and modal
+  const panelRecipe = useSlotRecipe({key: "glassPanel"});
+  const panelStyles = panelRecipe({layout: "dropdown"});
+  const modalStyles = panelRecipe({layout: "popover"});
+
  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 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();
@@ -39,7 +75,7 @@ export function SettingsButton() {
    return Object.entries(WIDGET_REGISTRY).reduce((acc, [id, widget]) => {
      const cat = widget.category || 'General';
      if (!acc[cat]) acc[cat] = [];
-            acc[cat].push({ id, ...widget });
+      acc[cat].push({id, ...widget});
      return acc;
    }, {});
  }, []);
@@ -55,94 +91,172 @@ export function SettingsButton() {

  return (
    <>
-            {/* THE STATIC DROPDOWN MENU */}
-            <Menu.Root positioning={{ getAnchorRect }}>
-                <Menu.Trigger asChild>
-                    <IconButton
-                        ref={menuRef}
-                        aria-label="Settings"
-                        bg="vdap.darkGreen"
-                        color="white"
-                        size="sm"
-                        borderRadius="md"
-                        _hover={{ bg: "vdap.darkGreenHover" }}
-                    >
-                        <Settings size={18} />
-                    </IconButton>
-                </Menu.Trigger>
-                <Menu.Positioner>
-                    <Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
      {isEditing ? (
-                            <>
-                                {/* WIRE DIRECTLY TO saveEdit */}
-                                <Menu.Item onClick={saveEdit} color="green.600" fontWeight="bold" cursor="pointer" _hover={{ bg: "green.50" }}>
-                                    <Save size={16} style={{ marginRight: '8px' }} /> Save Layout
-                                </Menu.Item>
+        // 📝 EDIT MODE: The 3-Pill Layout
+        <HStack>
+          {/* 1. The Add Widget Button */}
+          <Box as="button" css={tabStyles} data-state="open" onClick={() => setIsLibraryOpen(true)}
+            color={{base: "blue.500", _dark: "blue.300"}} _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
+          >
+            <LayoutGrid size={20} style={{flexShrink: 0}}/>
+            <Box as="span">Widget Library</Box>
+          </Box>

-                                <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
-                                    <X size={16} style={{ marginRight: '8px' }} /> Discard Changes
-                                </Menu.Item>
-                            </>
+          {/* 2. The Save Button */}
+          <Box as="button" css={tabStyles} data-state="open" onClick={saveEdit} color={{base: "green.600", _dark: "green.400"}}
+            _hover={{bg: "rgba(72, 187, 120, 0.1)"}}
+          >
+            <Save size={20} style={{flexShrink: 0}}/>
+            <Box as="span">Save Layout</Box>
+          </Box>
+
+          {/* 3. The Discard Button */}
+          <Box as="button" css={tabStyles} data-state="open" onClick={cancelEdit} color={{base: "red.500", _dark: "red.400"}}
+            _hover={{bg: "rgba(245, 101, 101, 0.1)"}}
+          >
+            <X size={20} style={{flexShrink: 0}}/>
+            <Box as="span">Discard</Box>
+          </Box>
+        </HStack>
      ) : (
-                            <Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
-                                <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
+        // 👀 VIEW MODE: The Static Dropdown Menu
+        <Menu.Root positioning={{getAnchorRect}}>
+          <Menu.Trigger asChild>
+            <Box ref={menuRef} as="button" css={tabStyles}>
+              {/* settings icon size set to 24 to match tabs. flexShrink 0 is CRITICAL */}
+              <Settings size={24} style={{flexShrink: 0}}/>
+              <Box as="span">Dashboard Settings</Box>
+            </Box>
+          </Menu.Trigger>
+
+          <Menu.Positioner>
+            <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
+              <Menu.Item
+                onClick={enterEditMode}
+                cursor="pointer"
+                _hover={{WebkitTextStroke: "0.5px currentColor"}}
+              >
+                <Move size={16} style={{marginRight: '8px'}}/> Edit Layout
              </Menu.Item>
-                        )}

-                        <Menu.Separator my={1} borderColor="gray.200" />
+              <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>

-                        <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
-                            <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
+              <Menu.Item
+                onClick={() => setIsLibraryOpen(true)}
+                cursor="pointer"
+                _hover={{
+                  bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
+                  WebkitTextStroke: "0.5px currentColor"
+                }}
+              >
+                <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
              </Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Menu.Root>
+      )}

-            {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
-            <Dialog.Root open={isLibraryOpen} onOpenChange={(e) => setIsLibraryOpen(e.open)} size="xl" placement="center">
-                <Dialog.Backdrop bg="blackAlpha.600" />
+      {/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
+      <Dialog.Root
+        open={isLibraryOpen}
+        onOpenChange={(e) => setIsLibraryOpen(e.open)}
+        closeOnInteractOutside={true}
+        closeOnEscapeKeyDown={true}
+        size="xl"
+        placement="center"
+      >
+        {/* Soft blur can be added to the background behind the modal */}
+        {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
        <Dialog.Positioner>
-                    <Dialog.Content bg="gray.50" borderRadius="xl" overflow="hidden" boxShadow="xl" maxW="800px">
-                        <Dialog.Header bg="vdap.darkGreen" color="white" py={4}>
-                            <Dialog.Title fontSize="xl" fontWeight="bold">Add Dashboard Widgets</Dialog.Title>
+          <Dialog.Content css={modalStyles.root}>
+            <Dialog.Header>
+              <Dialog.Title>Widgets Shop</Dialog.Title>
            </Dialog.Header>

-                        <Dialog.Body p={0}>
-                            <Tabs.Root defaultValue={categories[0]} variant="enclosed" colorScheme="blue">
-                                <Tabs.List bg="white" px={4} pt={4} borderBottom="1px solid" borderColor="gray.200">
+            <Dialog.Body>
+              <Tabs.Root defaultValue={categories[0]} variant="unstyled">
+                {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
+                <Box>
+                  {/* left glass crescent */}
+                  {canScrollLeft && (
+                    <Flex onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}>
+                      <ChevronLeft size={18} style={{ marginLeft: "-30px" }}/> {/* Shifted slightly left to optically center it in the crescent mass */}
+                    </Flex>
+                  )}
+
+                  {/* the categories */}
+                  <Tabs.List ref={tabsRef} onScroll={checkScroll}
+                    // For desktop users (not on trackpad) to scroll
+                    onWheel={(e) => { if (e.currentTarget) e.currentTarget.scrollLeft += e.deltaY; }}
+                  >
                    {categories.map(cat => (
-                                        <Tabs.Trigger key={cat} value={cat} pb={2}>{cat}</Tabs.Trigger>
+                      <Tabs.Trigger key={cat} value={cat}>
+                        {cat}
+                      </Tabs.Trigger>
                    ))}
                  </Tabs.List>

+                  {/* right glass crescent */}
+                  {canScrollRight && (
+                    <Flex onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}>
+                      {/* Shifted slightly right to optically center it in the crescent mass */}
+                      <ChevronRight size={18} style={{ marginRight: "-30px" }}/>
+                    </Flex>
+                  )}
+                </Box>
+
+                {/* THE WIDGET OPTIONS W/IN EACH CATEGORY */}
                {categories.map(cat => (
                  <Tabs.Content key={cat} value={cat} p={6}>
                    <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
                      {categorizedWidgets[cat].map(widget => (
-                                                <Flex key={widget.id} direction="column" bg="white" p={4} borderRadius="md" border="1px solid" borderColor="gray.200" boxShadow="sm">
+                        <Flex
+                          key={widget.id}
+                          direction="column"
+                          bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
+                          p={4}
+                          borderRadius="xl"
+                          border="1px solid"
+                          borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
+                          boxShadow="sm"
+                        >
                          <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
                          <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>

-                                                    <Box borderTop="1px solid" borderColor="gray.100" pt={3}>
-                                                        <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase" mb={2}>Add to Grid:</Text>
+                          <Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
+                               pt={3}>
+                            <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
+                                  mb={2}>
+                              Add to Dashboard:
+                            </Text>
                            <HStack gap={2} flexWrap="wrap">
                              {Object.keys(widget.allowedSizes).map(sizeKey => (
-                                                                <Badge
+                                <Box
                                  key={sizeKey}
                                  as="button"
+                                  css={tabStyles}
                                  onClick={() => handleAddWidget(widget.id, sizeKey)}
-                                                                    colorScheme="gray"
-                                                                    variant="subtle"
-                                                                    px={3}
-                                                                    py={1}
-                                                                    borderRadius="full"
-                                                                    cursor="pointer"
-                                                                    _hover={{ bg: "blue.50", color: "blue.600", transform: "scale(1.05)" }}
-                                                                    transition="all 0.2s"
+                                  color={{base: "blue.600", _dark: "blue.300"}}
                                >
-                                                                    <Plus size={12} style={{ display: 'inline', marginRight: '4px' }}/>
-                                                                    {sizeKey.charAt(0).toUpperCase() + sizeKey.slice(1)}
-                                                                </Badge>
+                                  {/* THE ABBREVIATION ICON: Always visible */}
+                                  <Flex
+                                    align="center"
+                                    justify="center"
+                                    w="24px"
+                                    h="24px"
+                                    flexShrink={0}
+                                    borderRadius="full"
+                                    // bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
+                                    fontWeight="black"
+                                    fontSize="xs"
+                                    bg='transparent'
+                                  >
+                                    {getSizeAbbreviation(sizeKey)}
+                                  </Flex>
+
+                                  {/* THE EXPANDED TEXT: Only visible on hover */}
+                                  <Box as="span">Add Widget</Box>
+                                </Box>
                              ))}
                            </HStack>
                          </Box>
@@ -153,7 +267,8 @@ export function SettingsButton() {
                ))}
              </Tabs.Root>
            </Dialog.Body>
-                        <Dialog.CloseTrigger position="absolute" top={3} right={3} color="white" />
+            <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>
@@ -1,79 +0,0 @@
-import Widget from "./Widget.jsx";
-import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
-import { useForm } from "react-hook-form";
-import { useState } from "react";
-import { Asterisk } from 'lucide-react';
-
-export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
-  const { register, handleSubmit, reset, formState: {errors} } = useForm();
-  const [isSubmit, setIsSubmit] = useState(false);
-
-  const onSubmit = (data) => {
-    setIsSubmit(true);
-    reset();
-  }
-
-  // Prop Forwarding
-  const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
-
-  return (
-    <Widget title="Alert Level" {...widgetProps} >
-      {!isSubmit ? (
-        // DISPLAYING INPUT FIElDS AND LABELS
-        <Box 
-          as="form" 
-          onSubmit={handleSubmit(onSubmit)}
-          width="100%"
-          p={3}
-          display="flex"
-          flexDir="column"
-        >
-          <Fieldset.Root size="md" maxW="md">
-            <Fieldset.Content>
-              <Field.Root>
-                <Field.Label fontWeight="semibold">Volcano</Field.Label>
-                <Input name="volcanoname" />
-              </Field.Root>
-
-              <Field.Root>
-                <Field.Label fontWeight="semibold">Country</Field.Label>
-                <NativeSelect.Root>
-                  <NativeSelect.Field name="country">
-                    <For each={["United Kingdom", "Canada", "United States"]}>
-                      {(item) => (
-                        <option key={item} value={item}>
-                          {item}
-                        </option>
-                      )}
-                    </For>
-                  </NativeSelect.Field>
-                  <NativeSelect.Indicator />
-                </NativeSelect.Root>
-              </Field.Root>
-            </Fieldset.Content>
-
-            <Button type="submit" size="sm">Submit</Button>
-          </Fieldset.Root>
-        </Box>
-      ):(
-        // DISPLAYING ALERT LEVEL DATA
-        <Box p={1} mt={1} ml="auto" mr="auto" width="200px">
-          <Box
-            bg="bg" 
-            shadow="md" 
-            borderRadius="md"
-            p={8}
-            width="200px"
-            height="10px"
-            textAlign="center"
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-          >
-            <Text fontsize="2xl" fontWeight="bold" color="gray.700">Alert Level Data Coming Soon.</Text>
-          </Box>
-        </Box>
-      )}
-    </Widget>
-  );
-}
@@ -1,7 +0,0 @@
-import { Button } from "@chakra-ui/react";
-
-export function CancelButton ({onCancel}) {
-  return (
-    <Button onClick={onCancel} borderRadius="md">Cancel</Button>
-  )
-}
@@ -1,39 +0,0 @@
-// DEPRECATED
-
-// import GlobalMap from "./views/GlobalMap";
-// import RegionalMap from "./views/RegionalMap";
-// import Volcano from "./views/Volcano";
-// import Admin from "./views/Admin";
-// import Account from "./views/Account"
-// import Home from "./views/Home";
-// import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys";
-// import { chakra } from "@chakra-ui/react";
-// import Personal from "./views/Personal";
-// import Security from "./views/Security";
-//
-// export default function Canvas(props) {
-//   const { view } = props;
-//
-//   return (
-//         <chakra.div width="100%" height="100%">
-//             {/* Check if view is a tab inside the Home Header */}
-//             { DASHBOARD_VIEWS.includes(view) && (
-//                 <Home {...props}/>
-//             )}
-//             {/* Check if view is a tab inside the Volcano Header */}
-//             { VOLCANO_VIEWS.includes(view) && (
-//                 <Volcano {...props}/>
-//             )}
-//             {/* Check if view is a tab inside the Admin Header */}
-//             { ADMIN_VIEWS.includes(view) && (
-//                 <Admin {...props}/>
-//             )}
-//             {view === "global" && <GlobalMap />}
-//             {view === "regional" && <RegionalMap />}
-//             {view === "account" && <Account />}
-//             {view === "settings" && <Personal />}
-//             {view === "personal" && <Personal />}
-//             {view === "security" && <Security />}
-//         </chakra.div>
-//     );
-// }
@@ -1,27 +0,0 @@
-import { MoveDiagonal2 } from 'lucide-react';
-import React from "react";
-
-const CustomResizeHandle = React.forwardRef((props, ref) => {
-  const { handleAxis, isVisable, ...restProps } = props;
-  if (!isVisable) return null;
-  return (
-    <div
-      ref={ref}
-      {...restProps}
-      className={`resize-hande-${handleAxis}`}
-      style={{
-        position: 'absolute',
-        bottom: 0,
-        right: 0,
-        cursor: "pointer",
-        width: "20px",
-        height: "20px",
-        zIndex: "1",
-      }}
-    >
-      <MoveDiagonal2 />
-    </div>
-  );
-});
-
-export default CustomResizeHandle;
@@ -1,95 +0,0 @@
-// DEPRECATED
-
-// import Header from './Header/Header.jsx';
-// import Sidebar from './Sidebar/Sidebar.jsx';
-// import Canvas from './Canvas/Canvas.jsx';
-// import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
-// import { useState } from 'react';
-// import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
-//
-// export default function Dashboard() {
-//   const recipe = useRecipe({ key: "dashboard" });
-//   const styles = recipe();
-//
-//   const [darkMode, setDarkMode] = useState(false);
-//   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
-//   const [isDelete, setIsDelete] = useState(false);
-//   const [originalLayout, setOriginalLayout] = useState([]);
-//   const [originalWidgets, setOriginalWidgets] = useState([]);
-//   const [view, setView] = useState("mydashboard");
-//   const [layout, setLayout] = useState([]);
-//   const [widgetArray, setWidgetArray] = useState([]);
-//   const dialog = useDialog();
-//
-//   const beginEditIfNeeded = () => {
-//     if ( !isEditable ) {
-//       setOriginalLayout(layout);
-//       setOriginalWidgets(widgetArray);
-//     }
-//   };
-//
-//   const onCancel = () => {
-//     console.log("canceling changes...");
-//     console.log(originalWidgets);
-//     if (originalLayout.length) {
-//       setLayout(originalLayout.map(item => ({
-//         ...item,
-//         static: true
-//       })));
-//     };
-//     setWidgetArray(originalWidgets);
-//     setIsEditable(false);
-//     setIsDelete(false);
-//     setOriginalLayout([]);
-//     setOriginalWidgets([]);
-//   }
-//
-//   // Prevent navigation while in Edit mode without saving or cancelling
-//   const handleViewChange = (nextView) => {
-//     console.log("1. handling view change")
-//     if (view === "mydashboard" && isEditable) {
-//       console.log("2. currently editing");
-//       dialog.setOpen(true);
-//       return;
-//
-//       // const confirmed = window.confirm(
-//       //   "You have unsaved changes. Discard them and continue?"
-//       // );
-//       // if (!confirmed) return;
-//       // onCancel();
-//     }
-//     setView(nextView);
-//   };
-//
-//   const onLayoutChange = (newLayout) => setLayout(newLayout);
-//
-//   // Prop Forwarding
-//   const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange,
-//     onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded
-//   };
-//   const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
-//   const headerProps = { onChangeView: handleViewChange };
-//
-//   return (
-//     <>
-//       <DialogPopup dialog={dialog} />
-//       <Grid css={styles}
-//         templateRows="1fr 11fr"
-//         // templateColumns="1fr 20fr"
-//         templateColumns="auto 1fr"
-//         height="100vh"
-//         width="100vw"
-//       >
-//         <GridItem rowSpan={1} colSpan={2}>
-//           <Header {...headerProps}/>
-//         </GridItem>
-//         <GridItem colSpan={1}>
-//           <Sidebar {...sidebarProps}/>
-//         </GridItem>
-//         <GridItem colSpan={1} width="100%" overflow="auto">
-//           <Canvas {...canvasProps}/>
-//         </GridItem>
-//       </Grid>
-//     </>
-//   );
-// }
@@ -1,9 +0,0 @@
-import { Button } from "@chakra-ui/react";
-
-export default function DeleteAllButton ({onDeleteAll}) {
-  return (
-    <Button onClick={onDeleteAll} color="#FFFFFF" bg="#EF4444" _hover={{ bg: "bg.error", color: "#EF4444"}}>
-      Delete All
-    </Button>
-  )
-}
@@ -1,57 +0,0 @@
-import { Box, Menu, Portal } from '@chakra-ui/react'
-import AlertLevel from "@/components/deprecated/AlertLevelWidget.jsx";
-
-export default function FirstWidgetButton({ appendWidget }) {
-  const triggerItem = (
-    <>
-      <Menu.Trigger asChild>
-        <Box
-          p={6}
-          m="auto"
-          mt={6}
-          align="center"
-          textAlign="center"
-          justify="center"
-          width="400px"
-          borderRadius="md"
-          boxShadow="md"
-          border="2px dashed"
-          borderColor="gray.300"
-          bg="gray.50"
-          cursor="pointer"
-          _hover = {{
-            bg: "gray.100",
-            borderColor: "gray.400",
-            boxShadow: "lg",
-          }}
-        >
-          Add Your First Widget
-        </Box>
-      </Menu.Trigger>
-    </>
-  );
-  const positioning = { placement: "bottom-middle" };
-  // const WidgetMenuProps = { appendWidget, triggerItem, positioning };
-  return (
-    // <WidgetMenu {...WidgetMenuProps} />
-    <Menu.Root positioning={positioning}>
-      {triggerItem}
-      <Portal>
-        <Menu.Positioner>
-          <Menu.Content>
-            <Menu.Item
-              value="AlertLevel"
-              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
-            >
-              Alert Level
-            </Menu.Item>
-            <Menu.Item value="CO2">CO2</Menu.Item>
-            <Menu.Item value="Ivans">IVANS</Menu.Item>
-            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
-            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
-          </Menu.Content>
-        </Menu.Positioner>
-      </Portal>
-    </Menu.Root>
-  );
-}
@@ -1,7 +0,0 @@
-import { Button } from "@chakra-ui/react";
-
-export function SaveButton ({onSave}) {
-  return (
-    <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
-  )
-}
@@ -1,32 +0,0 @@
-import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
-import { Undo } from 'lucide-react';
-
-export default function Widget(props) {
-  // deconstructing props
-  const { id, title, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit, children } = props;
-
-  const recipe = useSlotRecipe({ key: "widget" });
-  const styles = recipe();
-
-  return (
-    <Flex flexDirection="column" w="100%" h="auto">
-      {/* HEADER */}
-      <Flex css={styles.header} cursor={isEditable ? "move":"default"} flexDirection="row" w="100%" h="auto" justifyContent="space-between" alignItems="center">
-        <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
-        {isDelete ? (
-          <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
-        ):(
-          isSubmit ? (
-            <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
-          ):null
-        )}
-      </Flex>
-
-      {/* CHILDREN */}
-      <Flex w="100%" h="auto">
-        {children}
-      </Flex>
-    </Flex>
-  );
-}
-
@@ -1,26 +0,0 @@
-import { Menu, Portal } from "@chakra-ui/react";
-import AlertLevel from "./AlertLevelWidget.jsx";
-
-export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
-  return (
-    <Menu.Root positioning={positioning}>
-      {triggerItem}
-      <Portal>
-        <Menu.Positioner>
-          <Menu.Content>
-            <Menu.Item 
-              value="AlertLevel" 
-              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
-            >
-              Alert Level
-            </Menu.Item>
-            <Menu.Item value="CO2">CO2</Menu.Item>
-            <Menu.Item value="Ivans">IVANS</Menu.Item>
-            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
-            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
-          </Menu.Content>
-        </Menu.Positioner>
-      </Portal>
-    </Menu.Root>
-  )
-}
@@ -1,35 +0,0 @@
-import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react'
-import * as React from 'react'
-
-export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
-  const {
-    showArrow,
-    children,
-    disabled,
-    portalled = true,
-    content,
-    contentProps,
-    portalRef,
-    ...rest
-  } = props
-
-  if (disabled) return children
-
-  return (
-    <ChakraTooltip.Root {...rest}>
-      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
-      <Portal disabled={!portalled} container={portalRef}>
-        <ChakraTooltip.Positioner>
-          <ChakraTooltip.Content ref={ref} {...contentProps}>
-            {showArrow && (
-              <ChakraTooltip.Arrow>
-                <ChakraTooltip.ArrowTip />
-              </ChakraTooltip.Arrow>
-            )}
-            {content}
-          </ChakraTooltip.Content>
-        </ChakraTooltip.Positioner>
-      </Portal>
-    </ChakraTooltip.Root>
-  )
-})
@@ -1,37 +1,34 @@
-import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
+import {useSlotRecipe, Text, Flex} from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
-import { NavLink } from "react-router-dom";
 import useAuthStore from "@/store/authStore";
+import {SearchBar} from "@/components/dashboard/SearchBar.jsx";

 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";

 // Accept a 'user' prop now, fallback to placeholder if empty
 export default function Header() {
-    const recipe = useRecipe({ key: "header" });
+  const recipe = useSlotRecipe({key: "header"});
  const styles = recipe();

-    const { user } = useAuthStore();
+  const {user} = useAuthStore();
  console.log(user);
-    const displayName = user ? (user.fullName || user.username) : "Loading...";
+  const displayName = user ? (user.firstName || user.username) : "Loading...";
+  const avatarname = user ? (user.fullName || user.username) : "Loading...";

  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.root}>
+      <Flex css={styles.search_bar}>
+       <SearchBar placeholder="Enter a volcano to search"/>
+      </Flex>

      {/* User Profile Section */}
-            <Flex align="center" gap={3} pr={6}>
-                <Stack gap="0" textAlign="right" cursor="default">
-                    <Text color="color" fontWeight="bold" textStyle="lg">{displayName}</Text>
-                    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>
-                </Stack>
+      <Flex css={styles.user_info}>
+        <Text>{displayName}</Text>
        <UserAvatarMenu
-                    name={displayName}
+          name={avatarname}
          // avatar={user.avatar}
        />
      </Flex>
@@ -1,74 +1,57 @@
-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 } from 'lucide-react';
+import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
+import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react";
+import {ColorModeButton} from "@/components/ui/color-mode.jsx";
+import {NavLink} from "react-router-dom";
+import {useState} from "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();
-
-  // 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;
+  const recipe = useSlotRecipe({key: "sidebar"});
+  const styles = recipe({state: isOpen ? "open" : "closed"});
+  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS; // TODO: call btns here according to users authorization

  const toggleSidebar = () => setIsOpen((prev) => !prev);

  return (
-      <Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative" display="flex" flexDirection="column" gap={2}
-      >
-        {/* Menu Trigger */}
-        <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
-        >
-          <Menu />
-        </IconButton>
+    <Box css={styles.root}>
+       {/* Logo Navigates to Home Page */}
+      <Button as={NavLink} to="/home" variant="plain" css={styles.logo}>
+        <Flex>
+          <Text>🌋</Text>
+          <Text css={styles.logo_text}>VDAP</Text>
+        </Flex>
+      </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"
-                  >
+          <Button as={NavLink} to={button.url} css={styles.buttons}> {/* Navigation buttons are [icon text] */}
+            <Icon/>
+            <Box as="span" css={styles.button_text}>
              {button.name}
            </Box>
          </Button>
-              </Tooltip>
        );
      })}

-        {/* Theme Toggler */}
-        <ColorModeButton
-            position="absolute"
-            bottom="4"
-            left="4"
-        />
+      {/* Collapse Sidebar and Theme Footer Buttons */}
+      <Flex css={styles.footer}>
+        <IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
+          {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
+        </IconButton>
+        <Flex css={styles.color_mode_button}>
+          <ColorModeButton />
+        </Flex>
+      </Flex>
    </Box>
  );
 }
@@ -78,7 +78,7 @@ export const WIDGET_REGISTRY = {

        // The baseline data every new VAA widget starts with
        defaultSettings: {
-            yAxisScale: 'normal' // Options: 'normal' | 'symlog'
+            yAxisScale: 'log' // Options: 'normal' | 'symlog'
        },
        allowedSizes: {
            medium:  { w: 6, h: 12 }
@@ -1,3 +1,4 @@
 :root {
-  font-family: Georgia, 'Times New Roman', Times, serif;
+  /*font-family: Georgia, 'Times New Roman', Times, serif;*/
+  font-family: "Roboto", sans-serif;
 }
@@ -1,62 +1,59 @@
-import { HStack, Flex, Box } from "@chakra-ui/react";
-import { NavLink, Outlet, useLocation } from "react-router-dom";
-import { SearchBar } from "../../components/dashboard/SearchBar.jsx";
-import { SettingsButton } from "../../components/dashboard/SettingsButton.jsx";
+import {HStack, Flex, Box, useRecipe, useSlotRecipe} from "@chakra-ui/react";
+import {NavLink, Outlet, useLocation} from "react-router-dom";
+import {SearchBar} from "../../components/dashboard/SearchBar.jsx";
+import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx";
+
+// 1. Import your icons (Swap these for whichever you prefer!)
+import {LayoutDashboard, CalendarDays, Cloud, Satellite, Activity} from "lucide-react";
+
+// 2. Define the tabs array
+const HOME_TABS = [
+  {name: "My Dashboard", url: "/home", icon: LayoutDashboard, exact: true},
+  {name: "Daily Activity", url: "/home/daily", icon: CalendarDays},
+  {name: "Gas", url: "/home/gas", icon: Cloud},
+  {name: "Remote Sensing", url: "/home/remote", icon: Satellite},
+  {name: "Seismic", url: "/home/seismic", icon: Activity},
+];

 export default function Home() {
-  const location = useLocation();
-  const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
+  const glassTabsRecipe = useRecipe({key: "glassTab"});
+  const homeRecipe = useSlotRecipe({key: "home"});
+  const glassTabsStyle = glassTabsRecipe();
+  const homeStyle = homeRecipe();

-  // 1. CSS making this look like how we want it, TODO turn to theme?
-  const tabStyles = {
-    fontSize: "lg",
-    fontWeight: "bold",
-    color: "fg.muted",
-    px: 2,                   // Horizontal padding
-    // py: 2,                   // Vertical padding
-    borderBottom: "1px solid transparent",
-    transition: "all 0.2s",
-    _hover: { color: "fg" },
-
-    "&.active": {         // Target the active class applied by React Router NavLink
-      color: "fg",
-      borderColor: "fg",
-    }
-  };
+  const location= useLocation();
+  const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/";

  return (
-      <Flex direction="column" height="100%" width="100%">
+    <Flex css={homeStyle.root}>
+      <Flex as="header" css={homeStyle.header}>
+        {/* TABS CONTAINER */}
+        <Flex>
+          {HOME_TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <Box key={tab.name} as={NavLink} to={tab.url} end={tab.exact} css={glassTabsStyle}> {/* CRITICAL: 'end' prop forces exact match so "/home" deactivates on sub-routes*/}
+                {/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
+                <Icon size={24} style={{flexShrink: 0}}/>
+                <Box as="span">{tab.name}</Box>
+              </Box>
+            );
+          })}

-        {/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
-        <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
-
-          {/* TABS CONTAINER - Replicates the Tabs.List line container */}
-          <Flex borderBottom="1px solid" borderColor="fg.muted" gap={2}>
-            <Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
-            <Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
-            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
-            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
-            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
+          {/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
+          {isPersonalDashboard && <SettingsButton/>}
        </Flex>

        {/* EDIT MODE BUTTONS & CONTROLS */}
+        {/* Leaving this HStack here in case you plan to put the SearchBar or other global tools back on the right side */}
        <HStack width="258px" justifyContent="flex-end">
-            {isPersonalDashboard ? (
-                <>
-                  <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
-                  {/* This will eventually trigger your Zustand store's edit mode! */}
-                  <SettingsButton />
-                </>
-            ) : (
-                <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
-            )}
+          {/* Future global controls go here */}
        </HStack>
-
      </Flex>

-        {/* 3. 🛠️ CANVAS AREA */}
-        <Flex flex="1" overflow="auto">
-          <Outlet />
+      {/* TABS CONTENT */}
+      <Flex css={homeStyle.body}>
+        <Outlet/>
      </Flex>

    </Flex>
@@ -1,27 +1,22 @@
-import { Box, Text, Flex, IconButton, Spinner, Popover } from "@chakra-ui/react";
-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";
+import {Box, Text, Flex, IconButton, Spinner, Popover, useSlotRecipe} from "@chakra-ui/react";
+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';
+
 // 1. Import database messenger
 import useAuthStore from "@/store/authStore";

 // 2. Import registry
-import { WIDGET_REGISTRY } from '@/constants/widgetRegistry.jsx';
+import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';

 // React-Grid-Layout requires this wrapper to automatically calculate screen width
 const ResponsiveGridLayout = WidthProvider(Responsive);

-export default function MyDashboard() {
-    // 🌗 Let's adjust for our light and dark mode
-    const frameBg = useColorModeValue("gray.100", "gray.800");
-    const titleColor = useColorModeValue("gray.800", "gray.100");
-    const iconColor = useColorModeValue("gray.600", "gray.400");
-    const iconHoverBg = useColorModeValue("gray.100", "gray.700");

+export default function MyDashboard() {
  // ☁️ Database Connection
-    const { user } = useAuthStore();
+  const {user} = useAuthStore();

  // ☁️ Local UI Connections
  const widgets = useDashboardStore(state => state.widgets);
@@ -33,24 +28,23 @@ export default function MyDashboard() {
  // 🔒 Safety lock to prevent infinite re-renders
  const hasHydrated = useRef(false);

-    // ==========================================
-    // INITIAL LOAD: Grab data from Django
-    // ==========================================
+  // 1. Pull the global slot recipes
+  const recipe = useSlotRecipe({key: "glassPanel"});
+  const styles = recipe({ layout: "widget" });
+  const popoverStyles = recipe({ layout: "popover" });
+
+  // 2. Populate widgets
  useEffect(() => {
    if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
      const savedLayout = user.preferences.dashboard_layout;

      // Safety check: Only inject if it's actually an array of widgets.
      // (Prevents a crash if MariaDB returns a default empty object {})
-            if (Array.isArray(savedLayout)) {
-                setWidgets(savedLayout);
-            }
-
+      if (Array.isArray(savedLayout)) setWidgets(savedLayout);
      hasHydrated.current = true;
    }
  }, [user, setWidgets]);

-
  // 🛠️ Format the data for RGL
  const rglLayout = widgets.map(w => ({
    i: w.id,
@@ -58,10 +52,10 @@ export default function MyDashboard() {
    y: w.y,
    w: w.w,
    h: w.h,
-        isResizable: false // 🚫 The magic lock! No resizing allowed globally.
+    isResizable: false // The magic lock! No resizing allowed globally.
  }));

-    // 3. THE COMPONENT MAPPER
+  // 3. The component mapper
  const renderWidget = (widget) => {
    const registryEntry = WIDGET_REGISTRY[widget.type];

@@ -72,39 +66,25 @@ export default function MyDashboard() {
      const SettingsUI = registryEntry.settingsComponent;

      return (
-                // The "Frame" that holds both the Title and the Chart
-                <Flex direction="column" height="100%" width="100%" bg={frameBg}>
-
-                    {/* THE TITLE BAR */}
-                    <Flex
-                        justify="space-between"
-                        align="center"
-                        px={3}
-                        py={2}
-                    >
-                        <Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
+        <>
+          <Box css={styles.header}>
+            <Text>
              {registryEntry.name}
            </Text>

-                        {/* THE SETTINGS ELLIPSIS */}
-                        {SettingsUI ? (
-                            <Popover.Root positioning={{ placement: "bottom-end" }}>
+            {/* WIDGET SETTINGS BUTTON (ELLIPSES) */}
+            {SettingsUI && (
+              <Popover.Root positioning={{placement: "bottom-end"}}>
                <Popover.Trigger asChild>
-                                    <IconButton
-                                        size="xs"
-                                        variant="ghost"
-                                        color="gray.400"
-                                        _hover={{ color: "white", bg: "gray.700" }}
-                                        aria-label="Widget Settings"
-                                    >
-                                        <MoreVertical size={16} />
+                  <IconButton size="xs" variant="ghost" aria-label="Widget Settings">
+                    <MoreVertical size={16}/>
                  </IconButton>
                </Popover.Trigger>

                {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
-                                <Popover.Positioner zIndex={10}>
-                                    <Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
-                                        <Suspense fallback={<Spinner size="sm" />}>
+                <Popover.Positioner zIndex={1}>
+                  <Popover.Content css={popoverStyles.root}>
+                    <Suspense fallback={<Spinner size="sm"/>}>
                      <SettingsUI
                        widgetId={widget.id}
                        currentSettings={widget.settings || {}}
@@ -113,24 +93,19 @@ export default function MyDashboard() {
                  </Popover.Content>
                </Popover.Positioner>
              </Popover.Root>
-                        ) : (
-                            <Box w="20px" h="20px" />
            )}
-                    </Flex>
-
-                    {/* THE CHART CANVAS */}
-                    <Box flex="1" overflow="hidden" position="relative" p={1}>
-                        {/* Pass the settings object into the actual chart component */}
-                        <Component settings={widget.settings || {}} />
          </Box>

-                </Flex>
+          <Box css={styles.body}>
+            <Component settings={widget.settings || {}}/>
+          </Box>
+        </>
      );
    }

    // Fallback if someone asks for a widget that doesn't exist
    return (
-            <Flex width="100%" height="100%" align="center" justify="center" direction="column" bg="gray.800">
+      <Flex css={styles.body} align="center" justify="center" direction="column">
        <Text fontWeight="bold" color="red.400">Error</Text>
        <Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
      </Flex>
@@ -141,59 +116,59 @@ export default function MyDashboard() {
    <Box width="100%" height="100%">
      <ResponsiveGridLayout
        className="layout"
-                layouts={{ lg: rglLayout }} // We feed it the formatted layout map
-                breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-                cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} // Our 12-column master grid
+        layouts={{lg: rglLayout}} // We feed it the formatted layout map
+        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} // Our 12-column master grid
        rowHeight={30}
        isDraggable={isEditing}     // Only allows dragging when Settings tools toggle this
        isResizable={false}         // Double lock-down
-                onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
        compactType="vertical"      // Auto-packs widgets to the top
+        onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
      >
-                {/* 3. 🎨 Paint the Widgets */}
+        {/* 🎨 Paint the Widgets */}
        {widgets.map(widget => (
          <Box
            key={widget.id}
-                        bg="white"
-                        borderRadius="md"
-                        boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
-                        border={isEditing ? "2px dashed gray" : "1px solid"}
-                        borderColor={isEditing ? "gray.400" : "gray.200"}
-                        overflow="hidden"
+            css={styles.root}
+            // Grid-specific state overrides remain inline
+            boxShadow={isEditing ? "outline" : styles.root.boxShadow}
+            borderStyle={isEditing ? "dashed" : "solid"}
+            borderWidth={isEditing ? "2px" : "1px"}
+            borderColor={isEditing ? "orange.300" : styles.root.borderColor}
            cursor={isEditing ? "grab" : "default"}
-                        position="relative" // 3. REQUIRED so the absolute button stays inside this box
+            position="relative" // REQUIRED so the absolute button stays inside this box
          >
-                        {/* 4. THE DELETE BUTTON */}
+            {/* THE DELETE BUTTON */}
            {isEditing && (
              <IconButton
-                                aria-label="Remove widget"
                position="absolute"
                top={2}
                right={2}
-                                size="xs"
                bg="white"
-                                color={iconColor}
+                color="black"
                border="1px solid"
+                borderRadius="xl"
                borderColor="gray.200"
-                                _hover={{ bg: "red.50", color: "red.500", borderColor: "red.200" }}
+                _hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
                zIndex={2}
+                aria-label="Remove widget"
+                size="xs"
                onClick={() => removeWidget(widget.id)}
                onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
                onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
              >
-                                <X size={14} />
+                <X size={14}/>
              </IconButton>
            )}

-                        {/* 4. SUSPENSE BOUNDARY wrapping the render function */}
+            {/* SUSPENSE BOUNDARY wrapping the render function */}
            <Suspense fallback={
-                            <Flex w="100%" h="100%" align="center" justify="center" bg="gray.800">
-                                <Spinner size="md" color="blue.400" thickness="3px" />
+              <Flex css={styles.body} align="center" justify="center">
+                <Spinner size="md" color="blue.400" thickness="3px"/>
              </Flex>
            }>
              {renderWidget(widget)}
            </Suspense>
-
          </Box>
        ))}
      </ResponsiveGridLayout>
@@ -1,98 +1,670 @@
-import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react";
+import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";

-// RECIPES
-const headerRecipe = defineRecipe({
+// CONSOLIDATED ✔
+const headerRecipe = defineSlotRecipe({
+  slots: ["root", "search_bar", "user_info"],
  base: {
-    bg: "{base200}",
+    root: {
+      bg: "{transparent}",
      color: "text",
      width: "100%",
      height: "100%",
-    borderBottom: "1px solid",
-    borderBottomColor:"{border}",
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
+      pl: 3,
+    },
+    search_bar: {
+      width: "100%",
+      // input element in search bar component
+      "& input": {
+        width: "410px",
      }
+    },
+    user_info: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: 3,
+      pr: 6,
+
+      // The Text component
+      "& p": {
+        fontWeight: "600",
+        fontSize: "md"     // equivalent to 16px
+      }
+    }
+  },
 });

-const dashboardRecipe = defineRecipe({
-  base: {
-    bg: "{base200}"
-  }
-});
-
-const canvasRecipe = defineRecipe({
-  base: {
-    bg: "{base200}",
-    zIndex: "-1",
-    color: "{text}"
-  }
-});
-
+// CONSOLIDATED ✔
 const sidebarRecipe = defineSlotRecipe({
-  slots: ["root", "close_button", "buttons", "dark_mode_button"],
+  slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
  base: {
    root: {
-      bg: "{base200}",
-      borderRight: "1px solid",
-      borderColor: "{border}", 
+      // 1. Semi-transparent backgrounds
+      bg: {
+        // base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", // this is too pale for light mode imo
+        base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)",    // colors from: https://colorhunt.co/palette/972828e45742eb7f31fcad38
+        _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
+      },
+
+      // 2. The glass blur effect
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+
+      // 3. Subtle semi-transparent borders
+      border: "1px solid",
+      borderColor: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
+
+      // CRITICAL: Remove the right border so it doesn't draw a line through your cutout
+      borderRight: "none",
+
+      borderRadius: "2xl",
+      // boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
+      // boxShadow: "-10px 4px 30px rgba(0, 0, 0, 0.1)",
      width: "100%",
-      height: "100%",
+      height: "calc(100% - 16px)",
+      margin: "8px",
      display: "flex",
      flexDirection: "column",
+      position: "relative",
      justifyContent: "start",
-      alignItems: "start",
-      gap: 2,
-      p: 2,
+      alignItems: "stretch",
+      gap: 4,
+      transition: "width 0.5s 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,
    },
    buttons: {
+      position: "relative", // Required to anchor the corner patches
      bg: "transparent",
-      _hover: {bg: "{primaryLt}", color: "{textInverted}"},
-      "&.active": {bg: "{primary}", color: "{textInverted}"},
-      fontSize: "xl",
+
+      justifyContent: "flex-start",
+      transition: "background-color 0.3s ease, color 0.3s ease",
+
+      "& svg": {
+        transition: "stroke-width 0.4s ease",
+        flexShrink: "0"
+      },
+
+      _hover: {
+        bg: "rgba(255, 255, 255, 0.2)",
+        color: "{text}",
+        "& svg": {
+          strokeWidth: "3"
+        },
+        "& span": {
+          fontWeight: "700",
+        }
+      },
+
+      fontSize: "l",
      color: {base: "{text}"},
      variant: "ghost",
      width: "100%",
+
+      // Flat on the right, rounded on the left
+      borderRightRadius: "0",
+      borderLeftRadius: "4xl",
+
+      "&.active": {
+        bg: "{MainBackground}",
+        color: "{textInverted}",
+
+        _hover: {
+          bg: "{MainBackground}",
+          color: "{textInverted}",
+          "& svg": {
+            strokeWidth: "2" // Keeps the active icon at normal thickness on hover
          },
+          "& span": {
+            fontWeight: "500",
+          }
+        },
+
+        // The Top Inverted Curve
+        _before: {
+          content: '""',
+          position: "absolute",
+          right: "-1px",
+          top: "-25px",
+          width: "25px",
+          height: "25px",
+          bg: "inherit",
+          WebkitMaskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
+          maskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
+          pointerEvents: "none",
+        },
+
+        // The Bottom Inverted Curve
+        _after: {
+          content: '""',
+          position: "absolute",
+          right: "-1px",
+          bottom: "-25px",
+          width: "25px",
+          height: "25px",
+          bg: "inherit",
+          WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
+          maskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
+          pointerEvents: "none",
+        }
+      },
+    },
+    logo: {
+      width: "100%",
+      justifyContent: "flex-start",
+      ml: 2,
+      textStyle: "4xl",
+      fontWeight: "bold",
+      overflow: "hidden",
+      px: 0,
+    },
+    logo_text: {
+      transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "clip",
+    },
+    footer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      mt: "auto",
+      pl: 2,
+      pr: 2,
+    },
+    button_text: {
+      transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "clip",
+      fontWeight: "500",
+    },
+    collapse_button: {
+      "& svg": {flexShrink: "0"},
+    },
+    color_mode_button: {
+      "& button": {
+        _hover: {
+          bg: "transparent",
+        },
+      }
+    }
+    // opened_theme_button: {
+    //   width: "100%",
+    //   align: "center",
+    //   justifyContent: "right",
+    //   mr: 6,
+    //   // "& button": {
+    //   //   alignSelf: "center",
+    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+    //   //   _hover: {
+    //   //     bg: "transparent",
+    //   //   }
+    //   // }
+    // },
+    // closed_theme_button: {
+    //   // ml: 0.9,
+    //   // "& button": {
+    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+    //   //   _hover: {
+    //   //     bg: "transparent",
+    //   //   }
+    //   // }
+    // },
+  },
+  variants: {
+    state: {
+      open: {
+        root: {width: "190px"},
+        button_text: {ml: 3, opacity: 1, visibility: "visible"},
+        logo_text: {ml: 3, opacity: 1, visibility: "visible", transition: "opacity 0.5s ease, visibility 0.5s ease, margin 0.5s ease"},
+        color_mode_button: {
+          "& button": {
+            position: "static",
+          },
+          // the css below is equivalent to chakra's 'truncate' prop
+          // it makes sure the icon doesn't jump out of the bounds of the sidebar while it's transitioning from closed to open
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "clip",
+        },
+      },
+      closed: {
+        root: {width: "71px"},
+        button_text: {opacity: 0, visibility: "hidden"},
+        logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"},
+        color_mode_button: {"& button": {position: "relative", bottom: "35px", right: "37px",}
+        },
+      }
+    }
  }
 });

-const widgetRecipe = defineSlotRecipe({
-  slots: ["root", "header", "canvas"],
+// CONSOLIDATED ✔
+const dashboardRecipe = defineRecipe({
+  base: {
+    height: "100vh",
+    width: "100vw",
+    bg: "{MainBackground}",
+
+    // selects the third div in the grid layout (the canvas)
+    "& > div:nth-of-type(3)": {
+      width: "100%",
+      overflow: "auto",
+    }
+  }
+});
+
+// CONSOLIDATED ✔
+const homeRecipe = defineSlotRecipe({
+  slots: ["root", "header", "body"],
  base: {
    root: {
      flexDirection: "column",
-      gap: "1",
-      position: "relative",
-      bg: "base100",
-      borderRadius: "md",
-      p: "1",
-      paddingBottom: "2",
-      border: "1px solid",
-      borderColor: "{base300}",
-      textAlign: "center",
      height: "100%",
-      position: "fixed"
+      width: "100%",
    },
    header: {
-      flexShrink: "0",
-      bg: "{base300}",
-      color: "{text}",
-      cursor: "move",
-      borderRadius: "sm",
-      whiteSpace: "nowrap",
-      textAlign: "left",
-      pl: "2"
-    },
-    canvas: {
-      flex: "1 1 auto",
+      // Flex contianer as a header that contains all the tabs
+      width: "100%",
+      align: "center",
+      justify: "space-between",
+      top: "0",
+      p: 5,
+      position: "sticky",
+      zIndex: "dropdown",
      bg: "transparent",
-      color: "{text}",
-      cursor: "default",
-      borderRadius: "md",
+
+      // THE TABS
+      // Flex container renders as div for all the buttons within the header
+      "& > div": {
+        alignItems: "center",
+        gap: 2,
+
+        // icon in each tab button
+        "& svg": {
+          // TODO: bring over svg styling
+        }
+      }
+    },
+    body: {
+      flex: 1,
      overflow: "auto",
    }
+  },
+})
+
+// const canvasRecipe = defineRecipe({
+//   base: {
+//     bg: "{transparent}",
+//     zIndex: "-1",
+//     color: "{text}"
+//   }
+// });
+
+// const widgetRecipe = defineSlotRecipe({
+//   slots: ["root", "header", "canvas"],
+//   base: {
+//     root: {
+//       flexDirection: "column",
+//       gap: "1",
+//       position: "relative",
+//       bg: "base100",
+//       borderRadius: "md",
+//       p: "1",
+//       paddingBottom: "2",
+//       border: "1px solid",
+//       borderColor: "{base300}",
+//       textAlign: "center",
+//       height: "100%",
+//       // position: "fixed"
+//     },
+//     header: {
+//       flexShrink: "0",
+//       bg: "{base300}",
+//       color: "{text}",
+//       cursor: "move",
+//       borderRadius: "sm",
+//       whiteSpace: "nowrap",
+//       textAlign: "left",
+//       pl: "2"
+//     },
+//     canvas: {
+//       flex: "1 1 auto",
+//       bg: "transparent",
+//       color: "{text}",
+//       cursor: "default",
+//       borderRadius: "md",
+//       overflow: "auto",
+//     }
+//   }
+// });
+
+// USED IN COMPONENTS:
+// * Settings Button
+// * My Dashboard
+const glassPanelRecipe = defineSlotRecipe({
+  slots: ["root", "header", "body"],
+
+  // 🧊 THE GLASS MATH (Applies to everything)
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      overflow: "hidden",
+      bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      border: "1px solid",
+      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
+      boxShadow: "sm",
+    }
+  },
+
+  // 📏 THE LAYOUTS (Applies selectively)
+  variants: {
+    layout: {
+      widget: {
+        root: {
+          width: "100%",
+          height: "100%",
+          borderRadius: "3xl",
+        },
+        header: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          px: 3,
+          pt: 2,
+          pb: 0,
+
+          "& > p": {
+            color: "titleColor",
+            fontWeight: "500",
+            fontSize: "16px",
+
+            // the following three specifications are equivalent to Chakra's 'truncate' prop
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "clip",
+          },
+
+          "& > button": {
+            borderRadius: "xl",
+
+            _hover: {
+              color: "white",
+              bg: "gray.500",
+            },
+          }
+        },
+        body: {
+          flex: "1",
+          overflow: "hidden",
+          position: "relative",
+          px: 1,
+          pb: 1,
+          pt: 0
+        }
+      },
+      dropdown: {
+        root: {
+          borderRadius: "xl",
+          p: 1
+        }
+        // (Header and body slots are ignored here because dropdowns don't use them)
+      },
+      popover: {
+        root: {
+          borderRadius: "2xl",
+          p: 0,
+          boxShadow: "xl",
+          minW: "240px",
+          maxW: "60%",
+          minH: "80%",
+          overflow: "hidden",
+          // OVERRIDES: Make the background 85-90% opaque instead of 40%
+          bg: {
+            base: "rgba(255, 255, 255, 0.75)",
+            _dark: "rgba(20, 22, 25, 0.8)"
+          },
+
+          // OVERRIDES: Increase the blur just to smooth out any stubborn gridlines
+          backdropFilter: "blur(15px)",
+          WebkitBackdropFilter: "blur(15px)",
+
+
+          // IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
+          // dialog header
+          "& > div.chakra-dialog__header": {
+            bg: "transparent",
+            color: {
+              base: "gray.800",
+              _dark: "white"
+            },
+            py: 4,
+            borderColor: {
+              base: "gray.200",
+              _dark: "whiteAlpha.200"
+            },
+
+            // title
+            "& h2": {
+              fontSize: "xl",
+              fontWeight: "bold"
+            },
+          },
+
+          // dialog body
+          "& > div.chakra-dialog__body": {
+            p: 0,
+
+            // box container of the widget category menu
+            "& div.chakra-tabs__root > div:first-child": {
+              position: "relative",
+              display: "flex",
+              maxW: "100%",
+              mx: 5,
+              mt: 4,
+              mb: 6
+            },
+
+            // the horizontal widget categories menu
+            "& div.chakra-tabs__list": {
+              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",
+              maxW: "100%",
+              border: "1px solid",
+              borderColor: {
+                base: "blackAlpha.50",
+                _dark: "whiteAlpha.100"
+              },
+              scrollbarWidth: "none",
+              "&::-webkit-scrollbar": {display: "none"},
+
+              // the pill shaped menu options
+              "& button.chakra-tabs__trigger": {
+                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",
+                }
+              }
+            },
+
+            // base styling applied to both chevron navigators
+            "& div.chakra-tabs__root > div:first-child div:has(svg)": {
+              position: "absolute",
+              top: "0",
+              bottom: "0",
+              w: "50px",
+              alignItems: "center",
+              justifyContent: "center",
+              zIndex: 2,
+              cursor: "pointer",
+              bg: {
+                base: "rgba(255, 255, 255, 0.7)",
+                _dark: "rgba(30, 30, 30, 0.8)"
+              },
+              color: {
+                base: "gray.600",
+                _dark: "gray.300"
+              },
+              backdropFilter: "blur(1px)",
+              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)"
+                },
+              },
+
+              "&:has(.lucide-chevron-left)": {
+                left: 0,
+                borderTopLeftRadius: "full",
+                borderBottomLeftRadius: "full",
+                // 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)",
+              },
+
+              "&:has(.lucide-chevron-right)": {
+                right: 0,
+                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)",
+              }
+            }
+
+          }
+        }
+      }
+    },
+    mode: {
+      editing: {
+        root: {
+          boxShadow: "outline",
+          borderStyle: "dashed",
+          borderWidth: "2px",
+          borderColor: "orange.300",
+          cursor: "grab",
+        }
+      }
+    }
+  },
+
+  defaultVariants: {
+    layout: "widget"
+  }
+});
+
+const glassTabRecipe = defineRecipe({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    height: "40px",
+
+    // The Circle State (Inactive)
+    maxWidth: "40px",
+    minWidth: "40px",
+    px: "8px",
+    gap: 2,
+
+    // CRITICAL: Locks the shape to a perfect circle/pill
+    borderRadius: "full",
+
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textDecoration: "none",
+    fontWeight: "500",
+    color: "fg.muted",
+
+    // --- THE GLASS EFFECT (Inactive) ---
+    // Uses a highly transparent white/black depending on mode
+    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.03)"},
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    border: "1px solid",
+    borderColor: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.08)"},
+    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.02)", // Tiny shadow to lift it off the canvas
+
+    transition: "all 0.85s cubic-bezier(0.34, 1.56, 0.64, 1)",
+
+    "&:hover, &[data-state='open'], &[aria-expanded='true']": {
+      maxWidth: "250px",
+      pr: "16px",
+      // --- THE GLASS EFFECT (Hover) ---
+      // Becomes slightly more opaque when you mouse over
+      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
+      borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
+      color: "fg",
+      textDecoration: "none",
+    },
+
+    "&.active": {
+      maxWidth: "250px",
+      pr: "16px",
+
+      bg: "{gooeyButtonBackground}",
+      borderColor: "transparent",
+      color: "{textInverted}",
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)", // Stronger shadow for the active tab
+
+      _hover: {
+        bg: "{gooeyButtonBackground}",
+        cursor: "default",
+        textDecoration: "none",
+      }
+    }
  }
 });

@@ -171,33 +743,44 @@ const config = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
-        base100: { value: {base: "#f6f9faff", _dark: "#1617199e"}},
-        base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
-        base300: { value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
-        primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
-        primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
-        secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
-        border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
-        text: {value: {base: "#000000", _dark: "lightgrey"}},
-        textInverted: {value: "white"},
-        icon: {value: {base: "#000000", _dark: "lightgrey"}},
+        // base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}},
+        // base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}},
+        // base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
+        // primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}},
+        // primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}},
+        // secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}},
+        // border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
+        text: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        // icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
+
+        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
+        MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
+        titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
+        iconColor: {value: {base: "gray.600", _dark: "#000000"}},
+        glassSeperator: {value: {base: "#0000001A", _dark: "#FFFFFF3F"}},
      },
    },
    tokens: {
      fonts: {
-        body: { value: "system-ui, sans-serif" },
+        body: {value: "system-ui, sans-serif"},
      },
    },
    recipes: {
-      header: headerRecipe,
      dashboard: dashboardRecipe,
-      canvas: canvasRecipe,
+      // canvas: canvasRecipe,
+      glassTab: glassTabRecipe
    },
    slotRecipes: {
+      header: headerRecipe,
      sidebar: sidebarRecipe,
-      widget: widgetRecipe,
+      // widget: widgetRecipe,
+      glassPanel: glassPanelRecipe,
+      home: homeRecipe,
    },
  },
 });

+
+// Define semantic tokens and export recipes
 export const system = createSystem(defaultConfig, config);
Author	SHA1	Message	Date
vkuchenik	c32afff1c5	reformatting slot recipes for better orginization	2026-09-15 14:45:32 -07:00
vkuchenik	4523f8035f	refactoring theme.js by breaking up the root slot into further header, body slots to better compartmentalize css in components	2026-09-15 10:59:20 -07:00
vkuchenik	18c1df93d1	fixed disappearing color mode button on re-opening of sidebar	2026-09-15 08:30:53 -07:00
vkuchenik	243bb13537	fix color mode button bg to be transparent on hover	2026-09-14 15:50:28 -07:00
vkuchenik	3595599dae	Updated color more button by consolidating into one button, it now uses css positioning w respect to state rather then visibility	2026-09-14 15:31:23 -07:00
vkuchenik	8e514418d4	removed some leftover code from a recipe that was unused	2026-09-14 09:04:16 -07:00
vkuchenik	10cbedb6ef	wip moved the category-menu css in the widget library to the themes file	2026-09-14 08:58:09 -07:00
vkuchenik	0c8820d109	wip moving menu nav buttons in widget menu	2026-09-11 14:45:39 -07:00
vkuchenik	4914b64fe2	fixed color mode button background	2026-09-09 11:54:24 -07:00
vkuchenik	4aa8eb7ff0	updated header so all styling is now in the designated themes file	2026-09-03 14:07:39 -07:00
vkuchenik	cde2c4660b	updated themes file to further reduce styling in sidebar component page	2026-09-03 12:32:49 -07:00
vkuchenik	1c6951d245	fixed sidebar animation issues by truncating btn text and using css transitions on footer icons	2026-09-03 11:21:50 -07:00
chight	60f71485da	Refactor CSS on mydashboard started needs completed	2026-09-02 12:45:40 -07:00
chight	8e9b17f6dd	Refactor, cleaned up header file	2026-08-26 13:10:02 -07:00
chight	c45bc778ec	Refactor, cleaned up sidebar and theme	2026-08-26 13:04:17 -07:00
chight	816046d05a	Fix the color mode button was highlighting odd. removed highlight	2026-08-24 10:58:09 -07:00
chight	12e540b61b	Fix adjustment to VDAP logo and emoji	2026-08-24 08:58:31 -07:00
chight	1e1130f965	Update widget library will now open to a percentage of screen	2026-08-21 14:39:57 -07:00
chight	8ddf9ff393	Update chevrons are updated for better UI	2026-08-21 13:30:02 -07:00
chight	9abcb78327	Refactor only formatting of file	2026-08-21 12:58:28 -07:00
chight	f5f09e31fe	Update added chevrons to scrollbar - bug in size of chevrons	2026-08-21 12:55:54 -07:00
chight	510c63e7b0	Update tabs in widget library now scroll and look nice	2026-08-21 11:41:08 -07:00
chight	3017535d02	Update to buttons on widget choices	2026-08-20 14:45:13 -07:00
chight	9b1ddf6dcc	Refactor widget library UI code	2026-08-20 12:51:58 -07:00
chight	2b0300b075	Refactor continued of UI. changes to theme to make baselines	2026-08-04 09:05:30 -07:00
chight	a6ebe5af1e	Refactor recipe adjustment	2026-07-29 14:18:10 -07:00
chight	6d0af310ae	Refactor continuing to work on UI	2026-07-29 13:48:38 -07:00
chight	2283d156ea	Refactoring some theme colors	2026-07-24 14:11:17 -07:00
chight	3697575f54	Refactor the UI for light mode is at an acceptable point	2026-07-23 15:47:51 -07:00
chight	9fbf22bc32	Refactor still working on UI changes	2026-07-22 14:58:59 -07:00
chight	7568d0dba4	Merge remote-tracking branch 'origin/20260721_0845_Venessa_addingWidgets' into 20260715_UI_update	2026-07-22 10:37:09 -07:00
chight	022d4169b5	Reformat starting changes on layout for better UI visuals	2026-07-22 10:37:01 -07:00