From fdd92d42dbe82fc5bf4661c5def8ae592360c87f Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 09:11:42 +0000
Subject: [PATCH 1/9] fix: prevent reloading in search form

---
 app/components/Header/SearchBox.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index df13dcdc85..f8fa724e5a 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -79,6 +79,10 @@ function handleSearchFocus() {
   emit('focus')
 }
 
+function handleSubmit() {
+  updateUrlQuery.flush()
+}
+
 // Expose focus method for parent components
 const inputRef = shallowRef<HTMLInputElement | null>(null)
 function focus() {
@@ -88,7 +92,7 @@ defineExpose({ focus })
 </script>
 <template>
   <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">
-    <form method="GET" action="/search" class="relative">
+    <form method="GET" action="/search" class="relative" @submit.prevent="handleSubmit">
       <label for="header-search" class="sr-only">
         {{ $t('search.label') }}
       </label>

From 6b6fccfffaaa11337522d259a6dfa7c899b6fe2a Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 09:15:47 +0000
Subject: [PATCH 2/9] fix: make zone under tags clickable

---
 app/components/Package/Card.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 867a10f8d9..c6909a16cc 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -163,9 +163,13 @@ const pkgDescription = useMarkdown(() => ({
     <ul
       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"
+      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 v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword" class="tag">
+      <li
+        v-for="keyword in result.package.keywords.slice(0, 5)"
+        :key="keyword"
+        class="tag pointer-events-auto"
+      >
         {{ keyword }}
       </li>
     </ul>

From 68ae9df1ab80904e41ae7682888f4ae2a7bbc8c0 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 09:54:53 +0000
Subject: [PATCH 3/9] fix: prevent reloading on search form in orgs page

---
 app/components/Header/SearchBox.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index f8fa724e5a..132fc6f2f2 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -80,7 +80,16 @@ function handleSearchFocus() {
 }
 
 function handleSubmit() {
-  updateUrlQuery.flush()
+  if (pagesWithLocalFilter.has(route.name as string)) {
+    router.push({
+      name: 'search',
+      query: {
+        q: searchQuery.value,
+      },
+    })
+  } else {
+    updateUrlQuery.flush()
+  }
 }
 
 // Expose focus method for parent components

From 8b420ad293173257a0ba5ef7603a31a00c879b88 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 09:57:25 +0000
Subject: [PATCH 4/9] fix: disable sorting in table in general search page

---
 app/components/Package/List.vue | 8 +++++++-
 app/pages/search.vue            | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 18707fb870..996e4fb498 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -39,6 +39,8 @@ const props = defineProps<{
   paginationMode?: PaginationMode
   /** Current page (1-indexed) for paginated mode */
   currentPage?: number
+  /** When true, shows search-specific UI (relevance sort, no filters) */
+  searchContext?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -60,7 +62,11 @@ const sortOption = defineModel<SortOption>('sortOption')
 
 // View mode and columns
 const viewMode = computed(() => props.viewMode ?? 'cards')
-const columns = computed(() => props.columns ?? DEFAULT_COLUMNS)
+const columns = computed(() => {
+  const targetColumns = props.columns ?? DEFAULT_COLUMNS
+  if (props.searchContext) return targetColumns.map(column => ({ ...column, sortable: false }))
+  return targetColumns
+})
 // Table view forces pagination mode (no virtualization for tables)
 const paginationMode = computed(() =>
   viewMode.value === 'table' ? 'paginated' : (props.paginationMode ?? 'infinite'),
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 352d137090..f4dc00ecee 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -737,6 +737,7 @@ defineOgImageComponent('Default', {
             v-if="displayResults.length > 0"
             :results="displayResults"
             :search-query="query"
+            search-context
             heading-level="h2"
             show-publisher
             :has-more="hasMore"

From 5b0d1737e7ea663502fe747a8879af63ae6c779e Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 10:56:06 +0000
Subject: [PATCH 5/9] feat: fix and improve keywords search and navigation

---
 app/composables/useStructuredFilters.ts | 19 +++++++++++++++++++
 app/pages/@[org].vue                    |  2 +-
 app/pages/search.vue                    |  3 +++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/composables/useStructuredFilters.ts b/app/composables/useStructuredFilters.ts
index 03c0b7f05d..c9af5e1727 100644
--- a/app/composables/useStructuredFilters.ts
+++ b/app/composables/useStructuredFilters.ts
@@ -113,8 +113,21 @@ function matchesSecurity(pkg: NpmSearchResult, security: SecurityFilter): boolea
  *
  */
 export function useStructuredFilters(options: UseStructuredFiltersOptions) {
+  const route = useRoute()
+  const router = useRouter()
   const { packages, initialFilters, initialSort } = options
 
+  const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
+  watch(
+    () => route.query.q,
+    urlQuery => {
+      const value = normalizeSearchParam(urlQuery)
+      if (searchQuery.value !== value) {
+        searchQuery.value = value
+      }
+    },
+  )
+
   // Filter state
   const filters = ref<StructuredFilters>({
     ...DEFAULT_FILTERS,
@@ -366,11 +379,17 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
   function addKeyword(keyword: string) {
     if (!filters.value.keywords.includes(keyword)) {
       filters.value.keywords = [...filters.value.keywords, keyword]
+      const newQ = searchQuery.value
+        ? `${searchQuery.value.trim()} keyword:${keyword}`
+        : `keyword:${keyword}`
+      router.replace({ query: { ...route.query, q: newQ } })
     }
   }
 
   function removeKeyword(keyword: string) {
     filters.value.keywords = filters.value.keywords.filter(k => k !== keyword)
+    const newQ = searchQuery.value.replace(new RegExp(`keyword:${keyword}($| )`, 'g'), '').trim()
+    router.replace({ query: { ...route.query, q: newQ || undefined } })
   }
 
   function toggleKeyword(keyword: string) {
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index b9057b012b..ace6c89be2 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -52,7 +52,7 @@ const {
 } = useStructuredFilters({
   packages,
   initialFilters: {
-    text: normalizeSearchParam(route.query.q),
+    ...parseSearchOperators(normalizeSearchParam(route.query.q)),
   },
   initialSort: (normalizeSearchParam(route.query.sort) as SortOption) ?? 'updated-desc',
 })
diff --git a/app/pages/search.vue b/app/pages/search.vue
index f4dc00ecee..e98da10afa 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -142,6 +142,9 @@ const {
   clearAllFilters,
 } = useStructuredFilters({
   packages: resultsArray,
+  initialFilters: {
+    ...parseSearchOperators(normalizeSearchParam(route.query.q)),
+  },
   initialSort: 'relevance-desc', // Default to search relevance
 })
 

From a4c41281dc0ec4a4957e3ea595374ae562ea2b0b Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 11:24:23 +0000
Subject: [PATCH 6/9] feat: improve keywords navigation and ui

---
 app/components/Package/Card.vue     | 22 +++++++++++++++++-----
 app/components/Package/List.vue     |  9 +++++++++
 app/components/Package/Table.vue    | 10 +++++++++-
 app/components/Package/TableRow.vue | 10 ++++++++--
 app/pages/@[org].vue                |  1 +
 app/pages/search.vue                |  1 +
 6 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index c6909a16cc..3f13524e9a 100644
--- a/app/components/Package/Card.vue
+++ b/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>
diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 996e4fb498..92fa300c0b 100644
--- a/app/components/Package/List.vue
+++ b/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>
diff --git a/app/components/Package/Table.vue b/app/components/Package/Table.vue
index a2b08e589b..76fc688206 100644
--- a/app/components/Package/Table.vue
+++ b/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>
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 2311a402d5..40e25e0ec9 100644
--- a/app/components/Package/TableRow.vue
+++ b/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)"
         >
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index ace6c89be2..be69f307b5 100644
--- a/app/pages/@[org].vue
+++ b/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"
diff --git a/app/pages/search.vue b/app/pages/search.vue
index e98da10afa..def113f99a 100644
--- a/app/pages/search.vue
+++ b/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

From d983246c65a845e46c1136edb14d03df53013119 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 12:05:08 +0000
Subject: [PATCH 7/9] feat: fix keywords border

---
 app/components/Package/Card.vue     | 2 +-
 app/components/Package/TableRow.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 0ac9f73989..425e2bc160 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -166,7 +166,7 @@ const pkgDescription = useMarkdown(() => ({
         v-for="keyword in result.package.keywords.slice(0, 5)"
         :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 pointer-events-auto"
+        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 border-solid 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)"
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 40e25e0ec9..e18fab07ca 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -127,7 +127,7 @@ const allMaintainersText = computed(() => {
           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="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 border-solid"
           :class="{ 'bg-fg text-bg hover:opacity-80': props.filters?.keywords.includes(keyword) }"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"

From 3bb79a2c8842688e7e531e53ff64f9ff04a536aa Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 13:01:54 +0000
Subject: [PATCH 8/9] feat: add and improve more-keywords badge

---
 app/components/Package/Card.vue     | 7 +++++++
 app/components/Package/TableRow.vue | 6 +++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 425e2bc160..22ef0f0ab6 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -173,6 +173,13 @@ const pkgDescription = useMarkdown(() => ({
       >
         {{ keyword }}
       </button>
+      <span
+        v-if="result.package.keywords.length > 5"
+        class="tag text-fg-subtle text-xs border-none bg-transparent pointer-events-auto"
+        :title="result.package.keywords.slice(5).join(', ')"
+      >
+        +{{ result.package.keywords.length - 5 }}
+      </span>
     </div>
   </BaseCard>
 </template>
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index e18fab07ca..a00d728994 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -134,7 +134,11 @@ const allMaintainersText = computed(() => {
         >
           {{ keyword }}
         </button>
-        <span v-if="pkg.keywords.length > 3" class="text-fg-subtle text-xs">
+        <span
+          v-if="pkg.keywords.length > 3"
+          class="tag text-fg-subtle text-xs border-none bg-transparent"
+          :title="pkg.keywords.slice(3).join(', ')"
+        >
           +{{ pkg.keywords.length - 3 }}
         </span>
       </div>

From 5d0c5a30752e3e067bb341b7ae73bf72a62ea658 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 2 Feb 2026 14:20:04 +0000
Subject: [PATCH 9/9] feat: improve keywords query param in orgs page

---
 app/pages/@[org].vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index be69f307b5..b4b79fa889 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -91,9 +91,15 @@ const updateUrl = debounce((updates: { filter?: string; sort?: string }) => {
 }, 300)
 
 // Update URL when filter/sort changes (debounced)
-watch([() => filters.value.text, sortOption], ([filter, sort]) => {
-  updateUrl({ filter, sort })
-})
+watch(
+  [() => filters.value.text, () => filters.value.keywords, () => sortOption.value] as const,
+  ([text, keywords, sort]) => {
+    const filter = [text, ...keywords.map(keyword => `keyword:${keyword}`)]
+      .filter(Boolean)
+      .join(' ')
+    updateUrl({ filter, sort })
+  },
+)
 
 const filteredCount = computed(() => sortedPackages.value.length)