[tooinfinity]

Attached images in drafts (commits, quotes, replies, and remotes) were previously rendered only as static 80×80px cropped thumbnails. Users could not inspect the full picture, check screenshot readability, or confirm file selections before posting. Writing accurate accessibility descriptions via +ALT was also difficult without being able to see the full image.

Convert draft image thumbnails in ImagePickerPreviews into accessible, focusable interactive buttons. Connect draft files, blob object URLs, and descriptions directly to ImageViewer (yet-another-react-lightbox), providing full-resolution zooming, keyboard navigation (ArrowLeft, ArrowRight, Escape), and ALT caption previews. Keep the remove (X) and +ALT buttons layered independently so their interactions do not inadvertently open the lightbox. Gracefully handle image removals by closing the viewer if the active image is removed or shifting the index if a preceding image is deleted.

Fixes #875.

Validation

• bun run test:lint passed on all files with 0 errors.
• bun run test:types passed with 0 errors across main and test tsconfigs.
• bun run vp test --config tests/draft-images.config.ts: 31 test files, 275 tests passed, including new dedicated tests in tests/Unit/DraftImagePreview.test.tsx:
  • Verified thumbnail preview buttons render with accessible labels (aria-label="Preview attached image N").
  • Verified clicking a thumbnail opens ImageViewer at that image's index with proper URLs and descriptions.
  • Verified sliding and keyboard navigation through the viewer and closing via Escape / onClose.
  • Verified deleting an active image closes the viewer, and deleting a preceding image shifts the index down.
• Manual verification on http://127.0.0.1:8000:
  • Tested single and multi-image attachments (PNG, JPEG, WebP).
  • Tested click-to-preview from the main composer, commit reply composer, and quote composer.
  • Verified zooming, panning, and Escape key dismissal.
  • Verified +ALT descriptions entered in the composer render inside the viewer's caption overlay.
  • Verified removing (X) and editing +ALT do not trigger the preview.

---

Before (Production)

draft-image-preview-before.mp4

After (Updated)

draft-image-preview-after.mp4

[jubianchi]

@tooinfinity can you add screenshots/videos, please?

This really helps maintainers see the result quickly without having to checkout anything.

🙏🏻

[xHeaven]

Note

This message is generated by gpt-6.1-sol on behalf of xHeaven. It may contain errors—verify important details.

Two changes needed before merging:

1. Coordinate Escape handling between the image viewer and its containing dialog (commit-image-picker.tsx:270). Open an attachment in Quote or “Write a commit”, then press Escape: both the viewer and composer close. Only the viewer should close, returning focus to the draft.

2. Preserve the original file format when downloading draft images (commit-image-picker.tsx:275). ImageViewer hardcodes .webp filenames, but draft blobs retain their original encoding. I confirmed a PNG gets the filename shot.webp while still containing PNG bytes. Pass the original filename/type through, or omit downloading for draft previews.

Please add regression coverage for these integration cases.