ui: Add NumericStepper component (#13954)

This PR adds a `NumericStepper` component that can be used to display a
numeric value along with controls to increment, decrement, and reset the
value.

The `ApplicationMenu` has been updated to use the `NumericStepper` for
adjusting the buffer and UI font size.

Here it is in action:


https://github.com/zed-industries/zed/assets/1486634/03cffe67-1256-4283-aa3d-560fffa06dad

Note: Due to the way we do font adjustments, once modified the reset
button will be displayed until it is clicked (or the font size
adjustment is otherwise reset). Simply returning to the original value
will currently not hide the reset button.

Release Notes:

- N/A

crates/ui/src/components/numeric_stepper.rs

@@ -0,0 +1,81 @@
+use gpui::ClickEvent;
+
+use crate::{prelude::*, IconButtonShape};
+
+#[derive(IntoElement)]
+pub struct NumericStepper {
+    value: SharedString,
+    on_decrement: Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>,
+    on_increment: Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>,
+    on_reset: Option<Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
+}
+
+impl NumericStepper {
+    pub fn new(
+        value: impl Into<SharedString>,
+        on_decrement: impl Fn(&ClickEvent, &mut WindowContext) + 'static,
+        on_increment: impl Fn(&ClickEvent, &mut WindowContext) + 'static,
+    ) -> Self {
+        Self {
+            value: value.into(),
+            on_decrement: Box::new(on_decrement),
+            on_increment: Box::new(on_increment),
+            on_reset: None,
+        }
+    }
+
+    pub fn on_reset(
+        mut self,
+        on_reset: impl Fn(&ClickEvent, &mut WindowContext) + 'static,
+    ) -> Self {
+        self.on_reset = Some(Box::new(on_reset));
+        self
+    }
+}
+
+impl RenderOnce for NumericStepper {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let shape = IconButtonShape::Square;
+        let icon_size = IconSize::Small;
+
+        h_flex()
+            .gap_1()
+            .map(|element| {
+                if let Some(on_reset) = self.on_reset {
+                    element.child(
+                        IconButton::new("reset", IconName::RotateCcw)
+                            .shape(shape)
+                            .icon_size(icon_size)
+                            .on_click(on_reset),
+                    )
+                } else {
+                    element.child(
+                        h_flex()
+                            .size(icon_size.square(cx))
+                            .flex_none()
+                            .into_any_element(),
+                    )
+                }
+            })
+            .child(
+                h_flex()
+                    .gap_1()
+                    .px_1()
+                    .rounded_sm()
+                    .bg(cx.theme().colors().editor_background)
+                    .child(
+                        IconButton::new("decrement", IconName::Dash)
+                            .shape(shape)
+                            .icon_size(icon_size)
+                            .on_click(self.on_decrement),
+                    )
+                    .child(Label::new(self.value))
+                    .child(
+                        IconButton::new("increment", IconName::Plus)
+                            .shape(shape)
+                            .icon_size(icon_size)
+                            .on_click(self.on_increment),
+                    ),
+            )
+    }
+}