feat: add dedicated FAQ page and navigation link#134
Conversation
|
@YLaxmikanth is attempting to deploy a commit to the karan3431's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
🎉 Thank you for your Pull Request! We're thrilled to have your contribution to FreshScan AI. Before we review, please make sure you have:
A maintainer will review your code as soon as possible! |
|
Warning
|
| Layer / File(s) | Summary |
|---|---|
FAQPage accordion component src/pages/FAQPage.tsx |
Defines the faqs dataset (title, icon, content), initializes openIndex state at 0, and renders a button-driven accordion where clicking toggles the active item, rotates the chevron, and conditionally shows the answer text. |
Route registration and navbar link src/App.tsx, src/components/Navbar.tsx |
Imports FAQPage and registers a /faq route inside the existing Layout-wrapped Routes; adds a "FAQ" entry to the Navbar's links array. Note: Navbar.tsx gains an extra closing } at EOF (line 172–173), which warrants a syntax check. |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
🐇 A bunny asked, "How fresh is this fish?"
So I hopped and I coded a wish —
An accordion neat,
With chevrons that tweet,
Now/faqanswers every dish! 🐟
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title accurately and concisely summarizes the main change: adding a FAQ page with a navigation link, which is the primary focus of the changeset. |
| Linked Issues check | ✅ Passed | All requirements from issue #123 are met: new route at /faq, accordion-style component, and three FAQ sections on fish positioning, freshness scores, and Market Map usage. |
| Out of Scope Changes check | ✅ Passed | All changes are directly related to implementing the FAQ feature requested in issue #123; no unrelated modifications were introduced. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/Navbar.tsx (1)
57-62:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winKeep the new nav item on the i18n path.
Line 61 hardcodes
"FAQ"while sibling links uset(...); this creates mixed-language navbar behavior after language switching.Suggested fix
const links = [ { to: '/', label: t('home') }, { to: '/scanner', label: t('scanner') }, { to: '/map', label: t('trustMap') }, - { to: '/faq', label: 'FAQ' }, + { to: '/faq', label: t('faq') }, ];🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Navbar.tsx` around lines 57 - 62, The FAQ link in the links array within the Navbar component uses a hardcoded string 'FAQ' instead of the translation function t() like the other navigation items (home, scanner, trustMap). Replace the hardcoded 'FAQ' label with t('faq') to ensure consistent translation behavior across all navigation items when users switch languages.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/FAQPage.tsx`:
- Around line 52-77: The accordion button element is missing ARIA attributes
required for proper accessibility. Add an aria-expanded attribute to the button
that reflects the open state (true when openIndex equals index, false
otherwise), add a unique id to the content div that displays when the accordion
is expanded, and add an aria-controls attribute to the button that references
the content div's id. This enables assistive technologies to properly announce
the expanded/collapsed state and understand the relationship between the control
button and the content panel.
---
Outside diff comments:
In `@src/components/Navbar.tsx`:
- Around line 57-62: The FAQ link in the links array within the Navbar component
uses a hardcoded string 'FAQ' instead of the translation function t() like the
other navigation items (home, scanner, trustMap). Replace the hardcoded 'FAQ'
label with t('faq') to ensure consistent translation behavior across all
navigation items when users switch languages.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 5dc6fe53-128a-43c9-894f-93d541c6ce36
📒 Files selected for processing (3)
src/App.tsxsrc/components/Navbar.tsxsrc/pages/FAQPage.tsx
| <button | ||
| className="w-full p-5 flex items-center justify-between text-left" | ||
| onClick={() => | ||
| setOpenIndex(openIndex === index ? null : index) | ||
| } | ||
| > | ||
| <div className="flex items-center gap-3"> | ||
| <faq.icon size={20} className="text-neon" /> | ||
| <span className="font-semibold">{faq.title}</span> | ||
| </div> | ||
|
|
||
| <ChevronDown | ||
| size={18} | ||
| className={`transition-transform ${ | ||
| openIndex === index ? "rotate-180" : "" | ||
| }`} | ||
| /> | ||
| </button> | ||
|
|
||
| {openIndex === index && ( | ||
| <div className="px-5 pb-5"> | ||
| <p className="text-on-surface-variant"> | ||
| {faq.content} | ||
| </p> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Add ARIA state/linkage for the accordion controls.
Line 52 renders interactive disclosure controls, but the button/panel pair has no aria-expanded/aria-controls + id linkage, so assistive tech can’t reliably interpret expanded state.
Suggested fix
{faqs.map((faq, index) => (
+ const panelId = `faq-panel-${index}`;
+ const buttonId = `faq-button-${index}`;
+ return (
<div
key={index}
className="bg-surface-mid hover:bg-surface-high transition-colors duration-200"
>
<button
+ id={buttonId}
className="w-full p-5 flex items-center justify-between text-left"
+ aria-expanded={openIndex === index}
+ aria-controls={panelId}
onClick={() =>
setOpenIndex(openIndex === index ? null : index)
}
>
@@
- {openIndex === index && (
- <div className="px-5 pb-5">
+ {openIndex === index && (
+ <div
+ id={panelId}
+ role="region"
+ aria-labelledby={buttonId}
+ className="px-5 pb-5"
+ >
<p className="text-on-surface-variant">
{faq.content}
</p>
</div>
)}
</div>
+ );
))}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/FAQPage.tsx` around lines 52 - 77, The accordion button element is
missing ARIA attributes required for proper accessibility. Add an aria-expanded
attribute to the button that reflects the open state (true when openIndex equals
index, false otherwise), add a unique id to the content div that displays when
the accordion is expanded, and add an aria-controls attribute to the button that
references the content div's id. This enables assistive technologies to properly
announce the expanded/collapsed state and understand the relationship between
the control button and the content panel.
1 participant
Description
Closes #123
What was implemented
Added a dedicated FAQ page at
/faqCreated an accordion-style FAQ interface for better user guidance
Added explanations for:
Added a FAQ navigation link in the navbar
Integrated the FAQ page into the application routing
Validation
npm run build/faqroute loads correctlyScreenshots
Summary by CodeRabbit