From ec00aa951aacd5206acf7231a4acb2bd2add3b43 Mon Sep 17 00:00:00 2001 From: Ubbe Date: Fri, 9 Jan 2026 18:52:07 +0700 Subject: [PATCH] fix(frontend): agent favorites layout (#11733) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Changes 🏗️ Screenshot 2026-01-09 at 16 07 08 - Remove feature flag for agent favourites ( _keep it always visible_ ) - Fix the layout on the card so the ❤️ icon appears next to the `...` menu - Remove icons on toasts ## Checklist 📋 ### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Run the app locally and check the above ## Summary by CodeRabbit * **New Features** * Favorites now respond to the current search term and are available to all users (no feature-flag). * **UI/UX Improvements** * Redesigned Favorites section with simplified header, inline agent counts, updated spacing/dividers, and removal of skeleton placeholders. * Favorite button repositioned and visually simplified on agent cards. * Toast visuals simplified by removing per-type icons and adjusting close-button positioning. ✏️ Tip: You can customize this high-level summary in your review settings. --- .../FavoritesSection/FavoritesSection.tsx | 82 +++++++++---------- .../LibraryAgentCard/LibraryAgentCard.tsx | 18 ++-- .../components/FavoriteButton.tsx | 16 ++-- .../LibraryAgentCard/useLibraryAgentCard.ts | 5 -- .../library/hooks/useFavoriteAgents.ts | 24 ++++-- .../src/app/(platform)/library/page.tsx | 2 +- .../molecules/Toast/styles.module.css | 8 -- .../components/molecules/Toast/toaster.tsx | 9 +- 8 files changed, 77 insertions(+), 87 deletions(-) diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx index 922352292d..d1167cc747 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx @@ -1,15 +1,17 @@ "use client"; import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent"; -import { Skeleton } from "@/components/__legacy__/ui/skeleton"; +import { Text } from "@/components/atoms/Text/Text"; import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll"; -import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag"; import { HeartIcon } from "@phosphor-icons/react"; import { useFavoriteAgents } from "../../hooks/useFavoriteAgents"; import { LibraryAgentCard } from "../LibraryAgentCard/LibraryAgentCard"; -export function FavoritesSection() { - const isAgentFavoritingEnabled = useGetFlag(Flag.AGENT_FAVORITING); +interface Props { + searchTerm: string; +} + +export function FavoritesSection({ searchTerm }: Props) { const { allAgents: favoriteAgents, agentLoading: isLoading, @@ -17,60 +19,50 @@ export function FavoritesSection() { hasNextPage, fetchNextPage, isFetchingNextPage, - } = useFavoriteAgents(); + } = useFavoriteAgents({ searchTerm }); - // Only show this section if the feature flag is enabled - if (!isAgentFavoritingEnabled) { - return null; - } - - // Don't show the section if there are no favorites - if (!isLoading && favoriteAgents.length === 0) { + if (isLoading || favoriteAgents.length === 0) { return null; } return ( -
-
- - - Favorites - - {!isLoading && ( - - {agentCount} {agentCount === 1 ? "agent" : "agents"} - - )} +
+
+ +
+ Favorites + {!isLoading && ( + + {agentCount} + + )} +
- {isLoading ? ( + +
+
+ } + >
- {[...Array(4)].map((_, i) => ( - + {favoriteAgents.map((agent: LibraryAgent) => ( + ))}
- ) : ( - -
-
- } - > -
- {favoriteAgents.map((agent: LibraryAgent) => ( - - ))} -
- - )} +
- {favoriteAgents.length > 0 &&
} + {favoriteAgents.length > 0 &&
}
); } diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx index 739eec9881..1327de5347 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx @@ -24,7 +24,6 @@ export function LibraryAgentCard({ agent }: Props) { const { isFromMarketplace, - isAgentFavoritingEnabled, isFavorite, profile, creator_image_url, @@ -37,9 +36,8 @@ export function LibraryAgentCard({ agent }: Props) { data-agent-id={id} className="group relative inline-flex h-[10.625rem] w-full max-w-[25rem] flex-col items-start justify-start gap-2.5 rounded-medium border border-zinc-100 bg-white transition-all duration-300 hover:shadow-md" > - - -
+ +
- {isAgentFavoritingEnabled && ( - - )} + +
void; + onClick: (e: MouseEvent) => void; + className?: string; } -export function FavoriteButton({ isFavorite, onClick }: FavoriteButtonProps) { +export function FavoriteButton({ + isFavorite, + onClick, + className, +}: FavoriteButtonProps) { return (