blockworx_web/

sheet.rs

//! Parts and History: the two sidebar sections that browse rather than act
//! (`docs/cad-ui-spec.md` §8).
//!
//! **Nothing in them mutates the document.** History changes what is being
//! looked at; Parts changes what is selected or which level is in context.
//! Every pick completes a hand-off and leaves the panel open.
//!
//! What is typed into either filter, which branches are open and which tree
//! node Parts is focused on are the shell's, not the kernel's (shell-on-kernel
//! D7). Which *rows* those choices come to is the kernel's —
//! [`blockworx_kernel::nav`] — so the two front ends browse one tree.

use std::collections::HashSet;

use blockworx_canvas2d::css_color;
use blockworx_doc::id::BlockId;
use blockworx_kernel::nav::{self, Filtered, Index};
use blockworx_kernel::{Event, NavTree};
use blockworx_paint::theme::{Role, Theme, accent_role, avatar_role};
use blockworx_store::doc::Viewing;
use blockworx_store::history::{Query, Row, said, tag_query};
use blockworx_store::tags::Tagging;
use blockworx_tools::tool::Action;
use dioxus::prelude::*;

use crate::shell::Shell;

/// Horizontal step per tree depth, which the mockup's rows wear as padding.
const INDENT: f32 = 16.0;

/// How many vocabulary suggestions a tag field offers. The list scrolls, so
/// it is a cap on how long the vocabulary may get rather than on what fits.
const SUGGESTIONS: usize = 8;

/// One row of a sidebar list: the mockup's `.row`, at the 44 px target.
pub const ROW: &str = "flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left \
     transition hover:bg-zinc-950/5 dark:hover:bg-white/5";

/// The one that is on the canvas.
pub const CURRENT: &str = "flex w-full items-center gap-3 rounded-xl bg-sky-500/12 px-3 py-2 \
     text-left transition dark:bg-sky-400/15";

pub const FIELD: &str = "w-full rounded-xl bg-zinc-950/5 px-3 py-2 text-sm outline-none \
     placeholder:text-zinc-400 focus:outline-2 focus:outline-sky-500 dark:bg-white/5";

pub const MUTED: &str = "text-xs text-zinc-500 dark:text-zinc-400";

// ── History ──────────────────────────────────────────────────────────────

/// The log, newest first, under a day heading each. The rev on the canvas
/// expands in place into the card that holds every field and the tag editor.
#[component]
pub fn History(shell: Shell) -> Element {
    let chrome = shell.chrome();
    let mut search = use_signal(String::new);
    let rows = chrome.read().history.clone();
    let lens = chrome.read().top_bar.lens.clone();
    let query = Query::parse(&search());
    let shown: Vec<&Row> = rows
        .iter()
        .rev()
        .filter(|row| row.rev != lens.head && query.admits(row))
        .collect();
    let counted = if query.narrows() {
        format!("{} of {}", shown.len(), rows.len())
    } else {
        rows.len().to_string()
    };
    let raise = use_hook(|| CopyValue::new(shell.clone()));
    let mut day = None;
    rsx! {
        div { class: "flex items-center gap-2 px-1 pb-2",
            input {
                class: FIELD,
                value: "{search}",
                placeholder: "Search history",
                "aria-label": "Search history",
                "data-search": "history",
                oninput: move |event| search.set(event.value()),
            }
            span { class: "{MUTED} flex-none", "{counted}" }
        }
        // The head is not a row of its own: it is what "Current" stands for,
        // and two entries for one rev would read as two revs.
        if !query.narrows() {
            button {
                class: if lens.viewing == Viewing::Head { CURRENT } else { ROW },
                "data-rev": "head",
                onclick: move |_| {
                    if lens.viewing != Viewing::Head {
                        raise.read().say(Event::Action(Action::ViewHead));
                    }
                },
                span { class: "size-[9px] flex-none rounded-full bg-sky-500" }
                span { class: "min-w-0 flex-1 text-sm", "Current" }
                span { class: MUTED,
                    if lens.viewing == Viewing::Head { "editing" } else { "return" }
                }
            }
        }
        if shown.is_empty() {
            p { class: "{MUTED} px-3 py-2",
                "Nothing matches. Try tag:, by:, in:, or # for a rev number."
            }
        }
        for row in shown {
            {
                let heading = row.day().filter(|at| Some(at) != day.as_ref());
                if let Some(at) = &heading {
                    day = Some(*at);
                }
                let viewing = lens.viewing == Viewing::Past(row.rev);
                rsx! {
                    if let Some(at) = heading {
                        p { key: "day-{row.rev.get()}", class: "{MUTED} px-3 pb-1 pt-3 font-medium",
                            "{at.label(blockworx_store::history::now())}"
                        }
                    }
                    if viewing {
                        RevCard {
                            key: "rev-{row.rev.get()}",
                            shell: shell.clone(),
                            row: row.clone(),
                            rows: rows.clone(),
                            search,
                        }
                    } else {
                        RevRow {
                            key: "rev-{row.rev.get()}",
                            shell: shell.clone(),
                            row: row.clone(),
                            rows: rows.clone(),
                            search,
                        }
                    }
                }
            }
        }
    }
}

