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,87 +1,77 @@
 <template>
-  <div class="content card">
-    <ThisOrThat class="filters" v-model="filterMode" :items="filters" />
-    <div
-      v-for="version in versions.filter((x) => x.loaders.includes(filterMode))"
-      :key="version.id"
-    >
-      <div class="version-header">
-        <span :class="'circle ' + version.version_type" />
-        <div class="version-header-text">
-          <h2 class="name">
-            <nuxt-link
-              :to="`/${project.project_type}/${
-                project.slug ? project.slug : project.id
-              }/version/${encodeURIComponent(version.version_number)}`"
-              >{{ version.name }}</nuxt-link
+  <div class="content">
+    <VersionFilterControl
+      class="card"
+      :versions="versions"
+      @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">
+            <h2 class="name">
+              <nuxt-link
+                :to="`/${project.project_type}/${
+                  project.slug ? project.slug : project.id
+                }/version/${encodeURIComponent(version.version_number)}`"
+                >{{ version.name }}</nuxt-link
+              >
+            </h2>
+            <span v-if="members.find((x) => x.user.id === version.author_id)">
+              by
+              <nuxt-link
+                class="text-link"
+                :to="
+                  '/user/' +
+                  members.find((x) => x.user.id === version.author_id).user
+                    .username
+                "
+                >{{
+                  members.find((x) => x.user.id === version.author_id).user
+                    .username
+                }}</nuxt-link
+              >
+            </span>
+            <span>
+              on
+              {{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
             >
-          </h2>
-          <span v-if="members.find((x) => x.user.id === version.author_id)">
-            by
-            <nuxt-link
-              class="text-link"
-              :to="
-                '/user/' +
-                members.find((x) => x.user.id === version.author_id).user
-                  .username
-              "
-              >{{
-                members.find((x) => x.user.id === version.author_id).user
-                  .username
-              }}</nuxt-link
-            >
-          </span>
-          <span>
-            on {{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
+          </div>
+          <a
+            :href="$parent.findPrimary(version).url"
+            class="iconified-button download"
+            :title="`Download ${version.name}`"
           >
+            <DownloadIcon aria-hidden="true" />
+            Download
+          </a>
         </div>
-        <a
-          :href="$parent.findPrimary(version).url"
-          class="iconified-button download"
-          :title="`Download ${version.name}`"
-        >
-          <DownloadIcon aria-hidden="true" />
-          Download
-        </a>
+        <div
+          v-highlightjs
+          :class="'markdown-body ' + version.version_type"
+          v-html="
+            version.changelog
+              ? $xss($md.render(version.changelog))
+              : 'No changelog specified.'
+          "
+        />
       </div>
-      <div
-        v-highlightjs
-        :class="'markdown-body ' + version.version_type"
-        v-html="
-          version.changelog
-            ? $xss($md.render(version.changelog))
-            : 'No changelog specified.'
-        "
-      />
     </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: [],
-      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
-        }
-      }
+      filteredVersions: this.versions,
     }
   },
   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,124 +1,134 @@
 <template>
-  <div class="content card">
-    <nuxt-link
-      v-if="currentMember"
-      to="version/create"
-      class="iconified-button new-version"
-    >
-      <UploadIcon />
-      Upload
-    </nuxt-link>
-    <table>
-      <thead>
-        <tr>
-          <th role="presentation"></th>
-          <th>Version</th>
-          <th>Supports</th>
-          <th>Stats</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="version in versions" :key="version.id">
-          <td>
-            <a
-              :href="$parent.findPrimary(version).url"
-              class="download-button"
-              :title="`Download ${version.name}`"
-            >
-              <DownloadIcon aria-hidden="true" />
-            </a>
-          </td>
-          <td>
-            <div class="info">
-              <div class="top">
-                <nuxt-link
-                  :to="`/${project.project_type}/${
-                    project.slug ? project.slug : project.id
-                  }/version/${encodeURIComponent(version.version_number)}`"
-                >
-                  {{ version.name }}
-                </nuxt-link>
+  <div class="content">
+    <div class="card" v-if="currentMember">
+      <nuxt-link 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>
+            <th role="presentation"></th>
+            <th>Version</th>
+            <th>Supports</th>
+            <th>Stats</th>
+          </tr>
+        </thead>
+        <tbody>
+          <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" />
+              </a>
+            </td>
+            <td>
+              <div class="info">
+                <div class="top">
+                  <nuxt-link
+                    :to="`/${project.project_type}/${
+                      project.slug ? project.slug : project.id
+                    }/version/${encodeURIComponent(version.version_number)}`"
+                  >
+                    {{ version.name }}
+                  </nuxt-link>
+                </div>
+                <div class="bottom">
+                  <VersionBadge
+                    v-if="version.version_type === 'release'"
+                    type="release"
+                    color="green"
+                  />
+                  <VersionBadge
+                    v-else-if="version.version_type === 'beta'"
+                    type="beta"
+                    color="yellow"
+                  />
+                  <VersionBadge
+                    v-else-if="version.version_type === 'alpha'"
+                    type="alpha"
+                    color="red"
+                  />
+                  <span class="divider" />
+                  <span class="version_number">{{
+                    version.version_number
+                  }}</span>
+                </div>
+                <div class="mobile-info">
+                  <p>
+                    {{
+                      version.loaders
+                        .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                        .join(', ') +
+                      ' ' +
+                      $formatVersion(version.game_versions)
+                    }}
+                  </p>
+                  <p></p>
+                  <p>
+                    <strong>{{ $formatNumber(version.downloads) }}</strong>
+                    downloads
+                  </p>
+                  <p>
+                    Published on
+                    <strong>{{
+                      $dayjs(version.date_published).format('MMM D, YYYY')
+                    }}</strong>
+                  </p>
+                </div>
               </div>
-              <div class="bottom">
-                <VersionBadge
-                  v-if="version.version_type === 'release'"
-                  type="release"
-                  color="green"
-                />
-                <VersionBadge
-                  v-else-if="version.version_type === 'beta'"
-                  type="beta"
-                  color="yellow"
-                />
-                <VersionBadge
-                  v-else-if="version.version_type === 'alpha'"
-                  type="alpha"
-                  color="red"
-                />
-                <span class="divider" />
-                <span class="version_number">{{ version.version_number }}</span>
-              </div>
-              <div class="mobile-info">
-                <p>
-                  {{
-                    version.loaders
-                      .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-                      .join(', ') +
-                    ' ' +
-                    $formatVersion(version.game_versions)
-                  }}
-                </p>
-                <p></p>
-                <p>
-                  <strong>{{ $formatNumber(version.downloads) }}</strong>
-                  downloads
-                </p>
-                <p>
-                  Published on
-                  <strong>{{
-                    $dayjs(version.date_published).format('MMM D, YYYY')
-                  }}</strong>
-                </p>
-              </div>
-            </div>
-          </td>
-          <td>
-            <p>
-              {{
-                version.loaders
-                  .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-                  .join(', ')
-              }}
-            </p>
-            <p>{{ $formatVersion(version.game_versions) }}</p>
-          </td>
-          <td>
-            <p>
-              <span>{{ $formatNumber(version.downloads) }}</span>
-              downloads
-            </p>
-            <p>
-              Published on
-              <span>{{
-                $dayjs(version.date_published).format('MMM D, YYYY')
-              }}</span>
-            </p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            </td>
+            <td>
+              <p>
+                {{
+                  version.loaders
+                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                    .join(', ')
+                }}
+              </p>
+              <p>{{ $formatVersion(version.game_versions) }}</p>
+            </td>
+            <td>
+              <p>
+                <span>{{ $formatNumber(version.downloads) }}</span>
+                downloads
+              </p>
+              <p>
+                Published on
+                <span>{{
+                  $dayjs(version.date_published).format('MMM D, YYYY')
+                }}</span>
+              </p>
+            </td>
+          </tr>
+        </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"