From 503c21f53a0eef045ae8c2c951ced23128a12d25 Mon Sep 17 00:00:00 2001
From: Dennis Snell <dennis.snell@automattic.com>
Date: Wed, 5 Aug 2020 18:06:33 -0400
Subject: [PATCH] Harmonize menu bar and settings in sidebar

The web app has settings/keyboard shortcuts/about items in the navigation bar but those are absent from Electron.
Electron already provides access to the settings through the OS menu but it's confusing to jump between the web and
the electron app to discover those items are missing in one place.

In this PR we stop hiding the settings and other items in the navigation sidebar when running in Electron.

The Electron OS menu has also been missing "Empty Trash" and "Sign Out" as the native apps have. "Sign Out" is particularly
convenient to have there and its absence makes logging-out particularly inconvenient.

As a result of the overall state refactor in the app we're adding those menu items to make it more convenient again.
---
 desktop/menus/mac-app-menu.js    |  7 ++++
 desktop/menus/menu-items.js      | 20 +++++++++
 lib/navigation-bar/index.tsx     | 71 +++++++++++++++-----------------
 lib/state/electron/middleware.ts |  8 ++++
 4 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/desktop/menus/mac-app-menu.js b/desktop/menus/mac-app-menu.js
index 274b0bc71..106413d39 100644
--- a/desktop/menus/mac-app-menu.js
+++ b/desktop/menus/mac-app-menu.js
@@ -21,6 +21,13 @@ const buildMacAppMenu = (isAuthenticated) => {
     { role: 'hide' },
     { role: 'hideothers' },
     { role: 'unhide' },
+    ...(isAuthenticated
+      ? [
+          { type: 'separator' },
+          menuItems.emptyTrash(isAuthenticated),
+          menuItems.signout(isAuthenticated),
+        ]
+      : []),
     { type: 'separator' },
     { role: 'quit' },
   ];
diff --git a/desktop/menus/menu-items.js b/desktop/menus/menu-items.js
index 667f8593b..89449dcc5 100644
--- a/desktop/menus/menu-items.js
+++ b/desktop/menus/menu-items.js
@@ -16,6 +16,14 @@ const checkForUpdates = {
   click: updater.pingAndShowProgress.bind(updater),
 };
 
+const emptyTrash = (isAuthenticated) => {
+  return {
+    label: '&Empty Trash',
+    visible: isAuthenticated,
+    click: appCommandSender({ action: 'emptyTrash' }),
+  };
+};
+
 const preferences = (isAuthenticated) => {
   return {
     label: 'P&references…',
@@ -28,8 +36,20 @@ const preferences = (isAuthenticated) => {
   };
 };
 
+const signout = (isAuthenticated) => {
+  return {
+    label: '&Sign Out',
+    visible: isAuthenticated,
+    click: appCommandSender({
+      action: 'logout',
+    }),
+  };
+};
+
 module.exports = {
   about,
   checkForUpdates,
+  emptyTrash,
   preferences,
+  signout,
 };
diff --git a/lib/navigation-bar/index.tsx b/lib/navigation-bar/index.tsx
index df0fac0f4..0e94d4f31 100644
--- a/lib/navigation-bar/index.tsx
+++ b/lib/navigation-bar/index.tsx
@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import onClickOutside from 'react-onclickoutside';
 
-import { isElectron } from '../utils/platform';
 import ConnectionStatus from '../connection-status';
 import NavigationBarItem from './item';
 import TagList from '../tag-list';
@@ -91,42 +90,38 @@ export class NavigationBar extends Component<Props> {
           </div>
         </div>
 
-        {(!isElectron || autoHideMenuBar) && (
-          <Fragment>
-            <div className="navigation-bar__tools theme-color-border">
-              <NavigationBarItem
-                icon={<SettingsIcon />}
-                label="Settings"
-                onClick={onSettings}
-              />
-            </div>
-            <div className="navigation-bar__footer">
-              <button
-                type="button"
-                className="navigation-bar__footer-item theme-color-fg-dim"
-                onClick={this.props.showKeyboardShortcuts}
-              >
-                Keyboard Shortcuts
-              </button>
-            </div>
-            <div className="navigation-bar__footer">
-              <button
-                type="button"
-                className="navigation-bar__footer-item theme-color-fg-dim"
-                onClick={this.onHelpClicked}
-              >
-                Help &amp; Support
-              </button>
-              <button
-                type="button"
-                className="navigation-bar__footer-item theme-color-fg-dim"
-                onClick={onAbout}
-              >
-                About
-              </button>
-            </div>
-          </Fragment>
-        )}
+        <div className="navigation-bar__tools theme-color-border">
+          <NavigationBarItem
+            icon={<SettingsIcon />}
+            label="Settings"
+            onClick={onSettings}
+          />
+        </div>
+        <div className="navigation-bar__footer">
+          <button
+            type="button"
+            className="navigation-bar__footer-item theme-color-fg-dim"
+            onClick={this.props.showKeyboardShortcuts}
+          >
+            Keyboard Shortcuts
+          </button>
+        </div>
+        <div className="navigation-bar__footer">
+          <button
+            type="button"
+            className="navigation-bar__footer-item theme-color-fg-dim"
+            onClick={this.onHelpClicked}
+          >
+            Help &amp; Support
+          </button>
+          <button
+            type="button"
+            className="navigation-bar__footer-item theme-color-fg-dim"
+            onClick={onAbout}
+          >
+            About
+          </button>
+        </div>
       </div>
     );
   }
diff --git a/lib/state/electron/middleware.ts b/lib/state/electron/middleware.ts
index 72e4861c0..58b19da0d 100644
--- a/lib/state/electron/middleware.ts
+++ b/lib/state/electron/middleware.ts
@@ -5,10 +5,18 @@ import * as S from '../';
 export const middleware: S.Middleware = ({ dispatch, getState }) => {
   window.electron.receive('appCommand', (command) => {
     switch (command.action) {
+      case 'emptyTrash':
+        dispatch(actions.ui.emptyTrash());
+        return;
+
       case 'exportNotes':
         dispatch(actions.data.exportNotes());
         return;
 
+      case 'logout':
+        dispatch({ type: 'LOGOUT' });
+        return;
+
       case 'printNote':
         window.print();
         return;