Combine diagnostic status w/ diagnostic message indicators

Max Brunsfeld created

Improve the indicator styling

Change summary

assets/themes/cave-dark.json         |  55 ++---
assets/themes/cave-light.json        |  55 ++---
assets/themes/dark.json              |  55 ++---
assets/themes/light.json             |  55 ++---
assets/themes/solarized-dark.json    |  55 ++---
assets/themes/solarized-light.json   |  55 ++---
assets/themes/sulphurpool-dark.json  |  55 ++---
assets/themes/sulphurpool-light.json |  55 ++---
crates/diagnostics/src/items.rs      | 256 ++++++++++++++++++-----------
crates/editor/src/items.rs           |  74 --------
crates/zed/src/zed.rs                |   4 
styles/src/styleTree/workspace.ts    |  23 +-
12 files changed, 366 insertions(+), 431 deletions(-)

Detailed changes

assets/themes/cave-dark.json πŸ”—

@@ -173,7 +173,7 @@
     },
     "status_bar": {
       "height": 24,
-      "item_spacing": 8,
+      "item_spacing": 12,
       "padding": {
         "left": 6,
         "right": 6
@@ -212,30 +212,30 @@
       "diagnostics": {
         "height": 16,
         "summary_ok": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#e2dfe7",
           "size": 14
         },
         "summary_ok_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#e2dfe7",
           "size": 14
         },
         "summary_warning": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#e2dfe7",
@@ -247,10 +247,10 @@
           }
         },
         "summary_warning_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#e2dfe7",
@@ -262,10 +262,10 @@
           }
         },
         "summary_error": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#e2dfe7",
@@ -277,10 +277,10 @@
           }
         },
         "summary_error_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#e2dfe7",
@@ -296,7 +296,7 @@
           "color": "#8b8792",
           "size": 14
         },
-        "icon_color_ok": "#2a9292",
+        "icon_color_ok": "#8b8792",
         "icon_color_warning": "#a06e3b",
         "icon_color_error": "#be4678",
         "icon_width": 14,
@@ -304,16 +304,8 @@
         "summary_spacing": 8
       },
       "sidebar_buttons": {
-        "group_left": {
-          "margin": {
-            "right": 20
-          }
-        },
-        "group_right": {
-          "margin": {
-            "left": 20
-          }
-        },
+        "group_left": {},
+        "group_right": {},
         "item": {
           "icon_color": "#8b8792",
           "icon_size": 18,
@@ -330,7 +322,8 @@
             "left": 5,
             "right": 5
           },
-          "corner_radius": 5
+          "corner_radius": 5,
+          "background": "#58526052"
         },
         "item_active": {
           "icon_color": "#efecf4",

assets/themes/cave-light.json πŸ”—

@@ -173,7 +173,7 @@
     },
     "status_bar": {
       "height": 24,
-      "item_spacing": 8,
+      "item_spacing": 12,
       "padding": {
         "left": 6,
         "right": 6
@@ -212,30 +212,30 @@
       "diagnostics": {
         "height": 16,
         "summary_ok": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#26232a",
           "size": 14
         },
         "summary_ok_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#26232a",
           "size": 14
         },
         "summary_warning": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#26232a",
@@ -247,10 +247,10 @@
           }
         },
         "summary_warning_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#26232a",
@@ -262,10 +262,10 @@
           }
         },
         "summary_error": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#26232a",
@@ -277,10 +277,10 @@
           }
         },
         "summary_error_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#26232a",
@@ -296,7 +296,7 @@
           "color": "#585260",
           "size": 14
         },
-        "icon_color_ok": "#2a9292",
+        "icon_color_ok": "#585260",
         "icon_color_warning": "#a06e3b",
         "icon_color_error": "#be4678",
         "icon_width": 14,
