T11b loading: progress bars and rings that glide, loading overlay, lazy load, suspense and async view, refresh and typing indicators, upload list; draw-time notifies ask for a frame

src/forms/mod.rs

@@ -41,6 +41,7 @@ mod tests;
 mod text;
 mod transfer;
 mod unit;
+mod upload;
 
 pub use card::{CheckboxCard, RadioCard};
 pub use cascade::{Cascade, Cascader};
@@ -92,3 +93,4 @@ pub(crate) use text::{Down, Enter, Up, bind_keys};
 pub use text::{Highlight, InputEvent, TextInput};
 pub use transfer::TransferList;
 pub use unit::UnitInput;
+pub use upload::{Upload, UploadList, UploadState};

src/forms/tests/mod.rs

@@ -3,6 +3,7 @@ mod colors;
 mod dates;
 mod other;
 mod structure;
+mod upload;
 
 use gpui::{
     AppContext as _, Context, Entity, EntityInputHandler, IntoElement, KeyUpEvent, Keystroke,

src/forms/tests/upload.rs

@@ -0,0 +1,78 @@
+use gpui::{
+    Context, IntoElement, KeyBinding, KeyUpEvent, Keystroke, Render, TestAppContext,
+    VisualTestContext, Window,
+};
+
+use super::setup;
+use crate::{
+    forms::{Upload, UploadList, UploadState},
+    primitives::FocusNext,
+};
+
+/// Three uploads, one in each state, recording which buttons ran.
+struct Shelf {
+    log: Vec<String>,
+}
+
+impl Render for Shelf {
+    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let note = |what: &'static str, cx: &mut Context<Self>| {
+            let view = cx.entity();
+            move |ix: usize, _: &mut Window, cx: &mut gpui::App| {
+                view.update(cx, |shelf, _| shelf.log.push(format!("{what} {ix}")))
+            }
+        };
+        let file = |name: &str, state| Upload {
+            name: name.to_string().into(),
+            bytes: 1_000,
+            state,
+        };
+        UploadList::new(
+            "uploads",
+            [
+                file("a", UploadState::Uploading(0.5)),
+                file("b", UploadState::Failed("Too big".into())),
+                file("c", UploadState::Done),
+            ],
+        )
+        .on_cancel(note("cancel", cx))
+        .on_retry(note("retry", cx))
+        .on_remove(note("remove", cx))
+    }
+}
+
+fn press(key: &str, cx: &mut VisualTestContext) {
+    cx.simulate_keystrokes(key);
+    cx.simulate_event(KeyUpEvent {
+        keystroke: Keystroke::parse(key).expect("a key"),
+    });
+    cx.run_until_parked();
+}
+
+#[gpui::test]
+fn each_row_offers_what_its_state_allows(cx: &mut TestAppContext) {
+    setup(cx);
+    cx.update(|cx| cx.bind_keys([KeyBinding::new("tab", FocusNext, None)]));
+    let (view, cx) = cx.add_window_view(|_, _| Shelf { log: Vec::new() });
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    let log = view.read_with(cx, |shelf, _| shelf.log.clone());
+    assert_eq!(log, ["cancel 0", "retry 1", "remove 2"]);
+}
+
+#[test]
+#[should_panic(expected = "not 0..=1")]
+fn an_upload_past_whole_is_refused() {
+    let _ = UploadList::new(
+        "uploads",
+        [Upload {
+            name: "a".into(),
+            bytes: 1,
+            state: UploadState::Uploading(1.5),
+        }],
+    );
+}

src/forms/upload.rs

