feat: add pierre-style presentation to diff view

crates/editor/src/code_view.rs

@@ -14,6 +14,7 @@ use gpui_native_core::scrollbar::{Scrollbar, ScrollbarHandle, ScrollbarVisibilit
 use gpui_native_theme::{ActiveTheme as _, ColorTokens, Ramps};
 
 use crate::highlight::{HighlightedCode, Language, Role, highlight_with_tree};
+use crate::utils::{gutter_cell, run_style};
 
 actions!(code_view, [Copy]);
 
@@ -285,9 +286,7 @@ impl Render for CodeViewState {
         let state = cx.entity();
         let line_count = self.code.lines.len();
         let selection = self.selection();
-
-        let gutter_chars = line_count.max(1).to_string().len().max(2);
-        let gutter_width = text_size * 0.62 * (gutter_chars as f32 + 1.0);
+        let gutter_width = root_font_size * 2.5;
 
         let bounds_cell: std::rc::Rc<std::cell::RefCell<Option<Bounds<Pixels>>>> =
             std::rc::Rc::new(std::cell::RefCell::new(None));
@@ -313,7 +312,7 @@ impl Render for CodeViewState {
                             theme.ramps,
                             theme.sizes.small.text_size,
                             line_height,
-                            gutter_width,
+                            cx,
                         )
                     })
                     .collect()
@@ -474,7 +473,7 @@ fn render_row(
     ramps: Ramps,
     text_size: Pixels,
     line_height: Pixels,
-    gutter_width: Pixels,
+    cx: &App,
 ) -> gpui::AnyElement {
     let line = code.code().lines.get(line_ix).cloned().unwrap_or_default();
 
@@ -575,10 +574,7 @@ fn render_row(
         })
         .child(
             gutter_cell(
-                gutter_width,
-                line_height,
-                mono_font,
-                text_size,
+                cx,
                 if active {
                     colors.foreground
                 } else {
@@ -601,52 +597,3 @@ fn render_row(
         )
         .into_any_element()
 }
-
-fn run_style(role: Role, selected: bool, colors: ColorTokens, ramps: Ramps) -> HighlightStyle {
-    HighlightStyle {
-        color: Some(role_color(role, colors, ramps)),
-        background_color: selected.then_some(colors.selection),
-        ..Default::default()
-    }
-}
-
-/// A gutter cell sized to the whole row.
-pub(crate) fn gutter_cell<E>(
-    width: Pixels,
-    height: Pixels,
-    mono_font: &'static str,
-    text_size: Pixels,
-    color: Hsla,
-    content: E,
-) -> gpui::Div
-where
-    E: IntoElement,
-{
-    div()
-        .w(width)
-        .h(height)
-        .flex()
-        .items_center()
-        .justify_center()
-        .flex_none()
-        .font_family(mono_font)
-        .text_size(text_size)
-        .line_height(gpui::relative(1.0))
-        .text_color(color)
-        .child(content)
-}
-
-/// Maps a highlight role to the theme's semantic palette.
-pub(crate) fn role_color(role: Role, colors: ColorTokens, ramps: Ramps) -> Hsla {
-    match role {
-        Role::Text => colors.foreground,
-        Role::Keyword => ramps.primary.base,
-        Role::String | Role::Escape => ramps.success.base,
-        Role::Comment | Role::Punctuation => colors.muted_foreground,
-        Role::Function | Role::Property => ramps.info.base,
-        Role::Type => ramps.warning.base,
-        Role::Number | Role::Constant => ramps.secondary.base,
-        Role::Operator => colors.foreground,
-        Role::Tag => ramps.destructive.base,
-    }
-}