[MM-59841] Migrate to titleBarOverlay for Windows (#3111)

src/renderer/components/MainPage.tsx

@@ -18,10 +18,6 @@ import ExtraBar from './ExtraBar';
 import ServerDropdownButton from './ServerDropdownButton';
 import TabBar from './TabBar';
 
-import closeButton from '../../assets/titlebar/chrome-close.svg';
-import maximizeButton from '../../assets/titlebar/chrome-maximize.svg';
-import minimizeButton from '../../assets/titlebar/chrome-minimize.svg';
-import restoreButton from '../../assets/titlebar/chrome-restore.svg';
 import {playSound} from '../notificationSounds';
 
 import '../css/components/UpgradeButton.scss';
@@ -38,7 +34,6 @@ type Props = {
     openMenu: () => void;
     darkMode: boolean;
     appName: string;
-    useNativeWindow: boolean;
     intl: IntlShape;
 };
 
@@ -326,23 +321,13 @@ class MainPage extends React.PureComponent<Props, State> {
         this.handleSelectTab(tab[0].id!);
     };
 
-    handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
+    handleExitFullScreen = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation(); // since it is our button, the event goes into MainPage's onclick event, getting focus back.
-        window.desktop.closeWindow();
-    };
 
-    handleMinimize = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation();
-        window.desktop.minimizeWindow();
-    };
-
-    handleMaximize = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation();
-        window.desktop.maximizeWindow();
-    };
-
-    handleRestore = () => {
-        window.desktop.restoreWindow();
+        if (!this.state.fullScreen) {
+            return;
+        }
+        window.desktop.exitFullScreen();
     };
 
     openMenu = () => {
@@ -430,60 +415,6 @@ class MainPage extends React.PureComponent<Props, State> {
             />
         ) : null;
 
-        let maxButton;
-        if (this.state.maximized || this.state.fullScreen) {
-            maxButton = (
-                <div
-                    className='button restore-button'
-                    onClick={this.handleRestore}
-                >
-                    <img
-                        src={restoreButton}
-                        draggable={false}
-                    />
-                </div>
-            );
-        } else {
-            maxButton = (
-                <div
-                    className='button max-button'
-                    onClick={this.handleMaximize}
-                >
-                    <img
-                        src={maximizeButton}
-                        draggable={false}
-                    />
-                </div>
-            );
-        }
-
-        let titleBarButtons;
-        if (window.process.platform === 'win32' && !this.props.useNativeWindow) {
-            titleBarButtons = (
-                <span className='title-bar-btns'>
-                    <div
-                        className='button min-button'
-                        onClick={this.handleMinimize}
-                    >
-                        <img
-                            src={minimizeButton}
-                            draggable={false}
-                        />
-                    </div>
-                    {maxButton}
-                    <div
-                        className='button close-button'
-                        onClick={this.handleClose}
-                    >
-                        <img
-                            src={closeButton}
-                            draggable={false}
-                        />
-                    </div>
-                </span>
-            );
-        }
-
         const totalMentionCount = Object.keys(this.state.mentionCounts).reduce((sum, key) => {
             // Strip out current server from unread and mention counts
             if (this.state.tabs.get(this.state.activeServerId!)?.map((tab) => tab.id).includes(key)) {
@@ -541,7 +472,16 @@ class MainPage extends React.PureComponent<Props, State> {
                     )}
                     {tabsRow}
                     {downloadsDropdownButton}
-                    {titleBarButtons}
+                    {window.process.platform !== 'darwin' && this.state.fullScreen &&
+                        <span className='title-bar-btns'>
+                            <div
+                                className='button full-screen-button'
+                                onClick={this.handleExitFullScreen}
+                            >
+                                <i className='icon icon-arrow-collapse'/>
+                            </div>
+                        </span>
+                    }
                 </div>
             </Row>
         );