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.

[AndrewHUNGNguyen]

Manual test cases:

• Empty submit => all required errors appear.

• Invalid handle (ab, illegal chars) after first submit attempt => error persists until valid.

The case above needs to be enhanced to have message "Please choose a valid handle" on less than 3 characters or including invalid characters (e.g. Something not lowercase letters, numbers, underscores, and hyphens)

• Unavailable handle shows unavailable state and still blocks submit
  https://github.com/user-attachments/assets/c224a3fb-b778-4ba7-9902-c5de8abf75a8

• Uploading photo clears photo error immediately.

[tomatrow]

This is pretty gooood; just approving to see if that will enable the check action.

[tomatrow]

@AndrewHUNGNguyen Thanks buddy; this is a banger

[AndrewHUNGNguyen]

This is pretty gooood; just approving to see if that will enable the check action.

Did a smoke test after your deployment @tomatrow . It looks good on prod.