← Back to Articles
2024-11-19frontend

Draggable grid dashboard

  • Change: React Grid Layout + React RND introduced for user-configurable draggable/resizable panels on the home dashboard (3b6a7f50 "wip: adding data component into the grid"). Data components added to grids across three days: active scenes (c824f250), online users (75015f0a), active users (2aeda8ac), world list (097a17bd). Layout saved to localStorage via Jotai atomWithStorage (e19f9e1c "wip: saving layout to local storage"). Reset button conditionally rendered when layout drifts from default (9e7f78ba).
  • Why: Hard-coded column order didn't match every user's priorities. Letting users drag and resize stat panels was the lowest-friction customization — no account or setting required.
  • Affected Modules: src/components/layout/, src/lib/ (layout atoms), pages/index.tsx, package.json
  • Trade-offs:
    • Pro: Each user gets their own panel arrangement persisted across sessions without a server-side preference store.
    • Con: Grid dimensions are unknowable on the server — must defer layout measurements to the client, which means a hydration mismatch is the default failure mode if not handled carefully. The localStorage key schema is fragile: adding or renaming a panel can silently corrupt saved layouts.