Issue page: GitHub-style sidebar menus and a full-width comment box cb71e18eb6f9

- **The issue page's sidebar, laid out as GitHub's (#82).** Assignees, Labels and Milestone each show what is set under their heading (avatars, coloured label pills) with a gear opening a menu: a filterable checklist (people who can be assigned, with avatars; labels with their colour and description; a milestone) that applies in one go. "Assign yourself" when nobody is assigned. Close, Not planned, Lock and Pin are quiet rows with icons at the foot, evenly spaced, and the comment box is as wide as the conversation.

/* The issue sidebar's actions are quiet rows, not buttons; their first

   letter is an icon, so the look's sentence-case trick must not apply. */

:root[data-look="github"] aside.side button.side-action { background: none; border: 0; box-shadow: none; padding: 5px 0; text-transform: none; font-size: 13px; font-weight: 600; color: var(--ink); }

:root[data-look="github"] aside.side button.side-action:hover { background: none; color: var(--acc); }

:root[data-look="github"] .side-empty button.linkish { font-size: 12px; }

  /* Sidebar menus (oxygenhub#82): type to filter a menu's items; a click

     outside an open menu closes it. */

  document.querySelectorAll("[data-menu-filter]").forEach(function (input) {

    var items = input.closest(".menu-pop").querySelectorAll(".menu-item");

    input.addEventListener("input", function () {

      var q = input.value.trim().toLowerCase();

      items.forEach(function (it) { it.hidden = q !== "" && it.textContent.toLowerCase().indexOf(q) < 0; });

    });

  });

  document.querySelectorAll("details.menu").forEach(function (d) {

    d.addEventListener("toggle", function () {

      var f = d.querySelector("[data-menu-filter]");

      if (d.open && f) f.focus();

    });

  });

  document.addEventListener("click", function (ev) {

    document.querySelectorAll("details.menu[open]").forEach(function (d) { if (!d.contains(ev.target)) d.open = false; });

  });

/// Who an issue of this repository can be assigned to, by username: its

/// owner (an account), its collaborators (directly or through a team) and,

/// when an organisation owns it, the organisation's members. Blocked

/// accounts are left out.

pub async fn assignable(pool: &Pool, repo_id: i64, owner: &str) -> sqlx::Result<Vec<String>> {

    sqlx::query_scalar(

        "SELECT username FROM accounts WHERE banned = 0 AND disabled = 0 AND id IN (\

           SELECT id FROM accounts WHERE username = ?1 \

           UNION SELECT account_id FROM collaborators WHERE repo_id = ?2 AND account_id IS NOT NULL \

           UNION SELECT tm.account_id FROM team_members tm JOIN collaborators c ON c.team_id = tm.team_id WHERE c.repo_id = ?2 \

           UNION SELECT m.account_id FROM org_members m JOIN organisations o ON o.id = m.org_id WHERE o.name = ?1) \

         ORDER BY username COLLATE NOCASE",

    )

    .bind(owner)

    .bind(repo_id)

    .fetch_all(pool)

    .await

}

    /// Who it can be assigned to, for triagers' menu (oxygenhub#82).

    assignable: Vec<String>,

    let mut assignable = if can_triage { accounts::assignable(&app.db, row.id, &row.owner).await.map_err(e)? } else { Vec::new() };

    for a in &assignees {

        if !assignable.iter().any(|x| x.eq_ignore_ascii_case(a)) {

            assignable.push(a.clone());

        }

    }

        assignable,

    /// One or more; with `set`, the whole list of assignees.

    #[serde(default)]

    username: Vec<String>,

    /// `add`, `remove`, or `set` (the menu: exactly these).

    axum_extra::extract::Form(f): axum_extra::extract::Form<AssignForm>,

    let e = |e| Error::from_db(shell.clone(), e);

    let mut named = Vec::new();

    for n in f.username.iter().map(|n| n.trim()).filter(|n| !n.is_empty()) {

        match accounts::account_by_name(&app.db, n).await.map_err(e)? {

            Some(a) => named.push(a),

            None => return detail(&app, shell, &viewer, &owner, &name, number, None, Some(format!("No account {n}."))).await,

        }

    }

    let current = idb::assignees(&app.db, i.id).await.map_err(e)?;

    let has = |a: &accounts::Account| current.iter().any(|c| c.eq_ignore_ascii_case(&a.username));

    // What to add and to take off: one or more names, or (from the menu)

    // the whole list, compared with who is assigned now.

    let (add, remove): (Vec<&accounts::Account>, Vec<String>) = match f.action.as_str() {

        "add" => (named.iter().filter(|a| !has(a)).collect(), Vec::new()),

        "remove" => (Vec::new(), named.iter().filter(|a| has(a)).map(|a| a.username.clone()).collect()),

        "set" => (

            named.iter().filter(|a| !has(a)).collect(),

            current.iter().filter(|c| !named.iter().any(|a| a.username.eq_ignore_ascii_case(c))).cloned().collect(),

        ),

        _ => return Err(Error::bad(shell, "unknown action")),

    for n in &remove {

        if let Some(a) = accounts::account_by_name(&app.db, n).await.map_err(e)? {

            idb::set_assignee(&app.db, i.id, a.id, false).await.map_err(e)?;

            idb::add_event(&app.db, i.id, &me.account.username, "unassigned", &a.username).await.ok();

        }

    }

    for target in add {

        idb::set_assignee(&app.db, i.id, target.id, true).await.map_err(e)?;

        idb::add_event(&app.db, i.id, &me.account.username, "assigned", &target.username).await.ok();

    assert!(r.body.contains("<li><a href=\"/bob\"><img class=\"avatar xs\""), "{}", r.body);

    // oxygenhub#82: the sidebar's menu sets the whole list at once.

    assert!(r.body.contains("Assign people to this issue") && r.body.contains("data-menu-filter"), "the assignees menu");

    let r = post(app, "/andy/demo/issue/1/assign", Some(&andy), &format!("_csrf={csrf_a}&action=set&username=andy&username=bob")).await;

    let assigned = |db: sqlx::SqlitePool| async move {

        let id: i64 = sqlx::query_scalar("SELECT id FROM issues WHERE number = 1").fetch_one(&db).await.unwrap();

        let mut a = db::issues::assignees(&db, id).await.unwrap();

        a.sort();

        a

    };

    assert_eq!(assigned(app.db.clone()).await, ["andy", "bob"], "{}", r.status);

    post(app, "/andy/demo/issue/1/assign", Some(&andy), &format!("_csrf={csrf_a}&action=set&username=bob")).await;

    assert_eq!(assigned(app.db.clone()).await, ["bob"], "set takes off who is not listed");

    assert!(post(app, "/andy/demo/issue/1/state", Some(&andy), &format!("_csrf={csrf_a}&action=pin")).await.body.contains("Unpin issue"));

  <form class="card comment-form" method="post" action="{{ repo.url }}/issue/{{ i.number }}/comment">

<aside class="side side-sections">

  <section class="side-sec">

    <div class="side-head"><h3>Notifications</h3></div>

    <form method="post" action="{{ repo.url }}/issue/{{ i.number }}/subscribe"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button type="submit" class="small side-wide">{% if subscribed %}Unsubscribe{% else %}Subscribe{% endif %}</button></form>

    <p class="side-note">{% if subscribed %}You're receiving notifications because you're subscribed.{% else %}You're not receiving notifications from this issue.{% endif %}</p>

  </section>

  <section class="side-sec">

    <div class="side-head"><h3>Assignees</h3>

    {% if can_triage %}<details class="menu"><summary class="gear" title="Edit assignees" aria-label="Edit assignees"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M8 0a8.2 8.2 0 0 1 .7.03c.4.04.7.34.76.73l.2 1.37c.33.11.65.24.96.4l1.12-.83a.85.85 0 0 1 1.07.06c.34.3.65.63.94.97.25.3.27.73.06 1.06l-.83 1.12c.16.3.29.63.4.96l1.37.2c.39.06.69.37.73.76a8 8 0 0 1 0 1.4.85.85 0 0 1-.73.76l-1.37.2c-.11.33-.24.65-.4.96l.83 1.12c.21.33.19.76-.06 1.06-.29.34-.6.67-.94.97a.85.85 0 0 1-1.07.06l-1.12-.83c-.3.16-.63.29-.96.4l-.2 1.37a.85.85 0 0 1-.76.73 8 8 0 0 1-1.4 0 .85.85 0 0 1-.76-.73l-.2-1.37a5.6 5.6 0 0 1-.96-.4l-1.12.83a.85.85 0 0 1-1.07-.06 8 8 0 0 1-.94-.97.85.85 0 0 1-.06-1.06l.83-1.12a5.6 5.6 0 0 1-.4-.96l-1.37-.2A.85.85 0 0 1 0 8.7a8 8 0 0 1 0-1.4c.04-.39.34-.7.73-.76l1.37-.2c.11-.33.24-.65.4-.96l-.83-1.12a.85.85 0 0 1 .06-1.06c.29-.34.6-.67.94-.97a.85.85 0 0 1 1.07-.06l1.12.83c.3-.16.63-.29.96-.4l.2-1.37A.85.85 0 0 1 7.3.03 8 8 0 0 1 8 0Zm0 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg></summary>

      <form class="menu-pop" method="post" action="{{ repo.url }}/issue/{{ i.number }}/assign"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="action" value="set">

        <p class="menu-title">Assign people to this issue</p>

        <input class="menu-filter" type="search" placeholder="Filter people" aria-label="Filter people" data-menu-filter>

        <div class="menu-list">{% for u in assignable %}<label class="menu-item"><input type="checkbox" name="username" value="{{ u }}"{% if assignees.contains(u) %} checked{% endif %}> <img class="avatar xs" src="/avatar/{{ u }}" alt="" loading="lazy"> <span class="menu-name">{{ u }}</span></label>{% endfor %}

        {% if assignable.is_empty() %}<p class="menu-empty">Nobody with access to this repository yet.</p>{% endif %}</div>

        <div class="menu-foot"><button type="submit" class="small primary-btn">Apply</button></div>

      </form></details>{% endif %}</div>

    {% if assignees.is_empty() %}<p class="side-empty">No one{% if can_triage %}{% if let Some(me) = shell.user %}: <form class="inline" method="post" action="{{ repo.url }}/issue/{{ i.number }}/assign"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="username" value="{{ me }}"><button name="action" value="add" class="linkish">assign yourself</button></form>{% endif %}{% endif %}</p>

    {% else %}<ul class="side-people">{% for a in assignees %}<li><a href="/{{ a }}"><img class="avatar xs" src="/avatar/{{ a }}" alt="" loading="lazy"> {{ a }}</a></li>{% endfor %}</ul>{% endif %}

  </section>

  <section class="side-sec">

    <div class="side-head"><h3>Labels</h3>

    {% if can_triage %}<details class="menu"><summary class="gear" title="Edit labels" aria-label="Edit labels"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M8 0a8.2 8.2 0 0 1 .7.03c.4.04.7.34.76.73l.2 1.37c.33.11.65.24.96.4l1.12-.83a.85.85 0 0 1 1.07.06c.34.3.65.63.94.97.25.3.27.73.06 1.06l-.83 1.12c.16.3.29.63.4.96l1.37.2c.39.06.69.37.73.76a8 8 0 0 1 0 1.4.85.85 0 0 1-.73.76l-1.37.2c-.11.33-.24.65-.4.96l.83 1.12c.21.33.19.76-.06 1.06-.29.34-.6.67-.94.97a.85.85 0 0 1-1.07.06l-1.12-.83c-.3.16-.63.29-.96.4l-.2 1.37a.85.85 0 0 1-.76.73 8 8 0 0 1-1.4 0 .85.85 0 0 1-.76-.73l-.2-1.37a5.6 5.6 0 0 1-.96-.4l-1.12.83a.85.85 0 0 1-1.07-.06 8 8 0 0 1-.94-.97.85.85 0 0 1-.06-1.06l.83-1.12a5.6 5.6 0 0 1-.4-.96l-1.37-.2A.85.85 0 0 1 0 8.7a8 8 0 0 1 0-1.4c.04-.39.34-.7.73-.76l1.37-.2c.11-.33.24-.65.4-.96l-.83-1.12a.85.85 0 0 1 .06-1.06c.29-.34.6-.67.94-.97a.85.85 0 0 1 1.07-.06l1.12.83c.3-.16.63-.29.96-.4l.2-1.37A.85.85 0 0 1 7.3.03 8 8 0 0 1 8 0Zm0 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg></summary>

      <form class="menu-pop" method="post" action="{{ repo.url }}/issue/{{ i.number }}/labels"><input type="hidden" name="_csrf" value="{{ shell.csrf }}">

        <p class="menu-title">Apply labels to this issue</p>

        {% if !all_labels.is_empty() %}<input class="menu-filter" type="search" placeholder="Filter labels" aria-label="Filter labels" data-menu-filter>{% endif %}

        <div class="menu-list">{% for l in all_labels %}<label class="menu-item"><input type="checkbox" name="label" value="{{ l.id }}"{% if labels.contains(l) %} checked{% endif %}> <span class="swatch" style="--c: {{ l.colour }}"></span> <span class="menu-name">{{ l.name }}{% if !l.description.is_empty() %}<small>{{ l.description }}</small>{% endif %}</span></label>{% endfor %}

        {% if all_labels.is_empty() %}<p class="menu-empty">This repository has no labels yet.</p>{% endif %}</div>

        <div class="menu-foot"><a class="small" href="{{ repo.url }}/labels">Edit labels</a> <button type="submit" class="small primary-btn">Apply</button></div>

      </form></details>{% endif %}</div>

    {% if labels.is_empty() %}<p class="side-empty">None yet</p>{% else %}<p class="side-labels">{% for l in labels %}<span class="label" style="--c: {{ l.colour }}" title="{{ l.description }}">{{ l.name }}</span> {% endfor %}</p>{% endif %}

  </section>

  <section class="side-sec">

    <div class="side-head"><h3>Milestone</h3>

    {% if can_triage && !milestones.is_empty() %}<details class="menu"><summary class="gear" title="Set milestone" aria-label="Set milestone"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M8 0a8.2 8.2 0 0 1 .7.03c.4.04.7.34.76.73l.2 1.37c.33.11.65.24.96.4l1.12-.83a.85.85 0 0 1 1.07.06c.34.3.65.63.94.97.25.3.27.73.06 1.06l-.83 1.12c.16.3.29.63.4.96l1.37.2c.39.06.69.37.73.76a8 8 0 0 1 0 1.4.85.85 0 0 1-.73.76l-1.37.2c-.11.33-.24.65-.4.96l.83 1.12c.21.33.19.76-.06 1.06-.29.34-.6.67-.94.97a.85.85 0 0 1-1.07.06l-1.12-.83c-.3.16-.63.29-.96.4l-.2 1.37a.85.85 0 0 1-.76.73 8 8 0 0 1-1.4 0 .85.85 0 0 1-.76-.73l-.2-1.37a5.6 5.6 0 0 1-.96-.4l-1.12.83a.85.85 0 0 1-1.07-.06 8 8 0 0 1-.94-.97.85.85 0 0 1-.06-1.06l.83-1.12a5.6 5.6 0 0 1-.4-.96l-1.37-.2A.85.85 0 0 1 0 8.7a8 8 0 0 1 0-1.4c.04-.39.34-.7.73-.76l1.37-.2c.11-.33.24-.65.4-.96l-.83-1.12a.85.85 0 0 1 .06-1.06c.29-.34.6-.67.94-.97a.85.85 0 0 1 1.07-.06l1.12.83c.3-.16.63-.29.96-.4l.2-1.37A.85.85 0 0 1 7.3.03 8 8 0 0 1 8 0Zm0 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg></summary>

      <form class="menu-pop" method="post" action="{{ repo.url }}/issue/{{ i.number }}/milestone"><input type="hidden" name="_csrf" value="{{ shell.csrf }}">

        <p class="menu-title">Set milestone</p>

        <div class="menu-list"><label class="menu-item"><input type="radio" name="milestone" value=""{% if milestone.is_none() %} checked{% endif %}> <span class="menu-name">No milestone</span></label>

        {% for (ms, sel) in milestones %}<label class="menu-item"><input type="radio" name="milestone" value="{{ ms.id }}"{% if *sel %} checked{% endif %}> <span class="menu-name">{{ ms.title }}</span></label>{% endfor %}</div>

        <div class="menu-foot"><button type="submit" class="small primary-btn">Apply</button></div>

      </form></details>{% endif %}</div>

    {% if let Some(ms) = milestone %}<p class="side-value"><a href="{{ repo.url }}/milestones">{{ ms.title }}</a></p>{% else %}<p class="side-empty">No milestone</p>{% endif %}

  </section>

  <section class="side-sec">

    <div class="side-head"><h3>Projects</h3></div>

    {% if projects.is_empty() %}<p class="side-empty">None yet</p>{% else %}<ul class="plain small side-list">{% for (pr, col) in projects %}<li><a href="/projects/{{ pr.owner }}/{{ pr.number }}">{{ pr.title }}</a> <span class="mute">· {{ col }}</span>{% if project_choices.is_some() %}<form class="inline" method="post" action="{{ repo.url }}/issue/{{ i.number }}/project"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="project" value="{{ pr.number }}"><button name="action" value="remove" class="linkish" title="Take it off this project">remove</button></form>{% endif %}</li>{% endfor %}</ul>{% endif %}

    {% if let Some(choices) = project_choices %}{% if choices.is_empty() %}{% if projects.is_empty() %}<p class="side-note"><a href="/projects/{{ repo.owner }}">{{ repo.owner }}'s projects</a></p>{% endif %}{% else %}<form class="side-picker-inline" method="post" action="{{ repo.url }}/issue/{{ i.number }}/project"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><select name="project" aria-label="Project">{% for pr in choices %}<option value="{{ pr.number }}">{{ pr.title }}</option>{% endfor %}</select> <button name="action" value="add" class="small">Add</button></form>{% endif %}{% endif %}

  </section>

  <section class="side-sec side-actions">

    <form method="post" action="{{ repo.url }}/issue/{{ i.number }}/state"><input type="hidden" name="_csrf" value="{{ shell.csrf }}">

    {% if i.state == "open" %}<button type="submit" name="action" value="close" class="side-action"><span aria-hidden="true">✓</span> Close as completed</button>

    <button type="submit" name="action" value="not_planned" class="side-action"><span aria-hidden="true">⊘</span> Close as not planned</button>{% else %}<button type="submit" name="action" value="reopen" class="side-action"><span aria-hidden="true">↺</span> Reopen issue</button>{% endif %}

    <button type="submit" name="action" value="{% if i.locked %}unlock{% else %}lock{% endif %}" class="side-action"><span aria-hidden="true">🔒</span> {% if i.locked %}Unlock conversation{% else %}Lock conversation{% endif %}</button>

    <button type="submit" name="action" value="{% if i.pinned %}unpin{% else %}pin{% endif %}" class="side-action"><span aria-hidden="true">📌</span> {% if i.pinned %}Unpin issue{% else %}Pin issue{% endif %}</button>

    </form>

  </section>

/* The issue page's sidebar, as GitHub lays it out (oxygenhub#82): sections

   with a heading and a gear opening a filterable menu that applies in one

   go; what is set is shown under the heading; moderation as quiet actions. */

form.card.comment-form { max-width: none; }

.side-sections .side-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }

.side-sections .side-sec:first-child { padding-top: 0; }

.side-sections .side-sec:last-child { border-bottom: 0; }

.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.side-sections .side-head h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--mute); text-transform: none; letter-spacing: 0; }