/// One commit, in the order a reader scans for it: who, what, where, when.
#[component]
fn RevRow(shell: Shell, row: Row, rows: Vec<Row>, search: Signal<String>) -> Element {
    let theme = shell.theme();
    let rev = row.rev;
    let scope = row.scope_names().join(" / ");
    let tags = row.tags.clone();
    let inverse = row.is_inverse();
    let raise = use_hook(|| CopyValue::new(shell));
    rsx! {
        div { class: "flex flex-col", "data-row": "{rev.get()}",
            button {
                class: ROW,
                "data-rev": "{rev.get()}",
                title: "{row.full_when()}",
                onclick: move |_| raise.read().say(Event::Action(Action::ViewRev(rev))),
                { avatar(&row, &theme, Disc::Row) }
                span { class: "min-w-0 flex-1",
                    span {
                        class: if inverse {
                            "block text-sm italic text-zinc-500 dark:text-zinc-400"
                        } else {
                            "block text-sm"
                        },
                        "{said(&row, &rows)}"
                    }
                    if !scope.is_empty() {
                        // Truncated from the left, so the leaf — the thing the
                        // act happened to — is what survives a narrow panel.
                        span {
                            class: "{MUTED} block truncate",
                            dir: "rtl",
                            title: "{scope}",
                            "{scope}"
                        }
                    }
                }
                span { class: "flex flex-none flex-col items-end",
                    span { class: MUTED, "{row.time()}" }
                    span { class: MUTED, "#{rev.get()}" }
                }
            }
            if !tags.is_empty() {
                Chips { tags, search }
            }
        }
    }
}

/// The rev on the canvas, expanded in place: every field in full, and the
/// tag editor. Tags are annotations on history, not document edits — naming
/// one authors no rev.
///
/// It carries the author's disc like every row under it — a card that
/// dropped it would read as a different kind of thing — with the instant it
/// was written under the name, the description in the weight the eye lands
/// on, and the path small and quiet beneath it.
#[component]
fn RevCard(shell: Shell, row: Row, rows: Vec<Row>, search: Signal<String>) -> Element {
    let theme = shell.theme();
    let rev = row.rev;
    let scope = row.scope_names().join(" / ");
    rsx! {
        div {
            class: "flex flex-col gap-2.5 rounded-2xl bg-sky-500/12 p-3 dark:bg-sky-400/15",
            "data-rev": "{rev.get()}",
            "aria-current": "true",
            div { class: "flex items-center gap-2.5",
                { avatar(&row, &theme, Disc::Card) }
                span { class: "flex min-w-0 flex-1 flex-col",
                    span { class: "truncate text-sm font-semibold", "{row.author()}" }
                    span { class: "{MUTED} truncate", "{row.full_when()}" }
                }
                span { class: "{MUTED} flex-none", "#{rev.get()}" }
            }
            div { class: "flex flex-col gap-1",
                p { class: "text-[15px] leading-5", "{said(&row, &rows)}" }
                if !scope.is_empty() {
                    // Truncated from the left, as the rows' scope is, so the
                    // leaf — the thing the act happened to — survives.
                    p {
                        class: "truncate text-[11px] text-zinc-500 dark:text-zinc-400",
                        dir: "rtl",
                        title: "{scope}",
                        "{scope}"
                    }
                }
            }
            span { class: "h-px bg-zinc-950/10 dark:bg-white/15" }
            TagEditor { shell, row, rows, search }
        }
    }
}

