nesquena-hermes
759c25655d
feat(composer): click pasted/attached image thumbnails to lightbox-zoom them
...
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 .
2026-05-06 19:54:04 +00:00
..
2026-03-30 20:40:19 -07:00
2026-04-21 02:25:14 +00:00
2026-05-03 22:47:55 -07:00
2026-05-04 21:50:40 +08:00
2026-05-01 17:14:51 +00:00
2026-05-05 02:26:55 +00:00
2026-05-04 18:11:58 +00:00
2026-04-25 21:06:31 -07:00
2026-04-23 12:15:56 -07:00
2026-04-29 19:54:07 -07:00
2026-05-04 21:26:43 +00:00
2026-05-04 00:06:58 -07:00
2026-04-25 15:47:44 -07:00
2026-05-03 01:53:01 +08:00
2026-05-05 12:51:13 +02:00
2026-04-25 17:50:58 -07:00
2026-04-29 04:31:55 +00:00
2026-05-02 02:50:40 +00:00
2026-05-05 08:36:17 -07:00
2026-05-02 00:52:41 +00:00
2026-05-03 01:53:01 +08:00
2026-05-05 01:52:42 +00:00
2026-05-03 20:59:32 +00:00
2026-05-04 10:48:36 -04:00
2026-05-06 14:53:40 +00:00
2026-05-05 22:14:07 +00:00
2026-05-05 16:13:58 +00:00
2026-05-05 16:41:30 +00:00
2026-04-27 11:43:32 -07:00
2026-04-29 04:37:31 +00:00
2026-04-30 18:45:15 +00:00
2026-05-04 00:06:58 -07:00
2026-04-14 19:04:48 +00:00
2026-04-25 17:50:58 -07:00
2026-04-09 18:05:23 -07:00
2026-05-05 23:00:18 +02:00
2026-04-24 01:32:47 +00:00
2026-04-29 19:54:07 -07:00
2026-04-25 23:08:59 -07:00
2026-04-20 20:55:53 -07:00
2026-05-02 19:35:42 +00:00
2026-05-02 19:45:54 +00:00
2026-04-25 14:33:41 -07:00
2026-04-23 09:58:15 -07:00
2026-04-29 19:54:07 -07:00
2026-04-20 23:54:40 +00:00
2026-04-30 15:24:31 +00:00
2026-05-04 00:06:58 -07:00
2026-04-29 04:32:40 +00:00
2026-05-05 01:18:34 +00:00
2026-05-01 04:46:30 +00:00
2026-04-21 22:55:09 -07:00
2026-04-25 21:35:51 -07:00
2026-04-19 05:37:44 +00:00
2026-05-06 19:54:04 +00:00
2026-04-22 20:18:02 +00:00
2026-04-30 23:15:31 +00:00
2026-04-26 21:04:38 -07:00
2026-04-24 09:05:25 -07:00
2026-05-06 18:11:14 +00:00
2026-05-05 01:52:42 +00:00
2026-05-02 02:50:40 +00:00
2026-05-05 01:12:08 +00:00
2026-05-01 18:30:41 +00:00
2026-04-29 04:31:16 +00:00
2026-05-05 01:23:55 +00:00
2026-05-05 01:23:55 +00:00
2026-04-26 21:04:38 -07:00
2026-04-29 16:45:26 +08:00
2026-04-27 16:44:07 -07:00
2026-05-02 02:50:40 +00:00
2026-05-04 00:06:58 -07:00
2026-04-21 23:39:39 -07:00
2026-05-05 01:52:42 +00:00
2026-05-02 04:19:28 +00:00
2026-05-05 22:32:19 +02:00
2026-05-02 22:29:14 +08:00
2026-05-05 01:12:08 +00:00
2026-04-18 06:37:09 +00:00
2026-04-29 04:39:50 +00:00
2026-04-30 16:18:01 +00:00
2026-04-20 21:03:41 -07:00
2026-04-24 11:41:17 -07:00
2026-04-27 22:56:12 -07:00
2026-04-14 21:14:00 +00:00
2026-04-14 21:14:33 +00:00
2026-05-02 02:50:40 +00:00
2026-04-29 04:34:26 +00:00
2026-04-14 21:52:34 +00:00
2026-04-16 00:00:22 +00:00
2026-04-29 04:33:24 +00:00
2026-05-05 19:17:27 -07:00
2026-05-05 01:12:07 +00:00
2026-05-05 01:18:34 +00:00
2026-04-20 19:43:40 +00:00
2026-04-16 20:16:07 -07:00
2026-04-25 15:47:44 -07:00
2026-04-25 14:33:41 -07:00
2026-05-03 22:04:58 +00:00
2026-04-18 06:45:39 +00:00
2026-04-16 18:09:16 -07:00
2026-04-24 09:05:25 -07:00
2026-05-06 18:11:14 +00:00
2026-04-21 15:26:52 -07:00
2026-04-25 13:07:35 -07:00
2026-05-06 06:26:44 +00:00
2026-04-18 06:46:43 +00:00
2026-04-20 23:04:09 +00:00
2026-05-05 02:26:55 +00:00
2026-05-05 09:23:29 -07:00
2026-05-05 17:30:56 +00:00
2026-05-05 01:18:34 +00:00
2026-05-05 01:20:32 +00:00
2026-05-05 02:25:06 +00:00
2026-05-05 09:23:29 -07:00
2026-04-20 22:48:19 +00:00
2026-04-19 23:11:49 -07:00
2026-04-30 16:20:05 +00:00
2026-04-21 00:58:02 +00:00
2026-04-27 16:27:03 -07:00
2026-05-05 00:00:29 -07:00
2026-04-22 16:27:01 +00:00
2026-04-21 23:08:24 -07:00
2026-04-22 20:21:42 +00:00
2026-04-23 09:58:15 -07:00
2026-04-29 04:31:14 +00:00
2026-05-05 09:23:29 -07:00
2026-05-05 19:17:27 -07:00
2026-05-03 01:44:38 +08:00
2026-04-23 11:16:59 -07:00
2026-04-23 10:44:10 -07:00
2026-04-26 18:47:38 -07:00
2026-05-03 16:35:50 +00:00
2026-04-25 13:07:35 -07:00
2026-04-26 14:24:20 -07:00
2026-04-29 17:42:32 -07:00
2026-04-30 15:24:32 +00:00
2026-04-26 15:29:02 -07:00
2026-04-26 14:24:20 -07:00
2026-05-01 19:52:05 +08:00
2026-04-26 10:36:59 -07:00
2026-05-01 18:30:41 +00:00
2026-04-26 15:29:02 -07:00
2026-04-26 15:29:02 -07:00
2026-05-04 00:06:58 -07:00
2026-04-29 19:54:07 -07:00
2026-04-27 13:34:59 -07:00
2026-05-06 08:10:08 +00:00
2026-05-05 08:36:17 -07:00
2026-04-27 15:28:19 -07:00
2026-04-27 18:40:13 -07:00
2026-04-27 18:40:13 -07:00
2026-05-01 05:35:24 +00:00
2026-04-27 22:56:12 -07:00
2026-04-29 16:37:08 +08:00
2026-04-30 15:24:35 +00:00
2026-05-06 06:26:44 +00:00
2026-05-05 01:48:32 +00:00
2026-05-06 06:30:32 +00:00
2026-05-01 04:46:12 +00:00
2026-04-30 23:43:23 +00:00
2026-05-06 06:26:43 +00:00
2026-05-01 05:29:42 +00:00
2026-05-01 17:57:34 +00:00
2026-05-03 02:46:24 +00:00
2026-05-06 18:01:11 +00:00
2026-05-02 00:21:15 +00:00
2026-05-02 01:43:00 +00:00
2026-05-05 08:36:17 -07:00
2026-05-02 04:19:28 +00:00
2026-05-05 08:36:17 -07:00
2026-05-02 04:19:28 +00:00
2026-05-04 15:30:37 -07:00
2026-05-04 04:51:30 +00:00
2026-05-02 22:16:23 +00:00
2026-05-03 01:15:26 +00:00
2026-05-03 03:07:07 +00:00
2026-05-03 03:21:22 +00:00
2026-05-03 02:46:24 +00:00
2026-05-03 06:47:52 +00:00
2026-05-03 17:04:46 +00:00
2026-05-03 18:12:01 +00:00
2026-05-03 18:12:01 +00:00
2026-05-03 20:59:32 +00:00
2026-05-03 21:44:22 +00:00
2026-05-03 22:04:58 +00:00
2026-05-06 18:11:14 +00:00
2026-05-04 05:26:19 +00:00
2026-05-04 16:17:26 +00:00
2026-05-04 16:17:26 +00:00
2026-05-04 16:03:05 +00:00
2026-05-04 21:26:43 +00:00
2026-05-05 08:36:17 -07:00
2026-05-04 16:49:43 +00:00
2026-05-04 16:49:43 +00:00
2026-05-04 16:50:22 +00:00
2026-05-05 08:33:44 -07:00
2026-05-05 02:02:54 +00:00
2026-05-06 18:01:11 +00:00
2026-05-05 09:23:29 -07:00
2026-05-05 08:45:14 -07:00
2026-05-05 08:38:29 -07:00
2026-05-06 16:11:46 +00:00
2026-05-06 06:26:28 +00:00
2026-05-06 09:34:23 -07:00
2026-05-03 22:43:11 -07:00
2026-04-27 17:43:36 -07:00
2026-04-20 22:48:19 +00:00
2026-04-26 21:04:38 -07:00
2026-04-23 14:41:06 -07:00
2026-05-02 02:44:59 +00:00
2026-05-05 00:32:43 +00:00
2026-05-04 17:28:32 -07:00
2026-05-01 22:55:46 +08:00
2026-04-14 17:14:01 +00:00
2026-05-01 04:46:15 +00:00
2026-05-02 04:19:28 +00:00
2026-04-19 06:47:24 +00:00
2026-05-05 01:51:05 +00:00
2026-05-05 01:51:05 +00:00
2026-04-29 19:54:07 -07:00
2026-05-03 20:50:06 +00:00
2026-05-03 19:18:44 +00:00
2026-05-02 00:52:41 +00:00
2026-05-04 17:03:02 +00:00
2026-04-30 23:45:46 -06:00
2026-05-06 18:11:12 +00:00
2026-04-29 04:33:29 +00:00
2026-04-29 17:01:01 +08:00
2026-05-02 17:03:25 +00:00
2026-04-22 22:56:21 -07:00
2026-05-06 09:34:23 -07:00
2026-04-26 21:04:38 -07:00
2026-04-14 19:04:48 +00:00
2026-04-14 19:04:48 +00:00
2026-04-30 16:18:01 +00:00
2026-04-29 17:42:32 -07:00
2026-04-15 16:57:31 +00:00
2026-04-29 04:30:55 +00:00
2026-04-29 17:42:32 -07:00
2026-05-05 01:18:33 +00:00
2026-04-30 10:27:56 -07:00
2026-04-30 16:20:05 +00:00
2026-05-05 02:26:55 +00:00
2026-04-30 18:34:37 +00:00
2026-04-30 18:45:15 +00:00
2026-04-30 14:39:37 -07:00
2026-04-30 22:27:40 +00:00
2026-05-02 12:09:36 +08:00
2026-04-30 23:43:23 +00:00
2026-05-02 02:56:48 +00:00
2026-05-02 03:49:40 +00:00
2026-04-21 19:14:31 -07:00
2026-04-23 02:09:37 +00:00
2026-04-23 02:09:37 +00:00
2026-05-06 06:27:00 +00:00
2026-04-27 22:56:12 -07:00
2026-04-29 17:42:32 -07:00
2026-04-25 23:28:29 -07:00
2026-05-04 09:04:07 -07:00
2026-05-06 14:53:40 +00:00
2026-05-05 02:26:52 +00:00
2026-04-24 10:44:46 -07:00
2026-05-03 16:21:42 +00:00
2026-05-03 22:47:55 -07:00
2026-04-26 21:04:38 -07:00
2026-04-21 16:26:51 +00:00
2026-04-25 19:21:00 -07:00
2026-04-25 21:06:31 -07:00
2026-04-25 21:06:31 -07:00
2026-04-21 15:26:52 -07:00
2026-05-05 13:42:45 -07:00
2026-04-25 21:06:31 -07:00
2026-05-05 08:36:17 -07:00
2026-04-25 17:50:58 -07:00
2026-05-06 18:11:14 +00:00
2026-05-02 02:11:41 +08:00
2026-05-03 18:18:27 -07:00
2026-05-02 23:05:55 +08:00
2026-05-06 14:53:40 +00:00
2026-05-02 17:54:58 +00:00
2026-05-05 22:32:19 +02:00
2026-05-03 16:35:50 +00:00
2026-04-25 13:07:35 -07:00
2026-05-05 02:36:10 +00:00
2026-05-02 12:09:36 +08:00
2026-04-25 13:07:35 -07:00
2026-05-01 04:46:37 +00:00
2026-04-27 13:34:59 -07:00
2026-05-02 10:35:40 +08:00
2026-05-06 18:11:13 +00:00
2026-05-04 14:05:49 -07:00
2026-04-21 22:11:32 -07:00
2026-04-25 17:50:58 -07:00
2026-05-03 20:00:56 +02:00
2026-05-03 05:20:19 +00:00
2026-04-14 19:04:48 +00:00
2026-04-24 09:05:25 -07:00
2026-05-03 21:14:21 -07:00
2026-05-03 07:08:08 +00:00
2026-04-29 21:34:27 -07:00
2026-04-29 17:42:32 -07:00
2026-04-29 17:42:32 -07:00
2026-04-11 20:06:37 -07:00
2026-04-14 19:04:48 +00:00
2026-04-14 19:04:48 +00:00
2026-05-06 08:10:08 +00:00
2026-04-14 19:04:48 +00:00
2026-04-23 02:35:58 +00:00
2026-04-24 09:05:25 -07:00
2026-04-14 19:04:48 +00:00
2026-04-14 19:04:48 +00:00
2026-04-30 16:18:01 +00:00
2026-04-29 21:06:30 -07:00
2026-04-18 06:46:43 +00:00
2026-04-23 10:44:10 -07:00
2026-04-14 19:04:48 +00:00
2026-04-14 19:04:48 +00:00
2026-04-14 19:04:48 +00:00
2026-05-05 08:36:17 -07:00
2026-04-14 19:04:48 +00:00
2026-05-03 18:18:27 -07:00
2026-04-29 04:31:54 +00:00
2026-04-29 04:31:54 +00:00
2026-04-14 19:04:48 +00:00
2026-04-18 06:37:09 +00:00
2026-04-14 19:04:48 +00:00
2026-04-14 19:04:48 +00:00
2026-05-03 20:28:21 +00:00
2026-04-29 04:32:52 +00:00
2026-04-29 04:31:12 +00:00
2026-04-22 20:49:28 +00:00
2026-04-11 12:19:12 -07:00
2026-04-24 09:05:25 -07:00
2026-04-12 10:51:48 -07:00
2026-04-29 04:31:55 +00:00
2026-05-03 06:09:47 +00:00
2026-04-18 06:45:39 +00:00
2026-04-16 10:19:10 -07:00
2026-04-22 16:27:01 +00:00
2026-04-12 14:28:16 -07:00
2026-05-05 12:51:13 +02:00
2026-04-29 16:46:32 +08:00
2026-04-13 11:11:56 -07:00
2026-04-13 23:25:26 -07:00
2026-04-14 19:04:48 +00:00
2026-04-19 04:29:07 +00:00
2026-04-19 05:37:44 +00:00
2026-04-24 11:04:16 -07:00
2026-05-03 20:20:17 -07:00
2026-04-19 23:17:00 -07:00
2026-04-20 23:54:40 +00:00
2026-05-02 17:54:58 +00:00
2026-05-05 02:15:25 +00:00
2026-05-06 08:10:08 +00:00
2026-04-29 21:34:27 -07:00
2026-05-03 21:37:38 +01:00
2026-05-03 20:00:56 +02:00
2026-05-05 01:12:07 +00:00
2026-05-03 23:55:45 -07:00
2026-05-03 11:46:42 +02:00
2026-04-21 18:47:40 -07:00
2026-04-30 15:24:33 +00:00
2026-05-04 00:06:58 -07:00
2026-05-02 02:50:40 +00:00
2026-04-27 13:34:59 -07:00
2026-05-06 17:24:23 +00:00
2026-04-29 04:31:36 +00:00
2026-04-23 09:45:34 -07:00
2026-04-09 18:08:29 -07:00
2026-05-05 13:46:54 -07:00
2026-04-21 00:33:03 +00:00
2026-05-05 13:42:47 -07:00
2026-04-29 17:42:32 -07:00
2026-05-06 06:30:32 +00:00
2026-05-05 03:13:55 -07:00
2026-05-05 08:29:00 -07:00
2026-04-10 10:02:28 -07:00
2026-04-12 00:19:33 -07:00
2026-05-01 06:53:32 +00:00
2026-05-01 16:25:04 +00:00
2026-05-01 17:19:53 +00:00
2026-05-01 18:36:24 +00:00
2026-05-04 00:06:58 -07:00
2026-05-01 22:45:18 +00:00
2026-05-01 23:10:52 +00:00
2026-05-04 23:57:56 +08:00
2026-04-13 22:11:45 -07:00
2026-04-24 11:03:42 -07:00
2026-05-06 17:38:11 +00:00
2026-04-27 17:43:36 -07:00
2026-04-27 21:39:30 -07:00
2026-04-27 18:40:13 -07:00
2026-04-27 17:43:36 -07:00
2026-04-26 10:36:59 -07:00
2026-05-05 16:13:58 +00:00