Add a recently-viewed commitments rail to the My Commitments page

[1nonlypiece]

📌 Description

There's a recently-viewed concept for the marketplace, but the My Commitments page (src/app/commitments/page.tsx) has none, so jumping back to a commitment you just inspected requires re-finding it in the grid.

This issue adds a recently-viewed commitments rail scoped to the user's own commitments.

🎯 Requirements and Context

This is a feature / enhancement task for the CommitLabs frontend (Next.js + TypeScript). It must be implemented cleanly, fully typed, accessible, and well tested — and must not regress existing behavior.

• Track recently-viewed commitment ids (bounded, deduped) and render a rail above/within the page.
• Each entry navigates to the detail page; reuse compact card primitives.
• Handle entries for commitments no longer present gracefully.
• Persist locally; keyboard navigable rail.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/my-commitments-recently-viewed

2. Implement the change

• Primary files to add or modify:
  • src/app/commitments/page.tsx — recently-viewed rail.
  • src/components/RecentlyViewedCommitments.tsx — new component.
  • src/app/commitments/[id]/page.tsx — record view.
• Add focused tests in src/components/RecentlyViewedCommitments.test.tsx using Jest / Vitest + React Testing Library (happy-dom), covering rendering, interaction, and the edge cases below.
• Add documentation in docs/RECENTLY_VIEWED.md describing the feature, props/API, accessibility behavior, and a usage example; cross-link it from the relevant README/docs.
• Keep the diff small and reviewer-friendly; reuse existing primitives, hooks, and the typed API client instead of duplicating logic.

3. Cover edge cases

• records on detail view
• bounded + deduped
• missing commitment handled
• rail keyboard navigable

4. Test and commit

• Run the suite (e.g. pnpm test / pnpm vitest run) and ensure new lines are covered.
• Verify keyboard navigation, focus handling, and prefers-reduced-motion where relevant.

Example commit message

feat: recently-viewed commitments rail

✅ Guidelines

• Minimum 95% test coverage on the new/changed lines.
• Clear, reviewer-friendly documentation (props/API + usage example + accessibility notes).
• No regressions to existing components, routes, or tests.
• Fully typed (no any), accessible (labels, roles, live regions where relevant).
• Timeframe: 96 hours.

🏷️ Labels

type-feature · type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN

💬 Community & Support

• Join the CommitLabs contributor Discord to coordinate, ask questions, and get unblocked fast: https://discord.gg/WV7tdYkJk
• Please introduce yourself in the channel before you start so we can avoid duplicate work, pair you with a reviewer, and get your PR merged quickly.
• Maintainers actively triage this channel and aim for fast, clear, respectful reviews — reach out any time you're blocked.

[mikewheeleer]

I would like to work on this issue, and I have good knowledge of smart contacts and Sorabani Rust. Kindly assign it to me.

[julianvillalba688]

Hi team,

I would love to implement the recently-viewed commitments rail feature. It's a fantastic enhancement for user navigation and flow continuity. Here is a brief overview of my experience and how I plan to approach this task:

Experience
I am a frontend developer with extensive experience building performance-driven applications using Next.js (App Router) and TypeScript. I routinely handle client-side persistence strategies (such as local storage synchronization and hydration safety in SSR), build highly accessible, keyboard-navigable UI components (adhering to WAI-ARIA standards), and write comprehensive unit tests with React Testing Library and Vitest/Jest to ensure rigorous logic coverage.

Proposed Approach
View Tracking (src/app/commitments/[id]/page.tsx): I will add a lightweight tracking trigger on the commitment detail page. When loaded, it will append the commitment ID to a local storage-backed array that is bounded (e.g., max 5 items) and automatically de-duplicated.

Modular Rail Component (src/components/RecentlyViewedCommitments.tsx): I will build a clean, accessible, and responsive rail component reusing your compact card primitives. It will explicitly handle the edge case of data sync lag—gracefully ignoring or filtering out any cached IDs if the underlying commitment is no longer found in the user's fetched list.

Integration & Layout (src/app/commitments/page.tsx): I will place the new rail naturally within the dashboard layout above the primary grid, ensuring it hydrates smoothly without layout shifts.

Accessibility & Keyboard Navigation: The rail will feature intuitive focus management, proper roles/labels, and full keyboard navigation (arrow keys or tab-stops) to remain compliant and accessible to all users.

Testing & Documentation: I will create dedicated tests in src/components/RecentlyViewedCommitments.test.tsx achieving over 95% line coverage (testing max-bounds, missing entries, and key events) and document the architecture and prop API in docs/RECENTLY_VIEWED.md.

I can easily deliver this clean, fully typed, regression-free implementation well within the 96-hour window. I'll jump into the Discord channel to introduce myself before kicking things off!

[zergzorg]

I am taking a focused implementation pass on this.

Plan:

• add a bounded, deduped localStorage helper for recently viewed commitment ids
• record the current commitment from the detail page
• render an accessible rail on My Commitments using only commitments still present in the current user list
• add focused component/helper coverage and lightweight docs

I will keep the PR scoped to this rail and avoid unrelated UI changes.