blockworx_web/

notices.rs

//! What the session has to say about its document, and what the shell has to
//! say about itself.
//!
//! Two surfaces, because they are two kinds of thing. The **strip** carries
//! the session's notices: a standing fact stands until the fact does, and a
//! failure carries an acknowledgement and is gone for the rest of the session
//! once it is given — an error nobody can dismiss makes the editor unusable.
//! The **toast** carries what the shell itself could not do; it is reserved
//! for events that need attention (`docs/cad-ui-spec.md` §2.0.2), and keeping
//! it rare is what keeps it noticeable, so routine confirmations go to the
//! status line instead.

use core::time::Duration;

use blockworx_kernel::{Event, Notice};
use blockworx_tools::tool::Action;
use dioxus::prelude::*;
use dioxus::web::WebEventExt as _;

use crate::shell::{Band, Shell, after, measured};

/// How long a toast holds before it leaves.
const DWELL: Duration = Duration::from_millis(2_400);

/// One notice as the strip draws it: what it says, and the acknowledgement
/// it carries if it is a failure.
///
/// The index a dismissal reports counts **failures only** — that is what the
/// session's own acknowledgement is by — so it is worked out here rather than
/// read off the row's place in the list.
#[must_use]
pub fn acknowledgements(notices: &[Notice]) -> Vec<(String, Option<usize>)> {
    let mut failures = 0;
    notices
        .iter()
        .map(|notice| match notice {
            Notice::Failure(said) => {
                let at = failures;
                failures += 1;
                (said.clone(), Some(at))
            }
            Notice::Standing(said) => (said.clone(), None),
        })
        .collect()
}

#[component]
pub fn Notices(shell: Shell) -> Element {
    let chrome = shell.chrome();
    let rows = acknowledgements(&chrome.read().notices);
    if rows.is_empty() {
        return rsx! {};
    }
    let shell = use_hook(|| CopyValue::new(shell));
    rsx! {
        div {
            class: "absolute right-4 top-4 z-20 flex max-w-[40%] flex-col gap-2 rounded-2xl \
                    bg-white/90 p-3 text-sm shadow-lg ring-1 ring-zinc-950/5 backdrop-blur-xl \
                    dark:bg-zinc-800/90 dark:ring-white/10",
            role: "alert",
            onmounted: move |event| {
                if let Some(element) = event.try_as_web_event() {
                    covers(&shell.read(), &element);
                }
            },
            onresize: move |event| {
                if let Some(entry) = event.try_as_web_event() {
                    covers(&shell.read(), &entry.target());
                }
            },
            for (said , failure) in rows {
                div { key: "{said}", class: "flex items-start gap-3",
                    span { class: "min-w-0 flex-1 text-zinc-700 dark:text-zinc-200", "{said}" }
                    if let Some(at) = failure {
                        button {
                            class: "flex-none rounded-lg px-2 py-1 text-xs font-medium \
                                    text-zinc-500 transition hover:bg-zinc-950/6 \
                                    dark:text-zinc-400 dark:hover:bg-white/10",
                            title: "Done with this message",
                            "data-dismiss": "{at}",
                            onclick: move |_| {
                                shell.read().say(Event::Action(Action::AcknowledgeFailure(at)));
                            },
                            "Dismiss"
                        }
                    }
                }
            }
        }
    }
}

/// What the shell itself could not do. One message at a time — a newer one
/// replaces whatever is showing — and it takes no room from the canvas: glass
/// floating over the middle is not a wall. It stands above the toolbar, which
/// holds the bottom centre.
#[component]
pub fn Toast(shell: Shell) -> Element {
    let reported = shell.reported();
    let mut showing = use_signal(|| None::<String>);
    let mut holding = use_signal(|| 0_u64);
    use_effect(move || {
        let Some(what) = reported.read().what.clone() else {
            return;
        };
        let taken = *holding.peek() + 1;
        holding.set(taken);
        showing.set(Some(what));
        after(DWELL, move || {
            if *holding.peek() == taken {
                showing.set(None);
            }
        });
    });
    let Some(what) = showing.read().clone() else {
        return rsx! {};
    };
    rsx! {
        div {
            class: "pointer-events-none absolute bottom-28 left-1/2 z-40 -translate-x-1/2 \
                    rounded-2xl bg-zinc-900 px-4 py-2.5 text-sm text-zinc-50 shadow-xl \
                    dark:bg-zinc-100 dark:text-zinc-900",
            role: "alert",
            "data-toast": "true",
            "{what}"
        }
    }
}

fn covers(shell: &Shell, element: &web_sys::Element) {
    if let Some(at) = measured(element) {
        shell.covers(Band::Notices, at);
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    /// A dismissal names a failure by its place *among failures*, which is
    /// what the session acknowledges by — a standing fact in the middle of
    /// the list must not shift the count.
    #[test]
    fn a_dismissal_counts_failures_and_not_rows() {
        let rows = acknowledgements(&[
            Notice::Failure("Could not open it".to_owned()),
            Notice::Standing("Read-only".to_owned()),
            Notice::Failure("Could not write it".to_owned()),
        ]);
        assert_eq!(
            rows.iter().map(|(_, at)| *at).collect::<Vec<_>>(),
            vec![Some(0), None, Some(1)],
        );
    }

    /// A standing fact cannot be dismissed: dismissing "read-only" would not
    /// make the container writable.
    #[test]
    fn a_standing_fact_carries_no_acknowledgement() {
        let rows = acknowledgements(&[Notice::Standing("Read-only".to_owned())]);
        assert_eq!(rows, vec![("Read-only".to_owned(), None)]);
    }
}