@vintasoftware/pr-review-canvas 0.4.0 → 0.5.0

package/static/js/signoff.js

@@ -7,6 +7,7 @@
 import { previewControlsHtml, setDisabledReason, setMarkdownPreview } from './composer.js'
 import { esc } from './dom.js'
 import { hostLabel } from './host.js'
+import { pendingLabel } from './pending.js'
 import { layerProgress } from './progress.js'
 
 export const SIGNOFF_DIALOG_ID = 'signoff-dialog'
@@ -14,6 +15,9 @@ export const SIGNOFF_DIALOG_ID = 'signoff-dialog'
 /** Why the post command waits: the body the server writes is not there yet. */
 export const LOADING_REASON = 'the review body is still loading'
 
+/** Why it waits after the body failed to load: there is nothing to post. */
+export const FAILED_REASON = 'the review body could not be loaded'
+
 /**
  * Why approve is not allowed yet, or null when it is. Other changes never counts.
  * @param {ReviewArtifact} artifact
@@ -33,22 +37,47 @@ export function approveBlockedReason(artifact, state) {
 }
 
 /**
- * @param {'APPROVE' | 'REQUEST_CHANGES'} event
+ * @param {import('./contract-types.js').ReviewEvent} event
  */
 export function signoffTitle(event) {
-  return event === 'APPROVE' ? `Approve on ${hostLabel()}` : `Request changes on ${hostLabel()}`
+  switch (event) {
+    case 'APPROVE':
+      return `Approve on ${hostLabel()}`
+    case 'REQUEST_CHANGES':
+      return `Request changes on ${hostLabel()}`
+    case 'COMMENT':
+      return `Comment on ${hostLabel()}`
+  }
 }
 
 /**
- * @param {{ event: 'APPROVE' | 'REQUEST_CHANGES' }} opts
+ * What the dialog says this event does, under its heading.
+ * @param {import('./contract-types.js').ReviewEvent} event
+ */
+export function signoffHint(event) {
+  const where = `on ${hostLabel()} as you`
+  switch (event) {
+    case 'APPROVE':
+      return `This posts an approving review ${where}. Edit the body first if you want to.`
+    case 'REQUEST_CHANGES':
+      return `This posts a review requesting changes ${where}. Edit the body first if you want to.`
+    case 'COMMENT':
+      return `This posts a review with no verdict ${where}: nothing is approved or rejected. Edit the body first if you want to.`
+  }
+}
+
+/**
+ * @param {{ event: import('./contract-types.js').ReviewEvent }} opts
  * @returns {string}
  */
 export function signoffDialogHtml(opts) {
   return (
     `<dialog id="${SIGNOFF_DIALOG_ID}" class="signoff-dialog" aria-labelledby="signoff-h">` +
     `<h2 id="signoff-h">${esc(signoffTitle(opts.event))}</h2>` +
-    `<p class="hint">This posts a review on ${esc(hostLabel())} as you. Edit the body first if you want to.</p>` +
+    `<p class="hint">${esc(signoffHint(opts.event))}</p>` +
     '<p class="signoff-target muted mono"></p>' +
+    '<p class="signoff-folds muted"></p>' +
+    '<p class="signoff-pending"></p>' +
     '<label class="sr" for="signoff-body">Review body</label>' +
     previewControlsHtml() +
     '<textarea id="signoff-body" rows="12" aria-busy="true"></textarea>' +
@@ -64,7 +93,7 @@ export function signoffDialogHtml(opts) {
  * Creates the dialog on first use, points it at this event, and opens it. The body arrives
  * afterwards through `fillSignoffDialog`.
  * @param {HTMLElement} root
- * @param {{ event: 'APPROVE' | 'REQUEST_CHANGES' }} opts
+ * @param {{ event: import('./contract-types.js').ReviewEvent }} opts
  * @returns {HTMLDialogElement}
  */
 export function openSignoffDialog(root, opts) {
@@ -84,6 +113,14 @@ export function openSignoffDialog(root, opts) {
   if (heading !== null) {
     heading.textContent = signoffTitle(opts.event)
   }
+  const hint = dialog.querySelector('.hint')
+  if (hint !== null) {
+    hint.textContent = signoffHint(opts.event)
+  }
+  const pending = dialog.querySelector('.signoff-pending')
+  if (pending !== null) {
+    pending.textContent = ''
+  }
   const result = dialog.querySelector('.signoff-result')
   if (result !== null) {
     result.textContent = ''
@@ -103,6 +140,20 @@ export function openSignoffDialog(root, opts) {
   return dialog
 }
 
+/**
+ * Records how much code the reader had hidden while reviewing, so the sign-off says what was
+ * read at a glance and what was read line by line.
+ * @param {HTMLDialogElement} dialog
+ * @param {string} note
+ */
+export function setSignoffFolds(dialog, note) {
+  const box = dialog.querySelector('.signoff-folds')
+  if (box !== null) {
+    box.textContent = note
+  }
+  return dialog
+}
+
 /**
  * Puts the generated body and the target commit in the dialog.
  * @param {HTMLDialogElement} dialog
@@ -120,6 +171,17 @@ export function fillSignoffDialog(dialog, preview) {
   if (target !== null) {
     target.textContent = `on commit ${preview.headSha.slice(0, 7)}`
   }
+  // The drafts go out with the review, so the dialog says so before anything is posted.
+  const pending = dialog.querySelector('.signoff-pending')
+  if (pending !== null) {
+    pending.textContent =
+      preview.pending > 0 ? `${pendingLabel(preview.pending)} will be posted with this review.` : ''
+    pending.classList.toggle('has-pending', preview.pending > 0)
+  }
+  const post = dialog.querySelector('[data-act="signoff-post"]')
+  if (post !== null) {
+    post.textContent = preview.pending > 0 ? `post review · ${pendingLabel(preview.pending)}` : 'post review'
+  }
   return dialog
 }
 
@@ -164,6 +226,14 @@ export function showSignoffError(dialog, message) {
   if (result !== null) {
     result.textContent = message
   }
+  // The load this reports is over, so the box stops saying it is busy. Posting stays out of
+  // reach, but for the reason that is true now rather than the one that was true before.
+  const area = dialog.querySelector('textarea')
+  if (area instanceof HTMLTextAreaElement && area.getAttribute('aria-busy') === 'true') {
+    area.removeAttribute('aria-busy')
+    area.placeholder = ''
+    setDisabledReason(dialog.querySelector('[data-act="signoff-post"]'), FAILED_REASON)
+  }
   return result
 }
 

package/static/js/skin.js

@@ -11,7 +11,7 @@ export const SKINS = /** @type {const} */ (['terminal', 'github'])
 /** @typedef {(typeof SKINS)[number]} Skin */
 
 /** The look a page wears when the settings file says nothing. */
-export const DEFAULT_SKIN = /** @type {Skin} */ ('terminal')
+export const DEFAULT_SKIN = /** @type {Skin} */ ('github')
 
 /**
  * @param {unknown} value
@@ -37,7 +37,7 @@ export function readSkin(root) {
  */
 export function nextSkin(skin) {
   const next = SKINS[SKINS.indexOf(skin) + 1]
-  return next ?? DEFAULT_SKIN
+  return next ?? SKINS[0]
 }
 
 /**

package/static/styles/chat-panel.css

@@ -1,30 +1,28 @@
-.chat-launcher,
-.chat-minimize {
+/* The launcher stands in for the chat at every width; the script hides it while the chat is up. */
+.chat-launcher {
+  display: block;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 10;
+  padding: 14px 20px;
+  border: 1px solid var(--ink);
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--bg);
+  box-shadow: 0 4px 20px #0003;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.chat-launcher[hidden] {
   display: none;
 }
+/* Always the last thing on its row, whether or not the header wraps. */
+.chat-minimize {
+  margin-left: auto;
+}
 @media (max-width: 1360px) {
-  .chat-launcher {
-    display: block;
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    z-index: 10;
-    padding: 14px 20px;
-    border: 1px solid var(--ink);
-    border-radius: 999px;
-    background: var(--accent);
-    color: var(--bg);
-    box-shadow: 0 4px 20px #0003;
-    font: inherit;
-    font-weight: 600;
-    cursor: pointer;
-  }
-  .chat-launcher[hidden] {
-    display: none;
-  }
-  .chat-minimize {
-    display: inline-block;
-  }
   dialog.chat-dialog {
     position: fixed;
     inset: auto 20px 20px auto;

package/static/styles/chat.css

@@ -7,6 +7,10 @@
   height: 100vh;
   background: transparent;
 }
+/* Minimized on a wide screen: the pane stays mounted with its draft, out of the grid. */
+.chat[hidden] {
+  display: none;
+}
 .handle {
   position: absolute;
   left: -1px;

package/static/styles/header.css

@@ -46,6 +46,27 @@
   gap: 4px 16px;
   align-items: baseline;
 }
+/* How much code is hidden: a setting on the reading, so it sits with the progress line and not
+   among the commands, and says what it hides rather than leaving the reader to find out. */
+.reading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  align-items: baseline;
+  margin-top: 14px;
+}
+.reading label {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+.reading select {
+  padding: 2px 6px;
+  font-size: 13px;
+}
+.fold-hint {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
 .stripe {
   height: 6px;
   background: var(--stripe-y);

package/static/styles/pending.css

@@ -0,0 +1,102 @@
+/* The pending review: the bar that says one is open, and the drafts drawn on the diff. */
+
+.pending-bar-host:empty {
+  display: none;
+}
+
+.pending-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin: 10px 0 0;
+  padding: 10px 12px;
+  color: var(--fg);
+  background: var(--warn-bg);
+  /* The heavy left edge is what carries across the page: a review is open and unsent. */
+  border: 1px solid var(--warn);
+  border-left: 4px solid var(--warn);
+}
+
+/* The dot pulses so an open review is noticed on a page the reader has scrolled far down. */
+.pending-mark {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  background: var(--warn);
+  border-radius: 50%;
+  animation: pending-pulse 2s ease-in-out infinite;
+}
+
+@keyframes pending-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pending-mark {
+    animation: none;
+  }
+}
+
+.pending-bar .pending-text {
+  flex: 1 1 260px;
+}
+
+.pending-bar .pending-actions {
+  display: flex;
+  flex: none;
+  gap: 6px;
+}
+
+/* A draft on the diff reads as unfinished: dashed edge, and the badge that names it. */
+.cmt.pending-cmt {
+  padding: 8px;
+  background: var(--warn-bg);
+  border: 1px dashed var(--warn);
+}
+
+.pending-av {
+  color: var(--fg-muted);
+  border-color: var(--warn);
+}
+
+/* The avatar column covers the byline and the body, so the commands clear both. */
+.cmt.pending-cmt .tbtns {
+  display: flex;
+  grid-column: 1 / -1;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.pill.pending {
+  color: var(--bg);
+  background: var(--warn);
+}
+
+.signoff-pending:empty {
+  display: none;
+}
+
+.signoff-pending.has-pending {
+  padding: 6px 8px;
+  background: var(--warn-bg);
+  border-left: 3px solid var(--warn);
+}
+
+.earlier-pending {
+  margin-top: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--warn);
+}
+
+.earlier-draft + .earlier-draft {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed var(--warn);
+}

package/static/styles/review.css

@@ -65,6 +65,10 @@
   border-bottom: 1px solid var(--line);
   color: var(--fg);
 }
+.fold-count {
+  color: var(--fg-muted);
+  font-weight: 400;
+}
 .summary,
 .rationale,
 .prose {

package/static/styles.css

@@ -10,6 +10,7 @@
 @import './styles/panels.css';
 @import './styles/responsive.css';
 @import './styles/review-actions.css';
+@import './styles/pending.css';
 @import './styles/chat-tools.css';
 @import './styles/skin-github.css';
 @import './styles/chat-panel.css';