feat: add official package btn

app/services/packages_fetcher.ts

@@ -139,7 +139,7 @@ export class PackagesFetcher {
      * Filter them based on the given options
      */
     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.officialOnly) packages = packages.filter((pkg) => pkg.type === 'official')
     if (options.version) packages = this.#filterByVersions(packages, options.version)
     if (options.search) packages = this.#filterBySearch(packages, options.search)
 

app/validators/main.ts

@@ -15,7 +15,7 @@ export const getHomeValidator = vine.compile(
     category: vine.enum(categories.map((category) => category.label)).optional(),
     search: vine.string().optional(),
     version: vine.enum(['5', '6']).optional(),
-    parties: vine.array(vine.enum(['3rd-party', 'official'])).optional(),
+    officialOnly: vine.boolean().optional(),
     order: vine
       .enum(['-1', '1'])
       .transform((value) => Number(value) as SortOrder)

resources/pages/home/components/button_group.vue

@@ -5,7 +5,7 @@ provide('group', true)
 </script>
 
 <template>
-  <div class="flex flex-row rounded-xl bg-base2 divide-x divide-zinc-700">
+  <div class="flex flex-row rounded-xl bg-base2 divide-x divide-zinc-800">
     <slot />
   </div>
 </template>

resources/pages/home/components/order.vue

@@ -7,11 +7,14 @@ const group = inject<boolean>('group', false)
 
 <template>
   <button
-    class="flex items-center px-3 py-2 text-base12 shadow-sm focus:(outline-0 ring-0)"
+    class="flex items-center px-3 py-2 text-sm text-base11 shadow-sm focus:(outline-0 ring-0)"
     :class="{ 'bg-base2 rounded-xl': !group }"
     :aria-label="order === 1 ? 'Sort by descending order' : 'Sort by ascending order'"
     @click="order = order === 1 ? -1 : 1"
   >
-    <i :class="order === 1 ? 'i-carbon-arrow-up' : 'i-carbon-arrow-down'" class="inline-block" />
+    <i
+      :class="order === 1 ? 'i-carbon-sort-ascending' : 'i-carbon-sort-descending'"
+      class="inline-block text-sm"
+    />
   </button>
 </template>

resources/pages/home/main.vue

@@ -14,7 +14,6 @@ import MainSection from './components/main_section.vue'
 import ButtonGroup from './components/button_group.vue'
 import type {
   GetHomeResponse,
-  ModuleType,
   PackageCategories,
   PackageCategory,
   PackagesFilters,
@@ -93,33 +92,27 @@ const versionsOptions = [
     subline: 'Compatible with AdonisJS 5',
   },
 ]
-const selectedVersion = ref<string | null>(null)
 
-/**
- * Package parties
- */
-const partiesOptions = [
-  { value: 'official', label: 'Official' },
-  { value: '3rd-party', label: '3rd Party' },
-]
-const selectedParties = ref<ModuleType[]>((params.parties as ModuleType[]) ?? [])
+const selectedVersion = ref<string | null>(params.version || null)
+
+const officialPackagesOnly = ref<boolean>(params.officialOnly)
 
 /**
  * Refetch when any of the filters change
  */
-watch([selectedParties, order, orderBy, selectedVersion, category], () => fetchNewPageData(1))
+watch([officialPackagesOnly, order, orderBy, selectedVersion, category], () => fetchNewPageData(1))
 
 function fetchNewPageData(page: number) {
   router.get(
     '/',
     {
       page,
-      category: category.value,
-      search: search.value,
-      version: selectedVersion.value,
-      parties: selectedParties.value,
       order: order.value,
+      search: search.value,
       orderBy: orderBy.value,
+      category: category.value,
+      version: selectedVersion.value,
+      officialOnly: officialPackagesOnly.value,
     },
     { preserveState: true, preserveScroll: true },
   )
@@ -160,22 +153,33 @@ function fetchNewPageData(page: number) {
               <div class="flex flex-row flex-wrap gap-2">
                 <SelectMenu
                   v-model="category"
-                  class="w-48 md:hidden"
+                  class="w-full md:hidden"
                   :options="categoriesOptions"
                   placeholder="Select a category"
                 />
 
-                <SelectMenu
-                  v-model="selectedParties"
-                  :options="partiesOptions"
-                  multiple
-                  placeholder="Select a party"
-                />
-
-                <ButtonGroup>
+                <button
+                  theme="primary"
+                  size="s"
+                  class="flex items-center justify-center rounded-xl bg-base2 px-4 text-base shadow-sm transition-all space-x-2 hover:(bg-base3 shadow-md)"
+                  :class="{
+                    'bg-base shadow-md': officialPackagesOnly,
+                  }"
+                  @click="officialPackagesOnly = !officialPackagesOnly"
+                >
+                  <i class="i-fluent-emoji-military-medal inline-block text-xl" />
+                  <p v-if="officialPackagesOnly" class="text-sm text-base11">Official packages</p>
+                </button>
+
+                <ButtonGroup class="flex-1" md="flex-auto">
                   <Order v-model="order" />
 
-                  <SelectMenu v-model="orderBy" :options="orderByOptions" placeholder="Order by" />
+                  <SelectMenu
+                    v-model="orderBy"
+                    class="flex-1"
+                    :options="orderByOptions"
+                    placeholder="Order by"
+                  />
                 </ButtonGroup>
               </div>
             </div>

types/packages.ts

@@ -113,7 +113,7 @@ export type PackagesFilters = {
   order: SortOrder
   orderBy: 'name' | 'downloads' | 'stars' | 'updated' | 'created'
   version?: '5' | '6'
-  parties: ModuleType[]
+  officialOnly: boolean
   page: number
 }