New Thunderstore UI

- Update Electron to v31

Author: mindstormjak

.github/workflows/build.yml

@@ -17,16 +17,16 @@ jobs:
             os: windows-latest
             platform: win
           - kind: mac
-            os: macos-11
+            os: macos-14
             platform: osx
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           # The talk on the street says this might be a good version for building.
-          node-version: 14.20.1
+          node-version: 20.16.0
           cache: yarn
 
       - name: Install Yarn dependencies
@@ -46,6 +46,11 @@ jobs:
         #   DEBUG: electron-builder
         with:
           run: yarn build-${{ matrix.platform }} --publish=never
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: r2modman-${{ matrix.platform }}
+          path: dist/electron/Packaged
 
       - if: steps.build.outputs.stderr != ''
         name: Log stderr

.github/workflows/release.yml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           # The talk on the street says this might be a good version for building.
-          node-version: 14.20.1
+          node-version: 20.16.0
           cache: yarn
 
       - name: Install Yarn dependencies

.github/workflows/test.yml

@@ -1,9 +1,9 @@
-name: Build
+name: Test
 
 on: [push]
 
 jobs:
-    build:
+    test:
         name: Test on ${{ matrix.platform }}
         runs-on: ${{ matrix.os }}
         strategy:
@@ -17,16 +17,16 @@ jobs:
                       os: windows-latest
                       platform: win
                     - kind: mac
-                      os: macos-11
+                      os: macos-14
                       platform: osx
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
 
             - name: Set up Node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   # The talk on the street says this might be a good version for building.
-                  node-version: 14.20.1
+                  node-version: 20.16.0
                   cache: yarn
 
             - name: Install Yarn dependencies

package.json

@@ -15,7 +15,7 @@
         "build-osx": "quasar build --mode electron -T mac",
         "publish": "quasar build --mode electron --publish always",
         "publish-win": "quasar build --mode electron -T win32 --publish always",
-        "publish-linux":  "quasar build --mode electron -T linux --publish always",
+        "publish-linux": "quasar build --mode electron -T linux --publish always",
         "test:unit": "jest --updateSnapshot",
         "test:unit:ci": "jest --ci",
         "test:unit:coverage": "jest --coverage",
@@ -48,8 +48,9 @@
         "highlight.js": "^10.4.1",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.29.1",
+        "node-gyp": "^10.2.0",
         "node-ipc": "^9.1.1",
-        "quasar": "^1.14.7",
+        "quasar": "^1.22.10",
         "quill": "^1.3.7",
         "sanitize-filename": "^1.6.3",
         "serialize-javascript": "^3.1.0",
@@ -65,15 +66,17 @@
     "devDependencies": {
         "@babel/core": "^7.4.0",
         "@babel/preset-typescript": "^7.14.5",
-        "@quasar/app": "^2.0.9",
+        "@quasar/app": "^2.4.4",
         "@quasar/quasar-app-extension-testing": "^1.0.3",
         "@quasar/quasar-app-extension-testing-unit-jest": "^2.2.2",
         "@quasar/quasar-app-extension-typescript": "^1.0.2",
         "@types/adm-zip": "^0.4.34",
         "@types/async-lock": "^1.1.2",
         "@types/chai": "^4.2.11",
+        "@types/electron": "^1.6.10",
         "@types/fs-extra": "^8.0.1",
         "@types/lodash.debounce": "^4.0.7",
+        "@types/mocha": "^10.0.7",
         "@types/node": "^12.12.12",
         "@types/quill": "^2.0.3",
         "@types/sinon": "^10.0.2",
@@ -83,32 +86,29 @@
         "@typescript-eslint/parser": "^1.12.0",
         "@vue/eslint-config-airbnb": "^4.0.0",
         "@vue/test-utils": "^1.2.1",
-        "babel-core": "^7.0.0-beta.3",
         "babel-eslint": "^10.0.1",
         "babel-jest": "^27.0.2",
         "chai": "^4.2.0",
         "devtron": "^1.4.0",
-        "electron": "^11.1.1",
-        "electron-builder": "22.10.5",
+        "electron": "31.3.1",
+        "electron-builder": "24.13.3",
         "electron-debug": "^3.0.1",
-        "electron-devtools-installer": "^3.0.0",
-        "electron-packager": "14.1.1",
+        "electron-devtools-installer": "^3.2.0",
+        "electron-packager": "17.1.2",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.0.0",
         "eslint-loader": "^2.1.1",
         "eslint-plugin-jest": "^24.1.0",
         "eslint-plugin-vue": "^5.0.0",
-        "identity-obj-proxy": "^3.0.0",
         "majestic": "^1.2.24",
-        "minimist": "^1.2.2",
+        "minimist": "^1.2.8",
         "mocha": "^8.0.1",
-        "mock-require": "^3.0.3",
-        "node-sass": "^4.13.1",
+        "sass": "^1.77.8",
         "sass-loader": "^10.2.1",
         "sinon": "^11.1.1",
         "ts-node": "^8.10.2",
-        "typescript": "^4.5.5",
-        "vue-jest": "^3.0.0",
+        "typescript": "^5.5.4",
+        "vue-jest": "^3.0.7",
         "wallaby-vue-compiler": "^1.0.3"
     },
     "browserslist": [
@@ -122,9 +122,13 @@
         "last 10 iOS versions",
         "last 5 Opera versions"
     ],
