Bobby Lobster Changes

Author: Andrew Nguyen

app/globals.css

@@ -4,8 +4,6 @@
 
 :root {
 	--error-color: #f87171;
-}
-:root {
 	--b1: #000000;
 	--n: 21% 0.003 296.813;
 }

app/setup/page.tsx

@@ -17,6 +17,15 @@ type NametagData = {
 	profilePhoto: string
 }
 
+/** Same rules as the availability effect: empty, format, or not explicitly available. */
+function getHandleHasError(handle: string, handleAvailable: boolean | null): boolean {
+	const trimmed = handle.trim()
+	const handleRegex = /^(?:[a-z0-9_]|-)+$/
+	const formatInvalid =
+		!trimmed || !handleRegex.test(handle) || handle.length < 3 || handle.length > 30
+	return formatInvalid || handleAvailable !== true
+}
+
 export default function Setup() {
 	const [loading, setLoading] = useState(true)
 	const [saving, setSaving] = useState(false)
@@ -207,19 +216,27 @@ export default function Setup() {
 
 	const handleHandleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setHandle(e.target.value.toLowerCase())
-		// Clear error when user starts typing
-		if (hasAttemptedSubmit && validationErrors.handle) {
-			setValidationErrors((prev) => ({ ...prev, handle: false }))
-		}
 	}
 
+	// After first submit, recompute handle error from current value + availability (not unconditional clear on keystroke)
+	useEffect(() => {
+		if (!hasAttemptedSubmit) return
+
+		const handleError = getHandleHasError(handle, handleAvailable)
+
+		setValidationErrors((prev) => {
+			if (prev.handle === handleError) return prev
+			return { ...prev, handle: handleError }
+		})
+	}, [handle, handleAvailable, hasAttemptedSubmit])
+
 	const handleFinishSetup = async (e: React.FormEvent) => {
 		e.preventDefault()
 		setHasAttemptedSubmit(true)
 
 		// Validate form and set error states
 		const errors = {
-			handle: !handle.trim() || !handleAvailable,
+			handle: getHandleHasError(handle, handleAvailable),
 			profilePhoto: !nametagData.profilePhoto,
 			fullName: !nametagData.fullName.trim()
 		}