{/* Scrollable container */} -
+
{/* Simplified header for agents marketplace - only show nav controls when needed */} {!isSmallScreen && (
@@ -276,63 +371,158 @@ const AgentMarketplace: React.FC = ({ className = '' }) = {/* Scrollable content area */}
- {/* Category header - only show when not searching */} - {!searchQuery && ( -
- {(() => { - // Get category data for display - const getCategoryData = () => { - if (activeTab === 'promoted') { - return { - name: localize('com_agents_top_picks'), - description: localize('com_agents_recommended'), + {/* Two-pane animated container wrapping category header + grid */} +
+ {/* Current content pane */} +
+ {/* Category header - only show when not searching */} + {!searchQuery && ( +
+ {(() => { + // Get category data for display + const getCategoryData = () => { + if (displayCategory === 'promoted') { + return { + name: localize('com_agents_top_picks'), + description: localize('com_agents_recommended'), + }; + } + if (displayCategory === 'all') { + return { + name: 'All Agents', + description: 'Browse all shared agents across all categories', + }; + } + + // Find the category in the API data + const categoryData = categoriesQuery.data?.find( + (cat) => cat.value === displayCategory, + ); + if (categoryData) { + return { + name: categoryData.label, + description: categoryData.description || '', + }; + } + + // Fallback for unknown categories + return { + name: + displayCategory.charAt(0).toUpperCase() + + displayCategory.slice(1), + description: '', + }; }; - } - if (activeTab === 'all') { - return { - name: 'All Agents', - description: 'Browse all shared agents across all categories', - }; - } - // Find the category in the API data - const categoryData = categoriesQuery.data?.find( - (cat) => cat.value === activeTab, - ); - if (categoryData) { - return { - name: categoryData.label, - description: categoryData.description || '', - }; - } + const { name, description } = getCategoryData(); - // Fallback for unknown categories - return { - name: activeTab.charAt(0).toUpperCase() + activeTab.slice(1), - description: '', - }; - }; + return ( +
+

{name}

+ {description && ( +

{description}

+ )} +
+ ); + })()} +
+ )} - const { name, description } = getCategoryData(); - - return ( -
-

{name}

- {description && ( -

{description}

- )} -
- ); - })()} + {/* Agent grid */} +
- )} - {/* Agent grid */} - + {/* Next content pane, only during transition */} + {isTransitioning && nextCategory && ( +
+ {/* Category header - only show when not searching */} + {!searchQuery && ( +
+ {(() => { + // Get category data for display + const getCategoryData = () => { + if (nextCategory === 'promoted') { + return { + name: localize('com_agents_top_picks'), + description: localize('com_agents_recommended'), + }; + } + if (nextCategory === 'all') { + return { + name: 'All Agents', + description: 'Browse all shared agents across all categories', + }; + } + + // Find the category in the API data + const categoryData = categoriesQuery.data?.find( + (cat) => cat.value === nextCategory, + ); + if (categoryData) { + return { + name: categoryData.label, + description: categoryData.description || '', + }; + } + + // Fallback for unknown categories + return { + name: + (nextCategory || '').charAt(0).toUpperCase() + + (nextCategory || '').slice(1), + description: '', + }; + }; + + const { name, description } = getCategoryData(); + + return ( +
+

{name}

+ {description && ( +

{description}

+ )} +
+ ); + })()} +
+ )} + + {/* Agent grid */} + +
+ )} + + {/* Note: Using Tailwind keyframes for slide in/out animations */} +
{/* Agent detail dialog */} diff --git a/client/src/components/Agents/SearchBar.tsx b/client/src/components/Agents/SearchBar.tsx index 4c473b216..b261bc90e 100644 --- a/client/src/components/Agents/SearchBar.tsx +++ b/client/src/components/Agents/SearchBar.tsx @@ -73,33 +73,33 @@ const SearchBar: React.FC = ({ value, onSearch, className = '' } value={searchTerm} onChange={handleChange} placeholder={localize('com_agents_search_placeholder')} - className="h-14 rounded-2xl border-2 border-border-medium bg-transparent pl-12 pr-12 text-lg text-text-primary shadow-lg placeholder:text-text-tertiary focus:border-border-heavy focus:ring-0" + className="h-14 rounded-2xl border-border-medium bg-transparent pl-12 pr-12 text-lg text-text-primary shadow-md transition-[border-color,box-shadow] duration-200 placeholder:text-text-secondary focus:border-border-heavy focus:shadow-lg focus:ring-0" aria-label={localize('com_agents_search_aria')} aria-describedby="search-instructions search-results-count" autoComplete="off" spellCheck="false" /> - {/* Search icon with proper accessibility */} - {/* Hidden instructions for screen readers */}
{localize('com_agents_search_instructions')}
- {/* Show clear button only when search has value - Google style */} {searchTerm && (