Feature: Dashboard component

[b1ink0]

Description

@dnd-kit based Dashboard component:

• Grid-based layout using 2D array structure
• Drag-and-drop powered by @dnd-kit
• Add/remove widgets via dropdown in empty slots
• Layout persistence through callbacks
• Layout locking to prevent modifications
• Configurable drag handles (always visible or on hover)
• Row/column layout orientation

react-grid-layout based Dashboard component:

Components

• DashboardGrid - Main dashboard with drag-and-drop
• DashboardWidgetGallery - Widget browser/selector
• DashboardProvider - Context for sharing state
• WidgetWrapper - Widget controls (drag handle, remove button)

Features

Responsive Layout

• Works across different screen sizes with breakpoints

Row-Based Layout Syntax

[
  ["widget1"],
  ["widget2", "widget3"],
  ["widget4", "widget5", "widget6"]
]

Widget Operations

• Add widgets by dragging from gallery or clicking
• Remove widgets with hover button
• Drag to reorder
• Resize with handles

Widget Gallery

• List or grid view
• Drag or click to add

Layout Controls

• Size presets for widgets
• Lock layout to prevent changes
• Show/hide drag handles
• Grid compaction (vertical/horizontal)
• Bound widgets to grid

Relevant Technical Choices

Testing Instructions

Additional Information:

Screenshot/Screencast

@dnd-kit based Dashboard component:

Dashboard.Demo.mp4

react-grid-layout based Dashboard component:

Dashboard.Grid.Demo.mp4

---

Checklist

• I have thoroughly tested this code to the best of my abilities.
• I have reviewed the code myself before requesting a review.
• This code is covered by unit tests to verify that it works as intended.
• The QA of this PR is done by a member of the QA team (to be checked by QA).

Fixes #94