mirror of https://github.com/kortix-ai/suna.git
Merge pull request #975 from kortix-ai/cursor/optimize-agents-page-switcher-states-1b17
Optimize agents page switcher states
This commit is contained in:
Marko Kraemer
GitHub
commit
7bc0ab6548
|
|
@ -505,7 +505,8 @@ export default function AgentsPage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="container mx-auto max-w-7xl px-4 py-2">
|
||||
<div className="w-full">
|
||||
{/* Fixed height container to prevent layout shifts on tab change */}
|
||||
<div className="w-full min-h-[calc(100vh-300px)]">
|
||||
{activeTab === "my-agents" && (
|
||||
<MyAgentsTab
|
||||
agentsSearchQuery={agentsSearchQuery}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const MarketplaceTab = ({
|
|||
getItemStyling
|
||||
}: MarketplaceTabProps) => {
|
||||
return (
|
||||
<div className="space-y-6 mt-8">
|
||||
<div className="space-y-6 mt-8 flex flex-col min-h-full">
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
||||
<SearchBar
|
||||
placeholder="Search agents..."
|
||||
|
|
@ -55,90 +55,92 @@ export const MarketplaceTab = ({
|
|||
</Select>
|
||||
</div>
|
||||
|
||||
{marketplaceLoading ? (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="bg-card rounded-2xl overflow-hidden shadow-sm">
|
||||
<Skeleton className="h-48" />
|
||||
<div className="p-6 space-y-3">
|
||||
<Skeleton className="h-5 rounded" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 rounded" />
|
||||
<Skeleton className="h-4 rounded w-3/4" />
|
||||
<div className="flex-1">
|
||||
{marketplaceLoading ? (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="bg-card rounded-2xl overflow-hidden shadow-sm">
|
||||
<Skeleton className="h-48" />
|
||||
<div className="p-6 space-y-3">
|
||||
<Skeleton className="h-5 rounded" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 rounded" />
|
||||
<Skeleton className="h-4 rounded w-3/4" />
|
||||
</div>
|
||||
<Skeleton className="h-10 rounded-full" />
|
||||
</div>
|
||||
<Skeleton className="h-10 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : allMarketplaceItems.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-muted-foreground">
|
||||
{marketplaceSearchQuery
|
||||
? "No templates found matching your criteria. Try adjusting your search or filters."
|
||||
: "No agent templates are currently available in the marketplace."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-12">
|
||||
{marketplaceFilter === 'all' ? (
|
||||
<>
|
||||
{kortixTeamItems.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<MarketplaceSectionHeader
|
||||
title="Verified by Kortix"
|
||||
subtitle="Official agents, maintained and supported"
|
||||
))}
|
||||
</div>
|
||||
) : allMarketplaceItems.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-muted-foreground">
|
||||
{marketplaceSearchQuery
|
||||
? "No templates found matching your criteria. Try adjusting your search or filters."
|
||||
: "No agent templates are currently available in the marketplace."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-12">
|
||||
{marketplaceFilter === 'all' ? (
|
||||
<>
|
||||
{kortixTeamItems.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<MarketplaceSectionHeader
|
||||
title="Verified by Kortix"
|
||||
subtitle="Official agents, maintained and supported"
|
||||
/>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{kortixTeamItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onClick={() => onInstallClick(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{communityItems.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{communityItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onClick={() => onInstallClick(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{allMarketplaceItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onClick={() => onInstallClick(item)}
|
||||
/>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{kortixTeamItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onClick={() => onInstallClick(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{communityItems.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{communityItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onClick={() => onInstallClick(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{allMarketplaceItems.map((item) => (
|
||||
<AgentCard
|
||||
key={item.id}
|
||||
mode="marketplace"
|
||||
data={item}
|
||||
styling={getItemStyling(item)}
|
||||
isActioning={installingItemId === item.id}
|
||||
onPrimaryAction={onInstallClick}
|
||||
onClick={() => onInstallClick(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -155,7 +155,7 @@ export const MyAgentsTab = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 mt-8">
|
||||
<div className="space-y-6 mt-8 flex flex-col min-h-full">
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between mb-6">
|
||||
<SearchBar
|
||||
placeholder="Search your agents..."
|
||||
|
|
@ -203,40 +203,42 @@ export const MyAgentsTab = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{agentFilter === 'templates' ? (
|
||||
renderTemplates()
|
||||
) : (
|
||||
<>
|
||||
{agentsLoading ? (
|
||||
<LoadingState viewMode={viewMode} />
|
||||
) : filteredAgents.length === 0 ? (
|
||||
<EmptyState
|
||||
hasAgents={(agentsPagination?.total || 0) > 0}
|
||||
onCreateAgent={onCreateAgent}
|
||||
onClearFilters={handleClearFilters}
|
||||
/>
|
||||
) : (
|
||||
<AgentsGrid
|
||||
agents={filteredAgents}
|
||||
onEditAgent={onEditAgent}
|
||||
onDeleteAgent={onDeleteAgent}
|
||||
onToggleDefault={onToggleDefault}
|
||||
deleteAgentMutation={deleteAgentMutation}
|
||||
onPublish={onPublishAgent}
|
||||
publishingId={publishingAgentId}
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
{agentFilter === 'templates' ? (
|
||||
renderTemplates()
|
||||
) : (
|
||||
<>
|
||||
{agentsLoading ? (
|
||||
<LoadingState viewMode={viewMode} />
|
||||
) : filteredAgents.length === 0 ? (
|
||||
<EmptyState
|
||||
hasAgents={(agentsPagination?.total || 0) > 0}
|
||||
onCreateAgent={onCreateAgent}
|
||||
onClearFilters={handleClearFilters}
|
||||
/>
|
||||
) : (
|
||||
<AgentsGrid
|
||||
agents={filteredAgents}
|
||||
onEditAgent={onEditAgent}
|
||||
onDeleteAgent={onDeleteAgent}
|
||||
onToggleDefault={onToggleDefault}
|
||||
deleteAgentMutation={deleteAgentMutation}
|
||||
onPublish={onPublishAgent}
|
||||
publishingId={publishingAgentId}
|
||||
/>
|
||||
)}
|
||||
|
||||
{agentsPagination && agentsPagination.pages > 1 && (
|
||||
<Pagination
|
||||
currentPage={agentsPagination.page}
|
||||
totalPages={agentsPagination.pages}
|
||||
onPageChange={setAgentsPage}
|
||||
isLoading={agentsLoading}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{agentsPagination && agentsPagination.pages > 1 && (
|
||||
<Pagination
|
||||
currentPage={agentsPagination.page}
|
||||
totalPages={agentsPagination.pages}
|
||||
onPageChange={setAgentsPage}
|
||||
isLoading={agentsLoading}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -34,11 +34,12 @@ const TabButton = ({ value, isActive, onClick, children }: TabButtonProps) => {
|
|||
<button
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"relative flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-medium transition-all duration-300",
|
||||
isDark ? "hover:bg-white/5" : "hover:bg-muted/80",
|
||||
"relative flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-medium transition-all duration-300 ease-out",
|
||||
// Only apply hover background when not active - subtle and elegant
|
||||
!isActive && (isDark ? "hover:bg-white/8" : "hover:bg-muted/60"),
|
||||
isActive
|
||||
? isDark ? "text-white" : "text-foreground bg-background border border-border/50"
|
||||
: isDark ? "text-white/50 hover:text-white/70" : "text-muted-foreground hover:text-foreground"
|
||||
: isDark ? "text-white/60 hover:text-white/85" : "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
style={isActive && isDark ? {
|
||||
background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08))',
|
||||
|
|
|
|||
Loading…
Reference in New Issue