Show a clickable jump icon for each diagnostic group header

assets/icons/jump.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 1.02501V6.27499C7.5 6.56484 7.26484 6.79999 6.975 6.79999C6.68516 6.79999 6.45 6.56484 6.45 6.27499V2.29157L1.3969 7.34468C1.29365 7.44968 1.15934 7.49999 1.02503 7.49999C0.890713 7.49999 0.756401 7.44871 0.653808 7.34619C0.448731 7.14111 0.448731 6.80894 0.653808 6.60375L5.70844 1.55001H1.72502C1.43518 1.55001 1.20002 1.31595 1.20002 1.02501C1.20002 0.734077 1.43518 0.500015 1.72502 0.500015H6.975C7.26594 0.500015 7.5 0.736264 7.5 1.02501Z" fill="white" fill-opacity="0.6"/>
+</svg>

crates/diagnostics/src/diagnostics.rs

@@ -8,9 +8,9 @@ use editor::{
     highlight_diagnostic_message, Autoscroll, Editor, ExcerptId, MultiBuffer, ToOffset,
 };
 use gpui::{
-    actions, elements::*, fonts::TextStyle, serde_json, AnyViewHandle, AppContext, Entity,
+    actions, elements::*, fonts::TextStyle, platform::CursorStyle, serde_json, AnyViewHandle,
-    ModelHandle, MutableAppContext, RenderContext, Task, View, ViewContext, ViewHandle,
+    AppContext, Entity, ModelHandle, MutableAppContext, RenderContext, Task, View, ViewContext,
-    WeakViewHandle,
+    ViewHandle, WeakViewHandle,
 };
 use language::{
     Bias, Buffer, Diagnostic, DiagnosticEntry, DiagnosticSeverity, Point, Selection, SelectionGoal,
@@ -576,11 +576,13 @@ impl workspace::Item for ProjectDiagnosticsEditor {
 }
 
 fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
+    enum JumpIcon {}
+
     let (message, highlights) = highlight_diagnostic_message(&diagnostic.message);
     Arc::new(move |cx| {
         let settings = cx.global::<Settings>();
         let theme = &settings.theme.editor;
-        let style = &theme.diagnostic_header;
+        let style = theme.diagnostic_header.clone();
         let font_size = (style.text_scale_factor * settings.buffer_font_size).round();
         let icon_width = cx.em_width * style.icon_width_factor;
         let icon = if diagnostic.severity == DiagnosticSeverity::ERROR {
@@ -591,6 +593,7 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
                 .with_color(theme.warning_diagnostic.message.text.color)
         };
 
+        let x_padding = cx.gutter_padding + cx.scroll_x * cx.em_width;
         Flex::row()
             .with_child(
                 icon.constrained()
@@ -618,9 +621,33 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
                     .aligned()
                     .boxed()
             }))
+            .with_child(
+                MouseEventHandler::new::<JumpIcon, _, _>(0, cx, |state, _| {
+                    let style = style.jump_icon.style_for(state, false);
+                    Svg::new("icons/jump.svg")
+                        .with_color(style.color)
+                        .constrained()
+                        .with_width(style.icon_width)
+                        .aligned()
+                        .contained()
+                        .with_style(style.container)
+                        .constrained()
+                        .with_width(style.button_width)
+                        .with_height(style.button_width)
+                        .boxed()
+                })
+                .with_cursor_style(CursorStyle::PointingHand)
+                .on_click(|_, _, cx| {
+                    dbg!("click!");
+                })
+                .aligned()
+                .flex_float()
+                .boxed(),
+            )
             .contained()
             .with_style(style.container)
-            .with_padding_left(cx.gutter_padding + cx.scroll_x * cx.em_width)
+            .with_padding_left(x_padding)
+            .with_padding_right(x_padding)
             .expanded()
             .named("diagnostic header")
     })

crates/theme/src/theme.rs

@@ -317,7 +317,7 @@ pub struct Icon {
     pub path: String,
 }
 
-#[derive(Deserialize, Default)]
+#[derive(Clone, Deserialize, Default)]
 pub struct IconButton {
     #[serde(flatten)]
     pub container: ContainerStyle,
@@ -461,6 +461,7 @@ pub struct DiagnosticHeader {
     pub code: ContainedText,
     pub text_scale_factor: f32,
     pub icon_width_factor: f32,
+    pub jump_icon: Interactive<IconButton>,
 }
 
 #[derive(Clone, Deserialize, Default)]

styles/src/styleTree/editor.ts

@@ -98,6 +98,14 @@ export default function editor(theme: Theme) {
       background: backgroundColor(theme, 300),
       iconWidthFactor: 1.5,
       textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
+      jumpIcon: {
+        color: iconColor(theme, "primary"),
+        iconWidth: 10,
+        buttonWidth: 10,
+        hover: {
+          color: iconColor(theme, "active")
+        }
+      },
       border: border(theme, "secondary", {
         bottom: true,
         top: true,