From 5bcd8063ee1dbf0df5af6b4e19e7498ba69d3e58 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 00:55:09 +0200
Subject: feat: add router config

---
 src-vue/src/main.ts | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 0ac31a2d..623b175d 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -2,14 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import ElementPlus from "element-plus";
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { store } from './plugins/store';
+import PlayView from "./views/PlayView.vue";
+import ChangelogView from "./views/ChangelogView.vue";
+import SettingsView from "./views/SettingsView.vue";
+import DeveloperView from "./views/DeveloperView.vue";
+import {createRouter, createWebHashHistory} from "vue-router";
+
+
+const app = createApp(App);
 
 
 // styles
 import 'element-plus/theme-chalk/index.css';
 import './style.css'
-import { store } from './plugins/store';
 
-const app = createApp(App);
 app.use(ElementPlus);
 
 // icons
@@ -20,4 +27,19 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 // style
 app.use( store, '$store' );
 
+
+// routes
+const routes = [
+    { path: '/', name: 'Main', component: () => PlayView},
+    { path: '/changelog', name: 'Changelog', component: () => ChangelogView},
+    { path: '/settings', name: 'Settings', component: () => SettingsView},
+    { path: '/dev', name: 'Dev', component: () => DeveloperView}
+];
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes, // short for `routes: routes`
+});
+app.use(router);
+
+
 app.mount('#app')
-- 
cgit v1.2.3


From 8172bbcd9f0cdaf1b1cbb810617740183377b1ea Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:17:14 +0200
Subject: feat: push PlayView as default view on launch

---
 src-vue/src/main.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src-vue/src')

diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 623b175d..bbc99952 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -40,6 +40,7 @@ const router = createRouter({
     routes, // short for `routes: routes`
 });
 app.use(router);
+router.push({path: '/'});
 
 
 app.mount('#app')
-- 
cgit v1.2.3


From 39db7afe31f845e3cc1a8c32a5216e672ba3c955 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:17:41 +0200
Subject: fix: all routes must give a Future

---
 src-vue/src/main.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index bbc99952..758fe747 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -30,10 +30,10 @@ app.use( store, '$store' );
 
 // routes
 const routes = [
-    { path: '/', name: 'Main', component: () => PlayView},
-    { path: '/changelog', name: 'Changelog', component: () => ChangelogView},
-    { path: '/settings', name: 'Settings', component: () => SettingsView},
-    { path: '/dev', name: 'Dev', component: () => DeveloperView}
+    { path: '/', name: 'Main', component: async () => PlayView},
+    { path: '/changelog', name: 'Changelog', component: async () => ChangelogView},
+    { path: '/settings', name: 'Settings', component: async () => SettingsView},
+    { path: '/dev', name: 'Dev', component: async () => DeveloperView}
 ];
 const router = createRouter({
     history: createWebHashHistory(),
-- 
cgit v1.2.3


From 732cf68fe6fd2a9ed043b0795145039943351c1b Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:21:55 +0200
Subject: refactor: replace tabs with app menu + router view

---
 src-vue/src/App.vue | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 2a2a176f..97a11539 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -23,7 +23,7 @@ export default {
     // Enable dragging entire app by dragging menu bar.
     // https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1161495124
     document.querySelector(".el-tabs__nav-scroll")!.addEventListener("mousedown", async e => {
-        if ((e.target as Element).closest(".el-tabs__item")) return; // Disable drag when clicking menu items.
+        if ((e.target as Element).closest(".el-menu-item")) return; // Disable drag when clicking menu items.
         await tauriWindow.appWindow.startDragging();
     });
   },
@@ -33,22 +33,31 @@ export default {
     },
     close() {
       appWindow.close()
-    }
+    },
+      handleSelect(key: string, keyPath: string[]) {
+        this.$router.push({path: key});
+      }
   }
 }
 </script>
 
 <template>
     <div id="fc_bg__container" />
