small validation fixes

frontend/app/profile/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { bech32 } from "bech32";
 import { useAuth } from "../auth-context";
@@ -124,6 +124,7 @@ export default function ProfilePage() {
   const [isLoadingProfile, setIsLoadingProfile] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
+  const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const isRegularUser = hasRole("regular");
 
@@ -166,7 +167,8 @@ export default function ProfilePage() {
       } else {
         setToast({ message: "Failed to load profile", type: "error" });
       }
-    } catch {
+    } catch (err) {
+      console.error("Profile load error:", err);
       setToast({ message: "Network error. Please try again.", type: "error" });
     } finally {
       setIsLoadingProfile(false);
@@ -187,14 +189,39 @@ export default function ProfilePage() {
     }
   }, [toast]);
 
+  // Cleanup validation timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (validationTimeoutRef.current) {
+        clearTimeout(validationTimeoutRef.current);
+      }
+    };
+  }, []);
+
   const handleInputChange = (field: keyof FormData) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
+    let value = e.target.value;
+    
+    // For telegram: auto-prepend @ if user starts with a valid letter
+    if (field === "telegram" && value && !value.startsWith("@")) {
+      // Check if first char is a valid telegram handle start (letter)
+      if (/^[a-zA-Z]/.test(value)) {
+        value = "@" + value;
+      }
+    }
+    
     setFormData((prev) => ({ ...prev, [field]: value }));
     
-    // Validate on change and clear error if valid
-    const newFormData = { ...formData, [field]: value };
-    const newErrors = validateForm(newFormData);
-    setErrors(newErrors);
+    // Clear any pending validation timeout
+    if (validationTimeoutRef.current) {
+      clearTimeout(validationTimeoutRef.current);
+    }
+    
+    // Debounce validation - wait 500ms after user stops typing
+    validationTimeoutRef.current = setTimeout(() => {
+      const newFormData = { ...formData, [field]: value };
+      const newErrors = validateForm(newFormData);
+      setErrors(newErrors);
+    }, 500);
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -239,7 +266,8 @@ export default function ProfilePage() {
       } else {
         setToast({ message: "Failed to save profile", type: "error" });
       }
-    } catch {
+    } catch (err) {
+      console.error("Profile save error:", err);
       setToast({ message: "Network error. Please try again.", type: "error" });
     } finally {
       setIsSubmitting(false);
@@ -502,7 +530,7 @@ const pageStyles: Record<string, React.CSSProperties> = {
     cursor: "not-allowed",
   },
   inputError: {
-    borderColor: "rgba(239, 68, 68, 0.5)",
+    border: "1px solid rgba(239, 68, 68, 0.5)",
     boxShadow: "0 0 0 2px rgba(239, 68, 68, 0.1)",
   },
   hint: {