feat: Borderless window for windows and drag zone for osx

packages/desktop/App.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Popup, Route, ToastContainer } from 'shared/components'
+    import { Popup, Route, TitleBar, ToastContainer } from 'shared/components'
     import { loggedIn, mobile } from 'shared/lib/app'
     import { appSettings } from 'shared/lib/appSettings'
     import { refreshVersionDetails, versionDetails } from 'shared/lib/appUpdater'
@@ -100,75 +100,78 @@
     body {
         @apply bg-white;
         @apply select-none;
+        -webkit-user-drag: none;
         &.scheme-dark {
             @apply bg-gray-900;
         }
     }
 </style>
 
-<!-- empty div to avoid auto-purge removing dark classes -->
-<div class="scheme-dark" />
-{#if !$isLocaleLoaded || splash}
-    <Splash />
-{:else}
-    {#if $popupState.active}
-        <Popup
-            type={$popupState.type}
-            props={$popupState.props}
-            hideClose={$popupState.hideClose}
-            fullScreen={$popupState.fullScreen}
-            transition={$popupState.transition}
-            locale={$_} />
-    {/if}
-    <Route route={AppRoute.Welcome}>
-        <Welcome on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Legal}>
-        <Legal on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Appearance}>
-        <Appearance on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Setup}>
-        <Setup on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Secure}>
-        <Secure on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Password}>
-        <Password on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Protect} transition={false}>
-        <Protect on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Backup} transition={false}>
-        <Backup
-            on:next={routerNext}
-            on:previous={routerPrevious}
-            mobile={$mobile}
-            locale={$_} />
-    </Route>
-    <Route route={AppRoute.Import} transition={false}>
-        <Import on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Balance}>
-        <Balance on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
-    </Route>
-    <Route route={AppRoute.Migrate}>
-        <Migrate on:next={routerNext} mobile={$mobile} locale={$_} {goto} />
-    </Route>
-    <Route route={AppRoute.Congratulations}>
-        <Congratulations on:next={routerNext} mobile={$mobile} locale={$_} {goto} />
-    </Route>
-    <Route route={AppRoute.Dashboard}>
-        <Dashboard mobile={$mobile} locale={$_} {goto} />
-    </Route>
-    <Route route={AppRoute.Login}>
-        <Login on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} {goto} />
-    </Route>
-    {#if settings}
-        <Settings locale={$_} handleClose={() => (settings = false)} />
-    {/if}
+<TitleBar>
+    <!-- empty div to avoid auto-purge removing dark classes -->
+    <div class="scheme-dark" />
+    {#if !$isLocaleLoaded || splash}
+        <Splash />
+    {:else}
+        {#if $popupState.active}
+            <Popup
+                type={$popupState.type}
+                props={$popupState.props}
+                hideClose={$popupState.hideClose}
+                fullScreen={$popupState.fullScreen}
+                transition={$popupState.transition}
+                locale={$_} />
+        {/if}
+        <Route route={AppRoute.Welcome}>
+            <Welcome on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Legal}>
+            <Legal on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Appearance}>
+            <Appearance on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Setup}>
+            <Setup on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Secure}>
+            <Secure on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Password}>
+            <Password on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Protect} transition={false}>
+            <Protect on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Backup} transition={false}>
+            <Backup
+                on:next={routerNext}
+                on:previous={routerPrevious}
+                mobile={$mobile}
+                locale={$_} />
+        </Route>
+        <Route route={AppRoute.Import} transition={false}>
+            <Import on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Balance}>
+            <Balance on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} />
+        </Route>
+        <Route route={AppRoute.Migrate}>
+            <Migrate on:next={routerNext} mobile={$mobile} locale={$_} {goto} />
+        </Route>
+        <Route route={AppRoute.Congratulations}>
+            <Congratulations on:next={routerNext} mobile={$mobile} locale={$_} {goto} />
+        </Route>
+        <Route route={AppRoute.Dashboard}>
+            <Dashboard mobile={$mobile} locale={$_} {goto} />
+        </Route>
+        <Route route={AppRoute.Login}>
+            <Login on:next={routerNext} on:previous={routerPrevious} mobile={$mobile} locale={$_} {goto} />
+        </Route>
+        {#if settings}
+            <Settings locale={$_} handleClose={() => (settings = false)} />
+        {/if}
 
-    <ToastContainer />
-{/if}
+        <ToastContainer />
+    {/if}
+</TitleBar>

packages/desktop/electron/lib/menu.js

@@ -23,10 +23,24 @@ export const initMenu = () => {
         })
 
         ipcMain.handle('menu-popup', () => {
-            mainMenu.popup(mainWindow)
+            mainMenu.popup(getOrInitWindow('main'))
         })
 
