blockworx_web/

top_bar.rs

//! The top strip: the breadcrumb on the left, mode in the centre, undo, redo
//! and fit on the right, and never anything else (`docs/cad-ui-spec.md`
//! §2.0). Documents, parts, history and settings live in the sidebar.
//!
//! It is docked chrome, so it is flat — no shadow, square corners — and the
//! one thing that changes about it is its colour: while an earlier rev is on
//! the canvas the whole strip washes amber, which is one of the three
//! redundant signals §6.2 asks for. That state is a fact of the root element
//! (`.viewing`), read here through Tailwind's group variants so the bar, the
//! toolbar and the diagram cannot disagree about it.

use core::time::Duration;

use blockworx_kernel::{Crumb, Liveness, Locked, TopBar as Bar};
use blockworx_store::doc::{At, Renaming, TimeStep, Viewing};
use blockworx_tools::commands::{CommandId, Effect};
use blockworx_tools::history::{Direction, consequence};
use blockworx_tools::tool::Action;
use dioxus::prelude::*;
use dioxus::web::WebEventExt as _;
use wasm_bindgen::JsCast as _;

use crate::control::{Face, Press, Pressable, Pressing, TAP};
use crate::icons;
use crate::shell::{Shell, after};
use crate::sidebar::Section;

/// How long a click on the document's own segment waits to see whether a
/// second one is coming. Both gestures live on one word — the document sits
/// at the head of the breadcrumb and is renamed where it stands — so they are
/// told apart in time, and a rename never navigates on its way to the box.
const DOUBLE_CLICK: Duration = Duration::from_millis(300);

#[component]
pub fn TopBar(shell: Shell) -> Element {
    let chrome = shell.chrome();
    let liveness = chrome.read().top_bar.liveness;
    rsx! {
        header {
            class: "flex h-bar shrink-0 items-center gap-1 px-3 transition-colors \
                    bg-white dark:bg-zinc-900 \
                    group-data-[viewing=true]:bg-amber-100 \
                    dark:group-data-[viewing=true]:bg-amber-950",
            div { class: "flex min-w-0 flex-none items-center gap-0.5",
                LivenessDot { liveness }
                Breadcrumb { shell: shell.clone() }
            }
            div { class: "flex min-w-0 flex-1 items-center justify-center",
                TimeMachine { shell: shell.clone() }
            }
            div { class: "flex flex-none items-center gap-0.5",
                Tape { shell: shell.clone() }
                span { class: "mx-1.5 h-5 w-px bg-zinc-950/10 dark:bg-white/15" }
                Press {
                    shell: shell.clone(),
                    id: CommandId::GoUp,
                    says: "Go up a level",
                    icon: icons::LEVEL_UP,
                    class: TAP,
                }
                Press {
                    shell,
                    id: CommandId::FitView,
                    says: "Zoom to fit",
                    icon: icons::FIT,
                    class: TAP,
                }
            }
        }
    }
}

/// Undo and redo. Both are always on the strip and disable when empty, and
/// each names what one press would cost the log — the same sentence the
/// desktop's does, because it is the same function.
#[component]
fn Tape(shell: Shell) -> Element {
    let chrome = shell.chrome();
    let (steps, viewing) = {
        let read = chrome.read();
        (read.top_bar.steps.clone(), read.top_bar.lens.viewing)
    };
    let offered = |id| {
        chrome
            .read()
            .commands
            .face(id)
            .is_some_and(|face| face.live())
    };
    rsx! {
        Press {
            shell: shell.clone(),
            id: CommandId::Undo,
            says: consequence(
                Direction::Back,
                steps.undo.as_ref(),
                offered(CommandId::Undo).into(),
                viewing,
            ),
            icon: icons::UNDO,
            class: TAP,
        }
        Press {
            shell,
            id: CommandId::Redo,
            says: consequence(
                Direction::Forward,
                steps.redo.as_ref(),
                offered(CommandId::Redo).into(),
                viewing,
            ),
            icon: icons::REDO,
            class: TAP,
        }
    }
}

