Add node-specific "Add/View Comment" to game-tree node menu (#940)

Reworks PR #942 against the current architecture (post Electron 14->37
migration, PR #976). The original commits used setting.toggle(), which does
not exist on the renderer-side setting shims, so they were reverted and the
feature reimplemented here.

Per the PR discussion, the original global "Show Comments" toggle in the node
context menu (an out-of-place global action in a node-specific menu) is
replaced by a node-specific "Add/View Comment" item in the node menu's
Annotate submenu. Selecting it reveals the comment box (enabling Show
Comments mode, which aids feature discovery), navigates to the clicked node,
and enters edit mode with the comment field focused.

Also extracts getCommentMenuTemplate() (shared by the node menu's Annotate
submenu and the comment-box menu) and a focusCommentBox() helper (shared with
setMode), and toggles view.show_comments via setting.set/get directly.

Co-authored-by: Robert Christ <robert.christ@gmail.com>

Author: apetresc

src/modules/sabaki.js

@@ -364,18 +364,41 @@ class Sabaki extends EventEmitter {
           this.setState({deadStones: result})
         })
     } else if (mode === 'edit') {
-      this.waitForRender().then(() => {
-        let textarea = document.querySelector('#properties .edit textarea')
-
-        textarea.selectionStart = textarea.selectionEnd = 0
-        textarea.focus()
-      })
+      this.focusCommentBox()
     }
 
     this.setState(stateChange)
     this.events.emit('modeChange')
   }
 
+  focusCommentBox() {
+    this.waitForRender().then(() => {
+      let textarea = document.querySelector('#properties .edit textarea')
+      if (textarea == null) return
+
+      textarea.selectionStart = textarea.selectionEnd = 0
+      textarea.focus()
+    })
+  }
+
+  openCommentEditor(treePosition) {
+    // Reveal the comment box so the node's comment is visible — this is how
+    // users discover that nodes can carry comments. Persist the preference
+    // when it changes so the box stays open afterwards.
+    if (!setting.get('view.show_comments')) {
+      setting.set('view.show_comments', true)
+    }
+    this.setState({showCommentBox: true})
+
+    // Focus the clicked node and enter edit mode so its comment can be read or
+    // written immediately. setMode('edit') focuses the comment box only when
+    // switching into edit mode, so focus again to cover the already-in-edit
+    // case.
+    this.setCurrentTreePosition(this.inferredState.gameTree, treePosition)
+    this.setMode('edit')
+    this.focusCommentBox()
+  }
+
   openDrawer(drawer) {
     this.setState({openDrawer: drawer})
   }
@@ -2745,6 +2768,8 @@ class Sabaki extends EventEmitter {
   // Menus
 
   openNodeMenu(treePosition, {x, y} = {}) {
+    let commentMenu = this.getCommentMenuTemplate(treePosition)
+
     let t = i18n.context('menu.edit')
     let template = [
       {
@@ -2785,12 +2810,30 @@ class Sabaki extends EventEmitter {
         label: t('Remove &Other Variations'),
         click: () => this.removeOtherVariations(treePosition),
       },
+      {type: 'separator'},
+      {
+        label: t('&Annotate'),
+        submenu: [
+          {
+            label: t('Add/&View Comment'),
+            click: () => this.openCommentEditor(treePosition),
+          },
+          {type: 'separator'},
+          ...commentMenu,
+        ],
+      },
     ]
 
     helper.popupMenu(template, x, y)
   }
 
   openCommentMenu(treePosition, {x, y} = {}) {
+    let template = this.getCommentMenuTemplate(treePosition)
+
+    helper.popupMenu(template, x, y)
+  }
+
+  getCommentMenuTemplate(treePosition) {
     let t = i18n.context('menu.comment')
     let node = this.inferredState.gameTree.get(treePosition)
 
@@ -2874,7 +2917,7 @@ class Sabaki extends EventEmitter {
       item.click = () => this.setComment(treePosition, item.data)
     }
 
-    helper.popupMenu(template, x, y)
+    return template
   }
 
   openVariationMenu(