TroubleshootingFilterMobileCollapsed() — supabase Function Reference

Architecture documentation for the TroubleshootingFilterMobileCollapsed() function in Troubleshooting.ui.client.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ TroubleshootingFilterMobileCollapsed() — supabase Function Reference

Dependency Diagram

graph TD
  b195ca97_6df5_8f5d_05ae_8d934c018ddd["TroubleshootingFilterMobileCollapsed()"]
  d6b58f41_efbc_4023_278f_9b90e8e39130["useTroubleshootingSearchState()"]
  b195ca97_6df5_8f5d_05ae_8d934c018ddd -->|calls| d6b58f41_efbc_4023_278f_9b90e8e39130
  style b195ca97_6df5_8f5d_05ae_8d934c018ddd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/features/docs/Troubleshooting.ui.client.tsx lines 124–160

function TroubleshootingFilterMobileCollapsed(props: TroubleshootingFilterProps) {
  const isBelowSmallScreen = useBreakpoint('sm')
  const { selectedProducts, selectedErrorCodes, selectedTags, searchState } =
    useTroubleshootingSearchState()

  const numberFiltersApplied =
    (selectedProducts.length > 0 ? 1 : 0) +
    (selectedErrorCodes.length > 0 ? 1 : 0) +
    (selectedTags.length > 0 ? 1 : 0) +
    (searchState ? 1 : 0)

  if (isBelowSmallScreen) {
    return (
      <Collapsible className="border-b">
        <CollapsibleTrigger className="group w-full pb-6 text-foreground-light">
          <div className="flex items-center justify-between gap-2">
            <span>Filters</span>
            <ChevronDown
              size={16}
              className="group-data-[state=open]:rotate-180 transition-transform"
            />
          </div>
          {numberFiltersApplied > 0 && (
            <div className="group-data-[state=open]:hidden text-sm text-left">
              {numberFiltersApplied} filter{numberFiltersApplied > 1 ? 's' : ''} applied
            </div>
          )}
        </CollapsibleTrigger>
        <CollapsibleContent className="flex flex-col gap-2">
          <TroubleshootingFilterInternal {...props} />
        </CollapsibleContent>
      </Collapsible>
    )
  }

  return <TroubleshootingFilterInternal {...props} />
}