🖼️ style: Improve Marketplace & Sharing Dialog UI

feat: Enhance CategoryTabs and Marketplace components for better responsiveness and navigation

feat: Refactor AgentCard and AgentGrid components for improved layout and accessibility

feat: Implement animated category transitions in AgentMarketplace and update NewChat component layout

feat: Refactor UI components for improved styling and accessibility in sharing dialogs

refactor: remove GenericManagePermissionsDialog and GrantAccessDialog components

- Deleted GenericManagePermissionsDialog and GrantAccessDialog components to streamline sharing functionality.
- Updated ManagePermissionsDialog to utilize AccessRolesPicker directly.
- Introduced UnifiedPeopleSearch for improved people selection experience.
- Enhanced PublicSharingToggle with InfoHoverCard for better user guidance.
- Adjusted AgentPanel to change error status to warning for duplicate agent versions.
- Updated translations to include new keys for search and access management.

feat: Add responsive design for SelectedPrincipalsList and improve layout in GenericGrantAccessDialog

feat: Enhance styling in SelectedPrincipalsList and SearchPicker components for improved UI consistency

feat: Improve PublicSharingToggle component with enhanced styling and accessibility features

feat: Introduce InfoHoverCard component and refactor enums for better organization

feat: Implement infinite scroll for agent grids and enhance performance

- Added `useInfiniteScroll` hook to manage infinite scrolling behavior in agent grids.
- Integrated infinite scroll functionality into `AgentGrid` and `VirtualizedAgentGrid` components.
- Updated `AgentMarketplace` to pass the scroll container to the agent grid components.
- Refactored loading indicators to show a spinner instead of a "Load More" button.
- Created `VirtualizedAgentGrid` component for optimized rendering of agent cards using virtualization.
- Added performance tests for `VirtualizedAgentGrid` to ensure efficient handling of large datasets.
- Updated translations to include new messages for end-of-results scenarios.

chore: Remove unused permission-related UI localization keys

ci: Update Agent model tests to handle duplicate support_contact updates

- Modified tests to ensure that updating an agent with the same support_contact does not create a new version and returns successfully.
- Enhanced verification for partial changes in support_contact, confirming no new version is created when content remains the same.

chore: Address ESLint, clean up unused imports and improve prop definitions in various components

ci: fix tests

ci: update tests

chore: remove unused search localization keys

client/src/components/Agents/AgentCard.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { Label } from '@librechat/client';
 import type t from 'librechat-data-provider';
-import useLocalize from '~/hooks/useLocalize';
 import { cn, renderAgentAvatar, getContactDisplayName } from '~/utils';
+import { useLocalize } from '~/hooks';
 
 interface AgentCardProps {
   agent: t.Agent; // The agent data to display
@@ -18,10 +19,10 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
   return (
     <div
       className={cn(
-        'group relative flex overflow-hidden rounded-2xl',
-        'cursor-pointer transition-colors duration-200',
-        'aspect-[5/2.5] w-full',
-        'bg-surface-tertiary hover:bg-surface-hover-alt',
+        'group relative h-40 overflow-hidden rounded-xl border border-border-light',
+        'cursor-pointer shadow-sm transition-all duration-200 hover:border-border-medium hover:shadow-lg',
+        'bg-surface-tertiary hover:bg-surface-hover',
+        'space-y-3 p-4',
         className,
       )}
       onClick={onClick}
@@ -39,50 +40,57 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
         }
       }}
     >
-      <div className="flex h-full gap-2 px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
-        {/* Agent avatar section - left side, responsive */}
-        <div className="flex flex-shrink-0 items-center">
-          {renderAgentAvatar(agent, { size: 'md' })}
+      {/* Two column layout */}
+      <div className="flex h-full items-start gap-3">
+        {/* Left column: Avatar and Category */}
+        <div className="flex h-full flex-shrink-0 flex-col justify-between space-y-4">
+          <div className="flex-shrink-0">{renderAgentAvatar(agent, { size: 'sm' })}</div>
+
+          {/* Category tag */}
+          <div className="inline-flex items-center rounded-md border-border-xheavy bg-surface-active-alt px-2 py-1 text-xs font-medium">
+            {agent.category && (
+              <Label className="line-clamp-1 font-normal">
+                {agent.category.charAt(0).toUpperCase() + agent.category.slice(1)}
+              </Label>
+            )}
+          </div>
         </div>
 
-        {/* Agent info section - right side, responsive */}
-        <div className="flex min-w-0 flex-1 flex-col justify-center">
-          {/* Agent name - responsive text sizing */}
-          <h3 className="mb-1 line-clamp-1 text-base font-bold text-text-primary sm:mb-2 sm:text-lg">
-            {agent.name}
-          </h3>
+        {/* Right column: Name, description, and other content */}
+        <div className="min-w-0 flex-1 space-y-1">
+          <div className="flex items-center justify-between">
+            {/* Agent name */}
+            <Label className="mb-1 line-clamp-1 text-xl font-semibold text-text-primary">
+              {agent.name}
+            </Label>
 
-          {/* Agent description - responsive text sizing and spacing */}
+            {/* Owner info */}
+            {(() => {
+              const displayName = getContactDisplayName(agent);
+              if (displayName) {
+                return (
+                  <div className="flex items-center text-sm text-text-secondary">
+                    <Label className="mr-1">🔹</Label>
+                    <Label>{displayName}</Label>
+                  </div>
+                );
+              }
+              return null;
+            })()}
+          </div>
+
+          {/* Agent description */}
           <p
             id={`agent-${agent.id}-description`}
-            className={cn(
-              'mb-1 line-clamp-2 text-xs leading-relaxed text-text-secondary',
-              'sm:mb-2 sm:text-sm',
-            )}
+            className="line-clamp-3 text-sm leading-relaxed text-text-primary"
             aria-label={`Description: ${agent.description || localize('com_agents_no_description')}`}
           >
             {agent.description || (
-              <span className="italic text-text-secondary">
+              <Label className="font-normal italic text-text-primary">
                 {localize('com_agents_no_description')}
-              </span>
+              </Label>
             )}
           </p>
-
-          {/* Owner info - responsive text sizing */}
-          {(() => {
-            const displayName = getContactDisplayName(agent);
-
-            if (displayName) {
-              return (
-                <div className="flex items-center text-xs text-text-tertiary sm:text-sm">
-                  <span className="font-light">{localize('com_agents_created_by')}</span>
-                  <span className="ml-1 font-bold">{displayName}</span>
-                </div>
-              );
-            }
-
-            return null;
-          })()}
         </div>
       </div>
     </div>