.side-empty, .side-note { margin: 0; font-size: 12px; color: var(--mute); }

.side-empty button.linkish { font-size: inherit; }

.side-note { margin-top: 6px; }

.side-value { margin: 0; font-size: 14px; }

.side-labels { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }

.side-labels .label { margin: 0; }

.side-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.side-people a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 13px; }

.side-people img.avatar, .menu-item img.avatar { border-radius: 50%; }

.side-wide { width: 100%; }

form.inline { display: inline; margin: 0; }

details.menu { position: relative; }

details.menu > summary { list-style: none; cursor: pointer; color: var(--mute); display: inline-flex; padding: 3px; border-radius: 6px; }

details.menu > summary::-webkit-details-marker { display: none; }

details.menu > summary:hover, details.menu[open] > summary { color: var(--acc); background: var(--soft); }

.menu-pop { position: absolute; right: 0; top: 28px; z-index: 30; width: 290px; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

.menu-title { margin: 0; padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--ink); }

.menu-filter { display: block; width: calc(100% - 20px); margin: 0 10px 10px; box-sizing: border-box; }

.menu-list { max-height: 300px; overflow-y: auto; border-top: 1px solid var(--line); }

aside.side .menu-item { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0; }

aside.side .menu-item:hover { background: var(--soft); }

.menu-item input { margin: 2px 0 0; flex: none; }

.menu-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.menu-name small { color: var(--mute); font-size: 12px; }

.menu-empty { margin: 0; padding: 10px 12px; font-size: 12px; color: var(--mute); }

.menu-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 12px; }

.menu-foot a { margin-right: auto; }

.swatch { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

.side-actions form { display: grid; gap: 2px; }

button.side-action { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; font-weight: 600; color: var(--ink); }

button.side-action span { width: 16px; text-align: center; color: var(--mute); }

button.side-action:hover { color: var(--acc); }

button.side-action:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }