Reveal close glyph on sidebar launcher hover

Each sidebar launcher row now ships with a 16 px close glyph that fades
in via group_hover. Clicking the glyph selects the row's tab then
closes the active tab — the same flow the split pane close uses.
Matches the design's .ely-nav-item .close opacity-0 → 1 transition
without keeping the X visible at rest.
This commit is contained in:
2026-05-09 19:05:55 -04:00
parent bf41ec3dd1
commit 68e784daf8
@@ -214,14 +214,18 @@ impl ElyShell {
cx: &mut Context<Self>, cx: &mut Context<Self>,
) -> AnyElement { ) -> AnyElement {
let tab_id = tab.id().clone(); let tab_id = tab.id().clone();
let close_tab_id = tab.id().clone();
let bg_color = if active { ACTIVE_NAV_BG } else { 0x00000000 }; let bg_color = if active { ACTIVE_NAV_BG } else { 0x00000000 };
let text_color = if active { colors::INK } else { colors::INK_2 }; let text_color = if active { colors::INK } else { colors::INK_2 };
let host = tab.url().host().map(|host| host.to_string()); let host = tab.url().host().map(|host| host.to_string());
let title = tab.title().to_string(); let title = tab.title().to_string();
let initial = title.chars().next().unwrap_or('?').to_string(); let initial = title.chars().next().unwrap_or('?').to_string();
let group_name = SharedString::from(format!("launcher-{}", tab.id().as_str()));
let close_id = SharedString::from(format!("launcher-close-{}", tab.id().as_str()));
div() div()
.id(SharedString::from(format!("nav-{}", tab.id().as_str()))) .id(SharedString::from(format!("nav-{}", tab.id().as_str())))
.group(group_name.clone())
.rounded(px(spacing::RADIUS_NAV)) .rounded(px(spacing::RADIUS_NAV))
.px(px(10.0)) .px(px(10.0))
.py(px(7.0)) .py(px(7.0))
@@ -248,6 +252,25 @@ impl ElyShell {
.text_color(rgb(text_color)) .text_color(rgb(text_color))
.child(title), .child(title),
) )
.child(
div()
.id(close_id)
.size(px(16.0))
.rounded(px(4.0))
.flex()
.items_center()
.justify_center()
.text_color(rgb(colors::INK_4))
.opacity(0.0)
.group_hover(group_name, |style| style.opacity(1.0))
.hover(|style| style.bg(rgba(0x281e1414)).text_color(rgb(colors::INK)))
.cursor_pointer()
.on_click(cx.listener(move |shell, _, window, cx| {
shell.select_tab(&close_tab_id, window, cx);
shell.close_active_tab(window, cx);
}))
.child(IconName::Close),
)
.into_any_element() .into_any_element()
} }