Skip to content

feat: market timeline tab#480

Merged
greatest0fallt1me merged 1 commit into
Predictify-org:mainfrom
OG-wura:feature/market-timeline
Jul 24, 2026
Merged

feat: market timeline tab#480
greatest0fallt1me merged 1 commit into
Predictify-org:mainfrom
OG-wura:feature/market-timeline

Conversation

@OG-wura

@OG-wura OG-wura commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Close #450

Summary

Adds a "Timeline" tab to the Market Detail page showing a vertical timeline of market lifecycle events (creation, opening, predictions, odds changes, disputes, resolution, payouts).

Changes

New Files

File Description
types/market-timeline.ts Type definitions for market events (MarketEvent, MarketEventType, MARKET_EVENT_CONFIG) with 10 event types, icons, and color mappings
lib/market-timeline.ts Mock data generator (14 realistic events), relative time formatting, date-based grouping utility
components/market/MarketTimeline.tsx Vertical timeline component with: colored event dots with icons, date-grouped sections, collapse/expand for groups with 4+ events, loading/empty/error states, "Load Older Events" pagination
components/market/__tests__/MarketTimeline.test.tsx 19 tests covering rendering, event display, date grouping, collapse/expand, load more, edge cases

Modified Files

File Description
components/market/MarketDetailTabs.tsx Added "timeline" to TAB_VALUES, added timeline prop, rendered Timeline tab trigger and content
components/market/__tests__/market-detail-tabs.test.tsx Updated to pass timeline prop; added 4 tests for timeline tab switching, deep-linking, and default value
app/(dashboard)/events/event-page/EventDetailsClient.tsx Imported MarketTimeline and passed it as the timeline prop
types/index.ts Re-exported market timeline types

Design Decisions

  • Standalone component: MarketTimeline accepts optional events prop and falls back to mock data — easy to swap in real data later
  • Date grouping: Events grouped by Today/Yesterday/This Week/This Month with automatic collapse at 4+ events
  • Design tokens: Uses text-muted-foreground, bg-card, text-foreground, bg-muted etc. for dark-mode compatibility
  • WCAG: Semantic <time> elements with ISO dateTime, aria-label on collapse buttons, proper heading hierarchy
  • Inline SVGs: Event type icons are inline SVG elements (not emoji) for consistent rendering across platforms
  • Amount display: Financial events show colored badges (green for payouts, blue for liquidity, muted for others)

Testing

PASS components/market/__tests__/MarketTimeline.test.tsx (19 tests)
PASS components/market/__tests__/market-detail-tabs.test.tsx (9 tests, +4 new)
  • All 28 tests passing
  • No lint errors in new/modified files
  • No type-check errors in new/modified files

@vercel

vercel Bot commented Jul 23, 2026

Copy link
Copy Markdown

@OG-wura 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.

@drips-wave

drips-wave Bot commented Jul 23, 2026

Copy link
Copy Markdown

@OG-wura Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@greatest0fallt1me
greatest0fallt1me merged commit 6ffb0ae into Predictify-org:main Jul 24, 2026
1 check failed
@grantfox-oss grantfox-oss Bot mentioned this pull request Jul 24, 2026
4 tasks
@greatest0fallt1me

Copy link
Copy Markdown
Contributor

LGTM — solid tests too. Merged 🌟

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add MarketDetail 'Timeline' tab

2 participants