Save and display sketch preview thumbnails

Increasing Access

Visual thumbnails make sketches instantly recognisable, reducing reliance on titles, dates, or memory to identify work. This benefits beginners, students, and educators, as well as users with cognitive, language, or memory-related accessibility challenges.

Thumbnails allow faster scanning and selection of sketches, supporting visual learners and improving workflow in classrooms and workshops. Users can locate the correct sketch quickly, reducing friction during learning sessions.

Providing a visual preview also aligns the Web Editor with common creative tooling patterns, making it more approachable for new users while keeping existing workflows intact.

Feature request details

Summary

When a sketch is saved, capture a small image of the current canvas and store it with the sketch so users can see a thumbnail preview in their sketch list/dashboard.

Current Behavior

• Saving a sketch persists files and metadata only.
• The sketch list shows name, dates, and visibility, but no visual preview.
• Users must open a sketch to recognise what it contains, which becomes difficult as the number of sketches grows.

Desired Behavior

• On save (manual save and keyboard shortcuts), the editor requests a canvas snapshot from the running preview.
• The snapshot is scaled to a reasonable thumbnail size and included in the save payload.
• The backend stores the preview image with the project and returns it in project list and detail responses.
• The dashboard sketch list renders a preview thumbnail, with a placeholder when no preview exists.

Acceptance Criteria

• Preview image is captured at save time and sent with the project.
• Project model and APIs persist and return previewImage.
• Sketch list UI renders a thumbnail column with accessible alt text and a clear fallback state.
• No regressions to saving, cloning, or listing sketches.

No files or tests are named. Start by tracing the save flow from the editor and running preview through the project model and API responses, then inspect the sketch list rendering. Done means saved previews are persisted and returned, thumbnails and accessible fallbacks appear in the list, and saving, cloning, and listing still work.