Proposal page: centred timeline with avatars, inline editing, labels and projects a1b9869565aa

    /// Projects the viewer may add it to.

    project_choices: Option<Vec<crate::db::projects::Project>>,

    let project_choices = super::projects::project_choices(app, viewer, &row, &projects).await;

        project_choices,

        .route("/{owner}/{name}/proposal/{number}/project", post(projects::place_proposal))

        .route("/{owner}/{name}/issue/{number}/project", post(projects::place_issue))

#[derive(Deserialize)]

pub struct PlaceForm {

    #[serde(rename = "_csrf")]

    csrf_token: String,

    /// The project's number among its owner's.

    project: i64,

    /// `add` or `remove`.

    action: String,

}

/// Put an issue or proposal on one of its repository owner's projects (in

/// the first column), or take it off, from its own page.

async fn place(

    app: Shared,

    viewer: Viewer,

    owner: String,

    name: String,

    kind: &'static str,

    number: i64,

    f: PlaceForm,

) -> Result<Response, Error> {

    let page = format!("/{owner}/{name}/{kind}/{number}");

    let shell = Shell::new(&app, &page, &viewer);

    csrf(&viewer, &f.csrf_token, &shell)?;

    let (_, row, _) = super::lookup(&app, &shell, &viewer, &owner, &name).await?;

    let r = rights(&app, &shell, &viewer, &row.owner).await?;

    if !r.edit {

        return Err(Error::not_found(shell));

    }

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

    let project = pdb::get(&app.db, &row.owner, f.project).await.map_err(e)?.ok_or_else(|| Error::not_found(shell.clone()))?;

    let actor = viewer.account().map(|a| a.username.clone()).unwrap_or_default();

    let mut error = None;

    match f.action.as_str() {

        "add" => {

            let columns = pdb::columns(&app.db, project.id).await.map_err(e)?;

            let Some(first) = columns.first() else { return Err(Error::bad(shell, "that project has no columns")) };

            if let Err(msg) =

                add_card(&app, viewer.account(), &row.owner, project.id, first.id, &format!("{}#{number}", row.name), &row.name, "", &actor)

                    .await

                    .map_err(e)?

            {

                error = Some(msg);

            }

        }

        "remove" => {

            for c in pdb::cards(&app.db, project.id).await.map_err(e)? {

                if c.repo_id == Some(row.id) && c.number == Some(number) {

                    pdb::remove_card(&app.db, project.id, c.id).await.map_err(e)?;

                }

            }

        }

        _ => return Err(Error::bad(shell, "add or remove")),

    }

    let to = match error {

        Some(m) => format!("{page}?error={}", super::settings::urlencode(&m)),

        None => page,

    };

    Ok(Redirect::to(&to).into_response())

}

/// `POST /{owner}/{name}/proposal/{number}/project`.

pub async fn place_proposal(

    State(app): State<Shared>,

    viewer: Viewer,

    Path((owner, name, number)): Path<(String, String, i64)>,

    Form(f): Form<PlaceForm>,

) -> Result<Response, Error> {

    place(app, viewer, owner, name, "proposal", number, f).await

}

/// `POST /{owner}/{name}/issue/{number}/project`.

pub async fn place_issue(

    State(app): State<Shared>,

    viewer: Viewer,

    Path((owner, name, number)): Path<(String, String, i64)>,

    Form(f): Form<PlaceForm>,

) -> Result<Response, Error> {

    place(app, viewer, owner, name, "issue", number, f).await

}

/// The owner's open projects `viewer` may add an item to that it is not on

/// yet; `None` when the viewer may not change the owner's projects at all.

pub async fn project_choices(

    app: &Shared,

    viewer: &Viewer,

    repo: &db::repos::RepoRow,

    placed: &[(pdb::Project, String)],

) -> Option<Vec<pdb::Project>> {

    let Ok(Some(r)) = rights_of(app, viewer.account(), &repo.owner).await else { return None };

    if !r.edit {

        return None;

    }

    Some(

        pdb::of_owner(&app.db, &repo.owner)

            .await

            .unwrap_or_default()

            .into_iter()

            .filter(|p| !p.closed && !placed.iter().any(|(q, _)| q.id == p.id))

            .collect(),

    )

}

/// One entry of a proposal's conversation, in time order: what kind it

/// is and its index in `comments`, `reviews` or `events`.

pub struct Entry {

    pub kind: &'static str,

