Update to buttons on widget choices

Refactor widget library UI code
Refactor continued of UI. changes to theme to make baselines
2026-08-20 14:45:13 -07:00 · 2026-08-20 12:51:58 -07:00 · 2026-08-04 09:05:30 -07:00 · 2026-07-29 14:18:10 -07:00 · 2026-07-29 13:48:38 -07:00 · 2026-07-24 14:11:17 -07:00
21 changed files with 936 additions and 845 deletions
@@ -33,12 +33,12 @@ function AppFoundation() {
        height="100vh"
        width="100vw"
      >
-        <GridItem rowSpan={1} colSpan={2}>
-          <Header />
-        </GridItem>
-        <GridItem colSpan={1}>
+        <GridItem rowSpan={2} colSpan={1}>
          <Sidebar />
        </GridItem>
+        <GridItem rowSpan={1} colSpan={1}>
+          <Header />
+        </GridItem>
        <GridItem colSpan={1} width="100%" overflow="auto">
          <Outlet />
        </GridItem>
@@ -48,8 +48,8 @@ function AppFoundation() {
 }

 const Placeholder = ({ name }) => (
-    <Flex width="100%" height="100%" align="center" justify="center" bg="gray.50" _dark={{ bg: "gray.900" }}>
-        <Heading color="gray.400" _dark={{ bg: "gray.600" }} size="md">{name} Dashboard - Coming Soon</Heading>
+    <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>
 );

@@ -75,7 +75,7 @@ function App() {

                    <Route path="/home" element={<Home />}>
                        <Route index element={<MyDashboard />} />
-                        <Route path="gas" 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" />} />
@@ -0,0 +1,84 @@
+import VdapApi from '../../hooks/useVdapApi.js';
+import {Flex, Spinner, Text, Box, Center} from "@chakra-ui/react"; // Adjust path as needed
+
+
+export default function LlmAlChangesQuadPlot(props) {
+    console.log("3. Quad Plot loaded");
+    let tp_percent = 0;
+    let tn_percent = 0;
+    let fp_percent = 0;
+    let fn_percent = 0;
+
+    // Clean, single-line data fetching
+    const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot');
+
+    if (isLoading) return (
+        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
+            <Spinner size="xl" color="blue.400" thickness="4px" />
+        </Flex>
+    );
+
+    if (error) return (
+        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
+            <Text color="red.400">{error}</Text>
+        </Flex>
+    );
+
+    if (apiData.length === 0) return (
+        <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
+            <Text color="gray.400">No alert level quad plot data available.</Text>
+        </Flex>
+    );
+
+    if (apiData) {
+        console.log(apiData);
+        tp_percent = ((apiData[0]['tp_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        tn_percent = ((apiData[0]['tn_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        fp_percent = ((apiData[0]['fp_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        fn_percent = ((apiData[0]['fn_count']/apiData[0]['tot_count'])*100).toFixed(2);
+    }
+
+    return (
+        <Flex direction="column" w="100%" h="100%" borderRadius="lg">
+            <Flex direction="row" w="100%" bg="gray.800" borderTopRadius="lg" justifyItems="center" alignItems="start" p={2} pb={0} pl={4} justifyContent="end">
+                {/*<Text fontWeight="bold" fontSize="lg" color="white">Alert Level Changes Quad Plot</Text>*/}
+                <Text bg="cyan.200/5" borderRadius="sm" padding="1" fontWeight="normal" fontSize="sm" color="white">All time</Text>
+            </Flex>
+            <Flex direction="column" w="100%" h="100%" bg="gray.800" gap="2" padding="2" borderBottomRadius="lg">
+                <Flex direction="row" w="100%" h="100%" gap="2">
+                    <Center bg={`blue.200/${tp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
+                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
+                            <Text>True Positive</Text>
+                            <Text fontSize="lg"> {tp_percent}% </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['tot_count']} </Text>
+                        </Flex>
+                    </Center>
+                    <Center bg={`blue.200/${tn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
+                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
+                            <Text>True Negative</Text>
+                            <Text fontSize="lg"> {tn_percent}% </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['tot_count']} </Text>
+                        </Flex>
+                    </Center>
+                </Flex>
+                <Flex direction="row" w="100%" h="100%" gap="2">
+                    <Center bg={`blue.200/${fp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
+                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
+                            <Text>False Positive</Text>
+                            <Text fontSize="lg"> {fp_percent}% </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['tot_count']} </Text>
+                        </Flex>
+                    </Center>
+                    <Center bg={`blue.200/${fn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
+                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
+                            <Text>False Negative</Text>
+                            <Text fontSize="lg"> {fn_percent}% </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['tot_count']} </Text>
+                        </Flex>
+                    </Center>
+                </Flex>
+            </Flex>
+        </Flex>
+    )
+
+}
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { http, HttpResponse } from 'msw'; // Import MSW
+import LlmAlChangesQuadPlot from './LlmAlChangesQuadPlot';
+
+export default {
+    title: 'Dashboard Widgets/LLM AL Changes Quad Plot',
+    component: LlmAlChangesQuadPlot,
+    decorators: [
+        (Story) => (
+            <Box
+                w="100%" maxW="1800px" h="400px"
+                border="2px dashed" borderColor="gray.600" p={2}
+                resize="both" overflow="auto"
+            >
+                <Story />
+            </Box>
+        ),
+    ],
+};
+
+const mockData = [
+    { tp: 50 },
+    { tn: 250 },
+    { fp: 10 },
+    { fn: 5 },
+    { tot_count: 315}
+];
+
+// Scenario LIVE: call our API for real
+export const LivePopulated = {};
+
+// Scenario 1: Successful API Call
+export const Populated = {
+    parameters: {
+        msw: {
+            handlers: [
+                // Intercept the exact URL your component is trying to fetch
+                http.get('*/api/v2/llm_quadrant_plot', () => {
+                    // Return a 200 OK with the mock JSON
+                    return HttpResponse.json(mockData);
+                }),
+            ],
+        },
+    },
+};
+
+// Scenario 2: The 500 Server Crash
+export const ServerCrash = {
+    parameters: {
+        msw: {
+            handlers: [
+                http.get('*/api/v2/llm_quad_plot', () => {
+                    // Return a 500 Error
+                    return new HttpResponse(null, { status: 500 });
+                }),
+            ],
+        },
+    },
+};
+
+// Scenario 3: Empty State (API works, but no data returned)
+export const EmptyData = {
+    parameters: {
+        msw: {
+            handlers: [
+                http.get('*/api/v2/llm_quad_plot', () => {
+                    return HttpResponse.json([]);
+                }),
+            ],
+        },
+    },
+};
@@ -1,153 +1,247 @@
-import { useState, useMemo } from "react";
+import {useState, useMemo, useRef} from "react";
 import {
-    Button,
-    IconButton,
-    Box,
-    Text,
-    Flex,
-    Grid,
-    Dialog,
-    Tabs,
-    Badge,
-    Menu,
-    HStack
+  Button,
+  Box,
+  Text,
+  Flex,
+  Grid,
+  Dialog,
+  Tabs,
+  Badge,
+  Menu,
+  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} 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);
+  // 1. ☁Store connections
+  const isEditing = useDashboardStore(state => state.isEditing);
+  const enterEditMode = useDashboardStore(state => state.enterEditMode);
+  const saveEdit = useDashboardStore(state => state.saveEdit);
+  const cancelEdit = useDashboardStore(state => state.cancelEdit);
+  const addWidget = useDashboardStore(state => state.addWidget);

-    // This now handles both local UI lock AND database saving!
-    const saveEdit = useDashboardStore(state => state.saveEdit);
+  const recipe = useRecipe({key: "glassTab"});
+  const tabStyles = recipe();

-    const cancelEdit = useDashboardStore(state => state.cancelEdit);
-    const addWidget = useDashboardStore(state => state.addWidget);
+  // 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);
+  const [isLibraryOpen, setIsLibraryOpen] = useState(false);

-    // Smart Add Handler
-    const handleAddWidget = (widgetId, sizeKey) => {
-        enterEditMode();
-        addWidget(widgetId, sizeKey);
-    };
+  // Smart Add Handler
+  const handleAddWidget = (widgetId, sizeKey) => {
+    enterEditMode();
+    addWidget(widgetId, sizeKey);
+  };

-    const categorizedWidgets = useMemo(() => {
-        return Object.entries(WIDGET_REGISTRY).reduce((acc, [id, widget]) => {
-            const cat = widget.category || 'General';
-            if (!acc[cat]) acc[cat] = [];
-            acc[cat].push({ id, ...widget });
-            return acc;
-        }, {});
-    }, []);
+  const categorizedWidgets = useMemo(() => {
+    return Object.entries(WIDGET_REGISTRY).reduce((acc, [id, widget]) => {
+      const cat = widget.category || 'General';
+      if (!acc[cat]) acc[cat] = [];
+      acc[cat].push({id, ...widget});
+      return acc;
+    }, {});
+  }, []);

-    const categories = Object.keys(categorizedWidgets);
+  const categories = Object.keys(categorizedWidgets);

-    return (
-        <>
-            {/* THE STATIC DROPDOWN MENU */}
-            <Menu.Root>
-                <Menu.Trigger asChild>
-                    <IconButton
-                        aria-label="Settings"
-                        bg="vdap.darkGreen"
-                        color="white"
-                        size="sm"
-                        borderRadius="md"
-                        _hover={{ bg: "vdap.darkGreenHover" }}
+  // use ref to capture html node for placing menu accordingly
+  const menuRef = useRef(null);
+  const getAnchorRect = () => {
+    if (!menuRef.current) return null;
+    return menuRef.current.getBoundingClientRect();
+  };
+
+  return (
+    <>
+      {isEditing ? (
+        // 📝 EDIT MODE: The 3-Pill Layout
+        <HStack gap={2}>
+          {/* 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>
+
+          {/* 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>
+      ) : (
+        // 👀 VIEW MODE: The Static Dropdown Menu
+        <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 }} />
+              <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={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
+
+                    <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"
+                      }}
                    >
-                        <Settings size={18} />
-                    </IconButton>
-                </Menu.Trigger>
-
-                <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>
-
-                            <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
-                                <X size={16} style={{ marginRight: '8px' }} /> Discard Changes
-                            </Menu.Item>
-                        </>
-                    ) : (
-                        <Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
-                            <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
-                        </Menu.Item>
-                    )}
-
-                    <Menu.Separator my={1} borderColor="gray.200" />
-
-                    <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
-                        <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
+                      <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
                    </Menu.Item>
-                </Menu.Content>
-            </Menu.Root>
+                  </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)}
+                size="xl"
+                placement="center"
+                closeOnInteractOutside={true}
+                closeOnEscapeKeyDown={true}
+              >
+                {/* 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.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">
-                                    {categories.map(cat => (
-                                        <Tabs.Trigger key={cat} value={cat} pb={2}>{cat}</Tabs.Trigger>
-                                    ))}
-                                </Tabs.List>
+                  <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>

-                                {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">
-                                                    <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
-                                                    <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
+                    <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
+                                    borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
+                      <Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
+                    </Dialog.Header>

-                                                    <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>
-                                                        <HStack gap={2} flexWrap="wrap">
-                                                            {Object.keys(widget.allowedSizes).map(sizeKey => (
-                                                                <Badge
-                                                                    key={sizeKey}
-                                                                    as="button"
-                                                                    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"
-                                                                >
-                                                                    <Plus size={12} style={{ display: 'inline', marginRight: '4px' }}/>
-                                                                    {sizeKey.charAt(0).toUpperCase() + sizeKey.slice(1)}
-                                                                </Badge>
-                                                            ))}
-                                                        </HStack>
-                                                    </Box>
-                                                </Flex>
-                                            ))}
-                                        </Grid>
-                                    </Tabs.Content>
-                                ))}
-                            </Tabs.Root>
-                        </Dialog.Body>
-                        <Dialog.CloseTrigger position="absolute" top={3} right={3} color="white" />
-                    </Dialog.Content>
+                    <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"}}>
+                          {categories.map(cat => (
+                            <Tabs.Trigger key={cat} value={cat} pb={2}
+                                          _selected={{color: "blue.500", borderColor: "blue.500"}}>{cat}</Tabs.Trigger>
+                          ))}
+                        </Tabs.List>
+
+                        {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={{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={{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 => (
+                                        <Box
+                                          key={sizeKey}
+                                          as="button"
+                                          css={tabStyles}
+                                          onClick={() => handleAddWidget(widget.id, sizeKey)}
+                                          color={{base: "blue.600", _dark: "blue.300"}}
+                                        >
+                                          {/* 🚨 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>
+                                </Flex>
+                              ))}
+                            </Grid>
+                          </Tabs.Content>
+                        ))}
+                      </Tabs.Root>
+                    </Dialog.Body>
+                    <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>
-        </>
-    );
+              </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>
-  )
-})
@@ -2,6 +2,7 @@ import { useRecipe, Button, Stack, 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";
@@ -13,25 +14,28 @@ export default function Header() {

    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>
+            {/*/!* Home Link Logo *!/*/}
+            {/*<Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">*/}
+            {/*    VDAP*/}
+            {/*</Button>*/}
+            <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />

            {/* 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>
+                <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>*/}
                <UserAvatarMenu
-                    name={displayName}
+                    name={avatarname}
                    // avatar={user.avatar}
                />
            </Flex>
@@ -3,7 +3,7 @@ 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, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';

 const SIDEBAR_DEFAULT_BUTTONS = [
  { icon: House, name: "Home", url: "/home" },
@@ -24,26 +24,47 @@ export default function Sidebar() {
  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}
+      <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
      >
-        {/* Menu Trigger */}
-        <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
+        {/* Home Link Logo */}
+        <Button
+            as={NavLink}
+            to="/home"
+            color="color"
+            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
        >
-          <Menu />
-        </IconButton>
+          {isOpen ? "🌋 VDAP" : "🌋"}
+        </Button>
+
+

        {/* Navigation Buttons */}
        {visibleButtons.map((button) => {
          const Icon = button.icon;
          return (
-              <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
+              // <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
+                    // overflow="hidden" // Prevents text popout on collapse
                >
                  <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}

@@ -59,16 +80,34 @@ export default function Sidebar() {
                    {button.name}
                  </Box>
                </Button>
-              </Tooltip>
+              // </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"
+        >
+          {/* 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"
+          >
+            {isOpen ? <PanelLeftClose style={{ flexShrink: 0 }} /> : <PanelLeftOpen style={{ flexShrink: 0 }} />}
+          </IconButton>

-        {/* Theme Toggler */}
-        <ColorModeButton
-            position="absolute"
-            bottom="4"
-            left="4"
-        />
+          {/* Theme Toggler */}
+          <ColorModeButton />
+        </Box>
      </Box>
  );
 }
@@ -78,11 +78,22 @@ 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 }
        }
    },

+    "llm_al_changes_quad_plot": {
+        name: "Alert Level Changes Quad Plot",
+        category: "Computer Science",
+        description: "Percentage of True-Positive, True-Negative, False-Positive, and False-Negative changes in all " +
+          "alert levels.",
+        component: lazy(() => import('../components/Widgets/LlmAlChangesQuadPlot.jsx')),
+        allowedSizes: {
+            small: { w: 3, h: 12 }
+        }
+    }
+
 };
@@ -1,64 +1,69 @@
-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} 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 recipe = useRecipe({key: "glassTab"});
+  const tabStyles = recipe();
+
  const location = useLocation();
  const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";

-  // 1. CSS making this look like how we want it, TODO turn to theme?
-  const tabStyles = {
-    fontSize: "lg",
-    fontWeight: "normal",
-    color: "fg.muted",
-    px: 4,                   // Horizontal padding
-    py: 2,                   // Vertical padding
-    borderBottom: "2px solid transparent",
-    mb: "-2px",              // 🔥 The trick: Pulls the active border down to overlap the container's line
-    transition: "all 0.2s",
-    _hover: { color: "fg" },
-    _activeLink: {
-      color: "color",        // Or whatever your primary text color is
-      borderColor: "currentColor", // The active underline
-    }
-  };
-
  return (
-      <Flex direction="column" height="100%" width="100%">
+    <Flex direction="column" height="100%" width="100%">

-        {/* 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%">
+      <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center"
+            justify="space-between" width="100%">

-          {/* TABS CONTAINER - Replicates the Tabs.List line container */}
-          <Flex borderBottom="2px solid" borderColor="border.muted" gap={2}>
-            <Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
-            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
-            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
-            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
-            <Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
-          </Flex>
+        {/* TABS CONTAINER */}
+        <Flex gap={2} alignItems="center">
+          {HOME_TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <Box
+                key={tab.name}
+                as={NavLink}
+                to={tab.url}
+                end={tab.exact} // CRITICAL: Forces exact match so "/home" deactivates on sub-routes
+                css={tabStyles}
+              >
+                {/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
+                <Icon size={24} style={{flexShrink: 0}}/>
+                <Box as="span">{tab.name}</Box>
+              </Box>
+            );
+          })}

-          {/* EDIT MODE BUTTONS & CONTROLS */}
-          <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" />
-            )}
-          </HStack>
+          {/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
+          {isPersonalDashboard && <SettingsButton/>}

        </Flex>

-        {/* 3. 🛠️ CANVAS AREA */}
-        <Flex flex="1" overflow="auto">
-          <Outlet />
-        </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">
+          {/* Future global controls go here */}
+        </HStack>

      </Flex>
+
+      <Flex flex="1" overflow="auto">
+        <Outlet/>
+      </Flex>
+
+    </Flex>
  );
 }
@@ -1,209 +1,200 @@
-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';
+import {useColorModeValue} from "@/components/ui/color-mode";
 // 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");
+  // 🌗 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();
+  // ☁️ Database Connection
+  const {user} = useAuthStore();

-    // ☁️ Local UI Connections
-    const widgets = useDashboardStore(state => state.widgets);
-    const isEditing = useDashboardStore(state => state.isEditing);
-    const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
-    const removeWidget = useDashboardStore(state => state.removeWidget);
-    const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action
+  // ☁️ Local UI Connections
+  const widgets = useDashboardStore(state => state.widgets);
+  const isEditing = useDashboardStore(state => state.isEditing);
+  const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
+  const removeWidget = useDashboardStore(state => state.removeWidget);
+  const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action

-    // 🔒 Safety lock to prevent infinite re-renders
-    const hasHydrated = useRef(false);
+  // 🔒 Safety lock to prevent infinite re-renders
+  const hasHydrated = useRef(false);

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

-            // 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);
-            }
+  useEffect(() => {
+    if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
+      const savedLayout = user.preferences.dashboard_layout;

-            hasHydrated.current = true;
-        }
-    }, [user, setWidgets]);
+      // 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);
+      }
+      hasHydrated.current = true;
+    }
+  }, [user, setWidgets]);


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

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

-        if (registryEntry && registryEntry.component) {
-            const Component = registryEntry.component;
+    if (registryEntry && registryEntry.component) {
+      const Component = registryEntry.component;

-            // 1. Check if this widget type has a settings component registered
-            const SettingsUI = registryEntry.settingsComponent;
+      // 1. Check if this widget type has a settings component registered
+      const SettingsUI = registryEntry.settingsComponent;

-            return (
-                // The "Frame" that holds both the Title and the Chart
-                <Flex direction="column" height="100%" width="100%" bg={frameBg}>
+      return (
+        <>
+          <Box css={styles.header}>
+            <Text color="titleColor" fontWeight="semibold" fontSize="md" isTruncated>
+              {registryEntry.name}
+            </Text>

-                    {/* THE TITLE BAR */}
-                    <Flex
-                        justify="space-between"
-                        align="center"
-                        px={3}
-                        py={2}
-                    >
-                        <Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
-                            {registryEntry.name}
-                        </Text>
+            {/* THE SETTINGS ELLIPSIS */}
+            {SettingsUI ? (
+              <Popover.Root positioning={{placement: "bottom-end"}}>
+                <Popover.Trigger asChild>
+                  <IconButton
+                    size="xs"
+                    variant="ghost"
+                    color="gray.400"
+                    borderRadius="xl"
+                    _hover={{color: "white", bg: "gray.700"}}
+                    aria-label="Widget Settings"
+                  >
+                    <MoreVertical size={16}/>
+                  </IconButton>
+                </Popover.Trigger>

-                        {/* THE SETTINGS ELLIPSIS */}
-                        {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>
-                                </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" />}>
-                                            <SettingsUI
-                                                widgetId={widget.id}
-                                                currentSettings={widget.settings || {}}
-                                            />
-                                        </Suspense>
-                                    </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>
-            );
-        }
-
-        // 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">
-                <Text fontWeight="bold" color="red.400">Error</Text>
-                <Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
-            </Flex>
-        );
-    };
-
-    return (
-        <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
-                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
-            >
-                {/* 3. 🎨 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"
-                        cursor={isEditing ? "grab" : "default"}
-                        position="relative" // 3. REQUIRED so the absolute button stays inside this box
-                    >
-                        {/* 4. THE DELETE BUTTON */}
-                        {isEditing && (
-                            <IconButton
-                                aria-label="Remove widget"
-                                position="absolute"
-                                top={2}
-                                right={2}
-                                size="xs"
-                                bg="white"
-                                color={iconColor}
-                                border="1px solid"
-                                borderColor="gray.200"
-                                _hover={{ bg: "red.50", color: "red.500", borderColor: "red.200" }}
-                                zIndex={2}
-                                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} />
-                            </IconButton>
-                        )}
-
-                        {/* 4. 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>
-                        }>
-                            {renderWidget(widget)}
-                        </Suspense>
-
-                    </Box>
-                ))}
-            </ResponsiveGridLayout>
-
-            {/* Empty State Helper */}
-            {widgets.length === 0 && (
-                <Flex width="100%" height="200px" align="center" justify="center">
-                    <Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
-                </Flex>
+                {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
+                <Popover.Positioner zIndex={10}>
+                  <Popover.Content css={popoverStyles.root}>
+                    <Suspense fallback={<Spinner size="sm"/>}>
+                      <SettingsUI
+                        widgetId={widget.id}
+                        currentSettings={widget.settings || {}}
+                      />
+                    </Suspense>
+                  </Popover.Content>
+                </Popover.Positioner>
+              </Popover.Root>
+            ) : (
+              <Box w="20px" h="20px"/>
            )}
-        </Box>
+          </Box>
+
+          <Box css={styles.body}>
+            <Component settings={widget.settings || {}}/>
+          </Box>
+        </>
+      );
+    }
+
+    // Fallback if someone asks for a widget that doesn't exist
+    return (
+      <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>
    );
+  };
+
+  return (
+    <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
+        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
+      >
+        {/* 3. 🎨 Paint the Widgets */}
+        {widgets.map(widget => (
+          <Box
+            key={widget.id}
+            css={styles.root}
+            // 3. 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
+          >
+            {/* 4. THE DELETE BUTTON */}
+            {isEditing && (
+              <IconButton
+                aria-label="Remove widget"
+                position="absolute"
+                top={2}
+                right={2}
+                size="xs"
+                bg="white"
+                color="black"
+                border="1px solid"
+                borderRadius="xl"
+                borderColor="gray.200"
+                _hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
+                zIndex={2}
+                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}/>
+              </IconButton>
+            )}
+
+            {/* 4. SUSPENSE BOUNDARY wrapping the render function */}
+            <Suspense fallback={
+              <Flex css={styles.body} align="center" justify="center">
+                <Spinner size="md" color="blue.400" thickness="3px"/>
+              </Flex>
+            }>
+              {renderWidget(widget)}
+            </Suspense>
+          </Box>
+        ))}
+      </ResponsiveGridLayout>
+
+      {/* Empty State Helper */}
+      {widgets.length === 0 && (
+        <Flex width="100%" height="200px" align="center" justify="center">
+          <Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
+        </Flex>
+      )}
+    </Box>
+  );
 }
