Function PluginMarketplace

packages/devtools/src/tabs/plugin-marketplace.tsx:17–367

()

import type { PluginCard, PluginSection } from './marketplace/types'

export const PluginMarketplace = () => {
  const styles = createStyles()
  const { plugins } = createPlugins()
  const [pluginSections, setPluginSections] = createSignal<
    Array<PluginSection>
  >([])
  const [currentPackageJson, setCurrentPackageJson] =
    createSignal<PackageJson | null>(null)
  const [searchInput, setSearchInput] = createSignal('')
  const [searchQuery, setSearchQuery] = createSignal('')
  const [collapsedSections, setCollapsedSections] = createSignal<Set<string>>(
    new Set(),
  )
  const [showActivePlugins, setShowActivePlugins] = createSignal(true)
  const [selectedTags, setSelectedTags] = createSignal<Set<string>>(new Set())
  const [isSettingsOpen, setIsSettingsOpen] = createSignal(false)

  let debounceTimeout: ReturnType<typeof setTimeout> | undefined

  // Debounce search input
  const handleSearchInput = (value: string) => {
    setSearchInput(value)

    if (debounceTimeout) {
      clearTimeout(debounceTimeout)
    }

    debounceTimeout = setTimeout(() => {
      setSearchQuery(value)
    }, 300)
  }

  const toggleSection = (framework: string) => {
    setCollapsedSections((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(framework)) {
        newSet.delete(framework)
      } else {
        newSet.add(framework)
      }
      return newSet
    })
  }

  const matchesSearch = (card: PluginCard, query: string): boolean => {
    if (!query) return true

    const lowerQuery = query.toLowerCase()
    return (
      card.devtoolsPackage.toLowerCase().includes(lowerQuery) ||
      card.requiredPackageName.toLowerCase().includes(lowerQuery) ||
      card.framework.toLowerCase().includes(lowerQuery)
    )
  }

  const getFilteredSections = () => {
    const query = searchQuery()
    const showActive = showActivePlugins()