@@ -304,16 +304,8 @@
         "summary_spacing": 8
       },
       "sidebar_buttons": {
-        "group_left": {
-          "margin": {
-            "right": 20
-          }
-        },
-        "group_right": {
-          "margin": {
-            "left": 20
-          }
-        },
+        "group_left": {},
+        "group_right": {},
         "item": {
           "icon_color": "#585260",
           "icon_size": 18,
@@ -330,7 +322,8 @@
             "left": 5,
             "right": 5
           },
-          "corner_radius": 5
+          "corner_radius": 5,
+          "background": "#8b87921f"
         },
         "item_active": {
           "icon_color": "#19171c",

assets/themes/dark.json πŸ”—

@@ -173,7 +173,7 @@
     },
     "status_bar": {
       "height": 24,
-      "item_spacing": 8,
+      "item_spacing": 12,
       "padding": {
         "left": 6,
         "right": 6
@@ -212,30 +212,30 @@
       "diagnostics": {
         "height": 16,
         "summary_ok": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#f1f1f1",
           "size": 14
         },
         "summary_ok_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#f1f1f1",
           "size": 14
         },
         "summary_warning": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#f1f1f1",
@@ -247,10 +247,10 @@
           }
         },
         "summary_warning_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#f1f1f1",
@@ -262,10 +262,10 @@
           }
         },
         "summary_error": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#f1f1f1",
@@ -277,10 +277,10 @@
           }
         },
         "summary_error_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#f1f1f1",
@@ -296,7 +296,7 @@
           "color": "#808080",
           "size": 14
         },
-        "icon_color_ok": "#1b9447",
+        "icon_color_ok": "#9c9c9c",
         "icon_color_warning": "#f6a724",
         "icon_color_error": "#eb2d2d",
         "icon_width": 14,
@@ -304,16 +304,8 @@
         "summary_spacing": 8
       },
       "sidebar_buttons": {
-        "group_left": {
-          "margin": {
-            "right": 20
-          }
-        },
-        "group_right": {
-          "margin": {
-            "left": 20
-          }
-        },
+        "group_left": {},
+        "group_right": {},
         "item": {
           "icon_color": "#9c9c9c",
           "icon_size": 18,
@@ -330,7 +322,8 @@
             "left": 5,
             "right": 5
           },
-          "corner_radius": 5
+          "corner_radius": 5,
+          "background": "#232323"
         },
         "item_active": {
           "icon_color": "#ffffff",

assets/themes/light.json πŸ”—

@@ -173,7 +173,7 @@
     },
     "status_bar": {
       "height": 24,
-      "item_spacing": 8,
+      "item_spacing": 12,
       "padding": {
         "left": 6,
         "right": 6
@@ -212,30 +212,30 @@
       "diagnostics": {
         "height": 16,
         "summary_ok": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#2b2b2b",
           "size": 14
         },
         "summary_ok_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#2b2b2b",
           "size": 14
         },
         "summary_warning": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#2b2b2b",
@@ -247,10 +247,10 @@
           }
         },
         "summary_warning_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#2b2b2b",
@@ -262,10 +262,10 @@
           }
         },
         "summary_error": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#2b2b2b",
@@ -277,10 +277,10 @@
           }
         },
         "summary_error_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#2b2b2b",
@@ -296,7 +296,7 @@
           "color": "#636363",
           "size": 14
         },
-        "icon_color_ok": "#1b9447",
+        "icon_color_ok": "#717171",
         "icon_color_warning": "#f7bf17",
         "icon_color_error": "#c91818",
         "icon_width": 14,
