Improve trends chart, exports, and responsive navigation

Author: pastelsky

__tests__/trendsRecommendations.test.ts

@@ -13,7 +13,7 @@ describe('trends recommendations', () => {
           similar(5, ['react-spring', 'framer-motion', 'react-motion']),
         ],
       }).recommendations
-    ).toEqual(['preact', 'vue', 'svelte', 'solid-js', '@angular/core'])
+    ).toEqual(['preact', 'vue', 'svelte', 'solid-js', '@angular/core', 'lit'])
   })
 
   it('uses the curated similar-package list when classification is confident', () => {
@@ -42,4 +42,14 @@ describe('trends recommendations', () => {
       }).recommendations
     ).toEqual([])
   })
+
+  it('keeps lower-ranked candidates above the relevance floor', () => {
+    const candidates = Array.from({ length: 12 }, (_, index) => `peer-${index}`)
+    expect(
+      getTrendsRecommendations({
+        packages: ['source-package'],
+        similarResults: [similar(120, candidates)],
+      }).recommendations
+    ).toEqual(candidates.slice(0, 10))
+  })
 })

client/assets/npm-logo.svg

@@ -42,8 +42,8 @@
   top: 0;
   bottom: 0;
   pointer-events: none;
-  display: block;
-  line-height: 1.2;
+  display: flex;
+  align-items: center;
   white-space: nowrap;
   overflow: hidden;
   z-index: 1;
@@ -52,6 +52,7 @@
 .autocomplete-input__dummy-input--compact {
   padding: 6px 36px 6px 12px;
   @include font-size-sm;
+  line-height: 1.2;
   letter-spacing: -0.2px;
 }
 

client/assets/public/npm-logo.svg

@@ -4,6 +4,8 @@ import debounce from 'debounce'
 import { parsePackageString } from '../../../../utils/common.utils'
 import API, { type PackageSuggestion } from '../../../api'
 
+const EMPTY_SUGGESTION_QUERIES: string[] = []
+
 interface UseAutocompleteInputArgs {
   initialValue: string
   onSubmit: (value: string) => void
@@ -13,13 +15,12 @@ interface UseAutocompleteInputArgs {
 export function useAutocompleteInput({
   initialValue,
   onSubmit,
-  suggestionQueries = [],
+  suggestionQueries = EMPTY_SUGGESTION_QUERIES,
 }: UseAutocompleteInputArgs) {
   const [value, setValue] = React.useState(initialValue)
   const [suggestions, setSuggestions] = React.useState<PackageSuggestion[]>([])
   const [, startTransition] = React.useTransition()
 
-  const suggestionQueryKey = suggestionQueries.join('|')
   const getSuggestions = React.useMemo(() => {
     const queries = suggestionQueries.filter(Boolean).slice(0, 5)
 
@@ -60,7 +61,7 @@ export function useAutocompleteInput({
         })
       })
     }, 150)
-  }, [startTransition, suggestionQueryKey])
+  }, [startTransition, suggestionQueries])
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()