Display icon next to primary message

crates/diagnostics/src/diagnostics.rs

@@ -12,7 +12,9 @@ use gpui::{
     action, elements::*, keymap::Binding, AnyViewHandle, AppContext, Entity, ModelHandle,
     MutableAppContext, RenderContext, Task, View, ViewContext, ViewHandle, WeakViewHandle,
 };
-use language::{Bias, Buffer, DiagnosticEntry, Point, Selection, SelectionGoal};
+use language::{
+    Bias, Buffer, DiagnosticEntry, DiagnosticSeverity, Point, Selection, SelectionGoal,
+};
 use postage::watch;
 use project::{Project, ProjectPath};
 use std::{
@@ -353,6 +355,7 @@ impl ProjectDiagnosticsEditor {
                                     height: 2,
                                     render: diagnostic_header_renderer(
                                         message,
+                                        primary.severity,
                                         self.build_settings.clone(),
                                     ),
                                     disposition: BlockDisposition::Above,
@@ -661,7 +664,7 @@ fn path_header_renderer(buffer: ModelHandle<Buffer>, build_settings: BuildSettin
             path = file
                 .path()
                 .parent()
-                .map(|p| p.to_string_lossy().to_string());
+                .map(|p| p.to_string_lossy().to_string() + "/");
         }
 
         Flex::row()
@@ -690,7 +693,11 @@ fn path_header_renderer(buffer: ModelHandle<Buffer>, build_settings: BuildSettin
     })
 }
 
-fn diagnostic_header_renderer(message: String, build_settings: BuildSettings) -> RenderBlock {
+fn diagnostic_header_renderer(
+    message: String,
+    severity: DiagnosticSeverity,
+    build_settings: BuildSettings,
+) -> RenderBlock {
     enum Run {
         Text(Range<usize>),
         Code(Range<usize>),
@@ -722,8 +729,23 @@ fn diagnostic_header_renderer(message: String, build_settings: BuildSettings) ->
     Arc::new(move |cx| {
         let settings = build_settings(cx);
         let style = &settings.style.diagnostic_header;
+        let icon = if severity == DiagnosticSeverity::ERROR {
+            Svg::new("icons/diagnostic-error-10.svg")
+                .with_color(settings.style.error_diagnostic.text)
+        } else {
+            Svg::new("icons/diagnostic-warning-10.svg")
+                .with_color(settings.style.warning_diagnostic.text)
+        };
 
         Flex::row()
+            .with_child(
+                icon.constrained()
+                    .with_height(style.icon.width)
+                    .aligned()
+                    .contained()
+                    .with_style(style.icon.container)
+                    .boxed(),
+            )
             .with_children(runs.iter().map(|run| {
                 let container_style;
                 let text_style;

crates/editor/src/editor.rs

@@ -3853,6 +3853,7 @@ impl EditorSettings {
                             container: Default::default(),
                             text: text.clone(),
                         },
+                        icon: Default::default(),
                     },
                     error_diagnostic: Default::default(),
                     invalid_error_diagnostic: Default::default(),

crates/theme/src/theme.rs

@@ -277,6 +277,14 @@ pub struct DiagnosticHeader {
     pub container: ContainerStyle,
     pub text: TextStyle,
     pub highlighted_text: ContainedText,
+    pub icon: DiagnosticHeaderIcon,
+}
+
+#[derive(Clone, Deserialize, Default)]
+pub struct DiagnosticHeaderIcon {
+    #[serde(flatten)]
+    pub container: ContainerStyle,
+    pub width: f32,
 }
 
 #[derive(Copy, Clone, Deserialize, Default)]
@@ -352,6 +360,7 @@ impl InputEditorStyle {
                     container: Default::default(),
                     text: self.text.clone(),
                 },
+                icon: Default::default(),
             },
             error_diagnostic: Default::default(),
             invalid_error_diagnostic: Default::default(),

crates/zed/assets/icons/diagnostic-error-10.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM2.68306 3.56694L4.11612 5L2.68306 6.43306L3.56694 7.31694L5 5.88388L6.43306 7.31694L7.31694 6.43306L5.88388 5L7.31694 3.56694L6.43306 2.68306L5 4.11612L3.56694 2.68306L2.68306 3.56694Z" fill="#EF4444"/>
+</svg>

crates/zed/assets/icons/diagnostic-warning-10.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10H0V8L4.375 0H5.625L10 8V10ZM4.375 2.66667H5.625V6H4.375V2.66667ZM4.375 7.33333H5.625V8.66667H4.375V7.33333Z" fill="#FDE047"/>
+</svg>

crates/zed/assets/themes/_base.toml

@@ -258,12 +258,13 @@ invalid_hint_diagnostic = { text = "$text.3.color" }
 
 [editor.diagnostic_path_header]
 filename = { extends = "$text.0", size = 14 }
-path = { extends = "$text.1", size = 14, margin.left = 4 }
+path = { extends = "$text.2", size = 14, margin.left = 12 }
 
 [editor.diagnostic_header]
 background = "$state.active_line"
 border = { width = 1, top = true, bottom = true, color = "$border.0" }
 text = { extends = "$text.1", size = 14 }
+icon = { width = 10, margin.right = 8 }
 
 [editor.diagnostic_header.highlighted_text]
 extends = "$editor.diagnostic_header.text"