feat: Thunderstore mods pagination (#122)

* feat: add basic pagination

* refactor: put paginator inside filters container

* fix: limit filter container width

* refactor: filters container is now responsive

* fix: add missing type to pagination listener parameter

* fix: don't display entire mods list while filtering mods

* refactor: filteredMods is now a computed value

* refactor: store mods per page value on UI store

* feat: user can change modsPerPage count in settings

* fix: limit mods count (min=5, max=100)

* feat: add control on pages value

When leaving settings vue, we check if the pages value is a number and is
included in the interval [5-100].
If that's not the case, we reset it to 20.

* feat: retrieve and save pages value in persistent store

* fix: don't load an empty value from persistent store on boot

* fix: cast modsPerPage to string to check if it's empty

* refactor: remove search debounce

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

* style: add trailing comma

* fix: mention impact on TS mods only

* refactor: remove limitations on modsPerPage

* style: explicitly cast mods_per_page to number

* feat: disable pagination with modsPerPage === 0

* feat: add pagination under thunderstore mod cards

* fix: adjust bottom pagination padding

* feat: clicking bottom pagination scrolls to page top

* fix: use same containers for both paginations

* feat: do not display pagination if mods fit on one page

* style: trailing spaces

* style: trailing spaces

* feat: add a button to reset modsPerPage

* feat: add explanation text about disabling pagination

1 files changed, 13 insertions, 2 deletions

diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index 3db85e64..18191555 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -36,7 +36,10 @@ export interface FlightCoreStore {
     installed_mods: NorthstarMod[],
 
     northstar_is_running: boolean,
-    origin_is_running: boolean
+    origin_is_running: boolean,
+
+    // user custom settings
+    mods_per_page: number,
 }
 
 let notification_handle: NotificationHandle;
@@ -60,7 +63,9 @@ export const store = createStore<FlightCoreStore>({
             installed_mods: [],
 
             northstar_is_running: false,
-            origin_is_running: false
+            origin_is_running: false,
+
+            mods_per_page: 20,
         }
     },
     mutations: {
@@ -320,6 +325,12 @@ async function _initializeApp(state: any) {
         state.enableReleasesSwitch = valueFromStore.value;
     }
 
+    // Grab "Thunderstore mods per page" setting from store if possible
+    const perPageFromStore: {value: number} | null = await persistentStore.get('thunderstore-mods-per-page');
+    if (perPageFromStore && perPageFromStore.value) {
+        state.mods_per_page = perPageFromStore.value;
+    }
+
     // Get FlightCore version number
     state.flightcore_version = await invoke("get_flightcore_version_number");