@@ -0,0 +1,200 @@
+use std::rc::Rc;
+
+use gpui::{
+    App, ElementId, FontWeight, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
+    Window, div, prelude::*,
+};
+
+use crate::{
+    buttons::{ButtonVariant, IconButton},
+    motion::ProgressBar,
+    primitives::{Icon, IconName},
+    theme::{ActiveTheme, ControlSize, IconSize, TextSize},
+    typography::{format::file_size, tabular},
+};
+
+/// Where one upload stands.
+#[derive(Clone, Debug, PartialEq)]
+pub enum UploadState {
+    /// Sent this share, 0 to 1.
+    Uploading(f32),
+    Done,
+    /// Why it stopped.
+    Failed(SharedString),
+}
+
+/// One file on its way up.
+#[derive(Clone, Debug, PartialEq)]
+pub struct Upload {
+    pub name: SharedString,
+    pub bytes: u64,
+    pub state: UploadState,
+}
+
+type OnRow = Rc<dyn Fn(usize, &mut Window, &mut App)>;
+
+/// Files on their way up. Each row shows its name, the percent and a progress bar while it goes, then its size and a check, or why it failed with Retry.
+#[derive(IntoElement)]
+pub struct UploadList {
+    id: ElementId,
+    uploads: Vec<Upload>,
+    on_cancel: Option<OnRow>,
+    on_retry: Option<OnRow>,
+    on_remove: Option<OnRow>,
+}
+
+impl UploadList {
+    pub fn new(id: impl Into<ElementId>, uploads: impl IntoIterator<Item = Upload>) -> Self {
+        let uploads: Vec<Upload> = uploads.into_iter().collect();
+        for upload in &uploads {
+            if let UploadState::Uploading(share) = upload.state {
+                assert!(
+                    (0.0..=1.0).contains(&share),
+                    "{} is {share} sent, not 0..=1",
+                    upload.name
+                );
+            }
+        }
+        Self {
+            id: id.into(),
+            uploads,
+            on_cancel: None,
+            on_retry: None,
+            on_remove: None,
+        }
+    }
+
+    /// Runs with the row of an upload still under way.
+    pub fn on_cancel(mut self, handler: impl Fn(usize, &mut Window, &mut App) + 'static) -> Self {
+        self.on_cancel = Some(Rc::new(handler));
+        self
+    }
+
+    /// Runs with the row of a failed upload.
+    pub fn on_retry(mut self, handler: impl Fn(usize, &mut Window, &mut App) + 'static) -> Self {
+        self.on_retry = Some(Rc::new(handler));
+        self
+    }
+
+    /// Runs with the row of a finished upload.
+    pub fn on_remove(mut self, handler: impl Fn(usize, &mut Window, &mut App) + 'static) -> Self {
+        self.on_remove = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for UploadList {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let button = |name: String,
+                      icon: IconName,
+                      tip: &'static str,
+                      handler: &Option<OnRow>,
+                      ix: usize| {
+            handler.clone().map(|run| {
+                IconButton::new((self.id.clone(), SharedString::from(name)), icon)
+                    .variant(ButtonVariant::Ghost)
+                    .size(ControlSize::Sm)
+                    .tooltip(tip)
+                    .on_click(move |_, window, cx| run(ix, window, cx))
+            })
+        };
+        let rows = self.uploads.iter().enumerate().map(|(ix, upload)| {
+            let (note, tone) = match &upload.state {
+                UploadState::Uploading(share) => {
+                    (format!("{}%", (share * 100.0).round()), colors.fg_subtle)
+                }
+                UploadState::Done => (file_size(upload.bytes, false), colors.fg_subtle),
+                UploadState::Failed(why) => (why.to_string(), colors.danger),
+            };
+            let action = match &upload.state {
+                UploadState::Uploading(_) => button(
+                    format!("cancel-{ix}"),
+                    IconName::X,
+                    "Cancel",
+                    &self.on_cancel,
+                    ix,
+                ),
+                UploadState::Failed(_) => button(
+                    format!("retry-{ix}"),
+                    IconName::RotateCw,
+                    "Retry",
+                    &self.on_retry,
+                    ix,
+                ),
+                UploadState::Done => button(
+                    format!("remove-{ix}"),
+                    IconName::X,
+                    "Remove",
+                    &self.on_remove,
+                    ix,
+                ),
+            };
+            div()
+                .flex()
+                .items_center()
+                .gap_3()
+                .px_3()
+                .py_2()
+                .child(match upload.state {
+                    UploadState::Done => Icon::new(IconName::CircleCheck)
+                        .size(IconSize::Md)
+                        .color(colors.success),
+                    UploadState::Failed(_) => Icon::new(IconName::CircleAlert)
+                        .size(IconSize::Md)
+                        .color(colors.danger),
+                    UploadState::Uploading(_) => Icon::new(IconName::FileText)
+                        .size(IconSize::Md)
+                        .color(colors.fg_muted),
+                })
+                .child(
+                    div()
+                        .flex_1()
+                        .min_w_0()
+                        .flex()
+                        .flex_col()
+                        .gap_1()
+                        .child(
+                            div()
+                                .flex()
+                                .items_baseline()
+                                .gap_2()
+                                .child(
+                                    div()
+                                        .flex_1()
+                                        .min_w_0()
+                                        .truncate()
+                                        .font_weight(FontWeight::MEDIUM)
+                                        .child(upload.name.clone()),
+                                )
+                                .child(
+                                    tabular(div())
+                                        .flex_none()
+                                        .text_size(theme.text_size(TextSize::Xs))
+                                        .text_color(tone)
+                                        .child(note),
+                                ),
+                        )
+                        .when_some(
+                            match upload.state {
+                                UploadState::Uploading(share) => Some(share),
+                                _ => None,
+                            },
+                            |text, share| {
+                                text.child(ProgressBar::new(
+                                    (self.id.clone(), SharedString::from(format!("bar-{ix}"))),
+                                    share,
+                                ))
+                            },
+                        ),
+                )
+                .children(action)
+        });
+        div()
+            .flex()
+            .flex_col()
+            .text_size(theme.text_size(TextSize::Base))
+            .children(rows)
+    }
+}