Skip to content

feat: replace fixed grid with infinite canvas dashboard#18

Merged
homanp merged 3 commits intomainfrom
feat/infinite-canvas
Mar 15, 2026
Merged

feat: replace fixed grid with infinite canvas dashboard#18
homanp merged 3 commits intomainfrom
feat/infinite-canvas

Conversation

@homanp
Copy link
Copy Markdown
Owner

@homanp homanp commented Mar 15, 2026

What

Replace react-grid-layout with a custom infinite canvas that supports pan, zoom, and grid-snapped widget placement. The grid extends infinitely in all directions with no column or row limits.

  • Add InfiniteCanvas component with pan (drag/middle-click), zoom (Ctrl+wheel/pinch), and dot-grid background
  • Add DraggableWidget with grid-snapped drag and resize via refs to avoid setState-during-render issues
  • Add ZoomControls overlay (zoom in/out, fit-to-view, reset)
  • Replace LayoutItem with CanvasLayout type (unbounded grid units)
  • Add per-dashboard CanvasViewport state (panX, panY, zoom)
  • Auto-create widgets SQLite table on startup if missing
  • Hide model picker during AI streaming, show KITT loader instead
  • Add Makefile for full project bootstrap
  • Update README with Makefile docs and canvas architecture
  • Remove react-grid-layout dependency

Why

Makes it truly infinite

Test plan

  • Tests pass locally
  • Tested manually

Replace react-grid-layout with a custom infinite canvas that supports
pan, zoom, and grid-snapped widget placement. The grid extends infinitely
in all directions with no column or row limits.

- Add InfiniteCanvas component with pan (drag/middle-click), zoom
  (Ctrl+wheel/pinch), and dot-grid background
- Add DraggableWidget with grid-snapped drag and resize via refs
  to avoid setState-during-render issues
- Add ZoomControls overlay (zoom in/out, fit-to-view, reset)
- Replace LayoutItem with CanvasLayout type (unbounded grid units)
- Add per-dashboard CanvasViewport state (panX, panY, zoom)
- Auto-create widgets SQLite table on startup if missing
- Hide model picker during AI streaming, show KITT loader instead
- Add Makefile for full project bootstrap
- Update README with Makefile docs and canvas architecture
- Remove react-grid-layout dependency

Made-with: Cursor
@homanp homanp self-assigned this Mar 15, 2026
@github-actions github-actions bot added the contributor:verified Contributor passed trust analysis. label Mar 15, 2026
@homanp homanp merged commit f0fab80 into main Mar 15, 2026
4 checks passed
cursor bot pushed a commit that referenced this pull request Mar 17, 2026
Co-authored-by: Ismail Pelaseyed <homanp@users.noreply.github.com>
homanp added a commit that referenced this pull request Mar 17, 2026
docs: update CHANGELOG with recent merges (PRs #18, #19, #20)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

contributor:verified Contributor passed trust analysis.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Make dashboard a canvas with zoom etc. [Feature]: Add support for running PR reviews via Cursor in in CI

1 participant