feat(helpcentre): Implement comprehensive Help Centre with search, FAQs, and support channels

[codeunia-dev]

Summary

This PR introduces a fully functional Help Centre section to improve user assistance and support accessibility across the platform.

Key Features Added

• 🔍 Search System: Allows users to quickly find answers to common issues and FAQs.
• 📚 Structured Help Topics: Added categorized sections for Getting Started, Courses, Assessments, and Technical Issues.
• 🧭 Quick Actions: Includes shortcuts for common user tasks such as password reset, reporting bugs, and contacting support.
• 💬 Support Channels: Enhanced UI/UX for contacting support, submitting feedback, and reporting issues.
• 🎨 Design & UX Improvements: Improved layout, consistency, and interactivity for a better user experience.

Technical Details

• Added new components for Help Centre UI and navigation.
• Integrated with support ticket system for direct issue submissions.
• Improved responsiveness and accessibility.

Additional Notes

• Ensure all environment variables and API routes related to support tickets are properly configured before deployment.
• Future enhancements: Add AI-based FAQ suggestions and real-time support chat integration.

Summary by CodeRabbit

• New Features
  • Enhanced Help page with interactive search, dynamic FAQ highlighting, and keyboard accessibility (ESC to close dialogs).
  • Added bug report and contact support submission dialogs on Help page.
  • Introduced live chat and email support options to Help page.
  • Added toast notification system for user feedback.
  • Improved loading experience with skeleton UI on Help page.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Nov 7, 2025 4:34am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This PR introduces a support ticket submission system with dedicated API routes for bug reports and contact forms, enhances the help page with interactive search, dialogs, and keyboard accessibility features, and implements a reusable toast notification system powered by Radix UI.

Changes

Cohort / File(s)	Summary
Support API Routes app/api/support/bug-report/route.ts, app/api/support/contact/route.ts	Added two new POST endpoints that authenticate users via Supabase, validate input (title/description for bugs; subject/message for contact), insert support tickets into the database, and return appropriate HTTP responses with error handling.
Help Page Enhancement app/protected/help/page.tsx	Refactored to support interactive features: debounced search across FAQ categories with result highlighting, collapsible quick action cards, bug report and contact support dialogs with form validation, keyboard accessibility (ESC to close dialogs), loading skeletons, and new sections for live chat, email support, and support hours.
Toast Notification System components/ui/toast.tsx, components/ui/toaster.tsx, components/ui/use-toast.ts	Implemented a complete toast UI system: toast.tsx provides styled Radix UI primitives (Provider, Viewport, Toast, Action, Close, Title, Description); toaster.tsx renders the toast container and manages display; use-toast.ts exports a useToast() hook and toast() function for programmatic control with state management via reducer pattern, toast queueing, and auto-dismissal logic.
Dependency Update package.json	Added @radix-ui/react-toast (^1.2.15) as a new dependency.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Help Page
    participant API Route
    participant Supabase
    participant Toast System

    User->>Help Page: Fill bug report / contact form
    Help Page->>Help Page: Validate form (debounce & check fields)
    Help Page->>API Route: POST request with validated data
    API Route->>Supabase: Authenticate user (getUser)
    Supabase-->>API Route: User ID or error
    alt User Authenticated
        API Route->>Supabase: Insert support_ticket record
        Supabase-->>API Route: Success (ticket_id) or error
        alt Insert Success
            API Route-->>Help Page: 200 + success response
            Help Page->>Toast System: Trigger success toast
            Toast System-->>User: Show notification (auto-dismiss after delay)
        else Insert Error
            API Route-->>Help Page: 500 error
            Help Page->>Toast System: Trigger error toast
            Toast System-->>User: Show error notification
        end
    else Auth Failed
        API Route-->>Help Page: 401 Unauthorized
        Help Page->>Toast System: Trigger auth error toast
        Toast System-->>User: Show error notification
    end

    User->>Help Page: Press ESC or click close
    Help Page->>Help Page: Close dialog

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

• components/ui/use-toast.ts: Requires careful review of the state reducer pattern, memory state management, and timer/queue logic to ensure proper toast lifecycle handling and memory cleanup.
• app/protected/help/page.tsx: Significant refactoring with multiple new state variables, debounced search logic, validation rules per form, and conditional rendering across various UI sections; verify all interactions (search, dialogs, keyboard handling) work cohesively.
• Support API routes: Verify authentication flow, input validation consistency between both routes, and error handling completeness.
• Toast system integration: Ensure new toast components are properly exported and integrated with the use-toast.ts hook; check variant styling and animation behavior.

Possibly related PRs

• feat(help): Add comprehensive help page with FAQ and quick actions #284: Modifies the same file (app/protected/help/page.tsx), likely representing an earlier iteration or related feature work on the help page.

Poem

🐰 A rabbit hops with toast in paw,
Bugs reported without a flaw,
Search and help now dance with glee,
Dialogs close with ESC key!
Notifications pop with Radix flair,
Support flows smoothly everywhere! 🎉

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/helpcentre

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c67464c and 932d863.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (7)

• app/api/support/bug-report/route.ts (1 hunks)
• app/api/support/contact/route.ts (1 hunks)
• app/protected/help/page.tsx (7 hunks)
• components/ui/toast.tsx (1 hunks)
• components/ui/toaster.tsx (1 hunks)
• components/ui/use-toast.ts (1 hunks)
• package.json (1 hunks)

---

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.}