🖼️ 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/utils/__tests__/agents.spec.tsx

@@ -123,10 +123,10 @@ describe('Agent Utilities', () => {
       } as unknown as t.Agent;
 
       const { rerender } = render(<div>{renderAgentAvatar(agent, { showBorder: true })}</div>);
-      expect(screen.getByAltText('Test Agent avatar')).toHaveClass('border-2');
+      expect(screen.getByAltText('Test Agent avatar')).toHaveClass('border-1');
 
       rerender(<div>{renderAgentAvatar(agent, { showBorder: false })}</div>);
-      expect(screen.getByAltText('Test Agent avatar')).not.toHaveClass('border-2');
+      expect(screen.getByAltText('Test Agent avatar')).not.toHaveClass('border-1');
     });
   });
 

client/src/utils/agents.tsx

@@ -60,7 +60,7 @@ export const renderAgentAvatar = (
     xl: 'h-20 w-20',
   };
 
-  const borderClasses = showBorder ? 'border-2 border-white dark:border-gray-800' : '';
+  const borderClasses = showBorder ? 'border-1 border-border-medium' : '';
 
   if (avatarUrl) {
     return (
@@ -79,14 +79,11 @@ export const renderAgentAvatar = (
   return (
     <div className={`relative flex items-center justify-center ${sizeClasses[size]} ${className}`}>
       {/* Subtle minimalistic placeholder */}
-      <div className="absolute inset-0 rounded-full border border-gray-300 bg-gray-200 dark:border-gray-600 dark:bg-gray-700"></div>
+      <div className="absolute inset-0 rounded-full border border-border-medium bg-surface-secondary"></div>
       <div
-        className={`relative flex items-center justify-center rounded-full bg-gray-300 dark:bg-gray-600 ${placeholderSizeClasses[size]}`}
+        className={`relative flex items-center justify-center rounded-full ${placeholderSizeClasses[size]}`}
       >
-        <Bot
-          className={`text-gray-500 dark:text-gray-400 ${iconSizeClasses[size]}`}
-          strokeWidth={1.5}
-        />
+        <Bot className={`text-text-primary ${iconSizeClasses[size]}`} strokeWidth={1.5} />
       </div>
     </div>
   );