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

Author: Umang-Khemka

frontend/src/components/Navigation/Navbar/Navbar.tsx

@@ -81,7 +81,13 @@ export function Navbar() {
         <ThemeSelector />
         <div className="flex items-center space-x-2">
           <span className="hidden text-sm sm:inline-block">
-            Welcome <span className="text-muted-foreground">{userName}</span>
+            Welcome{' '}
+            <span
+              className="text-muted-foreground inline-block max-w-[150px] truncate align-bottom"
+              title={userName}
+            >
+              {userName.split(' ')[0]}
+            </span>
           </span>
           <Link to="/settings#account" className="p-2">
             <img

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx

@@ -40,6 +40,7 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
   const isEditing = useSelector(
     (state: RootState) => state.onboarding.isEditing,
   );
+  const [longWordError, setLongWordError] = useState(false);
 
   useEffect(() => {
     if (
@@ -56,6 +57,13 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
   };
 
   const handleNameChange = (value: string) => {
+    const words = value.split(' ');
+    const hasLongWord = words.some((word) => word.length > 30);
+    if (hasLongWord) {
+      setLongWordError(true);
+      return;
+    }
+    setLongWordError(false);
     setLocalName(value);
   };
 
@@ -115,6 +123,11 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
               onChange={(e) => handleNameChange(e.target.value)}
               className="h-8 text-sm placeholder:text-sm"
             />
+            {longWordError && (
+              <p className="mt-2 text-xs text-red-500">
+                A single word in your name cannot exceed 30 characters.
+              </p>
+            )}
           </div>
 
           {/* Avatar Grid */}
@@ -128,18 +141,16 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
                     type="button"
                     key={avatar}
                     onClick={() => handleAvatarSelect(avatar)}
-                    className={`bg-background relative inline-flex h-20 w-20 items-center justify-center rounded-full transition-all duration-300 ${
-                      isSelected
+                    className={`bg-background relative inline-flex h-20 w-20 items-center justify-center rounded-full transition-all duration-300 ${isSelected
                         ? 'border-primary ring-primary ring-offset-background ring-2 ring-offset-2'
                         : 'border-muted'
-                    }`}
+                      }`}
                   >
                     <img
                       src={avatar}
                       alt="Avatar"
-                      className={`h-20 w-20 rounded-full object-cover transition-all duration-300 ${
-                        isSelected ? 'scale-105' : ''
-                      }`}
+                      className={`h-20 w-20 rounded-full object-cover transition-all duration-300 ${isSelected ? 'scale-105' : ''
+                        }`}
                     />
                   </button>
                 );
@@ -152,7 +163,7 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
           <Button
             className="cursor-pointer px-4 py-1 text-sm"
             onClick={handleNextClick}
-            disabled={!name || !selectedAvatar}
+            disabled={!name || !selectedAvatar || longWordError}
           >
             Next
           </Button>

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

@@ -19,6 +19,7 @@ const AccountSettingsCard: React.FC = () => {
     return avatars.includes(stored) ? stored : '';
   });
   const [nameError, setNameError] = useState(false);
+  const [longWordError, setLongWordError] = useState(false);
 
   // The redundant useEffect has been removed.
 
@@ -27,10 +28,15 @@ const AccountSettingsCard: React.FC = () => {
   };
 
   const handleNameChange = (value: string) => {
-    setLocalName(value);
-    if (nameError) {
-      setNameError(false);
+    const words = value.split(' ');
+    const hasLongWord = words.some((word) => word.length > 30);
+    if (hasLongWord) {
+      setLongWordError(true);
+      return;
     }
+    setLongWordError(false);
+    setLocalName(value);
+    if (nameError) setNameError(false);
   };
 
   const handleSave = () => {
@@ -72,12 +78,16 @@ const AccountSettingsCard: React.FC = () => {
               }
               value={name}
               onChange={(e) => handleNameChange(e.target.value)}
-              className={`h-10 w-full text-sm placeholder:text-sm ${
-                nameError
-                  ? 'border-red-500 placeholder:text-red-500/80 focus-visible:ring-red-500'
-                  : ''
-              }`}
+              className={`h-10 w-full text-sm placeholder:text-sm ${nameError
+                ? 'border-red-500 placeholder:text-red-500/80 focus-visible:ring-red-500'
+                : ''
+                }`}
             />
+            {longWordError && (
+              <p className="mt-2 text-xs text-red-500">
+                A single word in your name cannot exceed 30 characters.
+              </p>
+            )}
           </div>
 
           {/* Avatar Section */}
@@ -91,18 +101,16 @@ const AccountSettingsCard: React.FC = () => {
                     type="button"
                     key={avatar}
                     onClick={() => handleAvatarSelect(avatar)}
-                    className={`bg-background relative inline-flex h-24 w-24 items-center justify-center rounded-full transition-all duration-300 ${
-                      isSelected
-                        ? 'ring-offset-background scale-90 ring-2 ring-blue-500 ring-offset-4'
-                        : 'hover:ring-4 hover:ring-blue-500 hover:ring-offset-4'
-                    }`}
+                    className={`bg-background relative inline-flex h-24 w-24 items-center justify-center rounded-full transition-all duration-300 ${isSelected
+                      ? 'ring-offset-background scale-90 ring-2 ring-blue-500 ring-offset-4'
+                      : 'hover:ring-4 hover:ring-blue-500 hover:ring-offset-4'
+                      }`}
                   >
                     <img
                       src={avatar}
                       alt="Avatar"
-                      className={`h-24 w-24 rounded-full object-cover transition-all duration-300 ${
-                        isSelected ? 'brightness-110' : ''
-                      }`}
+                      className={`h-24 w-24 rounded-full object-cover transition-all duration-300 ${isSelected ? 'brightness-110' : ''
+                        }`}
                     />
                   </button>
                 );