add macos fullscreen

dist/styles/global.css

@@ -207,7 +207,7 @@ body.darwin .btn-group .seperator {
     height: var(--navHeight);
     line-height: var(--navHeight);
 }
-body.darwin #root > nav .btn-group .btn:first-of-type {
+body.darwin.not-fullscreen #root > nav .btn-group .btn:first-of-type {
     margin-left: 72px;
 }
 #root > nav .btn-group .btn.system {

dist/styles/main.css

@@ -222,7 +222,7 @@ img.favicon.dropdown {
     height: calc(var(--navHeight) - 4px);
     box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,.132), 0 0.3px 0.9px 0 rgba(0,0,0,.108);
 }
-body.darwin .article-search {
+body.darwin.not-fullscreen .article-search {
     left: 108px;
     max-width: calc(100% - 384px);
 }

src/bridges/utils.ts

@@ -90,6 +90,9 @@ const utilsBridge = {
     isMaximized: () => {
         return ipcRenderer.sendSync("is-maximized") as boolean
     },
+    isFullscreen: () => {
+        return ipcRenderer.sendSync("is-fullscreen") as boolean
+    },
     isFocused: () => {
         return ipcRenderer.sendSync("is-focused") as boolean
     },
@@ -108,6 +111,14 @@ const utilsBridge = {
         ipcRenderer.on("unmaximized", () => {
             callback(WindowStateListenerType.Maximized, false)
         })
+        ipcRenderer.removeAllListeners("enter-fullscreen")
+        ipcRenderer.on("enter-fullscreen", () => {
+            callback(WindowStateListenerType.Fullscreen, true)
+        })
+        ipcRenderer.removeAllListeners("leave-fullscreen")
+        ipcRenderer.on("leave-fullscreen", () => {
+            callback(WindowStateListenerType.Fullscreen, false)
+        })
         ipcRenderer.removeAllListeners("window-focus")
         ipcRenderer.on("window-focus", () => {
             callback(WindowStateListenerType.Focused, true)

src/components/nav.tsx

@@ -26,6 +26,7 @@ class Nav extends React.Component<NavProps, NavState> {
     constructor(props) {
         super(props)
         this.setBodyFocusState(window.utils.isFocused())
+        this.setBodyFullscreenState(window.utils.isFullscreen())
         window.utils.addWindowStateListener(this.windowStateListener)
         this.state = {
             maximized: window.utils.isMaximized()
@@ -37,11 +38,19 @@ class Nav extends React.Component<NavProps, NavState> {
         else document.body.classList.add("blur")
     }
 
+    setBodyFullscreenState = (fullscreen: boolean) => {
+        if (fullscreen) document.body.classList.remove("not-fullscreen")
+        else document.body.classList.add("not-fullscreen")
+    }
+
     windowStateListener = (type: WindowStateListenerType, state: boolean) => {
         switch (type) {
             case WindowStateListenerType.Maximized:
                 this.setState({ maximized: state })
                 break
+            case WindowStateListenerType.Fullscreen:
+                this.setBodyFullscreenState(state)
+                break
             case WindowStateListenerType.Focused:
                 this.setBodyFocusState(state)
                 break

src/main/utils.ts

@@ -184,6 +184,10 @@ export function setUtilsListeners(manager: WindowManager) {
         event.returnValue = manager.hasWindow() && manager.mainWindow.isFocused()
     })
 
+    ipcMain.on("is-fullscreen", (event) => {
+        event.returnValue = manager.hasWindow() && manager.mainWindow.isFullScreen()
+    })
+
     ipcMain.handle("request-focus", () => {
         if (manager.hasWindow()) {
             const win = manager.mainWindow

src/main/window.ts

@@ -54,7 +54,7 @@ export class WindowManager {
                 minHeight: 600,
                 frame: process.platform === "darwin",
                 titleBarStyle: "hiddenInset",
-                fullscreenable: false,
+                fullscreenable: process.platform === "darwin",
                 show: false,
                 webPreferences: {
                     webviewTag: true,
@@ -79,6 +79,12 @@ export class WindowManager {
             this.mainWindow.on("unmaximize", () => {
                 this.mainWindow.webContents.send("unmaximized")
             })
+            this.mainWindow.on("enter-full-screen", () => {
+                this.mainWindow.webContents.send("enter-fullscreen")
+            })
+            this.mainWindow.on("leave-full-screen", () => {
+                this.mainWindow.webContents.send("leave-fullscreen")
+            })
             this.mainWindow.on("focus", () => {
                 this.mainWindow.webContents.send("window-focus")
             })

src/schema-types.ts

@@ -51,7 +51,7 @@ export interface ServiceConfigs {
 }
 
 export const enum WindowStateListenerType {
-    Maximized, Focused
+    Maximized, Focused, Fullscreen
 }
 
 export interface TouchBarTexts {