Using topbar as draggable area

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/bootstrap.tsx

@@ -152,8 +152,6 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
 
   render(
     <DiContextProvider value={{ di }}>
-      {isMac && <div id="draggable-top" />}
-
       {DefaultProps(App)}
     </DiContextProvider>,
 

src/renderer/components/app.scss

@@ -97,17 +97,6 @@ html, body {
   }
 }
 
-#draggable-top {
-  @include set-draggable;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: var(--main-layout-header);
-  z-index: 1000;
-  pointer-events: none;
-}
-
 body {
   font: $font-size $font-main;
 }

src/renderer/components/layout/topbar.module.css

@@ -25,7 +25,12 @@
   z-index: 2;
   width: 100%;
   grid-area: topbar;
+  height: var(--main-layout-header);
   justify-content: space-between;
+
+  /* Use topbar as draggable region */
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
 }
 
 .winMenu {

src/renderer/components/layout/topbar.tsx

@@ -20,7 +20,7 @@
  */
 
 import styles from "./topbar.module.css";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
 import { Icon } from "../icon";
@@ -49,6 +49,7 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
 
 export const TopBar = observer(({ children, ...rest }: Props) => {
   const elem = useRef<HTMLDivElement>();
+  const window = useMemo(() => getCurrentWindow(), []);
 
   const renderRegisteredItems = () => {
     const items = TopBarRegistry.getInstance().getItems();
@@ -96,8 +97,14 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
       return;
     }
 
-    const window = getCurrentWindow();
+    toggleMaximize();
+  };
 
+  const minimizeWindow = () => {
+    window.minimize();
+  };
+
+  const toggleMaximize = () => {
     if (window.isMaximized()) {
       window.unmaximize();
     } else {
@@ -105,6 +112,10 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     }
   };
 
+  const closeWindow = () => {
+    window.close();
+  };
+
   useEffect(() => {
     const disposer = watchHistoryState();
 
@@ -148,12 +159,12 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
         {children}
         {isWindows && (
           <div className={styles.winButtons}>
-            <div className={styles.minimize} data-testid="window-minimize" onClick={() => broadcastMessage(IpcMainWindowEvents.MINIMIZE)}>
+            <div className={styles.minimize} data-testid="window-minimize" onClick={minimizeWindow}>
               <svg width="12" height="12" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="6"></rect></svg></div>
-            <div className={styles.maximize} data-testid="window-maximize" onClick={() => broadcastMessage(IpcMainWindowEvents.MAXIMIZE)}>
+            <div className={styles.maximize} data-testid="window-maximize" onClick={toggleMaximize}>
               <svg width="12" height="12" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
             </div>
-            <div className={styles.close} data-testid="window-close" onClick={() => broadcastMessage(IpcMainWindowEvents.CLOSE)}>
+            <div className={styles.close} data-testid="window-close" onClick={closeWindow}>
               <svg width="12" height="12" viewBox="0 0 12 12"><polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
             </div>
           </div>