@@ -304,16 +304,8 @@
         "summary_spacing": 8
       },
       "sidebar_buttons": {
-        "group_left": {
-          "margin": {
-            "right": 20
-          }
-        },
-        "group_right": {
-          "margin": {
-            "left": 20
-          }
-        },
+        "group_left": {},
+        "group_right": {},
         "item": {
           "icon_color": "#717171",
           "icon_size": 18,
@@ -330,7 +322,8 @@
             "left": 5,
             "right": 5
           },
-          "corner_radius": 5
+          "corner_radius": 5,
+          "background": "#eaeaea"
         },
         "item_active": {
           "icon_color": "#000000",

assets/themes/solarized-dark.json πŸ”—

@@ -173,7 +173,7 @@
     },
     "status_bar": {
       "height": 24,
-      "item_spacing": 8,
+      "item_spacing": 12,
       "padding": {
         "left": 6,
         "right": 6
@@ -212,30 +212,30 @@
       "diagnostics": {
         "height": 16,
         "summary_ok": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#eee8d5",
           "size": 14
         },
         "summary_ok_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#eee8d5",
           "size": 14
         },
         "summary_warning": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#eee8d5",
@@ -247,10 +247,10 @@
           }
         },
         "summary_warning_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#eee8d5",
@@ -262,10 +262,10 @@
           }
         },
         "summary_error": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#eee8d5",
@@ -277,10 +277,10 @@
           }
         },
         "summary_error_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#eee8d5",
@@ -296,7 +296,7 @@
           "color": "#93a1a1",
           "size": 14
         },
-        "icon_color_ok": "#859900",
+        "icon_color_ok": "#93a1a1",
         "icon_color_warning": "#b58900",
         "icon_color_error": "#dc322f",
         "icon_width": 14,
@@ -304,16 +304,8 @@
         "summary_spacing": 8
       },
       "sidebar_buttons": {
-        "group_left": {
-          "margin": {
-            "right": 20
-          }
-        },
-        "group_right": {
-          "margin": {
-            "left": 20
-          }
-        },
+        "group_left": {},
+        "group_right": {},
         "item": {
           "icon_color": "#93a1a1",
           "icon_size": 18,
@@ -330,7 +322,8 @@
             "left": 5,
             "right": 5
           },
-          "corner_radius": 5
+          "corner_radius": 5,
+          "background": "#586e7552"
         },
         "item_active": {
           "icon_color": "#fdf6e3",

assets/themes/solarized-light.json πŸ”—

@@ -173,7 +173,7 @@
     },
     "status_bar": {
       "height": 24,
-      "item_spacing": 8,
+      "item_spacing": 12,
       "padding": {
         "left": 6,
         "right": 6
@@ -212,30 +212,30 @@
       "diagnostics": {
         "height": 16,
         "summary_ok": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#073642",
           "size": 14
         },
         "summary_ok_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#073642",
           "size": 14
         },
         "summary_warning": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#073642",
@@ -247,10 +247,10 @@
           }
         },
         "summary_warning_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#073642",
@@ -262,10 +262,10 @@
           }
         },
         "summary_error": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#073642",
@@ -277,10 +277,10 @@
           }
         },
         "summary_error_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#073642",
@@ -296,7 +296,7 @@
           "color": "#586e75",
           "size": 14
         },
-        "icon_color_ok": "#859900",
+        "icon_color_ok": "#586e75",
         "icon_color_warning": "#b58900",
         "icon_color_error": "#dc322f",
         "icon_width": 14,
@@ -304,16 +304,8 @@
         "summary_spacing": 8
       },
       "sidebar_buttons": {
-        "group_left": {
-          "margin": {
-            "right": 20
-          }
-        },
-        "group_right": {
-          "margin": {
-            "left": 20
-          }
-        },
+        "group_left": {},
+        "group_right": {},
         "item": {
           "icon_color": "#586e75",
           "icon_size": 18,
@@ -330,7 +322,8 @@
             "left": 5,
             "right": 5
           },
-          "corner_radius": 5
+          "corner_radius": 5,
+          "background": "#93a1a11f"
         },
         "item_active": {
           "icon_color": "#002b36",

assets/themes/sulphurpool-dark.json πŸ”—

@@ -173,7 +173,7 @@
     },
     "status_bar": {
       "height": 24,
-      "item_spacing": 8,
+      "item_spacing": 12,
       "padding": {
         "left": 6,
         "right": 6
@@ -212,30 +212,30 @@
       "diagnostics": {
         "height": 16,
         "summary_ok": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#dfe2f1",
           "size": 14
         },
         "summary_ok_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#dfe2f1",
           "size": 14
         },
         "summary_warning": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#dfe2f1",
@@ -247,10 +247,10 @@
           }
         },
         "summary_warning_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#dfe2f1",
