refactor: Mods view (#134)

* feat: add UI skeleton for new mods interface

* fix: only apply app menu style to app menu items

* feat: add menu skeleton

* feat: add thunderstore mods view into mods view

* refactor: remove thunderstore mods view from router + menu bar

* refactor: move search input into mods view

* fix: adjust ts mods container padding

* refactor: center pagination components

* refactor: rework media queries to adapt cards container width

* fix: set mods view navigation min-width

* refactor: compute mods container width with CSS variables

* refactor: remove horizontal padding around ts mods container

This will allow them to take much screen space.

* feat: Thunderstore mods container is larger

* feat: add layouts for 5 to 8 Thunderstore mod columns

* feat: add some space to separate navigation menu subparts

* fix: move search pagination reset in ThunderstoreModsView component

* feat: retrieve Thunderstore mod categories when fetching mods

* feat: add mod categories selector component

* feat: mod categories selector now filters Thunderstore mods

* fix: reset pagination index if needed when selecting mod categories

* fix: first mod does not appear anymore while selecting any mod category

First mod's categories array was used as an accumulator (in a reduce call)
to regroup all mod categories; we now use an empty array as initial value
for the accumulator.

* feat: add a selector component to sort mods

* feat: set sort selector default value on view mount

* fix: set default sorting select value as selected in dropdown list

* feat: add date_updated field to ThunderstoreMod type

* feat: pass sorting value to ThunderstoreModsView as a prop

* feat: mods can be sorted by name and release date

* feat: mods can be sorted by most downloaded and top rated

* fix: don't display sorting select on local mods view

* refactor: remove local mods title

* refactor: export local mods view code in dedicated component

* refactor: export search value in a search-dedicated store

* fix: display "no matching mods" message when no mods match

This message was previously displayed only if no mods matched AND search
input was not empty; now that we have categories selector, we can have no
matching mods with an empty input.

* refactor: remove unused input prop

* fix: mods can be sorted by rating

* refactor: remove unused searchValue computed property

* style: adjust SortOptions import

* refactor: move selected mod categories into search store module

* refactor: move mod sorting into search store module

* refactor: export mods menu component to dedicated file

* fix: remove compare method initialization

* feat: local mods can be filtered with search input

* build: add ES2018 lib to typescript compiler options

* refactor: remove unused variable

* fix: retrieve SortOptions values from string input

* refactor: move Thunderstore mods view into dedicated folder

* style: add missing trailing newline to SortOptions.d.ts

1 files changed, 33 insertions, 95 deletions

diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue
index 2f352ded..7c309832 100644
--- a/src-vue/src/views/ModsView.vue
+++ b/src-vue/src/views/ModsView.vue
@@ -1,112 +1,50 @@
 <template>
-    <div class="fc-container">
-        <el-scrollbar>
-            <h3>Installed Mods:</h3>
-            <div>
-                <p v-if="installedMods.length === 0">No mods were found.</p>
-                <el-card v-else shadow="hover" v-for="mod in installedMods" v-bind:key="mod.name">
-                    <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
-                        :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
-                    <el-popconfirm
-                        title="Are you sure to delete this mod?"
-                        @confirm="deleteMod(mod)"
-                    >
-                        <template #reference>
-                            <el-button type="danger">Delete</el-button>
-                        </template>
-                    </el-popconfirm>
-                    {{ mod.name }}
-                </el-card>
-            </div>
-        </el-scrollbar>
+    <div class="fc-container" style="display: flex">
+        <!-- Local mods/Thunderstore mods menu -->
+        <mods-menu
+            :showingLocalMods="show_local_mods"
+            @showLocalMods="(v) => show_local_mods = v"
+        />
+
+        <!-- Mods content -->
+        <div class="fc_mods__container">
+            <local-mods-view
+                v-if="show_local_mods"
+            />
+
+            <thunderstore-mods-view
+                v-else
+                clearable
+            />
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ElNotification } from "element-plus";
-import { invoke } from '@tauri-apps/api/tauri';
-import { GameInstall } from "../utils/GameInstall";
-import { NorthstarMod } from "../utils/NorthstarMod"
+import ThunderstoreModsView from "./mods/ThunderstoreModsView.vue";
+import LocalModsView from "./mods/LocalModsView.vue";
+import ModsMenu from "../components/ModsMenu.vue";
 
 export default defineComponent({
     name: "ModsView",
+    components: {
+        ModsMenu,
+        LocalModsView,
+        ThunderstoreModsView
+    },
     data() {
         return {
-            global_load_indicator: false
-        }
-    },
-    async mounted() {
-        this.$store.commit('loadInstalledMods');
-    },
-    computed: {
-        installedMods(): NorthstarMod[] {
-            return this.$store.state.installed_mods;
-        }
-    },
-    methods: {
-        async updateWhichModsEnabled(mod: NorthstarMod) {
-            this.global_load_indicator = true;
-
-            // Setup up struct
-            let game_install = {
-                game_path: this.$store.state.game_path,
-                install_type: this.$store.state.install_type
-            } as GameInstall;
-
-            // enable/disable specific mod
-            try {
-                await invoke("set_mod_enabled_status", {
-                    gameInstall: game_install,
-                    modName: mod.name,
-                    // Need to set it to the opposite of current state,
-                    // as current state is only updated after command is run
-                    isEnabled: !mod.enabled,
-                })
-            }
-            catch (error) {
-                ElNotification({
-                    title: 'Error',
-                    message: `${error}`,
-                    type: 'error',
-                    position: 'bottom-right'
-                });
-                this.global_load_indicator = false;
-                return false;
-            }
-
-            this.global_load_indicator = false;
-            return true;
-        },
-        async deleteMod(mod: NorthstarMod) {
-            let game_install = {
-                game_path: this.$store.state.game_path,
-                install_type: this.$store.state.install_type
-            } as GameInstall;
-            await invoke("delete_northstar_mod", { gameInstall: game_install, nsmodName: mod.name })
-                .then((message) => {
-                    // Just a visual indicator that it worked
-                    ElNotification({
-                        title: `Success deleting ${mod.name}`,
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
-                })
-                .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
-                })
-                .finally(() => {
-                    this.$store.commit('loadInstalledMods');
-                });
+            show_local_mods: true,
         }
     }
 });
 </script>
 
-<style>
+<style scoped>
+.fc_mods__container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+}
 </style>