Add version filter controls to Changelog and Versions pages (#378)

components/ui/Badge.vue

@@ -55,7 +55,7 @@ export default {
     color: var(--color-badge-green-text);
 
     .circle {
-      background-color: var(--color-badge-green-bg);
+      background-color: var(--color-brand);
     }
   }
 

components/ui/VersionFilterControl.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="card search-controls">
+    <Multiselect
+      v-model="selectedLoaders"
+      :options="getValidLoaders()"
+      :multiple="true"
+      :searchable="true"
+      :show-no-results="false"
+      :close-on-select="false"
+      :clear-search-on-select="false"
+      :show-labels="false"
+      :selectable="() => selectedLoaders.length <= 6"
+      placeholder="Filter loaders..."
+      @input="updateVersionFilters()"
+    ></Multiselect>
+    <Multiselect
+      v-model="selectedGameVersions"
+      :options="getValidVersions()"
+      :multiple="true"
+      :searchable="true"
+      :show-no-results="false"
+      :close-on-select="false"
+      :clear-search-on-select="false"
+      :show-labels="false"
+      :selectable="() => selectedGameVersions.length <= 6"
+      placeholder="Filter versions..."
+      @input="updateVersionFilters()"
+    ></Multiselect>
+    <Checkbox
+      v-model="showSnapshots"
+      label="Include snapshots"
+      description="Include snapshots"
+      style="margin-bottom: 0.5rem"
+      :border="false"
+    />
+  </div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect'
+import Checkbox from '~/components/ui/Checkbox'
+
+export default {
+  name: 'VersionFilterControl',
+  components: {
+    Multiselect,
+    Checkbox,
+  },
+  props: {
+    versions: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      query: '',
+      showSnapshots: false,
+      cachedValidVersions: null,
+      cachedValidLoaders: null,
+      selectedGameVersions: [],
+      selectedLoaders: [],
+    }
+  },
+  methods: {
+    getValidVersions() {
+      if (!this.cachedValidVersions) {
+        const temp = new Set()
+        for (const version of this.versions) {
+          version.game_versions.forEach((v) => {
+            temp.add(v)
+          })
+        }
+        this.cachedValidVersions = Array.from(temp)
+        this.cachedValidVersions.sort().reverse()
+      }
+      return this.cachedValidVersions
+    },
+    getValidLoaders() {
+      if (!this.cachedValidLoaders) {
+        const temp = new Set()
+        for (const version of this.versions) {
+          version.loaders.forEach((v) => {
+            temp.add(v)
+          })
+        }
+        this.cachedValidLoaders = Array.from(temp)
+        this.cachedValidLoaders.sort()
+      }
+      return this.cachedValidLoaders
+    },
+    updateVersionFilters() {
+      const temp = this.versions.filter(
+        (projectVersion) =>
+          (this.selectedGameVersions.length === 0 ||
+            this.selectedGameVersions.some((gameVersion) =>
+              projectVersion.game_versions.includes(gameVersion)
+            )) &&
+          (this.selectedLoaders.length === 0 ||
+            this.selectedLoaders.some((loader) =>
+              projectVersion.loaders.includes(loader)
+            ))
+      )
+      this.$emit('updateVersions', temp)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.search-controls {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-card-md);
+  align-items: center;
+  flex-wrap: wrap;
+
+  .multiselect {
+    flex-grow: 1;
+    max-height: unset;
+    width: fit-content;
+
+    input::placeholder {
+      color: var(--color-text);
+    }
+  }
+
+  .checkbox-outer {
+    margin-bottom: 0 !important;
+  }
+}
+</style>

pages/_type/_id/changelog.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="content card">
+  <div class="content">
-    <ThisOrThat class="filters" v-model="filterMode" :items="filters" />
+    <VersionFilterControl
-    <div
+      class="card"
-      v-for="version in versions.filter((x) => x.loaders.includes(filterMode))"
+      :versions="versions"
-      :key="version.id"
+      @updateVersions="updateVersions"
-    >
+    />
+    <div class="card">
+      <div v-for="version in filteredVersions" :key="version.id">
         <div class="version-header">
           <span :class="'circle ' + version.version_type" />
           <div class="version-header-text">
@@ -32,7 +34,8 @@
               >
             </span>
             <span>
-            on {{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
+              on
+              {{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
             >
           </div>
           <a
@@ -55,33 +58,20 @@
         />
       </div>
     </div>
+  </div>
 </template>
 <script>
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
-import ThisOrThat from '~/components/ui/ThisOrThat'
+import VersionFilterControl from '~/components/ui/VersionFilterControl'
 
 export default {
   components: {
     DownloadIcon,
-    ThisOrThat,
+    VersionFilterControl,
   },
   data() {
     return {
-      filters: [],
+      filteredVersions: this.versions,
-      filterMode: '',
-    }
-  },
-  fetch() {
-    for (const version of this.versions) {
-      for (const loader of version.loaders) {
-        if (!this.filters.includes(loader)) {
-          this.filters.push(loader)
-        }
-
-        if (this.filterMode === '') {
-          this.filterMode = loader
-        }
-      }
     }
   },
   auth: false,
@@ -105,18 +95,15 @@ export default {
       },
     },
   },
+  methods: {
+    updateVersions(updatedVersions) {
+      this.filteredVersions = updatedVersions
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.content {
-  max-width: calc(100% - (2 * var(--spacing-card-lg)));
-}
-
-.filters {
-  margin-bottom: 1rem;
-}
-
 .version-header {
   display: flex;
   align-items: center;

pages/_type/_id/gallery.vue

@@ -45,7 +45,7 @@
         </div>
       </div>
     </div>
-    <div class="buttons">
+    <div class="card buttons">
       <button
         v-if="currentMember"
         class="iconified-button"
@@ -495,13 +495,7 @@ export default {
   display: flex;
 
   button {
-    background-color: var(--color-raised-bg);
     margin-right: 0.5rem;
-    margin-bottom: var(--spacing-card-md);
-
-    &:hover {
-      background-color: var(--color-button-bg);
-    }
 
     &.brand-button-colors {
       background-color: var(--color-brand);

pages/_type/_id/versions.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="content card">
+  <div class="content">
-    <nuxt-link
+    <div class="card" v-if="currentMember">
-      v-if="currentMember"
+      <nuxt-link to="version/create" class="iconified-button new-version">
-      to="version/create"
-      class="iconified-button new-version"
-    >
         <UploadIcon />
         Upload
       </nuxt-link>
+    </div>
+    <VersionFilterControl
+      class="card"
+      :versions="versions"
+      @updateVersions="updateVersions"
+    />
+    <div class="card">
       <table>
         <thead>
           <tr>
@@ -18,11 +22,12 @@
           </tr>
         </thead>
         <tbody>
-        <tr v-for="version in versions" :key="version.id">
+          <tr v-for="version in filteredVersions" :key="version.id">
             <td>
               <a
                 :href="$parent.findPrimary(version).url"
                 class="download-button"
+                :class="version.version_type"
                 :title="`Download ${version.name}`"
               >
                 <DownloadIcon aria-hidden="true" />
@@ -56,7 +61,9 @@
                     color="red"
                   />
                   <span class="divider" />
-                <span class="version_number">{{ version.version_number }}</span>
+                  <span class="version_number">{{
+                    version.version_number
+                  }}</span>
                 </div>
                 <div class="mobile-info">
                   <p>
@@ -108,17 +115,20 @@
         </tbody>
       </table>
     </div>
+  </div>
 </template>
 <script>
 import UploadIcon from '~/assets/images/utils/upload.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import VersionBadge from '~/components/ui/Badge'
+import VersionFilterControl from '~/components/ui/VersionFilterControl'
 
 export default {
   components: {
     UploadIcon,
     DownloadIcon,
     VersionBadge,
+    VersionFilterControl,
   },
   auth: false,
   props: {
@@ -141,14 +151,20 @@ export default {
       },
     },
   },
+  data() {
+    return {
+      filteredVersions: this.versions,
+    }
+  },
+  methods: {
+    updateVersions(updatedVersions) {
+      this.filteredVersions = updatedVersions
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.content {
-  max-width: calc(100% - (2 * var(--spacing-card-lg)));
-}
-
 .new-version {
   max-width: 5.25rem;
 }

pages/search.vue

@@ -142,7 +142,7 @@
     <section class="normal-page__content">
       <div class="card search-controls">
         <div class="iconified-input">
-          <label class="hidden" for="search">Search Mods</label>
+          <label class="hidden" for="search">Search</label>
           <SearchIcon aria-hidden="true" />
           <input
             id="search"