feat: Use custom window buttons on Windows

Author: QuiiBz

src/window/WindowFactory.ts

@@ -6,7 +6,7 @@ import { UndefinedObject } from '@common/types/types';
 import Config  from '@common/config/Config';
 import windowStateKeeper, { State } from 'electron-window-state';
 import { IConfig } from '@common/config/Config';
-import { isDev } from '@common/utils/utils';
+import { isDev, isWin } from '@common/utils/utils';
 import { callTrigger } from '@common/packages/packages';
 
 export default class WindowFactory implements Factory<BrowserWindow> {
@@ -83,6 +83,7 @@ export default class WindowFactory implements Factory<BrowserWindow> {
             transparent: true,
             title: 'Squid',
             titleBarStyle: 'hidden',
+            frame: !isWin,
             visualEffectState: 'active', // Always show the vibrancy
             show: false,
             backgroundColor: '#00ffffff',

ui/components/navbar/ButtonSeparator.tsx

@@ -0,0 +1,13 @@
+import React, { FC, ReactElement, useContext } from 'react';
+import { ConfigContext } from '@ui/contexts/ConfigContext';
+
+const ButtonSeparator: FC = (): ReactElement => {
+
+    const { theme } = useContext(ConfigContext);
+
+    return <div
+        className='button-separator'
+        style={{ backgroundColor: theme.border }} />;
+}
+
+export default ButtonSeparator;

ui/components/navbar/Navbar.tsx

@@ -5,6 +5,7 @@ import { ConfigContext } from '@ui/contexts/ConfigContext';
 import NavbarButton from '@ui/components/navbar/buttons/NavbarButton';
 import { remote } from 'electron';
 import { isMac } from '@common/utils/utils';
+import ButtonSeparator from '@ui/components/navbar/ButtonSeparator';
 import '@ui/styles/navbar.scss';
 
 const Navbar: FC = (): ReactElement => {
@@ -23,6 +24,15 @@ const Navbar: FC = (): ReactElement => {
                     onClick={() => remote.getCurrentWindow().webContents.send('menu')}
                     icon="mdi-settings" />
                 <AuthButton />
+                {
+                    !isMac &&
+                    <>
+                        <ButtonSeparator />
+                        <NavbarButton onClick={() => remote.getCurrentWindow().minimize()} icon="mdi-window_minimize" />
+                        <NavbarButton onClick={() => remote.getCurrentWindow().isMaximized() ? remote.getCurrentWindow().unmaximize() : remote.getCurrentWindow().maximize()} icon="mdi-window_restore" />
+                        <NavbarButton onClick={() => remote.getCurrentWindow().close()} icon="mdi-window_close" />
+                    </>
+                }
             </div>
         </div>
     );

ui/styles/navbar.scss

@@ -21,6 +21,13 @@
         display: flex;
         justify-content: flex-end;
 
+        .button-separator {
+
+            width: 1px;
+            height: 100%;
+            margin: 0 15px;
+        }
+
         button {
 
             -webkit-app-region: no-drag;