Add per-event JSON copy and collapse controls to event log rows

[mikewheeleer]

Add copy-payload and collapse controls to event log rows

Description

src/app/events/page.tsx renders every event's payload in a fully expanded <pre>{JSON.stringify(e.payload, null, 2)}</pre> block with no way to copy a payload or collapse large ones, so a log of verbose payloads becomes a long scroll. This issue adds a per-row copy button and a collapse/expand affordance.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Add a "Copy JSON" control per row (reuse src/components/Button.tsx) that writes the pretty-printed payload to the clipboard via navigator.clipboard.writeText, feature-detected with a graceful no-op fallback.
• Add a per-row collapse/expand toggle (using aria-expanded and aria-controls) that hides the <pre> block; default to collapsed when the serialized payload exceeds a threshold (e.g. 400 chars).
• Keep the type label, the role="alert" error region, row keying by e.id, and chronological order intact.
• Do not log payloads to the console.

Suggested execution

• Fork the repo and create a branch
• git checkout -b enhancement/events-03-copy-collapse
• Implement changes
  • Write code in: src/app/events/page.tsx using src/components/Button.tsx.
  • Write comprehensive tests in: extend src/app/events/page.test.tsx — mock the clipboard and assert collapse/expand toggles aria-expanded.
  • Add documentation: note the row controls in README.md.
  • Add JSDoc to the copy and collapse helpers.
  • Validate the clipboard call is feature-detected and never throws unhandled.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: small payload, large payload default-collapsed, clipboard available, and clipboard absent.
• Include the full npm test output in the PR description.

Example commit message

feat: add copy-JSON and collapse controls to event log rows

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[ifygreg01-best]

i want to apply for this issue , i have alredy reviewed this issue and i am fast and reliable

[shinzoxD]

Hi maintainers, picking up this GrantFox bounty.

Plan: implement the requested scope on a fork branch with sync-tests, then open a PR referencing this issue.

Payout wallet (Stellar): GBVHELLD2JE235Y2NGTDT3MWI3T65ON6SY4N6FBHYVDAQ5FZC2CP5QXH
GrantFox OSS campaign — smart escrow payout on merge.

— shinzoxD

[xJeffx23]

Hi team! 👋

My name is Jefferson. I have experience with React, TypeScript, frontend development, reusable UI components, accessibility, and automated testing, along with previous open-source contributions.

I'd like to work on this issue by adding the per-row Copy JSON and collapse/expand controls, ensuring accessibility, graceful clipboard handling, comprehensive test coverage, and the required documentation updates.

I'd love the opportunity to contribute to this project. Thank you!

[TochukwuJustice]

Hi I would like to contribute to this issue. I have solid experience with React, Next.js, TypeScript, and Tailwind CSS, and I enjoy building fast, responsive, and maintainable frontend applications. I pay close attention to UI quality, performance, and clean integrations, and I’m confident I can deliver a smooth and reliable solution for this task.