feat: create Help & Support / FAQ page (issue #179) #202
Conversation
- Add comprehensive FAQ page with searchable and categorized questions - Implement accordion-style expandable FAQ items - Add category filters (Getting Started, Voting, Creating Elections, Security & Privacy, Troubleshooting) - Include contact/support section with multiple support channels - Add Help navigation link in header - Fix body overflow to enable scrolling - Implement dark mode support for Help page - Use Framer Motion for smooth animations - Responsive design for all screen sizes
WalkthroughAdds a Help page with searchable, categorized FAQs and support links; adds a "Help" menu item to the header; enables vertical page scrolling by changing body overflow-y to auto. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
client/app/globals.css (1)
5-9: Consider scoping scroll enabling to avoid regressions in pages/modals that relied onbody { overflow-y: hidden; }.
If the app uses body scroll-lock for overlays, this global change can reintroduce background scrolling; consider moving this to a layout wrapper (or toggling via a class) instead of applying unconditionally.client/app/help/page.tsx (2)
193-223: Accordion a11y is incomplete (missingaria-expanded,aria-controls, and a region id).
This is a quick win for screen readers and keyboard users.- <button - onClick={() => toggleFAQ(faq.question)} + <button + onClick={() => toggleFAQ(faq.question)} + aria-expanded={expandedFAQ === faq.question} + aria-controls={`faq-panel-${index}`} className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors duration-200" > ... - {expandedFAQ === faq.question && ( + {expandedFAQ === faq.question && ( <motion.div + id={`faq-panel-${index}`} + role="region" + aria-label={faq.question} initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }}
146-152: Search input needs an accessible label (placeholder isn’t a label).
Addaria-label(or a visually-hidden<label>).<input type="text" placeholder="Search for help..." + aria-label="Search FAQs" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
client/app/components/Header/Header.tsx(2 hunks)client/app/globals.css(1 hunks)client/app/help/page.tsx(1 hunks)
🔇 Additional comments (4)
client/app/components/Header/Header.tsx (1)
7-23: Help nav item wiring looks consistent (desktop + mobile) and should “just work”.
No concerns with adding the icon import and a/helproute entry tomenuItems.client/app/help/page.tsx (3)
195-195: Verify Tailwind supportsdark:hover:bg-gray-750(likely invalid in default palette).
If it’s not customized, the class will be ignored; preferdark:hover:bg-gray-700/dark:hover:bg-gray-800(or add a custom color).
3-3:exitanimations won’t run withoutAnimatePresencewrapping the conditional content.
If you want smooth collapse, wrap the conditional panel withAnimatePresenceand import it.-import { motion } from "framer-motion"; +import { motion, AnimatePresence } from "framer-motion"; ... - {expandedFAQ === faq.question && ( - <motion.div + <AnimatePresence initial={false}> + {expandedFAQ === faq.question && ( + <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.3 }} className="px-6 pb-4" - > - <p className="text-gray-600 dark:text-gray-300 leading-relaxed"> - {faq.answer} - </p> - </motion.div> - )} + > + <p className="text-gray-600 dark:text-gray-300 leading-relaxed"> + {faq.answer} + </p> + </motion.div> + )} + </AnimatePresence>Also applies to: 211-223
18-91: Please verify/soften FAQ claims and “Community” link to avoid misleading support/security statements.
Examples: “ZK-SNARKs”, “All smart contracts are audited”, and the list of supported testnets can become incorrect; also the “Discord or Slack” CTA currently points to the org homepage rather than an invite/support channel.Also applies to: 274-285
- Add AnimatePresence for smooth exit animations - Use stable keys (faq.question) instead of array index - Add aria-expanded, aria-controls, and aria-label for accessibility - Fix dark mode hover color from gray-750 to gray-700 - Wrap conditional accordion panels with AnimatePresence - Add role='region' to FAQ panels for screen readers
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
client/app/help/page.tsx (1)
18-100: Consider extracting FAQ data for better maintainability.The FAQ data is comprehensive, but hardcoding it in the component makes it harder to maintain as it grows. Consider moving
faqsandcategoriesto a separate data file (e.g.,helpData.ts).Example structure:
// helpData.ts export const faqs: FAQ[] = [ /* ... */ ]; export const categories = [ /* ... */ ];Then import in the component:
import { faqs, categories } from './helpData';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
client/app/help/page.tsx(1 hunks)
🔇 Additional comments (4)
client/app/help/page.tsx (4)
1-16: LGTM! Clean imports and interface definition.The imports are appropriate, and the FAQ interface is well-structured for the component's needs.
102-118: Good fix! Stable identifier pattern correctly implemented.The previous review's concern about index-based state has been addressed. The component now uses
faq.questionas a stable identifier for the accordion state, which prevents desynchronization when filtering changes.
137-177: LGTM! Well-implemented search and filter UI.The search bar includes proper accessibility attributes, and the category filters have clear visual states. Dark mode support is comprehensive throughout.
244-313: LGTM! Support section properly implemented.The external links correctly include
rel="noopener noreferrer"for security, and the responsive grid layout works well across screen sizes.
- Add generatePanelId helper function to create stable identifiers - Replace index-based aria-controls with stable panel IDs - Ensure ARIA associations remain correct when filtering/reordering - Improves accessibility for screen readers
1 participant
Add comprehensive FAQ page with searchable and categorized questions
Description
Include a summary of the change and which issue is fixed. List any dependencies that are required for this change.
Fixes # (issue)
Type of change
Please mark the options that are relevant.
Checklist:
Summary by CodeRabbit
New Features
Style / UX
✏️ Tip: You can customize this high-level summary in your review settings.