feat: improve keywords navigation and ui

Author: alexdln

app/components/Package/Card.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { StructuredFilters } from '#shared/types/preferences'
+
 const props = defineProps<{
   /** The search result object containing package data */
   result: NpmSearchResult
@@ -8,10 +10,16 @@ const props = defineProps<{
   showPublisher?: boolean
   prefetch?: boolean
   index?: number
+  /** Filters to apply to the results */
+  filters?: StructuredFilters
   /** Search query for highlighting exact matches */
   searchQuery?: string
 }>()
 
+const emit = defineEmits<{
+  clickKeyword: [keyword: string]
+}>()
+
 /** Check if this package is an exact match for the search query */
 const isExactMatch = computed(() => {
   if (!props.searchQuery) return false
@@ -160,18 +168,22 @@ const pkgDescription = useMarkdown(() => ({
       </div>
     </div>
 
-    <ul
+    <div
       v-if="result.package.keywords?.length"
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none"
     >
-      <li
+      <button
         v-for="keyword in result.package.keywords.slice(0, 5)"
         :key="keyword"
-        class="tag pointer-events-auto"
+        type="button"
+        class="tag text-xs hover:bg-fg hover:text-bg hover:border-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1 pointer-events-auto"
+        :class="{ 'bg-fg text-bg hover:opacity-80': props.filters?.keywords.includes(keyword) }"
+        :title="`Filter by ${keyword}`"
+        @click.stop="emit('clickKeyword', keyword)"
       >
         {{ keyword }}
-      </li>
-    </ul>
+      </button>
+    </div>
   </article>
 </template>

app/components/Package/List.vue

@@ -17,6 +17,8 @@ const SSR_COUNT = 20
 const props = defineProps<{
   /** List of search results to display */
   results: NpmSearchResult[]
+  /** Filters to apply to the results */
+  filters?: StructuredFilters
   /** Heading level for package names */
   headingLevel?: 'h2' | 'h3'
   /** Whether to show publisher username on cards */
@@ -153,6 +155,7 @@ defineExpose({
     <template v-if="viewMode === 'table'">
       <PackageTable
         :results="displayedResults"
+        :filters="filters"
         :columns="columns"
         v-model:sort-option="sortOption"
         :is-loading="isLoading"
@@ -182,7 +185,9 @@ defineExpose({
                 :index="index"
                 :search-query="searchQuery"
                 class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
+                :filters="filters"
                 :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
+                @click-keyword="emit('clickKeyword', $event)"
               />
             </div>
           </template>
@@ -199,6 +204,8 @@ defineExpose({
                   :show-publisher="showPublisher"
                   :index="index"
                   :search-query="searchQuery"
+                  :filters="filters"
+                  @click-keyword="emit('clickKeyword', $event)"
                 />
               </div>
             </li>
@@ -231,6 +238,8 @@ defineExpose({
             :search-query="searchQuery"
             class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
             :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
+            :filters="filters"
+            @click-keyword="emit('clickKeyword', $event)"
           />
         </li>
       </ol>

app/components/Package/Table.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 import type { NpmSearchResult } from '#shared/types/npm-registry'
-import type { ColumnConfig, ColumnId, SortKey, SortOption } from '#shared/types/preferences'
+import type {
+  ColumnConfig,
+  ColumnId,
+  SortKey,
+  SortOption,
+  StructuredFilters,
+} from '#shared/types/preferences'
 import { buildSortOption, parseSortOption, toggleDirection } from '#shared/types/preferences'
 
 const props = defineProps<{
   results: NpmSearchResult[]
   columns: ColumnConfig[]
+  filters?: StructuredFilters
   isLoading?: boolean
 }>()
 
@@ -317,6 +324,7 @@ function getColumnLabelKey(id: ColumnId): string {
             :result="result"
             :columns="columns"
             :index="index"
+            :filters="filters"
             @click-keyword="emit('clickKeyword', $event)"
           />
         </template>

app/components/Package/TableRow.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { NpmSearchResult } from '#shared/types/npm-registry'
-import type { ColumnConfig } from '#shared/types/preferences'
+import type { ColumnConfig, StructuredFilters } from '#shared/types/preferences'
 
 const props = defineProps<{
   result: NpmSearchResult
   columns: ColumnConfig[]
   index?: number
+  filters?: StructuredFilters
 }>()
 
 const emit = defineEmits<{
@@ -117,12 +118,17 @@ const allMaintainersText = computed(() => {
 
     <!-- Keywords -->
     <td v-if="isColumnVisible('keywords')" class="py-2 px-3">
-      <div v-if="pkg.keywords?.length" class="flex flex-wrap gap-1">
+      <div
+        v-if="pkg.keywords?.length"
+        class="flex flex-wrap gap-1"
+        :aria-label="$t('package.card.keywords')"
+      >
         <button
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
           type="button"
           class="tag text-xs hover:bg-fg hover:text-bg hover:border-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          :class="{ 'bg-fg text-bg hover:opacity-80': props.filters?.keywords.includes(keyword) }"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
         >

app/pages/@[org].vue

@@ -282,6 +282,7 @@ defineOgImageComponent('Default', {
           :results="sortedPackages"
           :view-mode="viewMode"
           :columns="columns"
+          :filters="filters"
           v-model:sort-option="sortOption"
           :pagination-mode="paginationMode"
           :page-size="pageSize"

app/pages/search.vue

@@ -740,6 +740,7 @@ defineOgImageComponent('Default', {
             v-if="displayResults.length > 0"
             :results="displayResults"
             :search-query="query"
+            :filters="filters"
             search-context
             heading-level="h2"
             show-publisher