@@ -262,10 +262,10 @@
           }
         },
         "summary_error": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#dfe2f1",
@@ -277,10 +277,10 @@
           }
         },
         "summary_error_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#dfe2f1",
@@ -296,7 +296,7 @@
           "color": "#979db4",
           "size": 14
         },
-        "icon_color_ok": "#ac9739",
+        "icon_color_ok": "#979db4",
         "icon_color_warning": "#c08b30",
         "icon_color_error": "#c94922",
         "icon_width": 14,
@@ -304,16 +304,8 @@
         "summary_spacing": 8
       },
       "sidebar_buttons": {
-        "group_left": {
-          "margin": {
-            "right": 20
-          }
-        },
-        "group_right": {
-          "margin": {
-            "left": 20
-          }
-        },
+        "group_left": {},
+        "group_right": {},
         "item": {
           "icon_color": "#979db4",
           "icon_size": 18,
@@ -330,7 +322,8 @@
             "left": 5,
             "right": 5
           },
-          "corner_radius": 5
+          "corner_radius": 5,
+          "background": "#5e668752"
         },
         "item_active": {
           "icon_color": "#f5f7ff",

assets/themes/sulphurpool-light.json πŸ”—

@@ -173,7 +173,7 @@
     },
     "status_bar": {
       "height": 24,
-      "item_spacing": 8,
+      "item_spacing": 12,
       "padding": {
         "left": 6,
         "right": 6
@@ -212,30 +212,30 @@
       "diagnostics": {
         "height": 16,
         "summary_ok": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#293256",
           "size": 14
         },
         "summary_ok_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#293256",
           "size": 14
         },
         "summary_warning": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#293256",
@@ -247,10 +247,10 @@
           }
         },
         "summary_warning_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#293256",
@@ -262,10 +262,10 @@
           }
         },
         "summary_error": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#293256",
@@ -277,10 +277,10 @@
           }
         },
         "summary_error_hover": {
-          "corner_radius": 5,
+          "corner_radius": 6,
           "padding": {
-            "left": 5,
-            "right": 5
+            "left": 6,
+            "right": 6
           },
           "family": "Zed Sans",
           "color": "#293256",
@@ -296,7 +296,7 @@
           "color": "#5e6687",
           "size": 14
         },
-        "icon_color_ok": "#ac9739",
+        "icon_color_ok": "#5e6687",
         "icon_color_warning": "#c08b30",
         "icon_color_error": "#c94922",
         "icon_width": 14,
