Misc · Time: clocks and a stopwatch

misc::Clock shows the time in a zone, the system's unless told, as an
analog face with hour marks and three hands over its digits and a
label; it wakes its view at each whole second of the wall clock, and
only while the owner passes no moment. misc::WorldClock lays places in
rows: a small face, the place, how its day and hour stand against home,
and its time. misc::Stopwatch runs on the executor's clock in tenths,
holds while paused, marks laps while running and clears once paused;
Start and Pause share one button and its focus.

examples/gallery/pages/misc/mod.rs

@@ -0,0 +1,71 @@
+use ely_gpui_component::misc::{Clock, Stopwatch, WorldClock};
+use gpui::{AnyElement, App, IntoElement, ParentElement, Styled, Window, div, px};
+use jiff::tz::TimeZone;
+
+use super::Page;
+use crate::probe::probe;
+use crate::script::Step;
+use crate::ui::{section, specimen, specimens};
+
+pub const PAGE: Page = Page {
+    number: 42,
+    slug: "misc",
+    title: "Misc",
+    summary: "Small tools that stand alone: clocks, a stopwatch.",
+    render,
+    script: &[
+        Step::DownAt("stopwatch-start", 30.0, 62.0),
+        Step::UpAt("stopwatch-start", 30.0, 62.0),
+        Step::Wait(1_600),
+        Step::DownAt("stopwatch-start", 30.0, 62.0),
+        Step::UpAt("stopwatch-start", 30.0, 62.0),
+        Step::Wait(300),
+        Step::Shot("stopwatch"),
+    ],
+};
+
+fn zone(name: &str) -> TimeZone {
+    TimeZone::get(name).unwrap_or_else(|error| panic!("the zone {name}: {error}"))
+}
+
+fn render(_: &mut Window, cx: &mut App) -> AnyElement {
+    div()
+        .child(clocks(cx))
+        .child(stopwatch(cx))
+        .into_any_element()
+}
+
+fn clocks(cx: &App) -> impl IntoElement + use<> {
+    section(
+        "Clock / WorldClock",
+        "The time in a zone, a face over its digits, ticking each second. A world clock lays places in rows: how each one's day and hour stand against home.",
+        cx,
+    )
+    .child(
+        specimens()
+            .child(specimen("clock", Clock::new("clock").label("Here"), cx))
+            .child(specimen(
+                "world clock",
+                div().w(px(320.0)).child(WorldClock::new(
+                    "world-clock",
+                    [
+                        ("San Francisco", zone("America/Los_Angeles")),
+                        ("New York", zone("America/New_York")),
+                        ("London", zone("Europe/London")),
+                        ("Mumbai", zone("Asia/Kolkata")),
+                        ("Tokyo", zone("Asia/Tokyo")),
+                    ],
+                )),
+                cx,
+            )),
+    )
+}
+
+fn stopwatch(cx: &App) -> impl IntoElement + use<> {
+    section(
+        "Stopwatch",
+        "Time that runs while started and holds while paused, in tenths; Lap marks the time so far, Reset clears it once paused.",
+        cx,
+    )
+    .child(probe("stopwatch-start", div().w(px(320.0)).child(Stopwatch::new("stopwatch"))))
+}

examples/gallery/pages/mod.rs

@@ -27,6 +27,7 @@ mod maps;
 mod media;
 mod menus;
 mod messaging;
+mod misc;
 mod motion;
 mod navigation;
 mod onboarding;
@@ -96,6 +97,7 @@ pub const ALL: &[Page] = &[
     theme::PAGE,
     i18n::PAGE,
     maps::PAGE,
+    misc::PAGE,
 ];
 
 pub use i18n::install as install_i18n;