gistfile1.txt

export const CatalogPageWrapper = () => {
  const featureFlagsApi = useApi(featureFlagsApiRef);
  const isNewCatalogEnabled = featureFlagsApi.isActive('new-catalog-search');

  return (
    <Box sx={{ 
      display: 'flex', 
      flexDirection: 'column',
      height: '100%',
      width: '100%',
      overflow: 'hidden' // Prevent double scrollbar
    }}>
      {/* Feature flag banner - only shows on catalog page */}
      <FeatureFlagBanner
        flagName="new-catalog-search"
        displayName="New Catalog Search"
        description="Enable the new catalog search experience"
        onToggle={(enabled) => {
          // Refresh to load the new/old catalog
          setTimeout(() => {
            window.location.reload();
          }, 100);
        }}
      />
      
      {/* Render the appropriate catalog based on feature flag */}
      <Box sx={{ flex: 1, overflow: 'auto' }}>
        {isNewCatalogEnabled ? <NewCatalogIndexPage /> : <CatalogIndexPage />}
      </Box>
    </Box>
  );
};