/// A rev's tags, as chips that narrow the search to themselves.
///
/// They sit under their own row and are indented past the author's disc, so
/// they line up with the words they belong to — a chip laid over the row
/// would cover the disc and read as the next row's.
#[component]
fn Chips(tags: Vec<String>, search: Signal<String>) -> Element {
    rsx! {
        span { class: "flex flex-wrap gap-1 pb-1.5 pl-[50px] pr-3",
            for tag in tags {
                button {
                    key: "{tag}",
                    class: "rounded-md bg-zinc-950/6 px-1.5 text-[11px] \
                            text-zinc-600 dark:bg-white/10 dark:text-zinc-300",
                    "data-tag": "{tag}",
                    onclick: {
                        let tag = tag.clone();
                        move |event: dioxus::prelude::Event<MouseData>| {
                            event.stop_propagation();
                            search.set(tag_query(&tag));
                        }
                    },
                    "{tag}"
                }
            }
        }
    }
}

/// The tags on the viewed rev, removable, plus a field that adds one and the
/// vocabulary the rest of the log already uses.
#[component]
fn TagEditor(shell: Shell, row: Row, rows: Vec<Row>, search: Signal<String>) -> Element {
    let rev = row.rev;
    let mut draft = use_signal(String::new);
    let mut asking = use_signal(|| false);
    let raise = use_hook(|| CopyValue::new(shell));
    let tag = move |name: String, how: Tagging| {
        raise
            .read()
            .say(Event::Action(Action::TagRev { at: rev, name, how }));
    };
    let offered = suggestions(&draft(), &row, &rows);
    rsx! {
        div { class: "flex flex-wrap items-center gap-1",
            for name in row.tags.clone() {
                span {
                    key: "{name}",
                    class: "flex items-center rounded-md bg-zinc-950/6 pl-1.5 text-[11px] \
                            dark:bg-white/10",
                    button {
                        class: "pr-1",
                        "data-tag": "{name}",
                        onclick: {
                            let name = name.clone();
                            move |_| search.set(tag_query(&name))
                        },
                        "{name}"
                    }
                    button {
                        class: "px-1 text-zinc-500",
                        title: "Remove this tag",
                        "data-untag": "{name}",
                        onclick: {
                            let name = name.clone();
                            move |_| tag(name.clone(), Tagging::Removed)
                        },
                        "\u{00d7}"
                    }
                }
            }
            span { class: "relative",
                input {
                    class: "w-[82px] rounded-md bg-zinc-950/5 px-1.5 py-0.5 text-[11px] outline-none \
                            focus:outline-2 focus:outline-sky-500 dark:bg-white/5",
                    value: "{draft}",
                    placeholder: "Add tag",
                    "aria-label": "Add tag",
                    "data-addtag": "true",
                    onfocusin: move |_| asking.set(true),
                    onfocusout: move |_| asking.set(false),
                    oninput: move |event| draft.set(event.value()),
                    onkeydown: move |event| {
                        if event.key() == Key::Enter && !draft.peek().trim().is_empty() {
                            tag(draft.replace(String::new()), Tagging::Added);
                        }
                    },
                }
                // What the rest of the log is already called, offered the
                // moment the field is clicked into: the vocabulary is what
                // keeps a diagram tagged in one spelling rather than five.
                if asking() && !offered.is_empty() {
                    span {
                        class: "absolute left-0 top-full z-50 mt-1 flex max-h-40 min-w-[136px] \
                                flex-col overflow-y-auto rounded-xl bg-white p-1 shadow-lg \
                                ring-1 ring-zinc-950/5 dark:bg-zinc-800 dark:ring-white/10",
                        role: "listbox",
                        "data-suggests": "true",
                        for name in offered {
                            button {
                                key: "suggest-{name}",
                                class: "rounded-lg px-2 py-1 text-left text-[11px] text-zinc-700 \
                                        transition hover:bg-zinc-950/6 dark:text-zinc-200 \
                                        dark:hover:bg-white/10",
                                role: "option",
                                "data-suggest": "{name}",
                                // Taken on the press rather than the click, so
                                // the field never loses the focus and takes the
                                // list away before the pick lands.
                                onmousedown: {
                                    let name = name.clone();
                                    move |event: dioxus::prelude::Event<MouseData>| {
                                        event.prevent_default();
                                        draft.set(String::new());
                                        tag(name.clone(), Tagging::Added);
                                    }
                                },
                                "{name}"
                            }
                        }
                    }
                }
            }
        }
    }
}

