fix: small type fixes + tweaks

Author: danielroe

app/components/ColumnPicker.vue

@@ -11,12 +11,16 @@ const emit = defineEmits<{
 }>()
 
 const isOpen = ref(false)
-const buttonRef = ref<HTMLButtonElement>()
+const buttonRef = useTemplateRef('buttonRef')
+const menuRef = useTemplateRef('menuRef')
 const menuId = useId()
 
-// Close on click outside
+// Close on click outside (check both button and menu)
 function handleClickOutside(event: MouseEvent) {
-  if (buttonRef.value && !buttonRef.value.contains(event.target as Node)) {
+  const target = event.target as Node
+  const isOutsideButton = buttonRef.value && !buttonRef.value.contains(target)
+  const isOutsideMenu = !menuRef.value || !menuRef.value.contains(target)
+  if (isOutsideButton && isOutsideMenu) {
     isOpen.value = false
   }
 }
@@ -89,11 +93,11 @@ function handleReset() {
     <Transition name="dropdown">
       <div
         v-if="isOpen"
+        ref="menuRef"
         :id="menuId"
         class="absolute right-0 mt-2 w-56 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
         role="group"
         :aria-label="$t('filters.columns.show')"
-        @click.stop
       >
         <div class="py-1">
           <div

app/components/FilterPanel.vue

@@ -56,41 +56,62 @@ const hasMoreKeywords = computed(() => {
 })
 
 // i18n mappings for filter options
-const scopeLabelKey: Record<string, string> = {
+const scopeLabelKeys = {
   name: 'filters.scope_name',
   description: 'filters.scope_description',
   keywords: 'filters.scope_keywords',
   all: 'filters.scope_all',
-}
+} as const
 
-const scopeDescriptionKey: Record<string, string> = {
+const scopeDescriptionKeys = {
   name: 'filters.scope_name_description',
   description: 'filters.scope_description_description',
   keywords: 'filters.scope_keywords_description',
   all: 'filters.scope_all_description',
-}
+} as const
 
-const downloadRangeLabelKey: Record<string, string> = {
+const downloadRangeLabelKeys = {
   'any': 'filters.download_range.any',
   'lt100': 'filters.download_range.lt100',
   '100-1k': 'filters.download_range.100_1k',
   '1k-10k': 'filters.download_range.1k_10k',
   '10k-100k': 'filters.download_range.10k_100k',
   'gt100k': 'filters.download_range.gt100k',
-}
+} as const
 
-const updatedWithinLabelKey: Record<string, string> = {
+const updatedWithinLabelKeys = {
   any: 'filters.updated.any',
   week: 'filters.updated.week',
   month: 'filters.updated.month',
   quarter: 'filters.updated.quarter',
   year: 'filters.updated.year',
-}
+} as const
 
-const securityLabelKey: Record<string, string> = {
+const securityLabelKeys = {
   all: 'filters.security_options.all',
   secure: 'filters.security_options.secure',
   warnings: 'filters.security_options.insecure',
+} as const
+
+// Type-safe accessor functions
+function getScopeLabelKey(value: SearchScope): string {
+  return scopeLabelKeys[value]
+}
+
+function getScopeDescriptionKey(value: SearchScope): string {
+  return scopeDescriptionKeys[value]
+}
+
+function getDownloadRangeLabelKey(value: DownloadRange): string {
+  return downloadRangeLabelKeys[value]
+}
+
+function getUpdatedWithinLabelKey(value: UpdatedWithin): string {
+  return updatedWithinLabelKeys[value]
+}
+
+function getSecurityLabelKey(value: SecurityFilter): string {
+  return securityLabelKeys[value]
 }
 
 function handleTextInput(event: Event) {
@@ -195,10 +216,10 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
                     : 'text-fg-muted hover:text-fg'
                 "
                 :aria-pressed="filters.searchScope === option.value"
-                :title="$t(scopeDescriptionKey[option.value])"
+                :title="$t(getScopeDescriptionKey(option.value))"
                 @click="emit('update:searchScope', option.value)"
               >
-                {{ $t(scopeLabelKey[option.value]) }}
+                {{ $t(getScopeLabelKey(option.value)) }}
               </button>
             </div>
           </div>
@@ -232,7 +253,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               :class="filters.downloadRange === range.value ? 'bg-fg text-bg border-fg' : ''"
               @click="emit('update:downloadRange', range.value)"
             >
-              {{ $t(downloadRangeLabelKey[range.value]) }}
+              {{ $t(getDownloadRangeLabelKey(range.value)) }}
             </button>
           </div>
         </fieldset>
@@ -257,7 +278,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               :class="filters.updatedWithin === option.value ? 'bg-fg text-bg border-fg' : ''"
               @click="emit('update:updatedWithin', option.value)"
             >
-              {{ $t(updatedWithinLabelKey[option.value]) }}
+              {{ $t(getUpdatedWithinLabelKey(option.value)) }}
             </button>
           </div>
         </fieldset>
@@ -281,7 +302,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               class="tag transition-colors duration-200 opacity-50 cursor-not-allowed"
               :class="filters.security === option.value ? 'bg-fg text-bg border-fg' : ''"
             >
-              {{ $t(securityLabelKey[option.value]) }}
+              {{ $t(getSecurityLabelKey(option.value)) }}
             </button>
           </div>
         </fieldset>

app/components/PackageList.vue

@@ -234,7 +234,7 @@ defineExpose({
       v-if="results.length === 0 && !isLoading && viewMode !== 'table'"
       class="py-12 text-center text-fg-subtle font-mono text-sm"
     >
-      No packages found
+      {{ $t('filters.table.no_packages') }}
     </p>
   </div>
 </template>

app/components/PackageListToolbar.vue

@@ -80,7 +80,7 @@ function handleToggleDirection() {
 }
 
 // Map sort key to i18n key
-const sortKeyLabelKey: Record<string, string> = {
+const sortKeyLabelKeys: Record<SortKey, string> = {
   'downloads-week': 'filters.sort.downloads_week',
   'downloads-day': 'filters.sort.downloads_day',
   'downloads-month': 'filters.sort.downloads_month',
@@ -92,6 +92,10 @@ const sortKeyLabelKey: Record<string, string> = {
   'maintenance': 'filters.sort.maintenance',
   'score': 'filters.sort.score',
 }
+
+function getSortKeyLabelKey(key: SortKey): string {
+  return sortKeyLabelKeys[key]
+}
 </script>
 
 <template>
@@ -141,7 +145,7 @@ const sortKeyLabelKey: Record<string, string> = {
                 :value="keyConfig.key"
                 :disabled="keyConfig.disabled"
               >
-                {{ $t(sortKeyLabelKey[keyConfig.key])
+                {{ $t(getSortKeyLabelKey(keyConfig.key))
                 }}{{ keyConfig.disabled ? ` (${$t('filters.columns.coming_soon')})` : '' }}
               </option>
             </select>

app/components/PackageTable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NpmSearchResult } from '~~/shared/types/npm-registry'
-import type { ColumnConfig, SortKey, SortOption } from '~~/shared/types/preferences'
+import type { ColumnConfig, ColumnId, SortKey, SortOption } from '~~/shared/types/preferences'
 import { buildSortOption, parseSortOption, toggleDirection } from '~~/shared/types/preferences'
 
 const props = defineProps<{
@@ -84,7 +84,7 @@ function toggleSort(id: string) {
 const { t } = useI18n()
 
 // Map column IDs to i18n keys
-const columnLabelKey: Record<string, string> = {
+const columnLabelKeys: Record<ColumnId, string> = {
   name: 'filters.columns.name',
   version: 'filters.columns.version',
   description: 'filters.columns.description',
@@ -98,6 +98,10 @@ const columnLabelKey: Record<string, string> = {
   combinedScore: 'filters.columns.combined_score',
   security: 'filters.columns.security',
 }
+
+function getColumnLabelKey(id: ColumnId): string {
+  return columnLabelKeys[id]
+}
 </script>
 
 <template>
@@ -126,7 +130,7 @@ const columnLabelKey: Record<string, string> = {
             @keydown.space.prevent="toggleSort('name')"
           >
             <span class="inline-flex items-center gap-1">
-              {{ $t(columnLabelKey['name']) }}
+              {{ $t(getColumnLabelKey('name')) }}
               <template v-if="isSortable('name')">
                 <span
                   v-if="isColumnSorted('name')"
@@ -144,15 +148,15 @@ const columnLabelKey: Record<string, string> = {
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
           >
-            {{ $t(columnLabelKey['version']) }}
+            {{ $t(getColumnLabelKey('version')) }}
           </th>
 
           <th
             v-if="isColumnVisible('description')"
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
           >
-            {{ $t(columnLabelKey['description']) }}
+            {{ $t(getColumnLabelKey('description')) }}
           </th>
 
           <th
@@ -177,7 +181,7 @@ const columnLabelKey: Record<string, string> = {
             @keydown.space.prevent="toggleSort('downloads')"
           >
             <span class="inline-flex items-center gap-1 justify-end">
-              {{ $t(columnLabelKey['downloads']) }}
+              {{ $t(getColumnLabelKey('downloads')) }}
               <template v-if="isSortable('downloads')">
                 <span
                   v-if="isColumnSorted('downloads')"
@@ -211,7 +215,7 @@ const columnLabelKey: Record<string, string> = {
             @keydown.space.prevent="toggleSort('updated')"
           >
             <span class="inline-flex items-center gap-1">
-              {{ $t(columnLabelKey['updated']) }}
+              {{ $t(getColumnLabelKey('updated')) }}
               <template v-if="isSortable('updated')">
                 <span
                   v-if="isColumnSorted('updated')"
@@ -229,55 +233,55 @@ const columnLabelKey: Record<string, string> = {
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
           >
-            {{ $t(columnLabelKey['maintainers']) }}
+            {{ $t(getColumnLabelKey('maintainers')) }}
           </th>
 
           <th
             v-if="isColumnVisible('keywords')"
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
           >
-            {{ $t(columnLabelKey['keywords']) }}
+            {{ $t(getColumnLabelKey('keywords')) }}
           </th>
 
           <th
             v-if="isColumnVisible('qualityScore')"
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
           >
-            {{ $t(columnLabelKey['qualityScore']) }}
+            {{ $t(getColumnLabelKey('qualityScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('popularityScore')"
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
           >
-            {{ $t(columnLabelKey['popularityScore']) }}
+            {{ $t(getColumnLabelKey('popularityScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('maintenanceScore')"
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
           >
-            {{ $t(columnLabelKey['maintenanceScore']) }}
+            {{ $t(getColumnLabelKey('maintenanceScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('combinedScore')"
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
           >
-            {{ $t(columnLabelKey['combinedScore']) }}
+            {{ $t(getColumnLabelKey('combinedScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('security')"
             scope="col"
             class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
           >
-            {{ $t(columnLabelKey['security']) }}
+            {{ $t(getColumnLabelKey('security')) }}
           </th>
         </tr>
       </thead>

app/composables/usePackageListPreferences.ts

@@ -77,7 +77,7 @@ export function usePackageListPreferences() {
   }
 
   function resetColumns() {
-    preferences.value.columns = [...DEFAULT_COLUMNS]
+    preferences.value.columns = DEFAULT_COLUMNS.map(col => ({ ...col }))
     save()
   }
 

app/composables/useStructuredFilters.ts

@@ -50,6 +50,8 @@ export function parseSearchOperators(input: string): ParsedSearchOperators {
 
   while ((match = operatorRegex.exec(input)) !== null) {
     const [fullMatch, operator, value] = match
+    if (!operator || !value) continue
+
     const values = value
       .split(',')
       .map(v => v.trim())

app/pages/search.vue

@@ -177,21 +177,22 @@ const {
   setSort,
 } = useStructuredFilters({
   packages: resultsArray,
-  initialSort: 'score', // Default to search relevance (combined score)
+  initialSort: 'score-desc', // Default to search relevance (combined score)
 })
 
 // Client-side filtered/sorted results for display
 const displayResults = computed(() => {
-  // Only apply client-side filtering if filters are active
+  // Check if any client-side filters are active (including text filter from filter panel)
   const hasActiveClientFilters =
+    filters.value.text !== '' ||
     filters.value.downloadRange !== 'any' ||
     filters.value.keywords.length > 0 ||
     filters.value.security !== 'all' ||
     filters.value.updatedWithin !== 'any'
 
-  // Don't apply text filter here as that's the main search query
-  if (!hasActiveClientFilters && sortOption.value === 'score') {
-    // Return original server-sorted results
+  // When using default score sort (search relevance) and no client filters,
+  // return original server-sorted results to preserve search ranking
+  if (!hasActiveClientFilters && sortOption.value === 'score-desc') {
     return resultsArray.value
   }