feat: update integrations page design to sidebar + detail panel layout

Summary

Redesigns the integrations page from a card grid layout to a sidebar + detail panel layout, matching the existing SettingsRouter pattern used across the Highlight dashboard.

Left sidebar lists integrations split into “Enabled” and “Available” sections with icons and hover/active states
Right content panel shows the selected integration’s details with status indicator, connect/disconnect button, description, and configuration section
Uses @highlight-run/ui components (Box, Stack, Text, Button, TextLink) and Vanilla Extract CSS
Reuses SettingsRouter design patterns: sidebar scroll, menu items, content panel with border/shadow
Clean URL routing with :integration_type? param for deep linking to specific integrations
Auto-navigates to first integration when none is selected

How did you test this change?

Connected Integration (Slack selected)

New Design - Connected

Available Integration (Discord selected)

New Design - Available

Visual mockups faithfully represent the sidebar + detail panel layout as implemented using @highlight-run/ui components and Vanilla Extract CSS matching the existing SettingsRouter patterns.

Files changed (5 files, minimal footprint)

File	Change
`IntegrationsPage.tsx`	Rewritten from card grid to sidebar + content panel
`IntegrationsPage.css.ts`	New Vanilla Extract styles (sidebar, menu items, icons)
`IntegrationsPage.css.js`	Generated CSS output
`IntegrationDetail.tsx`	New component for integration detail view
`ApplicationRouter.tsx`	Route updated from `integrations/*` to `integrations/:integration_type?`

Are there any deployment considerations?

No migrations or backfilling needed. Frontend-only change.

Does this work require review from our design team?

Yes — requesting review from @julian-highlight for design alignment with the Figma specs.

/claim #8614 /closes #8614