Skip to content

feat(post): article view improvements (lightbox, action bar placement)#6211

Closed
tsahimatsliah wants to merge 29 commits into
mainfrom
claude/pedantic-wozniak-03b218
Closed

feat(post): article view improvements (lightbox, action bar placement)#6211
tsahimatsliah wants to merge 29 commits into
mainfrom
claude/pedantic-wozniak-03b218

Conversation

@tsahimatsliah

@tsahimatsliah tsahimatsliah commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

What

Improvements to the reading-focused article view (PostFocusCard) and the post-modal shell, applied across all redesign post types (article, video, share/freeform/welcome, collection) on both the modal and the page.

Article view (PostFocusCard)

  • Image lightbox — the cover image and in-article (markdown) images open a full-screen, viewport-centered viewer (max-h/max-w object-contain, dark blurred backdrop, X pinned to the screen corner) instead of navigating / opening a new tab. New ImageModal registered as LazyModal.ImageView; the extension companion falls back to a new tab. Closes on backdrop click / X / Esc (Esc is scoped so it doesn't also close the post modal), and locks background scroll while open.
  • Read post button moved into the title column, directly under the title, so it stays close to a short title regardless of cover-image height.
  • Three-dots menu moved to the card header (right side).
  • Engagement bar moved down to sit above the "Share your thoughts" composer; restyled as a floating pill matching the mobile bar (translucent surface-float, blur, soft shadow) and made sticky at both edges (pins near the bottom while below the fold, near the top once scrolled past — with a gap from each edge). When pinned it surfaces the upvote/comment/award counts + the three-dots menu + close; the analytics icon was removed (redundant with the blue "Post analytics" link in the stats row). Desktop/tablet only — mobile keeps the plain in-flow bar since it already has the dedicated floating bottom bar.
  • Sort — dropped the "Sort:" label; only the Newest/Oldest-first toggle remains.

Post modal shell

  • Top strip — hides the duplicate "…" menu in the redesign (it lives in the card header) via a new hideOptions prop, wired through navigationRedesign on the Article/Collection/Share modals.
  • Backdrop — pinned to a fixed ::before layer so it no longer scrolls away with the content; overscroll-behavior: contain stops scroll from chaining to the feed behind.

Tooltips

  • Profile hover cards append to document.body and use a fixed Popper strategy + viewport preventOverflow/flip, so they're no longer clipped by the modal's overflow: clip and stay on-screen at any resolution.

Verification

  • node ./scripts/typecheck-strict-changed.js ✅ · eslint on changed files ✅ · ImageModal jest spec ✅
  • Manual: article page and modal across mobile / tablet / laptop — lightbox (cover + body images, X/overlay/Esc close), header three-dots, read-post under title, floating engagement bar pins top & bottom, sort shows just the toggle, backdrop stays fixed on scroll, profile hover cards not clipped.

🤖 Generated with Claude Code

Preview domain

https://claude-pedantic-wozniak-03b218.preview.app.daily.dev

@tsahimatsliah @claude
feat(post): article view improvements (lightbox, action bar placement)
02d9032 
- Add an image lightbox (ImageModal / LazyModal.ImageView) so the post cover
  image and in-article images open a full-screen viewer (dark overlay, X) in
  place instead of navigating to the post / a new tab. Companion falls back to
  opening in a new tab where the lazy-modal renderer isn't mounted.
- Move the engagement/action bar down to sit directly above the "Share your
  thoughts" composer (where the reader's cursor rests); it stays sticky and
  pins to the top once reached.
- Move the three-dots menu to the card header (right side), and move the
  "Read post" button below the title (the action bar's old slot).
- Drop the "Sort:" label, keeping just the Newest/Oldest-first toggle.
- Remove the redundant analytics icon from the action bar (the blue "Post
  analytics" link remains in the stats row).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview Jun 21, 2026 9:21am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
storybook Ignored Ignored Jun 21, 2026 9:21am

Request Review

@tsahimatsliah @claude
refactor(post): tidy focus-card action bar spacing and counts
9f66b04 
- Drop the upvote/comment/award counts from the action bar; the stats row
  right above already shows them, so the numbers were duplicated.
- Remove the action bar's bottom border (top divider only) for a more natural
  feel.
- Drop the stats row's extra bottom margin so the gap above the action bar
  matches the gap below it (spacing now governed by the column's gap-4).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 18, 2026 00:27
@tsahimatsliah @claude
feat(post): redesign modal top strip — drop duplicate menu, add scrol…
2e4c47c 
…l bar

- Hide the top navigation strip's "…" options menu in the redesign article
  modal (added `hideOptions` to PostHeaderActions). The menu already lives in
  the focus-card header next to the source name, so it was duplicated.
- Once the modal is scrolled past the header, float a fixed bar
  (FocusModalScrollBar) with the post's upvote/comment stats plus the "…" menu
  and a close button (three-dots sits left of the X). Uses position: fixed
  (matching the legacy FixedPostNavigation) because the modal card clips
  overflow, which breaks sticky.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): pin image lightbox close to screen corner, blur overlay
fa5e1a8 
- Move the lightbox X from the image to a fixed top-right screen corner so a
  busy image can't camouflage it.
- Add a backdrop blur to the lightbox overlay.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): show counts, menu, border on the pinned action bar
2cd6944 
Unify the scrolled state on the sticky action bar so the modal and the post
page behave identically:
- When the action bar is pinned, show the upvote/comment/award counts (the
  stats row that made them redundant has scrolled away), surface the "…" menu
  to the left of the close button, and switch the divider to the bottom edge.
- Tighten the gap between the stats row and the action bar.
- Remove the modal-only FocusModalScrollBar (the action bar now covers the
  scrolled state on both surfaces); keep hiding the top strip's duplicate menu.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 18, 2026 00:52
@tsahimatsliah @claude
fix(post): tooltip clipping, modal overscroll, redesign nav for all t…
f717167 
…ypes

- Profile/comment hover cards now append to document.body instead of the
  overflow-clipped modal card, so they're no longer cut off near its edges.
- Add overscroll-behavior: contain to the post modal overlay so overscroll no
  longer chains to the page behind and slides the backdrop away.
- Pass navigationRedesign to the Collection and Share post modals (Article and
  Video already had it) so the top-strip menu hiding applies to every redesign
  post type.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): make image lightbox fully visible and screen-centered
b0f9b8e 
The lightbox was rendering inside the standard Modal card (fixed width + top
margin + a 40rem max-height cap), so tall images overflowed and were cut off at
the bottom. Rebuild it as a full-viewport, both-axes-centered container with the
image at `max-h-full max-w-full object-contain` inside `p-4` padding — so the
image is always fully visible and scales down with the screen while keeping its
aspect ratio. Mirrors the existing workspace-photos lightbox; closes on overlay
click, the corner X, or Escape.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): stop profile hover card from being clipped by the modal
8145dd6 
Appending the card to document.body alone wasn't enough — give the Tippy popper
a fixed positioning strategy so it escapes the post modal card's `overflow:
clip`, and add preventOverflow/flip against the viewport so the card always
stays fully on screen and shifts/flips instead of spilling past an edge, on any
resolution. (Hover cards don't render on touch devices, so mobile is unaffected.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): render image lightbox above the post modal
f73358f 
The lightbox rewrite dropped the ReactModal portal, so it rendered inside
#__next while the post modal lives in a later body-level portal at the same
z-modal — leaving the lightbox stuck behind it. Portal the lightbox into
document.body so it's appended after the post modal portal and stacks on top.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): pin modal backdrop to the viewport while content scrolls
bcac28a 
The dark backdrop was painted on the post modal's scroll container, so it
scrolled away with the content and exposed the feed behind. Move the tint to a
fixed ::before layer on the overlay (and make the scroller's own background
transparent) so the backdrop stays pinned to the full viewport while only the
modal content scrolls.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 18, 2026 21:13
@tsahimatsliah @claude
fix(post): flatten modal backdrop pseudo-element selector
bc36246 
Move the fixed-backdrop ::before out of the nested :global() block to a direct
`.post-modal-overlay::before` rule so it compiles reliably; the nested form
risked not emitting, which left the modal with no backdrop (feed showed at full
brightness behind it).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(post): make engagement bar sticky at both top and bottom
d5c6dbf 
Add a bottom sticky offset alongside the existing top one, so the action bar
pins to the bottom of the screen while its natural position is still below the
fold (always reachable), scrolls naturally as it passes through the viewport,
then pins to the top once it scrolls above it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(post): give the engagement bar the mobile floating-pill look
b0edf84 
Restyle the FocusCardActionBar container to match the mobile post action bar
(MobilePostFloatingBar.v2): rounded-16 pill, translucent bg-surface-float with
backdrop blur, a soft shadow and a full subtle border, replacing the flat
opaque bar + divider border. UI only — the buttons, sticky top+bottom
behavior, and stuck counts/menu/close are unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(post): float the engagement bar above the bottom edge
85f329c 
Bump the sticky bottom offset from bottom-0 to bottom-4 so the floating pill
sits with a gap above the screen's bottom edge when pinned there, reading as
floating rather than glued to the edge.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(post): float the engagement bar off the top too, desktop-only
0086fe2 
- Add a top gap when pinned to the top (top-4, or laptop:top-20 to clear the
  fixed header by 1rem) to mirror the bottom float gap.
- Limit the floating-pill restyle and sticky behavior to tablet and up; on
  mobile keep the plain in-flow bar, since mobile already has its own floating
  bottom action bar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): keep Read post button next to a short title
1abb0e4 
Move the Read post button into the title column (directly under the title)
instead of after the title+image row, so a short title beside a tall cover
image keeps the button close to the title rather than dragging it down to align
with the bottom of the image.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): address image lightbox review feedback
15b968b 
- Esc on the image lightbox now closes only the lightbox, not the post modal
  underneath it (capture-phase handler that stops propagation before
  react-modal's Esc fires).
- Lock background scroll while the lightbox is open (restores the prior value
  so a still-open underlying modal keeps its own lock).
- Pass the image's alt through to the lightbox for body (markdown) images.
- Add an ImageModal spec (renders, backdrop click + Esc close).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(post): flag — connect engagement bar to the composer
e621ff5 
Behind featureFocusActionBarConnected (default off): the focus-card engagement
bar renders flat and joined to the "Share your thoughts" composer as one block
while there's room (no shadow, flush, rounded top only), and only becomes the
floating pill (shadow) once it pins on scroll. Off keeps the always-floating
pill. Desktop/tablet only; mobile keeps the plain in-flow bar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
chore(post): default the connected engagement bar on for review
1ee419f 
Flip featureFocusActionBarConnected to default true so the connected-bar idea
is visible without a GrowthBook override while we evaluate it. Flip back to
false (or override) to restore the always-floating pill. The stable base
without this experiment is tagged pr6211-fixes-ready.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
revert: connected engagement bar experiment
76b2afd 
Reverts the connected-bar work (commits e621ff5 + 1ee419f): the
featureFocusActionBarConnected flag, the bar/composer "connected" styling, and
defaulting it on. The engagement bar goes back to the always-floating pill —
the state at tag pr6211-fixes-ready.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 20, 2026 22:38
@tsahimatsliah @claude
fix(post): stop engagement-bar metrics flickering on mobile scroll
051aaff 
The bar's "stuck" treatment (counts / "…" menu / border-flip) is driven by an
IntersectionObserver that toggles on scroll regardless of breakpoint, but the
bar only actually floats from tablet up. On mobile it's a plain in-flow bar, so
that toggling just made the metrics flicker as you scrolled past it. Gate the
treatment behind a tablet check (isPinned = isStuck && isTablet) so it's
disabled on mobile.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): keep engagement bar stable below laptop, not just below ta…
1716e03 
…blet

The pinned "stuck" treatment (counts/menu/border-flip on scroll) was gated at
the tablet breakpoint (>= 656px), so it still toggled on tablet-width viewports.
Reserve it for the desktop experience (laptop and up, >= 1020px) so the bar
stays stable on phones and tablets; the counts already live in the stats row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(post): make comment sort a left-aligned text link
ec06a14 
Swap the "Newest first" sort toggle from a Button (whose padding pushed it off
the left edge, looking misaligned vs the comments) to a ClickableText text link
with the icon, so it sits flush-left with the rest of the discussion. Add mb-2
so it's not crowding the first comment.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(post): borderless composer trigger; unify action bar design acr…
5fc0171 
…oss sizes

- "Share your thoughts" composer trigger: drop the surface background in all
  states (default + hover), keeping only the border.
- Engagement action bar: use the same floating-pill design on every resolution
  (including the translucent surface background), instead of a plain in-flow bar
  on mobile. Sticky stays tablet-and-up only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 3 commits June 21, 2026 11:28
@tsahimatsliah @claude
fix(post): show floating action bar metrics from tablet up
d0c3bff 
Lower the pinned-metrics gate from laptop back to the tablet breakpoint where
the bar actually floats, so a long post that floats the bar at the bottom shows
its counts/menu inside it. Below tablet the bar is plain in-flow and stays
stable (no counts), which was the width that flickered on scroll.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(post): zoom-in animation + zoom cursor for the image lightbox
fb17177 
- Add an image-zoom-in keyframe/animation (scale 0.85 -> 1 + fade) and play it
  on the lightbox image so it grows into the full view when opened.
- Use the zoom-in (magnifying-glass) cursor on the clickable images — the post
  cover thumbnail and in-article markdown images — instead of the plain pointer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): only show the action-bar close (X) when pinned at the top
99b17f2 
When the bar floats at the bottom, the modal's top strip (with its own close)
is still on screen, so the bar's X is redundant there. Track the pin edge via
the sentinel's position relative to the viewport and show the X only when the
bar is pinned at the top. Counts and the "…" menu still show at either edge
(the menu is needed at the bottom once the header scrolls away).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(post): expand the image lightbox from the clicked thumbnail (FLIP)
afbb5a6 
Capture the clicked thumbnail's bounds (cover image + in-article markdown
images) and pass them to the lightbox, which starts the image transformed onto
that thumbnail and animates the transform away — so the original image appears
to move/resize up into the full view instead of a centered scale. Falls back to
the simple zoom-in when no origin is available.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): stop layout shift when opening the image lightbox
a906bd8 
- Compensate for the removed scrollbar with matching body padding while the
  lightbox is open, so the page (and the FLIP's captured origin rect) no longer
  jumps ~scrollbar-width sideways on open.
- Drive the FLIP start->identity over two animation frames so the transition
  plays smoothly instead of occasionally snapping.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah tsahimatsliah mentioned this pull request Jun 21, 2026
Open
@tsahimatsliah

tsahimatsliah commented Jun 21, 2026

Copy link
Copy Markdown
Member Author

Superseded by #6224 — the same changes rebased cleanly onto current main as a single reviewed commit set (preserving main's newer reader-variant logic on the Read button, dropping the reverted connected-bar experiment). All CI green there. Closing this mock-up PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tsahimatsliah