feat: add optimistic UI on TrendingRail primary action with revert on failure (Closes #834)

[waterWang]

Summary

Adds optimistic UI on TrendingRail's primary action (card click) with revert on failure, as requested in issue #834.

Changes

app/components/TrendingRail.tsx

• Converted card divs to clickable buttons with type="button"
• Added optimisticId state to track which card is being acted upon
• Added actionError state for error messages
• Added handlePrimaryAction function implementing the optimistic UI pattern:
  1. Optimistic: Immediately shows the card as highlighted with a spinner
  2. Action: Calls /api/trending/action POST endpoint
  3. Success: Clears optimistic state after brief delay
  4. Failure: Reverts to normal state and shows error toast (auto-dismiss after 3s)
• Other cards are disabled while one is in optimistic state
• Added aria-label with card details and aria-pressed for accessibility

app/components/TrendingRail.module.css

• Added .cardClickable class with cursor: pointer and :focus-visible outline
• Added .cardOptimistic class with highlighted border, background, and scale transform
• Added .optimisticSpinner with CSS rotation animation
• Added .actionErrorToast with slide-in animation
• Added .cardClickable:disabled for disabled state

app/components/TrendingRail.test.tsx

• Added describe('Optimistic UI on primary action') block with 5 tests:
  • Cards render as clickable buttons
  • Optimistic state shown immediately on card click
  • Optimistic state reverts on action failure with error toast
  • Optimistic state clears on success
  • Other cards disabled while one is optimistic

Testing

• All existing tests continue to pass
• New tests cover optimistic UI scenarios
• WCAG 2.1 AA: keyboard accessible with focus-visible, aria-label, aria-pressed

Closes #834

[vercel]

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.