guise/feedback/

toast.rs

//! `ToastStack` — a positioned, stacking toast manager (gpui entity).
//!
//! Holds a list of live toasts and paints them as a deferred, top-right stack
//! above the page. Push from anywhere you hold the entity handle; each card has
//! a close button. Pushed toasts auto-dismiss after four seconds by default;
//! set [`ToastStack::duration`] to change the delay or pass `None` to keep
//! toasts until closed.

use std::time::Duration;

use gpui::prelude::*;
use gpui::{deferred, div, px, Context, FontWeight, IntoElement, SharedString, Window};

use crate::devtools::ProbedAny;
use crate::theme::{theme, ColorName, Size};

struct Toast {
  id: usize,
  title: Option<SharedString>,
  message: SharedString,
  color: ColorName,
}

/// A stack of toasts. Create with `cx.new(|_| ToastStack::new())` and render it
/// inside a full-size root.
pub struct ToastStack {
  toasts: Vec<Toast>,
  next_id: usize,
  duration: Option<Duration>,
}

impl ToastStack {
  pub fn new() -> Self {
    ToastStack {
      toasts: Vec::new(),
      next_id: 0,
      duration: Some(Duration::from_secs(4)),
    }
  }

  /// Set the auto-dismiss delay for subsequently pushed toasts. `None`
  /// keeps toasts until closed. Chainable, so it slots into construction:
  /// `cx.new(|_| ToastStack::new().duration(None))`.
  pub fn duration(mut self, duration: Option<Duration>) -> Self {
    self.set_duration(duration);
    self
  }

  /// [`duration`](ToastStack::duration) for an already-built stack, e.g.
  /// inside `entity.update(cx, ...)` right before a sticky push.
  pub fn set_duration(&mut self, duration: Option<Duration>) {
    self.duration = duration;
  }

  /// Push a plain message toast. Returns its id (pass to [`remove`]).
  ///
  /// [`remove`]: ToastStack::remove
  pub fn push(&mut self, message: impl Into<SharedString>, cx: &mut Context<Self>) -> usize {
    self.push_toast(None, message.into(), ColorName::Blue, cx)
  }

  /// Push a titled, colored toast.
  pub fn push_titled(
    &mut self,
    title: impl Into<SharedString>,
    message: impl Into<SharedString>,
    color: ColorName,
    cx: &mut Context<Self>,
  ) -> usize {
    self.push_toast(Some(title.into()), message.into(), color, cx)
  }

  fn push_toast(
    &mut self,
    title: Option<SharedString>,
    message: SharedString,
    color: ColorName,
    cx: &mut Context<Self>,
  ) -> usize {
    let id = self.next_id;
    self.next_id += 1;
    self.toasts.push(Toast {
      id,
      title,
      message,
      color,
    });
    cx.notify();

    if let Some(delay) = self.duration {
      // Ids are never reused, so this removes exactly this toast (or
      // nothing, if it was closed by hand first).
      cx.spawn(async move |this, cx| {
        cx.background_executor().timer(delay).await;
        this.update(cx, |this, cx| this.remove(id, cx)).ok();
      })
      .detach();
    }

    id
  }

  /// Remove a toast by id.
  pub fn remove(&mut self, id: usize, cx: &mut Context<Self>) {
    self.toasts.retain(|t| t.id != id);
    cx.notify();
  }

  pub fn clear(&mut self, cx: &mut Context<Self>) {
    self.toasts.clear();
    cx.notify();
  }

  pub fn len(&self) -> usize {
    self.toasts.len()
  }

  pub fn is_empty(&self) -> bool {
    self.toasts.is_empty()
  }
}

impl Default for ToastStack {
  fn default() -> Self {
    ToastStack::new()
  }
}

impl Render for ToastStack {
  fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    let mut root = div();
    if self.toasts.is_empty() {
      return root.into_any_element();
    }

    let t = theme(cx);
    let surface = t.surface().hsla();
    let border = t.border().hsla();
    let text = t.text().hsla();
    let dimmed = t.dimmed().hsla();
    let radius = t.radius(Size::Md);
    let font_sm = t.font_size(Size::Sm);

    let mut stack = div()
      .absolute()
      .top(px(16.0))
      .right(px(16.0))
      .flex()
      .flex_col()
      .gap(px(10.0));

    for toast in &self.toasts {
      let id = toast.id;
      let accent = t.color(toast.color, t.primary_shade()).hsla();

      let mut content = div().flex().flex_col().gap(px(2.0)).flex_1();
      if let Some(title) = toast.title.clone() {
        content = content.child(
          div()
            .font_weight(FontWeight::BOLD)
            .text_size(px(font_sm))
            .text_color(text)
            .child(title),
        );
      }
      content = content.child(
        div()
          .text_size(px(font_sm))
          .text_color(dimmed)
          .child(toast.message.clone()),
      );

      let card = div()
        .flex()
        .items_start()
        .gap(px(12.0))
        .w(px(320.0))
        .p(px(t.spacing(Size::Md)))
        .rounded(px(radius))
        .bg(surface)
        .border_1()
        .border_color(border)
        .shadow_md()
        .child(div().w(px(4.0)).h(px(38.0)).rounded(px(4.0)).bg(accent))
        .child(content)
        .child(
          div()
            .id(("guise-toast-close", id))
            .text_color(dimmed)
            .hover(move |s| s.text_color(text))
            .child(SharedString::new_static("\u{00d7}"))
            .on_click(cx.listener(move |this, _ev, _window, cx| this.remove(id, cx))),
        );

      stack = stack.child(card);
    }

    root = root.child(deferred(stack));
    root.probe_any("ToastStack").into_any_element()
  }
}