-    <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"><ChangelogView /></el-tab-pane>
-        <!-- <el-tab-pane label="Mods">Mods</el-tab-pane> -->
-        <el-tab-pane name="Settings" label="Settings"><SettingsView/></el-tab-pane>
-        <el-tab-pane v-if="$store.state.developer_mode" name="Dev" label="Dev">
-          <DeveloperView/>
-        </el-tab-pane>
-    </el-tabs>
+
+    <el-menu
+        default-active="/"
+        mode="horizontal"
+        @select="handleSelect"
+        class="el-menu-demo fc_menu__tabs el-tabs__nav-scroll"
+    >
+        <el-menu-item active index="/">Play</el-menu-item>
+        <el-menu-item index="/changelog">Changelog</el-menu-item>
+        <el-menu-item index="/settings">Settings</el-menu-item>
+        <el-menu-item index="/dev">Dev</el-menu-item>
+    </el-menu>
+
+    <router-view></router-view>
+
     <div id="fc_window__controls">
         <el-button color="white" icon="SemiSelect" @click="minimize" circle />
         <el-button color="white" icon="CloseBold" @click="close" circle />
-- 
cgit v1.2.3


From 1aad4ef2346e336af82268ebf6dcddad1a4bde0e Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:42:13 +0200
Subject: refactor: apply style to new app menu

