From a571de6a14a14a85daad3fc4310e8b306f681a97 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 13 Mar 2026 02:23:41 +0800
Subject: [PATCH] feat(profile): improve profile editing UX flow

---
 src/pages/Profile.tsx | 224 ++++++++++++++++++++++--------------------
 1 file changed, 117 insertions(+), 107 deletions(-)

diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 896923a..a6e68c4 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -8,7 +8,7 @@ import {
   removeProfilePicture 
 } from "../api/users"
 import { Button } from "../components/ui/button"
-import { Camera, Edit2, Trash2, User as UserIcon, UploadCloud } from "lucide-react"
+import { Camera, Edit2, Trash2, User as UserIcon, UploadCloud, X, Check } from "lucide-react"
 import JalaliDatePicker from "../components/ui/JalaliDatePicker"
 import { toast } from "sonner"
 import { Modal } from "../components/Modal"
@@ -54,8 +54,8 @@ export default function Profile() {
     }
   }
 
-  // Modals state
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
+  // Modals & Editing state
+  const [isEditing, setIsEditing] = useState(false)
   const [isPicModalOpen, setIsPicModalOpen] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
 
@@ -89,10 +89,15 @@ export default function Profile() {
         description: user.description || "",
         birth_date: user.birth_date || "",
       })
-      setIsEditModalOpen(true)
+      setIsEditing(true)
     }
   }
 
