fix(visual-editor): show hovered component outlines when hovering the layers tab [ALT-673]

[primeinteger]

Purpose

This change revises the hoverComponent event to render the hover component outlines in the canvas when you are hovering over components in the layers tab.

Ticket: https://contentful.atlassian.net/browse/ALT-673

In this demo video, I start by hovering over components in the canvas, and then hover over components in the layers tab to show the same outlines being rendered in the canvas for both cases. Hover outlines are removed when moving the mouse to the "blank" area of the canvas or other parts of the UI.

Screen.Recording.2024-04-25.at.2.46.36.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
experience-builder-test-app	✅ Ready (Inspect)	Visit Preview	Apr 25, 2024 9:02pm

[ryunsong-contentful]

Overall looks good to me. The only question I have is there's no way to get into a de-selected state in the Layers tab. I physically have to use the canvas for that. Probably a separate issue but could be a nice quick follow up or added in this PR where I can click in the white space of the layers tab and get into a clean de-selected mode. (This is probably a UI change rather than in EB)

[primeinteger]

Overall looks good to me. The only question I have is there's no way to get into a de-selected state in the Layers tab. I physically have to use the canvas for that. Probably a separate issue but could be a nice quick follow up or added in this PR where I can click in the white space of the layers tab and get into a clean de-selected mode. (This is probably a UI change rather than in EB)

That's exactly what https://github.com/contentful/user_interface/pull/20912 does!

[chasepoirier]

Looks great! Love seeing a net decrease in lines of code with this 🤌