feat(post): article view improvements (lightbox, action bar, modal shell)#6224
Open
tsahimatsliah wants to merge 4 commits into
Open
feat(post): article view improvements (lightbox, action bar, modal shell)#6224tsahimatsliah wants to merge 4 commits into
tsahimatsliah wants to merge 4 commits into
Conversation
…ell) Reading-focused improvements to PostFocusCard and the post-modal shell, across all redesign post types (article, video, share/freeform/welcome, collection) on both the modal and the page. - Image lightbox: cover + in-article images open a full-screen, viewport- centered viewer (ImageModal / LazyModal.ImageView) that expands from the clicked thumbnail (FLIP), with a dark blurred backdrop and a corner close. Closes on backdrop / X / Esc (Esc scoped so it doesn't also close the post modal) and locks background scroll. Companion falls back to a new tab. - Engagement bar: moved above the comment composer, restyled as a floating pill, sticky at both edges (tablet+); surfaces counts + "…" menu when pinned. Read-post button moved under the title; three-dots menu moved to the card header. Comment sort is a flush-left text link. - Modal shell: hide the duplicate top-strip "…" menu in the redesign (navigationRedesign -> hideOptions); pin the backdrop to a fixed layer so it no longer scrolls away; contain overscroll. - Tooltips: profile hover cards use a fixed Popper strategy + viewport preventOverflow/flip so they're no longer clipped by the modal's overflow. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
- Extract getImageOriginRect (in ImageModal) and use it from both the Markdown in-article images and the PostFocusCard cover image, instead of duplicating the getBoundingClientRect → originRect shape at each call site. - Add an onError fallback on the lightbox image: with an origin rect it starts opacity-0 and is only revealed by the FLIP on load, so a failed image load would otherwise leave an empty full-screen overlay — reveal it so the broken-image/alt state shows instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The FLIP entrance scaled the image with independent x/y factors and a fixed corner radius, so the image warped mid-flight and its rounded-16 corners rendered near-square at the small start scale before snapping round — reading as a glitch. - Use a single uniform scale (contain within the thumbnail) so the aspect ratio is preserved and the image never distorts. - Grow from the thumbnail's center (transform-origin + center-aligned translate) instead of the top-left corner. - Pre-divide the corner radius by the scale and transition it, so the rendered radius stays a constant ~16px for the whole animation instead of snapping. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the bespoke inline lightbox in ProfileUserWorkspacePhotos with the shared LazyModal.ImageView (ImageModal), so both surfaces share one implementation and can't drift. The shared modal adds a FLIP zoom-from-thumbnail entrance, capture-phase Escape handling, body scroll-lock with scrollbar compensation, and an onError fallback. - Open the lightbox via useLazyModal().openModal with the clicked thumbnail's bounds (getImageOriginRect) so it expands from the photo. - Thread the click event through WorkspacePhotoItem's onClick to capture those bounds. - Drop the selectedPhoto state, the inline dialog markup, the Esc listener, and the now-unused CloseButton/useEventListener imports. - Update the spec to assert the click delegates to LazyModal.ImageView (the lightbox's own close/Esc behavior is covered by ImageModal.spec). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Reading-focused improvements to
PostFocusCardand the post-modal shell, across all redesign post types (article, video, share/freeform/welcome, collection) on both the modal and the page — plus reuse of the new shared image lightbox in the profile workspace-photos grid.Image lightbox
max-h/max-wobject-contain, dark blurred backdrop, X pinned to the screen corner) instead of navigating away. NewImageModalregistered asLazyModal.ImageView; the extension companion falls back to a new tab.Focus card
surface-float, blur, soft shadow) and sticky at both edges, tablet and up. Surfaces upvote/comment/award counts + the "…" menu when pinned; analytics icon dropped (redundant with the stats-row link).Modal shell
hideOptionsprop wired throughnavigationRedesignon the Article/Collection/Share modals.::beforelayer so it no longer scrolls away;overscroll-behavior: containstops scroll chaining to the feed.Tooltips
preventOverflow/flipso they're no longer clipped by the modal'soverflow: clip.Profile workspace photos
ProfileUserWorkspacePhotosis replaced by the sharedLazyModal.ImageView, so both surfaces share one implementation (FLIP entrance, Esc handling, scroll-lock, onError fallback) and can't drift.Notes
main, preserving the newer reader-variant logic (useReaderModalEligibility/ reader install gate) on the Read button while applying the cover-image → lightbox change.Verification
node ./scripts/typecheck-strict-changed.js✅ ·eslinton changed files ✅ ·ImageModal+ workspace-photos jest specs ✅ · full CI green🤖 Generated with Claude Code
Preview domain
https://claude-elegant-sammet-973b0a.preview.app.daily.dev