Proposal page: edit in place from a pencil and a ··· menu; one action row; landed card 4f37afcc3583

- **A tidier proposal conversation (#86).** A pencil by the title and a ··· menu on the description (Copy link, Copy Markdown, Edit) edit the title, target and description in place, replacing the box at the foot of the page. The comment box has one action row (Back to draft, Close proposal, Comment); the review is a compact card with Comment / Approve / Request changes as one segmented control beside Submit. A landed proposal ends with a "Proposal landed" card (who, how many changes, onto which bookmark), offering to delete the source bookmark while it is still there; a closed one with a "Proposal closed" card.

:root[data-look="github"] .menu-actions .menu-action { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 6px 14px; text-transform: none; font-size: 13px; font-weight: 400; color: var(--ink); }

:root[data-look="github"] .menu-actions .menu-action:hover { background: var(--soft); }

    mds.forEach(function (t) { t._mde = new E({ element: t, spellChecker: false, status: false, forceSync: true, autoDownloadFontAwesome: false, toolbar: toolbar }); });

    /* An editor shown later (a :target edit form) lays itself out again. */

    window.addEventListener("hashchange", function () { mds.forEach(function (t) { if (t._mde) setTimeout(function () { t._mde.codemirror.refresh(); }, 0); }); });

  /* ··· menus: copy a link to a part of the page, or some text. */

  function copied(btn, text) {

    if (navigator.clipboard) navigator.clipboard.writeText(text).then(function () {

      var was = btn.textContent; btn.textContent = "Copied"; setTimeout(function () { btn.textContent = was; }, 1200);

    });

    var d = btn.closest("details"); if (d) d.open = false;

  }

  document.querySelectorAll("[data-copy-link]").forEach(function (b) {

    b.addEventListener("click", function () { copied(b, location.origin + location.pathname + location.search + b.getAttribute("data-copy-link")); });

  });

  document.querySelectorAll("[data-copy-text]").forEach(function (b) {

    b.addEventListener("click", function () { copied(b, b.getAttribute("data-copy-text")); });

  });

  document.querySelectorAll('.menu-actions a[href^="#"]').forEach(function (a) {

    a.addEventListener("click", function () { var d = a.closest("details"); if (d) d.open = false; });

  });

    /// The landed proposal's source bookmark, when it is this repository's,

    /// still there, and the viewer may delete it (oxygenhub#86).

    deletable_source: Option<String>,

    let deletable_source =

        if p.state == "landed" && p.source_kind == "bookmark" && role >= Role::Write && p.source_bookmark != row.default_bookmark {

            let b = p.source_bookmark.clone();

            app.repos

                .read(&repo, move |r, _| Ok(r.view()?.bookmarks.contains_key(&b)))

                .await

                .unwrap_or(false)

                .then(|| p.source_bookmark.clone())

        } else {

            None

        };

        deletable_source,

    // oxygenhub#86: a landed card offering to delete the source bookmark,

    // the description edited in place from its ··· menu or the pencil.

    assert!(page.body.contains("Proposal landed") && page.body.contains("value=\"feature\""), "{}", page.body);

    assert!(page.body.contains("can be safely deleted"), "{}", page.body);

    assert!(page.body.contains("class=\"head-pencil\"") && page.body.contains("id=\"edit\"") && page.body.contains("Copy link"));

    assert!(!page.body.contains("Edit title, target and description</summary>"), "no disclosure at the bottom");

    let csrf = csrf_of(&page.body);

    let r = post(app, "/andy/demo/bookmarks/delete", Some(&andy), &format!("_csrf={csrf}&bookmark=feature")).await;

    assert_eq!(r.status, StatusCode::OK, "{}", r.body);

    let page = get(app, "/andy/demo/proposal/1", Some(&andy)).await;

    assert!(page.body.contains("Proposal landed") && !page.body.contains("can be safely deleted"), "gone, so not offered again");

<div class="head"><h1>{{ p.title }}{% if can_edit %} <a class="head-pencil" href="#edit" title="Edit title, target and description" aria-label="Edit title, target and description"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M11.01 1.31a1.75 1.75 0 0 1 2.48 0l1.2 1.2a1.75 1.75 0 0 1 0 2.48L5.1 14.6a1.75 1.75 0 0 1-.8.46l-3.13.88a.75.75 0 0 1-.92-.92l.88-3.13a1.75 1.75 0 0 1 .46-.8Zm1.42 1.06a.25.25 0 0 0-.36 0L10.5 3.94 12.06 5.5l1.57-1.57a.25.25 0 0 0 0-.36ZM11 6.56 9.44 5 3.15 11.3a.25.25 0 0 0-.06.11l-.55 1.95 1.95-.55a.25.25 0 0 0 .11-.06Z"/></svg></a>{% endif %} <small class="px kind-proposal">proposal #{{ p.number }}</small>

      <div class="tl-head" id="description"><span><a href="/{{ p.author }}"><strong>{{ p.author }}</strong></a> opened this proposal <a class="tl-when" href="#description"><time title="{{ p.created_ms|when_i }}">{{ p.created_ms|ago_i }}</time></a></span>

        <details class="menu tl-menu"><summary class="dots" title="More" aria-label="More options">···</summary>

          <div class="menu-pop menu-actions">

            <button type="button" class="menu-action" data-copy-link="#description">Copy link</button>

            <button type="button" class="menu-action" data-copy-text="{{ p.body }}">Copy Markdown</button>

            {% if can_edit %}<hr><a class="menu-action" href="#edit">Edit</a>{% endif %}

          </div></details></div>

      <div class="tl-view">{% 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>

      {% if can_edit %}

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

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

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

        <div class="edit-row"><label for="etarget">Into bookmark</label><input type="text" id="etarget" name="target" value="{{ p.target }}"></div>

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

        <div class="tl-actions"><a class="go" href="#description">Cancel</a> <button type="submit" class="primary-btn">Update proposal</button></div>

      </form>

      {% endif %}

  {% if p.state == "landed" %}

  <div class="tl-item tl-outcome landed">

    <span class="tl-badge" aria-hidden="true"><svg viewBox="0 0 16 16" width="18" height="18"><path fill="currentColor" d="M5.45 5.15A3.5 3.5 0 0 0 8.75 7.5h1.94a2.25 2.25 0 1 1 0 1.5H8.75a5 5 0 0 1-3.5-1.43v3.04a2.25 2.25 0 1 1-1.5 0V5.39a2.25 2.25 0 1 1 1.7-.24ZM4.5 2.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25-4.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/></svg></span>

    <div class="tl-card outcome-card">

      <div><strong>Proposal landed</strong>

      <p class="small">{% if !p.landed_by.is_empty() %}<a href="/{{ p.landed_by }}">{{ p.landed_by }}</a> landed{% else %}Landed{% endif %} {{ changes.len()|plural("change", "changes") }} into <a class="lbl lbl-bm" href="{{ repo.url }}/tree/{{ p.target }}">{{ p.target }}</a>{% if p.landed_ms > 0 %} <time title="{{ p.landed_ms|when_i }}">{{ p.landed_ms|ago_i }}</time>{% endif %}.{% if let Some(b) = deletable_source %} The <code>{{ b }}</code> bookmark can be safely deleted.{% endif %}</p></div>

      {% if let Some(b) = deletable_source %}<form method="post" action="{{ repo.url }}/bookmarks/delete"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><input type="hidden" name="bookmark" value="{{ b }}"><button type="submit">Delete bookmark</button></form>{% endif %}

    </div>

  </div>

  {% else if p.state == "closed" %}

  <div class="tl-item tl-outcome closed">

    <span class="tl-badge" aria-hidden="true">✕</span>

    <div class="tl-card outcome-card"><div><strong>Proposal closed</strong><p class="small">It was not landed{% if can_edit %}; reopen it below to carry on{% endif %}.</p></div></div>

  </div>

  {% endif %}

  {% if can_edit && (p.state == "draft" || p.is_open() || p.state == "closed") %}<form id="pstate" method="post" action="{{ repo.url }}/proposal/{{ p.number }}/state" hidden><input type="hidden" name="_csrf" value="{{ shell.csrf }}"></form>{% endif %}

    <div class="tl-card tl-compose">

        <p class="compose-title">Add a comment</p>

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

        <div class="compose-actions">

          {% if can_edit %}

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

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

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

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

          {% endif %}

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

        </div>

  <div class="tl-item">

    <span class="tl-badge review" aria-hidden="true">◈</span>

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

      <p class="compose-title">Review this proposal</p>

      <textarea id="rbody" name="body" rows="2" placeholder="Leave a summary (optional)" aria-label="Review summary"></textarea>

      <div class="compose-actions">

        <div class="segmented" role="radiogroup" aria-label="Verdict">

          <label><input type="radio" name="verdict" value="comment" checked><span>Comment</span></label>

          <label><input type="radio" name="verdict" value="approve"><span>Approve</span></label>

          <label><input type="radio" name="verdict" value="changes"><span>Request changes</span></label>

        </div>

        <button type="submit" class="primary-btn">Submit review</button>

      </div>

      <p class="compose-note">An approval counts once you seal the changes from a client: <code>oxy seal --proposal {{ shell.base_url }}{{ repo.url }}/proposal/{{ p.number }}</code></p>

  </div>

  {% endif %}

/* The proposal conversation (oxygenhub#86): a pencil by the title, a ···

   menu on the description that edits it in place, one action row under

   the comment box, a compact review, and a card when it landed. */

.head-pencil { color: var(--mute); display: inline-flex; vertical-align: middle; padding: 4px; margin-left: 6px; border-radius: 6px; }

.head-pencil:hover { color: var(--acc); background: var(--soft); }

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

.tl-head .tl-when { color: inherit; }

.tl-menu > summary.dots { font-weight: 700; letter-spacing: 1px; padding: 0 6px; line-height: 20px; }

.menu-pop.menu-actions { width: 180px; padding: 6px 0; top: 26px; }

.menu-actions hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

.menu-action { all: unset; display: block; box-sizing: border-box; width: 100%; padding: 6px 14px; font-size: 13px; color: var(--ink); cursor: pointer; }

.menu-action:hover { background: var(--soft); color: var(--ink); }

.tl-editform { display: none; padding: 12px 14px; }

.tl-editform:target { display: block; }

.tl-card:has(.tl-editform:target) .tl-view { display: none; }

.edit-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }

.edit-row label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }

