4 files changed, 55 insertions, 22 deletions

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index c8069bca..b97e9ef4 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -25,18 +25,18 @@ export default {
 </script>
 
 <template>
-  <div id="fc_bg__container" data-tauri-drag-region />
-  <el-tabs class="fc_menu__tabs" type="card">
-    <el-tab-pane label="Play"><PlayView /></el-tab-pane>
-    <el-tab-pane label="Changelog">Changelog</el-tab-pane>
-    <!-- <el-tab-pane label="Mods">Mods</el-tab-pane> -->
-    <el-tab-pane label="Settings">Settings</el-tab-pane>
-    <el-tab-pane v-if="$store.state.developer_mode" label="Dev">Developer tools</el-tab-pane>
-  </el-tabs>
-  <div id="fc_window__controls">
-    <el-button color="white" icon="SemiSelect" @click="minimize" circle />
-    <el-button color="white" icon="CloseBold" @click="close" circle />
-  </div>
+    <div id="fc_bg__container" data-tauri-drag-region />
+    <el-tabs v-model="$store.state.current_tab" class="fc_menu__tabs" type="card">
+        <el-tab-pane name="Play" label="Play"><PlayView /></el-tab-pane>
+        <el-tab-pane name="Changelog" label="Changelog">Changelog</el-tab-pane>
+        <!-- <el-tab-pane label="Mods">Mods</el-tab-pane> -->
+        <el-tab-pane name="Settings" label="Settings">Settings</el-tab-pane>
+        <el-tab-pane v-if="$store.state.developer_mode" name="Dev" label="Dev">Developer tools</el-tab-pane>
+    </el-tabs>
+    <div id="fc_window__controls">
+        <el-button color="white" icon="SemiSelect" @click="minimize" circle />
+        <el-button color="white" icon="CloseBold" @click="close" circle />
+    </div>
 </template>
 
 <style>
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index 5bc12c1b..f2d42e13 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -1,16 +1,18 @@
 import { createStore } from 'vuex';
 import { listen, Event as TauriEvent } from "@tauri-apps/api/event";
+import {Tabs} from "../utils/Tabs";
 
 export const store = createStore({
     state () {
-      return {
-        developer_mode: false,
+        return {
+            current_tab: Tabs.PLAY,
+            developer_mode: false,
 
-        installed_northstar_version: "1.9.7",
+            installed_northstar_version: "1.9.7",
 
-        northstar_is_running: false,
-        origin_is_running: false
-      }
+            northstar_is_running: false,
+            origin_is_running: false
+        }
     },
     mutations: {
         toggleDeveloperMode(state) {
@@ -18,6 +20,9 @@ export const store = createStore({
         },
         initializeListeners(state) {
             _initializeListeners(state);
+        },
+        updateCurrentTab(state: any, newTab: Tabs) {
+            state.current_tab = newTab;
         }
     }
 });
diff --git a/src-vue/src/utils/Tabs.ts b/src-vue/src/utils/Tabs.ts
new file mode 100644
index 00000000..5266da81
--- /dev/null
+++ b/src-vue/src/utils/Tabs.ts
@@ -0,0 +1,6 @@
+export enum Tabs {
+    PLAY = 'Play',
+    CHANGELOG = 'Changelog',
+    SETTINGS = 'Settings',
+    DEV = 'Dev'
+}
diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index cff872a2..28458b4f 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { ElNotification } from 'element-plus';
+import {Tabs} from "../utils/Tabs";
 
 export default {
     data() {
@@ -19,6 +20,10 @@ export default {
                     position: 'bottom-right'
                 });
             }
+        },
+
+        showChangelogPage() {
+            this.$store.commit('updateCurrentTab', Tabs.CHANGELOG);
         }
     }
 };
@@ -27,8 +32,13 @@ export default {
 <template>
     <div class="fc_launch__container">
         <div class="fc_title">Northstar</div>
-        <div class="fc_northstar__version" @click="activateDeveloperMode">
-            v{{ $store.state.installed_northstar_version }}
+        <div class="fc_northstar__version__container">
+            <div class="fc_northstar__version" @click="activateDeveloperMode">
+                v{{ $store.state.installed_northstar_version }}
+            </div>
+            <div class="fc_changelog__link" @click="showChangelogPage">
+                (see patch notes)
+            </div>
         </div>
         <div>
             <el-button type="primary" size="large">Launch game</el-button>
@@ -68,11 +78,23 @@ button {
     font-weight: bold;
 }
 
-.fc_northstar__version {
-    color: rgb(168, 168, 168);
+/* Northstar version + changelog link */
+.fc_northstar__version__container {
     margin-bottom: 20px;
+    color: rgb(168, 168, 168);
 }
 
+.fc_northstar__version, .fc_changelog__link {
+    display: inline-block;
+}
+
+.fc_changelog__link {
+    margin-left: 3px;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+
 #fc_services__status {
     display: inline-block;
     position: fixed;