wip - committing to check out another branch

client/src/components/Widgets/settings/AlertChangeSettings.jsx

@@ -4,21 +4,23 @@ import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 export default function IvansAlertsSettings({ widgetId, currentSettings }) {
   const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
 
+  console.log("currentSettings:", currentSettings);
+
   return (
-    <Flex flexDirection="column" justifyContent="space-between" gap={2} pb={2}>
+    <Flex flexDirection="column" justifyContent="space-between" align="center" gap={2} pb={2}>
       {/* SLIDER DATE RANGE SELECTION */}
       <Slider.Root
-        width="80%" h="100%"
+        w="90%" h="100%"
         min={1} max={14}
-        defaultValue={[7]}
+        defaultValue={[1]}
         step={1}
         onValueChangeEnd={(e) => {
+          console.log("change end", e);
           const day = new Date(Date.now() - (e.value[0])*86400000).toLocaleDateString('en-CA');
-          console.log("new start: ", day);
           updateSettings(widgetId, {...currentSettings, startDate: day});
         }}
       >
-        <Slider.Label>{currentSettings?.endDate} to {currentSettings?.startDate}</Slider.Label>
+        <Slider.Label>{currentSettings?.startDate} to {currentSettings?.endDate}</Slider.Label>
         <Slider.Control>
           <Slider.Track>
             <Slider.Range />

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

@@ -29,9 +29,11 @@ export default function MyDashboard() {
   const hasHydrated = useRef(false);
 
   // 1. Pull the global slot recipes
-  const recipe = useSlotRecipe({key: "glassPanel"});
+  const glassPanelRecipe = useSlotRecipe({key: "glassPanel"});
-  const styles = recipe({ layout: "widget" });
+  const glassPanelStyles = glassPanelRecipe();
-  const popoverStyles = recipe({ layout: "popover" });
+  const widgetStyles = glassPanelRecipe({ layout: "widget" });
+  const widgetSettingsRecipe = useSlotRecipe({ key: "widgetSettings" });
+  const widgetSettingsStyles = widgetSettingsRecipe();
 
   // 2. Populate widgets
   useEffect(() => {
@@ -67,7 +69,7 @@ export default function MyDashboard() {
 
       return (
         <>
-          <Box css={styles.header}>
+          <Box css={widgetStyles.header}>
             <Text>
               {registryEntry.name}
             </Text>
@@ -82,8 +84,8 @@ export default function MyDashboard() {
                 </Popover.Trigger>
 
                 {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
-                <Popover.Positioner zIndex={1}>
+                <Popover.Positioner z-index="1">
-                  <Popover.Content css={popoverStyles.root}>
+                 <Popover.Content css={[widgetSettingsStyles.root, glassPanelStyles.root]}>  {/*className={`${glassPanelStyles.root} ${widgetSettingsStyles.root}`}>*/}
                     <Suspense fallback={<Spinner size="sm"/>}>
                       <SettingsUI
                         widgetId={widget.id}
@@ -96,7 +98,7 @@ export default function MyDashboard() {
             )}
           </Box>
 
-          <Box css={styles.body}>
+          <Box css={widgetStyles.body}>
             <Component settings={widget.settings || {}} widgetID={widget.id || {}}/>
           </Box>
         </>
@@ -105,7 +107,7 @@ export default function MyDashboard() {
 
     // Fallback if someone asks for a widget that doesn't exist
     return (
-      <Flex css={styles.body} align="center" justify="center" direction="column">
+      <Flex css={widgetStyles.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>
@@ -129,12 +131,12 @@ export default function MyDashboard() {
         {widgets.map(widget => (
           <Box
             key={widget.id}
-            css={styles.root}
+            css={widgetStyles.root}
             // Grid-specific state overrides remain inline
-            boxShadow={isEditing ? "outline" : styles.root.boxShadow}
+            boxShadow={isEditing ? "outline" : widgetStyles.root.boxShadow}
             borderStyle={isEditing ? "dashed" : "solid"}
             borderWidth={isEditing ? "2px" : "1px"}
-            borderColor={isEditing ? "orange.300" : styles.root.borderColor}
+            borderColor={isEditing ? "orange.300" : widgetStyles.root.borderColor}
             cursor={isEditing ? "grab" : "default"}
             position="relative" // REQUIRED so the absolute button stays inside this box
           >
@@ -163,7 +165,7 @@ export default function MyDashboard() {
 
             {/* SUSPENSE BOUNDARY wrapping the render function */}
             <Suspense fallback={
-              <Flex css={styles.body} align="center" justify="center">
+              <Flex css={widgetStyles.body} align="center" justify="center">
                 <Spinner size="md" color="blue.400" thickness="3px"/>
               </Flex>
             }>

client/src/theme.js

@@ -304,6 +304,16 @@ const homeRecipe = defineSlotRecipe({
   },
 })
 
+const widgetSettingsRecipe = defineSlotRecipe({
+  slots: ["root"],
+  base: {
+    root: {
+      w: "100%",
+      h: "500px",
+      bg: "red",
+    }
+  }
+})
 // const canvasRecipe = defineRecipe({
 //   base: {
 //     bg: "{transparent}",
@@ -428,7 +438,7 @@ const glassPanelRecipe = defineSlotRecipe({
       popover: {
         root: {
           borderRadius: "2xl",
-          p: 0,
+          p: 2,
           boxShadow: "xl",
           minW: "240px",
           maxW: "60%",
@@ -775,6 +785,7 @@ const config = defineConfig({
       header: headerRecipe,
       sidebar: sidebarRecipe,
       // widget: widgetRecipe,
+      widgetSettings: widgetSettingsRecipe,
       glassPanel: glassPanelRecipe,
       home: homeRecipe,
     },