/// The document's state as the dot beside its name reports it. Hover-only,
/// and it always carries words — a coloured dot on its own teaches nothing.
#[component]
fn LivenessDot(liveness: Liveness) -> Element {
    let (tint, says) = reading(liveness);
    rsx! {
        span {
            class: "mx-1.5 size-2 flex-none rounded-full {tint}",
            title: "{says}",
            role: "status",
        }
    }
}

/// The one resolver for what the dot shows, so its colour and its words
/// cannot disagree — here, and on the Diagrams section's own card.
pub fn reading(liveness: Liveness) -> (&'static str, &'static str) {
    match liveness {
        Liveness::Recorded => ("bg-emerald-500", "All changes recorded"),
        Liveness::ReadOnly(Locked::Lens) => (
            "bg-red-500",
            "Read-only \u{2014} an earlier rev is on the canvas",
        ),
        Liveness::ReadOnly(Locked::Container) => (
            "bg-red-500",
            "Read-only \u{2014} this document was opened without a write lock",
        ),
        Liveness::Scratch => (
            "bg-zinc-400",
            "Scratch session \u{2014} not yet saved to disk",
        ),
    }
}

/// How a segment of the breadcrumb is drawn.
const SEGMENT: &str = "max-w-[200px] truncate rounded-lg px-2.5 py-1.5 text-sm \
     text-zinc-600 transition enabled:hover:bg-zinc-950/6 enabled:hover:text-zinc-900 \
     disabled:opacity-100 dark:text-zinc-400 dark:enabled:hover:bg-white/10 \
     dark:enabled:hover:text-zinc-100";

/// The level the canvas is actually standing on, and the document itself:
/// full ink.
const HERE: &str = "max-w-[200px] truncate rounded-lg px-2.5 py-1.5 text-sm font-medium \
     text-zinc-900 transition hover:bg-zinc-950/6 dark:text-zinc-100 dark:hover:bg-white/10";

/// The edit-context breadcrumb, rooted at the document.
///
/// Which segments it draws is the kernel's rule, not this element's: the
/// collapse keeps the root and the current level and hides the middle behind
/// one ellipsis that lists what it hid.
#[component]
fn Breadcrumb(shell: Shell) -> Element {
    let chrome = shell.chrome();
    let bar = chrome.read().top_bar.clone();
    let here = bar.scope.here();
    let scope = bar.scope.clone();
    let rose = use_hook(|| CopyValue::new(shell.clone()));
    rsx! {
        nav { class: "flex min-w-0 items-center gap-px", "aria-label": "Edit context",
            for shown in scope.collapsed() {
                match shown {
                    Crumb::Root => rsx! {
                        DocumentName { key: "{here}-root", shell: shell.clone(), bar: bar.clone() }
                    },
                    Crumb::Level(depth) => {
                        let name = bar.scope.names[depth - 1].clone();
                        let scope = bar.scope.clone();
                        rsx! {
                            Separator { key: "sep-{depth}" }
                            if depth == here {
                                span {
                                    key: "at-{depth}",
                                    class: "max-w-[200px] truncate rounded-lg px-2.5 py-1.5 text-sm font-medium \
                                            text-zinc-900 dark:text-zinc-100",
                                    "aria-current": "page",
                                    "{name}"
                                }
                            } else {
                                button {
                                    key: "to-{depth}",
                                    class: SEGMENT,
                                    title: "Go to {name}",
                                    onclick: move |_| {
                                        rose.read().say(blockworx_kernel::Event::Action(scope.up_to(depth)));
                                    },
                                    "{name}"
                                }
                            }
                        }
                    }
                    Crumb::Elided(hidden) => rsx! {
                        Separator { key: "sep-{here}" }
                        Elision {
                            shell: shell.clone(),
                            names: bar.scope.names.clone(),
                            path: bar.scope.clone(),
                            hidden,
                        }
                    },
                }
            }
        }
    }
}

#[component]
fn Separator() -> Element {
    rsx! {
        span { class: "flex-none text-xs text-zinc-400 dark:text-zinc-600", "aria-hidden": "true", "/" }
    }
}

