From 5e56daad3f5b0d8b63cc7bc6f44c566eb9de4047 Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Sat, 4 Apr 2026 22:19:45 +0700
Subject: [PATCH] Create Edit Mode for Profile

---
 src/icons/add-photo.svg |   3 +
 src/icons/edit-x.svg    |   3 +
 src/icons/save.svg      |   3 +
 src/index.html          |  95 +++++++++------
 src/main.js             | 205 +++++++++++++++++++++++++++----
 src/styles.css          | 264 ++++++++++++++++++++++++++++++++++++++--
 6 files changed, 505 insertions(+), 68 deletions(-)
 create mode 100644 src/icons/add-photo.svg
 create mode 100644 src/icons/edit-x.svg
 create mode 100644 src/icons/save.svg

diff --git a/src/icons/add-photo.svg b/src/icons/add-photo.svg
new file mode 100644
index 0000000..dd72160
--- /dev/null
+++ b/src/icons/add-photo.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 10.5V13.6C21 15.8402 21 16.9603 20.564 17.816C20.1805 18.5686 19.5686 19.1805 18.816 19.564C17.9603 20 16.8402 20 14.6 20H7.4C5.15979 20 4.03969 20 3.18404 19.564C2.43139 19.1805 1.81947 18.5686 1.43597 17.816C1 16.9603 1 15.8402 1 13.6V8.4C1 6.15979 1 5.03969 1.43597 4.18404C1.81947 3.43139 2.43139 2.81947 3.18404 2.43597C4.03969 2 5.15979 2 7.4 2H11.5M18 7V1M15 4H21M15 11C15 13.2091 13.2091 15 11 15C8.79086 15 7 13.2091 7 11C7 8.79086 8.79086 7 11 7C13.2091 7 15 8.79086 15 11Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/icons/edit-x.svg b/src/icons/edit-x.svg
new file mode 100644
index 0000000..ea5ef6f
--- /dev/null
+++ b/src/icons/edit-x.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 1L1 17M1 1L17 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/icons/save.svg b/src/icons/save.svg
new file mode 100644
index 0000000..f25fea3
--- /dev/null
+++ b/src/icons/save.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 1V4.4C5 4.96005 5 5.24008 5.10899 5.45399C5.20487 5.64215 5.35785 5.79513 5.54601 5.89101C5.75992 6 6.03995 6 6.6 6H13.4C13.9601 6 14.2401 6 14.454 5.89101C14.6422 5.79513 14.7951 5.64215 14.891 5.45399C15 5.24008 15 4.96005 15 4.4V2M15 19V12.6C15 12.0399 15 11.7599 14.891 11.546C14.7951 11.3578 14.6422 11.2049 14.454 11.109C14.2401 11 13.9601 11 13.4 11H6.6C6.03995 11 5.75992 11 5.54601 11.109C5.35785 11.2049 5.20487 11.3578 5.10899 11.546C5 11.7599 5 12.0399 5 12.6V19M19 7.32548V14.2C19 15.8802 19 16.7202 18.673 17.362C18.3854 17.9265 17.9265 18.3854 17.362 18.673C16.7202 19 15.8802 19 14.2 19H5.8C4.11984 19 3.27976 19 2.63803 18.673C2.07354 18.3854 1.6146 17.9265 1.32698 17.362C1 16.7202 1 15.8802 1 14.2V5.8C1 4.11984 1 3.27976 1.32698 2.63803C1.6146 2.07354 2.07354 1.6146 2.63803 1.32698C3.27976 1 4.11984 1 5.8 1H12.6745C13.1637 1 13.4083 1 13.6385 1.05526C13.8425 1.10425 14.0376 1.18506 14.2166 1.29472C14.4184 1.4184 14.5914 1.59135 14.9373 1.93726L18.0627 5.06274C18.4086 5.40865 18.5816 5.5816 18.7053 5.78343C18.8149 5.96237 18.8957 6.15746 18.9447 6.36154C19 6.59171 19 6.8363 19 7.32548Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/index.html b/src/index.html
index de8e85a..a44b364 100644
--- a/src/index.html
+++ b/src/index.html
@@ -546,16 +546,28 @@ <h4>Recent Activity</h4>
     <div class="profile-header-info">
       <div class="profile-header-name-row">
         <div id="profile-header-avatar-container"></div>
