New thunderstore UI

Author: mindstormjak

.node-version

@@ -0,0 +1 @@
+14.20.1

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",
@@ -72,6 +72,7 @@
         "@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/node": "^12.12.12",
@@ -88,7 +89,7 @@
         "babel-jest": "^27.0.2",
         "chai": "^4.2.0",
         "devtron": "^1.4.0",
-        "electron": "^11.1.1",
+        "electron": "11.5.0",
         "electron-builder": "22.10.5",
         "electron-debug": "^3.0.1",
         "electron-devtools-installer": "^3.0.0",
@@ -126,5 +127,6 @@
         "node": ">= 10.18.1",
         "npm": ">= 6.13.4",
         "yarn": ">= 1.21.1"
-    }
+    },
+    "packageManager": "[email protected]"
 }

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

@@ -39,6 +39,8 @@ function createWindow() {
     mainWindow = new BrowserWindow({
         width: windowSize.width,
         height: windowSize.height,
+        minWidth: 1200,
+        minHeight: 700,
         useContentSize: true,
         webPreferences: {
             nodeIntegration: true,
@@ -47,7 +49,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">r2modman</p>
+                <p class="titlebar_version"></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.
@@ -62,6 +88,9 @@ export default class App extends mixins(UtilityMixin) {
         this.hookThunderstoreModListRefresh();
         await this.checkCdnConnection();
 
+        const version_text = document.querySelector(".titlebar_version")
+        if(version_text !== null) version_text.textContent = ManagerInformation.VERSION.toString()
+
         InstallationRuleApplicator.apply();
         InstallationRules.validate();
 

src/components/config-components/ConfigSelectionLayout.vue

@@ -12,10 +12,10 @@
                 </p>
             </div>
         </div>
-        <div class='is-shadowless'>
+        <div class='is-shadowless page-padding'>
             <div class='no-padding-left card-header-title'>
 
-                <div class="input-group input-group--flex margin-right">
+                <div class="input-group input-group--flex">
                     <label for="local-search" class="non-selectable">Search</label>
                     <input id="local-search" v-model='filterText' class="input margin-right" type="text" placeholder="Search for config files"/>
                 </div>

src/components/navigation/NavigationLayout.vue

@@ -1,25 +1,102 @@
 <template>
-    <div id="content" class="columns">
-        <div class="column non-selectable is-one-quarter">
-            <NavigationMenu />
-        </div>
-        <div class="column">
-            <router-view />
+    <div id="content" class="dashboard">
+        <NavigationMenu />
+        <div class="">
+            <div class="top-bar">
+                <div
+                    class="profile"
+                    @click="$router.push({ name: 'profiles' })"
+                >
+                    {{ activeProfile.profileName }}
+                    <p>Change profile</p>
+                </div>
+                <div class="play-buttons">
+                    <button class="vanilla" @click="launch(LaunchMode.VANILLA)">
+                        <i class="far fa-play-circle icon--margin-right"/>Vanilla
+                    </button>
+                    <button class="modded" @click="launch(LaunchMode.MODDED)">
+                        <i class="fas fa-play-circle icon--margin-right"/>Modded
+                    </button>
+                </div>
+            </div>
+            <div class="router-page">
+                <router-view />
+            </div>
         </div>
         <GameRunningModal :activeGame="$store.state.activeGame" />
     </div>
 </template>
 
 <script lang="ts">
-
 import { Component, Vue } from 'vue-property-decorator';
 
 import NavigationMenu from './NavigationMenu.vue';
 import GameRunningModal from '../modals/GameRunningModal.vue';
+import {
+    LaunchMode,
+    launch,
+    linkProfileFiles,
+    setGameDirIfUnset,
+    throwIfNoGameDir
+ } from '../../utils/LaunchUtils';
+
+import R2Error from '../../model/errors/R2Error';
+import Game from '../../model/game/Game';
+import Profile from '../../model/Profile';
+import ManagerSettings from '../../r2mm/manager/ManagerSettings';
 
 @Component({
-    components: {GameRunningModal, NavigationMenu}
+    components: { GameRunningModal, NavigationMenu },
 })
-export default class NavigationLayout extends Vue {}
+export default class NavigationLayout extends Vue {
+    readonly LaunchMode = LaunchMode;
+
+    get activeProfile() {
+        return this.$store.state.profile.activeProfile;
+    }
+    get activeGame(): Game {
+      return this.$store.state.activeGame;
+    }
+
+    async changeGame() {
+        await ManagerSettings.resetDefaults();
+        await this.$router.push({name: 'index'});
+    }
+
+    get profile(): Profile {
+        return this.$store.getters['profile/activeProfile'];
+    };
+
+    get thunderstoreModCount() {
+        return this.$store.state.modFilters.showDeprecatedPackages
+          ? this.$store.state.tsMods.mods.length
+          : this.$store.getters['tsMods/undeprecatedModCount'];
+    }
+
+    get localModCount(): number {
+        return this.$store.state.profile.modList.length;
+    }
+
+    getTagLinkClasses(routeNames: string[]) {
+        const base = ["tag", "tagged-link__tag"];
+        return routeNames.includes(this.$route.name || "") ? base : [...base, "is-link"];
+    }
+
+    async launch(mode: LaunchMode) {
+        try {
+            await setGameDirIfUnset(this.activeGame);
+            await throwIfNoGameDir(this.activeGame);
+
+            if (mode === LaunchMode.MODDED) {
+                await linkProfileFiles(this.activeGame, this.profile);
+            }
 
+            this.$store.commit("openGameRunningModal");
+            await launch(this.activeGame, this.profile, mode);
+        } catch (error) {
+            this.$store.commit("closeGameRunningModal");
+            this.$store.commit("error/handleError", R2Error.fromThrownValue(error));
+        }
+    }
+}
 </script>