add the interactivity for the profile button for better user management

index.html

@@ -61,8 +61,13 @@ <h1 class="site-title">StudyPlan</h1>
   </nav>
 
   <div class="header-right">
-    <button class="profile-btn">Profile</button>
-    <button class="profile-btn" id="logout-btn">Logout</button>
+    <div style="position:relative;">
+      <button class="profile-btn" id="profile-btn" aria-haspopup="true" aria-expanded="false">Profile</button>
+
+      <div id="profile-popover" style="display:none; position:absolute; right:0; top:48px; background:var(--color-background-primary); border:1px solid var(--color-border-tertiary); border-radius:12px; padding:12px; min-width:260px; box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:1000;">
+        <!-- Profile details injected here -->
+      </div>
+    </div>
   </div>
 </header>
 
@@ -372,8 +377,11 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
         return;
       }
 
-      localStorage.setItem('studyplan_user', JSON.stringify({ email: data.email }));
+      const storedEmail = data.email || email;
+      const derivedName = data.name || (storedEmail ? storedEmail.split('@')[0] : 'User');
+      localStorage.setItem('studyplan_user', JSON.stringify({ email: storedEmail, name: derivedName }));
       document.getElementById('auth-modal').style.display = 'none';
+      try { if (typeof renderProfile === 'function') renderProfile(); } catch (e) {}
 
     } catch (err) {
       errorEl.textContent = 'Network error. Please try again.';
@@ -386,17 +394,69 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
     document.getElementById('auth-modal').style.display = 'none';
   }
 
-  // Logout Button Functionality
-  const logoutBtn = document.getElementById('logout-btn');
-  logoutBtn.addEventListener('click', () => {
-    localStorage.removeItem('studyplan_user');
+  // (Header logout removed) logout handled in profile popover
 
-    // Show login modal again
-    document.getElementById('auth-modal').style.display = 'flex';
+  // Profile Button / Popover
+  const profileBtn = document.getElementById('profile-btn');
+  const profilePopover = document.getElementById('profile-popover');
+
+  function renderProfile() {
+    const userStr = localStorage.getItem('studyplan_user');
+    if (!profileBtn) return;
+    if (!userStr) {
+      profileBtn.innerHTML = 'Profile';
+      profilePopover.style.display = 'none';
+      return;
+    }
+    let user;
+    try { user = JSON.parse(userStr); } catch (e) { user = { email: userStr }; }
+    const name = user.name || (user.email ? user.email.split('@')[0] : 'User');
+    const avatar = `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=4f46e5&color=fff&size=128`;
+    profileBtn.innerHTML = `<img src="${avatar}" alt="avatar" style="width:28px;height:28px;border-radius:50%;vertical-align:middle;margin-right:8px;"> ${name}`;
+    profilePopover.innerHTML = `
+      <div style="display:flex; gap:12px; align-items:center;">
+        <img src="${avatar}" style="width:64px;height:64px;border-radius:50%">
+        <div>
+          <div style="font-weight:700">${name}</div>
+          <div style="color:#666; font-size:13px;">${user.email || ''}</div>
+        </div>
+      </div>
+      <div style="margin-top:12px;">
+        <button id="popover-logout" style="width:100%; padding:8px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer;">Logout</button>
+      </div>
+    `;
+  }
+
+  profileBtn.addEventListener('click', (e) => {
+    if (!localStorage.getItem('studyplan_user')) {
+      document.getElementById('auth-modal').style.display = 'flex';
+      return;
+    }
+    profilePopover.style.display = profilePopover.style.display === 'block' ? 'none' : 'block';
+    const expanded = profilePopover.style.display === 'block';
+    profileBtn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+  });
+
+  // Close popover when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!profilePopover.contains(e.target) && e.target !== profileBtn) {
+      profilePopover.style.display = 'none';
+      profileBtn.setAttribute('aria-expanded','false');
+    }
+  });
+
+  // Logout from popover
+  document.addEventListener('click', (e) => {
+    if (e.target && e.target.id === 'popover-logout') {
+      localStorage.removeItem('studyplan_user');
+      document.getElementById('auth-modal').style.display = 'flex';
+      profilePopover.style.display = 'none';
+      window.location.reload();
+    }
+  });
 
-    // Refresh page state
-    window.location.reload();
-});
+  // Render profile on load
+  renderProfile();
 
   // Settings Modal Logic
   const settingsModal = document.getElementById('settings-modal');