feat: add component to see game folder path

3 files changed, 55 insertions, 2 deletions

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index b97e9ef4..264f021d 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -1,11 +1,13 @@
 <script lang="ts">
 import PlayView from './views/PlayView.vue';
+import SettingsView from './views/SettingsView.vue';
 import { appWindow } from '@tauri-apps/api/window';
 import { store } from './plugins/store';
 
 export default {
   components: {
-    PlayView
+      PlayView,
+      SettingsView
   },
   data() {
     return {}
@@ -30,7 +32,7 @@ export default {
         <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 name="Settings" label="Settings"><SettingsView/></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">
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index f2d42e13..5519537e 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -7,6 +7,7 @@ export const store = createStore({
         return {
             current_tab: Tabs.PLAY,
             developer_mode: false,
+            game_path: "this/is/the/game/path",
 
             installed_northstar_version: "1.9.7",
 
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
new file mode 100644
index 00000000..dbea2ce3
--- /dev/null
+++ b/src-vue/src/views/SettingsView.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="fc_settings__container">
+        <!-- Game folder location -->
+        <h3>Manage installation</h3>
+        <el-input
+            v-model="$store.state.game_path"
+            class="w-50 m-2"
+            placeholder="Choose installation folder"
+            @click="updateGamePath"
+        >
+            <template #prepend>
+                <el-button icon="Folder" @click="updateGamePath"/>
+            </template>
+        </el-input>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SettingsView",
+    methods: {
+        updateGamePath() {
+            console.log('TODO: update path');
+        }
+    },
+    mounted() {
+        document.querySelector('input').disabled = true;
+    }
+}
+</script>
+
+<style scoped>
+.fc_settings__container {
+    max-width: 1200px;
+    padding: 20px 30px;
+    margin: 0 auto;
+    color: white;
+}
+
+h3:first-of-type {
+    margin-top: 0;
+    margin-bottom: 1em;
+    text-transform: uppercase;
+    font-weight: unset;
+}
+
+.el-input {
+    width: 50%;
+}
+</style>