Skip to content

Add Piece Creation UI (dialog with gallery + freehand drawing)#7

Merged
shaoster merged 2 commits into
mainfrom
dev/piece-creation-ui
Apr 5, 2026
Merged

Add Piece Creation UI (dialog with gallery + freehand drawing)#7
shaoster merged 2 commits into
mainfrom
dev/piece-creation-ui

Conversation

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot commented Apr 5, 2026

Summary

  • Adds a + New Piece button on the homepage that opens an MUI Dialog
  • Dialog fields: required Name, optional Notes (≤ 300 chars), and a Thumbnail picker with two modes:
    • Gallery — five pre-curated SVG pottery illustrations served from frontend/public/thumbnails/
    • Draw — freehand SVG canvas via react-sketch-canvas; the exported <svg> string is stored directly as the thumbnail
  • Save is disabled until a non-blank name is entered; missing name is highlighted
  • Closing the dialog while dirty (any field touched) triggers a discard-confirmation dialog
  • On success the PieceList updates immediately without a page reload
  • Backend: PieceCreateSerializer now accepts optional notes (max 300 chars) and stores it on the initial designed PieceState

Test plan

  • 3 new backend tests: notes saved on creation, notes too long returns 400, notes defaults to empty
  • 20 new frontend tests covering: rendering, save-button disabled state, notes char limit, tab switching, cancel/discard flow, successful save with name/notes/thumbnail
  • All 21 backend tests pass (pytest)
  • All 32 frontend tests pass (npm test)

Closes #5

🤖 Generated with Claude Code

Implements a popup dialog for creating new pieces (#5):
- Backend: PieceCreateSerializer now accepts an optional `notes` field
  (max 300 chars) and stores it on the initial designed PieceState
- Frontend: NewPieceDialog component with name (required), notes
  (optional, 300-char limit), and a thumbnail picker that offers a
  pre-curated gallery of SVG pottery illustrations or a freehand
  SVG drawing canvas (react-sketch-canvas); hand-drawn SVGs are
  stored as raw <svg> strings in the thumbnail field
- Discard-confirmation dialog appears when closing with unsaved changes
- Save is disabled until a non-blank name is provided
- On success the PieceList on the homepage updates immediately
- 20 new frontend tests; 3 new backend tests

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions github-actions Bot mentioned this pull request Apr 5, 2026
In this case, I had to make these fixes interactively to see the UI
bugs.
- Generally, the canvas widget doesn't work with the modal dialog.
- The dark theme wasn't set up properly.
- The modal dialog did not close on successful creation.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Piece Creation UI

1 participant