Social monitoring UI: overview page and project integration

[arberx]

Summary

Add social monitoring pages and components to the web dashboard.

UI Changes

Sidebar

New nav item: Social with Lucide MessageSquare icon.

Social Overview Page (/social)

• Hero metrics row: Three ScoreGauge components:
  • Total Mentions (last 7d)
  • Sentiment Score (% positive)
  • Domain Links (posts linking to canonical domain)
• Platform breakdown table: Rows per platform, columns: Platform, Mentions (7d), Engagement, Sentiment, Domain Links, Status badge (connected/disconnected)
• Recent mentions data table: Platform icon, Author, Content snippet (truncated), Sentiment ToneBadge, Engagement (likes/shares/comments), Posted At, external link icon

Project Command Center Extension

Add "Social Signals" section below existing visibility evidence:

• Summary row: mention count, sentiment split, top subreddit/hashtag
• Social mentions table filtered to project keywords
• Platform filter chips: All | Twitter | Reddit | LinkedIn

Portfolio Overview Extension

Add a "Social" sparkline column to project rows showing 7d mention trend.

Settings Page Extension

Add "Social Platforms" section alongside existing Provider and Google sections:

• Cards per platform with connection status, API key input, connect/disconnect buttons

Files

• apps/web/src/App.tsx (new route)
• apps/web/src/api.ts (social API types + fetch functions)
• apps/web/src/view-models.ts (social view models)
• apps/web/src/build-dashboard.ts (extend for social data)

Design

Follow existing design system: dark theme (zinc-950), data tables not card grids, ToneBadge for status, ScoreGauge for metrics, Manrope font.

Depends on

• Social API endpoints issue

Acceptance Criteria

• Social overview page renders with all sections
• Platform breakdown table shows correct data
• Mentions table supports pagination and filtering
• Project command center shows social signals section
• Settings page allows connecting/disconnecting platforms
• Responsive design (sidebar collapses on mobile)
• Accessibility: aria labels, focus-visible, skip-to-content