-        ipcMain.handle('updates-check', () => { })
+        ipcMain.handle('maximize', () => {
+            if (getOrInitWindow('main').isMaximized()) {
+                getOrInitWindow('main').restore();
+            } else {
+                getOrInitWindow('main').maximize();
+            }
+        })
+
+        ipcMain.handle('minimize', () => {
+            getOrInitWindow('main').minimize();
+        })
+
+        ipcMain.handle('close', () => {
+            getOrInitWindow('main').close();
+        })
 
         mainMenu = createMenu()
     })

packages/desktop/electron/main.js

@@ -128,6 +128,7 @@ function createWindow() {
         width: 1280,
         height: 720,
         titleBarStyle: 'hidden',
+        frame: process.platform === 'linux',
         webPreferences: {
             ...defaultWebPreferences,
             preload: paths.preload,
@@ -290,6 +291,11 @@ ipcMain.handle('diagnostics', (_e) => {
     return diagnostics
 })
 
+// Os
+ipcMain.handle('get-os', (_e) => {
+    return process.platform
+})
+
 /**
  * Define deep link state
  */

packages/desktop/electron/preload.js

@@ -46,13 +46,21 @@ const Electron = {
      * @returns {Promise}
      */
     getDiagnostics: () => ipcRenderer.invoke('diagnostics'),
-     /**
-     * Starts an update of the application
+    /**
+     * Gets os information for the system
      *
-     * @method updateDownload
+     * @method getOS
      *
-     * @returns void
+     * @returns {Promise}
      */
+    getOS: () => ipcRenderer.invoke('get-os'),
+    /**
+    * Starts an update of the application
+    *
+    * @method updateDownload
+    *
+    * @returns void
+    */
     updateDownload: () => ipcRenderer.invoke('update-download'),
     /**
      * Cancels an update of the application
@@ -92,6 +100,34 @@ const Electron = {
         }
     },
     /**
+     * Show the popup menu
+     * @returns {undefined}
+     */
+    popupMenu: () => {
+        ipcRenderer.invoke('menu-popup')
+    },
+    /**
+     * Minimize the app
+     * @returns {undefined}
+     */
+    minimize: () => {
+        ipcRenderer.invoke('minimize')
+    },
+    /**
+     * Maximize the app
+     * @returns {undefined}
+     */
+    maximize: () => {
+        ipcRenderer.invoke('maximize')
+    },
+    /**
+     * Close the app
+     * @returns {undefined}
+     */
+    close: () => {
+        ipcRenderer.invoke('close')
+    },
+    /*
      * Opens url and checks against acceptlist
      * @param {string} url - Target url
      * @returns {undefined}
@@ -122,7 +158,7 @@ const Electron = {
      * @returns 
      */
     saveRecoveryKit: (recoverKitData) => {
-        return ipcRenderer.invoke('show-save-dialog', { 
+        return ipcRenderer.invoke('show-save-dialog', {
             properties: ['createDirectory', 'showOverwriteConfirmation'],
             defaultPath: "firefly-recovery-kit.pdf",
             filters: [

packages/desktop/public/about.html

@@ -13,8 +13,8 @@
           font-style: normal;
           font-weight: 500;
           src: local('DM Sans Medium'), local('DMSans-Medium'),
-              url('./assets/fonts/dm-sans/dm-sans-v4-latin-500.woff2') format('woff2'),
-              /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./assets/fonts/dm-sans/dm-sans-v4-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+              url('./assets/fonts/dm-sans/dm-sans-latin-500.woff2') format('woff2'),
+              /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./assets/fonts/dm-sans/dm-sans-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       }
       body,
 

packages/shared/components/TitleBar.svelte

@@ -0,0 +1,47 @@
+<script lang="typescript">
+    import { Electron } from 'shared/lib/electron'
+    import { onMount } from 'svelte'
+
+    let os = ''
+
+    onMount(async () => {
+        os = await Electron.getOS()
+    })
+</script>
+
+<div class="h-full w-full">
+    {#if os === 'win32'}
+        <nav class="fixed z-50 left-0 right-0 flex flex-row h-10 justify-between" style="-webkit-app-region: drag">
+            <button on:click={() => Electron.popupMenu()} class="ml-5 p-2 stroke-current text-gray-900 dark:text-gray-100" style="-webkit-app-region: none">
+                <svg width="15" height="15" viewBox="0 0 15 15">
+                    <path d="M0 1h15v1h-15z" fill="currentColor" />
+                    <path d="M0 7h15v1h-15z" fill="currentColor" />
+                    <path d="M0 13h15v1h-15z" fill="currentColor" />
+                </svg>
+            </button>
+            <div class="flex flex-row">
+                <button on:click={() => Electron.minimize()} class="p-2 stroke-current text-gray-900 dark:text-gray-100" style="-webkit-app-region: none">
+                    <svg width="15" height="15" viewBox="0 0 15 15">
+                        <path d="M0 12h15v1h-15z" fill="currentColor" />
+                    </svg>
+                </button>
+                <button on:click={() => Electron.maximize()} class="p-2 stroke-current text-gray-900 dark:text-gray-100" style="-webkit-app-region: none">
+                    <svg width="15" height="15" viewBox="0 0 15 15">
+                        <path d="M1 1v13h13v-13h-13zm-1-1h15v15h-15v-15z" fill="currentColor" />
+                    </svg>
+                </button>
+                <button on:click={() => Electron.close()} class="p-2 stroke-current text-gray-900 dark:text-gray-100" style="-webkit-app-region: none">
+                    <svg width="15" height="15" viewBox="0 0 15 15">
+                        <path
+                            d="M7.425 6.718l6.718-6.718.707.707-6.718 6.718 6.718 6.718-.707.707-6.718-6.718-6.718 6.718-.707-.707 6.718-6.718-6.718-6.718.707-.707 6.718 6.718z"
+                            fill="currentColor" />
+                    </svg>
+                </button>
+            </div>
+        </nav>
+    {/if}
+    {#if os === 'darwin'}
+        <div style="-webkit-app-region: drag" class="w-full h-8 fixed left-20" />
+    {/if}
+    <slot />
+</div>

packages/shared/components/index.js

@@ -39,6 +39,7 @@ export { default as ToastContainer } from './ToastContainer.svelte'
 export { default as ProgressBar } from './ProgressBar.svelte'
 export { default as Spinner } from './Spinner.svelte'
 export { default as HR } from './HR.svelte'
+export { default as TitleBar } from './TitleBar.svelte'
 export { default as ButtonRadio } from './ButtonRadio.svelte'
 export { default as ButtonCheckbox } from './ButtonCheckbox.svelte'
 

packages/shared/lib/electron.ts

@@ -48,8 +48,13 @@ export interface IElectron {
     getStrongholdBackupDestination(defaultPath: string): Promise<string | null>;
     getUserDataPath(): Promise<string>;
     getDiagnostics(): Promise<{ label: string; value: string; }[]>;
+    getOS(): Promise<string>;
     updateActiveProfile(id: string): void;
     updateMenu(attribute: string, value: unknown): void;
+    popupMenu(): void;
+    maximize(): void;
+    minimize(): void;
+    close(): void;
     saveRecoveryKit(kitData: ArrayBuffer): Promise<void>;
     openUrl(url: string): void;