feat: Thunderstore mods listing (#54)

* feat: add ThunderstoreMod type

* feat: add view component to develop mods layout

* feat: mount view component in router

* feat: display thunderstore section in menu

* refactor: create thunderstore package

* feat: add ThunderstoreModVersion type

* feat: add icon field to mod version type

* feat: add basic card layout for mods

* refactor: card button text is computed

In the future, we want the button text to change regarding status of the current
mod (installed, deprecated or not installed at all).

* feat: display mod owners

* feat: display download and like counts

* feat: fetch mods from Thunderstore API

* fix: type issue

* fix: prevent texts from overflowing

* fix: all cards have same height

* feat: add some space between cards

* feat: add basic search bar to filter mods

* fix: convert search string to lowercase to avoid font case issues

* feat: remove some mods from listing

* feat: a button opens mod page on Thunderstore website

* feat: display some text if no mod matched searched words

* fix: description size

* fix: display mod's total downloads count

* docs: add documentation to methods

* refactor: store thunderstore mods in store

* docs: remove TODO notes

* style: add trailing line to ThunderstoreModVersion.d.ts

* feat: cards container is responsive

Mods cards will always appear centered on the screen, and cards container
width adjusts to window width.

* fix: debounce mods filtering

Since filtering mods with search string is costly, we don't do it for each
character entered into search bar, but rather wait (300ms) for the user to
stop typing.

* feat: add full_name field to ThunderstoreModVersion type

* feat: mods can be installed by clicking the card button

* feat: card displays a loader while mod is being installed

* refactor: move installed mods list to frontend store

Installed mods are now stored in the frontend store, so they can be used in
all views.

* feat: card button text varies regarding current mod's status

Button can now tell if current mod is being installed, or if it is already installed
on local file system.

* refactor: export mod status computation in a dedicated method

* feat: color buttons regarding associated mod's state

* fix: set search debounce timeout to 200ms

* refactor: local mods load is done by frontend store

* fix: load locally-installed mods before fetching thunderstore mods

* fix: display mods while typing in search bar

* fix: type issue

* fix: CI doesn't know NodeJS namespace

* fix: adjust NorthstarMod member types (string instead of String)

* feat: tell if a mod is outdated by checking its Thunderstore dependency string prefix

* fix: update mods list after installing one from Thunderstore

This way, after installing a mod, button text will display "Installed" instead
of "Install".

* refactor: export Thunderstore mod card to dedicated component file

* refactor: rename computed variables

* fix: use computed latestVersion member

* feat: display "updating" on button when updating an already-installed mod

* feat: add some background blur on thunderstore mods view

* Update src-vue/src/views/ThunderstoreModsView.vue

* Update src-vue/src/plugins/store.ts

* fix: zoom background container a bit to hide white border on Windows

1 files changed, 190 insertions, 0 deletions

diff --git a/src-vue/src/views/ThunderstoreModsView.vue b/src-vue/src/views/ThunderstoreModsView.vue
new file mode 100644
index 00000000..cc9db0b5
--- /dev/null
+++ b/src-vue/src/views/ThunderstoreModsView.vue
@@ -0,0 +1,190 @@
+<template>
+    <div style="height: calc(100% - var(--fc-menu_height))">
+        <div v-if="mods.length === 0" class="fc__changelog__container">
+            <el-progress :show-text="false" :percentage="50" :indeterminate="true" />
+        </div>
+        <el-scrollbar v-else class="container">
+            <div class="card-container">
+                <!-- Search filters -->
+                <div class="filter_container">
+                    <el-input v-model="input" placeholder="Search" clearable @input="onFilterTextChange" />
+                    <!-- Message displayed when user is typing in search bar -->
+                    <div v-if="userIsTyping" class="modMessage search">
+                        Searching mods...
+                    </div>
+                </div>
+
+                <!-- Message displayed if no mod matched searched words -->
+                <div v-if="filteredMods.length === 0 && input.length !== 0 && !userIsTyping" class="modMessage">
+                    No matching mod has been found.<br/>
+                    Try another search!
+                </div>
+
+                <!-- Mod cards -->
+                <thunderstore-mod-card v-for="mod of modsList" v-bind:key="mod.name" :mod="mod" />
+            </div>
+        </el-scrollbar>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ThunderstoreMod } from "../utils/thunderstore/ThunderstoreMod";
+import ThunderstoreModCard from "../components/ThunderstoreModCard.vue";
+
+export default defineComponent({
+    name: "ThunderstoreModsView",
+    components: {ThunderstoreModCard},
+    async mounted() {
+        this.$store.commit('fetchThunderstoreMods');
+    },
+    computed: {
+        mods(): ThunderstoreMod[] {
+            return this.$store.state.thunderstoreMods;
+        },
+        modsList(): ThunderstoreMod[] {
+            return this.input.length === 0 || this.userIsTyping ? this.mods : this.filteredMods;
+        }
+    },
+    data() {
+        return {
+            input: '',
+            filteredMods: [] as ThunderstoreMod[],
+            modsBeingInstalled: [] as string[],
+            userIsTyping: false,
+            debouncedSearch: this.debounce((i: string) => this.filterMods(i))
+        };
+    },
+    methods: {
+        /**
+         * This is a debounced version of the filterMods method, that calls
+         * filterMods when user has stopped typing in the search bar (i.e.
+         * waits 300ms).
+         * It allows not to trigger filtering method (which is costly) each
+         * time user inputs a character.
+         */
+        onFilterTextChange (searchString: string) {
+            this.debouncedSearch(searchString);
+        },
+
+        /**
+         * This method is called each time search input is modified, and
+         * filters mods matching the input string.
+         *
+         * This converts research string and all researched fields to
+         * lower case, to match mods regardless of font case.
+         */
+        filterMods(value: string) {
+            if (value === '') {
+                this.filteredMods = [];
+                return;
+            }
+
+            const searchValue = value.toLowerCase();
+
+            this.filteredMods = this.mods.filter((mod: ThunderstoreMod) => {
+                return mod.name.toLowerCase().includes(searchValue)
+                    || mod.owner.toLowerCase().includes(searchValue)
+                    || mod.versions[0].description.toLowerCase().includes(searchValue);
+            });
+        },
+
+        /**
+         * This debounces a method, i.e. it prevents input method from being called
+         * multiple times in a short period of time.
+         * Stolen from https://www.freecodecamp.org/news/javascript-debounce-example/
+         */
+        debounce (func: Function, timeout = 200) {
+            let timer: any;
+            return (...args: any) => {
+                this.userIsTyping = true;
+                clearTimeout(timer);
+                timer = setTimeout(() => {
+                    this.userIsTyping = false;
+                    func.apply(this, args);
+                }, timeout);
+            };
+        }
+    }
+});
+</script>
+
+<style scoped>
+.fc__changelog__container {
+    padding: 20px 30px;
+    position: relative;
+    overflow-y: auto;
+    height: calc(100% - var(--fc-menu_height));
+    color: white;
+}
+
+.el-timeline-item__timestamp {
+    color: white !important;
+    user-select: none !important;
+}
+
+.filter_container {
+    margin: 5px;
+}
+
+.el-input {
+    max-width: 300px;
+}
+
+.search {
+    display: inline-block;
+    margin: 0 0 0 10px !important;
+}
+
+.modMessage {
+    color: white;
+    margin: 20px 5px;
+}
+
+.card-container {
+    margin: 0 auto;
+}
+
+/* Card container dynamic size */
+@media (max-width: 1000px) {
+    .card-container {
+        width: 752px;
+    }
+}
+
+@media (max-width: 812px) {
+    .card-container {
+        width: 574px;
+    }
+}
+
+@media (max-width: 624px) {
+    .card-container {
+        width: 376px;
+    }
+}
+
+@media (min-width: 1000px) {
+    .card-container {
+        width: 940px;
+    }
+}
+
+@media (min-width: 1188px) {
+    .card-container {
+        width: 1128px;
+    }
+}
+
+@media (min-width: 1376px) {
+    .card-container {
+        width: 1316px;
+    }
+}
+
+@media (min-width: 1565px) {
+    .card-container {
+        width: 1505px;
+    }
+}
+</style>