---
 src-vue/src/App.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 97a11539..45329fc1 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -22,7 +22,7 @@ export default {
 
     // Enable dragging entire app by dragging menu bar.
     // https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1161495124
-    document.querySelector(".el-tabs__nav-scroll")!.addEventListener("mousedown", async e => {
+    document.querySelector("#fc__menu_bar")!.addEventListener("mousedown", async e => {
         if ((e.target as Element).closest(".el-menu-item")) return; // Disable drag when clicking menu items.
         await tauriWindow.appWindow.startDragging();
     });
@@ -48,7 +48,8 @@ export default {
         default-active="/"
         mode="horizontal"
         @select="handleSelect"
-        class="el-menu-demo fc_menu__tabs el-tabs__nav-scroll"
+        id="fc__menu_bar"
+        class="el-menu-demo el-tabs__nav-scroll"
     >
         <el-menu-item active index="/">Play</el-menu-item>
         <el-menu-item index="/changelog">Changelog</el-menu-item>
@@ -66,33 +67,35 @@ export default {
 
 <style>
 /* Borders reset */
-.fc_menu__tabs .el-tabs__nav, .fc_menu__tabs .el-tabs__header {
-  border: none !important;
+#fc__menu_bar {
+    border: none !important;
 }
 
 /* Header item */
-.fc_menu__tabs .el-tabs__item {
+#fc__menu_bar .el-menu-item {
   color: #b4b6b9;
   text-transform: uppercase;
   border: none !important;
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   font-weight: bold;
   font-size: large;
-  margin: 10px 0;
 }
 
-.fc_menu__tabs .el-tabs__item:hover {
+#fc__menu_bar .el-menu-item:hover {
   color: #c6c9ce;
+  background-color: transparent;
 }
 
-.fc_menu__tabs .is-active {
+#fc__menu_bar .el-menu-item.is-active {
   color: white !important;
+  background-color: transparent;
 }
 
 /* Header menu */
-.fc_menu__tabs .el-tabs__header {
+#fc__menu_bar {
   background-image: radial-gradient(transparent 1px);
   backdrop-filter: saturate(50%) blur(4px);
+  background-color: transparent;
   height: auto !important;
 }
 
-- 
cgit v1.2.3


From 728a6b7ebc01096fb5c0ec34fc6ada14c622164a Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:52:03 +0200
Subject: fix: adjust containers position

---
 src-vue/src/views/DeveloperView.vue | 1 +
 src-vue/src/views/SettingsView.vue  | 1 +
 2 files changed, 2 insertions(+)

(limited to 'src-vue/src')

diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
index 80390432..71e09e30 100644
--- a/src-vue/src/views/DeveloperView.vue
+++ b/src-vue/src/views/DeveloperView.vue
@@ -119,5 +119,6 @@ export default defineComponent({
 .fc__developer__container {
     padding: 20px 30px;
     color: white;
+    position: relative;
 }
 </style>
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index 5dd4e2b9..ec63bd6e 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -81,6 +81,7 @@ export default defineComponent({
     padding: 20px 30px;
     margin: 0 auto;
     color: white;
+    position: relative;
 }
 
 h3:first-of-type {
-- 
cgit v1.2.3


From b098b5a32298df84ed4763698eeda7a9126ad7c6 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:57:50 +0200
Subject: refactor: use el-menu router configuration directly

---
 src-vue/src/App.vue | 7 ++-----
 src-vue/src/main.ts | 1 -
 2 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 45329fc1..fd716364 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -33,10 +33,7 @@ export default {
     },
     close() {
       appWindow.close()
-    },
-      handleSelect(key: string, keyPath: string[]) {
-        this.$router.push({path: key});
-      }
+    }
   }
 }
 </script>
@@ -46,8 +43,8 @@ export default {
 
     <el-menu
         default-active="/"
+        router
         mode="horizontal"
-        @select="handleSelect"
         id="fc__menu_bar"
         class="el-menu-demo el-tabs__nav-scroll"
     >
diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 758fe747..cd1936b2 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -40,7 +40,6 @@ const router = createRouter({
     routes, // short for `routes: routes`
 });
 app.use(router);
-router.push({path: '/'});
 
 
 app.mount('#app')
-- 
cgit v1.2.3


From 0834704abcdf84d819b9d1273dec72d892e3dc61 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:07:19 +0200
Subject: refactor: remove useless CSS classes

---
 src-vue/src/App.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index fd716364..be76ec1d 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -46,7 +46,6 @@ export default {
         router
         mode="horizontal"
         id="fc__menu_bar"
-        class="el-menu-demo el-tabs__nav-scroll"
     >
         <el-menu-item active index="/">Play</el-menu-item>
         <el-menu-item index="/changelog">Changelog</el-menu-item>
-- 
cgit v1.2.3


From a336c03cc80f2e2848de32aa8fb979abc9538993 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:15:08 +0200
Subject: fix: display dev button only when dev mode is enabled

---
 src-vue/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index be76ec1d..6f9542fa 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -50,7 +50,7 @@ export default {
         <el-menu-item active index="/">Play</el-menu-item>
         <el-menu-item index="/changelog">Changelog</el-menu-item>
         <el-menu-item index="/settings">Settings</el-menu-item>
-        <el-menu-item index="/dev">Dev</el-menu-item>
+        <el-menu-item index="/dev" v-if="$store.state.developer_mode">Dev</el-menu-item>
     </el-menu>
 
     <router-view></router-view>
-- 
cgit v1.2.3


From a0cb231ddbdd7fdced9e7cda771dff7d0833c826 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:19:26 +0200
Subject: fix: restore updateCurrentTab method with router

---
 src-vue/src/main.ts          | 2 +-
 src-vue/src/plugins/store.ts | 2 ++
 src-vue/src/utils/Tabs.ts    | 8 ++++----
 3 files changed, 7 insertions(+), 5 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index cd1936b2..dc18b443 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -35,7 +35,7 @@ const routes = [
     { path: '/settings', name: 'Settings', component: async () => SettingsView},
     { path: '/dev', name: 'Dev', component: async () => DeveloperView}
 ];
-const router = createRouter({
+export const router = createRouter({
     history: createWebHashHistory(),
     routes, // short for `routes: routes`
 });
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index 647ee4e9..a977b38b 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -8,6 +8,7 @@ import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { ElNotification } from 'element-plus';
 import { NorthstarState } from '../utils/NorthstarState';
 import { Store } from 'tauri-plugin-store-api';
+import {router} from "../main";
 
 const persistentStore = new Store('flight-core-settings.json');
 
@@ -65,6 +66,7 @@ export const store = createStore<FlightCoreStore>({
         },
         updateCurrentTab(state: any, newTab: Tabs) {
             state.current_tab = newTab;
+            router.push({path: newTab});
         },
         async launchGame(state: any) {
             // TODO update installation if release track was switched
diff --git a/src-vue/src/utils/Tabs.ts b/src-vue/src/utils/Tabs.ts
index 5266da81..48320950 100644
--- a/src-vue/src/utils/Tabs.ts
+++ b/src-vue/src/utils/Tabs.ts
@@ -1,6 +1,6 @@
 export enum Tabs {
-    PLAY = 'Play',
-    CHANGELOG = 'Changelog',
-    SETTINGS = 'Settings',
-    DEV = 'Dev'
+    PLAY = '/',
+    CHANGELOG = '/changelog',
+    SETTINGS = '/settings',
+    DEV = '/dev'
 }
-- 
cgit v1.2.3


From b2d5e2c7df469b0d198e8dffceb003cfa0c4aabf Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:29:44 +0200
Subject: refactor: remove unused current_tab variable from store

---
 src-vue/src/plugins/store.ts | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index a977b38b..4fa7328b 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -14,7 +14,6 @@ const persistentStore = new Store('flight-core-settings.json');
 
 
 export interface FlightCoreStore {
-    current_tab: Tabs,
     developer_mode: boolean,
     game_path: string,
     install_type: InstallType,
@@ -32,7 +31,6 @@ export interface FlightCoreStore {
 export const store = createStore<FlightCoreStore>({
     state (): FlightCoreStore {
         return {
-            current_tab: Tabs.PLAY,
             developer_mode: false,
             game_path: undefined as unknown as string,
             install_type: undefined as unknown as InstallType,
@@ -65,7 +63,6 @@ export const store = createStore<FlightCoreStore>({
             _initializeListeners(state);
         },
         updateCurrentTab(state: any, newTab: Tabs) {
-            state.current_tab = newTab;
             router.push({path: newTab});
         },
         async launchGame(state: any) {
-- 
cgit v1.2.3


From 12e5223d6f501babc2fedd55198b954417b673e9 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:31:34 +0200
Subject: fix: adjust focus style

---
 src-vue/src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 6f9542fa..7c95cff5 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -47,7 +47,7 @@ export default {
         mode="horizontal"
         id="fc__menu_bar"
     >
-        <el-menu-item active index="/">Play</el-menu-item>
+        <el-menu-item index="/">Play</el-menu-item>
         <el-menu-item index="/changelog">Changelog</el-menu-item>
         <el-menu-item index="/settings">Settings</el-menu-item>
         <el-menu-item index="/dev" v-if="$store.state.developer_mode">Dev</el-menu-item>
@@ -82,7 +82,7 @@ export default {
   background-color: transparent;
 }
 
-#fc__menu_bar .el-menu-item.is-active {
+#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus{
   color: white !important;
   background-color: transparent;
 }
-- 
cgit v1.2.3


From c34db477a4c33882afbb86972c3bf2521b31957c Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:36:50 +0200
Subject: fix: restore native bar drag region

---
 src-vue/src/App.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 7c95cff5..1b96abc3 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -19,13 +19,6 @@ export default {
   },
   mounted: () => {
     store.commit('initialize');
-
-    // Enable dragging entire app by dragging menu bar.
-    // https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1161495124
-    document.querySelector("#fc__menu_bar")!.addEventListener("mousedown", async e => {
-        if ((e.target as Element).closest(".el-menu-item")) return; // Disable drag when clicking menu items.
-        await tauriWindow.appWindow.startDragging();
-    });
   },
   methods: {
     minimize() {
@@ -46,6 +39,7 @@ export default {
         router
         mode="horizontal"
         id="fc__menu_bar"
+        data-tauri-drag-region
     >
         <el-menu-item index="/">Play</el-menu-item>
         <el-menu-item index="/changelog">Changelog</el-menu-item>
@@ -82,7 +76,7 @@ export default {
   background-color: transparent;
 }
 
-#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus{
+#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus {
   color: white !important;
   background-color: transparent;
 }
-- 
cgit v1.2.3


From 8edfb16aba17f082a3a0da891d8e49658bf36530 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:40:42 +0200
Subject: feat: apply same height to all menu components

---
 src-vue/src/App.vue   | 4 ++--
 src-vue/src/style.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src-vue/src')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 1b96abc3..68372fc7 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -86,7 +86,7 @@ export default {
   background-image: radial-gradient(transparent 1px);
   backdrop-filter: saturate(50%) blur(4px);
   background-color: transparent;
-  height: auto !important;
+  height: var(--fc-menu_height);
 }
 
 /* Window controls */
@@ -95,7 +95,7 @@ export default {
   position: absolute;
   top: 0;
   right: 0;
-  height: var(--el-tabs-header-height);
+  height: var(--fc-menu_height);
 }
 
 #fc_window__controls > button {
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
index eee68edd..6fd4a793 100644
--- a/src-vue/src/style.css
+++ b/src-vue/src/style.css
@@ -1,7 +1,7 @@
 body {
   margin: 0;
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  --el-tabs-header-height: 60px;
+  --fc-menu_height: 50px;
   user-select: none;
 }
 
-- 
cgit v1.2.3