Fix/model selector improvements

[actopas]

Fix ModelSelector hover issues and HoverCard flicker

Hi, This PR addresses the issues reported in #5380, improving the user experience of the ModelSelector component.

Changes

1. Fixed mouse hover event in ModelItem:

   • Added a stable div wrapper with ref to ModelItem
   • Implemented useEffect to manage mouseenter event listener
   • Ensured proper event listener cleanup on component unmount

2. Eliminated HoverCard flicker in ModelSelector:

   • Added noAnimation prop to HoverCardContent
   • Set noAnimation to true for ModelSelector's HoverCard

Impact

These changes resolve two main issues:

1. The hover state now correctly updates when moving between model items, even after filtering results.
2. The HoverCard no longer flickers or shows unnecessary animation when interacting with the ModelSelector.

Testing

• Tested hover functionality with various filter scenarios
• Verified HoverCard stability across different interaction patterns
• Ensured no regression in existing ModelSelector functionality

Screenshots

Check out

Additional Notes

This PR maintains the existing code structure while addressing the reported issues. The changes are minimal and focused on resolving specific problems without introducing new dependencies or major refactoring.

Closes #5380

[vercel]

@actopas is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[Lexachoc]

@actopas Thank you for the PR. I jsut tested it. it works!

I noticed that the built-in keyboard navigation on the items does not trigger HoverCard.
Could you please support this? many thanks!

[Lexachoc]

@actopas I modified your good solution and now it supports the keyboard navigation!

No UseEffect. Just modify a bit of the original code

useMutationObserver(ref, (mutations) => {
    mutations.forEach((mutation) => {
        if (
            mutation.type === "attributes" &&
            mutation.attributeName === "aria-selected" &&
            ref.current.children[0]?.getAttribute("aria-selected") === "true"
        ) {
            onPeek(model)
        }
    })
})

change

ref.current?.getAttribute("aria-selected") === "true"

to

ref.current.children[0]?.getAttribute("aria-selected") === "true"

[actopas]

@Lexachoc Thank you for your review. To reduce code changes and fix the missing feature of keyboard navigation, I switched useEffect back to useMutationObserver. Now the feature is working well.