Add bio field to user model and update related components: Enhance leaderboard and profile features by including a bio field in user data. Update API routes, UI components, and validation logic to support bio input and display, improving user profiles and leaderboard entries.

components/ProfileForm.tsx

@@ -8,6 +8,7 @@ interface UserProfile {
   email: string;
   username: string;
   avatar: string | null;
+  bio: string | null;
   hp: number;
   maxHp: number;
   xp: number;
@@ -38,6 +39,7 @@ export default function ProfileForm({
 
   const [username, setUsername] = useState(initialProfile.username);
   const [avatar, setAvatar] = useState<string | null>(initialProfile.avatar);
+  const [bio, setBio] = useState<string | null>(initialProfile.bio || null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploadingAvatar, setUploadingAvatar] = useState(false);
 
@@ -99,12 +101,14 @@ export default function ProfileForm({
         body: JSON.stringify({
           username,
           avatar,
+          bio,
         }),
       });
 
       if (response.ok) {
         const data = await response.json();
         setProfile(data);
+        setBio(data.bio || null);
         setSuccess("Profil mis à jour avec succès");
         setTimeout(() => setSuccess(null), 3000);
       } else {
@@ -316,6 +320,24 @@ export default function ProfileForm({
               <p className="text-gray-500 text-xs mt-1">3-20 caractères</p>
             </div>
 
+            {/* Bio Field */}
+            <div>
+              <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
+                Bio
+              </label>
+              <textarea
+                value={bio || ""}
+                onChange={(e) => setBio(e.target.value)}
+                className="w-full px-4 py-3 bg-black/40 border border-pixel-gold/30 rounded text-white focus:outline-none focus:border-pixel-gold transition resize-none"
+                rows={4}
+                maxLength={500}
+                placeholder="Parlez-nous de vous..."
+              />
+              <p className="text-gray-500 text-xs mt-1">
+                {(bio || "").length}/500 caractères
+              </p>
+            </div>
+
             {/* Stats Display */}
             <div className="border-t border-pixel-gold/20 pt-6">
               <h3 className="text-pixel-gold text-sm uppercase tracking-widest mb-4">