Repository navigation
Show article read status on grid cards and unify card overlays - #704
Merged
Merged
Conversation
Platform badges, book status badge, bottom tags (GIF, duration, price, page count) and play indicators now share one surface, inset and em sizing via CardCornerBadge / CardTag / CardPlayIndicator, so they scale with grid density and match across kinds. Price and page count were fixed px; video badges were brand-coloured; the book badge was larger. Text-only tweets pad the author row so a long name truncates before the X badge. Amp-Thread-ID: https://ampcode.com/threads/T-01a1dc41-2136-774d-8d32-d3af4eded62a
Owners see an Unread (dot) / Read (check) corner badge on article cards, with the label on hover, matching the book status badge. Coverless article titles reserve room for the badge, mirrored in the frame estimate so the reserved height stays correct for every viewer. Adds a Grid/CardOverlays story showing every overlay, and CardFit cases for a long-title article and webpage. Amp-Thread-ID: https://ampcode.com/threads/T-01a1dc41-2136-774d-8d32-d3af4eded62a
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
All reported issues were addressed across 14 files
Reply with feedback, questions, or to request a fix.
View guided diff | Turn on auto-fix | Re-trigger cubic
Rooms keep their items in local state, so a read toggle or book status change saved from the dialog left the room card's badge stale. Items the API returns through useReplaceCachedItem now also reach subscribed local lists (useOnReplacedCachedItem); the room merges them, keeping its own roomItemId and room addedAt. Also: reduced-motion guard on the play indicator's hover scale, a real TwitterCard GIF in the overlay story, and a precise titleInset doc. Amp-Thread-ID: https://ampcode.com/threads/T-01a1dc41-2136-774d-8d32-d3af4eded62a
There was a problem hiding this comment.
All reported issues were addressed across 6 files (changes from recent commits).
Reply with feedback, questions, or to request a fix.
View guided diff | Turn on auto-fix | Re-trigger cubic
The room listener now fires from replaceCachedItem, so retry/reassign refreshes (useRefreshCachedItems) reach the room too, and the room skips a copy older than its own (isNewer), as the caches do, so an out-of-order save can't revert a badge.
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
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 & why
Grid cards didn't show whether an article had been read, and the overlays cards draw differed by kind: YouTube/Vimeo badges were brand-coloured while X/Instagram were translucent black, the book status badge was larger, product price and document page-count tags were fixed px (not scaling with grid density) with a different radius and opacity from the GIF/duration tags, and the tweet play button was fixed px while the video one scaled.
components/ui/card-overlay.tsx):CardCornerBadge(top right, optional hover label),CardTag(bottom corners) andCardPlayIndicator, with one surface (bg-black/60+ blur), one inset and em sizing. Tweets, Instagram, video, book status, product price and document page count all use them. Text-only tweets pad the author row so a long name truncates before the X badge.ARTICLE_TITLE_BADGE_INSET_EM). The frame estimate can't tell who's viewing, so every article reserves it, andcard-frame.tsmirrors it so reserved heights stay right.Checklist
.env.example, in-app help,CONTRIBUTING.md, onboarding checklist), or N/A: N/A, no help page covers grid card badges or article read status todaycaptureServerException/ the error boundary, or N/A: N/A, no new error pathsArticleReadStatusBadgeRTL test (read/unread branch + accessible label);Grid/CardFitstories gain a long-title article (title inset) and a webpage (no inset) case so the estimate can't drift; newGrid/CardOverlaysstory renders every overlayrecord-pr-demoskill); refactor through a user flow → parity run, or N/A: before/after belowlearnskill, or N/A: N/A, not a defect fixDemo
Same seeded grid on both takes (3 articles, the third already read; a text tweet; a YouTube video; a book), pointer visiting each corner badge.
❌ Before
pr-card-overlays-before.mp4
✅ After
pr-card-overlays-after.mp4
Notes
bun run check:fix, full unit suite (bun run test), and the storybook tests forGrid/CardFit,Grid/CardOverlays, item card states, tweet/article/book stories. Checked light, dark and a 0.75 grid font scale in the overlay story, plus the hover label (headless Chrome needs a hover-capable pointer emulated forhover:styles).read_atthen 500s on the room-sync trigger, which is an existing issue unrelated to this PR.