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

4 files changed, 139 insertions, 29 deletions

diff --git a/src-vue/src/components/PlayButton.vue b/src-vue/src/components/PlayButton.vue
index ff57e706..28fac278 100644
--- a/src-vue/src/components/PlayButton.vue
+++ b/src-vue/src/components/PlayButton.vue
@@ -6,6 +6,16 @@ import { ReleaseCanal } from '../utils/ReleaseCanal';
 export default defineComponent({
     name: 'PlayButton',
     computed: {
+        currentCanal: {
+            get(): ReleaseCanal {
+                return this.$store.state.northstar_release_canal;
+            },
+            set(value: ReleaseCanal) {
+                if (value !== this.currentCanal) {
+                    this.$store.commit('toggleReleaseCandidate');
+                }
+            }
+        },
         playButtonLabel(): string {
             if (this.$store.state.northstar_is_running) {
                 return "Game is running";
@@ -39,6 +49,40 @@ export default defineComponent({
                     value: Object.keys(ReleaseCanal)[Object.values(ReleaseCanal).indexOf(v)]
                 }
             });
+        },
+        selectOptions(): {label: string, options: {value: ReleaseCanal, label: string}[]}[] {
+            return [
+                {
+                    label: 'Beta',
+                    options: [
+                        {
+                            value: ReleaseCanal.RELEASE_CANDIDATE,
+                            label: 'Northstar release candidate',
+                        },
+                    ]
+                },
+                {
+                    label: 'Stable',
+                    options: [
+                        {
+                            value: ReleaseCanal.RELEASE,
+                            label: 'Northstar',
+                        },
+                    ]
+                }
+            ];
+        },
+        showReleaseSwitch(): boolean {
+            return this.$store.state.enableReleasesSwitch;
+        },
+
+        /**
+         * Button has rounded edges on its right only if releases switching is enabled.
+         */
+        buttonRadiusStyle(): string {
+            return this.showReleaseSwitch
+                ? 'border-radius: 2px 0 0 2px;'
+                : 'border-radius: 2px';
         }
     },
     methods: {
@@ -50,20 +94,57 @@ export default defineComponent({
 </script>
 
 <template>
-    <el-button :disabled="northstarIsRunning" type="primary" size="large" @click="launchGame" class="fc_launch__button">
+    <el-button :disabled="northstarIsRunning"
+               type="primary" size="large" @click="launchGame"
+               class="fc_launch__button" :style="buttonRadiusStyle">
         {{ playButtonLabel }}
     </el-button>
+    <el-select v-if="showReleaseSwitch" v-model="currentCanal" placeholder="Select">
+        <el-option-group
+            v-for="group in selectOptions"
+            :key="group.label"
+            :label="group.label"
+        >
+            <el-option
+                v-for="item in group.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+        </el-option-group>
+    </el-select>
 </template>
 
 <style scoped>
 button {
     text-transform: uppercase;
-    border-radius: 2px;
     padding: 30px;
     font-size: 15px;
+    margin-right: 0;
 }
 .fc_launch__button:focus {
     background-color: var(--el-color-primary);
     border-color: var(--el-color-primary);
 }
+
+/* Release canal selector */
+
+.el-select {
+    width: 0;
+    margin-right: 50px;
+    border-left: 1px solid rgb(176, 205, 255);
+}
+
+.el-select:deep(.el-input__wrapper) {
+    padding: 0 9px 0 0;
+    background-color: var(--el-color-primary);
+    border: none;
+    border-radius: 0 2px 2px 0;
+    height: 62px;
+    box-shadow: none !important;
+}
+
+.el-select:deep(.el-icon) {
+    color: white !important;
+}
 </style>
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index 8e793ced..e2246c44 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -28,6 +28,7 @@ export interface FlightCoreStore {
     installed_northstar_version: string,
     northstar_state: NorthstarState,
     northstar_release_canal: ReleaseCanal,
+    enableReleasesSwitch: boolean,
     releaseNotes: ReleaseInfo[],
 
     thunderstoreMods: ThunderstoreMod[],
@@ -51,6 +52,7 @@ export const store = createStore<FlightCoreStore>({
             installed_northstar_version: "",
             northstar_state: NorthstarState.GAME_NOT_FOUND,
             northstar_release_canal: ReleaseCanal.RELEASE,
+            enableReleasesSwitch: false,
             releaseNotes: [],
 
             thunderstoreMods: [],
@@ -248,6 +250,26 @@ export const store = createStore<FlightCoreStore>({
                         position: 'bottom-right'
                     });
                 });
+        },
+        async toggleReleaseCandidate(state: FlightCoreStore) {
+            // Flip between RELEASE and RELEASE_CANDIDATE
+            state.northstar_release_canal = state.northstar_release_canal === ReleaseCanal.RELEASE
+                ? ReleaseCanal.RELEASE_CANDIDATE
+                : ReleaseCanal.RELEASE;
+
+            // Save change in persistent store
+            await persistentStore.set('northstar-release-canal', { value: state.northstar_release_canal });
+
+            // Update current state so that update check etc can be performed
+            store.commit("checkNorthstarUpdates");
+
+            // Display notification to highlight change
+            ElNotification({
+                title: `${state.northstar_release_canal}`,
+                message: `Switched release channel to: "${state.northstar_release_canal}"`,
+                type: 'success',
+                position: 'bottom-right'
+            });
         }
     }
 });
@@ -278,6 +300,12 @@ async function _initializeApp(state: any) {
         console.log("Value not found in store");
     }
 
+    // Grab "Enable releases switching" setting from store if possible
+    const valueFromStore: {value: boolean} | null = await persistentStore.get('northstar-releases-switching');
+    if (valueFromStore) {
+        state.enableReleasesSwitch = valueFromStore.value;
+    }
+
     // Get FlightCore version number
     state.flightcore_version = await invoke("get_flightcore_version_number");
 
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>