Add image preview lightbox and click-outside close in Svelte composer
Session from pi-web on Hugging Face by woxQAQ · MIT · condensed by Coders Talk
Click a segment to jump to that moment
7msession
1interventions
by library · 17h
GOAL
Remove the default attachment count text in the composer bar, add a way to preview attached images in a lightbox, and make the lightbox close when clicking outside the image.
- +0Prompt · +0Remove the 'x image(s) attached' text in ComposerBar.svelte
- +0mAgent did · +0mTraced attachmentSummary/attachmentNotice logic in ComposerBar.svelte, simplified it to only show the temporary notice (not the default count text), and verified with pnpm run build:web
- +1mPrompt · +1mSupport viewing attached images
- +1mAgent did · +1mFound existing ImageLightbox component, wired attachment thumbnails to open it, added open/close/prev/next state, mounted the lightbox, and confirmed build:web passed
- +5mPrompt · +5mIn ImageLightbox.svelte, support closing by clicking the backdrop, not just the close button
- +5mAgent did · +5mAdded onclick={onClose} to the dialog stage and stopPropagation on buttons and image/footer areas, then confirmed build:web passed
- +6mIntervention · +6mTested it and clicking the backdrop still didn't close the lightbox, so told the agent it wasn't workingWhy: It said it fixed it and the build passed, but I actually tried clicking the mask and nothing happened.
- +7mAgent did · +7mRe-read the component, found the viewport div was still intercepting all clicks, narrowed stopPropagation to just the image frame so clicking empty space now closes it, and re-ran build:web successfully
- +7mOutcome · +7mThree composer/lightbox changes shipped across ComposerBar.svelte and ImageLightbox.svelte, each verified with a passing pnpm run build:web
VERDICT
Next time I'd ask upfront for click-outside-to-close behavior along with the lightbox feature, since it's an obvious pairing. The correction that actually mattered was telling the agent the backdrop click still didn't work after it claimed success — it turned out the viewport div was still swallowing the click, and only my re-test caught that the build passing didn't mean the feature worked.