[MM-40009] Add servers dropdown shortcut to menu (#1926)

* [MM-40009] Add servers dropdown shortcut to menu

* Lint fix

* Fix the shortcut for macOS

* Fix character

src/main/menus/app.ts

@@ -5,7 +5,7 @@
 
 import {app, ipcMain, Menu, MenuItemConstructorOptions, MenuItem, session, shell, WebContents, webContents} from 'electron';
 
-import {SHOW_NEW_SERVER_MODAL} from 'common/communication';
+import {OPEN_TEAMS_DROPDOWN, SHOW_NEW_SERVER_MODAL} from 'common/communication';
 import {Config} from 'common/config';
 import {TabType, getTabDisplayName} from 'common/tabs/TabView';
 
@@ -210,7 +210,13 @@ export function createTemplate(config: Config) {
         ] : []), {
             role: 'close',
             accelerator: 'CmdOrCtrl+W',
-        }, separatorItem, ...teams.sort((teamA, teamB) => teamA.order - teamB.order).slice(0, 9).map((team, i) => {
+        }, separatorItem, {
+            label: 'Show Servers',
+            accelerator: `${process.platform === 'darwin' ? 'Cmd+Ctrl' : 'Ctrl+Shift'}+S`,
+            click() {
+                ipcMain.emit(OPEN_TEAMS_DROPDOWN);
+            },
+        }, ...teams.sort((teamA, teamB) => teamA.order - teamB.order).slice(0, 9).map((team, i) => {
             const items = [];
             items.push({
                 label: team.name,

src/main/preload/dropdown.js

@@ -3,7 +3,7 @@
 
 'use strict';
 
-import {ipcRenderer} from 'electron';
+import {ipcRenderer, contextBridge} from 'electron';
 
 import {
     UPDATE_TEAMS_DROPDOWN,
@@ -20,6 +20,10 @@ import {
 
 console.log('preloaded for the dropdown!');
 
+contextBridge.exposeInMainWorld('process', {
+    platform: process.platform,
+});
+
 window.addEventListener('message', async (event) => {
     switch (event.data.type) {
     case REQUEST_TEAMS_DROPDOWN_INFO:

src/main/windows/mainWindow.ts

@@ -10,7 +10,7 @@ import log from 'electron-log';
 
 import {SavedWindowState} from 'types/mainWindow';
 
-import {SELECT_NEXT_TAB, SELECT_PREVIOUS_TAB, GET_FULL_SCREEN_STATUS, OPEN_TEAMS_DROPDOWN} from 'common/communication';
+import {SELECT_NEXT_TAB, SELECT_PREVIOUS_TAB, GET_FULL_SCREEN_STATUS} from 'common/communication';
 import Config from 'common/config';
 import {DEFAULT_WINDOW_HEIGHT, DEFAULT_WINDOW_WIDTH, MINIMUM_WINDOW_HEIGHT, MINIMUM_WINDOW_WIDTH} from 'common/utils/constants';
 import Utils from 'common/utils/util';
@@ -190,9 +190,6 @@ function createMainWindow(options: {linuxAppIcon: string}) {
                 // do nothing because we want to supress the menu popping up
             });
         }
-        globalShortcut.register(`${process.platform === 'darwin' ? 'Cmd+Ctrl' : 'Ctrl+Shift'}+S`, () => {
-            ipcMain.emit(OPEN_TEAMS_DROPDOWN);
-        });
     });
     mainWindow.on('blur', () => {
         globalShortcut.unregisterAll();

src/renderer/css/dropdown.scss

@@ -40,13 +40,25 @@ body {
 
 .TeamDropdown__header {
     padding: 6px 20px;
+    display: flex;
+    align-items: center;
+    width: -webkit-fill-available;
+    user-select: none;
 
-    > span {
+    .TeamDropdown__servers {
         font-weight: 600;
         font-size: 14px;
         line-height: 20px;
         color: #3D3C40;
     }
+
+    .TeamDropdown__keyboardShortcut {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        color: rgba(61, 60, 64, 0.56);
+        margin-left: auto;
+    }
 }
 
 .TeamDropdown__divider {
@@ -253,6 +265,10 @@ body {
 
     .TeamDropdown__header > span {
         color: #DDD;
+
+        &.TeamDropdown__keyboardShortcut {
+            color: rgba(221, 221, 221, 0.56);
+        }
     }
 
     .TeamDropdown__divider {

src/renderer/dropdown.tsx

@@ -239,7 +239,10 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
                 }}
             >
                 <div className='TeamDropdown__header'>
-                    <span>{'Servers'}</span>
+                    <span className='TeamDropdown__servers'>{'Servers'}</span>
+                    <span className='TeamDropdown__keyboardShortcut'>
+                        {window.process.platform === 'darwin' ? '⌃⌘S' : 'Ctrl + Shift + S'}
+                    </span>
                 </div>
                 <hr className='TeamDropdown__divider'/>
                 <DragDropContext