Workaround ModLoader capitalization issue and make loaders list collapsible (#490)

components/ui/Checkbox.vue

@@ -9,11 +9,12 @@
       class="checkbox"
       role="checkbox"
       :disabled="disabled"
-      :class="{ checked: value }"
+      :class="{ checked: value, collapsing: collapsingToggleStyle }"
       :aria-label="description"
       :aria-checked="value"
     >
-      <CheckIcon v-if="value" aria-hidden="true" />
+      <CheckIcon v-if="value && !collapsingToggleStyle" aria-hidden="true" />
+      <DropdownIcon v-else-if="collapsingToggleStyle" aria-hidden="true" />
     </button>
     <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
     <p v-if="label" aria-hidden="true">{{ label }}</p>
@@ -23,11 +24,13 @@
 
 <script>
 import CheckIcon from '~/assets/images/utils/check.svg?inline'
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 
 export default {
   name: 'Checkbox',
   components: {
     CheckIcon,
+    DropdownIcon,
   },
   props: {
     label: {
@@ -47,6 +50,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    collapsingToggleStyle: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     toggle() {
@@ -89,6 +96,10 @@ export default {
   &:hover {
     color: var(--color-heading);
 
+    .checkbox.collapsing svg {
+      color: var(--color-heading);
+    }
+
     button {
       background-color: var(--color-button-bg-hover);
 
@@ -97,9 +108,14 @@ export default {
       }
     }
   }
+
   &:active {
     color: var(--color-text-dark);
 
+    .checkbox.collapsing svg {
+      color: var(--color-text-dark);
+    }
+
     button {
       background-color: var(--color-button-bg-active);
 
@@ -133,5 +149,22 @@ export default {
     width: 0.8rem;
     flex-shrink: 0;
   }
+
+  &.collapsing {
+    background-color: transparent !important;
+
+    svg {
+      color: inherit;
+      height: 1rem;
+      width: 1rem;
+      transition: transform 0.25s ease-in-out;
+    }
+
+    &.checked {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
 }
 </style>

components/ui/search/Categories.vue

@@ -3,7 +3,10 @@
     <span
       v-for="category in categoriesFiltered"
       :key="category.name"
-      v-html="category.icon + category.name"
+      v-html="
+        category.icon +
+        (category.name === 'modloader' ? 'ModLoader' : category.name)
+      "
     />
   </div>
 </template>

pages/search.vue

@@ -67,16 +67,34 @@
               Loaders
             </h3>
             <SearchFilter
-              v-for="loader in $tag.loaders.filter((x) =>
-                x.supported_project_types.includes(projectType)
-              )"
+              v-for="loader in $tag.loaders.filter((x) => {
+                if (
+                  !showAllLoaders &&
+                  x.name !== 'forge' &&
+                  x.name !== 'fabric' &&
+                  x.name !== 'quilt'
+                ) {
+                  return false
+                }
+                return x.supported_project_types.includes(projectType)
+              })"
               :key="loader.name"
               :active-filters="orFacets"
-              :display-name="loader.name"
+              :display-name="
+                loader.name === 'modloader' ? 'ModLoader' : loader.name
+              "
               :facet-name="`categories:${loader.name}`"
               :icon="loader.icon"
               @toggle="toggleOrFacet"
             />
+            <Checkbox
+              v-model="showAllLoaders"
+              :label="showAllLoaders ? 'Less' : 'More'"
+              description="Show all loaders"
+              style="margin-bottom: 0.5rem"
+              :border="false"
+              :collapsing-toggle-style="true"
+            />
           </section>
           <section aria-label="Environment filters">
             <h3 class="sidebar-menu-heading">Environments</h3>
@@ -326,6 +344,7 @@ export default {
       maxResults: 20,
 
       sidebarMenuOpen: false,
+      showAllLoaders: false,
 
       skipLink: '#search-results',
     }