Merge pull request #71 from fiddlerwoaroof/wave/browser-keys

fix(web): an advertised key is never silent, a formula is visible, and +cat commits

web/app.js

@@ -30,6 +30,7 @@ const el = {
   views: document.getElementById("views"),
   tiles: document.getElementById("tiles"),
   mode: document.getElementById("mode"),
+  minibuffer: document.getElementById("minibuffer"),
   hint: document.getElementById("hint"),
   help: document.getElementById("help"),
   status: document.getElementById("status"),
@@ -158,6 +159,7 @@ function repaint() {
   // itself; see `RenderModel::hint`.
   el.hint.textContent = model.hint;
   paintHelp(model);
+  paintMinibuffer(model);
   shell.setModel(model.status);
   el.viewName.textContent = model.view_name;
   el.grid.replaceChildren(gridTable(model));
@@ -179,6 +181,16 @@ function repaint() {
   if (changed) sendViewport();
 }
 
+/** The bottom-bar prompt. `null` is "no text-entry mode is open", decided in
+ *  `render.rs`, so the page asks nothing about the mode (improvise-fdt6). */
+function paintMinibuffer(model) {
+  const mb = model.minibuffer;
+  el.minibuffer.hidden = mb === null || mb === undefined;
+  if (el.minibuffer.hidden) return;
+  el.minibuffer.className = mb.color.toLowerCase();
+  el.minibuffer.textContent = mb.prompt + mb.value;
+}
+
 /** The help overlay. An empty `help` is what says it is closed -- the page
  *  asks no question about the mode, and writes none of the content: the rows,
  *  their keys and the page titles are `improvise_protocol::help`'s, the same

web/index.html

@@ -83,6 +83,13 @@
       <div id="grid" tabindex="0" aria-label="Grid"></div>
     </main>
 
+    <!--
+      The bottom bar. The TUI draws the minibuffer INSTEAD of the status line;
+      here it is a line of its own, because #status also carries the transport's
+      own failures and a repaint must not erase one (gotcha 48).
+    -->
+    <div id="minibuffer" role="status" hidden></div>
+
     <div id="help" role="dialog" aria-label="Help" hidden></div>
 
     <script type="module" src="./app.js"></script>

web/style.css

@@ -272,3 +272,21 @@ td input {
 .help-dim {
   opacity: 0.7;
 }
+
+/* The bottom-bar prompt while a text-entry mode is open. The colour is the
+   mode's own answer (`MinibufColor`); this is the last translation, exactly
+   as `draw.rs::minibuf_fg` is the TUI's. */
+#minibuffer {
+  padding: 0.25rem 0.5rem;
+  font-family: inherit;
+  border-top: 1px solid var(--accent);
+}
+#minibuffer.green {
+  color: #7ec699;
+}
+#minibuffer.cyan {
+  color: #6fd0d8;
+}
+#minibuffer.yellow {
+  color: #d8c96f;
+}