(SP: 3) [Frontend] Q&A Progress Tracking and Accordion State UX

[ViktorSvertoka]

Summary

• add per-topic Q&A progress tracking based on viewed accordion items
• add a progress bar and viewed counter above the accordion list
• add reset progress action for the current topic
• add viewed state and bookmark persistence in localStorage
• add viewed and bookmark indicators to accordion rows
• improve mobile accordion layout for wrapped question titles
• restore chevron toggle behavior and open-state rotation
• localize Q&A progress labels and reset action
• fix question totals by removing text-based deduplication in the Q&A API
• update About hero LinkedIn followers fallback to 1.8k+

Closes #403

Summary by CodeRabbit

Release Notes

• New Features

  • Q&A section now displays progress tracking with a visual progress bar, showing viewed items per category with dynamic gradient colors.
  • Added reset progress button to clear viewed/bookmarked items within the current category.
  • Responsive progress indicators optimize display across screen sizes.

• Updates

  • Updated LinkedIn followers count.
  • Added Polish and Ukrainian localization support for Q&A features.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ignored	Preview	Mar 15, 2026 7:24pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6112f674-cc90-418c-bc8a-f649d5ddb4da

📥 Commits

Reviewing files that changed from the base of the PR and between 605926d and 1f2d9f1.

📒 Files selected for processing (13)

• frontend/app/api/questions/[category]/route.ts
• frontend/components/about/HeroSection.tsx
• frontend/components/q&a/AccordionList.tsx
• frontend/components/q&a/QaSection.tsx
• frontend/components/q&a/useQaTabs.ts
• frontend/components/shared/GitHubStarButton.tsx
• frontend/components/tests/q&a/accordion-list.test.tsx
• frontend/components/tests/q&a/qa-section.test.tsx
• frontend/components/tests/q&a/use-qa-tabs.test.tsx
• frontend/components/ui/accordion.tsx
• frontend/messages/en.json
• frontend/messages/pl.json
• frontend/messages/uk.json

---

📝 Walkthrough

Walkthrough

This PR implements Q&A progress tracking with per-category viewed item counts, a reset button to clear progress, bookmark support, improved accordion UI with external chevron toggles, and API deduplication fixes. Internationalization support is added for progress labels in English, Polish, and Ukrainian.

Changes

Cohort / File(s)	Summary
Q&A Progress Tracking frontend/components/q&a/AccordionList.tsx, frontend/components/q&a/QaSection.tsx, frontend/components/q&a/useQaTabs.ts	Added totalItems prop threading, category-scoped viewed/bookmarked state via localStorage, progress bar UI with reset button, and improved badge/bookmark rendering with responsive styling.
Q&A Component Tests frontend/components/tests/q&a/accordion-list.test.tsx, frontend/components/tests/q&a/qa-section.test.tsx, frontend/components/tests/q&a/use-qa-tabs.test.tsx	Updated test mocks to support new totalItems prop; added test cases for progress tracking, reset functionality, and viewed/bookmarked state persistence.
Accordion UI Enhancement frontend/components/ui/accordion.tsx	Added optional chevronOutside prop to enable external toggle button with rotation styling; maintains existing trigger behavior and leading/trailing props.
GitHub Star Button State Refactor frontend/components/shared/GitHubStarButton.tsx	Refactored animation state management from single state to independent displayCount/finalCount variables with cache-aware initialization via requestAnimationFrame.
Internationalization frontend/messages/en.json, frontend/messages/pl.json, frontend/messages/uk.json	Added progressLabel and resetProgress translation keys for QA section in English, Polish, and Ukrainian.
API Deduplication Fix frontend/app/api/questions/[category]/route.ts	Removed text-based deduplication logic from dedupeItems; now deduplicates by item.id only.
About Section Update frontend/components/about/HeroSection.tsx	Updated LinkedIn followers count from '1.7k+' to '1.8k+'.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• (SP: 3) [Frontend] Q&A Progress Tracking and Accordion State UX #403: This PR directly implements all objectives from the Q&A Progress Tracking and Accordion State UX issue, including progress display, reset action, bookmark support, localStorage persistence, accordion UX improvements, chevron restoration, i18n support, and API deduplication fix.

Possibly related PRs

• (SP: 2) [Frontend] Q&A Viewed and Bookmark Indicators #402: Directly related; this PR extends the viewed/bookmark localStorage logic and AccordionTrigger UI changes introduced in #402 with category-scoped tracking, progress visualization, and reset functionality.
• (SP: 2) [Frontend] Q&A UI refresh #169: Related at code level; both modify Q&A components (AccordionList, QaSection, useQaTabs) and pagination logic.
• (SP: 1) [Frontend] Fix UI Q&A spacing, accordion borders, and button backgrounds #171: Related; both modify AccordionList.tsx and useQaTabs.ts with state and props changes.

Suggested labels

bug

Suggested reviewers

• AM1007

Poem

🐰 Progress bars now glow and dance,
With checkmarks worn with such great stance,
Reset buttons let questions rest,
While bookmarks mark the very best,
The accordion chevroned outside,
Shows viewed progress with accordion pride! 🎯

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch bug-fix/qa

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}