Repository: supabase/supabase
File: apps/docs/features/ui/McpConfigPanel.tsx (TypeScript)

Code before:
                  className="flex gap-2 items-center"
                >
                  {platform.label}
                  <Check
                    aria-label={platform.value === selectedPlatform ? 'selected' : undefined}
                    size={15}
                    className={cn(
                      'ml-auto',
                      platform.value === selectedPlatform ? 'opacity-100' : 'opacity-0'
                    )}
                  />
                </CommandItem_Shadcn_>
              ))}
            </CommandGroup_Shadcn_>
          </CommandList_Shadcn_>
        </Command_Shadcn_>
      </PopoverContent_Shadcn_>
    </Popover_Shadcn_>
  )
}

export function McpConfigPanel() {
  const [selectedProject, setSelectedProject] = useState<{ ref: string; name: string } | null>(null)
  const [selectedPlatform, setSelectedPlatform] = useState<'hosted' | 'local'>('hosted')
  const { theme } = useTheme()

  const isPlatform = selectedPlatform === 'hosted'
  const project = isPlatform ? selectedProject : null

  return (
    <div className="not-prose">
      <div className="flex gap-3 mb-3">
        <PlatformSelector
          selectedPlatform={selectedPlatform}
          onPlatformSelect={setSelectedPlatform}
        />
        {isPlatform && (
          <ProjectSelector selectedProject={project} onProjectSelect={setSelectedProject} />
        )}
      </div>
      <p className="text-xs text-foreground-lighter">
        {isPlatform
          ? 'Scope the MCP server to a project. If no project is selected, all projects will be accessible.'
          : 'Project selection is only available for the hosted platform.'}
      </p>
      <McpConfigPanelBase
        basePath="/docs"
        className="mt-6"
        projectRef={project?.ref}
        theme={theme as 'light' | 'dark'}
        isPlatform={isPlatform}

Review comment (refactor):
This is used in a lot of places, worth abstracting to a type?

```ts
type PlatformType = 'hosted' | 'local'
```

Code after:
                    setOpen(false)
                  }}
                  className="flex gap-2 items-center"
                >
                  {platform.label}
                  <Check
                    aria-label={platform.value === selectedPlatform ? 'selected' : undefined}
                    size={15}
                    className={cn(
                      'ml-auto',
                      platform.value === selectedPlatform ? 'opacity-100' : 'opacity-0'
                    )}
                  />
                </CommandItem_Shadcn_>
              ))}
            </CommandGroup_Shadcn_>
          </CommandList_Shadcn_>
        </Command_Shadcn_>
      </PopoverContent_Shadcn_>
    </Popover_Shadcn_>
  )
}

export function McpConfigPanel() {
  const [selectedProject, setSelectedProject] = useState<{ ref: string; name: string } | null>(null)
  const [selectedPlatform, setSelectedPlatform] = useState<'hosted' | 'local'>('hosted')
  const { theme } = useTheme()

  const isPlatform = selectedPlatform === 'hosted'
  const project = isPlatform ? selectedProject : null

  return (
    <div className="not-prose">
      <div className="flex gap-3 mb-3">
        <PlatformSelector
          selectedPlatform={selectedPlatform}
          onPlatformSelect={setSelectedPlatform}
        />
        {isPlatform && (
          <ProjectSelector selectedProject={project} onProjectSelect={setSelectedProject} />
        )}
      </div>
      <p className="text-xs text-foreground-lighter">
        {isPlatform
          ? 'Scope the MCP server to a project. If no project is selected, all projects will be accessible.'
          : 'Project selection is only available for the hosted platform.'}
      </p>
      <McpConfigPanelBase
        basePath="/docs"
        className="mt-6"
        projectRef={project?.ref}