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, 2 insertions, 0 deletions

diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 95bea7af..f40edec2 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -17,6 +17,7 @@ const app = createApp(App);
 // styles
 import 'element-plus/theme-chalk/index.css';
 import './style.css'
+import ThunderstoreModsView from "./views/ThunderstoreModsView.vue";
 
 app.use(ElementPlus);
 
@@ -34,6 +35,7 @@ const routes = [
     { path: '/', name: 'Main', component: async () => PlayView},
     { path: '/changelog', name: 'Changelog', component: async () => ChangelogView},
     { path: '/mods', name: 'Mods', component: async () => ModsView},
+    { path: '/thunderstoreMods', name: 'Thunderstore mods', component: async () => ThunderstoreModsView},
     { path: '/settings', name: 'Settings', component: async () => SettingsView},
     { path: '/dev', name: 'Dev', component: async () => DeveloperView}
 ];