Summary

This PR delivers a comprehensive, Figma-aligned redesign of the Integrations page, transitioning from the legacy card-grid to a modern Sidebar + Master-Detail architecture. This overhaul strictly adheres to Highlight’s internal design tokens and component patterns.

Key Highlights for Reviewers:

• Master-Detail Architecture: Replaces the rigid grid with a dual-pane view (240px sidebar + dynamic content panel).
• Architecture Refactor: Decoupled shared types into IntegrationTypes.ts to resolve import dependency issues across 18+ files (Auth callbacks, Settings tables, etc.).
• Design Token Compliance: 100% migration to @highlight-run/ui components and Vanilla Extract (.css.ts). Zero raw hex codes or !important overrides.
• Initialization Stability: Included a defensive null-check in constants.ts to prevent “white-screen” crashes in environments with incomplete variable initialization.

How did you test this change?

Frontend Testing:

• Sidebar Navigation: Verified active states and hover effects using Highlight design tokens.
• Conditional Tabs: Verified that the Detail Panel correctly toggles between “Description” and “Configuration” views.
• Deep Linking: Verified that /<project_id>/integrations/:integration_type correctly loads the specific state.
• Type Safety: Verified full project compilation with tsc --noEmit (Exit code 0).

Screencast:

https://github.com/user-attachments/assets/6a82b5ca-9932-4b89-9358-c520750f54d5

Are there any deployment considerations?

No backend migrations or data backfilling required. This is a purely frontend UI/UX refactor.

Does this work require review from our design team?

Yes — Requesting review from @julian-highlight to ensure perfect alignment with the intended Figma specs for the Master-Detail transition.

/claim #8614 /closes #8614