Summary

Redesigns the integrations page from a flat card grid to a sidebar + detail panel layout, matching the design system used in Settings (SettingsRouter pattern).

Changes

New files:

• IntegrationsPage.css.ts — Vanilla Extract styles (sidebar, menu items, icons, status badges) mirroring SettingsRouter.css.ts patterns
• IntegrationDetail.tsx — Detail panel component with icon, name, status, connect/disconnect buttons, about section, and IntegrationModal integration

Modified files:

• IntegrationsPage.tsx — Replaced LeadAlignLayout card grid with Box-based sidebar + content panel using NavLink for navigation
• ApplicationRouter.tsx — Changed route from integrations/* to integrations/:integration_type? for deep linking support

Design Decisions

• Sidebar shows ‘Enabled’ (connected) and ‘Available’ (not connected) sections with integration icons
• Detail panel displays integration info, connection status, and action buttons
• Enterprise-gated integrations (Jira, MS Teams) use EnterpriseFeatureButton
• Deep linking: Each integration has its own URL (e.g., /integrations/slack)
• Auto-navigation: Redirects to first integration if none selected
• Follows existing Vanilla Extract + @highlight-run/ui Box/Stack/Text component patterns
• No new dependencies added

Checklist

• Vanilla Extract CSS (no CSS modules or inline styles)
• Uses @highlight-run/ui/components (Box, Stack, Text)
• Follows SettingsRouter sidebar pattern
• Changeset included
• All existing integration hooks preserved (14 integrations)
• Enterprise feature gating maintained

/claim #8614