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

diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index edeb13df..2eae843a 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -15,6 +15,7 @@ import { router } from "../main";
 import ReleaseInfo from "../utils/ReleaseInfo";
 import { ThunderstoreMod } from '../utils/thunderstore/ThunderstoreMod';
 import { NorthstarMod } from "../utils/NorthstarMod";
+import { searchModule } from './modules/search';
 
 const persistentStore = new Store('flight-core-settings.json');
 
@@ -33,6 +34,7 @@ export interface FlightCoreStore {
     releaseNotes: ReleaseInfo[],
 
     thunderstoreMods: ThunderstoreMod[],
+    thunderstoreModsCategories: string[],
     installed_mods: NorthstarMod[],
 
     northstar_is_running: boolean,
@@ -48,6 +50,9 @@ export interface FlightCoreStore {
 let notification_handle: NotificationHandle;
 
 export const store = createStore<FlightCoreStore>({
+    modules: {
+        search: searchModule
+    },
     state(): FlightCoreStore {
         return {
             developer_mode: false,
@@ -63,6 +68,7 @@ export const store = createStore<FlightCoreStore>({
             releaseNotes: [],
 
             thunderstoreMods: [],
+            thunderstoreModsCategories: [],
             installed_mods: [],
 
             northstar_is_running: false,
@@ -244,6 +250,16 @@ export const store = createStore<FlightCoreStore>({
             state.thunderstoreMods = mods.filter((mod: ThunderstoreMod) => {
                 return !removedMods.includes(mod.name) && !mod.is_deprecated;
             });
+
+            // Retrieve categories from mods
+            state.thunderstoreModsCategories = mods
+                .map((mod: ThunderstoreMod) => mod.categories)
+                .filter((modCategories: string[]) => modCategories.length !== 0)
+                .reduce((accumulator: string[], modCategories: string[]) => {
+                    accumulator.push( ...modCategories.filter((cat: string) => !accumulator.includes(cat)) );
+                    return accumulator;
+                }, [])
+                .sort();
         },
         async loadInstalledMods(state: FlightCoreStore) {
             let game_install = {