+    "resolutions": {
+        "deasync": "0.1.30"
+    },
     "engines": {
         "node": ">= 10.18.1",
         "npm": ">= 6.13.4",
         "yarn": ">= 1.21.1"
-    }
+    },
+    "packageManager": "[email protected]"
 }

quasar.conf.js

@@ -118,63 +118,6 @@ module.exports = configure(function(/* ctx */) {
         // https://quasar.dev/options/animations
         animations: [],
 
-        // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
-        ssr: {
-            pwa: false
-        },
-
-        // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
-        pwa: {
-            workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
-            workboxOptions: {}, // only for GenerateSW
-            manifest: {
-                name: `r2modmanPlus`,
-                short_name: `r2modmanPlus`,
-                description: `A simple and easy to use Risk of Rain 2 mod manager`,
-                display: 'standalone',
-                orientation: 'portrait',
-                background_color: '#ffffff',
-                theme_color: '#027be3',
-                icons: [
-                    {
-                        src: 'icons/icon-128x128.png',
-                        sizes: '128x128',
-                        type: 'image/png'
-                    },
-                    {
-                        src: 'icons/icon-192x192.png',
-                        sizes: '192x192',
-                        type: 'image/png'
-                    },
-                    {
-                        src: 'icons/icon-256x256.png',
-                        sizes: '256x256',
-                        type: 'image/png'
-                    },
-                    {
-                        src: 'icons/icon-384x384.png',
-                        sizes: '384x384',
-                        type: 'image/png'
-                    },
-                    {
-                        src: 'icons/icon-512x512.png',
-                        sizes: '512x512',
-                        type: 'image/png'
-                    }
-                ]
-            }
-        },
-
-        // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
-        cordova: {
-            // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
-        },
-
-        // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
-        capacitor: {
-            hideSplashscreen: true
-        },
-
         // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
         electron: {
             bundler: 'builder', // 'packager' or 'builder'

src-electron/main-process/electron-main.dev.js

@@ -17,24 +17,6 @@ app.whenReady().then(() => {
 
     // Install vuejs devtools
     installExtension(VUEJS_DEVTOOLS)
-      .then(name => {
-        console.log(`Added Extension: ${name}`)
-        // get main window
-        const win = BrowserWindow.getFocusedWindow()
-        if (win) {
-          win.webContents.on('did-frame-finish-load', () => {
-            win.webContents.once('devtools-opened', () => {
-              win.webContents.focus()
-            })
-            // open electron debug
-            console.log('Opening dev tools')
-            win.webContents.openDevTools()
-          })
-        }
-      })
-      .catch(err => {
-        console.log('An error occurred: ', err)
-      })
   }, 250)
 })
 

src-electron/main-process/electron-main.js

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, nativeTheme, protocol } from 'electron';
+import { app, BrowserWindow, ipcMain, protocol } from 'electron';
 import Listeners from './ipcListeners';
 import Persist from './window-state-persist';
 import path from 'path';
@@ -7,13 +7,6 @@ import * as fs from 'fs';
 
 app.allowRendererProcessReuse = true;
 