@@ -1,14 +1,12 @@
-import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react";
+import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";

 // RECIPES
 const headerRecipe = defineRecipe({
  base: {
-    bg: "{base200}",
+    bg: "{transparent}",
    color: "text",
    width: "100%",
    height: "100%",
-    borderBottom: "1px solid",
-    borderBottomColor:"{border}",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
@@ -18,13 +16,13 @@ const headerRecipe = defineRecipe({

 const dashboardRecipe = defineRecipe({
  base: {
-    bg: "{base200}"
+    bg: "{MainBackground}"
  }
 });

 const canvasRecipe = defineRecipe({
  base: {
-    bg: "{base200}",
+    bg: "{transparent}",
    zIndex: "-1",
    color: "{text}"
  }
@@ -34,26 +32,111 @@ const sidebarRecipe = defineSlotRecipe({
  slots: ["root", "close_button", "buttons", "dark_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%)",
+        _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",
-      justifyContent: "start", 
-      alignItems: "start",
+      justifyContent: "start",
+      alignItems: "stretch",
      gap: 2,
-      p: 2,
+
+      // 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
+      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",
+
+      transition: "background-color 0.4s ease, color 0.4s ease",
+
+      "& svg": {
+        transition: "stroke-width 0.4s ease"
+      },
+
+      _hover: {
+        bg: "rgba(255, 255, 255, 0.1)",
+        color: "{text}",
+        fontWeight: "semibold",
+        "& svg": {
+          strokeWidth: "3"
+        }
+      },
+
+      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}",
+          fontWeight: "normal",
+          "& svg": {
+            strokeWidth: "2" // Keeps the active icon at normal thickness on hover
+          }
+        },
+
+        // 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",
+        }
+      },
    },
  }
 });
@@ -96,19 +179,132 @@ const widgetRecipe = defineSlotRecipe({
  }
 });

+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},
+        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: 4,
+          boxShadow: "xl",
+          minW: "240px",
+          // 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)",
+        }
+      }
+    }
+  },
+
+  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: "bold",
+    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",
+      }
+    }
+  }
+});
+
 const config = defineConfig({
  globalCss: {
    ".react-grid-placeholder": {
-    background: "#c0d2e3ff !important",
-    borderColor: "#a9b6c2ff !important",
-    boxShadow: "0 0 10px #c0d2e3ff !important",
-    opacity: "1 !important",
-    borderRadius: "5px",
-    _dark: {
-      background: "#393c3fff !important",
-      borderColor: "#000000ff !important",
-      boxShadow: "0 0 10px #16181bff !important",
+      background: "#c0d2e3ff !important",
+      borderColor: "#a9b6c2ff !important",
+      boxShadow: "0 0 10px #c0d2e3ff !important",
      opacity: "1 !important",
+      borderRadius: "5px",
+      _dark: {
+        background: "#393c3fff !important",
+        borderColor: "#000000ff !important",
+        boxShadow: "0 0 10px #16181bff !important",
+        opacity: "1 !important",
      },
    },
    ".react-resizable-handle-se": {
@@ -171,31 +367,38 @@ 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"}},
+        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"}},
+        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,
+      glassTab: glassTabRecipe
    },
    slotRecipes: {
      sidebar: sidebarRecipe,
      widget: widgetRecipe,
+      glassPanel: glassPanelRecipe,
    },
  },
 });
Author	SHA1	Message	Date
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
vkuchenik	35eea905a3	Fixed the tabs in the canvas not transitioning colors to black when active and Updated canvas coloring in 'coming soon' pages	2026-07-22 09:40:41 -07:00
vkuchenik	764bf07ac8	Fixed weird menu positioning on open, now opens below settings button	2026-07-22 08:46:58 -07:00
vkuchenik	9ee41c9b8a	Added an Alert Level Change Quad Plot Widget	2026-07-21 16:07:59 -07:00