/// The middle the collapse hid, listed rather than merely announced.
#[component]
fn Elision(
    shell: Shell,
    names: Vec<String>,
    path: blockworx_kernel::ScopePath,
    hidden: Vec<usize>,
) -> Element {
    use dioxus_primitives::dropdown_menu::{
        DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
    };
    let shell = use_hook(|| CopyValue::new(shell));
    rsx! {
        DropdownMenu {
            DropdownMenuTrigger {
                class: "{SEGMENT} tracking-widest",
                title: "The levels between",
                "\u{00b7}\u{00b7}\u{00b7}"
            }
            DropdownMenuContent { class: MENU,
                for (place , depth) in hidden.into_iter().enumerate() {
                    DropdownMenuItem::<usize> {
                        key: "{depth}",
                        class: MENU_ROW,
                        value: depth,
                        index: place,
                        on_select: {
                            let path = path.clone();
                            move |depth: usize| {
                                shell.read().say(blockworx_kernel::Event::Action(path.up_to(depth)));
                            }
                        },
                        "{names[depth - 1]}"
                    }
                }
            }
        }
    }
}

/// The document's own segment: at the top level a press opens the Diagrams
/// section, below it a press goes back up to the top, and — on a double click
/// — it becomes the box that types over the name.
#[component]
fn DocumentName(shell: Shell, bar: Bar) -> Element {
    let name = bar.name.clone();
    let renaming = bar.renaming;
    let standing = bar.scope.here() == 0;
    let scope = bar.scope.clone();
    let mut draft = use_signal(|| None::<String>);
    let mut rising = use_signal(|| 0_u64);
    let asked = shell.renaming();
    let section = shell.section();
    let shell = use_hook(|| CopyValue::new(shell));

    // The Diagrams section's Rename opens the box the double click opens:
    // one gesture, so one place it can be typed.
    use_effect({
        let name = name.clone();
        // Mounted over a document that has just opened, the box must not
        // answer again the ask the one before it already answered.
        let mut answered = use_signal(|| *asked.peek());
        move || {
            let asked = asked();
            if asked != *answered.peek() {
                answered.set(asked);
                draft.set(Some(name.clone()));
            }
        }
    });

    // Clicking away is a commit rather than a cancel: the box opened on the
    // document's own name, so the worst it can settle on is the name it
    // started with.
    let ends = use_callback({
        let was = name.clone();
        move |typed: Option<String>| {
            // Taking the box away blurs it, and that blur ends it a second
            // time — while the first is still being rendered.
            if draft.peek().is_none() {
                return;
            }
            draft.set(None);
            let Some(to) = typed else { return };
            if to != was {
                shell.read().raises(Effect::RenameDocument(to).into());
            }
        }
    });
    let typed = move || draft.peek().clone();

    if let Some(typing) = draft.read().clone() {
        return rsx! {
            input {
                class: "w-40 rounded-lg bg-white px-2.5 py-1.5 text-sm font-medium outline-2 \
                        outline-sky-500 dark:bg-zinc-800",
                value: "{typing}",
                autofocus: true,
                // Asked for from the sidebar, the box mounts while the press
                // that asked still holds the focus.
                onmounted: move |event| {
                    let Some(field) = event
                        .try_as_web_event()
                        .and_then(|element| element.dyn_into::<web_sys::HtmlElement>().ok())
                    else {
                        return;
                    };
                    after(Duration::ZERO, move || {
                        let _ = field.focus();
                    });
                },
                "aria-label": "Document name",
                oninput: move |event| draft.set(Some(event.value())),
                onblur: move |_| ends.call(typed()),
                onkeydown: move |event| match event.key() {
                    Key::Enter => ends.call(typed()),
                    Key::Escape => ends.call(None),
                    _ => {}
                },
            }
        };
    }

    let says = match (standing, renaming) {
        (true, Renaming::Offered) => "Diagrams \u{2014} double-click to rename",
        (true, Renaming::Withheld) => "Diagrams",
        (false, Renaming::Offered) => "Back to the top level \u{2014} double-click to rename",
        (false, Renaming::Withheld) => "Back to the top level",
    };
    rsx! {
        button {
            class: HERE,
            title: "{says}",
            "data-crumb": "root",
            onclick: move |_| {
                let taken = rising() + 1;
                rising.set(taken);
                let scope = scope.clone();
                let mut section = section;
                after(
                    DOUBLE_CLICK,
                    move || {
                        if *rising.peek() != taken || draft.peek().is_some() {
                            return;
                        }
                        if standing {
                            section.set(Some(Section::Diagrams));
                        } else {
                            shell.read().say(blockworx_kernel::Event::Action(scope.up_to(0)));
                        }
                    },
                );
            },
            ondoubleclick: move |_| {
                if renaming == Renaming::Offered {
                    let taken = rising() + 1;
                    rising.set(taken);
                    draft.set(Some(name.clone()));
                }
            },
            "{bar.name}"
        }
    }
}