    pub index: usize,

}

    /// Projects the viewer may add it to.

    project_choices: Option<Vec<db::projects::Project>>,

    /// Comments (not anchored to a line), reviews and events, oldest first.

    timeline: Vec<Entry>,

    /// The viewer may set labels (triage or above).

    can_triage: bool,

    /// What an action said, after it redirected here.

    notice: Option<String>,

    #[serde(default)]

    error: Option<String>,

    #[serde(default)]

    let project_choices = super::projects::project_choices(app, viewer, &row, &projects).await;

    let mut dated: Vec<(i64, Entry)> = Vec::new();

    for (index, c) in comments.iter().enumerate() {

        if c.row.anchor_change.is_empty() {

            dated.push((c.row.created_ms, Entry { kind: "comment", index }));

        }

    }

    for (index, r) in v.reviews.iter().enumerate() {

        dated.push((r.row.created_ms, Entry { kind: "review", index }));

    }

    for (index, e) in events.iter().enumerate() {

        dated.push((e.at_ms, Entry { kind: "event", index }));

    }

    dated.sort_by_key(|(at, _)| *at);

    let timeline: Vec<Entry> = dated.into_iter().map(|(_, e)| e).collect();

        can_triage: role >= Role::Triage,

        timeline,

        project_choices,

/// Back to the proposal after an action, with what to say: a redirect, so

/// reloading the page (the checks script does) never repeats the action.

