mirror of
https://github.com/nesquena/hermes-webui.git
synced 2026-05-25 19:20:16 +00:00
nesquena-hermes
759c25655d
When pasting screenshots into the composer (especially multiple in sequence, now possible end-to-end with hermes-webui/hermes-swift-mac PR #74) the user has no way to verify the right image attached. The 56x56 thumbnail in the chip is fine as a UI affordance but offers no detail at all. Quote from the request: When I hit Cmd+C and save an image to the clipboard and then paste the clipboard out, I want to be able to click on any one of those uploaded images that's inside the composer bar and have it zoom up like a lightbox so I can see the image in full once it's been pasted in to the composer input. The lightbox infrastructure already exists for message-attached images (static/ui.js:269 _openImgLightbox + the doc-level click delegate at :298 for .msg-media-img). This PR extends the same delegate to also fire on .attach-thumb composer chips: - Clicking the thumbnail opens the existing image lightbox with the blob URL as src and the file name as alt text. - Audio/video chips are excluded (they have their own native <audio> / <video> controls and don't render an .attach-thumb img). - SVG thumbnails (.attach-thumb attach-thumb--svg) qualify — they are images visually. - The chip's x remove button is a sibling, not an ancestor, of the thumb — closest('.attach-thumb') from the button returns null, so removing still works without lightbox interference. Also updates static/style.css: - cursor: zoom-in on .attach-thumb (was cursor: default — actively misleading). - Subtle :hover emphasis (brightness 1.05 + scale 1.04, 120ms ease) so users discover the affordance before clicking. 5 regression tests in tests/test_composer_chip_lightbox.py pinning: - delegate handles .attach-thumb on IMG elements - delegate still handles .msg-media-img (no regression) - audio/video chips do NOT render an .attach-thumb img - cursor:zoom-in declared on the .attach-thumb selector - hover emphasis rule present Browser-verified live on port 8789: - addFiles three distinct screenshot files (mimicking three Mac sequential pastes) -> 3 chips, 3 thumbs, all distinct. - Click thumb #2 -> lightbox opens with the right image, alt text matches filename. - Click x on chip #2 -> removes that chip, no lightbox. - Escape key closes lightbox. Companion PR on the Mac side: hermes-webui/hermes-swift-mac#74 (unique filename per paste so sequential pastes actually appear as distinct chips). Refs nesquena/hermes-webui#1733.
