Help: one click opens the manual, two quick clicks the note; the manual styled

One click on Help shows the explanations of every command in one
window, the names in a sans-serif and the explanations in a serif, with
a 2em margin; Copy copies them as plain text.  Two quick clicks show
the note about the documentation site.  The closed window is not
displayed (a layout rule had shown it empty on the start screen).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

client/js/main.js

@@ -40,7 +40,7 @@ import { TextEditor } from './text_editor.js';
 import { enableTooltips } from './tooltip.js';
 import { guardSelection, inField } from './selection_guard.js';
 import { QUIET_ZONE, qrModules, qrPath } from './qr_code.js';
-import { manualText } from './manual.js';
+import { manualList, manualText } from './manual.js';
 
 /**
  * The colours in the toolbar: black, red, green, blue, white (Andy's
@@ -1461,29 +1461,50 @@ async function enterSession(invitationText, name, notebook) {
   // The host's Fit and Normal scale ("A4" until 2026-10-14) reach everyone (Andy, 2026-10-08); a guest's
   // are the guest's own.
   // The page and view commands live in the Page menu (Andy, 2026-10-14:
-  // seldom used, and the one row is precious); Help is a note for now.
+  // seldom used, and the one row is precious).
   attachPopup(element('page_menu_button'), element('page_menu'));
-  // Ctrl-click (Command on a Mac) on Help: the tooltips of every command,
-  // gathered as one text (Andy, 2026-10-14).  Registered before the
-  // popup's handler, which it then stops.
+  // Help (Andy, 2026-10-15): one click shows the manual, the tooltips of
+  // every command gathered into one window (Ctrl-click until then); two
+  // clicks within DOUBLE_TAP_MS show the note about the documentation
+  // site.  Since one click opens a modal window, it must wait the
+  // interval out to be told from the first of two; the shape button's
+  // double click needs no such wait, its single click having chosen the
+  // tool already.  Two clicks are counted here rather than by the
+  // browser's dblclick, which a pen or a touch screen does not always
+  // send.
   const manualDialog = /** @type {HTMLDialogElement} */ (element('manual_dialog'));
-  element('help').addEventListener('click', (event) => {
-    if (!(event.ctrlKey || event.metaKey)) return;
-    event.stopImmediatePropagation();
-    element('manual_text').textContent = manualText(document);
+  const helpNote = attachPopup(element('help'), element('help_popup'), undefined, false);
+  const showManual = () => {
+    helpNote.close();
+    const body = element('manual_text');
+    body.replaceChildren(manualList(document));
     manualDialog.showModal();
+    body.focus();
+  };
+  /** @type {ReturnType<typeof setTimeout> | null} */
+  let helpClick = null;
+  element('help').addEventListener('click', () => {
+    if (helpClick !== null) {
+      clearTimeout(helpClick);
+      helpClick = null;
+      helpNote.open();
+    } else {
+      helpClick = setTimeout(() => {
+        helpClick = null;
+        showManual();
+      }, DOUBLE_TAP_MS);
+    }
   });
   element('manual_close').addEventListener('click', () => manualDialog.close());
   element('copy_manual').addEventListener('click', async () => {
     try {
-      await navigator.clipboard.writeText(element('manual_text').textContent ?? '');
+      await navigator.clipboard.writeText(manualText(document));
       element('copy_manual').textContent = 'Copied';
       setTimeout(() => { element('copy_manual').textContent = 'Copy'; }, 1500);
     } catch (error) {
       log(`The manual could not be copied: ${error}`);
     }
   });
-  attachPopup(element('help'), element('help_popup'));
   element('zoom_fit').addEventListener('click', () => {
     renderer.fit();
     session.sendViewCommand('fit');
@@ -1693,6 +1714,7 @@ async function enterSession(invitationText, name, notebook) {
   // For looking at the session from the browser's console during development.
   Object.assign(window, { kokkoja: {
     session, renderer, writer, loadImage, textEditor, logText,
+    manualText: () => manualText(document),
     notebook: { listNotebooks, listKeptPages, readPage, readCurrentPage, notebooksInBrowser, discardNotebook, discardPage },
   } });
 }

client/js/manual.js

@@ -4,9 +4,12 @@
  * (`data-help`), gathered from the page and written as plain text under
  * the title "User interface actions": the controls in alphabetical
  * order, each one's name on a line, its explanation on the next lines,
- * wrapped at WIDTH columns, and a blank line after (Andy, 2026-10-14:
- * Ctrl-click on Help shows it; a first form as Klammertext was replaced
- * by this the same day).
+ * wrapped at WIDTH columns, and a blank line after (Andy, 2026-10-14; a
+ * first form as Klammertext was replaced by this the same day); and the
+ * same entries as elements for the Help window (`manualList`), which
+ * the stylesheet sets, the names in a sans-serif and the explanations in
+ * a serif (Andy, 2026-10-15: one click on Help shows it, Ctrl-click
+ * until then).  The Copy button copies the text.
  */
 
 export const TITLE = 'User interface actions';
@@ -137,3 +140,27 @@ export function manualText(doc) {
   const blocks = manualEntries(doc).map(([name, help]) => `${name}\n${wrap(help, WIDTH)}\n`);
   return `${TITLE}\n\n${blocks.join('\n')}`;
 }
+
+/**
+ * The manual as elements: the title as a heading, then a description
+ * list, each control's name a term and its explanation the description.
+ * @param {Document | Element} doc
+ * @returns {DocumentFragment}
+ */
+export function manualList(doc) {
+  const owner = doc instanceof Document ? doc : doc.ownerDocument;
+  const fragment = owner.createDocumentFragment();
+  const title = owner.createElement('h3');
+  title.textContent = TITLE;
+  fragment.append(title);
+  const list = owner.createElement('dl');
+  for (const [name, help] of manualEntries(doc)) {
+    const term = owner.createElement('dt');
+    term.textContent = name;
+    const description = owner.createElement('dd');
+    description.textContent = help;
+    list.append(term, description);
+  }
+  fragment.append(list);
+  return fragment;
+}