refactor: move versions to the left

app/services/packages_fetcher.ts

@@ -91,7 +91,7 @@ export class PackagesFetcher {
    * Filter packages based on the given versions
    * Each package have a `compatibility` property that is semver compatible
    */
-  #filterByVersions<T extends PackageInfo>(packages: T[], versions: string[]) {
+  #filterByVersions<T extends PackageInfo>(packages: T[], version: string) {
     const specifiersRegex = /[\^~]/g
     return packages.filter((pkg) => {
       // Some packages don't have compatibility
@@ -103,7 +103,7 @@ export class PackagesFetcher {
       // Remove ^ and ~ from the version
       const cleanVersion = pkgVersions.map((v) => v.replace(specifiersRegex, ''))
 
-      return cleanVersion.some((v) => versions.some((version) => version.startsWith(v)))
+      return cleanVersion.some((v) => v.startsWith(version))
     })
   }
 
@@ -140,7 +140,7 @@ export class PackagesFetcher {
      */
     if (options.category) packages = packages.filter((pkg) => pkg.category === options.category)
     if (options.parties) packages = packages.filter((pkg) => options.parties!.includes(pkg.type))
-    if (options.versions) packages = this.#filterByVersions(packages, options.versions)
+    if (options.version) packages = this.#filterByVersions(packages, options.version)
     if (options.search) packages = this.#filterBySearch(packages, options.search)
 
     /**

app/validators/main.ts

@@ -14,7 +14,7 @@ export const getHomeValidator = vine.compile(
     page: vine.number().optional(),
     category: vine.enum(categories.map((category) => category.label)).optional(),
     search: vine.string().optional(),
-    versions: vine.array(vine.enum(['5', '6'])).optional(),
+    version: vine.enum(['5', '6']).optional(),
     parties: vine.array(vine.enum(['3rd-party', 'official'])).optional(),
     order: vine
       .enum(['-1', '1'])

resources/pages/home/components/filters.vue

@@ -3,22 +3,51 @@ import type { PackageCategories, PackageCategory } from '@/types'
 
 const props = defineProps<{
   categories: PackageCategories
+  versions: Array<{ icon: string; label: string; value: string; color: string; subline: string }>
 }>()
 
-const model = defineModel<PackageCategory | null>()
-
-function handleCategoryClick(selection: PackageCategory) {
-  if (model.value === selection) {
-    model.value = null
-    return
-  }
-
-  model.value = selection
-}
+const categoryModel = defineModel<PackageCategory | null>('category')
+const versionModel = defineModel<string | null>('version')
 </script>
 
 <template>
   <div class="hidden flex-col gap-y-8" md="flex">
+    <div>
+      <p class="text-3xl font-bold">Version</p>
+      <div class="mt-6 flex gap-x-6">
+        <div class="flex flex-col gap-y-4 font-content">
+          <button
+            v-for="version in versions"
+            :key="version.value"
+            class="group flex cursor-pointer items-center gap-x-4 text-left transition-all duration-200 ease-in-out"
+            hover="translate-x-2"
+            data-testid="category-button"
+            @click="versionModel = versionModel === version.value ? null : version.value"
+          >
+            <div
+              class="flex items-center rounded-xl px-2.4 py-2 text-sm transition-colors duration-500"
+              :class="[
+                versionModel === version.value ? version.color : 'bg-base2',
+                `group-hover:${version.color}`,
+              ]"
+            >
+              <i
+                class="inline-block group-hover:text-base12"
+                :class="[
+                  version.icon,
+                  versionModel !== version.label ? 'text-base12' : 'text-base12',
+                ]"
+              />
+            </div>
+            <div>
+              <p data-testid="category-label" class="text-base12">{{ version.label }}</p>
+              <p class="text-xs text-base10">{{ version.subline }}</p>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+
     <div>
       <p class="text-3xl font-bold">Categories</p>
       <div class="mt-6 flex gap-x-6">
@@ -29,20 +58,20 @@ function handleCategoryClick(selection: PackageCategory) {
             class="group flex cursor-pointer items-center gap-x-4 text-left transition-all duration-200 ease-in-out"
             hover="translate-x-2"
             data-testid="category-button"
-            @click="handleCategoryClick(category.label)"
+            @click="categoryModel = categoryModel === category.label ? null : category.label"
           >
             <div
               class="flex items-center rounded-xl px-2.4 py-2 text-sm transition-colors duration-500"
               :class="[
-                modelValue === category.label ? category.color : 'bg-base2',
+                categoryModel === category.label ? category.color : 'bg-base2',
                 `group-hover:${category.color}`,
               ]"
             >
               <i
                 class="inline-block group-hover:text-base12"
                 :class="[
                   category.icon,
-                  modelValue !== category.label ? 'text-base12' : 'text-base12',
+                  categoryModel !== category.label ? 'text-base12' : 'text-base12',
                 ]"
               />
             </div>

resources/pages/home/main.vue

@@ -78,10 +78,22 @@ const orderBy = ref<string>(params.orderBy || orderByOptions[0].value)
  * Package versions
  */
 const versionsOptions = [
-  { value: '6', label: 'v6' },
-  { value: '5', label: 'v5' },
+  {
+    value: '6',
+    label: 'AdonisJS 6',
+    color: 'bg-purple5 group-hover:bg-purple5',
+    icon: 'i-mynaui-six-hexagon',
+    subline: 'Compatible with AdonisJS 6',
+  },
+  {
+    value: '5',
+    label: 'AdonisJS 5',
+    color: 'bg-violet5 group-hover:bg-violet5',
+    icon: 'i-mynaui-five-hexagon',
+    subline: 'Compatible with AdonisJS 5',
+  },
 ]
-const selectedVersions = ref<string[]>((params.versions as string[]) ?? [])
+const selectedVersion = ref<string | null>(null)
 
 /**
  * Package parties
@@ -95,7 +107,7 @@ const selectedParties = ref<ModuleType[]>((params.parties as ModuleType[]) ?? []
 /**
  * Refetch when any of the filters change
  */
-watch([selectedParties, order, orderBy, selectedVersions, category], () => fetchNewPageData(1))
+watch([selectedParties, order, orderBy, selectedVersion, category], () => fetchNewPageData(1))
 
 function fetchNewPageData(page: number) {
   router.get(
@@ -104,7 +116,7 @@ function fetchNewPageData(page: number) {
       page,
       category: category.value,
       search: search.value,
-      versions: selectedVersions.value,
+      version: selectedVersion.value,
       parties: selectedParties.value,
       order: order.value,
       orderBy: orderBy.value,
@@ -129,7 +141,12 @@ function fetchNewPageData(page: number) {
       <div class="p-container">
         <div class="items-start gap-4 2xl:gap-12" md="grid grid-cols-[18em_1fr]">
           <!-- Category filters -->
-          <Filters v-model="category" :categories="categories" />
+          <Filters
+            v-model:category="category"
+            v-model:version="selectedVersion"
+            :categories="categories"
+            :versions="versionsOptions"
+          />
 
           <!-- Search, version and party filters and sort -->
           <div class="w-full flex flex-col">
@@ -148,13 +165,6 @@ function fetchNewPageData(page: number) {
                   placeholder="Select a category"
                 />
 
-                <SelectMenu
-                  v-model="selectedVersions"
-                  :options="versionsOptions"
-                  multiple
-                  placeholder="Select a version"
-                />
-
                 <SelectMenu
                   v-model="selectedParties"
                   :options="partiesOptions"

types/packages.ts

@@ -112,7 +112,7 @@ export type PackagesFilters = {
   search: string
   order: SortOrder
   orderBy: 'name' | 'downloads' | 'stars' | 'updated' | 'created'
-  versions: ('5' | '6')[]
+  version?: '5' | '6'
   parties: ModuleType[]
   page: number
 }