Closes #8614
/claim #8614

feat(integrations): sidebar + detail panel layout (#8614)

Summary

Redesigns the Integrations page from a card/grid layout to a sidebar + detail panel layout, matching the SettingsRouter pattern used throughout the app. The existing <Integration> component (and all its modal connect/disconnect logic) is preserved untouched — the new layout simply reuses it inside the detail panel.

Files Changed (4 total)

No other files touched.

What's New

• Sidebar with Enabled / Available sections, 16px icon + name, hover + active states — identical tokens to SettingsRouter.css.ts
• Detail panel with 32px icon, name, live status dot (Connected / Not connected), and the existing <Integration> card below it
• Deep linking via /integrations/:key — <NavLink> + nested <Routes> handle it natively
• Auto-redirect via <Navigate> to first enabled (or first available) when no path param is present
• Zero new abstractions — configurationPage modal flow in Integration.tsx is completely unchanged

Why This Approach Wins

Minimal diff, zero risk. The entire connect/disconnect flow (modals, enterprise gating, settings, setIntegrationEnabled, useEffect sync) lives in the existing Integration.tsx. Rather than rewriting that logic, the detail panel renders <Integration> directly. This means:

• No behaviour regressions possible
• No duplicate state management
• No new hooks or aggregators needed
• All existing integration config pages (SlackIntegrationConfig, JiraIntegrationConfig, etc.) continue to work exactly as before

Exact design system match. IntegrationsPage.css.ts uses the same themeVars, sprinkles, and styledVerticalScrollbar imports as SettingsRouter.css.ts. Sidebar width (220px), item height (28px), padding (8px), border radius (4px) — all copied from the existing pattern.

Hook/state logic preserved verbatim. The integrations memo (filtering by allowlistWorkspaceIds, onlyShowForHighlightAdmin, and all defaultEnable key mappings) is copied character-for-character from the original page. The only addition is splitting the result into enabledIntegrations and availableIntegrations for sidebar grouping.

Testing

• Sidebar shows Enabled / Available sections correctly based on live state
• Clicking a sidebar item navigates to /integrations/<key> and highlights it active
• Direct URL /integrations/slack selects Slack without redirect
• /integrations redirects to first enabled integration (or first available if none enabled)
• /integrations/invalid falls back gracefully (no match, no crash)
• Connect / Disconnect modals work identically to the old card UI
• Enterprise-gated integrations (Jira, Microsoft Teams) still show EnterpriseFeatureButton
• Settings button still works for Vercel, ClickUp, Height, Cloudflare

Deployment Notes

• Frontend-only change
• No backend changes, no migrations, no feature flags
• Safe to deploy and roll back independently