Before this commit, new livechat status feature has some usability issues:

- icons of status were poor: `.fa-circle` is not unique enough and looks like IM status
- icons were inconsistent: info panel uses different icons
- info panel buttons do not look good: text not aligned, border too harsh with strange spacing, etc.
- feature is cumbersome to use: can only be changed in panel, so lots of clicks when not in discuss app and conversation not selected.
- feature was not displayed in some contexts like chat bubbles
- livechat status not easy to see in discuss sidebar when next to unread counter

This commit makes the following improvements to livechat status feature:
- new icons for livechat status
- better button style in panel
- livechat status is visible in all context with proper style
- can quickly change livechat status from thread actions, including discuss sidebar more actions
- livechat icon is floating in top-left of avatar for better visibility of status (exception: chat window is before avatar for space constraints)

Before 
<img width="901" alt="before" src="https://github.com/user-attachments/assets/4b5919c8-32bc-4db6-aa92-82d6b0dcf54f" />

After
<img width="896" alt="Screenshot 2025-06-25 at 16 30 52" src="https://github.com/user-attachments/assets/2bf20825-f3a7-4ea4-a1f8-2e63b882dfde" />
<img width="67" alt="Screenshot 2025-06-24 at 17 45 55" src="https://github.com/user-attachments/assets/0d1fd50f-30d7-4b5a-a473-255bccf1e4c0" />


----

With the addition of quick action to change livechat status, this commit adds these new features:

1. thread action icons can be defined in dedicate templates, for more creativity in making icon than `.fa` and `.oi` classnames.
2. useHover() now works with nested overlay: this works by warping dropdown content in a `<UseHoverOverlay hover="hover">` component.

---

Technical details of useHover nested overlay improvement:
To make it work, the content of 1st dropdown should be wrapped in a `<UseHoverOverlay>` component and provide the `hover` object of `useHover()`. The overlay content is put in slot of this component.

This `<UseHoverOverlay>` component works by helping `hover` object to make use of `contains()` function of overlay, which tells precisely if a target is inside the overlay including nested dropdowns.

Note that sub-dropdowns menu can optionally have `<UseHoverOverlay>`:
- without it, they are persistently displayed until click away or mouseleave from parented dropdown (if has `useHoverOverlay`)
- with it: mouse-leave on it outside of whole overlay closes all the related overlays.

This commit also do some related code-cleaning with useHover:
- "*" suffix syntax is removed. This was used as a way to get the direct parent element of ref. Floating menu were disappearing immediately `onAway`, but there's a global 100ms now so we don't need 2 hover triggers to be exactly next to each other