wip - committing to check out another branch

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 styles = recipe({ layout: "widget" });
-  const popoverStyles = recipe({ layout: "popover" });
+  const glassPanelRecipe = useSlotRecipe({key: "glassPanel"});
+  const glassPanelStyles = glassPanelRecipe();
+  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.Content css={popoverStyles.root}>
+                <Popover.Positioner z-index="1">
+                 <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>
             }>