feat: Show outdated Thunderstore mods first (#385)

* feat: add isThunderstoreModOutdated method to utils

* feat: display a badge on menu if there are some outdated thunderstore mods

* feat: always display outdated mods first

* feat: fetch Thunderstore mods on mods view mount

To display the count of outdated Thunderstore mods on mods main
page, we need to fetch them.

* style: Update src-vue/src/components/ModsMenu.vue

* style: Update src-vue/src/utils/thunderstore/version.ts

* style: Update src-vue/src/views/mods/ThunderstoreModsView.vue

* docs: improve outdated mods comment

* docs: add comment regarding versions ordering

2 files changed, 18 insertions, 1 deletions

diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue
index 7c309832..a821dcda 100644
--- a/src-vue/src/views/ModsView.vue
+++ b/src-vue/src/views/ModsView.vue
@@ -37,6 +37,10 @@ export default defineComponent({
         return {
             show_local_mods: true,
         }
+    },
+    mounted() {
+        // Fetch Thunderstore mods to eventually display outdated mods count
+        this.$store.commit('fetchThunderstoreMods');
     }
 });
 </script>
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
index 538a895f..6f5e8acf 100644
--- a/src-vue/src/views/mods/ThunderstoreModsView.vue
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -52,6 +52,8 @@ import { ElScrollbar, ScrollbarInstance } from "element-plus";
 import { SortOptions } from "../../utils/SortOptions.d";

 import { ThunderstoreModVersion } from "../../../../src-tauri/bindings/ThunderstoreModVersion";

 import { fuzzy_filter } from "../../utils/filter";

+import { isThunderstoreModOutdated } from "../../utils/thunderstore/version";

+

 

 export default defineComponent({

     name: "ThunderstoreModsView",

@@ -137,7 +139,18 @@ export default defineComponent({
                     throw new Error('Unknown mod sorting.');

             }

 

-            return mods.sort(compare);

+            // Always display outdated mods first

+            // (regardless of actual sort order)

+            const sortedMods = mods.sort(compare);

+            return sortedMods.sort((a, b) => {

+                if (isThunderstoreModOutdated(a)) {

+                    return -1;

+                } else if (isThunderstoreModOutdated(b)) {

+                    return 1;

+                } else {

+                    return compare(a, b);

+                }

+            })

         },

         modsPerPage(): number {

             return parseInt(this.$store.state.mods_per_page);