Merge remote-tracking branch 'origin/main' into chore/ignore-internal-http-message

Author: danielroe

.github/workflows/provenance.yml

@@ -14,7 +14,7 @@ permissions:
   contents: read
 jobs:
   check-provenance:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-slim
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:

.github/workflows/semantic-pull-requests.yml

@@ -16,7 +16,7 @@ jobs:
       pull-requests: read # for amannn/action-semantic-pull-request to analyze PRs
       statuses: write # for amannn/action-semantic-pull-request to mark status of analyzed PR
     if: github.repository == 'npmx-dev/npmx.dev'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-slim
     name: semantic-pr
     steps:
       - name: Validate PR title

app/components/AppHeader.vue

@@ -19,7 +19,7 @@ const showMobileMenu = shallowRef(false)
 const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
-const searchBoxRef = shallowRef<{ focus: () => void } | null>(null)
+const searchBoxRef = useTemplateRef('searchBoxRef')
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')

app/components/CallToAction.vue

@@ -12,12 +12,12 @@ const socialLinks = {
       {{ $t('about.get_involved.title') }}
     </h2>
 
-    <div class="grid gap-4 sm:grid-cols-3">
+    <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
       <a
         :href="socialLinks.github"
         target="_blank"
         rel="noopener noreferrer"
-        class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
       >
         <div class="flex gap-2">
           <span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
@@ -40,7 +40,7 @@ const socialLinks = {
         :href="socialLinks.discord"
         target="_blank"
         rel="noopener noreferrer"
-        class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
       >
         <div class="flex gap-2">
           <span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
@@ -63,7 +63,7 @@ const socialLinks = {
         :href="socialLinks.bluesky"
         target="_blank"
         rel="noopener noreferrer"
-        class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
       >
         <div class="flex gap-2">
           <span class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />

app/components/Filter/Panel.vue

@@ -8,8 +8,8 @@ import type {
 } from '#shared/types/preferences'
 import {
   DOWNLOAD_RANGES,
-  SEARCH_SCOPE_OPTIONS,
-  SECURITY_FILTER_OPTIONS,
+  SEARCH_SCOPE_VALUES,
+  SECURITY_FILTER_VALUES,
   UPDATED_WITHIN_OPTIONS,
 } from '#shared/types/preferences'
 
@@ -205,20 +205,20 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               :aria-label="$t('filters.search_scope')"
             >
               <button
-                v-for="option in SEARCH_SCOPE_OPTIONS"
-                :key="option.value"
+                v-for="scope in SEARCH_SCOPE_VALUES"
+                :key="scope"
                 type="button"
                 class="px-2 py-0.5 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
                 :class="
-                  filters.searchScope === option.value
+                  filters.searchScope === scope
                     ? 'bg-bg-muted text-fg'
                     : 'text-fg-muted hover:text-fg'
                 "
-                :aria-pressed="filters.searchScope === option.value"
-                :title="$t(getScopeDescriptionKey(option.value))"
-                @click="emit('update:searchScope', option.value)"
+                :aria-pressed="filters.searchScope === scope"
+                :title="$t(getScopeDescriptionKey(scope))"
+                @click="emit('update:searchScope', scope)"
               >
-                {{ $t(getScopeLabelKey(option.value)) }}
+                {{ $t(getScopeLabelKey(scope)) }}
               </button>
             </div>
           </div>
@@ -301,18 +301,18 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
           </legend>
           <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
             <button
-              v-for="option in SECURITY_FILTER_OPTIONS"
-              :key="option.value"
+              v-for="security in SECURITY_FILTER_VALUES"
+              :key="security"
               type="button"
               role="radio"
               disabled
-              :aria-checked="filters.security === option.value"
+              :aria-checked="filters.security === security"
               class="tag transition-colors duration-200 opacity-50 cursor-not-allowed focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
               :class="
-                filters.security === option.value ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
+                filters.security === security ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
               "
             >
-              {{ $t(getSecurityLabelKey(option.value)) }}
+              {{ $t(getSecurityLabelKey(security)) }}
             </button>
           </div>
         </fieldset>

app/components/Header/SearchBox.vue

@@ -79,16 +79,29 @@ function handleSearchFocus() {
   emit('focus')
 }
 
+function handleSubmit() {
+  if (pagesWithLocalFilter.has(route.name as string)) {
+    router.push({
+      name: 'search',
+      query: {
+        q: searchQuery.value,
+      },
+    })
+  } else {
+    updateUrlQuery.flush()
+  }
+}
+
 // Expose focus method for parent components
-const inputRef = shallowRef<HTMLInputElement | null>(null)
+const inputRef = useTemplateRef('inputRef')
 function focus() {
   inputRef.value?.focus()
 }
 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>

app/components/Modal.client.vue

@@ -3,7 +3,7 @@ const props = defineProps<{
   modalTitle: string
 }>()
 
-const dialogRef = ref<HTMLDialogElement>()
+const dialogRef = useTemplateRef('dialogRef')
 
 const modalTitleId = computed(() => {
   const id = getCurrentInstance()?.attrs.id

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
@@ -149,14 +157,29 @@ 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"
+      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">
+      <button
+        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 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)"
+      >
         {{ keyword }}
-      </li>
-    </ul>
+      </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>

app/components/Package/ClaimPackageModal.vue

@@ -96,7 +96,7 @@ async function handleClaim() {
   }
 }
 
-const dialogRef = ref<HTMLDialogElement>()
+const dialogRef = useTemplateRef('dialogRef')
 
 function open() {
   // Reset state and check availability each time modal is opened

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 */
@@ -39,6 +41,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 +64,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'),
@@ -147,6 +155,7 @@ defineExpose({
     <template v-if="viewMode === 'table'">
       <PackageTable
         :results="displayedResults"
+        :filters="filters"
         :columns="columns"
         v-model:sort-option="sortOption"
         :is-loading="isLoading"
@@ -176,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>
@@ -193,6 +204,8 @@ defineExpose({
                   :show-publisher="showPublisher"
                   :index="index"
                   :search-query="searchQuery"
+                  :filters="filters"
+                  @click-keyword="emit('clickKeyword', $event)"
                 />
               </div>
             </li>
@@ -225,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>