feat(integrations): Integration page - glassmorphism UI, agent overlays, pagination
Overview
Complete integration page implementation with glassmorphism UI, wizard enhancements with Lucide icons, and SAV agent configuration updates.
Changes
- Built new /integration page with glassmorphism-styled integration cards
- Added 25 integrations across 7 categories (E-commerce, CMS, Communication, Social, Stockage, Productivité, CRM)
- Implemented click-to-expand agent overlay showing compatible agents per integration
- Added pagination with 9 items per page and auto-reset on filter change
- Added agent avatars to filter dropdown with initials fallback for missing images
- Replaced CDN icons with local icons from public/icons folder
- Pre-configured 6 integrations as connected (Microsoft Teams, Slack, Gmail, Instagram, LinkedIn, Google Drive)
- Renamed ITRI agent to AYAL across SAV dashboard files
- Replaced emoji icons with Lucide React icons in wizard steps
Technical Details
- 8 agent types configured with color themes and avatar mappings
- Hidden scrollbar in agent overlay while preserving scroll functionality
- All conditional rendering uses ConditionalComponent pattern
- CustomSelect z-index fix for dropdown stacking issues
- Glassmorphism styling with backdrop-filter blur effects maintained throughout
- No commented code
Components Added
- GlassIntegrationCard.tsx - Integration card with agent overlay panel
- IntegrationsGridView.tsx - Grid layout with pagination controls
- IntegrationFilters.tsx - Search and filter dropdowns with agent avatars
- ManageAccountsModal.tsx - Modal for managing connected accounts
- AddAccountModal.tsx - Multi-step modal for adding new accounts
- ConfirmationDialog.tsx - Reusable confirmation dialog
- types.ts - TypeScript interfaces and integration data
Components Updated
- step-context-option.ts - Removed section comments
- step-notifications.tsx - ConditionalComponent pattern fix
- custom-select/index.tsx - Z-index fix for dropdown stacking
- integration/page.tsx - Integrated new components
Assets Added
- Google_Drive_icon.svg
- Onedrive.svg
- TitanIcon.jpeg