Add placeholder git panel (#21894)

Adds a simple git placeholder panel for us to iterate from. Also
includes a number of assets from the git prototyping branch that we will
use.

Note: This panel is staff flagged for now.

Release Notes:

- N/A

crates/ui/src/components/divider.rs

@@ -3,6 +3,13 @@ use gpui::{Hsla, IntoElement};
 
 use crate::prelude::*;
 
+#[derive(Clone, Copy, PartialEq)]
+enum DividerStyle {
+    Solid,
+    Dashed,
+}
+
+#[derive(Clone, Copy, PartialEq)]
 enum DividerDirection {
     Horizontal,
     Vertical,
@@ -27,6 +34,7 @@ impl DividerColor {
 
 #[derive(IntoElement)]
 pub struct Divider {
+    style: DividerStyle,
     direction: DividerDirection,
     color: DividerColor,
     inset: bool,
@@ -34,22 +42,17 @@ pub struct Divider {
 
 impl RenderOnce for Divider {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        div()
-            .map(|this| match self.direction {
-                DividerDirection::Horizontal => {
-                    this.h_px().w_full().when(self.inset, |this| this.mx_1p5())
-                }
-                DividerDirection::Vertical => {
-                    this.w_px().h_full().when(self.inset, |this| this.my_1p5())
-                }
-            })
-            .bg(self.color.hsla(cx))
+        match self.style {
+            DividerStyle::Solid => self.render_solid(cx).into_any_element(),
+            DividerStyle::Dashed => self.render_dashed(cx).into_any_element(),
+        }
     }
 }
 
 impl Divider {
     pub fn horizontal() -> Self {
         Self {
+            style: DividerStyle::Solid,
             direction: DividerDirection::Horizontal,
             color: DividerColor::default(),
             inset: false,
@@ -58,6 +61,25 @@ impl Divider {
 
     pub fn vertical() -> Self {
         Self {
+            style: DividerStyle::Solid,
+            direction: DividerDirection::Vertical,
+            color: DividerColor::default(),
+            inset: false,
+        }
+    }
+
+    pub fn horizontal_dashed() -> Self {
+        Self {
+            style: DividerStyle::Dashed,
+            direction: DividerDirection::Horizontal,
+            color: DividerColor::default(),
+            inset: false,
+        }
+    }
+
+    pub fn vertical_dashed() -> Self {
+        Self {
+            style: DividerStyle::Dashed,
             direction: DividerDirection::Vertical,
             color: DividerColor::default(),
             inset: false,
@@ -73,4 +95,49 @@ impl Divider {
         self.color = color;
         self
     }
+
+    pub fn render_solid(self, cx: &WindowContext) -> impl IntoElement {
+        div()
+            .map(|this| match self.direction {
+                DividerDirection::Horizontal => {
+                    this.h_px().w_full().when(self.inset, |this| this.mx_1p5())
+                }
+                DividerDirection::Vertical => {
+                    this.w_px().h_full().when(self.inset, |this| this.my_1p5())
+                }
+            })
+            .bg(self.color.hsla(cx))
+    }
+
+    // TODO: Use canvas or a shader here
+    // This obviously is a short term approach
+    pub fn render_dashed(self, cx: &WindowContext) -> impl IntoElement {
+        let segment_count = 128;
+        let segment_count_f = segment_count as f32;
+        let segment_min_w = 6.;
+        let base = match self.direction {
+            DividerDirection::Horizontal => h_flex(),
+            DividerDirection::Vertical => v_flex(),
+        };
+        let (w, h) = match self.direction {
+            DividerDirection::Horizontal => (px(segment_min_w), px(1.)),
+            DividerDirection::Vertical => (px(1.), px(segment_min_w)),
+        };
+        let color = self.color.hsla(cx);
+        let total_min_w = segment_min_w * segment_count_f * 2.; // * 2 because of the gap
+
+        base.min_w(px(total_min_w))
+            .map(|this| {
+                if self.direction == DividerDirection::Horizontal {
+                    this.w_full().h_px()
+                } else {
+                    this.w_px().h_full()
+                }
+            })
+            .gap(px(segment_min_w))
+            .overflow_hidden()
+            .children(
+                (0..segment_count).map(|_| div().flex_grow().flex_shrink_0().w(w).h(h).bg(color)),
+            )
+    }
 }