fix: Don't show deprecated mods (#382)

* fix: don't show deprecated mods
* feat: add setting to settings view
* feat: display deprecated mod cards in red

5 files changed, 42 insertions, 3 deletions

diff --git a/src-vue/src/components/ThunderstoreModCard.vue b/src-vue/src/components/ThunderstoreModCard.vue
index a0e8c481..c25b19a2 100644
--- a/src-vue/src/components/ThunderstoreModCard.vue
+++ b/src-vue/src/components/ThunderstoreModCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-card :body-style="{ padding: '0px' }">
+    <el-card :body-style="getBodyStyle" :style="getCardStyle">
         <img
             :src="latestVersion.icon"
             class="image"
@@ -89,6 +89,14 @@ export default defineComponent({
         isBeingUpdated: false
     }),
     computed: {
+        getBodyStyle(): Object {
+            return this.mod.is_deprecated ? { 'background-color': 'rgba(255, 0, 0, 0.42)' } : {};
+        },
+
+        getCardStyle(): Object {
+            return this.mod.is_deprecated ? { 'border': '1px solid red' } : {};
+        },
+
         latestVersion(): ThunderstoreModVersion {
             return this.mod.versions[0];
         },
@@ -264,6 +272,11 @@ export default defineComponent({
     display: inline-block;
     max-width: 178px;
     margin: 5px;
+    --el-card-padding: 0;
+}
+
+.deprecated {
+    background-color: red !important;
 }
 
 .author {
diff --git a/src-vue/src/i18n/lang/en.json b/src-vue/src/i18n/lang/en.json
index db2308e2..202d7bdd 100644
--- a/src-vue/src/i18n/lang/en.json
+++ b/src-vue/src/i18n/lang/en.json
@@ -106,6 +106,9 @@
         "enable_test_channels": "Enable testing release channels",
         "dev_mode_enabled_title": "Watch out!",
         "dev_mode_enabled_text": "Developer mode enabled.",
+        "show_deprecated_mods": "Show deprecated Thunderstore mods",
+        "show_deprecated_mods_desc1": "This allows you to see deprecated mods in the online mods collection.",
+        "show_deprecated_mods_desc2": "Watch out, such mods are usually deprecated for a good reason.",
 
         "repair": {
             "title": "Repair",
diff --git a/src-vue/src/plugins/modules/search.ts b/src-vue/src/plugins/modules/search.ts
index 16260387..e590b94b 100644
--- a/src-vue/src/plugins/modules/search.ts
+++ b/src-vue/src/plugins/modules/search.ts
@@ -8,6 +8,7 @@ export const searchModule = {
         searchValue: '',
         // Selected mod categories
         selectedCategories: [],
+        showDeprecatedMods: false,
         sortValue: {label: '', value: ''}
     }),
     getters: {
@@ -16,4 +17,3 @@ export const searchModule = {
         }
     }
   }
-  
\ No newline at end of file
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index 2f2f5019..c4e94c80 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -40,6 +40,18 @@
                     </el-input>
                 </div>
 
+                <div class="fc_parameter__panel">
+                    <h3>{{ $t('settings.show_deprecated_mods') }}</h3>
+                    <h6>
+                        {{ $t('settings.show_deprecated_mods_desc1') }}<br/>
+                        {{ $t('settings.show_deprecated_mods_desc2') }}
+                    </h6>
+                    <span>
+                        {{ $t('settings.show_deprecated_mods') }}
+                        <el-switch v-model="showDeprecatedMods"></el-switch>
+                    </span>
+                </div>
+
                 <!-- Interface localization -->
                 <div class="fc_parameter__panel">
                     <h3>{{ $t('settings.language') }}</h3>
@@ -96,6 +108,14 @@ export default defineComponent({
         }
     },
     computed: {
+        showDeprecatedMods: {
+            get(): boolean {
+                return this.$store.state.search.showDeprecatedMods;
+            },
+            set(value: boolean) {
+                this.$store.state.search.showDeprecatedMods = value;
+            }
+        },
         flightcoreVersion(): string {
             return this.$store.state.flightcore_version;
         },
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
index 58a00367..538a895f 100644
--- a/src-vue/src/views/mods/ThunderstoreModsView.vue
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -86,13 +86,16 @@ export default defineComponent({
                         mod.versions[0].description.toLowerCase().includes(this.searchValue)

                     );

 

+                // Filter out deprecated mods

+                const showDeprecated = !mod.is_deprecated || this.$store.state.search.showDeprecatedMods;

+

                 // Filter with categories (only if some categories are selected)

                 const categoriesMatch: boolean = this.selectedCategories.length === 0

                     || mod.categories

                         .filter((category: string) => this.selectedCategories.includes(category))

                         .length === this.selectedCategories.length;

 

-                return inputMatches && categoriesMatch;

+                return inputMatches && categoriesMatch && showDeprecated;

             });

         },

         modsList(): ThunderstoreMod[] {