feat: add long word validation for name input in onboarding and settings

[Umang-Khemka]

Summary

The following changes have been made to fix the navbar layout breaking due to long user names:

• Truncate long names in the navbar showing only the first name with full name visible on hover
• Added word-length validation (max 30 chars per word) in onboarding to prevent continuous strings
• Added word-length validation (max 30 chars per word) in settings to prevent continuous strings
• Show error message when a continuous string exceeds 30 characters

Addressed Issues:

Fixes #1280

Screenshots:

Before:

After:

Additional Notes:

Changes are limited to 3 frontend files only:

• frontend/src/components/Navbar.tsx

• frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx

• frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx

• This PR does not contain AI-generated code at all.

• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• New Features

  • Added name field validation that prevents saving names containing words longer than 30 characters, with inline error messaging in profile setup and account settings.

• Improvements

  • Updated welcome message display to show only the user's first name, with the full name available as a tooltip on hover.

[coderabbitai]

Walkthrough

This PR addresses navbar layout breaking from excessively long user names by truncating the navbar display to the first word and enforcing a 30-character-per-word limit on name input across onboarding and settings flows. Validation blocks form submission and displays inline error messages when violated.

Changes

Name Validation and Display Truncation

Layer / File(s)	Summary
Navbar name display truncation frontend/src/components/Navigation/Navbar/Navbar.tsx	Navbar "Welcome" section now displays only the first word of userName (via userName.split(' ')[0]), wrapped in a span with CSS truncation and a title attribute exposing the full name for tooltip hover.
Onboarding name validation frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx	AvatarSelectionStep adds longWordError state, validates that no single word exceeds 30 characters during handleNameChange, renders an inline red error message, and disables the Next button when validation fails. Avatar and button classNames are reformatted.
Settings name validation frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx	AccountSettingsCard implements identical per-word validation with longWordError state in handleNameChange, displays inline error messaging, and reformats avatar/button styling into multiline className expressions while preserving conditional selection logic.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• AOSSIE-Org/PictoPy#606: Overlaps with AccountSettingsCard name validation and state management patterns.

Suggested labels

TypeScript/JavaScript

Suggested reviewers

• rahulharpal1603

Poem

🐰 A name too long once broke the frame,
So first words only, stakes the claim!
Thirty chars per word, we validate,
No truncated feelings—just one first state! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding long word validation for name input across onboarding and settings components.
Linked Issues check	✅ Passed	The PR implements word-length validation (30 chars max) in onboarding and settings, and truncates navbar display to first name with tooltip. All coding objectives from issue #1280 are addressed.
Out of Scope Changes check	✅ Passed	Minor className reformatting in avatar buttons is incidental to validation logic and does not introduce scope creep beyond the stated objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx (1)

60-67: ⚡ Quick win

Extract name-word validation into a shared helper to avoid drift with Settings.

The same 30-char-per-word validation now exists in multiple components; centralizing it will keep onboarding and settings behavior consistent.

Suggested direction

+// src/utils/nameValidation.ts
+export const hasWordLongerThan = (value: string, max = 30): boolean =>
+  value.trim().split(/\s+/).some((word) => word.length > max);

- const words = value.split(' ');
- const hasLongWord = words.some((word) => word.length > 30);
+ const hasLongWord = hasWordLongerThan(value, 30);

As per coding guidelines "Look for code duplication".

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx` around lines
60 - 67, Extract the 30-char-per-word check into a shared helper (e.g.,
validateNameWords or isNameWordTooLong) in a common utils/module used by both
onboarding and settings, replace the inline logic in AvatarSelectionStep (the
value.split, hasLongWord, setLongWordError, setLocalName block) to call the
helper and setLongWordError based on its boolean result, and update the Settings
component to use the same helper so the rule is centralized and cannot drift.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/Navigation/Navbar/Navbar.tsx`:
- Around line 84-90: Guard the userName value before calling split to avoid
runtime errors in the Navbar render: locate the span that currently uses
userName.split(' ')[0] and change it to first check that userName is a non-empty
string (e.g., via optional chaining or a conditional) and fall back to an empty
string or placeholder when absent; ensure the JSX uses that safe expression (or
a small helper like getFirstName(userName)) so the navbar does not crash when
profile state is not yet populated.

In `@frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx`:
- Around line 60-67: Add automated unit tests for the per-word validation in
AvatarSelectionStep: create tests that render AvatarSelectionStep, simulate user
input into the name field and assert that setLongWordError state behavior is
reflected (error message visible and "Next" button disabled) for a 31-character
word, that a 30-character word passes, that multi-space inputs are handled
(ignore extra spaces and validate words correctly), and that recovery works
(enter invalid input, then change to valid input and assert error is cleared and
"Next" enabled). Target the validation logic that splits value into words and
uses hasLongWord (the code that calls setLongWordError and setLocalName) and
assert DOM changes rather than internal state. Ensure tests cover boundary
values, multi-space edge cases, and recovery after invalid input.

In `@frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx`:
- Around line 86-90: The longWordError validation currently only shows a message
but does not prevent submitting—update the save control to be disabled whenever
longWordError is true (and any other validation flags) so users cannot click
Save while the error is active; locate the Save button or submit handler in
AccountSettingsCard (e.g., the Save button element and the onSave/onSubmit
logic) and add a disable condition like disabled={longWordError || isSaving ||
otherValidationFlags} and/or guard the submit handler to return early if
longWordError is set to ensure the previous valid name cannot be submitted while
an avatar is selected.

---

Nitpick comments:
In `@frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx`:
- Around line 60-67: Extract the 30-char-per-word check into a shared helper
(e.g., validateNameWords or isNameWordTooLong) in a common utils/module used by
both onboarding and settings, replace the inline logic in AvatarSelectionStep
(the value.split, hasLongWord, setLongWordError, setLocalName block) to call the
helper and setLongWordError based on its boolean result, and update the Settings
component to use the same helper so the rule is centralized and cannot drift.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6179f1bd-c2ab-4358-8654-5cd41bb9ba0d

📥 Commits

Reviewing files that changed from the base of the PR and between a20c1bb and 11210c0.

📒 Files selected for processing (3)

• frontend/src/components/Navigation/Navbar/Navbar.tsx
• frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx
• frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx

[rohan-pandeyy]

Thank you for your contribution @Umang-Khemka !