Glow watched items in calendar with green#1729
Merged
IgnisDa merged 3 commits intoIgnisDa:mainfrom Mar 21, 2026
Merged
Conversation
Contributor
WalkthroughAdds a computed "watched" flag for calendar events inside the metadata display component, passes show/podcast extra info from the calendar route into metadata display, and updates the entity card to use a green shadow and suppress its border when a calendar event is watched. Changes
Sequence DiagramsequenceDiagram
participant CalendarRoute as CalendarEventMetadata
participant MetadataComp as MetadataDisplayItem
participant MetadataHook as useUserMetadataDetails
participant EntityCard as BaseEntityDisplayItemCard
CalendarRoute->>MetadataComp: render with calendarEventShowInfo, calendarEventPodcastInfo
MetadataComp->>MetadataHook: request userMetadataDetails for metadataId
MetadataHook-->>MetadataComp: return userMetadataDetails
MetadataComp->>MetadataComp: compute isCalendarEventWatched<br/>(match show season/episode or podcast episode -> timesSeen>0)
MetadataComp->>EntityCard: pass props including isCalendarEventWatched
rect rgba(0,200,0,0.5)
EntityCard->>EntityCard: apply watched styling (green shadow) and suppress border
end
EntityCard-->>MetadataComp: render styled card
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip You can enable review details to help with troubleshooting, context usage and more.Enable the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/frontend/app/components/common/entity-display.tsx`:
- Line 309: The local constant isCalendarEventWatched is a redundant passthrough
of props.isCalendarEventWatched; remove the const and use
props.isCalendarEventWatched directly where referenced (e.g., inside the
cardStyle memo's boxShadow, the memo dependency array, and the withBorder prop).
Specifically, delete the line declaring isCalendarEventWatched, change boxShadow
to use props.isCalendarEventWatched, update the memo dependency array to include
props.isCalendarEventWatched instead of the removed identifier, and set
withBorder to !shouldHighlightImage && !props.isCalendarEventWatched.
In `@apps/frontend/app/routes/_dashboard.calendar.tsx`:
- Around line 113-115: Duplicate React Query subscriptions occur because
useUserMetadataDetails is called here while MetadataDisplayItem also calls it;
move the isCalendarEventWatched logic into MetadataDisplayItem or create a
shared hook (e.g., useCalendarEventWatched) that both components call so only
one source fetches userMetadataDetails, and add the same enabled/inViewport
gating used in MetadataDisplayItem to the hook call (useUserMetadataDetails) so
fetching is lazy—locate references to MetadataDisplayItem,
useUserMetadataDetails, isCalendarEventWatched, inViewport and
props.item.metadataId to implement the change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 360f6f11-f6ce-4d28-bfee-7509d390a26d
📒 Files selected for processing (3)
apps/frontend/app/components/common/entity-display.tsxapps/frontend/app/components/media/display-items.tsxapps/frontend/app/routes/_dashboard.calendar.tsx
Owner
|
Made some small re-ordering changes, rest looks good. Will merge this soon. Thanks for the PR! |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/frontend/app/components/media/display-items.tsx`:
- Around line 7-8: The two new type imports are out of alphabetical order; swap
the specifiers so SeenPodcastExtraInformationPartFragment comes before
SeenShowExtraInformationPartFragment in the import list (update the import line
in display-items.tsx that currently contains type
SeenShowExtraInformationPartFragment, type
SeenPodcastExtraInformationPartFragment to the correct alphabetical order).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 2cf4f93c-7a84-4a31-b884-232c2936efc6
📒 Files selected for processing (2)
apps/frontend/app/components/common/entity-display.tsxapps/frontend/app/components/media/display-items.tsx
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
2 participants
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.
This is another "watched" quality of life add.
I previously asked for this feature, but decided to just contribute it.
Tl; dr - the bigger library gets the bigger calendar gets. Right now the only way in calendar to find out what you still need to watch is to either compare next vs upcoming episodes for shows/animes, or for movies to look at explicit finished checkmark.
This change does slightly different approach - it adds green glow around items that you have watched >0 times this way allowing you to see explicitly what you didn't watch yet (effectively the NON-green glowing items).
Example:
Summary by CodeRabbit