Connect the Movie Card Heart

Connect the smaller heart control inside MovieCard to the same context without allowing the click to trigger the surrounding movie link.

Step 1 — Read the wishlist state

Add the context import and derive the saved state for the current movie.

const { isSaved, toggle } = useWishlist();
const saved = isSaved(movie.id);

Step 2 — Replace the decorative heart

Use a real button and switch the character between ♥ and ♡ based on the saved state.

{saved ? "♥" : "♡"}

Step 3 — Stop the card navigation

Because the heart is inside a Link, prevent its click from reaching the link before toggling the wishlist.

onClick={(e) => {
  e.preventDefault();
  e.stopPropagation();
  toggle(movie.id);
}}

Checkpoint

Click the heart on a browse card. The heart should fill without navigating away, and opening the same movie detail page should show the same saved state.