.tl-editform .tl-actions { margin-top: 10px; align-items: center; }

.tl-compose { padding: 12px 14px; }

.tl-card.tl-compose form { padding: 0; }

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

.tl-compose textarea:not(.md) { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); resize: vertical; }

.compose-title { margin: 0 0 8px; font-weight: 600; font-size: 14px; color: var(--ink); }

.compose-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }

.compose-actions .segmented { margin-right: auto; }

.compose-note { margin: 10px 0 0; font-size: 12px; color: var(--mute); }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }

.segmented label { margin: 0; text-transform: none; letter-spacing: 0; cursor: pointer; }

.segmented input { position: absolute; opacity: 0; pointer-events: none; }

.segmented span { display: block; padding: 5px 12px; font-size: 13px; font-weight: 500; color: var(--ink); border-right: 1px solid var(--line); }

.segmented label:last-child span { border-right: 0; }

.segmented input:checked + span { background: var(--acc); color: #fff; }

.segmented input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: -2px; }

.tl-badge { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--mute); font-size: 15px; }

.tl-badge.review { background: var(--soft); color: var(--mute); border: 1px solid var(--line); }

.tl-outcome.landed .tl-badge { background: #8250df; }

.tl-outcome.closed .tl-badge { background: var(--bad); }

.outcome-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }

.tl-outcome.landed .outcome-card { border-color: #8250df; }

.outcome-card p { margin: 4px 0 0; color: var(--mute); }

.outcome-card form { margin: 0; padding: 0; }

.outcome-card form button { white-space: nowrap; }