gpui & ui: Use shader for dashed dividers (#23839)

TODO:
- [x] BackgroundOrientation
- [x] PatternDash
- [x] `pattern_horizontal_dash` & `pattern_vertical_dash`
- [x] Metal dash shader
- [x] Blade dash shader
- [x] Update ui::Divider to use new pattern

---

This PR introduces proper dashed dividers using the new `PatternDash`
background shader.

![CleanShot 2025-01-29 at 09 33
06@2x](https://github.com/user-attachments/assets/2db5af58-1aa9-4ad7-aa52-b9046fbf8584)

Before this we were using 128 elements to create a dashed divider, which
is both expensive, and would not scale beyond a certain size. This
allows us to simplify the divider element as well.

Changes:

- Adds `BackgroundOrientation` to `gpui::color::Background` to allow
specifying a direction for a pattern
- Adds the PatternDash pattern variant
- Updates `ui::Divider`'s dashed variants to be more efficient

Misc:
- Documents the `ui::Divider` component
- Treat `.metal` files as `C` in the Zed project until we get some metal
syntax highlighting.

Release Notes:

- N/A

crates/gpui/src/platform/blade/shaders.wgsl

@@ -359,6 +359,7 @@ fn gradient_color(background: Background, position: vec2<f32>, bounds: Bounds,
             }
         }
         case 2u: {
+            // Slash pattern
             let base_pattern_size = bounds.size.y / 5.0;
             let width = base_pattern_size * 0.5;
             let slash_spacing = 0.89;
@@ -374,6 +375,21 @@ fn gradient_color(background: Background, position: vec2<f32>, bounds: Bounds,
             background_color = sold_color;
             background_color.a *= saturate(0.5 - distance);
         }
+        case 3u: {
+            // Dash pattern
+            let dash_width = 8.0;
+            let gap_width = 8.0;
+            let pattern_width = dash_width + gap_width;
+            let relative_position = position - bounds.origin;
+
+            // Use a dot product to select x or y based on orientation
+            let orientation_vector = vec2<f32>(1.0 - f32(background.angle != 0.0), f32(background.angle != 0.0));
+            let pattern_position = fmod(dot(relative_position, orientation_vector), pattern_width);
+
+            let distance = pattern_position - dash_width;
+            background_color = sold_color;
+            background_color.a *= step(-distance, 0.0);
+        }
     }
 
     return background_color;