Add an optional trend/delta indicator to the StatTile component

[mikewheeleer]

Add an optional trend/delta indicator to the StatTile component

Description

src/components/StatTile.tsx renders a label and a value but cannot show whether a metric moved. The stats page polls every 5s, so a delta indicator would let operators see direction at a glance. This issue extends StatTile with an optional, accessible delta affordance without changing existing call sites.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Add an optional delta?: number (and/or trend?: "up" | "down" | "flat") prop; when present, render an arrow/label with Badge-style coloring and a text alternative for screen readers.
• Keep the prop optional so src/app/stats/Client.tsx and any other consumer compile unchanged.
• Maintain the <dt>/<dd> description-list semantics.

Suggested execution

• Fork the repo and create a branch
• git checkout -b enhancement/stattile-trend-indicator
• Implement changes
  • Write code in: src/components/StatTile.tsx.
  • Write comprehensive tests in: src/components/__tests__/StatTile.test.tsx — no delta renders unchanged, positive/negative/flat states, and an accessible text alternative.
  • Add documentation: document the new prop in README.md.
  • Validate accessibility: color is not the only signal; assert a text/aria-label alternative.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.

Example commit message

feat: add optional trend/delta indicator to StatTile

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.

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.

[stmr]

I can take this on if still available. Planned scope: add an optional typed delta/trend prop to StatTile, keep existing call sites compiling unchanged, preserve dt/dd semantics, add accessible trend text, and cover up/down/flat/no-delta states with focused tests. I will wait for maintainer or GrantFox confirmation before opening a PR.