-        <h3 id="profile-name" class="cutoff chat-contact-with-status btn"></h3>
+        <h3 id="profile-name" class="cutoff chat-contact-with-status"></h3>
+      </div>
+      <span id="profile-status" class="cutoff chat-contact-status"></span>
+    </div>
+    <div id="profile-edit-bar" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; padding: 0 20px; background-color: rgba(22,22,22,0.95);">
+      <div id="profile-edit-cancel-btn">
+        <span class="icon icon-edit-x"></span>
+        <span>Exit</span>
+      </div>
+      <span id="profile-edit-mode-label" style="font-size: 12px; opacity: 0.6; position: absolute; left: 50%; transform: translateX(-50%);">Edit Mode is enabled.</span>
+      <div id="profile-edit-save-btn">
+        <span class="icon icon-save"></span>
+        <span>Save</span>
       </div>
-      <span id="profile-status" class="cutoff chat-contact-status btn"></span>
     </div>
   </div>
   <div class="profile-content">
-  <div style="position: relative;">
+  <div id="profile-banner-container" style="position: relative;">
     <img id="profile-banner" class="profile-banner">
-    <div class="profile-banner-edit btn">
-      <span class="icon icon-edit"></span>
+    <div id="profile-edit-btn" class="profile-banner-edit profile-share-btn profile-option btn">
+      <span class="icon icon-edit navbar-icon"></span>
+      <p class="navbar-text">Edit</p>
     </div>
     <div id="profile-share-btn" class="profile-share-btn profile-option btn">
       <span class="icon icon-share navbar-icon"></span>
@@ -563,43 +575,54 @@ <h3 id="profile-name" class="cutoff chat-contact-with-status btn"></h3>
     </div>
     <div class="profile-avatar-container">
       <img id="profile-avatar" class="profile-avatar">
-      <div class="profile-avatar-edit btn">
-        <span class="icon icon-plus-circle"></span>
-      </div>
     </div>
   </div>
   <div>
-    <h3 id="profile-secondary-name" class="chat-contact-with-status btn"></h3>
-    <span id="profile-secondary-status" class="cutoff chat-contact-status btn" style="width: 90%;"></span>
-    <div id="profile-badges" style="margin-top: 5px;"><img id="profile-badge-invites" src="./icons/vector_badge_hex_placeholder.svg" class="btn" style="height: 30px; width: 30px; display: none;"><img id="profile-badge-fawkes" src="./icons/fawkes_mask.svg" class="btn" style="height: 30px; width: 30px; margin-left: 5px; display: none;"></div>
-    <div id="profile-option-list" class="profile-options">
-      <div id="profile-option-message" class="profile-option">
-        <span class="icon icon-message navbar-icon"></span>
-        <p class="navbar-text">Message</p>
-      </div>
-      <div id="profile-option-mute" class="profile-option">
-        <span class="icon icon-volume-mute navbar-icon"></span>
-        <p class="navbar-text">Mute</p>
-      </div>
-      <div id="profile-option-share" class="profile-option">
-        <span class="icon icon-share navbar-icon"></span>
-        <p class="navbar-text">Share</p>
-      </div>
-      <div id="profile-option-more" class="profile-option btn" style="position: relative;">
-        <span class="icon icon-dots-horizontal navbar-icon"></span>
-        <p class="navbar-text">More</p>
-        <div id="profile-more-dropdown" class="profile-more-dropdown" style="display: none;">
-          <div id="profile-option-nickname" class="profile-more-item">
-            <span>Nickname</span>
-            <span class="icon icon-edit" style="width: 18px; height: 18px; background-color: white;"></span>
-          </div>
-          <div id="profile-option-block" class="profile-more-item">
-            <span style="color: #ff4444;">Block</span>
-            <span class="icon icon-x-user" style="width: 18px; height: 18px; background-color: #ff4444;"></span>
-          </div>
+        <h3 id="profile-secondary-name" class="chat-contact-with-status btn"></h3>
+<span id="profile-secondary-status" class="cutoff chat-contact-status btn" style="width: 90%;"></span>
+<div id="profile-edit-fields" style="display: none; flex-direction: column; gap: 12px; width: 90%; margin: 16px auto 0;">
+  <label class="profile-edit-label">Username</label>
+  <div class="profile-edit-field-wrapper">
+    <div id="profile-edit-name" class="profile-edit-field-text"></div>
+  </div>
+  <label class="profile-edit-label">Status</label>
+  <div class="profile-edit-field-wrapper">
+    <div id="profile-edit-status" class="profile-edit-field-text"></div>
+  </div>
+  <label class="profile-edit-label">Bio</label>
+  <div class="profile-edit-field-wrapper profile-edit-field-bio">
+    <div id="profile-edit-bio" class="profile-edit-field-text"></div>
+  </div>
+</div>
+<div id="profile-badges" style="margin-top: 5px;"><img id="profile-badge-invites" src="./icons/vector_badge_hex_placeholder.svg" class="btn" style="height: 30px; width: 30px; display: none;"><img id="profile-badge-fawkes" src="./icons/fawkes_mask.svg" class="btn" style="height: 30px; width: 30px; margin-left: 5px; display: none;"></div>
+  <div id="profile-option-list" class="profile-options">
+    <div id="profile-option-message" class="profile-option">
+      <span class="icon icon-message navbar-icon"></span>
+      <p class="navbar-text">Message</p>
+    </div>
+    <div id="profile-option-mute" class="profile-option">
+      <span class="icon icon-volume-mute navbar-icon"></span>
+      <p class="navbar-text">Mute</p>
+    </div>
+    <div id="profile-option-share" class="profile-option">
+      <span class="icon icon-share navbar-icon"></span>
+      <p class="navbar-text">Share</p>
+    </div>
+    <div id="profile-option-more" class="profile-option btn" style="position: relative;">
+      <span class="icon icon-dots-horizontal navbar-icon"></span>
+      <p class="navbar-text">More</p>
+      <div id="profile-more-dropdown" class="profile-more-dropdown" style="display: none;">
+        <div id="profile-option-nickname" class="profile-more-item">
+          <span>Nickname</span>
+          <span class="icon icon-edit" style="width: 18px; height: 18px; background-color: white;"></span>
+        </div>
+        <div id="profile-option-block" class="profile-more-item">
+          <span style="color: #ff4444;">Block</span>
+          <span class="icon icon-x-user" style="width: 18px; height: 18px; background-color: #ff4444;"></span>
         </div>
       </div>
     </div>
