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

diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index ff87c394..1c03fe4f 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -14,6 +14,24 @@
                         <el-button icon="Folder" @click="updateGamePath"/>
                     </template>
                 </el-input>
+
+                <!-- Thunderstore mods per page configuration -->
+                <div class="fc_parameter__panel">
+                    <h3>Number of Thunderstore mods per page</h3>
+                    <h6>
+                        This has an impact on display performances when browsing Thunderstore mods.<br>
+                        Set this value to 0 to disable pagination.
+                    </h6>
+                    <el-input 
+                        v-model="modsPerPage" 
+                        type="number"
+                    >
+                        <template #append>
+                            <el-button @click="modsPerPage = 20">Reset to default</el-button>
+                        </template>
+                    </el-input>
+                </div>
+
                 <h3>About:</h3>
                 <div class="fc_northstar__version" @click="activateDeveloperMode">
                     FlightCore Version: {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
@@ -64,6 +82,15 @@ export default defineComponent({
                     this.$store.commit('toggleReleaseCandidate');
                 }
             }
+        },
+        modsPerPage: {
+            get(): number {
+                return this.$store.state.mods_per_page;
+            },
+            set(value: number) {
+                this.$store.state.mods_per_page = value;
+                persistentStore.set('thunderstore-mods-per-page', { value });
+            }
         }
     },
     methods: {
@@ -86,6 +113,12 @@ export default defineComponent({
     },
     mounted() {
         document.querySelector('input')!.disabled = true;
+    },
+    unmounted() {
+        if (('' + this.modsPerPage) === '') {
+            console.warn('Incorrect value for modsPerPage, resetting it to 20.');
+            this.modsPerPage = 20;
+        }
     }
 });
 </script>
@@ -110,4 +143,19 @@ h3:first-of-type {
 .el-switch {
     margin-left: 50px;
 }
+
+
+/* Parameter panel styles */
+.fc_parameter__panel {
+    margin: 30px 0;
+}
+
+.fc_parameter__panel h3 {
+    margin-bottom: 5px;
+}
+
+.fc_parameter__panel h6 {
+    margin-top: 0;
+    margin-bottom: 12px;
+}
 </style>