Function PluginsTab

packages/devtools/src/tabs/plugins-tab.tsx:9–158

(props: { isOpen: boolean })

import { PluginMarketplace } from './plugin-marketplace'

export const PluginsTab = (props: { isOpen: boolean }) => {
  const { plugins, activePlugins, toggleActivePlugins } = createPlugins()
  const { expanded, hoverUtils, animationMs, setForceExpand } =
    createDrawContext()
  const [pluginRefs, setPluginRefs] = createSignal(
    new Map<string, HTMLDivElement>(),
  )
  const [showMarketplace, setShowMarketplace] = createSignal(false)

  const styles = createStyles()

  const { theme } = createTheme()

  const hasPlugins = createMemo(
    () => plugins()?.length && plugins()!.length > 0,
  )

  // Keep sidebar expanded when marketplace is shown
  createEffect(() => {
    setForceExpand(showMarketplace())
  })

  createEffect(() => {
    const currentActivePlugins = plugins()?.filter((plugin) =>
      activePlugins().includes(plugin.id!),
    )

    currentActivePlugins?.forEach((plugin) => {
      const ref = pluginRefs().get(plugin.id!)

      if (ref) {
        plugin.render(ref, {
          theme: theme(),
          devtoolsOpen: props.isOpen,
        })
      }
    })
  })

  const handleMarketplaceClick = () => setShowMarketplace(!showMarketplace())

  const handlePluginClick = (pluginId: string) => {
    // Close marketplace when switching to a plugin
    if (showMarketplace()) {
      setShowMarketplace(false)
    }
    toggleActivePlugins(pluginId)
  }

  return (
    <Show when={hasPlugins()} fallback={<PluginMarketplace />}>
      <div class={styles().pluginsTabPanel}>
        <div
          class={clsx(
            styles().pluginsTabDraw(expanded()),
            {
              [styles().pluginsTabDraw(expanded())]: expanded(),
            },