Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2025-07-17 13:19:53 +02:00 committed by GitHub
parent 8e6f7382d4 32e115365a
commit 7bc0ab6548
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 126 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/(dashboard)/agents/page.tsx
View File

@ -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}

4
frontend/src/components/agents/custom-agents-page/marketplace-tab.tsx
View File

@ -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,6 +55,7 @@ export const MarketplaceTab = ({
</Select>
</div>
<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) => (
@ -140,5 +141,6 @@ export const MarketplaceTab = ({
</div>
)}
</div>
</div>
);
};

4
frontend/src/components/agents/custom-agents-page/my-agents-tab.tsx
View File

@ -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,6 +203,7 @@ export const MyAgentsTab = ({
</div>
</div>
<div className="flex-1">
{agentFilter === 'templates' ? (
renderTemplates()
) : (
@ -238,5 +239,6 @@ export const MyAgentsTab = ({
</>
)}
</div>
</div>
);
};

7
frontend/src/components/ui/fancy-tabs.tsx
View File

@ -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))',