feat(web): make the transcript editor discoverable

The edit gestures (double-click a word, drag a boundary's ⋮) worked but
nothing on the page said so -- a word looked identical to plain text and
the split/boundary controls were invisible until an accidental hover
landed on them. Add a standing hint line, rest-state affordances on the
word/split/boundary controls, an error color distinct from normal status
text, a primary/secondary split between Transcribe and the two exports,
short transitions on state changes, and the light half of the
already-declared color-scheme.

Author: stan-ely

site/main.js

@@ -105,7 +105,7 @@ modelSelect.value = DEFAULT_MODEL
 const modelLabel = el('label', 'field-label', 'Model')
 modelLabel.htmlFor = modelSelect.id
 
-const transcribeButton = el('button', 'action', 'Transcribe')
+const transcribeButton = el('button', 'action is-primary', 'Transcribe')
 transcribeButton.type = 'button'
 transcribeButton.disabled = true
 
@@ -129,6 +129,13 @@ progress.hidden = true
 const controls = el('div', 'controls')
 controls.append(modelLabel, modelSelect, transcribeButton, srtButton, vttButton)
 
+// Empty until a transcript exists (`.transcript-hint:empty` hides it), so the
+// two gestures nothing else on the page states -- double-click a word,
+// drag ⋮ -- are said once rather than left for hover to reveal by accident.
+const transcriptHint = el('p', 'transcript-hint')
+const TRANSCRIPT_HINT_TEXT =
+  'Double-click a word to fix it · drag ⋮ between segments to move where one ends.'
+
 const transcriptEl = el('div', 'transcript')
 
 const footer = el(
@@ -148,6 +155,7 @@ app.append(
   surface,
   audio,
   controls,
+  transcriptHint,
   transcriptEl,
   progress,
   engineStatus,
@@ -201,6 +209,7 @@ function updateExportState() {
   engineStatus.textContent = transcript
     ? `${words} words in ${transcript.segments.length} segments.`
     : 'No transcript yet.'
+  transcriptHint.textContent = words > 0 ? TRANSCRIPT_HINT_TEXT : ''
 }
 
 // Ctrl/Cmd+Z to undo, Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y to redo. Attached to
@@ -237,6 +246,7 @@ async function open(file) {
   if (!file) return
 
   status.textContent = `Decoding ${file.name}…`
+  status.classList.remove('is-error')
   try {
     const decoded = await decodeAudioFile(file)
 
@@ -266,6 +276,7 @@ async function open(file) {
     transcribeButton.disabled = false
   } catch (error) {
     status.textContent = message(error)
+    status.classList.add('is-error')
   }
 }
 
@@ -304,6 +315,7 @@ async function transcribe() {
   modelSelect.disabled = true
   progress.hidden = false
   progress.removeAttribute('value')
+  engineStatus.classList.remove('is-error')
 
   try {
     if (loadedModel !== id) {
@@ -358,6 +370,7 @@ async function transcribe() {
     transcriptView.render(transcript)
   } catch (error) {
     engineStatus.textContent = message(error)
+    engineStatus.classList.add('is-error')
   } finally {
     progress.hidden = true
     transcribeButton.disabled = false

site/styles.css

@@ -14,6 +14,7 @@
   --muted: #9c968c;
   --accent: #d8a657;
   --line: #2b2825;
+  --error: #e0685a;
 
   --sp-1: 0.5rem;
   --sp-2: 1rem;
@@ -24,6 +25,20 @@
   --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
+/* The light half of `color-scheme: light dark` above. Same token names, so
+   every rule that consumes them -- including src/web/waveform.js, which
+   reads colors back via getComputedStyle -- repaints with no other change. */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #faf8f4;
+    --fg: #201d18;
+    --muted: #756e62;
+    --accent: #9a6a1f;
+    --line: #ded7c9;
+    --error: #b3392b;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -71,6 +86,7 @@ noscript p {
   border-radius: 4px;
   color: var(--accent);
   cursor: pointer;
+  transition: background-color 140ms ease-out;
 }
 
 .chooser:hover,
@@ -102,6 +118,12 @@ noscript p {
   color: var(--muted);
 }
 
+/* A decode or transcription failure, as opposed to ordinary progress text --
+   the two were previously indistinguishable, both rendering in --muted. */
+.status.is-error {
+  color: var(--error);
+}
+
 /* The waveform and its playhead.
 
    The canvas is drawn once per file and once per resize; the playhead is this
@@ -153,6 +175,20 @@ noscript p {
   width: 100%;
 }
 
+/* States the two gestures a transcript supports that no element on its own
+   makes visible: double-click to correct a word, drag the ⋮ to move a
+   boundary. Shown once, next to the transcript, rather than relying on
+   someone finding either by accidental hover. */
+.transcript-hint {
+  margin: 0 0 var(--sp-1);
+  font-size: 0.8125rem;
+  color: var(--muted);
+}
+
+.transcript-hint:empty {
+  display: none;
+}
+
 /* The transcript: one <p> per segment, one clickable <span> per word.
    Scrollable rather than growing the page without bound -- a long recording
    produces a transcript much taller than the waveform above it. */
@@ -181,6 +217,11 @@ noscript p {
 .transcript-word {
   cursor: pointer;
   border-radius: 3px;
+  /* Present at rest, not only on hover -- a dotted underline is the
+     difference between "clickable" and "plain text," which nothing else
+     about a <span> communicates. */
+  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 60%, transparent);
+  transition: background-color 140ms ease-out;
 }
 
 .transcript-word:hover {
@@ -208,27 +249,47 @@ noscript p {
   font: inherit;
 }
 
-/* The split control: a sliver between two words that only becomes a visible
-   seam on hover or focus, so the transcript does not read as perforated at
-   every word boundary while idle. */
+/* The split control: a sliver between two words. Its full-width fill only
+   appears on hover or focus, so the transcript does not read as perforated
+   at every word boundary while idle -- but a faint rest-state mark (below)
+   still makes it findable by scanning rather than only by accidental hover. */
 .transcript-split {
   display: inline-block;
-  width: 0.5rem;
+  position: relative;
+  width: 0.75rem;
   height: 1em;
   vertical-align: middle;
-  margin: 0 -0.25rem;
+  margin: 0 -0.375rem;
   padding: 0;
   border: 0;
   border-radius: 2px;
   background: transparent;
   cursor: col-resize;
+  transition: background-color 140ms ease-out;
+}
+
+/* A faint mark at rest -- findable by scanning the transcript, not only by
+   an accidental hover -- that brightens into the full hover/focus fill. */
+.transcript-split::after {
+  content: '';
+  position: absolute;
+  top: 15%;
+  bottom: 15%;
+  left: 50%;
+  width: 1px;
+  background: color-mix(in srgb, var(--muted) 45%, transparent);
 }
 
 .transcript-split:hover,
 .transcript-split:focus-visible {
   background: color-mix(in srgb, var(--accent) 35%, transparent);
 }
 
+.transcript-split:hover::after,
+.transcript-split:focus-visible::after {
+  background: transparent;
+}
+
 /* Between segments: the drag handle and the merge control share this row,
    the way controls sharing a boundary in a timeline editor usually do -- one
    strip of affordances rather than two competing for the same pixels. */
@@ -237,13 +298,13 @@ noscript p {
   align-items: center;
   justify-content: center;
   gap: var(--sp-1);
-  height: 1.5rem;
+  height: 1.75rem;
   color: var(--muted);
 }
 
 .transcript-boundary-handle,
 .transcript-merge {
-  padding: 0 var(--sp-1);
+  padding: var(--sp-1) var(--sp-1);
   border: 1px dashed var(--line);
   border-radius: 3px;
   background: transparent;
@@ -252,10 +313,15 @@ noscript p {
   font-size: 0.75rem;
   line-height: 1.4;
   cursor: pointer;
+  transition: border-color 140ms ease-out, color 140ms ease-out;
 }
 
 .transcript-boundary-handle {
   cursor: row-resize;
+  /* Bigger than its glyph alone -- ⋮ in a one-line row is a hard target to
+     land a drag on; the padding above widens it without changing the row's
+     visual weight. */
+  min-width: 2rem;
 }
 
 .transcript-boundary-handle::before {
@@ -302,6 +368,7 @@ noscript p {
   color: var(--fg);
   font: inherit;
   font-size: 0.9375rem;
+  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
 }
 
 .action {
@@ -313,6 +380,20 @@ noscript p {
   color: var(--accent);
 }
 
+/* Transcribe is the one control that moves the page from "nothing happened
+   yet" to "there's a transcript" -- everything else (the two downloads) only
+   makes sense after it, so it carries the accent fill they don't. */
+.action.is-primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.action.is-primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 85%, var(--fg));
+  color: var(--bg);
+}
+
 /* Disabled controls are dimmed rather than hidden. Every one of them is
    disabled for a reason the status line states -- no file open, no transcript
    yet -- and a control that vanishes leaves that sentence answering a question