[Desktop] Fix menubar mode on Linux and Windows

packages/components/src/components/ElectronTitleBar.web.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { Dimensions } from 'react-native'
 
 import { useDesktopOptions } from '../hooks/use-desktop-options'
-import { useDimensions } from '../hooks/use-dimensions'
 import { Platform } from '../libs/platform'
 import { useTheme } from './context/ThemeContext'
 import { getThemeColorOrItself } from './themed/helpers'
@@ -11,21 +9,32 @@ export function ElectronTitleBar() {
   const theme = useTheme()
 
   const [isFullScreen, setIsFullScreen] = useState(false)
+  const [isMaximized, setIsMaximized] = useState(() =>
+    window.ipc.sendSync('get-is-maximized'),
+  )
   const { isMenuBarMode } = useDesktopOptions()
-  const windowDimensions = useDimensions()
-
-  const isMaximized = windowDimensions.width === Dimensions.get('screen').width
 
   useEffect(() => {
     const handler = (_e: any, value: boolean | unknown) => {
       setIsFullScreen(value === true)
     }
 
-    // TODO: Fix. Not working.
-    window.ipc.addListener('fullscreenchange', handler)
+    window.ipc.addListener('fullscreen-change', handler)
+
+    return () => {
+      window.ipc.removeListener('fullscreen-change', handler)
+    }
+  }, [])
+
+  useEffect(() => {
+    const handler = (_e: any, value: boolean | unknown) => {
+      setIsMaximized(value === true)
+    }
+
+    window.ipc.addListener('is-maximized-change', handler)
 
     return () => {
-      window.ipc.removeListener('fullscreenchange', handler)
+      window.ipc.removeListener('is-maximized-change', handler)
     }
   }, [])
 

packages/desktop/src/helpers.ts

@@ -48,7 +48,9 @@ export function showWindow(win: BrowserWindow) {
   win.show()
 }
 
-export function getCenterPosition(obj: BrowserWindow | Tray) {
+export function getCenterPosition(
+  obj: Pick<BrowserWindow | Tray, 'getBounds'>,
+) {
   const bounds = obj.getBounds()
 
   const x = Math.round(bounds.x + bounds.width / 2)

packages/desktop/src/ipc.ts

@@ -56,27 +56,30 @@ export function register() {
     mainWindow.setFullScreen(false)
   })
 
+  ipcMain.removeAllListeners('minimize')
+  ipcMain.addListener('minimize', () => {
+    const mainWindow = window.getMainWindow()
+    if (!mainWindow) return
+    mainWindow.minimize()
+  })
+
+  ipcMain.removeAllListeners('get-is-maximized')
+  ipcMain.addListener('get-is-maximized', (e: any) => {
+    if (!e) return
+
+    e.returnValue = window.getMainWindow()?.isMaximized()
+  })
+
   ipcMain.removeAllListeners('toggle-maximize')
   ipcMain.addListener('toggle-maximize', () => {
     const mainWindow = window.getMainWindow()
     if (!mainWindow) return
 
     if (mainWindow.isMaximized()) {
-      const { width, height } = mainWindow.getBounds()
-      const lockOnCenter = config.store.get('lockOnCenter')
-
-      config.store.set('lockOnCenter', true)
-      mainWindow.setSize(
-        Math.round(width * 0.9),
-        Math.round(height * 0.9),
-        true,
-      )
-      config.store.set('lockOnCenter', lockOnCenter)
-
-      return
+      mainWindow.unmaximize()
+    } else {
+      mainWindow.maximize()
     }
-
-    mainWindow.maximize()
   })
 
   ipcMain.removeAllListeners('unread-counter')
@@ -86,13 +89,6 @@ export function register() {
     if (dock) dock.setBadge(unreadCount > 0 ? `${unreadCount}` : '')
   })
 
-  ipcMain.removeAllListeners('minimize')
-  ipcMain.addListener('minimize', () => {
-    const mainWindow = window.getMainWindow()
-    if (!mainWindow) return
-    mainWindow.minimize()
-  })
-
   ipcMain.removeAllListeners('get-all-settings')
   ipcMain.addListener('get-all-settings', (e: any) => {
     if (!e) return
@@ -109,81 +105,78 @@ export function register() {
   })
 
   ipcMain.removeAllListeners('update-settings')
-  ipcMain.addListener(
-    'update-settings',
-    (_e: any, payload: Parameters<typeof emit>[1]) => {
-      const settings = payload && payload.settings
-      const value = payload && payload.value
-
-      const mainWindow = window.getMainWindow()
-
-      switch (settings) {
-        case 'enablePushNotifications': {
-          config.store.set('enablePushNotifications', value)
-          if (value && config.store.get('enablePushNotificationsSound'))
-            helpers.playNotificationSound()
-          break
-        }
+  ipcMain.addListener('update-settings', (_e: any, payload) => {
+    const settings = payload && payload.settings
+    const value = payload && payload.value
 
-        case 'enablePushNotificationsSound': {
-          config.store.set('enablePushNotificationsSound', value)
+    const mainWindow = window.getMainWindow()
 
-          if (value) helpers.playNotificationSound()
+    switch (settings) {
+      case 'enablePushNotifications': {
+        config.store.set('enablePushNotifications', value)
+        if (value && config.store.get('enablePushNotificationsSound'))
+          helpers.playNotificationSound()
+        break
+      }
 
-          break
-        }
+      case 'enablePushNotificationsSound': {
+        config.store.set('enablePushNotificationsSound', value)
 
-        case 'isMenuBarMode': {
-          config.store.set('isMenuBarMode', !!value)
-          config.store.set('isMenuBarModeChangedAt', Date.now())
+        if (value) helpers.playNotificationSound()
 
-          if (mainWindow && mainWindow.isFullScreen()) {
-            mainWindow.setFullScreen(false)
-            setTimeout(window.updateOrRecreateWindow, 1000)
-          } else {
-            window.updateOrRecreateWindow()
-          }
-          break
+        break
+      }
+
+      case 'isMenuBarMode': {
+        config.store.set('isMenuBarMode', !!value)
+        config.store.set('isMenuBarModeChangedAt', Date.now())
+
+        if (mainWindow && mainWindow.isFullScreen()) {
+          mainWindow.setFullScreen(false)
+          setTimeout(window.updateOrRecreateWindow, 1000)
+        } else {
+          window.updateOrRecreateWindow()
         }
+        break
+      }
 
-        case 'lockOnCenter': {
-          config.store.set('lockOnCenter', value)
+      case 'lockOnCenter': {
+        config.store.set('lockOnCenter', value)
 
-          if (!mainWindow) return
+        if (!mainWindow) return
 
-          if (value) {
-            if (!config.store.get('isMenuBarMode')) {
-              mainWindow.setMovable(false)
-            }
+        if (value) {
+          if (!config.store.get('isMenuBarMode')) {
+            mainWindow.setMovable(false)
+          }
 
-            window.center(mainWindow)
-          } else {
-            if (!config.store.get('isMenuBarMode')) {
-              mainWindow.setMovable(
-                window.getBrowserWindowOptions().movable !== false,
-              )
-            }
+          window.center(mainWindow)
+        } else {
+          if (!config.store.get('isMenuBarMode')) {
+            mainWindow.setMovable(
+              window.getBrowserWindowOptions().movable !== false,
+            )
           }
-          break
         }
+        break
+      }
 
-        case 'openAtLogin': {
-          const openAtLoginChangeCount =
-            (config.store.get('openAtLoginChangeCount') || 0) + 1
+      case 'openAtLogin': {
+        const openAtLoginChangeCount =
+          (config.store.get('openAtLoginChangeCount') || 0) + 1
 
-          config.store.set('openAtLoginChangeCount', openAtLoginChangeCount)
+        config.store.set('openAtLoginChangeCount', openAtLoginChangeCount)
 
-          app.setLoginItemSettings({
-            openAtLogin: value,
-            openAsHidden: openAtLoginChangeCount > 1,
-          })
-          break
-        }
+        app.setLoginItemSettings({
+          openAtLogin: value,
+          openAsHidden: openAtLoginChangeCount > 1,
+        })
+        break
       }
+    }
 
-      if (mainWindow) mainWindow.webContents.send('update-settings', payload)
-    },
-  )
+    mainWindow?.webContents.send('update-settings', payload)
+  })
 
   ipcMain.removeAllListeners('show-notification')
   ipcMain.addListener(
@@ -260,6 +253,11 @@ export function emit(
     value: boolean
   },
 ): void
+export function emit(event: 'fullscreen-change', payload: boolean): void
+export function emit(event: 'is-maximized-change', payload: boolean): void
 export function emit(event: string, payload: any): void {
   ipcMain.emit(event, null, payload)
+
+  const mainWindow = window.getMainWindow()
+  if (mainWindow) mainWindow.webContents.send(event, payload)
 }

packages/desktop/src/menu.ts

@@ -190,12 +190,6 @@ export function getRestartMenuItem() {
 
 export function getModeMenuItems() {
   const _mainWindow = window.getMainWindow()
-  const _tray = tray.getTray()
-  if (
-    !(_tray && _tray.getBounds().width && _tray.getBounds().height) &&
-    !config.store.get('isMenuBarMode')
-  )
-    return []
 
   const isCurrentWindow =
     _mainWindow && _mainWindow.isVisible() && !_mainWindow.isMinimized()

packages/desktop/src/tray.ts

@@ -87,18 +87,26 @@ export function showTrayContextPopup() {
 export function alignWindowWithTray(win: BrowserWindow) {
   if (!(tray && !tray.isDestroyed())) return
 
-  const trayBounds = tray.getBounds()
+  const xSpacing = 10
+  const ySpacing = 0
+
+  const workArea = screen.getDisplayFromCursor().workArea
+  const screenSize = screen.getDisplayFromCursor().size
+
+  let trayBounds = tray.getBounds()
   if (
     !(trayBounds.width && trayBounds.height && (trayBounds.x || trayBounds.y))
   ) {
-    window.center(win)
-    return
+    trayBounds = {
+      x: trayBounds.x || screenSize.width - xSpacing,
+      y: trayBounds.y || 0,
+      width: trayBounds.width || 0,
+      height: trayBounds.height || 0,
+    }
   }
 
-  const screenSize = screen.getDisplayFromCursor().size
-  const workArea = screen.getDisplayFromCursor().workArea
   const windowBounds = win.getBounds()
-  const trayCenter = helpers.getCenterPosition(tray)
+  const trayCenter = helpers.getCenterPosition({ getBounds: () => trayBounds })
 
   const top = trayBounds.y < screenSize.height / 3
   const bottom = screenSize.height - trayBounds.y < screenSize.height / 3
@@ -107,7 +115,6 @@ export function alignWindowWithTray(win: BrowserWindow) {
 
   let x: number
   let y: number
-  const spacing = 0
 
   if (top) {
     y = Math.round(trayCenter.y)
@@ -126,12 +133,12 @@ export function alignWindowWithTray(win: BrowserWindow) {
   }
 
   const fixedX = Math.max(
-    workArea.x + spacing,
-    Math.min(x, workArea.x + workArea.width - windowBounds.width - spacing),
+    workArea.x + xSpacing,
+    Math.min(x, workArea.x + workArea.width - windowBounds.width - xSpacing),
   )
   const fixedY = Math.max(
-    workArea.y + spacing,
-    Math.min(y, workArea.y + workArea.height - windowBounds.height - spacing),
+    workArea.y + ySpacing,
+    Math.min(y, workArea.y + workArea.height - windowBounds.height - ySpacing),
   )
 
   win.setPosition(fixedX, fixedY)