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@v1
+        with:
+          name: r2modman-${{ matrix.platform }}
+          path: dist
 
       - 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

@@ -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]"
 }

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>
@@ -53,7 +78,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.
@@ -123,5 +149,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}">

src/components/config-components/ConfigEditLayout.vue

@@ -6,13 +6,13 @@
             hero-type="is-info"
         />
         <br/>
-        <div class="sticky-top sticky-top--buttons margin-right">
-            <button class="button is-info margin-right margin-right--half-width" @click="save">Save</button>
+        <div class="sticky-top sticky-top--buttons page-padding">
+            <button class="button is-info margin-right--half-width" @click="save">Save</button>
             <button class="button is-danger" @click="cancel">Cancel</button>
         </div>
-        <div v-if="configFile.getPath().toLowerCase().endsWith('.cfg')" class="margin-right non-selectable">
-            <h3 class='subtitle is-3'>Sections</h3>
-            <ul>
+        <div v-if="configFile.getPath().toLowerCase().endsWith('.cfg')" class="non-selectable">
+            <h3 class='subtitle is-3 page-padding'>Sections</h3>
+            <ul class="page-padding">
                 <li v-for="(value, key) in dumpedConfigVariables" :key="`${key}-${value.toString()}-tab`">
                     <a :href="`#${key}`">{{ key }}</a>
                 </li>
@@ -42,7 +42,7 @@
                                 <input
                                     type="range"
                                     class="slider is-fullwidth is-circle is-small"
-                                    v-on:input="e => setConfigLineValue(line, e.target.value)"
+                                    @input="setConfigLineValue(line, $event.target.value)"
                                     :value="parseFloat(line.value)"
                                     :min="line.getMinRange()"
                                     :max="line.getMaxRange()" />
@@ -83,11 +83,11 @@ import BepInExConfigUtils from '../../utils/BepInExConfigUtils';
     export default class ConfigEditLayout extends Vue {
 
         @Prop({required: true})
-        private configFile!: ConfigFile;
+        readonly configFile!: ConfigFile;
 
-        private fileText: string = "";
+        fileText: string = "";
 
-        private dumpedConfigVariables: { [section: string]: { [variable: string]: ConfigLine } } = {};
+        dumpedConfigVariables: { [section: string]: { [variable: string]: ConfigLine } } = {};
 
         async created() {
             const fs = FsProvider.instance;
@@ -150,15 +150,15 @@ import BepInExConfigUtils from '../../utils/BepInExConfigUtils';
                 .trim();
         }
 
-        toggleEntryExpansion(key: string, variable: string) {
+        toggleEntryExpansion(key: string | number, variable: string | number) {
             const oldLine = this.dumpedConfigVariables[key][variable];
             const newLine = new ConfigLine(oldLine.value, oldLine.comments, oldLine.allowedValues);
             newLine.commentsExpanded = !oldLine.commentsExpanded;
             this.dumpedConfigVariables[key][variable] = newLine;
             this.dumpedConfigVariables = JSON.parse(JSON.stringify(this.dumpedConfigVariables));
         }
 
-        setConfigLineValue(line: ConfigLine, value: number) {
+        setConfigLineValue(line: ConfigLine, value: number | string) {
             line.value = value.toString();
         }