The Page menu, Help, and the manual from the tooltips

The page and view commands are in a menu under "Page", with grey
titles over the display and size sections.  Help, at the far right,
shows a note for now; with Ctrl (Command on a Mac) held it shows the
explanations of every command in one text, alphabetical, wrapped at
80 columns, a shared name prefixed by its context.

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

client/index.html

@@ -75,21 +75,28 @@
       <button id="undo" type="button" disabled
               data-help="Take back your latest mark: a stroke, an erasure, a text block typed or moved, a Hide rectangle. Again for the one before. Also Ctrl+Z (Command+Z on a Mac), or two quick taps of the eraser on empty paper. Only your own marks, and only on this page since you opened it.">Undo</button>
     </div>
-    <div class="group page_view" aria-label="Page and view">
-      <button id="zoom_fit" type="button"
-              data-help="Show the whole page in the window. Pressed by the host, it does so on every screen. Ctrl (Command on a Mac) with the scroll wheel, or with a pen stroke up or down, zooms about the pointer.">Fit</button>
-      <button id="zoom_sheet" type="button"
-              data-help="Show the page at the scale a new page has: a full A4 page filling the window. A shrunk page is then seen at its own size rather than enlarged. Pressed by the host, it does so on every screen.">A4</button>
-      <button id="zoom_expand" type="button" hidden
-              data-help="Make the page fill the window, for everyone, at this zoom, in both directions. Nothing on it moves.">Expand</button>
-      <button id="zoom_shrink" type="button" hidden
-              data-help="Make the page, for everyone, just large enough for what is on it, with the margin around. Nothing on it moves.">Shrink</button>
-      <label class="toggle" data-help="Let the page grow when your writing reaches an edge. Off, your writing stops at the edge. Images always get the room they need.">
-        Extend <input id="extend" type="checkbox" checked>
-      </label>
-    </div>
     <div class="toolbar_right">
     <div class="group" id="host_tools">
+      <button id="page_menu_button" type="button" aria-haspopup="menu" aria-expanded="false"
+              data-help="The page and the view: fit the page to the window, show it at A4 scale, make it larger or smaller, and whether it grows as you write.">Page</button>
+      <div id="page_menu" class="popup menu" role="menu" hidden>
+        <div class="menu_title">Change the display of the page</div>
+        <button id="zoom_fit" type="button" class="menu_item" role="menuitem"
+                data-help="Show the whole page in the window. Pressed by the host, it does so on every screen. Ctrl (Command on a Mac) with the scroll wheel, or with a pen stroke up or down, zooms about the pointer.">Fit to the window</button>
+        <button id="zoom_sheet" type="button" class="menu_item" role="menuitem"
+                data-help="Show the page at the scale a new page has: a full A4 page filling the window. A shrunk page is then seen at its own size rather than enlarged. Pressed by the host, it does so on every screen.">A4 scale</button>
+        <hr>
+        <div class="menu_title">Change the size of the page</div>
+        <button id="zoom_expand" type="button" class="menu_item" role="menuitem" hidden
+                data-help="Make the page fill the window, for everyone, at this zoom, in both directions. Nothing on it moves.">Expand to the window</button>
+        <button id="zoom_shrink" type="button" class="menu_item" role="menuitem" hidden
+                data-help="Make the page, for everyone, just large enough for what is on it, with the margin around. Nothing on it moves.">Shrink to the contents</button>
+        <hr>
+        <label class="menu_item toggle" role="menuitemcheckbox"
+               data-help="Let the page grow when your writing reaches an edge. Off, your writing stops at the edge. Images always get the room they need.">
+          <input id="extend" type="checkbox" checked> Extend the page while writing
+        </label>
+      </div>
       <button id="new_page" type="button"
               data-help="Start a new blank page for everyone. The current page is kept in each notebook.">New</button>
       <button id="load_image" type="button"
@@ -109,6 +116,8 @@
     </div>
     <button id="session_button" type="button"
             data-help="Who is here, and the invitation to send to others.">Session</button>
+    <button id="help" type="button" data-help="Where to read about Kokkoja. With Ctrl (Command on a Mac) held, the explanations of every command in one text.">Help</button>
+    <div id="help_popup" class="popup help_popup" hidden>Help is coming!</div>
     </div>
   </header>
   <div id="notice" class="notice" hidden></div>
@@ -134,7 +143,7 @@
       <button id="copy_invitation" type="button"
               data-help="Copy the invitation, to send to the others by any means.">Copy</button>
     </div>
-    <div id="invitation_code" class="invitation_code" hidden
+    <div id="invitation_code" class="invitation_code" hidden aria-label="QR code"
          data-help="The invitation as a QR code. Point the camera of a phone or a tablet at it, and the link opens there."></div>
     <p class="note session_state">
       <span id="page_number" class="page_number"></span>
@@ -151,6 +160,16 @@
   </div>
 </dialog>
 
+<dialog id="manual_dialog" class="chooser manual">
+  <header>
+    <h2>Help</h2>
+    <button id="copy_manual" type="button" class="action"
+            data-help="Copy this text.">Copy</button>
+    <button id="manual_close" type="button" aria-label="Close">×</button>
+  </header>
+  <pre id="manual_text" class="manual_text" tabindex="0" autofocus></pre>
+</dialog>
+
 <dialog id="notebook_chooser" class="chooser">
   <header>
     <h2>Notebooks</h2>