Visual Affordance Changes Merge Conflict Resolution

[AndrewHUNGNguyen]

NEw branch for #63 to resolve merge conflicts while trying to autosquash from original branch by cherry-picking changes from #67 to this PR.

[AndrewHUNGNguyen]

@samholmes here is a PR for you where I cherry-picked changes from the original branch to this new branch.

[bobbythelobster]

Thanks for resolving the conflicts — this is a meaningful UX improvement overall. Moving setup validation from a disabled submit button to explicit inline errors is a better experience.

What looks good

• Clear required-field affordances (handle, full name, profile photo)
• Inline error messages + error styling improve discoverability
• Submit behavior is improved (attempt submit -> see actionable errors)
• TextInput error state is reusable and cleanly integrated
• noValidate + custom validation in setup is a good direction

Requested follow-ups before merge

1. Handle error clears too early (app/setup/page.tsx)

   • handleHandleChange clears validationErrors.handle as soon as typing starts, even when the value is still invalid (length/pattern/unavailable).
   • Suggestion: after first submit attempt, recompute handle validity on each change instead of unconditional clear.

2. Duplicate :root blocks (app/globals.css)

   • Not a blocker, but please merge duplicated :root declarations for cleanliness.

3. No checks reported on this branch

   • Since this changes setup validation behavior, please run/attach at least a quick smoke/CI confirmation.

Suggested manual test pass

• Empty submit => all required errors appear.
• Invalid handle (ab, illegal chars) after first submit attempt => error persists until valid.
• Unavailable handle shows unavailable state and still blocks submit.
• Uploading photo clears photo error immediately.
• Full name error clears only when non-empty trimmed value exists.