feat: Release channel selector (#86)

* refactor: Move release channel button to settings

* chore: Revert single newline removal

* feat: add basic selector

* feat: add basic selector style (to match button style)

* fix: remove box-shadow on selector

* feat: selector displays release canal from UI store

* refactor: export toggleReleaseCandidate to store, for it to be used by release canal selector

* feat: selector effectively changes release canal

* fix: selector members typing issue

* refactor: adjust selector labels

* refactor: remove channel switching button

Since the channel selector on the play view allows users to switch channels,
this button is now useless.

* feat: add a switch to toggle releases switching

* feat: switch only appears if corresponding flag is enabled

* feat: adjust button corners regarding releases switching state

* feat: switch value is saved in persistent store

* refactor: update release candidate label

* fix: set release canal to RELEASE when switch is toggled off

2 files changed, 28 insertions, 27 deletions

diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
index f2e097b0..e15f2ad0 100644
--- a/src-vue/src/views/DeveloperView.vue
+++ b/src-vue/src/views/DeveloperView.vue
@@ -19,10 +19,6 @@
 
             <h3>Testing:</h3>
 
-            <el-button type="primary" @click="toggleReleaseCandidate">
-                Toggle Release Candidate
-            </el-button>
-
             <el-button type="primary" @click="launchGameWithoutChecks">
                 Launch Northstar (bypass all checks)
             </el-button>
@@ -60,7 +56,6 @@
 import { defineComponent } from "vue";
 import { invoke } from "@tauri-apps/api";
 import { ElNotification } from "element-plus";
-import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { GameInstall } from "../utils/GameInstall";
 import { Store } from 'tauri-plugin-store-api';
 const persistentStore = new Store('flight-core-settings.json');
@@ -105,28 +100,6 @@ export default defineComponent({
                     console.error(error);
                 });
         },
-        async toggleReleaseCandidate() {
-            // Flip between RELEASE and RELEASE_CANDIDATE
-            this.$store.state.northstar_release_canal = this.$store.state.northstar_release_canal === ReleaseCanal.RELEASE
-                ? ReleaseCanal.RELEASE_CANDIDATE
-                : ReleaseCanal.RELEASE;
-
-            // Save change in persistent store
-            await persistentStore.set('northstar-release-canal', { value: this.$store.state.northstar_release_canal });
-
-            // Update current state so that update check etc can be performed
-            this.$store.commit("checkNorthstarUpdates");
-
-            console.log(this.$store.state)
-
-            // Display notification to highlight change
-            ElNotification({
-                title: `${this.$store.state.northstar_release_canal}`,
-                message: `Switched release channel to: "${this.$store.state.northstar_release_canal}"`,
-                type: 'success',
-                position: 'bottom-right'
-            });
-        },
         async launchGameWithoutChecks() {
             this.$store.commit('launchGame', true);
         },
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index 8cb6e810..ff87c394 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -21,6 +21,12 @@
                 <br />
                 <br />
                 UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public)
+
+                <h3>Testing:</h3>
+                <span>
+                    Enable testing release channels
+                    <el-switch v-model="enableReleasesSwitch"></el-switch>
+                </span>
             </div>
         </el-scrollbar>
     </div>
@@ -29,6 +35,9 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { ElNotification } from 'element-plus';
+import { ReleaseCanal } from "../utils/ReleaseCanal";
+import { Store } from 'tauri-plugin-store-api';
+const persistentStore = new Store('flight-core-settings.json');
 
 export default defineComponent({
     name: "SettingsView",
@@ -41,6 +50,21 @@ export default defineComponent({
         flightcoreVersion(): string {
             return this.$store.state.flightcore_version;
         },
+        enableReleasesSwitch: {
+            get(): boolean {
+                return this.$store.state.enableReleasesSwitch;
+            },
+            set(value: boolean): void {
+                this.$store.state.enableReleasesSwitch = value;
+                persistentStore.set('northstar-releases-switching', { value });
+
+                // When disabling switch, we switch release canal to stable release, to avoid users being
+                // stuck with release candidate after disabling release switching.
+                if (!value && this.$store.state.northstar_release_canal !== ReleaseCanal.RELEASE) {
+                    this.$store.commit('toggleReleaseCandidate');
+                }
+            }
+        }
     },
     methods: {
         activateDeveloperMode() {
@@ -82,4 +106,8 @@ h3:first-of-type {
 .el-input {
     width: 50%;
 }
+
+.el-switch {
+    margin-left: 50px;
+}
 </style>