chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor dashboard to use new theme.js

Browse Source
This commit is contained in:
chight
2026-10-19 14:34:40 -07:00
parent 56ae6d2e3f
commit c810056d67
1 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/home/tabs/MyDashboard.jsx
+10 -15
View File
@@ -29,13 +29,14 @@ export default function MyDashboard() {
const hasHydrated = useRef(false); const hasHydrated = useRef(false);
// 1. Pull the global slot recipes // 1. Pull the global slot recipes
const glassPanelRecipe = useSlotRecipe({key: "glassPanel"}); const widgetRecipe = useSlotRecipe({ key: "widget" });
const glassPanelStyles = glassPanelRecipe(); const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
const widgetStyles = glassPanelRecipe({ layout: "widget" });
const widgetSettingsRecipe = useSlotRecipe({ key: "widgetSettings" });
const widgetSettingsStyles = widgetSettingsRecipe();
// 2. Populate widgets // 2. Pass the editing state directly into the widget recipe!
const widgetStyles = widgetRecipe({ mode: isEditing ? "editing" : undefined });
const popoverStyles = popoverRecipe();
// 3. Populate widgets
useEffect(() => { useEffect(() => {
if (user?.preferences?.dashboard_layout && !hasHydrated.current) { if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
const savedLayout = user.preferences.dashboard_layout; const savedLayout = user.preferences.dashboard_layout;
@@ -57,7 +58,7 @@ export default function MyDashboard() {
isResizable: false // The magic lock! No resizing allowed globally. isResizable: false // The magic lock! No resizing allowed globally.
})); }));
// 3. The component mapper // 4. The component mapper
const renderWidget = (widget) => { const renderWidget = (widget) => {
const registryEntry = WIDGET_REGISTRY[widget.type]; const registryEntry = WIDGET_REGISTRY[widget.type];
@@ -84,8 +85,8 @@ export default function MyDashboard() {
</Popover.Trigger> </Popover.Trigger>
{/* NEW: The Positioner lifts the content out of the Flexbox flow */} {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
<Popover.Positioner z-index="1"> <Popover.Positioner zIndex={1}>
<Popover.Content css={[widgetSettingsStyles.root, glassPanelStyles.root]}> {/*className={`${glassPanelStyles.root} ${widgetSettingsStyles.root}`}>*/} <Popover.Content css={popoverStyles.content}>
<Suspense fallback={<Spinner size="sm"/>}> <Suspense fallback={<Spinner size="sm"/>}>
<SettingsUI <SettingsUI
widgetId={widget.id} widgetId={widget.id}
@@ -132,12 +133,6 @@ export default function MyDashboard() {
<Box <Box
key={widget.id} key={widget.id}
css={widgetStyles.root} css={widgetStyles.root}
// Grid-specific state overrides remain inline
boxShadow={isEditing ? "outline" : widgetStyles.root.boxShadow}
borderStyle={isEditing ? "dashed" : "solid"}
borderWidth={isEditing ? "2px" : "1px"}
borderColor={isEditing ? "orange.300" : widgetStyles.root.borderColor}
cursor={isEditing ? "grab" : "default"}
position="relative" // REQUIRED so the absolute button stays inside this box position="relative" // REQUIRED so the absolute button stays inside this box
> >
{/* THE DELETE BUTTON */} {/* THE DELETE BUTTON */}