Description

Create a read-only card component that displays prediction market information within a thread view. The card shows market status, current probability, collateral locked, time remaining, and provides a cancel button for thread authors.

Technical Context

Type: feature
Category: ui
Priority: high
Risk: low

Architecture Notes

• Follow ThreadPollCard pattern from client/scripts/views/pages/view_thread/ThreadPollCard.tsx
• Use React Query hooks from PM-6 for data fetching
• Component must handle all market states: draft, active, resolved, cancelled
• Probability visualization uses proportional bar (green for PASS, red for FAIL)

Implementation Steps

• Create ThreadPredictionMarketCard.tsx component with PredictionMarket props interface
• Implement status badge display (draft/active/resolved/cancelled)
• Build probability bar visualization with green (PASS) / red (FAIL) proportional fill
• Display total collateral locked, time remaining countdown, market prompt
• Add cancel button (visible only to thread author when status is draft/active)
• Wire up useGetPredictionMarketsQuery(threadId) hook for data
• Create skeleton loading state component
• Add responsive layout with mobile breakpoints
• Style with prediction_market_cards.scss following design system patterns

Testing Requirements

• Unit tests:
  • Renders correctly for each status (draft, active, resolved, cancelled)
  • Probability bar calculates correct proportions (55% PASS = 55% green fill)
  • Cancel button only visible to thread author
  • Time remaining displays correctly (hours, days)
  • Skeleton shown during loading state
• Integration tests:
  • Fetches market data via React Query hook
  • Cancel action triggers mutation and invalidates cache
• Manual verification:
  • Visual regression testing for all states
  • Responsive layout on mobile/tablet/desktop
  • Accessibility (screen reader, keyboard navigation)

Acceptance Criteria

• Card displays market prompt, status badge, probability bar, total collateral, time remaining
• Probability bar shows proportional green (PASS) / red (FAIL) fill based on current_probability
• Cancel button only visible to thread author when market is draft or active
• Clicking cancel triggers useCancelPredictionMarketMutation and shows confirmation
• Skeleton loading state displayed while data fetching
• Responsive layout works on mobile, tablet, and desktop
• Component follows design system patterns (spacing, typography, colors)
• pnpm -r check-types passes

Created with Claude by gent