fn back(owner: &str, name: &str, number: i64, tab: &str, notice: Option<String>, error: Option<String>) -> Response {

    let mut url = format!("/{owner}/{name}/proposal/{number}?tab={tab}");

    if let Some(n) = notice {

        url.push_str(&format!("&notice={}", super::settings::urlencode(&n)));

    }

    if let Some(e) = error {

        url.push_str(&format!("&error={}", super::settings::urlencode(&e)));

    }

    Redirect::to(&url).into_response()

}

    let mut page =

        detail(&app, shell, &viewer, &owner, &name, number, q.tab.unwrap_or_else(|| "conversation".into()), q.notice, q.error).await?;

) -> Result<Response, Error> {

        return Ok(back(&owner, &name, number, "conversation", None, Some("An empty comment says nothing.".into())));

    Ok(back(&owner, &name, number, tab, None, None))

) -> Result<Response, Error> {

        return Ok(back(&owner, &name, number, "conversation", None, Some("You cannot approve your own proposal.".into())));

    Ok(back(&owner, &name, number, "conversation", notice, None))

) -> Result<Response, Error> {

    Ok(back(&owner, &name, number, "conversation", Some("Saved.".into()), None))

) -> Result<Response, Error> {

    Ok(back(&owner, &name, number, "conversation", None, None))

) -> Result<Response, Error> {

    Ok(back(&owner, &name, number, "files", None, None))

) -> Result<Response, Error> {

        Ok(_) => Ok(back(&owner, &name, number, "conversation", Some("Landed.".into()), None)),

        Err(Landing::Refused(m)) => Ok(back(&owner, &name, number, "conversation", None, Some(m))),

) -> Result<Response, Error> {

    Ok(back(&owner, &name, number, "conversation", None, None))

    // The conversation is a timeline with avatars; editing sits with the

    // content, not in the sidebar, and labels and projects are editable.

    let p = call(app, "GET", "/andy/demo/proposal/3", None, Some(&andy), None, None).await.body;

    assert!(p.contains("class=\"tl-avatar\" src=\"/avatar/"), "avatars");

    assert!(p.contains("id=\"edit\"") && !p.contains("<h3>Edit</h3>"), "the editor is inline, not in the sidebar");

    assert!(p.contains("no labels yet") && p.contains("/andy/demo/labels"), "a way to make labels");

    let (st, _) = api(app, "POST", "/api/v1/projects/andy", Some("site"), Some(r#"{"title":"Board"}"#)).await;

    assert!(st.is_success(), "{st}");

    let p = call(app, "GET", "/andy/demo/proposal/3", None, Some(&andy), None, None).await.body;

    assert!(p.contains("<option value=\"1\">Board</option>"), "the owner's projects to add to");

    let csrf = csrf_of(&p);

    call(app, "POST", "/andy/demo/proposal/3/project", None, Some(&andy), None, Some(&format!("_csrf={csrf}&project=1&action=add"))).await;

    let p = call(app, "GET", "/andy/demo/proposal/3", None, Some(&andy), None, None).await.body;

    assert!(p.contains("/projects/andy/1\">Board</a>") && p.contains("value=\"remove\""), "on the project, removable");

    call(app, "POST", "/andy/demo/proposal/3/project", None, Some(&andy), None, Some(&format!("_csrf={csrf}&project=1&action=remove")))

        .await;

    let p = call(app, "GET", "/andy/demo/proposal/3", None, Some(&andy), None, None).await.body;

    assert!(!p.contains("/projects/andy/1\">Board</a>"), "taken off again");

    // The action redirects back (so a reload never repeats it), saying so.

    let back = r.location.clone().unwrap_or_default();

    assert!(back.starts_with("/andy/demo/proposal/2?") && back.contains("notice=Landed."), "{back}");

    assert!(send(app, "GET", &back, Some(&andy), None).await.body.contains("Landed."));

        assert!(r.location.as_deref().is_some_and(|l| l.contains("notice=Landed.")), "#{n}: {:?}", r.location);

        assert!(r.location.as_deref().is_some_and(|l| l.contains("notice=Landed.")), "#{n}: {:?} {}", r.location, r.body);

        assert!(r.location.as_deref().is_some_and(|l| l.contains("notice=Landed.")), "#{n}: {:?} {}", r.location, r.body);

/// POST a proposal action and follow its redirect back to the page, as a

/// browser does (actions redirect so a reload never repeats them).

async fn act(app: &Shared, path: &str, cookie: Option<&str>, form: &str) -> Res {

    let mut req = Request::builder().method("POST").uri(path).header(header::CONTENT_TYPE, "application/x-www-form-urlencoded");

    if let Some(c) = cookie {

        req = req.header(header::COOKIE, format!("oxyhub={c}"));

    }

    let res = oxygenhub::router(app.clone()).oneshot(req.body(Body::from(form.to_string())).unwrap()).await.unwrap();

    assert_eq!(res.status(), StatusCode::SEE_OTHER, "{path} redirects back");

    let to = res.headers().get(header::LOCATION).and_then(|v| v.to_str().ok()).unwrap_or("").to_string();

    get(app, &to, cookie).await

}

    let r = act(app, "/andy/demo/proposal/1/comment", Some(&bob), &format!("_csrf={csrf_b}&body=nice+line&path=a.txt&line=3")).await;

    let r = act(app, "/andy/demo/proposal/1/review", Some(&bob), &format!("_csrf={csrf_b}&verdict=approve")).await;

    let r = act(app, "/andy/demo/proposal/1/review", Some(&andy), &format!("_csrf={csrf_a}&verdict=approve&body=LGTM")).await;

    let r = act(app, "/andy/demo/proposal/1/land", Some(&andy), &format!("_csrf={csrf_a}")).await;

    let r = act(app, "/andy/demo/proposal/2/state", Some(&bob), &format!("_csrf={csrf_b}&action=close")).await;

    let r = act(app, "/andy/demo/proposal/2/state", Some(&bob), &format!("_csrf={csrf_b}&action=reopen")).await;

**The proposal page.** The conversation is centred at the normal page width; the changes and files tabs are wide for diffs.

- **Timeline:** the description, comments, reviews and events are one timeline in time order, each entry beside its author's avatar.

- **Editing:** the title, target and description are edited inline (an Edit button beside the title opens the editor below the timeline), not from the sidebar.

- **State actions:** ready for review, back to draft, close and reopen sit under the comment box, and only when they apply.

- **Sidebar:**

  - Landing, Closes, Labels and Projects.

  - Labels: those with triage edit them, or are pointed at the repository's labels page when it has none.

  - Projects: editors of the owner's projects add the proposal to one (its first column) or take it off. Issues have the same project control.

- **Redirects:** every action redirects back to the page, so reloading it (the checks script does, when a check arrives) never repeats the action.

  {% if projects.is_empty() %}<p class="mute small">None.</p>{% else %}<ul class="plain small">{% 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="tiny" 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="small mute"><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 %}

{% block mainclass %}{% if tab != "conversation" %} class="wide"{% endif %}{% endblock %}

<div class="head"><h1>{{ p.title }} <small class="px kind-proposal">proposal #{{ p.number }}</small>{% if can_edit %} <a class="go small head-edit" href="#edit" onclick="document.getElementById('edit').open=true">Edit</a>{% endif %}

<div class="timeline">

  <div class="tl-item">

    <img class="tl-avatar" src="/avatar/{{ p.author }}" alt="" width="36" height="36">

    <div class="tl-card">

      <div class="tl-head"><a href="/{{ p.author }}"><strong>{{ p.author }}</strong></a> opened this proposal <time title="{{ p.created_ms|when_i }}">{{ p.created_ms|ago_i }}</time>{% if can_edit %} <a class="tl-edit small" href="#edit">edit</a>{% endif %}</div>

      {% if p.body.is_empty() %}<p class="tl-empty mute">No description.</p>{% else %}<article class="doc tl-doc">{{ body_html|safe }}</article>{% endif %}

    </div>

  </div>

  {% for t in timeline %}

  {% if t.kind == "comment" %}{% let c = comments[t.index] %}

  <div class="tl-item">

    <img class="tl-avatar" src="/avatar/{{ c.row.author }}" alt="" width="36" height="36">

    <div class="tl-card">

      <div class="tl-head"><a href="/{{ c.row.author }}"><strong>{{ c.row.author }}</strong></a> commented <time title="{{ c.row.created_ms|when_i }}">{{ c.row.created_ms|ago_i }}</time></div>

      <div class="tl-text">{{ c.body_html|safe }}</div>

    </div>

  </div>

  {% else if t.kind == "review" %}{% let r = reviews[t.index] %}

  <div class="tl-item review-{{ r.row.verdict }}">

    <img class="tl-avatar" src="/avatar/{{ r.row.author }}" alt="" width="36" height="36">

    <div class="tl-card">

      <div class="tl-head"><a href="/{{ r.row.author }}"><strong>{{ r.row.author }}</strong></a> {% if r.row.verdict == "approve" %}{% if r.sealed %}<span class="sig sig-valid">◈</span> approved and sealed{% else %}<span class="sig sig-unsigned">○</span> approved, seal pending{% endif %}{% else if r.row.verdict == "changes" %}<span class="sig sig-invalid">✘</span> requested changes{% else %}reviewed{% endif %} <time title="{{ r.row.created_ms|when_i }}">{{ r.row.created_ms|ago_i }}</time></div>

      {% if !r.row.body.is_empty() %}<div class="tl-text">{{ r.body_html|safe }}</div>{% endif %}

    </div>

  </div>

  {% else %}{% let e = events[t.index] %}

  <p class="tl-event"><span class="tl-dot"></span><img class="tl-mini" src="/avatar/{{ e.actor }}" alt="" width="18" height="18"> <strong>{{ e.actor }}</strong> {{ e.event }}{% if e.event.ends_with("by change") && !e.detail.is_empty() %}{% let hash = e.detail.split(' ').next().unwrap_or("") %} <a href="{{ repo.url }}/change/{{ hash }}"><code>{{ hash }}</code></a>{{ e.detail[hash.len()..] }}{% else if !e.detail.is_empty() %}: {{ e.detail }}{% endif %} <time class="mute" title="{{ e.at_ms|when_i }}">{{ e.at_ms|ago_i }}</time></p>

  {% endif %}

  {% if let Some(me) = shell.user %}

  <div class="tl-item">

    <img class="tl-avatar" src="/avatar/{{ me }}" alt="" width="36" height="36">

    <div class="tl-card">

      <form method="post" action="{{ repo.url }}/proposal/{{ p.number }}/comment">

        <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

        <label for="body">Comment (Markdown)</label><textarea id="body" name="body" class="md" rows="4" required></textarea>

        <div class="tl-actions"><button type="submit" class="primary-btn">Comment</button></div>

      </form>

      {% if can_edit && (p.state == "draft" || p.is_open() || p.state == "closed") %}

      <form class="tl-actions" method="post" action="{{ repo.url }}/proposal/{{ p.number }}/state">

        <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

        {% if p.state == "draft" %}<button type="submit" name="action" value="ready">Ready for review</button>{% endif %}

        {% if p.state == "open" %}<button type="submit" name="action" value="draft">Back to draft</button>{% endif %}

        {% if p.is_open() %}<button type="submit" name="action" value="close" class="danger-btn">Close proposal</button>{% endif %}

        {% if p.state == "closed" %}<button type="submit" name="action" value="reopen">Reopen</button>{% endif %}

      </form>

      {% endif %}

    </div>

  </div>

  <form class="card tl-review" method="post" action="{{ repo.url }}/proposal/{{ p.number }}/review">

  {% if can_edit %}

  <details class="panel tl-editbox" id="edit">

    <summary>Edit title, target and description</summary>

    <form method="post" action="{{ repo.url }}/proposal/{{ p.number }}/edit">

      <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

      <label for="etitle">Title</label><input type="text" id="etitle" name="title" value="{{ p.title }}">

      <label for="etarget">Target bookmark</label><input type="text" id="etarget" name="target" value="{{ p.target }}">

      <label for="ebody">Description (Markdown)</label><textarea id="ebody" name="body" class="md" rows="8">{{ p.body }}</textarea>

      <div class="tl-actions"><button type="submit" class="primary-btn">Save</button></div>

    </form>

  </details>

  {% endif %}

  <h3>Labels{% if can_triage %} <a class="side-edit" href="{{ repo.url }}/labels" title="Manage this repository's labels">manage</a>{% endif %}</h3>

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

  {% if can_triage %}

  {% if all_labels.is_empty() %}<p class="small mute">This repository has no labels yet: <a href="{{ repo.url }}/labels">create some</a>.</p>

  {% else %}<details class="side-picker"><summary>Edit labels</summary>

  <form method="post" action="{{ repo.url }}/proposal/{{ p.number }}/labels"><input type="hidden" name="_csrf" value="{{ shell.csrf }}">

    {% for l in all_labels %}<label class="side-check"><input type="checkbox" name="label" value="{{ l.id }}"{% if labels.contains(l) %} checked{% endif %}> <span class="label" style="--c: {{ l.colour }}">{{ l.name }}</span></label>{% endfor %}

    <button type="submit" class="small">Apply</button>

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

  {% endif %}

  {% if projects.is_empty() %}<p class="mute small">None.</p>{% else %}<ul class="plain small">{% 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="tiny" method="post" action="{{ repo.url }}/proposal/{{ p.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="small mute"><a href="/projects/{{ repo.owner }}">{{ repo.owner }}'s projects</a></p>{% endif %}{% else %}<form class="side-picker-inline" method="post" action="{{ repo.url }}/proposal/{{ p.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 %}

/* A proposal's conversation as a timeline (hub spec §7): avatars on a rail,

   each entry a card with its author and time, events as quiet lines. */

.timeline { position: relative; min-width: 0; }

.timeline::before { content: ""; position: absolute; left: 17px; top: 12px; bottom: 12px; border-left: 2px solid var(--line); z-index: 0; }

.tl-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; margin: 0 0 18px; z-index: 1; }

.tl-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--bg); background: var(--panel); }

.tl-card { min-width: 0; background: var(--panel); border: 1px solid var(--line); }

.tl-head { padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 13px; color: var(--mute); }

.tl-head strong { color: var(--ink); }

.tl-head .tl-edit { float: right; }

.tl-card article.doc.tl-doc { max-width: none; margin: 0; border: 0; }

.tl-text { padding: 10px 14px; overflow-wrap: anywhere; }

.tl-empty { padding: 10px 14px; margin: 0; }

.tl-card form { padding: 10px 14px; margin: 0; }

.tl-card textarea { width: 100%; box-sizing: border-box; }

.tl-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 0; }

form.tl-actions { padding: 0 14px 12px; }

.tl-item.review-approve .tl-card { border-color: var(--ok); }

.tl-item.review-changes .tl-card { border-color: var(--bad); }

.tl-event { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin: -6px 0 16px 10px; font-size: 13px; color: var(--mute); }

.tl-event strong { color: var(--ink); font-weight: 600; }

.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--soft); border: 2px solid var(--line); flex: none; }

.tl-mini { width: 18px; height: 18px; border-radius: 50%; }

.timeline form.card.tl-review { max-width: none; margin-left: 50px; }

.tl-editbox { margin-left: 50px; }

.tl-editbox summary { cursor: pointer; font-weight: 600; }

.tl-editbox input[type=text], .tl-editbox textarea { width: 100%; box-sizing: border-box; }

.head-edit { margin-left: 8px; vertical-align: middle; }

aside.side h3 .side-edit { float: right; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }

.side-picker summary { cursor: pointer; font-size: 12px; color: var(--acc); }

.side-picker form { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

.side-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.side-picker-inline { display: flex; gap: 6px; align-items: center; margin-top: 4px; }

.side-picker-inline select { flex: 1; min-width: 0; }

@media (max-width: 760px) { .timeline::before { display: none; } .tl-item { grid-template-columns: 1fr; } .tl-avatar { display: none; } .timeline form.card.tl-review, .tl-editbox { margin-left: 0; } }