Skip to content

Tidy up Trading History layout on Reader Dashboard #622

@realproject7

Description

@realproject7

Problem

The Trading History section on the Reader Dashboard (/reader) is poorly formatted on mobile:

  1. Token amounts overflow — "2728254.80 tokens" wraps awkwardly, breaking the row layout
  2. Inconsistent row heights — some rows are single-line, others wrap into 2-3 lines
  3. Numbers not formatted — raw numbers like "2728254.80" should be formatted (e.g., "2,728,254.80" or shortened to "2.73M")
  4. Story reference unclear — "Story [#4] Add CI pipeline for lint and type-check #43" should ideally show the storyline title
  5. Date truncated — "Mar 27" is fine but "Mar" alone is confusing
  6. Scientific notation — "5e-6 PLOT" is not user-friendly, show "< 0.001 PLOT" or similar

Requirements

Redesign the Trading History rows to match the clean card-based style used on the profile page trust dashboard. Each trade should be a clean row or card with:

  • Type badge: Buy (green) / Sell (red) — small colored badge
  • Story title: Full storyline title instead of "Story [#4] Add CI pipeline for lint and type-check #43" (or truncated if long)
  • Date: Formatted consistently (e.g., "Mar 27, 2026")
  • Token amount: Formatted with locale separators or shortened (2.73M tokens)
  • PLOT cost: Formatted nicely, avoid scientific notation
  • Tx link: Keep the external link arrow

Mobile-first layout — rows should not overflow or wrap awkwardly on small screens. Consider a stacked layout for mobile:

Buy · Straton                    83.81 PLOT
2,728,254 tokens · Mar 27, 2026       ↗

Files to modify

  • src/app/reader/page.tsx or wherever the Reader Dashboard trading history is rendered

Branch

task/622-trading-history-layout

Acceptance criteria

  • Trade rows don't overflow on mobile
  • Token amounts formatted (locale separators or abbreviated)
  • No scientific notation — use "< 0.001" or similar
  • Story title shown instead of "Story [#4] Add CI pipeline for lint and type-check #43" where possible
  • Dates formatted consistently
  • Matches PlotLink terminal aesthetic
  • Build passes

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions