fix(gui): fix skin installation

package.json

@@ -27,11 +27,11 @@
   },
   "scripts": {
     "prebuild": "rimraf dist_electron",
-    "build": "./node_modules/.bin/electron-rebuild && cross-env NODE_ENV=production npm run transpile && cross-env NODE_ENV=production npm run electron:build",
+    "build": "./node_modules/.bin/electron-rebuild && npm run transpile && npm run electron:build",
     "commit": "standard-commit",
     "commitlint": "standard-commitlint",
-    "electron:build": "vue-cli-service electron:build --mac --win --linux --x64",
-    "electron:serve": "vue-cli-service electron:serve",
+    "electron:build": "cross-env NODE_ENV=production vue-cli-service electron:build --mac --win --linux --x64",
+    "electron:serve": "cross-env NODE_ENV=development vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
     "lint": "vue-cli-service lint",
     "lint:fix": "vue-cli-service lint --fix",
@@ -40,7 +40,7 @@
     "postrelease": "git push --follow-tags && npm publish",
     "release:major": "standard-version --release-as major && npm run postrelease",
     "release:minor": "standard-version --release-as minor && npm run postrelease",
-    "transpile": "npx babel lib --out-dir lib-es5",
+    "transpile": "cross-env NODE_ENV=production npx babel lib --out-dir lib-es5",
     "postuninstall": "electron-builder install-app-deps",
     "update": "npm-check --update",
     "watch": "babel lib --out-dir lib-es5 --watch"

src/background.js

@@ -1,10 +1,13 @@
 'use strict'
 
-import { app, protocol, BrowserWindow } from 'electron'
+import { app, protocol, BrowserWindow, ipcMain } from 'electron'
 import {
   createProtocol,
   installVueDevtools,
 } from 'vue-cli-plugin-electron-builder/lib'
+import initState from '../lib/utils/state'
+import config from '../lib/utils/config'
+import installSkin from '../lib/actions/reinstall-skin'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Keep a global reference of the window object, if you don't, the window will
@@ -64,6 +67,19 @@ app.on('ready', async () => {
   createWindow()
 })
 
+ipcMain.on('install-skin', (event, options) => {
+  const cliState = initState({})
+  config.init(cliState)
+  Object.keys(options).forEach((key) => {
+    cliState.set(key, options[key])
+  })
+  installSkin(cliState).then(() => {
+    event.sender.send('skin-installed', 'yay')
+  }).catch((err) => {
+    event.sender.send('skin-install-failed', err.message)
+  })
+})
+
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
   if (process.platform === 'win32') {

src/components/TheHome.vue

@@ -9,8 +9,6 @@
   >
     <v-flex
       xs12
-      sm8
-      md4
     >
       <v-card class="elevation-12">
         <v-toolbar
@@ -48,11 +46,14 @@
               @click:append-outer="selectSteamSkinFolder"
             />
           </v-form>
-          {{ steamSkinFolder }}
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn color="primary" @click="install">
+          <v-btn
+            color="primary"
+            :loading="installing"
+            @click="install"
+          >
             {{ cliState.firstRun ? 'Install' : 'Update' }}
           </v-btn>
         </v-card-actions>
@@ -69,7 +70,6 @@ import os from 'os'
 import path from 'path'
 import fs from 'fs'
 import { getConfigHome } from 'platform-folders'
-import execa from 'execa'
 
 export default {
   data: () => ({
@@ -79,6 +79,7 @@ export default {
       squareAvatars: [],
       steamSkinFolder: [],
     },
+    installing: false,
   }),
   computed: {
     ...mapState(['cliState']),
@@ -136,7 +137,7 @@ export default {
   },
   methods: {
     ...mapMutations(['updateTheme', 'updateColor', 'updateSquareAvatars', 'updateSteamSkinFolder']),
-    ...mapActions(['saveCliConfig']),
+    ...mapActions(['installSkin']),
     selectSteamSkinFolder () {
       let defaultPath = JSON.parse(JSON.stringify(this.steamSkinFolder))
       if (defaultPath === '') {
@@ -183,14 +184,18 @@ export default {
       if (hasError) {
         return false
       }
-      await this.saveCliConfig()
-      execa.shellSync(`node ./bin/airforsteam.js -r`)
+      this.installing = true
+      await this.installSkin()
+
       let response = 'Please restart Steam!'
 
       if (this.cliState.firstRun) {
         response = 'Don\'t forget to enable the Air-for-Steam skin in Steam > Settings > Interface > Skin'
       }
-      alert(response)
+      this.installing = false
+      this.$nextTick(() => {
+        alert(response)
+      })
     },
   },
 }

src/store.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import initState from '../lib/utils/state'
 import config from '../lib/utils/config'
+import { ipcRenderer } from 'electron'
 
 const cliState = initState({})
 config.init(cliState)
@@ -41,8 +42,16 @@ export default new Vuex.Store({
     },
   },
   actions: {
-    async saveCliConfig ({ state }) {
-      await config.persist(cliState)
+    installSkin ({ state }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.on('skin-installed', (event, arg) => {
+          resolve()
+        })
+        ipcRenderer.on('skin-install-failed', (event, arg) => {
+          reject(arg)
+        })
+        ipcRenderer.send('install-skin', JSON.parse(JSON.stringify(state.cliState)))
+      })
     },
   },
 })

vue.config.js

@@ -15,6 +15,9 @@ module.exports = {
   pluginOptions: {
     electronBuilder: {
       builderOptions: {
+        mac: {
+          category: 'public.app-category.utilities',
+        },
         linux: {
           category: 'Utility',
         },