+  const handleCancelEdit = () => {
+    setIsEditing(false)
+    setFormData({})
+  }
+
   const handleSaveProfile = async () => {
     setIsSaving(true)
     try {
@@ -108,7 +113,7 @@ export default function Profile() {
       
       const updatedUser = await updateUserProfile(payload)
       setUser(prev => prev ? { ...prev, ...updatedUser } : updatedUser)
-      setIsEditModalOpen(false)
+      setIsEditing(false)
       toast.success(t.profile.toasts.successEdit)
     } catch (error) {
       toast.error(t.profile.toasts.error)
@@ -209,145 +214,150 @@ export default function Profile() {
               </h1>
               <p className="text-slate-500 dark:text-slate-400 mt-1">{user.email || "-"}</p>
             </div>
-
-            <Button onClick={handleEditClick} className="flex items-center gap-2">
-              <Edit2 className="h-4 w-4" />
-              {t.profile?.editInfo || 'Edit Profile'}
-            </Button>
           </div>
 
           {/* Details Card */}
           <div className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
-            <h2 className="text-lg font-bold text-slate-900 dark:text-white mb-6 border-b border-slate-100 dark:border-slate-800 pb-4">
-              {t.profile?.title || 'Personal Information'}
-            </h2>
+            
+            {/* Header with Title and Edit Button */}
+            <div className="flex items-center justify-between mb-6 border-b border-slate-100 dark:border-slate-800 pb-4">
+              <h2 className="text-lg font-bold text-slate-900 dark:text-white">
+                {t.profile?.title || 'Personal Information'}
+              </h2>
+              
+              {!isEditing && (
+                <Button onClick={handleEditClick} className="flex items-center gap-2">
+                  <Edit2 className="h-4 w-4" />
+                  {t.profile?.editInfo || 'Edit Profile'}
+                </Button>
+              )}
+            </div>
             
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              
+              {/* Row 1: First Name | Last Name */}
               <div className="space-y-1">
                 <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.firstName || 'First Name'}</span>
-                <p className="font-medium text-slate-900 dark:text-slate-100">{user.first_name || "-"}</p>
+                {isEditing ? (
+                  <input
+                    type="text"
+                    value={formData.first_name || ""}
+                    onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
+                    disabled={isSaving}
+                    className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                ) : (
+                  <p className="font-medium text-slate-900 dark:text-slate-100 min-h-[38px] flex items-center">{user.first_name || "-"}</p>
+                )}
               </div>
+
               <div className="space-y-1">
                 <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.lastName || 'Last Name'}</span>
-                <p className="font-medium text-slate-900 dark:text-slate-100">{user.last_name || "-"}</p>
+                {isEditing ? (
+                  <input
+                    type="text"
+                    value={formData.last_name || ""}
+                    onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
+                    disabled={isSaving}
+                    className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
+                ) : (
+                  <p className="font-medium text-slate-900 dark:text-slate-100 min-h-[38px] flex items-center">{user.last_name || "-"}</p>
+                )}
               </div>
+
+              {/* Row 2: Mobile | Email */}
               <div className="space-y-1">
                 <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.mobileNumber || 'Mobile'}</span>
-                <p className="font-medium text-slate-900 dark:text-slate-100 flex items-center">
+                <p className="font-medium text-slate-900 dark:text-slate-100 min-h-[38px] flex items-center">
                   {toPersianNum(user.mobile)}
                 </p>
               </div>
+
               <div className="space-y-1">
-                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.birthDate || 'Birth Date'}</span>
-                <p className="font-medium text-slate-900 dark:text-slate-100">
-                  {formatDate(user.birth_date)} {user.age ? `(${toPersianNum(user.age)} ${t.profile?.yearsOld})` : ""}
-                </p>
-              </div>
-              <div className="space-y-1 md:col-span-2">
-                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.description || 'Description'}</span>
-                <p className="font-medium text-slate-900 dark:text-slate-100 whitespace-pre-wrap">{user.description || "-"}</p>
-              </div>
-              {user.created_at && (
-                <div className="space-y-1 md:col-span-2">
-                  <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.dateJoined || 'Date Joined'}</span>
-                  <p className="font-medium text-slate-900 dark:text-slate-100">
-                    {formatDate(user.created_at)}
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-
-        </div>
-
-        {/* Edit Profile Modal */}
-        {isEditModalOpen && (
-          <Modal
-            isOpen={isEditModalOpen}
-            isFa={isFa}
-            onClose={() => setIsEditModalOpen(false)}
-            title={t.profile?.title || "Edit Profile"}
-            maxWidth="max-w-lg"
-            footer={
-              <>
-                <button
-                  type="button"
-                  onClick={() => setIsEditModalOpen(false)}
-                  className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg"
-                >
-                  {t.cancel || "Cancel"}
-                </button>
-                <button
-                  onClick={handleSaveProfile}
-                  disabled={isSaving}
-                  className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg disabled:opacity-50"
-                >
-                  {isSaving ? "Saving..." : t.profile?.save || "Save"}
-                </button>
-              </>
-            }
-          >
-            <div className="space-y-4">
-             
-              <div className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="text-sm font-medium dark:text-slate-300">{t.profile?.firstName || 'First Name'}</label>
-                    <input
-                      type="text"
-                      value={formData.first_name || ""}
-                      onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
-                      className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white"
-                    />
-                  </div>
-                  <div>
-                    <label className="text-sm font-medium dark:text-slate-300">{t.profile?.lastName || 'Last Name'}</label>
-                    <input
-                      type="text"
-                      value={formData.last_name || ""}
-                      onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
-                      className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label className="text-sm font-medium dark:text-slate-300">{t.profile?.email || 'Email'}</label>
+                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.email || 'Email'}</span>
+                {isEditing ? (
                   <input
                     type="email"
                     value={formData.email || ""}
                     onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                    className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white flex-row-reverse"
+                    disabled={isSaving}
                     dir="ltr"
+                    className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
-                </div>
+                ) : (
+                  <p className="font-medium text-slate-900 dark:text-slate-100 min-h-[38px] flex items-center">{user.email || "-"}</p>
+                )}
+              </div>
 
-                <JalaliDatePicker
-                  label={t.profile?.birthDate || 'Birth Date'}
-                  value={formData.birth_date}
-                  onChange={(date) => setFormData({ ...formData, birth_date: date })}
-                  disabled={isSaving}
-                />
+              {/* Row 3: Birth Date | Date Joined */}
+              <div className="space-y-1">
+                {isEditing ? (
+                  <div className="pt-1">
+                    <JalaliDatePicker
+                      label={t.profile?.birthDate || 'Birth Date'}
+                      value={formData.birth_date}
+                      onChange={(date) => setFormData({ ...formData, birth_date: date })}
+                      disabled={isSaving}
+                    />
+                  </div>
+                ) : (
+                  <>
+                    <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.birthDate || 'Birth Date'}</span>
+                    <p className="font-medium text-slate-900 dark:text-slate-100 min-h-[38px] flex items-center">
+                      {formatDate(user.birth_date)} {user.age ? `(${toPersianNum(user.age)} ${t.profile?.yearsOld || 'years'})` : ""}
+                    </p>
+                  </>
+                )}
+              </div>
 
-                <div>
-                  <label className="text-sm font-medium dark:text-slate-300">{t.profile?.description || 'Description'}</label>
+              <div className="space-y-1">
+                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.dateJoined || 'Date Joined'}</span>
+                <p className="font-medium text-slate-900 dark:text-slate-100 min-h-[38px] flex items-center">
+                  {formatDate(user.created_at)}
+                </p>
+              </div>
+
+              {/* Row 4: Description (Full Width) */}
+              <div className="space-y-1 md:col-span-2">
+                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.description || 'Description'}</span>
+                {isEditing ? (
                   <textarea
-                    rows={3}
+                    rows={4}
                     value={formData.description || ""}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                    className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white resize-none"
+                    disabled={isSaving}
+                    className="mt-1 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y"
                   />
-                </div>
+                ) : (
+                  <p className="font-medium text-slate-900 dark:text-slate-100 whitespace-pre-wrap mt-1">{user.description || "-"}</p>
+                )}
               </div>
             </div>
-          </Modal>
-        )}
+
+            {/* Save/Cancel Buttons at Bottom (Visible only when editing) */}
+            {isEditing && (
+              <div className="mt-8 pt-4 border-t border-slate-100 dark:border-slate-800 flex justify-end items-center gap-3">
+                <Button variant="outline" onClick={handleCancelEdit} disabled={isSaving} className="flex items-center gap-2">
+                  <X className="h-4 w-4" />
+                  {t.cancel || 'Cancel'}
+                </Button>
+                <Button onClick={handleSaveProfile} disabled={isSaving} className="flex items-center gap-2 bg-blue-600 text-white hover:bg-blue-700">
+                  <Check className="h-4 w-4" />
+                  {isSaving ? "Saving..." : (t.profile?.save || 'Save')}
+                </Button>
+              </div>
+            )}
+
+          </div>
+
+        </div>
 
         {/* Profile Picture Modal */}
-        
         {isPicModalOpen && (
         <Modal
           isOpen={isPicModalOpen}
+          isFa={isFa}
           onClose={() => !isSaving && setIsPicModalOpen(false)}
           title={t.profile?.changePicture || 'Profile Picture'}
           maxWidth="max-w-sm"