/// The vocabulary the log already uses, minus what this rev already carries,
/// so naming things twice two ways is the harder path.
fn suggestions(draft: &str, row: &Row, rows: &[Row]) -> Vec<String> {
    let typed = draft.trim().to_lowercase();
    let mut seen: Vec<String> = Vec::new();
    for name in rows.iter().flat_map(|at| &at.tags) {
        if row.tags.contains(name) || seen.contains(name) {
            continue;
        }
        if typed.is_empty() || name.to_lowercase().contains(&typed) {
            seen.push(name.clone());
        }
    }
    seen.truncate(SUGGESTIONS);
    seen
}

/// The author, as the initials disc a name always lands on the same colour
/// of. An unattributed rev draws nothing and keeps the slot.
fn avatar(row: &Row, theme: &Theme, size: Disc) -> Element {
    let by = row.author().to_owned();
    if by.is_empty() {
        return rsx! {
            span { class: "{size.class()} flex-none" }
        };
    }
    let disc = css_color(theme.resolve(avatar_role(&by)));
    let ink = css_color(theme.resolve(Role::AuthorAvatarText));
    let initials = row.initials();
    rsx! {
        span {
            class: "{size.class()} grid flex-none place-items-center rounded-full font-medium",
            style: "background:{disc};color:{ink}",
            title: "{by}",
            "{initials}"
        }
    }
}

/// Which list the disc is drawn in: a row of the log, or the card the viewed
/// rev expands into, which stands a little larger.
#[derive(Clone, Copy, PartialEq, Eq, Debug)]
enum Disc {
    Row,
    Card,
}

impl Disc {
    fn class(self) -> &'static str {
        match self {
            Disc::Row => "size-[26px] text-[10px]",
            Disc::Card => "size-[30px] text-[11px]",
        }
    }
}

// ── Parts ────────────────────────────────────────────────────────────────

/// The block tree. Three mechanisms make a deep tree workable in a narrow
/// panel, and all three are [`blockworx_kernel::nav`]'s: focus re-roots,
/// the filter flattens, and selecting on the canvas reveals.
#[component]
pub fn Parts(shell: Shell) -> Element {
    let chrome = shell.chrome();
    let mut filter = use_signal(String::new);
    let mut expanded = use_signal(HashSet::<BlockId>::new);
    let mut focus = use_signal(|| None::<BlockId>);
    let tree = chrome.read().nav_tree.clone();
    let selected = tree.selected.clone();
    let theme = shell.theme();

    // Follow the canvas: a selection or a level the panel has not shown yet
    // opens the block's ancestors and gives up a focus that would hide it.
    // Edge-triggered, so it never fights the user's own expand and collapse.
    let mut revealed = use_signal(Vec::<BlockId>::new);
    {
        let signature: Vec<BlockId> = selected
            .iter()
            .copied()
            .chain(tree.path.segments().iter().copied())
            .collect();
        if *revealed.peek() != signature {
            revealed.set(signature);
            let index = Index::of(&tree, None);
            let mut open = expanded.peek().clone();
            for &at in tree.path.segments() {
                open.insert(at);
            }
            if let Some(target) = selected
                .first()
                .copied()
                .or_else(|| tree.path.segments().last().copied())
            {
                if focus.peek().is_some_and(|at| !index.under(at, target)) {
                    focus.set(None);
                }
                index.expand_ancestors(blockworx_editor::path::Scope::Root, target, &mut open);
            }
            expanded.set(open);
        }
    }

    let typed = filter();
    let (filtered, wanted) = Filtered::of(&typed);
    let index = Index::of(&tree, wanted);
    let root = match filtered {
        // The filter reads the whole document, crossing the focus boundary.
        Filtered::Yes => blockworx_editor::path::Scope::Root,
        Filtered::No => nav::rooted_at(&tree, focus()),
    };
    let rows = index.rows(&tree, &expanded.read(), root, filtered);
    let raise = use_hook(|| CopyValue::new(shell.clone()));
    rsx! {
        div { class: "px-1 pb-2",
            input {
                class: FIELD,
                value: "{filter}",
                placeholder: "Search all blocks\u{2026}",
                "aria-label": "Search all blocks",
                "data-search": "parts",
                oninput: move |event| filter.set(event.value()),
            }
        }
        if let Some(at) = focus() {
            Crumbs { tree: tree.clone(), focus, at }
        }
        if rows.is_empty() {
            p { class: "{MUTED} px-3 py-2",
                if filtered == Filtered::Yes { "No matches" } else { "No blocks" }
            }
        }
        for row in rows {
            {
                let id = row.id;
                let here = selected.contains(&id);
                let dot = css_color(
                    theme.resolve(accent_role(row.accent).unwrap_or(Role::AccentDefault)),
                );
                let ancestry = row.ancestors.as_ref().map(|at| at.join("/"));
                rsx! {
                    div {
                        key: "{id}",
                        class: "flex items-center",
                        style: "padding-left:{row.depth as f32 * INDENT}px",
                        button {
                            class: "grid size-4 flex-none place-items-center text-[9px] \
                                    text-zinc-500",
                            "data-twisty": "{id}",
                            "aria-expanded": if row.open { "true" } else { "false" },
                            disabled: !row.has_children,
                            onclick: move |_| {
                                let mut open = expanded.peek().clone();
                                if !open.remove(&id) {
                                    open.insert(id);
                                }
                                expanded.set(open);
                            },
                            if row.has_children {
                                if row.open { "\u{25bc}" } else { "\u{25b6}" }
                            }
                        }
                        button {
                            class: if here { CURRENT } else { ROW },
                            "data-block": "{id}",
                            "aria-current": if here { "true" } else { "false" },
                            onclick: move |event: dioxus::prelude::Event<MouseData>| {
                                raise.read().say(Event::Action(Action::NavSelect {
                                    block: id,
                                    extend: event.modifiers().shift(),
                                }));
                            },
                            span {
                                class: "size-[6px] flex-none rounded-full",
                                style: "background:{dot}",
                            }
                            span { class: "min-w-0 flex-1",
                                span { class: "block truncate text-sm", "{row.label}" }
                                if let Some(path) = ancestry {
                                    span {
                                        class: "{MUTED} block truncate",
                                        dir: "rtl",
                                        title: "{path}",
                                        "{path}"
                                    }
                                }
                            }
                            if let Some(leaves) = row.leaves {
                                span { class: MUTED, "{leaves}" }
                            }
                        }
                        if row.has_children {
                            button {
                                class: "{MUTED} flex-none px-1",
                                title: "Show only this",
                                "data-focus": "{id}",
                                onclick: move |_| focus.set(Some(id)),
                                "\u{bb}"
                            }
                        }
                    }
                }
            }
        }
    }
}

