Move extra loaders and change RP Resolutions to use OR (#1398)

* Put extra loaders at bottom of the list

* Added hidden loaders to a tag

* Made RP Resolutions use OR

* fixed lint

composables/tag.js

@@ -55,6 +55,7 @@ export const useTags = () =>
       ],
       dataPackLoaders: ['datapack'],
       modLoaders: ['forge', 'fabric', 'quilt', 'liteloader', 'modloader', 'rift', 'neoforge'],
+      hiddenModLoaders: ['liteloader', 'modloader', 'rift'],
     },
     projectViewModes: ['list', 'grid', 'gallery'],
     approvedStatuses: ['approved', 'archived', 'unlisted', 'private'],

pages/search/[searchProjectType].vue

@@ -41,15 +41,32 @@
                 {{ $formatCategoryHeader(header) }}
               </h3>
 
-              <SearchFilter
+              <template v-if="header === 'resolutions'">
-                v-for="category in categories.filter((x) => x.project_type === projectType.actual)"
+                <SearchFilter
-                :key="category.name"
+                  v-for="category in categories.filter(
-                :active-filters="facets"
+                    (x) => x.project_type === projectType.actual
-                :display-name="$formatCategory(category.name)"
+                  )"
-                :facet-name="`categories:'${encodeURIComponent(category.name)}'`"
+                  :key="category.name"
-                :icon="header === 'resolutions' ? null : category.icon"
+                  :active-filters="orFacets"
-                @toggle="toggleFacet"
+                  :display-name="$formatCategory(category.name)"
-              />
+                  :facet-name="`categories:'${encodeURIComponent(category.name)}'`"
+                  :icon="null"
+                  @toggle="toggleOrFacet"
+                />
+              </template>
+              <template v-else>
+                <SearchFilter
+                  v-for="category in categories.filter(
+                    (x) => x.project_type === projectType.actual
+                  )"
+                  :key="category.name"
+                  :active-filters="facets"
+                  :display-name="$formatCategory(category.name)"
+                  :facet-name="`categories:'${encodeURIComponent(category.name)}'`"
+                  :icon="category.icon"
+                  @toggle="toggleFacet"
+                />
+              </template>
             </div>
           </section>
           <section
@@ -67,17 +84,11 @@
             </h3>
             <SearchFilter
               v-for="loader in tags.loaders.filter((x) => {
-                if (
+                if (projectType.id === 'mod') {
-                  projectType.id === 'mod' &&
+                  return (
-                  !showAllLoaders &&
+                    tags.loaderData.modLoaders.includes(x.name) &&
-                  x.name !== 'forge' &&
+                    !tags.loaderData.hiddenModLoaders.includes(x.name)
-                  x.name !== 'fabric' &&
+                  )
-                  x.name !== 'quilt' &&
-                  x.name !== 'neoforge'
-                ) {
-                  return false
-                } else if (projectType.id === 'mod' && showAllLoaders) {
-                  return tags.loaderData.modLoaders.includes(x.name)
                 } else if (projectType.id === 'plugin') {
                   return tags.loaderData.pluginLoaders.includes(x.name)
                 } else if (projectType.id === 'datapack') {
@@ -94,6 +105,23 @@
               :icon="loader.icon"
               @toggle="toggleOrFacet"
             />
+            <template v-if="projectType.id === 'mod' && showAllLoaders">
+              <SearchFilter
+                v-for="loader in tags.loaders.filter((x) => {
+                  return (
+                    tags.loaderData.modLoaders.includes(x.name) &&
+                    tags.loaderData.hiddenModLoaders.includes(x.name)
+                  )
+                })"
+                :key="loader.name"
+                ref="loaderFilters"
+                :active-filters="orFacets"
+                :display-name="$formatCategory(loader.name)"
+                :facet-name="`categories:'${encodeURIComponent(loader.name)}'`"
+                :icon="loader.icon"
+                @toggle="toggleOrFacet"
+              />
+            </template>
             <Checkbox
               v-if="projectType.id === 'mod'"
               v-model="showAllLoaders"