Start re-styling diagnostic indicator in status bar

crates/diagnostics/src/items.rs

@@ -1,4 +1,3 @@
-use crate::render_summary;
 use gpui::{
     elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext, View,
     ViewContext,
@@ -50,19 +49,91 @@ impl View for DiagnosticSummary {
         enum Tag {}
 
         let in_progress = self.in_progress;
-        MouseEventHandler::new::<Tag, _, _>(0, cx, |_, cx| {
-            let theme = &cx.global::<Settings>().theme.project_diagnostics;
-            if in_progress {
-                Label::new(
-                    "Checking... ".to_string(),
-                    theme.status_bar_item.text.clone(),
-                )
-                .contained()
-                .with_style(theme.status_bar_item.container)
-                .boxed()
+        MouseEventHandler::new::<Tag, _, _>(0, cx, |state, cx| {
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .workspace
+                .status_bar
+                .diagnostics;
+            let summary_style = if self.summary.error_count > 0 {
+                if state.hovered {
+                    &style.summary_error_hover
+                } else {
+                    &style.summary_error
+                }
+            } else if self.summary.warning_count > 0 {
+                if state.hovered {
+                    &style.summary_warning_hover
+                } else {
+                    &style.summary_warning
+                }
+            } else if state.hovered {
+                &style.summary_ok_hover
             } else {
-                render_summary(&self.summary, &theme.status_bar_item.text, &theme)
+                &style.summary_ok
+            };
+
+            let mut row = Flex::row();
+            if self.summary.error_count > 0 {
+                row.add_children([
+                    Svg::new("icons/error-solid-14.svg")
+                        .with_color(style.icon_color_error)
+                        .constrained()
+                        .with_width(style.icon_width)
+                        .aligned()
+                        .contained()
+                        .with_margin_right(style.icon_spacing)
+                        .named("error-icon"),
+                    Label::new(
+                        self.summary.error_count.to_string(),
+                        summary_style.text.clone(),
+                    )
+                    .aligned()
+                    .boxed(),
+                ]);
             }
+
+            if self.summary.warning_count > 0 {
+                row.add_children([
+                    Svg::new("icons/warning-solid-14.svg")
+                        .with_color(style.icon_color_warning)
+                        .constrained()
+                        .with_width(style.icon_width)
+                        .aligned()
+                        .contained()
+                        .with_margin_right(style.icon_spacing)
+                        .with_margin_left(if self.summary.error_count > 0 {
+                            style.summary_spacing
+                        } else {
+                            0.
+                        })
+                        .named("warning-icon"),
+                    Label::new(
+                        self.summary.warning_count.to_string(),
+                        summary_style.text.clone(),
+                    )
+                    .aligned()
+                    .boxed(),
+                ]);
+            }
+
+            if self.summary.error_count == 0 && self.summary.warning_count == 0 {
+                row.add_child(
+                    Svg::new("icons/no-error-solid-14.svg")
+                        .with_color(style.icon_color_ok)
+                        .constrained()
+                        .with_width(style.icon_width)
+                        .aligned()
+                        .named("ok-icon"),
+                );
+            }
+
+            row.constrained()
+                .with_height(style.height)
+                .contained()
+                .with_style(summary_style.container)
+                .boxed()
         })
         .with_cursor_style(CursorStyle::PointingHand)
         .on_click(|cx| cx.dispatch_action(crate::Deploy))

crates/theme/src/theme.rs

@@ -147,11 +147,35 @@ pub struct StatusBar {
     pub lsp_message: TextStyle,
     pub auto_update_progress_message: TextStyle,
     pub auto_update_done_message: TextStyle,
-    pub sidebar_items_left: ContainerStyle,
-    pub sidebar_items_right: ContainerStyle,
-    pub sidebar_item: SidebarItem,
-    pub sidebar_item_active: SidebarItem,
-    pub sidebar_item_hover: SidebarItem,
+    pub sidebar_buttons: StatusBarSidebarButtons,
+    pub diagnostics: StatusBarDiagnostics,
+}
+
+#[derive(Deserialize, Default)]
+pub struct StatusBarSidebarButtons {
+    pub group_left: ContainerStyle,
+    pub group_right: ContainerStyle,
+    pub item: SidebarItem,
+    pub item_active: SidebarItem,
+    pub item_hover: SidebarItem,
+}
+
+#[derive(Deserialize, Default)]
+pub struct StatusBarDiagnostics {
+    pub message: ContainedText,
+    pub summary_ok: ContainedText,
+    pub summary_ok_hover: ContainedText,
+    pub summary_warning: ContainedText,
+    pub summary_warning_hover: ContainedText,
+    pub summary_error: ContainedText,
+    pub summary_error_hover: ContainedText,
+    pub icon_color_ok: Color,
+    pub icon_color_error: Color,
+    pub icon_color_warning: Color,
+    pub height: f32,
+    pub icon_width: f32,
+    pub icon_spacing: f32,
+    pub summary_spacing: f32,
 }
 
 #[derive(Deserialize, Default)]
@@ -165,7 +189,6 @@ pub struct SidebarItem {
     pub container: ContainerStyle,
     pub icon_color: Color,
     pub icon_size: f32,
-    pub height: f32,
 }
 
 #[derive(Deserialize, Default)]

crates/workspace/src/sidebar.rs

@@ -175,16 +175,21 @@ impl View for SidebarButtons {
     }
 
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
-        let theme = &cx.global::<Settings>().theme.workspace.status_bar;
+        let theme = &cx
+            .global::<Settings>()
+            .theme
+            .workspace
+            .status_bar
+            .sidebar_buttons;
         let sidebar = self.sidebar.read(cx);
-        let item_style = theme.sidebar_item;
-        let hover_item_style = theme.sidebar_item_hover;
-        let active_item_style = theme.sidebar_item_active;
+        let item_style = theme.item;
+        let hover_item_style = theme.item_hover;
+        let active_item_style = theme.item_active;
         let active_ix = sidebar.active_item_ix;
         let side = sidebar.side;
         let group_style = match side {
-            Side::Left => theme.sidebar_items_left,
-            Side::Right => theme.sidebar_items_right,
+            Side::Left => theme.group_left,
+            Side::Right => theme.group_right,
         };
         let items = sidebar.items.clone();
         Flex::row()