modify layout, implemented some more features to match mobile app

profile.js

@@ -170,6 +170,28 @@ function setupEventListeners(user, isOwn, currentOtherUsername) { // Added curre
             });
         }
 
+        const saveUsernameBtn = document.getElementById('saveUsername');
+        if (saveUsernameBtn) {
+            saveUsernameBtn.addEventListener('click', () => {
+                const newUsername = document.getElementById('usernameInput')?.value;
+                if (newUsername && newUsername.trim()) {
+                    ipcRenderer.send('set-username', newUsername.trim());
+                } else {
+                    alert("Username cannot be empty.");
+                }
+            });
+        }
+
+        ipcRenderer.on('username-set-confirm', (event, result) => {
+            if (result.success) {
+                alert(`Username updated to '${result.newUsername}'`);
+                document.getElementById('usernameDisplay').textContent = result.newUsername;
+            } else {
+                alert(`Failed to update username: ${result.message}`);
+            }
+        });
+
+
     } else {
         // --- Listener for OTHER user profile (setting the tracked user) ---
         const saveOtherUserBtn = document.getElementById('saveOtherUsername');