HI

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.

Changes

  • 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

Files Changed

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?

Testing

  • Verified sidebar navigation works correctly
  • Verified integration detail panel displays correctly
  • Verified connect/disconnect flow works
  • Verified URL routing and deep linking

Deployment Considerations

No migrations or backfilling needed. Frontend-only change.

/claim #8614 /closes #8614

Claim

Total prize pool $250
Total paid $0
Status Pending
Submitted March 06, 2026
Last updated March 06, 2026

Contributors

RE

realmpastai-web

@realmpastai-web

 100%

Sponsors

HI

Highlight (YC W23)

@highlight

$250