Do "More" drop-down without using electron.remote

This one was a bit tougher. Basically I'm now creating a *descriptive*
structure on the renderer side, and then adding the event handlers on the
server side. The event handlers then simply trigger a navigation IPC message.

Author: black-puppydog

index.js

@@ -150,6 +150,19 @@ electron.app.on('ready', () => {
     quitting = true
   })
 
+  electron.ipcMain.handle('navigation-menu-popup', (event, data) => {
+    const {items, x, y} = data
+    const window = event.sender
+    const factor = event.sender.zoomFactor
+    const menuItems = buildMenu(items, window)
+    const menu = electron.Menu.buildFromTemplate(menuItems);
+    menu.popup({
+      window,
+      x: Math.round(x * factor),
+      y: Math.round(y * factor) + 4,
+    });
+  })
+
   electron.ipcMain.handle('consoleLog', (ev, o) => console.log(o))
   electron.ipcMain.handle('consoleError', (ev, o) => console.error(o))
   electron.ipcMain.handle('badgeCount', (ev, count) => {
@@ -164,6 +177,34 @@ electron.app.on('ready', () => {
   })
 })
 
+function buildMenu(items, window) {
+  const result = []
+  for (let item of items) {
+    switch (item.type) {
+      case 'separator':
+        result.push(item)
+        break
+      case 'submenu':
+        result.push({
+          ...item,
+          submenu: buildMenu(item.submenu, window),
+        })
+        break
+      case 'normal':
+        result.push({
+          ...item,
+          click: () => {
+            window.send('navigate-to', item.target)
+          }
+        })
+        break
+      default:
+        throw Error(`Unknown menu item of type "${item.type}": ${JSON.stringify(item, null, 2)}`);
+    }
+  }
+  return result
+}
+
 function openMainWindow () {
   if (!windows.main) {
     const windowState = WindowState({

lib/main-window.js

@@ -142,6 +142,10 @@ module.exports = function (config) {
 
   electron.ipcRenderer.on('goToSettings', () => api.app.navigate('/settings'))
 
+  electron.ipcRenderer.on("navigate-to", (ev, target) => {
+    navigate(target);
+  });
+
   document.head.appendChild(
     h('style', {
       innerHTML: computed(api.settings.obs.get('patchwork.theme', 'light'), themeName => {
@@ -211,21 +215,7 @@ module.exports = function (config) {
       h('span.nav', [
         tab(i18n('Public'), '/public'),
         tab(i18n('Private'), '/private'),
-        dropTab(i18n('More'), [
-          getSubscribedChannelMenu,
-          subMenu(i18n('Participating'), [
-            [i18n('All Threads'), '/participating'],
-            [i18n('Threads Started By You'), '/your-posts']
-          ]),
-          subMenu(i18n('Gatherings'), [
-            [i18n('All'), '/gatherings'],
-            [i18n('Attending'), '/attending-gatherings']
-          ]),
-          [i18n('Tags'), `/tags/all/${encodeURIComponent(id)}`],
-          [i18n('Extended Network'), '/all'],
-          { separator: true },
-          [i18n('Settings'), '/settings']
-        ])
+        dropTab(i18n('More'))
       ]),
       h('span.appTitle', [
         h('span.title', i18n('Patchwork')),
@@ -265,78 +255,99 @@ module.exports = function (config) {
 
   // scoped
 
-  function subMenu (label, items) {
-    return function () {
-      return {
-        label,
-        submenu: items.map(item => {
-          return {
-            label: item[0],
-            click () {
-              navigate(item[1])
-            }
-          }
-        })
-      }
-    }
-  }
-
   function getSubscribedChannelMenu () {
     const channels = Array.from(subscribedChannels()).sort(localeCompare)
 
     if (channels.length) {
       return {
+        type: 'submenu',
         label: i18n('Channels'),
         submenu: [
           {
+            type: 'normal',
             label: i18n('Browse Recently Active'),
-            click () {
-              navigate('/channels')
-            }
+            target: '/channels'
           },
           { type: 'separator' }
-        ].concat(channels.map(channel => {
-          return {
-            label: `#${channel}`,
-            click () {
-              navigate(`#${channel}`)
-            }
-          }
-        }))
+        ].concat(channels.map(channel => ({
+          type: 'normal',
+          label: `#${channel}`,
+          target: `#${channel}`,
+        })))
       }
     } else {
       return {
+        type: 'normal',
         label: i18n('Browse Channels'),
-        click () {
-          navigate('/channels')
-        }
+        target: '/channels',
       }
     }
   }
 
-  function dropTab (title, items) {
+  function buildDropdownMenuItems() {
+    const dropTabItems = [
+      getSubscribedChannelMenu(),
+      {
+        type: 'submenu',
+        label: i18n("Participating"),
+        submenu: [
+          {
+            type: "normal",
+            label: i18n("All Threads"),
+            target: "/participating",
+          },
+          {
+            type: "normal",
+            label: i18n("Threads Started By You"),
+            target: "/your-posts",
+          },
+        ],
+      },
+      {
+        type: "submenu",
+        label: i18n("Gatherings"),
+        submenu: [
+          {
+            type: "normal",
+            label: i18n("All"),
+            target: "/gatherings",
+          },
+          {
+            type: "normal",
+            label: i18n("Attending"),
+            target: "/attending-gatherings",
+          },
+        ],
+      },
+      {
+        type: "normal",
+        label: i18n("Tags"),
+        target: `/tags/all/${encodeURIComponent(id)}`,
+      },
+      {
+        type: "normal",
+        label: i18n("Extended Network"),
+        target: "/all",
+      },
+      { type: "separator" },
+      {
+        type: "normal",
+        label: i18n("Settings"),
+        target: "/settings",
+      },
+    ];
+    return dropTabItems
+  }
+
+  function dropTab (title) {
     const element = h('a -drop', {
       'ev-click': () => {
+        const dropTabItems = buildDropdownMenuItems()
         const rects = element.getBoundingClientRect()
-        const factor = electron.remote.getCurrentWindow().webContents.zoomFactor
-        const menu = electron.remote.Menu.buildFromTemplate(items.map(item => {
-          if (typeof item === 'function') {
-            return item()
-          } else if (item.separator) {
-            return { type: 'separator' }
-          } else {
-            return {
-              label: item[0],
-              click () {
-                navigate(item[1])
-              }
-            }
-          }
-        }))
-        menu.popup({
-          window: electron.remote.getCurrentWindow(),
-          x: Math.round(rects.left * factor),
-          y: Math.round(rects.bottom * factor) + 4
+        electron.ipcRenderer.invoke('navigation-menu-popup', {
+          x: rects.left,
+          y: rects.bottom,
+          items: dropTabItems,
         })
       }
     }, title)