Handle invalid GitHub usernames with user-friendly error UI

[paanipoorie]

Description

Invalid GitHub usernames currently display a raw API/GraphQL error:
"Could not resolve to a User with the login..."

This is not user-friendly and exposes internal messages.

Steps to Reproduce

1. Enter an invalid username (e.g. "ni")
2. Observe error message

Current Behavior

• Raw GraphQL error is shown in UI

Expected Behavior

• Display a user-friendly message:
  "User not found. Please check the username."

Acceptance Criteria

• No raw API/GraphQL errors shown to users
• Friendly error message displayed
• Error UI follows existing design styling
• User can retry without refreshing

Scope

• Frontend-only change
• Do not modify API logic

Screenshots

[itsmessc]

Hi, I'd like to work on this under NSOC'26! Could you please assign it to me?

My plan:

Fetch the badge URL client-side, detect raw GraphQL/API error text in the SVG response, and replace the preview with a friendly "User not found. Please check the username." error UI matching the existing design
Add a retry/clear action so the user can try a different username without refreshing
Also add client-side input validation to block "Copy Link" and "Watch Dashboard" for obviously invalid usernames
Frontend-only, no API logic touched.

[paanipoorie]

@itsmessc
Thanks for your interest in working on this

Your approach looks solid overall, couple of points to refine before I assign it:

• No raw API/GraphQL errors should be visible in the UI
• Show a clear, user-friendly message ("User not found...")
• Keep it frontend-only and consistent with existing design
• Allow retry without page refresh

Also ensure basic client-side validation for usernames and handle loading/edge states cleanly.
Assigning you, feel free to open a PR when ready.