fix: Fix scrollbars and window minimize/close actions for win

addons/api/mirage/scenarios/ipc.js

@@ -62,7 +62,14 @@ export default function initializeMockIPC(server) {
     }
 
     /**
-     * Check for browser running on windows OS
+     * Check for browsers running on mac OS
+     */
+    isMacOS() {
+      return Boolean(window.navigator.userAgent.match(/(macintosh)/i));
+    }
+
+    /**
+     * Check for browsers running on windows OS
      */
     isWindowsOS() {
       return Boolean(window.navigator.userAgent.match(/(windows)/i));

ui/desktop/app/routes/application.js

@@ -44,12 +44,11 @@ export default class ApplicationRoute extends Route {
   }
 
   /**
-   * Add windows OS config on controller
+   * Add OS config on controller
    */
-  async setupController(controller, model) {
-    super.setupController(controller, model);
-    const isWindowsOS = await this.ipc.invoke('isWindowsOS');
-    this.controllerFor('application').set('isWindowsOS', isWindowsOS);
+  async setupController(controller, ...args) {
+    controller.set('isMacOS', await this.ipc.invoke('isMacOS'));
+    controller.set('isWindowsOS', await this.ipc.invoke('isWindowsOS'));
   }
 
   // =actions

ui/desktop/app/styles/app.scss

@@ -29,13 +29,34 @@
 
   .rose-layout-global-body {
     max-height: 100vh;
-    overflow: hidden;
+    overflow: auto;
+
+    main {
+      flex-grow: 1;
+      overflow: auto;
+    }
   }
 
   .rose-layout-sidebar-sidebar,
   .rose-layout-sidebar-body {
     overflow-y: scroll;
   }
+
+  // Windows OS specific overflow.
+  &.layout-scroll {
+    .rose-layout-global-body {
+      overflow-y: auto;
+
+      main {
+        overflow: unset;
+      }
+    }
+
+    .rose-layout-sidebar-sidebar,
+    .rose-layout-sidebar-body {
+      overflow-y: unset;
+    }
+  }
 }
 
 .rose-nav-sidebar {
@@ -122,7 +143,6 @@
   -webkit-app-region: drag;
   -webkit-user-select: none;
   min-height: sizing.rems(l) * 2;
-  padding-left: sizing.rems(l) * 3;
   position: relative;
 
   .rose-header-brand, .rose-header-nav,
@@ -131,8 +151,20 @@
     -webkit-app-region: no-drag;
   }
 
-  &.header-shrink {
-    padding-left: 0;
+  &.header-cushion {
+    padding-left: sizing.rems(l) * 3;
+  }
+
+  .utilities-actions {
+    display: flex;
+    justify-content: center;
+
+    button {
+      background: transparent;
+      border: transparent;
+      color: var(--white);
+      margin: sizing.rems(xs);
+    }
   }
 
   .logotype {
@@ -225,13 +257,6 @@
   white-space: nowrap;
 }
 
-.rose-layout-global .rose-layout-global-body {
-  main {
-    flex-grow: 1;
-    overflow: auto;
-  }
-}
-
 .branded-card {
   border: 1px solid var(--ui-border-subtler-1);
   border-radius: sizing.rems(xxxs);

ui/desktop/app/templates/application.hbs

@@ -1,9 +1,9 @@
 {{page-title (app-name)}}
 
-<Rose::Layout::Global as |layout|>
+<Rose::Layout::Global class='{{if this.isWindowsOS ' layout-scroll'}}' as |layout|>
 
   <layout.header>
-    <Rose::Header class='{{if (is-loading) ' loading'}} {{if this.isWindowsOS ' header-shrink'}}' as |header|>
+    <Rose::Header class='{{if (is-loading) ' loading'}} {{if this.isMacOS ' header-cushion'}}' as |header|>
       <header.brand @logo='logo-app' @text={{app-name}} />
       {{#if this.session.isAuthenticated}}
         <header.nav>
@@ -13,15 +13,17 @@
 
       <header.utilities as |utilities|>
         {{#if this.isWindowsOS}}
-          <Rose::Button @iconOnly="cancel-plain"
-            {{on 'click' (route-action 'close')}}
-          />
-          <Rose::Button @iconOnly="box-outline"
-            {{on 'click' (route-action 'toggleFullScreen')}}
-          />
-          <Rose::Button @iconOnly="minus-plain"
-            {{on 'click' (route-action 'minimize')}}
-          />
+          <span class='utilities-actions'>
+            <Rose::Button @iconOnly="minus-plain" @style="secondary"
+              {{on 'click' (route-action 'minimize')}}
+            />
+            <Rose::Button @iconOnly="box-outline" @style="secondary"
+              {{on 'click' (route-action 'toggleFullScreen')}}
+            />
+            <Rose::Button @iconOnly="cancel-plain" @style="warning"
+              {{on 'click' (route-action 'close')}}
+            />
+          </span>
         {{/if}}
 
         {{#if this.session.isAuthenticated}}

ui/desktop/electron-app/src/index.js

@@ -197,16 +197,19 @@ app.on('before-quit', (event) => {
       detail: 'Close sessions before quitting?',
     };
 
-    dialog.showMessageBox(dialogOpts).then((returnValue) => {
-      switch (returnValue.response) {
-        case 0:
-          sessionManager.stopAll();
-          break;
-        default:
-          event.preventDefault();
-          break;
-      }
-    });
+    const buttonId = dialog.showMessageBoxSync(null, dialogOpts);
+    buttonId === 0 ? sessionManager.stopAll() : event.preventDefault();
+
+    //   console.log(returnValue.response);
+    //   switch (returnValue.response) {
+    //     case 0:
+    //       sessionManager.stopAll();
+    //       break;
+    //     default:
+    //       event.preventDefault();
+    //       break;
+    //   }
+    // });
   }
 });
 

ui/desktop/electron-app/src/ipc/handlers.js

@@ -1,11 +1,11 @@
-const { shell, BrowserWindow } = require('electron');
+const { app, shell, BrowserWindow } = require('electron');
 const isDev = require('electron-is-dev');
 const handle = require('./ipc-handler.js');
 const boundaryCli = require('../cli/index.js');
 const sessionManager = require('../services/session-manager.js');
 const runtimeSettings = require('../services/runtime-settings.js');
 const sanitizer = require('../utils/sanitizer.js');
-const { isWindows } = require('../helpers/platform.js');
+const { isMac, isWindows } = require('../helpers/platform.js');
 
 /**
  * Returns the current runtime origin, which is used by the main thread to
@@ -67,7 +67,12 @@ handle('connect', ({ target_id, token, host_id }) =>
 handle('stop', ({ session_id }) => sessionManager.stopById(session_id));
 
 /**
- * Check whether platform is windows
+ * Check for MacOS OS
+ */
+handle('isMacOS', () => isMac());
+
+/**
+ * Check for Windows OS
  */
 handle('isWindowsOS', () => isWindows());
 
@@ -85,6 +90,6 @@ handle('toggleFullscreenWindow', () => {
 });
 
 /**
- * Close window
+ * Quit app
  */
-handle('closeWindow', () => BrowserWindow.getFocusedWindow().close());
+handle('closeWindow', () => app.quit());