-try {
-    if (process.platform === 'win32' && nativeTheme.shouldUseDarkColors === true) {
-        require('fs').unlinkSync(path.join(app.getPath('userData'), 'DevTools Extensions'));
-    }
-} catch (_) {
-}
-
 /**
  * Set `__statics` path to static files in production;
  * The reason we are setting it here is that the path needs to be evaluated at runtime
@@ -30,7 +23,6 @@ function createWindow() {
     /**
      * Initial window options
      */
-
     const windowSize = Persist.getSize(app, {
         defaultWidth: 1200,
         defaultHeight: 700
@@ -39,6 +31,8 @@ function createWindow() {
     mainWindow = new BrowserWindow({
         width: windowSize.width,
         height: windowSize.height,
+        minWidth: 1200,
+        minHeight: 700,
         useContentSize: true,
         webPreferences: {
             nodeIntegration: true,
@@ -47,7 +41,8 @@ function createWindow() {
             contextIsolation: false,
         },
         icon: path.join(__dirname, 'icon.png'),
-        autoHideMenuBar: process.env.PROD
+        autoHideMenuBar: process.env.PROD,
+        frame: false
     });
 
     if (windowSize.maximized) {

src-electron/main-process/ipcListeners.js

@@ -34,6 +34,19 @@ ipcMain.on('get-appData-directory', ()=>{
     browserWindow.webContents.send('receive-appData-directory', app.getPath('appData'));
 });
 
+ipcMain.on('window-minimize', () => {
+    browserWindow.minimize();
+})
+ipcMain.on('window-maximize', () => {
+    if(browserWindow.isMaximized())
+        browserWindow.unmaximize();
+    else
+        browserWindow.maximize();
+})
+ipcMain.on('window-close', () => {
+    browserWindow.close();
+})
+
 ipcMain.on('get-is-portable', ()=>{
     let isPortable = false;
     switch(process.platform){
@@ -68,4 +81,3 @@ ipcMain.on('show-open-dialog', (arg, fileOpts) => {
     browserWindow.webContents.send('receive-open-dialog', r);
   });
 });
-

src/App.vue

@@ -1,5 +1,30 @@
 <template>
     <div>
+        <div class="titlebar">
+            <div class="titlebar_start">
+                <p class="titlebar_title">{{ appName }}</p>
+                <p class="titlebar_version">{{ appVersion }}</p>
+            </div>
+            <div class="titlebar_buttons">
+                <div class="btn" @click="() => ipcRenderer.send('window-minimize')">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                        <path
+                            d="M 0.71464503,4.235 H 7.7550979" stroke="currentColor" fill="currentColor"  stroke-linecap="round" stroke-width="1.59"/>
+                    </svg>
+                </div>
+                <div class="btn" @click="() => ipcRenderer.send('window-maximize')">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                        <path
+                            d="M 0.70215499,0.70215499 H 7.767847 V 7.7678511 H 0.70215499 Z" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.59" />
+                    </svg>
+                </div>
+                <div class="closebutton btn" @click="() => ipcRenderer.send('window-close')">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                        <path d="m7.67.794-6.88 6.88m0-6.88 6.88 6.88" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-width="1.59" />
+                    </svg>
+                </div>
+            </div>
+        </div>
         <router-view v-if="visible"/>
         <ErrorModal />
     </div>
@@ -55,7 +80,8 @@ import ErrorModal from './components/modals/ErrorModal.vue';
     }
 })
 export default class App extends mixins(UtilityMixin) {
-    private visible: boolean = false;
+    public visible: boolean = false;
+    readonly ipcRenderer = ipcRenderer;
 
     async created() {
         // Load settings using the default game before the actual game is selected.
@@ -126,5 +152,13 @@ export default class App extends mixins(UtilityMixin) {
         BindLoaderImpl.bind();
     }
 
+    get appName(): string {
+        return ManagerInformation.APP_NAME;
+    }
+
+    get appVersion(): string {
+        return ManagerInformation.VERSION.toString();
+    }
+
 }
 </script>

src/components/buttons/DonateButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <Link :url="mod.getDonationLink()"
+    <Link :url="mod?.getDonationLink()"
           :target="'external'"
           class="card-footer-item"
           v-tooltip.left="{content: 'Donate to the mod author', distance: 0}">