Update web/src/components/ProfileEditor.tsx

web/src/components/ProfileEditor.tsx

@@ -23,6 +23,7 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
   const [yearLevel, setYearLevel] = useState(user.yearLevel ?? "");
   const [major, setMajor] = useState(user.major ?? "");
 
+  // ✅ bio is editable here (user can override Clare-generated bio)
   const [bio, setBio] = useState(user.bio ?? "");
 
   const [learningStyle, setLearningStyle] = useState(user.learningStyle ?? "visual");
@@ -31,17 +32,21 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
   const [photoPreview, setPhotoPreview] = useState<string | null>(user.avatarUrl ?? null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // keep in sync if user changes while dialog is open
+  // ✅ Keep fields in sync if user changes while dialog is open
   useEffect(() => {
     setName(user.name ?? "");
     setEmail(user.email ?? "");
+
     setStudentId(user.studentId ?? "");
     setDepartment(user.department ?? "");
     setYearLevel(user.yearLevel ?? "");
     setMajor(user.major ?? "");
+
     setBio(user.bio ?? "");
+
     setLearningStyle(user.learningStyle ?? "visual");
     setLearningPace(user.learningPace ?? "moderate");
+
     setPhotoPreview(user.avatarUrl ?? null);
   }, [
     user.name,
@@ -66,13 +71,18 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
       ...user,
       name: name.trim(),
       email: email.trim(),
+
       studentId: studentId.trim() || undefined,
       department: department.trim() || undefined,
       yearLevel: yearLevel || undefined,
       major: major.trim() || undefined,
-      bio: (bio ?? "").slice(0, 200) || undefined,
+
+      // ✅ allow user edit
+      bio: (bio ?? "").slice(0, 200),
+
       learningStyle: learningStyle || undefined,
       learningPace: learningPace || undefined,
+
       avatarUrl: photoPreview || undefined,
     };
 
@@ -224,7 +234,7 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
               </div>
             </div>
 
-            {/* Bio */}
+            {/* Bio (Editable) */}
             <div className="space-y-2">
               <Label htmlFor="edit-bio">Bio</Label>
               <Textarea
@@ -235,7 +245,7 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
                 className="min-h-[100px] resize-none"
                 maxLength={200}
               />
-              <p className="text-xs text-muted-foreground">Brief description for your profile. Max 200 characters.</p>
+              <p className="text-xs text-muted-foreground">Max 200 characters. You can edit this anytime.</p>
             </div>
 
             {/* Learning Preferences */}
@@ -286,4 +296,3 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
     </Dialog>
   );
 }
-