The previous version of the FRCDesignApp (which is live in production right now) has hover logic tied to the Favorite button to make the behavior when adding/removing favorites clearer.
The current issue is that hovering the Favorite button causes it to show the state it will become when you click it. For example, hovering the favorite button of a part you've favorited will change the button to show the heart broken state, as clicking the favorite button will cause the favorite to be removed.
This logic, however, causes a problem when you actually click the button since the app instantly makes the change (e.g., the part is no longer favorited) which in turn updates the preview logic to preview the new state (clicking the button will re-favorite the part). This is confusing since it thus looks like your click had no effect.
If you're still not sure what I'm talking about, try toggling some favorites in the current dev build vs. the FRCDesignApp in production and pay attention to the button states as you toggle the favorite).
To fix this issue, the old version of the app included a state machine and custom hover handlers to track when the user has hovered/unhovered the button, which allowed us to manually override the preview logic when the button was clicked but the user hasn't un-hovered the button.
The logic for all of this should live in FavoriteButton.tsx inside the FavoriteButton component. You can see what the old logic was by looking at FavoriteButton.tsx in the production branch.
As a bonus sidequest, note the existing logic probably shouldn't be copied 1:1 since it had a bug where clicking on the button on mobile (not a real use case today, but hey, you never know) would trigger both mouse down and on hover (but never the hover leave), and so the button would get stuck in the wrong state. Not something to worry too much about, but if you can figure out a solution all the better.
The previous version of the FRCDesignApp (which is live in production right now) has hover logic tied to the Favorite button to make the behavior when adding/removing favorites clearer.
The current issue is that hovering the Favorite button causes it to show the state it will become when you click it. For example, hovering the favorite button of a part you've favorited will change the button to show the heart broken state, as clicking the favorite button will cause the favorite to be removed.
This logic, however, causes a problem when you actually click the button since the app instantly makes the change (e.g., the part is no longer favorited) which in turn updates the preview logic to preview the new state (clicking the button will re-favorite the part). This is confusing since it thus looks like your click had no effect.
If you're still not sure what I'm talking about, try toggling some favorites in the current dev build vs. the FRCDesignApp in production and pay attention to the button states as you toggle the favorite).
To fix this issue, the old version of the app included a state machine and custom hover handlers to track when the user has hovered/unhovered the button, which allowed us to manually override the preview logic when the button was clicked but the user hasn't un-hovered the button.
The logic for all of this should live in FavoriteButton.tsx inside the FavoriteButton component. You can see what the old logic was by looking at FavoriteButton.tsx in the production branch.
As a bonus sidequest, note the existing logic probably shouldn't be copied 1:1 since it had a bug where clicking on the button on mobile (not a real use case today, but hey, you never know) would trigger both mouse down and on hover (but never the hover leave), and so the button would get stuck in the wrong state. Not something to worry too much about, but if you can figure out a solution all the better.