+  </div>
       <span id="profile-description" class="chat-contact-status" style="width: 90%; white-space: pre-line; overflow-wrap: break-word; font-style: normal; margin-top: 10px; text-align: center; display: block;"></span>
       <textarea id="profile-description-editor" class="chat-contact-status profile-description-editor" style="display: none; margin-top: 10px;"></textarea>
       <div style="margin: 40px 0 0 0; width: 90%; padding-left: 5%;">
diff --git a/src/main.js b/src/main.js
index 794b198..baa68af 100644
--- a/src/main.js
+++ b/src/main.js
@@ -46,6 +46,12 @@ const domProfileHeaderAvatarContainer = document.getElementById('profile-header-
 const domProfileName = document.getElementById('profile-name');
 const domProfileStatus = document.getElementById('profile-status');
 // Note: these are 'let' due to needing to use `.replaceWith` when hot-swapping profile elements
+let fProfileEditMode = false;
+let objProfileEditSnapshot = {};
+const domProfileEditBtn = document.getElementById('profile-edit-btn');
+const domProfileEditBar = document.getElementById('profile-edit-bar');
+const domProfileEditCancelBtn = document.getElementById('profile-edit-cancel-btn');
+const domProfileEditSaveBtn = document.getElementById('profile-edit-save-btn');
 let domProfileBanner = document.getElementById('profile-banner');
 let domProfileAvatar = document.getElementById('profile-avatar');
 const domProfileNameSecondary = document.getElementById('profile-secondary-name');
@@ -4292,7 +4298,7 @@ async function setupRustListeners() {
     _on('mls_error', (evt) => {
         const { group_id, error } = evt.payload || {};
         console.error('[MLS] Background operation failed:', group_id, error);
-        showToast(error || 'Group operation failed');
+        showToast(error || 'Group Operation Failed');
     });
 
     // Listen for MLS initial sync completion after joining a group
@@ -4457,7 +4463,7 @@ async function setupRustListeners() {
 
     // Listen for backend error toasts
     _on('show_toast', (evt) => {
-        showToast(evt.payload || 'An error occurred');
+        showToast(evt.payload || 'An Error Occurred');
     });
 
     // Listen for Attachment Download Progress events
@@ -5128,7 +5134,7 @@ async function setupRustListeners() {
 
     // Listen for Mini App crashes (Android renderer process crash)
     _on('miniapp_crashed', () => {
-        showToast('Mini App crashed unexpectedly');
+        showToast('Mini App Crashed Unexpectedly');
     });
 
     await Promise.all(_p);
@@ -5996,7 +6002,7 @@ function renderProfileTab(cProfile) {
             placeholder.classList.add('profile-banner');
             if (cProfile.mine) {
                 placeholder.classList.add('btn');
-                placeholder.onclick = askForBanner;
+                placeholder.onclick = null;
             }
             domProfileBanner.replaceWith(placeholder);
             domProfileBanner = placeholder;
@@ -6010,8 +6016,7 @@ function renderProfileTab(cProfile) {
         }
     }
     domProfileBanner.classList.add('profile-banner');
-    domProfileBanner.onclick = cProfile.mine ? askForBanner : null;
-    if (cProfile.mine) domProfileBanner.classList.add('btn');
+    domProfileBanner.onclick = null;
 
     // Avatar - keep original structure but add click handler
     const profileAvatarSrc = getProfileAvatarSrc(cProfile);
@@ -6027,8 +6032,6 @@ function renderProfileTab(cProfile) {
             const placeholder = createPlaceholderAvatar(false, 175);
             placeholder.classList.add('profile-avatar');
             if (cProfile.mine) {
-                placeholder.classList.add('btn');
-                placeholder.onclick = askForAvatar;
             }
             domProfileAvatar.replaceWith(placeholder);
             domProfileAvatar = placeholder;
@@ -6039,8 +6042,7 @@ function renderProfileTab(cProfile) {
         domProfileAvatar = newAvatar;
     }
     domProfileAvatar.classList.add('profile-avatar');
-    domProfileAvatar.onclick = cProfile.mine ? askForAvatar : null;
-    if (cProfile.mine) domProfileAvatar.classList.add('btn');
+    domProfileAvatar.onclick = null;
 
     // Secondary Display Name - use profile's npub as fallback
     const strNamePlaceholder = cProfile.mine ? 'Set a Display Name' : (cProfile?.id ? cProfile.id.substring(0, 10) + '…' : '');
@@ -6094,9 +6096,9 @@ function renderProfileTab(cProfile) {
         if (npub) {
             // Copy the full profile URL for easy sharing
             navigator.clipboard.writeText(npub).then(() => {
-                showToast('Copied!');
+                showToast('Copied Profile Link');
             }).catch(() => {
-                showToast('Failed to copy');
+                showToast('Failed to Copy');
                 const copyBtn = e.target.closest('#profile-npub-copy');
                 if (copyBtn) {
                     copyBtn.innerHTML = '<span class="icon icon-check"></span>';
@@ -6114,11 +6116,11 @@ function renderProfileTab(cProfile) {
         domProfileOptions.style.display = 'none';
 
         // Show edit buttons and set their click handlers
-        document.querySelector('.profile-avatar-edit').style.display = 'flex';
-        document.querySelector('.profile-avatar-edit').onclick = askForAvatar;
         
         document.querySelector('.profile-banner-edit').style.display = 'flex';
-        document.querySelector('.profile-banner-edit').onclick = askForBanner;
+        document.querySelector('.profile-banner-edit').onclick = enterProfileEditMode;
+        domProfileEditCancelBtn.onclick = () => exitProfileEditMode(true);
+        domProfileEditSaveBtn.onclick = () => exitProfileEditMode(false);
 
         // Show Share button on own profile (top-right of banner)
         const ownShareBtn = document.getElementById('profile-share-btn');
@@ -6133,7 +6135,7 @@ function renderProfileTab(cProfile) {
                     icon.classList.replace('icon-share', 'icon-check');
                     setTimeout(() => icon.classList.replace('icon-check', 'icon-share'), 2000);
                 }).catch(() => {
-                    showToast('Failed to copy profile link');
+                    showToast('Failed to Copy Profile Link');
                 });
             }
         };
@@ -6157,11 +6159,11 @@ function renderProfileTab(cProfile) {
         domProfileName.classList.add('btn');
         domProfileStatus.onclick = askForStatus;
         domProfileStatus.classList.add('btn');
-        domProfileNameSecondary.onclick = askForUsername;
-        domProfileNameSecondary.classList.add('btn');
-        domProfileStatusSecondary.onclick = askForStatus;
-        domProfileStatusSecondary.classList.add('btn');
-        domProfileDescription.onclick = editProfileDescription;
+        domProfileName.onclick = () => { if (fProfileEditMode) askForUsername(); };
+        domProfileStatus.onclick = () => { if (fProfileEditMode) askForStatus(); };
+        domProfileNameSecondary.onclick = () => { if (fProfileEditMode) askForUsername(); };
+        domProfileStatusSecondary.onclick = () => { if (fProfileEditMode) askForStatus(); };
+        domProfileDescription.onclick = () => { if (fProfileEditMode) editProfileDescription(); };
         domProfileDescription.classList.add('btn');
     } else {
         // Show Contact Options
@@ -6191,7 +6193,7 @@ function renderProfileTab(cProfile) {
                     icon.classList.replace('icon-share', 'icon-check');
                     setTimeout(() => icon.classList.replace('icon-check', 'icon-share'), 2000);
                     }).catch(() => {
-                    showToast('Failed to copy profile link');
+                    showToast('Failed to Copy Profile Link');
                 });
             }
         };
@@ -6209,13 +6211,13 @@ function renderProfileTab(cProfile) {
             domProfileMoreDropdown.style.display = 'none';
             if (isBlocked) {
                 await invoke('unblock_user', { npub: cProfile.id });
-                showToast('User unblocked');
+                showToast('User Unblocked');
                 renderChatlist();
             } else {
                 const confirmed = await popupConfirm('Block User', 'Are you sure you want to block this user? You will no longer receive DMs from them.');
                 if (!confirmed) return;
                 await invoke('block_user', { npub: cProfile.id });
-                showToast('User blocked');
+                showToast('User Blocked');
                 renderChatlist();
             }
         };
@@ -6239,7 +6241,6 @@ function renderProfileTab(cProfile) {
         };
 
         // Hide edit buttons and own-profile share
-        document.querySelector('.profile-avatar-edit').style.display = 'none';
         document.querySelector('.profile-banner-edit').style.display = 'none';
         document.getElementById('profile-share-btn').style.display = 'none';
         
@@ -9100,6 +9101,7 @@ function hideEditHistory() {
 async function openChat(contact) {
     // Display the Chat UI
     navbarSelect('chat-btn');
+    if (fProfileEditMode) exitProfileEditMode(true);
     domProfile.style.display = 'none';
     domChatNew.style.display = 'none';
     domChats.style.display = 'none';
@@ -9363,6 +9365,7 @@ async function closeChat() {
     }
 
     // Reset the chat UI
+    if (fProfileEditMode) exitProfileEditMode(true);
     domProfile.style.display = 'none';
     domGroupOverview.style.display = 'none';
     domSettingsBtn.style.display = '';
@@ -9417,6 +9420,12 @@ async function openProfile(cProfile) {
     domChat.style.display = 'none'; // Hide the chat view when opening profile
     domSettingsBtn.style.display = ''; // Ensure settings button is visible (may have been hidden by openChat)
 
+    // Scroll profile back to top
+    setTimeout(() => {
+        document.getElementById('profile')?.scrollTo(0, 0);
+        document.querySelector('.profile-content')?.scrollTo(0, 0);
+    }, 50);
+
     // Render our own profile by default, but otherwise; the given one
     if (!cProfile) {
         cProfile = arrProfiles.find(a => a.mine);
@@ -9466,6 +9475,7 @@ async function openGroupOverview(chat) {
     domChats.style.display = 'none';
     domSettings.style.display = 'none';
     domInvites.style.display = 'none';
+    if (fProfileEditMode) exitProfileEditMode(true);
     domProfile.style.display = 'none';
     domChat.style.display = 'none';
 
@@ -10352,6 +10362,7 @@ async function openInviteMemberToGroup(chat) {
 async function openChatlist() {
     navbarSelect('chat-btn');
     domNavbar.style.display = '';
+    if (fProfileEditMode) exitProfileEditMode(true);
     domProfile.style.display = 'none';
     domSettings.style.display = 'none';
     domInvites.style.display = 'none';
@@ -10382,6 +10393,7 @@ function openSettings() {
     domSettings.style.display = '';
 
     // Hide the other tabs
+    if (fProfileEditMode) exitProfileEditMode(true);
     domProfile.style.display = 'none';
     domChats.style.display = 'none';
     domInvites.style.display = 'none';
@@ -10419,6 +10431,7 @@ async function openInvites() {
     domInvites.style.display = '';
 
     // Hide the other tabs
+    if (fProfileEditMode) exitProfileEditMode(true);
     domProfile.style.display = 'none';
     domChats.style.display = 'none';
     domSettings.style.display = 'none';
@@ -10466,6 +10479,148 @@ async function openInvites() {
 /**
  * Edit the profile description inline
  */
+function updateProfileEditLabel() {
+    const cProfile = arrProfiles.find(a => a.mine);
+    if (!cProfile) return;
+    const nameInput = document.querySelector('#profile-edit-name input');
+    const statusInput = document.querySelector('#profile-edit-status input');
+    const bioInput = document.querySelector('#profile-edit-bio textarea');
+    const label = document.getElementById('profile-edit-mode-label');
+    if (!label) return;
+
+    const nameChanged = nameInput?.value.trim() !== (objProfileEditSnapshot.name || '');
+    const statusChanged = statusInput?.value.trim() !== (objProfileEditSnapshot.status?.title ?? objProfileEditSnapshot.status ?? '');
+    const bioChanged = bioInput?.value.trim() !== (objProfileEditSnapshot.about || '');
+
+    if (nameChanged || statusChanged || bioChanged) {
+        label.textContent = 'Unsaved changes made.';
+        label.style.opacity = '1';
+    } else {
+        label.textContent = 'Edit Mode is enabled.';
+        label.style.opacity = '0.6';
+    }
+}
+
+function enterProfileEditMode() {
+    const cProfile = arrProfiles.find(a => a.mine);
+    if (!cProfile) return;
+    objProfileEditSnapshot = {
+        name: cProfile.name || '',
+        status: cProfile.status || '',
+        about: cProfile.about || ''
+    };
+    fProfileEditMode = true;
+    domProfileEditBar.style.opacity = '0';
+    domProfileEditBar.style.display = 'flex';
+    setTimeout(() => domProfileEditBar.style.opacity = '1', 10);
+    domProfileBackBtn.style.display = 'none';
+    document.querySelector('.profile-header-info').style.display = 'none';
+    domProfileBanner.onclick = askForBanner;
+    document.getElementById('profile-edit-btn').style.display = 'none';
+    document.getElementById('profile-share-btn').style.display = 'none';
+    document.getElementById('profile-npub-label').style.display = 'none';
+    document.getElementById('profile-npub-container').style.display = 'none';
+    document.getElementById('profile-badges').style.display = 'none';
+    document.getElementById('profile-secondary-name').style.display = 'none';
+    document.getElementById('profile-secondary-status').style.display = 'none';
+    document.getElementById('profile-description').style.display = 'none';
+    const editName = document.getElementById('profile-edit-name');
+    const editStatus = document.getElementById('profile-edit-status');
+    const editBio = document.getElementById('profile-edit-bio');
+
+    editName.closest('.profile-edit-field-wrapper').style.position = 'relative';
+    editName.innerHTML = `<input type="text" value="${cProfile.name || ''}" maxlength="50" style="background: none; border: none; outline: none; color: inherit; font-size: 16px; width: 100%;">`;
+    editStatus.innerHTML = `<input type="text" value="${cProfile.status?.title || ''}" style="background: none; border: none; outline: none; color: inherit; font-size: 16px; width: 100%;">`;
+    editBio.innerHTML = `<textarea style="background: none; border: none; outline: none; color: inherit; font-size: 16px; width: 100%; resize: none; min-height: 60px;">${typeof cProfile.about === 'string' ? cProfile.about : ''}</textarea>`;
+    const bioTextarea = editBio.querySelector('textarea');
+    setTimeout(() => {
+        bioTextarea.style.height = 'auto';
+        bioTextarea.style.height = bioTextarea.scrollHeight + 'px';
+    }, 10);
+    bioTextarea.addEventListener('input', () => {
+        bioTextarea.style.height = 'auto';
+        bioTextarea.style.height = bioTextarea.scrollHeight + 'px';
+    });
+    const nameInput = document.querySelector('#profile-edit-name input');
+    const statusInput = document.querySelector('#profile-edit-status input');
+
+    nameInput?.addEventListener('input', updateProfileEditLabel);
+
+    statusInput?.addEventListener('input', updateProfileEditLabel);
+    bioTextarea.addEventListener('input', updateProfileEditLabel);
+    document.getElementById('profile-edit-fields').style.display = 'flex';
+    document.getElementById('profile').classList.add('profile-edit-active');
+
+    domProfileAvatar.onclick = async () => {
+        if (!fProfileEditMode) return;
+        const { open } = window.__TAURI__.dialog;
+        const file = await open({
+            title: 'Choose Profile Picture',
+            multiple: false,
+            directory: false,
+            filters: [{ name: 'Image', extensions: ['png', 'jpeg', 'jpg', 'gif', 'webp'] }]
+        });
+        if (!file) return;
+        domProfileAvatar.src = convertFileSrc(file);
+    };
+
+    const bannerContainer = document.getElementById('profile-banner-container');
+    const avatarContainer = document.querySelector('.profile-avatar-container');
+
+    bannerContainer.addEventListener('mousemove', (e) => {
+    const bannerRect = bannerContainer.getBoundingClientRect();
+    const avatarRect = avatarContainer.getBoundingClientRect();
+    
+    const inBanner = e.clientY <= bannerRect.top + 200;
+    const inAvatar = (
+        e.clientX >= avatarRect.left &&
+        e.clientX <= avatarRect.right &&
+        e.clientY >= avatarRect.top &&
+        e.clientY <= avatarRect.bottom
+    );
+
+    if (inAvatar || !inBanner) {
+        bannerContainer.classList.add('avatar-hovered');
+    } else {
+        bannerContainer.classList.remove('avatar-hovered');
+    }
+});
+}
+
+function exitProfileEditMode(fCancel = false) {
+    fProfileEditMode = false;
+    domProfileEditBar.style.opacity = '0';
+    setTimeout(() => domProfileEditBar.style.display = 'none', 250);
+    document.querySelector('.profile-header-info').style.display = '';
+    domProfileBackBtn.style.display = 'none';
+    document.getElementById('profile-npub-label').style.display = '';
+    document.getElementById('profile-npub-container').style.display = '';
+    document.getElementById('profile-badges').style.display = '';
+    document.getElementById('profile-edit-fields').style.display = 'none';
+    document.getElementById('profile-secondary-name').style.display = '';
+    document.getElementById('profile-secondary-status').style.display = '';
+    document.getElementById('profile-description').style.display = '';
+    document.getElementById('profile').classList.remove('profile-edit-active');
+    const cProfile = arrProfiles.find(a => a.mine);
+    if (cProfile) {
+        if (fCancel) {
+            cProfile.name = objProfileEditSnapshot.name;
+            cProfile.status = objProfileEditSnapshot.status;
+            cProfile.about = objProfileEditSnapshot.about;
+        } else {
+            const nameInput = document.querySelector('#profile-edit-name input');
+            const statusInput = document.querySelector('#profile-edit-status input');
+            const bioInput = document.querySelector('#profile-edit-bio textarea');
+            if (nameInput) cProfile.name = nameInput.value.trim();
+            if (statusInput && cProfile.status) cProfile.status.title = statusInput.value.trim();
+            if (bioInput) cProfile.about = bioInput.value.trim();
+            showToast('Profile Saved');
+        }
+        renderProfileTab(cProfile);
+    }
+    domProfileBanner.onclick = null;
+}
+
 function editProfileDescription() {
     // Get the current profile
     const cProfile = arrProfiles.find(a => a.mine);
diff --git a/src/styles.css b/src/styles.css
index 9447065..8195dbc 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -184,6 +184,30 @@
   mask-image: url("./icons/x.svg");
 }
 
+.icon-edit-x {
+  -webkit-mask: url('./icons/edit-x.svg') no-repeat center;
+  mask: url('./icons/edit-x.svg') no-repeat center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: #FC595C;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.icon-save {
+  -webkit-mask: url('./icons/save.svg') no-repeat center;
+  mask: url('./icons/save.svg') no-repeat center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: #33DB98;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
 .icon-chat-circle {
   mask-image: url("./icons/chat-circle.svg");
 }
@@ -689,6 +713,15 @@ html, body {
   max-width: 60%;
 }
 
+.profile-header #profile-name {
+  cursor: default !important;
+  opacity: 1 !important;
+}
+
+#profile-name-counter {
+    padding-left: 8px;
+}
+
 .profile-header-name-row {
   display: flex;
   align-items: center;
@@ -745,9 +778,66 @@ html, body {
   display: block;
 }
 
+.profile-edit-active #profile-banner-container::before {
+  content: '';
+  position: absolute;
+  top: 70px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  -webkit-mask: url('./icons/add-photo.svg') no-repeat center;
+  mask: url('./icons/add-photo.svg') no-repeat center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: rgba(255,255,255,0);
+  transition: background-color 0.2s ease;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.profile-edit-active #profile-banner-container:hover::before {
+  background-color: #B2B2B2;
+}
+
+.profile-edit-active #profile-banner-container.avatar-hovered::before {
+  background-color: rgba(255,255,255,0) !important;
+}
+
+/* Banner Hover Overlay */
+#profile-banner-container::after {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 200px;
+  background: rgba(255,255,255,0);
+  transition: background 0.2s ease;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.profile-edit-active #profile-banner-container {
+  cursor: pointer;
+}
+
+.profile-edit-active #profile-banner-container:hover::after {
+  background: #03030380;
+  cursor: pointer;
+}
+
+.profile-edit-active #profile-banner-container.avatar-hovered:hover::after {
+  background: rgba(255,255,255,0) !important;
+  cursor: default !important;
+}
+
+.profile-edit-active #profile-banner-container.avatar-hovered {
+  cursor: default !important;
+}
+
 /* Avatar Container */
 .profile-avatar-container {
   position: relative;
+  z-index: 2;
   width: 175px;
   height: 175px;
   margin: -87px auto 10px;
@@ -756,6 +846,51 @@ html, body {
   background-color: #030303;
 }
 
+.profile-edit-active .profile-avatar-container::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  -webkit-mask: url('./icons/add-photo.svg') no-repeat center;
+  mask: url('./icons/add-photo.svg') no-repeat center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: rgba(255,255,255,0);
+  transition: background-color 0.2s ease;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.profile-edit-active .profile-avatar-container:hover::before {
+  background-color: #B2B2B2;
+}
+
+.profile-avatar-container::after {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(255,255,255,0);
+  border-radius: 50%;
+  transition: background 0.2s ease;
+  pointer-events: none;
+}
+
+.profile-edit-active .profile-avatar-container {
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.profile-edit-active .profile-avatar-container:hover::after {
+  background: #03030380;
+}
+
+#profile-edit-fields input {
+  padding: 0 !important;
+}
+
 /* Avatar Image */
 .profile-avatar {
   width: 100%;
@@ -838,16 +973,131 @@ html, body {
 
 .profile-banner-edit {
   position: absolute;
-  bottom: 10px;
-  right: 10px;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: flex;
+  top: 10px;
+  left: -6px;
+  display: none;
+  margin: 0;
+  transform: scale(0.75);
+  transform-origin: top left;
+  opacity: 1;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
+  padding: 8px 10px;
+}
+
+#profile-edit-btn .navbar-icon {
+  width: 30px;
+  height: 30px;
+  position: relative;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  padding-top: 4px;
+}
+
+#profile-edit-cancel-btn .icon,
+#profile-edit-cancel-btn span,
+#profile-edit-save-btn .icon,
+#profile-edit-save-btn span {
+  position: relative !important;
+  top: 1px !important;
+  left: auto !important;
+  right: auto !important;
+  bottom: auto !important;
+  margin: 0 !important;
+  cursor: pointer !important;
+}
+
+#profile-edit-cancel-btn .icon-edit-x {
+  background-color: #FC595C !important;
+  width: 14px !important;
+  height: 14px !important;
+}
+
+#profile-edit-save-btn .icon-save {
+  background-color: #33DB98 !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+#profile-edit-cancel-btn:hover,
+#profile-edit-save-btn:hover {
+  opacity: 0.75;
+  transition: opacity 0.2s ease;
+}
+
+#profile-edit-bar {
+  transition: opacity 0.25s ease;
+}
+
+#profile-edit-fields {
+  flex-direction: column;
+  gap: 12px;
+  width: 90%;
+  margin: 16px auto 0;
+}
+
+.profile-edit-label {
+  font-size: 11px;
+  color: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+  display: block;
+  margin-bottom: -4px !important;
+}
+
+.profile-edit-label-centered {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.profile-edit-field-wrapper {
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 6px;
+  padding: 6px 14px;
+  width: 100%;
+  box-sizing: border-box;
   cursor: pointer;
+  text-align: center;
+}
+
+.profile-edit-field-wrapper:hover {
+  border-color: rgba(255,255,255,0.25);
+}
+
+.profile-edit-field-wrapper:focus-within {
+  border-color: var(--primary-color);
+}
+
+.profile-edit-field-bio {
+  min-height: 80px;
+}
+
+.profile-edit-field-text {
+  margin: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+  width: 100%;
+}
+
+#profile-edit-bio textarea::-webkit-scrollbar {
+  display: none;
+}
+
+#profile-edit-fields input,
+#profile-edit-fields textarea {
+  box-sizing: border-box;
+  width: 100% !important;
+  overflow: hidden;
+  padding: 0 !important;
+  text-align: center;
 }
 
 .profile-share-btn {