Function SearchContent

app/search/page.tsx:59–338

()

}

function SearchContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  
  const typeParam = searchParams.get("type") as ExtensionType | null
  const queryParam = searchParams.get("q") || ""
  const tagParam = searchParams.get("tag") || ""

  const [searchQuery, setSearchQuery] = useState(queryParam)
  const extensions = useQuery(api.extensions.listAllApproved)

  // Update URL with filters
  const updateFilters = useCallback((updates: { type?: string | null; q?: string; tag?: string }) => {
    const params = new URLSearchParams(searchParams.toString())
    
    if (updates.type !== undefined) {
      if (updates.type) {
        params.set("type", updates.type)
      } else {
        params.delete("type")
      }
    }
    
    if (updates.q !== undefined) {
      if (updates.q) {
        params.set("q", updates.q)
      } else {
        params.delete("q")
      }
    }
    
    if (updates.tag !== undefined) {
      if (updates.tag) {
        params.set("tag", updates.tag)
      } else {
        params.delete("tag")
      }
    }
    
    const queryString = params.toString()
    router.push(queryString ? `/search?${queryString}` : "/search")
  }, [router, searchParams])

  // Filter extensions based on search params
  const filteredExtensions = useMemo(() => {
    if (!extensions) return []
    
    return extensions.filter((ext) => {
      // Filter by type
      if (typeParam && ext.type !== typeParam) return false
      
      // Filter by tag
      if (tagParam && !ext.tags.some(t => t.toLowerCase() === tagParam.toLowerCase())) return false
      
      // Filter by search query
      if (queryParam) {
        const query = queryParam.toLowerCase()
        const matchesName = ext.displayName.toLowerCase().includes(query)