/// The centre slot: empty unless a mode is active. While an earlier rev is on
/// the canvas it names the rev, steps between neighbours, and offers the one
/// way back — no new object appears, the strip you already look at changes
/// state.
#[component]
fn TimeMachine(shell: Shell) -> Element {
    let chrome = shell.chrome();
    let lens = chrome.read().top_bar.lens.clone();
    let Viewing::Past(at) = lens.viewing else {
        return rsx! {};
    };
    let headline = if lens.age.is_empty() {
        format!("Rev {}", at.get())
    } else {
        format!("Rev {} \u{00b7} {}", at.get(), lens.age)
    };
    let shell = use_hook(|| CopyValue::new(shell));
    let stepped = move |step: TimeStep| {
        let action = match lens.viewing.stepped(lens.head, step) {
            Some(At::Rev(rev)) => Some(Action::ViewRev(rev)),
            Some(At::Current) => Some(Action::ViewHead),
            None => None,
        };
        if let Some(action) = action {
            shell.read().say(blockworx_kernel::Event::Action(action));
        }
    };
    let walks = |step| lens.viewing.stepped(lens.head, step).is_none();
    rsx! {
        div {
            class: "flex items-center gap-2 text-sm font-medium text-amber-700 dark:text-amber-300",
            role: "status",
            span { class: "truncate", "{headline}" }
            Pressable {
                class: "{TAP} size-9 rounded-[11px] text-amber-700 dark:text-amber-300",
                title: "Older rev",
                "data-step": "older",
                pressing: if walks(TimeStep::Back) { Pressing::Dead } else { Pressing::Live },
                onpress: move |()| stepped(TimeStep::Back),
                Face { icon: icons::STEP_OLDER }
            }
            Pressable {
                class: "{TAP} size-9 rounded-[11px] text-amber-700 dark:text-amber-300",
                title: "Newer rev",
                "data-step": "newer",
                pressing: if walks(TimeStep::Forward) { Pressing::Dead } else { Pressing::Live },
                onpress: move |()| stepped(TimeStep::Forward),
                Face { icon: icons::STEP_NEWER }
            }
            button {
                class: "h-9 min-w-22 rounded-full bg-amber-500 px-4 text-sm font-medium \
                        text-zinc-950 transition hover:bg-amber-400",
                title: "Return to current (Escape)",
                "data-step": "return",
                onclick: move |_| shell.read().say(
                    blockworx_kernel::Event::Action(Action::ViewHead),
                ),
                "Return"
            }
        }
    }
}

/// How a menu's own sheet is drawn: floating chrome, so a shadow and a large
/// radius, against the docked strip's flat square.
pub const MENU: &str = "absolute left-0 top-full z-50 mt-2 min-w-52 rounded-2xl bg-white p-1.5 \
     shadow-lg ring-1 ring-zinc-950/5 dark:bg-zinc-800 dark:ring-white/10 \
     data-[state=closed]:hidden";

/// One row of one.
pub const MENU_ROW: &str = "flex w-full items-center gap-2.5 \
     rounded-lg px-2.5 py-2 text-left text-sm transition hover:bg-zinc-950/6 focus:bg-zinc-950/6 focus:outline-none \
     data-[disabled=true]:opacity-40 dark:hover:bg-white/10 dark:focus:bg-white/10 \
     [&_svg]:size-[18px] [&_svg]:flex-none [&_svg]:stroke-[1.7]";