/// The way back out of a focus, one ancestor at a time.
#[component]
fn Crumbs(tree: NavTree, focus: Signal<Option<BlockId>>, at: BlockId) -> Element {
    let index = Index::of(&tree, None);
    let trail = index.ancestor_ids(blockworx_editor::path::Scope::Root, at);
    rsx! {
        nav { class: "flex flex-wrap items-center gap-1 px-3 pb-2 text-xs",
            button {
                class: "text-sky-600 dark:text-sky-400",
                "data-crumb": "root",
                onclick: move |_| focus.set(None),
                "Diagram"
            }
            for id in trail {
                span { key: "crumb-{id}", class: MUTED, "/" }
                button {
                    class: "text-sky-600 dark:text-sky-400",
                    "data-crumb": "{id}",
                    onclick: move |_| focus.set(Some(id)),
                    "{nav::label_of(&tree, id)}"
                }
            }
            span { class: MUTED, "/" }
            span { class: "font-medium", "{nav::label_of(&tree, at)}" }
        }
    }
}

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

    fn row(label: &str, tags: &[&str]) -> Row {
        Row {
            rev: blockworx_doc::rev::Rev::ZERO,
            label: label.to_owned(),
            touched: 0,
            written: None,
            tags: tags.iter().map(|at| (*at).to_owned()).collect(),
        }
    }

    /// The vocabulary offered is the rest of the log's, and never a tag this
    /// rev already carries — suggesting what is already there teaches nothing.
    #[test]
    fn suggestions_offer_the_logs_vocabulary_minus_this_revs_own() {
        let rows = vec![
            row("Drew it", &["review"]),
            row("Moved it", &["release", "review"]),
        ];
        let carried = row("Named it", &["review"]);
        assert_eq!(suggestions("", &carried, &rows), vec!["release"]);
        assert_eq!(suggestions("rel", &carried, &rows), vec!["release"]);
        assert!(suggestions("zzz", &carried, &rows).is_empty());
    }

    /// A rev with no tags of its own is offered every distinct name the log
    /// holds, listed once each.
    #[test]
    fn a_name_is_offered_once_however_many_revs_wear_it() {
        let rows = vec![
            row("a", &["review"]),
            row("b", &["review"]),
            row("c", &["cut"]),
        ];
        assert_eq!(
            suggestions("", &row("d", &[]), &rows),
            vec!["review", "cut"]
        );
    }
}