@@ -304,16 +304,8 @@
         "summary_spacing": 8
       },
       "sidebar_buttons": {
-        "group_left": {
-          "margin": {
-            "right": 20
-          }
-        },
-        "group_right": {
-          "margin": {
-            "left": 20
-          }
-        },
+        "group_left": {},
+        "group_right": {},
         "item": {
           "icon_color": "#5e6687",
           "icon_size": 18,
@@ -330,7 +322,8 @@
             "left": 5,
             "right": 5
           },
-          "corner_radius": 5
+          "corner_radius": 5,
+          "background": "#979db41f"
         },
         "item_active": {
           "icon_color": "#202746",

crates/diagnostics/src/items.rs πŸ”—

@@ -1,29 +1,33 @@
+use editor::Editor;
 use gpui::{
-    elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext, View,
-    ViewContext,
+    elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext,
+    Subscription, View, ViewContext, ViewHandle,
 };
+use language::Diagnostic;
 use project::Project;
 use settings::Settings;
 use workspace::StatusItemView;
 
-pub struct DiagnosticSummary {
+pub struct DiagnosticIndicator {
     summary: project::DiagnosticSummary,
-    in_progress: bool,
+    current_diagnostic: Option<Diagnostic>,
+    check_in_progress: bool,
+    _observe_active_editor: Option<Subscription>,
 }
 
-impl DiagnosticSummary {
+impl DiagnosticIndicator {
     pub fn new(project: &ModelHandle<Project>, cx: &mut ViewContext<Self>) -> Self {
         cx.subscribe(project, |this, project, event, cx| match event {
             project::Event::DiskBasedDiagnosticsUpdated => {
                 cx.notify();
             }
             project::Event::DiskBasedDiagnosticsStarted => {
-                this.in_progress = true;
+                this.check_in_progress = true;
                 cx.notify();
             }
             project::Event::DiskBasedDiagnosticsFinished => {
                 this.summary = project.read(cx).diagnostic_summary(cx);
-                this.in_progress = false;
+                this.check_in_progress = false;
                 cx.notify();
             }
             _ => {}
@@ -31,113 +35,163 @@ impl DiagnosticSummary {
         .detach();
         Self {
             summary: project.read(cx).diagnostic_summary(cx),
-            in_progress: project.read(cx).is_running_disk_based_diagnostics(),
+            check_in_progress: project.read(cx).is_running_disk_based_diagnostics(),
+            current_diagnostic: None,
+            _observe_active_editor: None,
+        }
+    }
+
+    fn update(&mut self, editor: ViewHandle<Editor>, cx: &mut ViewContext<Self>) {
+        let editor = editor.read(cx);
+        let buffer = editor.buffer().read(cx);
+        let cursor_position = editor
+            .newest_selection_with_snapshot::<usize>(&buffer.read(cx))
+            .head();
+        let new_diagnostic = buffer
+            .read(cx)
+            .diagnostics_in_range::<_, usize>(cursor_position..cursor_position, false)
+            .filter(|entry| !entry.range.is_empty())
+            .min_by_key(|entry| (entry.diagnostic.severity, entry.range.len()))
+            .map(|entry| entry.diagnostic);
+        if new_diagnostic != self.current_diagnostic {
+            self.current_diagnostic = new_diagnostic;
+            cx.notify();
         }
     }
 }
 
-impl Entity for DiagnosticSummary {
+impl Entity for DiagnosticIndicator {
     type Event = ();
 }
 
-impl View for DiagnosticSummary {
+impl View for DiagnosticIndicator {
     fn ui_name() -> &'static str {
-        "DiagnosticSummary"
+        "DiagnosticIndicator"
     }
 
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
         enum Tag {}
 
-        let in_progress = self.in_progress;
-        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
+        let in_progress = self.check_in_progress;
+        let mut element = Flex::row().with_child(
+            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 {
-                    &style.summary_warning
-                }
-            } else if state.hovered {
-                &style.summary_ok_hover
-            } else {
-                &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(),
-                ]);
-            }
+                    &style.summary_ok
+                };
 
-            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)
+                let mut summary_row = Flex::row();
+                if self.summary.error_count > 0 {
+                    summary_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()
-                        .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(),
-                ]);
-            }
+                        .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)
+                if self.summary.warning_count > 0 {
+                    summary_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()
-                        .named("ok-icon"),
-                );
-            }
+                        .boxed(),
+                    ]);
+                }
+
+                if self.summary.error_count == 0 && self.summary.warning_count == 0 {
+                    summary_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"),
+                    );
+                }
+
+                summary_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))
+            .aligned()
+            .boxed(),
+        );
+
+        let style = &cx.global::<Settings>().theme.workspace.status_bar;
 
