feat(library): enhance folder color handling and animation in Library components

- Exported `resolveColor` function from `FolderIcon` to improve color resolution for folders.
- Introduced `folderCardStyles` to define background and border styles for each folder color.
- Updated `LibraryFolder` component to utilize the new color resolution and styling, enhancing visual consistency.
- Refined animation handling in `LibraryAgentList` by removing unnecessary properties for smoother transitions.

These changes improve the visual representation of folders and enhance the overall user experience in the library interface.

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList/LibraryAgentList.tsx

@@ -50,13 +50,11 @@ const reducedContainerVariants = {
 // search is cleared) stayed invisible with variant inheritance.
 const itemInitial = {
   opacity: 0,
-  y: 8,
   filter: "blur(4px)",
 };
 
 const itemAnimate = {
   opacity: 1,
-  y: 0,
   filter: "blur(0px)",
 };
 

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryFolder/FolderIcon.tsx

@@ -41,7 +41,7 @@ const hexToColorName: Record<string, FolderColorName> = {
   "#ec4899": "pink",
 };
 
-function resolveColor(color: FolderColor | undefined): FolderColorName {
+export function resolveColor(color: FolderColor | undefined): FolderColorName {
   if (!color) return "blue";
   if (color in hexToColorName) return hexToColorName[color];
   if (color in colorMap) return color as FolderColorName;
@@ -223,6 +223,34 @@ const colorMap: Record<
   },
 };
 
+// Card-level bg (50) and border (200) classes per folder color
+export const folderCardStyles: Record<
+  FolderColorName,
+  { bg: string; border: string }
+> = {
+  neutral: { bg: "bg-neutral-50", border: "border-neutral-200" },
+  slate: { bg: "bg-slate-50", border: "border-slate-200" },
+  zinc: { bg: "bg-zinc-50", border: "border-zinc-200" },
+  stone: { bg: "bg-stone-50", border: "border-stone-200" },
+  red: { bg: "bg-red-50", border: "border-red-200" },
+  orange: { bg: "bg-orange-50", border: "border-orange-200" },
+  amber: { bg: "bg-amber-50", border: "border-amber-200" },
+  yellow: { bg: "bg-yellow-50", border: "border-yellow-200" },
+  lime: { bg: "bg-lime-50", border: "border-lime-200" },
+  green: { bg: "bg-green-50", border: "border-green-200" },
+  emerald: { bg: "bg-emerald-50", border: "border-emerald-200" },
+  teal: { bg: "bg-teal-50", border: "border-teal-200" },
+  cyan: { bg: "bg-cyan-50", border: "border-cyan-200" },
+  sky: { bg: "bg-sky-50", border: "border-sky-200" },
+  blue: { bg: "bg-blue-50", border: "border-blue-200" },
+  indigo: { bg: "bg-indigo-50", border: "border-indigo-200" },
+  violet: { bg: "bg-violet-50", border: "border-violet-200" },
+  purple: { bg: "bg-purple-50", border: "border-purple-200" },
+  fuchsia: { bg: "bg-fuchsia-50", border: "border-fuchsia-200" },
+  pink: { bg: "bg-pink-50", border: "border-pink-200" },
+  rose: { bg: "bg-rose-50", border: "border-rose-200" },
+};
+
 export function FolderIcon({
   className = "",
   size = "xs",

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryFolder/LibraryFolder.tsx

@@ -2,7 +2,12 @@
 
 import { Text } from "@/components/atoms/Text/Text";
 import { Button } from "@/components/atoms/Button/Button";
-import { FolderIcon, FolderColor } from "./FolderIcon";
+import {
+  FolderIcon,
+  FolderColor,
+  folderCardStyles,
+  resolveColor,
+} from "./FolderIcon";
 import { useState } from "react";
 import { PencilSimpleIcon, TrashIcon } from "@phosphor-icons/react";
 
@@ -31,6 +36,8 @@ export function LibraryFolder({
 }: Props) {
   const [isHovered, setIsHovered] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
+  const resolvedColor = resolveColor(color);
+  const cardStyle = folderCardStyles[resolvedColor];
 
   function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
     if (e.dataTransfer.types.includes("application/agent-id")) {
@@ -57,10 +64,10 @@ export function LibraryFolder({
     <div
       data-testid="library-folder"
       data-folder-id={id}
-      className={`group relative inline-flex h-[10.625rem] w-full max-w-[25rem] cursor-pointer flex-col items-start justify-between gap-2.5 rounded-medium border bg-white p-4 transition-all duration-200 hover:shadow-md ${
+      className={`group relative inline-flex h-[10.625rem] w-full max-w-[25rem] cursor-pointer flex-col items-start justify-between gap-2.5 rounded-medium border p-4 transition-all duration-200 hover:shadow-md ${
         isDragOver
           ? "border-blue-400 bg-blue-50 ring-2 ring-blue-200"
-          : "border-zinc-100"
+          : `${cardStyle.border} ${cardStyle.bg}`
       }`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}