Scaffold Toolbar and Breadcrumb components (#3020)

This PR scaffolds the `Toolbar` and `Breadcrumb` components.

Right now they both just consist of hardcoded data.

<img width="846" alt="Screenshot 2023-09-22 at 4 54 00 PM"
src="https://github.com/zed-industries/zed/assets/1486634/70578df2-7216-42d2-97ef-d38b83fb4a25">

<img width="799" alt="Screenshot 2023-09-22 at 4 46 04 PM"
src="https://github.com/zed-industries/zed/assets/1486634/73ca3d8a-baf9-4ed4-b4c4-279c674672a3">

Release Notes:

- N/A

crates/ui/src/components.rs

@@ -1,17 +1,21 @@
+mod breadcrumb;
 mod facepile;
 mod follow_group;
 mod list_item;
 mod list_section_header;
 mod palette_item;
 mod tab;
+mod toolbar;
 mod traffic_lights;
 
+pub use breadcrumb::*;
 pub use facepile::*;
 pub use follow_group::*;
 pub use list_item::*;
 pub use list_section_header::*;
 pub use palette_item::*;
 pub use tab::*;
+pub use toolbar::*;
 pub use traffic_lights::*;
 
 use std::marker::PhantomData;

crates/ui/src/components/breadcrumb.rs

@@ -0,0 +1,36 @@
+use gpui2::elements::div;
+use gpui2::style::{StyleHelpers, Styleable};
+use gpui2::{Element, IntoElement, ParentElement, ViewContext};
+
+use crate::theme;
+
+#[derive(Element)]
+pub struct Breadcrumb {}
+
+pub fn breadcrumb() -> Breadcrumb {
+    Breadcrumb {}
+}
+
+impl Breadcrumb {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .px_1()
+            .flex()
+            .flex_row()
+            // TODO: Read font from theme (or settings?).
+            .font("Zed Mono Extended")
+            .text_sm()
+            .text_color(theme.middle.base.default.foreground)
+            .rounded_md()
+            .hover()
+            .fill(theme.highest.base.hovered.background)
+            // TODO: Replace hardcoded breadcrumbs.
+            .child("crates/ui/src/components/toolbar.rs")
+            .child(" › ")
+            .child("impl Breadcrumb")
+            .child(" › ")
+            .child("fn render")
+    }
+}

crates/ui/src/components/toolbar.rs

@@ -0,0 +1,35 @@
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{Element, IntoElement, ParentElement, ViewContext};
+
+use crate::{breadcrumb, icon_button, theme};
+
+pub struct ToolbarItem {}
+
+#[derive(Element)]
+pub struct Toolbar {
+    items: Vec<ToolbarItem>,
+}
+
+pub fn toolbar() -> Toolbar {
+    Toolbar { items: Vec::new() }
+}
+
+impl Toolbar {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .p_2()
+            .flex()
+            .justify_between()
+            .child(breadcrumb())
+            .child(
+                div()
+                    .flex()
+                    .child(icon_button("icons/inlay_hint.svg"))
+                    .child(icon_button("icons/magnifying_glass.svg"))
+                    .child(icon_button("icons/magic-wand.svg")),
+            )
+    }
+}