feat(web): sidebar cards, a shaded tree head, icons, aligned Diffusion tables (closes #152) c9aacc0e7dc1

//! Small inline icons (oxygenhub#152): 16-unit SVGs drawn in

//! `currentColor`, so they take the colour of the text around them.

/// The opening tag every icon shares.

macro_rules! open {

    () => {

        r#"<svg class="ic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">"#

    };

}

/// The icon by name, as markup; empty for a name it does not know.

pub fn svg(name: &str) -> &'static str {

    match name {

        "home" => concat!(open!(), r#"<path d="M2.5 7.5 8 3l5.5 4.5V13a.5.5 0 0 1-.5.5H9.5V10h-3v3.5H3a.5.5 0 0 1-.5-.5z"/></svg>"#),

        "explore" => concat!(open!(), r#"<circle cx="8" cy="8" r="6"/><path d="m10.6 5.4-1.6 3.6-3.6 1.6 1.6-3.6z"/></svg>"#),

        "help" => concat!(

            open!(),

            r#"<circle cx="8" cy="8" r="6"/><path d="M6.3 6.4a1.8 1.8 0 1 1 2.5 1.6c-.5.2-.8.6-.8 1.1v.4"/><circle cx="8" cy="11.4" r=".5" fill="currentColor" stroke="none"/></svg>"#

        ),

        "projects" => concat!(open!(), r#"<rect x="2" y="2.5" width="12" height="11" rx="1.5"/><path d="M6 2.5v11M10 2.5v7"/></svg>"#),

        "bell" => concat!(open!(), r#"<path d="M4 11V7a4 4 0 0 1 8 0v4l1.2 1.5H2.8z"/><path d="M6.6 14a1.5 1.5 0 0 0 2.8 0"/></svg>"#),

        "settings" => concat!(

            open!(),

            r#"<path d="M2 4.5h7M12.5 4.5H14M2 11.5h1.5M7 11.5h7"/><circle cx="10.75" cy="4.5" r="1.75"/><circle cx="5.25" cy="11.5" r="1.75"/></svg>"#

        ),

        "admin" => concat!(open!(), r#"<path d="M8 1.8 13 3.8v3.7c0 3-2.1 5.6-5 6.7-2.9-1.1-5-3.7-5-6.7V3.8z"/></svg>"#),

        "dir" => concat!(

            open!(),

            r#"<path d="M1.75 3h4.1l1.6 1.6h6.8c.4 0 .75.35.75.75v7.15c0 .4-.35.75-.75.75H1.75c-.4 0-.75-.35-.75-.75V3.75c0-.4.35-.75.75-.75z" fill="currentColor" stroke="none"/></svg>"#

        ),

        "file" => concat!(

            open!(),

            r#"<path d="M4 1.75h5l3.5 3.5v8.5a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5V2.25a.5.5 0 0 1 .5-.5z"/><path d="M9 1.75v3.5h3.5"/></svg>"#

        ),

        "link" => concat!(

            open!(),

            r#"<path d="M4 1.75h5l3.5 3.5v8.5a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5V2.25a.5.5 0 0 1 .5-.5z"/><path d="M6 11.5 9.5 8M7 8h2.5v2.5"/></svg>"#

        ),

        "subrepo" => concat!(open!(), r#"<path d="M2.5 5 8 2.5 13.5 5v6L8 13.5 2.5 11z"/><path d="M2.5 5 8 7.5 13.5 5M8 7.5v6"/></svg>"#),

        "up" => concat!(open!(), r#"<path d="M6 3.5 3 6.5l3 3"/><path d="M3 6.5h6.5a3 3 0 0 1 3 3v3"/></svg>"#),

        "history" => concat!(open!(), r#"<circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/></svg>"#),

        _ => "",

    }

}

#[cfg(test)]

mod tests {

    #[test]

    fn every_named_icon_is_one_closed_svg() {

        for name in ["home", "explore", "help", "projects", "bell", "settings", "admin", "dir", "file", "link", "subrepo", "up", "history"]

        {

            let s = super::svg(name);

            assert!(s.starts_with("<svg class=\"ic\"") && s.ends_with("</svg>"), "{name}");

            assert_eq!(s.matches("<svg").count(), 1, "{name}");

        }

        assert_eq!(super::svg("nothing"), "");

    }

}

- **Diffusion (#148, docs/diffusion.md).** When a repository that others pin as a subrepo moves on, each consumer that follows it gets a proposal moving the pin, signed by the hub, tested by the consumer's own pipeline, with the upstream's changes listed. One proposal per consumer and subrepo, kept up to date; never landed by itself. Turned on per repository (Settings › Diffusion, `PUT /repos/{owner}/{name}/diffusion`, or `follow` in `.oxymodules`), off by default; `green` waits for the upstream's run to pass. A repository's page shows who uses it and how far behind each is (Diffusion › Diffuses to, `GET /repos/{owner}/{name}/consumers`). Consumers are bumped on the bookmark their work lands on, learned from where their proposals land.

- **Tidier pages (#152).** The repository sidebar is a column of cards with shaded headings: Diffusion in one card (Takes from and Diffuses to, each with its pill), the ten most recently moved bookmarks with a link to the rest, and the hub's delegate key shown with the OxygenHub mark. The code tree has a shaded head with the latest change and the history, and folder and file icons; the site bar has icons; the Diffusion tables share one column grid; Help › Coming from GitHub covers submodules and Renovate.

/* The tree under its shaded head (#152): the head takes the top corners. */

:root[data-look="github"] .tree-box .tree-head + table.tree { border-top-left-radius: 0; border-top-right-radius: 0; }

:root[data-look="github"] .side-card > h3 { font-size: 14px; }

impl Overview {

    /// The sidebar's bookmarks (#152): the default first, then the most

    /// recently moved, ten in all.

    pub fn recent_bookmarks(&self) -> Vec<&BookmarkView> {

        let mut list: Vec<&BookmarkView> = self.bookmarks.iter().collect();

        list.sort_by(|a, b| b.default.cmp(&a.default).then(b.latest_ms.cmp(&a.latest_ms)).then_with(|| a.name.cmp(&b.name)));

        list.truncate(10);

        list

    }

}

    /// The hub's own delegate key, filled by the web layer (#152).

    pub hub: bool,

        let entry = by.entry(id).or_insert_with(|| Contributor {

            name,

            key: a.key.clone(),

            changes: 0,

            account: None,

            via: Vec::new(),

            hub: false,

        });

pub mod icons;

    let hub_key = app.hub_key.key.to_hex();

        c.hub = c.key == hub_key;

    if let Some(c) = o.latest.as_mut() {

        c.author.account = linked.get(&c.author.key).cloned();

    }

    /// The tree's icon for the entry (oxygenhub#152).

    pub fn icon(&self) -> &'static str {

        super::icons::svg(match self {

            EntryKind::Dir => "dir",

            EntryKind::File => "file",

            EntryKind::Symlink => "link",

            EntryKind::Subrepo => "subrepo",

        })

    }

    pub fn class(&self) -> &'static str {

            EntryKind::Dir => "ic-dir",

            EntryKind::File => "ic-file",

            EntryKind::Symlink => "ic-link",

            EntryKind::Subrepo => "ic-sub",

    assert!(page.contains("Diffuses to") && page.contains("andy/game") && page.contains("1 behind"), "the page shows it");

    assert!(page.contains("Diffuses to") && page.contains("andy/game") && page.contains(&format!("#{}", p2.number)), "the bump is listed");

    assert!(page.contains("Takes from") && page.contains("andy/api"));

    assert!(overview.contains("Takes from") && overview.contains(">Diffusion</a>"), "the tab and the panel");

        home.contains("href=\"/projects/andy\"><svg class=\"ic\"") && home.contains("title=\"andy's project boards\">Projects</a>"),

  <a href="/">{{ crate::web::icons::svg("home")|safe }}{% if shell.user.is_some() %}Dashboard{% else %}Repositories{% endif %}</a>

  <a href="/explore">{{ crate::web::icons::svg("explore")|safe }}Explore</a>

  <a href="/help">{{ crate::web::icons::svg("help")|safe }}Help</a>

  {% if let Some(u) = shell.user %}<a href="/projects/{{ u }}">{{ crate::web::icons::svg("projects")|safe }}Projects</a><a href="/notifications">{{ crate::web::icons::svg("bell")|safe }}Notifications</a><a href="/settings">{{ crate::web::icons::svg("settings")|safe }}Settings</a>{% endif %}

  {% if shell.is_admin %}<a class="admin" href="/admin">{{ crate::web::icons::svg("admin")|safe }}Admin</a>{% endif %}

      <div><h3>Use</h3><a href="/help">Help</a><a href="/explore">{{ crate::web::icons::svg("explore")|safe }}Explore</a><a href="/api/v1/repos">API</a><a href="/.well-known/oxyhub-key">Hub key</a></div>

<h2>Diffuses to <span class="count-chip">{{ used_by.len() }}</span></h2>

<h2>Takes from <span class="count-chip">{{ follows.len() }}</span></h2>

  <colgroup><col class="df-c-repo"><col class="df-c-pin"><col class="df-c-behind"><col class="df-c-pill"><col class="df-c-bump"><col class="df-c-landed"><col class="df-c-follow"></colgroup>

    <td><a href="/{{ c.owner }}/{{ c.name }}">{{ c.owner }}/{{ c.name }}</a> <span class="small mute df-path">{{ c.path }}</span></td>

      <tr><td>git submodule</td><td><strong>subrepo</strong></td><td>Another Oxygen repository pinned at a path by its heads, listed in <code>.oxymodules</code>. The pin is a change like any other, so bumping it combines with your other work instead of conflicting with it.</td></tr>

      <tr><td>Renovate, Dependabot</td><td><strong>Diffusion</strong></td><td>Built into the hub, not a bot you install. When a subrepo you pin moves on its default bookmark, the hub works out the bump, runs your checks on it and opens a proposal labelled <code>dependencies</code> with the upstream's changelog. Choose per repository under Settings › Diffusion (when the upstream is green, on every move, or off), or per subrepo in <code>.oxymodules</code>; it never lands anything for you. The Diffusion tab shows both directions: what you pin, and who pins you.</td></tr>

      {% if o.latest.is_none() %}<a class="go small" href="{{ repo.url }}/changes/{{ repo.default_bookmark }}">{{ o.changes|plural("change", "changes") }}</a>{% endif %}

    <div class="tree-box">

    {% if let Some(c) = o.latest %}<div class="tree-head">

      <span class="tree-title">{% if let Some(a) = c.author.account %}<a class="who" href="/{{ a }}"><img class="avatar" src="/avatar/{{ a }}" alt="" width="20" height="20"> {{ a }}</a>{% else %}<span class="who">{{ c.author.name }}</span>{% endif %} <a class="t" href="{{ repo.url }}/change/{{ c.hash }}" title="{{ c.title }}">{{ c.title }}</a></span>

      <span class="tree-meta"><a href="{{ repo.url }}/change/{{ c.hash }}"><code>{{ c.short }}</code></a><time class="ago" title="{{ c.when_ms|when }}">{{ c.when_ms|ago }}</time><a class="hist" href="{{ repo.url }}/changes/{{ repo.default_bookmark }}">{{ crate::web::icons::svg("history")|safe }} {{ o.changes|plural("change", "changes") }}</a></span>

    </div>{% endif %}

    </div>

  <aside class="side cards">

    <section class="side-card"><h3>About</h3><div class="body">

    {% if !topics.is_empty() %}<p class="topics">{% for t in topics %}<a class="topic" href="/explore?topic={{ t }}">{{ t }}</a>{% endfor %}</p>{% endif %}

    {% if let Some(l) = o.license %}<p class="small">Licence: <a href="{{ repo.url }}/file/{{ repo.default_bookmark }}/{{ l }}">{{ l }}</a></p>{% endif %}

    </div></section>

    {% if let Some(rel) = latest_release %}<section class="side-card"><h3>Latest release</h3><div class="body"><p><a href="{{ repo.url }}/releases/tag/{{ rel.tag }}">{{ rel.title }}</a> <span class="small mute">{{ rel.created_ms|ago_i }}</span></p></div></section>{% endif %}

    {% if !follows.is_empty() || !used_by.is_empty() %}

    <section class="side-card"><h3>Diffusion <a class="more" href="{{ repo.url }}/diffusion">details ›</a></h3><div class="body">

    {% if !follows.is_empty() %}<h4>Takes from</h4>

    <ul class="plain df-list">{% for (up, c) in follows %}<li><a class="df-name" href="/{{ up.owner }}/{{ up.name }}" title="pinned at {{ c.path }}">{{ up.owner }}/{{ up.name }}</a>

      <span class="df-line"><span class="df-pill" role="img" aria-label="upstream {{ c.upstream.word }}, here {{ c.downstream.word }}"><span class="df-half {{ c.upstream.class }}" title="Upstream: {{ c.upstream.title }}">{{ c.upstream.word }}</span><span class="df-half {{ c.downstream.class }}" title="Here: {{ c.downstream.title }}">{{ c.downstream.word }}</span></span>{% if let Some(n) = c.bump %}<a href="{{ repo.url }}/proposal/{{ n }}">bump #{{ n }}</a>{% endif %}</span></li>{% endfor %}</ul>{% endif %}

    {% if !used_by.is_empty() %}<h4>Diffuses to <span class="count-chip">{{ used_by.len() }}</span></h4>

    <ul class="plain df-list">{% for c in used_by %}<li><a class="df-name" href="/{{ c.owner }}/{{ c.name }}">{{ c.owner }}/{{ c.name }}</a>

      <span class="df-line"><span class="df-pill" role="img" aria-label="here {{ c.upstream.word }}, {{ c.name }} {{ c.downstream.word }}"><span class="df-half {{ c.upstream.class }}" title="Here: {{ c.upstream.title }}">{{ c.upstream.word }}</span><span class="df-half {{ c.downstream.class }}" title="{{ c.owner }}/{{ c.name }}: {{ c.downstream.title }}">{{ c.downstream.word }}</span></span>{% match c.behind %}{% when Some(0) %}{% when Some(n) %}<span class="mute">{{ n }} behind</span>{% when None %}{% endmatch %}</span></li>{% endfor %}</ul>{% endif %}

    </div></section>

    {% endif %}

    <section class="side-card"><h3>Contributors <span class="count-chip">{{ o.contributors.len() }}</span></h3><div class="body">

      <li class="c">{% if let Some(u) = c.account %}<img class="avatar sm" src="/avatar/{{ u }}" alt="" width="20" height="20"><a class="who" href="/{{ u }}" title="{{ c.name }}">{{ u }} <span class="mute small">{{ c.name }}</span></a>{% else if c.hub %}<img class="avatar sm" src="/favicon.svg" alt="" width="20" height="20"><span class="who" title="{{ c.name }}: this hub's delegate key, signing the changes made in the browser for people who allowed it">{{ c.name }}</span>{% else %}<span class="avatar-none" aria-hidden="true">○</span><span class="who" title="{{ c.name }}">{{ c.name }}</span>{% endif %}<span class="n mute small" title="changes">{{ c.changes }}</span>{% if !c.via.is_empty() %}<ul class="plain via-list">{% for v in c.via %}<li><span class="mute" aria-hidden="true">↳</span> <span class="mute small">via</span> <img class="avatar sm" src="/avatar/agent/{{ v.0 }}" alt="" width="16" height="16"> {{ v.0 }} <span class="mute small" title="changes signed by this agent for them">· {{ v.1 }}</span></li>{% endfor %}</ul>{% endif %}</li>

    </div></section>

    <section class="side-card"><h3>Languages</h3><div class="body">

    </div></section>

    <section class="side-card"><h3>Bookmarks <span class="count-chip">{{ o.bookmarks.len() }}</span>{% if o.bookmarks.len() > 10 %}<a class="more" href="{{ repo.url }}/bookmarks">all {{ o.bookmarks.len() }} ›</a>{% endif %}</h3><div class="body">

    <ul class="plain bookmarks">{% for b in o.recent_bookmarks() %}<li><a href="{{ repo.url }}/tree/{{ b.name }}" title="{{ b.name }}">{{ b.name }}</a>{% if b.heads.len() > 1 %}<span class="tag warn">{{ b.heads.len() }} heads</span>{% endif %}{% if b.conflicted %}<span class="tag bad">conflicts</span>{% endif %}<time class="small mute" title="{{ b.latest_ms|when }}">{{ b.latest_ms|ago }}</time></li>{% endfor %}</ul>

    </div></section>

    <section class="side-card"><h3>Tags</h3><div class="body">

    </div></section>

    <section class="side-card"><h3>Trust</h3><div class="body">

    </div></section>

.side-layout.rev { grid-template-columns: minmax(0, 1fr) 320px; }

  .side-layout, .side-layout.rev { grid-template-columns: 1fr; }

/* Every upstream's table shares one column grid (#152), so the tables on

   the Diffusion pages line up with each other. */

table.diffusion { table-layout: fixed; width: 100%; min-width: 880px; }

table.diffusion td { overflow-wrap: anywhere; }

table.diffusion .df-c-repo { width: 26%; }

table.diffusion .df-c-pin { width: 10%; }

table.diffusion .df-c-behind { width: 7%; }

table.diffusion .df-c-pill { width: 17%; }

table.diffusion .df-c-bump { width: 16%; }

table.diffusion .df-c-landed { width: 14%; }

table.diffusion .df-c-follow { width: 10%; }

table.diffusion .df-path { display: block; }

.df-half.df-off { background: transparent; color: var(--mute); border-style: solid; border-width: 0; }

.df-half + .df-half.df-off { border-left: 1px solid var(--line); }

/* Icons (#152): inline SVGs in the colour of their text. */

svg.ic { width: 16px; height: 16px; vertical-align: -3px; flex: none; }

.band a { display: inline-flex; align-items: center; gap: 6px; }

.band a svg.ic { opacity: .8; }

table.tree td.g svg.ic { vertical-align: -3px; }

table.tree td.g.ic-dir { color: #54aeff; }

table.tree td.g.ic-file, table.tree td.g.ic-link { color: var(--mute); }

table.tree td.g.ic-sub { color: var(--acc); }

/* The tree's shaded head (#152): the latest change, and the history. */

.tree-box { margin-top: 4px; }

.tree-head { display: flex; align-items: center; gap: 10px; background: var(--soft); border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 8px 16px; font-size: 13px; }

.tree-head .tree-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tree-head .tree-title a.t { color: var(--ink); }

.tree-head .tree-title a.who { font-weight: 600; color: var(--ink); }

.tree-head img.avatar { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; }

.tree-head .tree-meta { display: flex; align-items: center; gap: 12px; white-space: nowrap; color: var(--mute); }

.tree-head .tree-meta a { color: var(--mute); }

.tree-head .tree-meta a.hist { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 600; }

.tree-box .tree-head + table.tree { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }

@media (max-width: 760px) { .tree-head .tree-meta .ago { display: none; } }

/* The sidebar as cards (#152): each section a rounded box with a shaded

   heading. */

aside.side.cards { display: flex; flex-direction: column; gap: 14px; }

.side-card { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow: hidden; }

.side-card > h3 { margin: 0; padding: 8px 12px; background: var(--soft); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }

.side-card > h3 .more { margin-left: auto; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }

.side-card > .body { padding: 10px 12px; }

.side-card > .body > :first-child { margin-top: 0; }

.side-card > .body > :last-child { margin-bottom: 0; }

.side-card h4 { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--mute); }

.side-card h4:first-child { margin-top: 0; }

ul.contributors li.c { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

ul.contributors li.c > .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

ul.contributors li.c > .n { margin-left: auto; }

ul.df-list { margin: 0; }

ul.df-list li { padding: 6px 0; border-top: 1px solid var(--line); }

ul.df-list li:first-child { border-top: 0; padding-top: 0; }

ul.df-list .df-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

ul.df-list .df-line { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; }

ul.bookmarks li { display: flex; align-items: center; gap: 6px; }

ul.bookmarks li > a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

<tr><td class="g ic-file">{{ crate::web::icons::svg("up")|safe }}</td><td colspan="3"><a href="{{ repo.url }}/tree/{{ t.target.label }}{% if let Some((_, p)) = t.crumbs.iter().rev().nth(1) %}/{{ p }}{% endif %}">..</a></td></tr>

  <td class="g {{ e.kind.class() }}">{{ e.kind.icon()|safe }}</td>