feat: add Windows support

Author: Toinane

package.json

@@ -5,6 +5,7 @@
   "main": "build/src/main/index.js",
   "scripts": {
     "dev": "tsc-watch -p tsconfig.electron.json --onSuccess 'npm run dev:server'",
+    "dev:win": "tsc-watch -p tsconfig.electron.json",
     "dev:server": "node build/src/scripts/dev-server.js",
     "build:ts": "tsc -p tsconfig.electron.json",
     "build": "npm run build:ts && node build/src/scripts/build.js ",

src/main/index.ts

@@ -1,5 +1,7 @@
 import { app, BrowserWindow, ipcMain, Menu, shell } from 'electron'
+import type { Rectangle } from 'electron'
 import path from 'path'
+import { platform } from 'process'
 import { store } from './store'
 import { checkForUpdate } from './update-check'
 import { ImageOptimizer } from './image-compressor'
@@ -8,12 +10,21 @@ import { createMenu } from './menu'
 const isDev = process.env.NODE_ENV === 'development'
 let mainWindow: BrowserWindow
 
+function getPlatform () {
+  switch (platform) {
+    case 'darwin': return 'macos'
+    case 'win32': return 'windows'
+    default: return 'linux'
+  }
+}
+
 function createWindow () {
-  const bounds = store.app.get('bounds')
+  const { x, y } = store.app.get('bounds') as Rectangle
   mainWindow = new BrowserWindow({
     width: 550,
     height: 370,
-    ...bounds,
+    x,
+    y,
     titleBarStyle: 'hidden',
     resizable: false,
     backgroundColor: '#212123',
@@ -40,6 +51,7 @@ function createWindow () {
 }
 
 function init () {
+  store.app.set('os', getPlatform())
   createWindow()
   checkForUpdate(mainWindow)
   Menu.setApplicationMenu(Menu.buildFromTemplate(createMenu(mainWindow)))
@@ -72,6 +84,14 @@ ipcMain.on('drop', (_, files = []) => {
   optimizer.start()
 })
 
+ipcMain.on('toolbar', (_, type) => {
+  switch (type) {
+    case 'reduce': return mainWindow.minimize()
+    case 'maximize': return mainWindow.maximize()
+    case 'close': return mainWindow.close()
+  }
+})
+
 ipcMain.on('open-url', (event, url) => {
   shell.openExternal(url)
 })

src/main/store/module/app.ts

@@ -6,6 +6,10 @@ export default new Store<StoreSchema>({
   watch: true,
 
   schema: {
+    os: {
+      type: 'string',
+      default: 'macos'
+    },
     bounds: {
       type: 'object',
       default: {}

src/main/types/index.d.ts

@@ -23,6 +23,7 @@ declare global {
 }
 
 export interface StoreSchema {
+  os: ['macos', 'windows', 'linux']
   bounds: object
   addToSubfolder: boolean
   addMinSuffix: boolean

src/renderer/App.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="app-tool-bar" />
+  <header>
+    <AppTitleBar />
+  </header>
   <main>
     <RouterView />
   </main>
@@ -58,13 +60,17 @@ ipc.on('drop-from-dialog', () => {
   height: 100vh;
   overflow: hidden;
   display: grid;
-  grid-template-rows: auto var(--footer-height);
+  grid-template-rows: var(--toolbar-height) auto var(--footer-height);
   grid-template-areas:
+    'header'
     'main'
     'footer';
+  header {
+    grid-area: header;
+  }
   main {
     grid-area: main;
-    padding: var(--toolbar-height) 12px 0 12px;
+    padding: 0 12px 0 12px;
   }
   footer {
     grid-area: footer;
@@ -79,16 +85,4 @@ ipc.on('drop-from-dialog', () => {
     pointer-events: none;
   }
 }
-
-.app {
-  &-tool-bar {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: var(--toolbar-height);
-    -webkit-app-region: drag;
-    z-index: 1010;
-    transition: all 0.5s;
-  }
-}
 </style>

src/renderer/components/AppTitleBar.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="tool-bar"
+    :class="platform"
+  >
+    <div class="drag-zone" />
+    <div
+      class="reduce"
+      @click="ipc.send('toolbar', 'reduce')"
+    />
+    <div
+      class="close"
+      @click="ipc.send('toolbar', 'close')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { store as electronStore, ipc } from '@/electron'
+
+const platform = electronStore.get('os')
+</script>
+
+<style lang="scss" scoped>
+.tool-bar {
+    height: var(--toolbar-height);
+    display: flex;
+    justify-content: right;
+    align-items: center;
+
+    .drag-zone {
+        width: 100%;
+        height: 100%;
+        -webkit-app-region: drag;
+    }
+}
+
+.windows {
+    div:not(.drag-zone) {
+        position: relative;
+        width: 50px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    div:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    .reduce::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 38%;
+        width: 10px;
+        border-bottom: 1px solid var(--color-gray-700);
+    }
+
+    .maximize::before {
+        content: "";
+        position: absolute;
+        top: 37%;
+        left: 37%;
+        width: 8px;
+        height: 8px;
+        border: 1px solid var(--color-gray-700);
+    }
+
+    .close::before, .close::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 32%;
+        width: 14px;
+        height: 0.5px;
+        transform: rotate(45deg);
+        background: var(--color-gray-700);
+    }
+
+    .close::after {
+        transform: rotate(-45deg);
+    }
+
+    .close:hover {
+        background: rgba(232, 17, 35, 0.8);
+    }
+}
+</style>

src/renderer/components/ui/AppInput.vue

@@ -12,7 +12,8 @@
   </div>
 </template>
 
-<script setup lang="ts">import { computed } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 
 interface Props {
   modelValue: string | number

src/renderer/types/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     AppInput: typeof import('./../components/ui/AppInput.vue')['default']
     AppPreloader: typeof import('./../components/ui/AppPreloader.vue')['default']
     AppSettingRow: typeof import('./../components/AppSettingRow.vue')['default']
+    AppTitleBar: typeof import('./../components/AppTitleBar.vue')['default']
     AppToggle: typeof import('./../components/ui/AppToggle.vue')['default']
     SvgArrowCircleUp: typeof import('~icons/svg/arrow-circle-up')['default']
     SvgCog: typeof import('~icons/svg/cog')['default']
@@ -18,4 +19,4 @@ declare module 'vue' {
   }
 }
 
-export {}
+export { }

src/scripts/dev-server.ts

@@ -1,5 +1,5 @@
 import { spawn } from 'child_process'
-import type { ChildProcess, SpawnOptionsWithoutStdio } from 'child_process'
+import type { ChildProcess } from 'child_process'
 import path from 'path'
 import chalk from 'chalk'
 import chokidar from 'chokidar'
@@ -23,9 +23,7 @@ async function startRenderer () {
 function startElectron () {
   if (electronProcess) return
 
-  const args = ['.', rendererPort] as SpawnOptionsWithoutStdio
-
-  electronProcess = spawn('electron', args)
+  electronProcess = spawn('electron', ['.', (rendererPort || 0).toString()], { shell: true })
 
   electronProcess?.stdout?.on('data', data => {
     console.log(chalk.blueBright('[Electron] ') + chalk.white(data.toString()))
@@ -34,6 +32,10 @@ function startElectron () {
   electronProcess?.stderr?.on('data', data => {
     console.log(chalk.redBright('[Electron] ') + chalk.white(data.toString()))
   })
+
+  electronProcess.on('error', error => {
+    console.log(chalk.redBright('[Electron] ', error))
+  })
 }
 
 function restartElectron () {