update tabbar

crates/ui/src/tab/mod.rs

@@ -3,9 +3,9 @@ use std::rc::Rc;
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
     AnyElement, App, ClickEvent, Div, InteractiveElement, IntoElement, MouseButton, ParentElement,
-    RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window, div, px, relative,
+    RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window, div, px,
 };
-use theme::{ActiveTheme, TABBAR_HEIGHT};
+use theme::ActiveTheme;
 
 use crate::{Icon, IconName, Selectable, h_flex};
 
@@ -190,7 +190,7 @@ impl RenderOnce for Tab {
             ..
         } = self;
 
-        let fg = if disabled {
+        let foreground = if disabled {
             cx.theme().text_muted
         } else if selected {
             cx.theme().tab_active_foreground
@@ -200,20 +200,12 @@ impl RenderOnce for Tab {
 
         let content = h_flex()
             .flex_1()
-            .map(|this| {
-                if segmented {
-                    this.h(px(24.))
-                } else {
-                    this.h(px(30.))
-                }
-            })
-            .line_height(relative(1.))
+            .h_6()
             .whitespace_nowrap()
             .items_center()
-            .justify_center()
             .overflow_hidden()
-            .when(segmented, |this| this.px_1())
-            .when(!segmented, |this| this.flex_shrink_0().px_3())
+            .when(segmented, |this| this.justify_center().px_1())
+            .when(!segmented, |this| this.justify_start())
             .map(|this| match icon {
                 Some(icon) => this.w(px(38.)).child(icon.size_4()),
                 None => this
@@ -225,13 +217,14 @@ impl RenderOnce for Tab {
             });
 
         base.id(ix)
+            .group("tab")
             .flex()
             .items_center()
-            .text_color(fg)
+            .text_color(foreground)
             .when(segmented, |this| {
                 this.text_xs()
                     .flex_1()
-                    .h(px(24.))
+                    .h_6()
                     .rounded(cx.theme().radius)
                     .when(selected && !disabled, |this| {
                         this.bg(cx.theme().tab_active_background)
@@ -242,18 +235,35 @@ impl RenderOnce for Tab {
                     })
             })
             .when(!segmented, |this| {
-                this.text_sm()
-                    .flex_wrap()
+                this.flex_shrink_0()
+                    .min_w_32()
+                    .h_7()
                     .gap_1()
-                    .flex_shrink_0()
-                    .h(TABBAR_HEIGHT)
-                    .relative()
+                    .px_1p5()
+                    .text_sm()
+                    .rounded(cx.theme().radius)
                     .overflow_hidden()
+                    .when(selected && !disabled, |this| {
+                        this.bg(cx.theme().tab_background)
+                    })
+                    .when(!selected && !disabled, |this| {
+                        this.hover(|this| {
+                            this.bg(cx.theme().tab_hover_background)
+                                .text_color(cx.theme().tab_active_foreground)
+                        })
+                    })
             })
             .when_some(prefix, |this, prefix| this.child(prefix))
             .child(content)
             .when_some(suffix, |this, suffix| {
-                this.child(div().pr_2().child(suffix))
+                this.child(
+                    div()
+                        .flex_shrink_0()
+                        .when(!selected, |this| {
+                            this.invisible().group_hover("tab", |this| this.visible())
+                        })
+                        .child(suffix),
+                )
             })
             .on_mouse_down(MouseButton::Left, |_ev, _window, cx| {
                 cx.stop_propagation();
@@ -263,23 +273,5 @@ impl RenderOnce for Tab {
                     this.on_click(move |event, window, cx| on_click(event, window, cx))
                 })
             })
-            .when(!segmented, |this| {
-                this.child(
-                    div()
-                        .absolute()
-                        .bottom_0()
-                        .left_0()
-                        .right_0()
-                        .h_0p5()
-                        .when(selected && !disabled, |this| {
-                            this.bg(cx.theme().element_active)
-                        })
-                        .when(!selected && !disabled, |this| {
-                            this.invisible().group_hover("", |this| {
-                                this.visible().bg(cx.theme().secondary_background)
-                            })
-                        }),
-                )
-            })
     }
 }