Add .visible_on_hover helper method (#3639)

This PR adds a `.visible_on_hover` helper method that can be used to
make an element only visible on hover.

I noticed we were repeating this similar stanza in a bunch of different
spots:

```rs
some_element
    .invisible()
    .group_hover("", |style| style.visible())
``` 

so it seemed like a nice thing to factor out into a reusable utility.

Release Notes:

- N/A

crates/ui2/src/components/list/list_header.rs

@@ -111,10 +111,9 @@ impl RenderOnce for ListHeader {
                 .when_some(self.end_hover_slot, |this, end_hover_slot| {
                     this.child(
                         div()
-                            .invisible()
-                            .group_hover("list_header", |this| this.visible())
                             .absolute()
                             .right_0()
+                            .visible_on_hover("list_header")
                             .child(end_hover_slot),
                     )
                 }),

crates/ui2/src/components/list/list_item.rs

@@ -198,8 +198,7 @@ impl RenderOnce for ListItem {
                             .flex()
                             .absolute()
                             .left(rems(-1.))
-                            .invisible()
-                            .group_hover("", |style| style.visible())
+                            .visible_on_hover("")
                             .child(Disclosure::new(is_open).on_toggle(self.on_toggle))
                     }))
                     .child(
@@ -226,8 +225,7 @@ impl RenderOnce for ListItem {
                                 .absolute()
                                 .right_2()
                                 .top_0()
-                                .invisible()
-                                .group_hover("list_item", |this| this.visible())
+                                .visible_on_hover("list_item")
                                 .child(end_hover_slot),
                         )
                     }),

crates/ui2/src/components/tab.rs

@@ -158,7 +158,6 @@ impl RenderOnce for Tab {
                     )
                     .child(
                         h_stack()
-                            .invisible()
                             .w_3()
                             .h_3()
                             .justify_center()
@@ -167,7 +166,7 @@ impl RenderOnce for Tab {
                                 TabCloseSide::Start => this.left_1(),
                                 TabCloseSide::End => this.right_1(),
                             })
-                            .group_hover("", |style| style.visible())
+                            .visible_on_hover("")
                             .children(self.end_slot),
                     )
                     .children(self.children),

crates/ui2/src/prelude.rs

@@ -9,6 +9,7 @@ pub use crate::clickable::*;
 pub use crate::disableable::*;
 pub use crate::fixed::*;
 pub use crate::selectable::*;
+pub use crate::visible_on_hover::*;
 pub use crate::{h_stack, v_stack};
 pub use crate::{Button, ButtonSize, ButtonStyle, IconButton};
 pub use crate::{ButtonCommon, Color, StyledExt};

crates/ui2/src/ui2.rs

@@ -21,6 +21,7 @@ mod selectable;
 mod styled_ext;
 mod styles;
 pub mod utils;
+mod visible_on_hover;
 
 pub use clickable::*;
 pub use components::*;
@@ -30,3 +31,4 @@ pub use prelude::*;
 pub use selectable::*;
 pub use styled_ext::*;
 pub use styles::*;
+pub use visible_on_hover::*;

crates/ui2/src/visible_on_hover.rs

@@ -0,0 +1,13 @@
+use gpui::{InteractiveElement, SharedString, Styled};
+
+pub trait VisibleOnHover: InteractiveElement + Styled + Sized {
+    /// Sets the element to only be visible when the specified group is hovered.
+    ///
+    /// Pass `""` as the `group_name` to use the global group.
+    fn visible_on_hover(self, group_name: impl Into<SharedString>) -> Self {
+        self.invisible()
+            .group_hover(group_name, |style| style.visible())
+    }
+}
+
+impl<E: InteractiveElement + Styled> VisibleOnHover for E {}