render traffic lights space only when compact header is enabled

src-main/config.ts

@@ -1,4 +1,4 @@
-import { app } from 'electron'
+import { app, ipcMain } from 'electron'
 import { is } from 'electron-util'
 
 import Store = require('electron-store')
@@ -145,4 +145,8 @@ if (config.get(ConfigKey.ResetConfig)) {
   config.set(ConfigKey.ResetConfig, false)
 }
 
+ipcMain.handle('is-compact-header-enabled', () =>
+  config.get(ConfigKey.CompactHeader)
+)
+
 export default config

src-renderer/App.tsx

@@ -8,11 +8,13 @@ import {
   useAccounts,
   useAddAccount,
   useDarkMode,
-  useEditAccount
+  useEditAccount,
+  useIsCompactHeaderEnabled
 } from './hooks'
 import { isMacOS } from './constants'
 
 export default function App() {
+  const { isCompactHeaderEnabled } = useIsCompactHeaderEnabled()
   const { accounts, selectAccount } = useAccounts()
   const { isAddingAccount, addAccount, cancelAddAccount } = useAddAccount()
   const {
@@ -34,7 +36,7 @@ export default function App() {
           WebkitAppRegion: 'drag'
         }}
       >
-        {isMacOS && <TrafficLightsSpace />}
+        {isMacOS && isCompactHeaderEnabled && <TrafficLightsSpace />}
         <AccountsTab
           accounts={accounts}
           onSelectAccount={selectAccount}

src-renderer/hooks.ts

@@ -16,6 +16,17 @@ export function useDarkMode() {
   }, [])
 }
 
+export function useIsCompactHeaderEnabled() {
+  // Compact header is enabled by default in the app config
+  const [isCompactHeaderEnabled, setIsCompactHeaderEnabled] = useState(true)
+
+  useEffect(() => {
+    ipc.invoke('is-compact-header-enabled').then(setIsCompactHeaderEnabled)
+  }, [])
+
+  return { isCompactHeaderEnabled }
+}
+
 export function useAccounts() {
   const [accounts, setAccounts] = useState<Account[]>([])
   const [unreadCounts, setUnreadCounts] = useState<UnreadCounts>({})