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 },
   } });
 }