-            row.constrained()
-                .with_height(style.height)
+        if in_progress {
+            element.add_child(
+                Label::new("checking…".into(), style.diagnostics.message.text.clone())
+                    .aligned()
+                    .contained()
+                    .with_margin_left(style.item_spacing)
+                    .boxed(),
+            );
+        } else if let Some(diagnostic) = &self.current_diagnostic {
+            element.add_child(
+                Label::new(
+                    diagnostic.message.split('\n').next().unwrap().to_string(),
+                    style.diagnostics.message.text.clone(),
+                )
+                .aligned()
                 .contained()
-                .with_style(summary_style.container)
-                .boxed()
-        })
-        .with_cursor_style(CursorStyle::PointingHand)
-        .on_click(|cx| cx.dispatch_action(crate::Deploy))
-        .boxed()
+                .with_margin_left(style.item_spacing)
+                .boxed(),
+            );
+        }
+
+        element.named("diagnostic indicator")
     }
 
     fn debug_json(&self, _: &gpui::AppContext) -> serde_json::Value {
@@ -145,11 +199,19 @@ impl View for DiagnosticSummary {
     }
 }
 
-impl StatusItemView for DiagnosticSummary {
+impl StatusItemView for DiagnosticIndicator {
     fn set_active_pane_item(
         &mut self,
-        _: Option<&dyn workspace::ItemHandle>,
-        _: &mut ViewContext<Self>,
+        active_pane_item: Option<&dyn workspace::ItemHandle>,
+        cx: &mut ViewContext<Self>,
     ) {
+        if let Some(editor) = active_pane_item.and_then(|item| item.downcast::<Editor>()) {
+            self._observe_active_editor = Some(cx.observe(&editor, Self::update));
+            self.update(editor, cx);
+        } else {
+            self.current_diagnostic = None;
+            self._observe_active_editor = None;
+        }
+        cx.notify();
     }
 }

crates/editor/src/items.rs πŸ”—

@@ -5,7 +5,7 @@ use gpui::{
     elements::*, geometry::vector::vec2f, AppContext, Entity, ModelHandle, MutableAppContext,
     RenderContext, Subscription, Task, View, ViewContext, ViewHandle,
 };
-use language::{Bias, Buffer, Diagnostic, File as _, SelectionGoal};
+use language::{Bias, Buffer, File as _, SelectionGoal};
 use project::{File, Project, ProjectEntryId, ProjectPath};
 use rpc::proto::{self, update_view};
 use settings::Settings;
@@ -505,75 +505,3 @@ impl StatusItemView for CursorPosition {
         cx.notify();
     }
 }
-
-pub struct DiagnosticMessage {
-    diagnostic: Option<Diagnostic>,
-    _observe_active_editor: Option<Subscription>,
-}
-
-impl DiagnosticMessage {
-    pub fn new() -> Self {
-        Self {
-            diagnostic: None,
-            _observe_active_editor: None,
-        }
-    }
-
-    fn update(&mut self, editor: ViewHandle<Editor>, cx: &mut ViewContext<Self>) {
-        let editor = editor.read(cx);
-        let buffer = editor.buffer().read(cx);
-        let cursor_position = editor
-            .newest_selection_with_snapshot::<usize>(&buffer.read(cx))
-            .head();
-        let new_diagnostic = buffer
-            .read(cx)
-            .diagnostics_in_range::<_, usize>(cursor_position..cursor_position, false)
-            .filter(|entry| !entry.range.is_empty())
-            .min_by_key(|entry| (entry.diagnostic.severity, entry.range.len()))
-            .map(|entry| entry.diagnostic);
-        if new_diagnostic != self.diagnostic {
-            self.diagnostic = new_diagnostic;
-            cx.notify();
-        }
-    }
-}
-
-impl Entity for DiagnosticMessage {
-    type Event = ();
-}
-
-impl View for DiagnosticMessage {
-    fn ui_name() -> &'static str {
-        "DiagnosticMessage"
-    }
-
-    fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
-        if let Some(diagnostic) = &self.diagnostic {
-            let theme = &cx.global::<Settings>().theme.workspace.status_bar;
-            Label::new(
-                diagnostic.message.split('\n').next().unwrap().to_string(),
-                theme.diagnostic_message.clone(),
-            )
-            .boxed()
-        } else {
-            Empty::new().boxed()
-        }
-    }
-}
-
-impl StatusItemView for DiagnosticMessage {
-    fn set_active_pane_item(
-        &mut self,
-        active_pane_item: Option<&dyn ItemHandle>,
-        cx: &mut ViewContext<Self>,
-    ) {
-        if let Some(editor) = active_pane_item.and_then(|item| item.downcast::<Editor>()) {
-            self._observe_active_editor = Some(cx.observe(&editor, Self::update));
-            self.update(editor, cx);
-        } else {
-            self.diagnostic = Default::default();
-            self._observe_active_editor = None;
-        }
-        cx.notify();
-    }
-}

