feat(web): migrate dashboard to WidgetGrid with layout persistence #497

jason.woltje · 2026-02-24T00:46:03Z

jason.woltje commented

2026-02-24 00:46:03 +00:00

Summary

Replace hardcoded dashboard with WidgetGrid system (react-grid-layout)
Add layout API client for CRUD operations on user layouts
Create default 7-widget layout on first visit, persist via UserLayout API
Update BaseWidget + WidgetGrid to use CSS variables (theme-compatible)
Add responsive container width measurement via ResizeObserver
Dashboard header with edit mode toggle (drag/resize/remove widgets)

Files Changed

File	Change
page.tsx	Rewrite: WidgetGrid + layout persistence
page.test.tsx	Rewrite: 7 tests for new architecture
BaseWidget.tsx	CSS variable theming (was hardcoded Tailwind)
WidgetGrid.tsx	Responsive width + CSS variable empty state
WidgetGrid.test.tsx	Add ResizeObserver mock
defaultLayout.ts	New: default 7-widget placement
layouts.ts	New: layout API client

Test plan

All 1182 web tests pass
Lint + typecheck clean
CI green

Ref: #488

## Summary - Replace hardcoded dashboard with WidgetGrid system (react-grid-layout) - Add layout API client for CRUD operations on user layouts - Create default 7-widget layout on first visit, persist via UserLayout API - Update BaseWidget + WidgetGrid to use CSS variables (theme-compatible) - Add responsive container width measurement via ResizeObserver - Dashboard header with edit mode toggle (drag/resize/remove widgets) ## Files Changed | File | Change | |------|--------| | page.tsx | Rewrite: WidgetGrid + layout persistence | | page.test.tsx | Rewrite: 7 tests for new architecture | | BaseWidget.tsx | CSS variable theming (was hardcoded Tailwind) | | WidgetGrid.tsx | Responsive width + CSS variable empty state | | WidgetGrid.test.tsx | Add ResizeObserver mock | | defaultLayout.ts | New: default 7-widget placement | | layouts.ts | New: layout API client | ## Test plan - [x] All 1182 web tests pass - [x] Lint + typecheck clean - [ ] CI green Ref: #488

jason.woltje added 2 commits 2026-02-24 00:46:03 +00:00

feat(web): migrate dashboard to WidgetGrid with layout persistence c694db5d8c

Replace the hardcoded dashboard layout with the WidgetGrid system.
The dashboard now loads/saves user layouts via the UserLayout API
and creates a default layout on first visit with all 7 widgets.

Changes:
- Add layout API client (fetchDefaultLayout, createLayout, updateLayout)
- Add default layout constant with 7-widget arrangement (12-col grid)
- Update BaseWidget + WidgetGrid to use CSS variables for theme compat
- Add responsive container width measurement via ResizeObserver
- Rewrite dashboard page to use WidgetGrid with edit mode toggle
- Update all tests for the new dashboard architecture

Ref: #488

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

fix(web): suppress lint for never-resolving promise in test

ci/woodpecker/push/web Pipeline was successful

Details

315b04e1b2

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

jason.woltje merged commit cc56f2cbe1 into main

2026-02-24 00:50:25 +00:00

jason.woltje deleted branch feat/ms18-widget-grid-migration

2026-02-24 00:50:25 +00:00

jason.woltje referenced this issue from a commit

2026-02-24 00:50:27 +00:00

feat(web): migrate dashboard to WidgetGrid with layout persistence (#497)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: mosaic/stack#497