feat: add real-time character counter with min/max validation and pro…

[Owais-Siddique-11]

feat: add real-time character counter with min/max validation and progress bar

Closes #232

Summary

Added real-time character counter, progress bar, and inline validation feedback to the doubt submission form in AskDoubt.tsx.

Changes

• Added minimum character limit (20) and maximum (500) with real-time enforcement
• Added animated progress bar below textarea that fills and changes color based on input length:
  • Blue → typing started
  • Green → valid length (20–400 chars)
  • Yellow → approaching limit (80%+)
  • Red → over limit
• Added inline validation messages below textarea:
  • "Min 20 · Max 500 characters" when empty
  • "X more characters needed" when too short
  • "Looks good!" when valid
  • "X characters over limit" when too long
• Textarea border color updates dynamically to match validation state
• Submit button disabled when content is too short or too long
• Toast errors shown for invalid submissions

Screenshots

UI changes visible in the doubt submission modal on the community and classroom pages.

[vercel]

@Owais-Siddique-11 is attempting to deploy a commit to the Karan Mani Tripathi 's projects Team on Vercel.

A member of the Team first needs to authorize it.

[knoxiboy]

Technical Review

Hi @Owais-Siddique-11! Thank you for your contribution to DoubtDesk.

The code changes look good. Before we can complete the technical review, approve, and merge this pull request, we have one final requirement for all contributors: Please star the DoubtDesk repository.

Once you have starred the repository, please drop a comment here saying "done" (or we will automatically detect it) and we will proceed with approving and merging your PR. Thank you.

[Copilot]

Pull request overview

Adds real-time length feedback to the doubt submission modal to guide users toward higher-quality submissions and prevent overly long/short questions.

Changes:

• Introduces min/max length validation (20–500) and blocks submission when out of bounds.
• Adds a live character counter with inline validation messaging and dynamic textarea border styling.
• Adds an animated progress bar that reflects typing progress and validation state.

Comments suppressed due to low confidence (1)

components/AskDoubt.tsx:405

• The “empty” helper text is shown only when charCount === 0. If the user types only whitespace, hasContent is false but charCount is non-zero, so none of the helper/validation messages render (blank area). Using !hasContent / content.trim().length === 0 for the empty-state message (and making it mutually exclusive with other states) will avoid this UX gap.

                                        {charCount === 0 && (
                                            <span className="text-slate-500">Min {minLength} · Max {maxLength} characters</span>
                                        )}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[knoxiboy]

Hi there! 👋 Thanks for your contribution to DoubtDesk.

It looks like there are currently some merge conflicts between your branch and the main branch. Could you please pull the latest changes from main, resolve the conflicts, and push the updates to this branch?

Once the conflicts are resolved and the PR is clean, we'll be able to merge it!