crates/zed/src/zed.rs πŸ”—

@@ -180,9 +180,8 @@ pub fn build_workspace(
         sidebar.add_item("icons/contacts-solid-14.svg", contact_panel.into(), cx)
     });
 
-    let diagnostic_message = cx.add_view(|_| editor::items::DiagnosticMessage::new());
     let diagnostic_summary =
-        cx.add_view(|cx| diagnostics::items::DiagnosticSummary::new(workspace.project(), cx));
+        cx.add_view(|cx| diagnostics::items::DiagnosticIndicator::new(workspace.project(), cx));
     let lsp_status = cx.add_view(|cx| {
         workspace::lsp_status::LspStatus::new(workspace.project(), app_state.languages.clone(), cx)
     });
@@ -190,7 +189,6 @@ pub fn build_workspace(
     let auto_update = cx.add_view(|cx| auto_update::AutoUpdateIndicator::new(cx));
     workspace.status_bar().update(cx, |status_bar, cx| {
         status_bar.add_left_item(diagnostic_summary, cx);
-        status_bar.add_left_item(diagnostic_message, cx);
         status_bar.add_left_item(lsp_status, cx);
         status_bar.add_right_item(cursor_position, cx);
         status_bar.add_right_item(auto_update, cx);

styles/src/styleTree/workspace.ts πŸ”—

@@ -49,8 +49,8 @@ export default function workspace(theme: Theme) {
   };
 
   const diagnosticSummary = {
-    cornerRadius: 5,
-    padding: { left: 5, right: 5 },
+    cornerRadius: 6,
+    padding: { left: 6, right: 6 },
     ...text(theme, "sans", "primary", { size: "sm" }),
   };
   const sidebarButton = {
@@ -89,7 +89,7 @@ export default function workspace(theme: Theme) {
     },
     statusBar: {
       height: 24,
-      itemSpacing: 8,
+      itemSpacing: 12,
       padding: {
         left: 6,
         right: 6,
@@ -129,7 +129,7 @@ export default function workspace(theme: Theme) {
           border: border(theme, "error"),
         },
         message: text(theme, "sans", "muted"),
-        iconColorOk: iconColor(theme, "ok"),
+        iconColorOk: iconColor(theme, "secondary"),
         iconColorWarning: iconColor(theme, "warning"),
         iconColorError: iconColor(theme, "error"),
         iconWidth: 14,
@@ -137,14 +137,17 @@ export default function workspace(theme: Theme) {
         summarySpacing: 8,
       },
       sidebarButtons: {
-        groupLeft: {
-          margin: { right: 20 }
+        groupLeft: {},
+        groupRight: {},
+        item: {
+          iconColor: iconColor(theme, "muted"),
+          ...sidebarButton
         },
-        groupRight: {
-          margin: { left: 20 }
+        itemHover: {
+          ...sidebarButton,
+          iconColor: iconColor(theme, "secondary"),
+          background: backgroundColor(theme, 300, "hovered"),
         },
-        item: { ...sidebarButton },
-        itemHover: { ...sidebarButton },
         itemActive: {
           ...sidebarButton,
           iconColor: iconColor(theme, "active"),