Merge pull request 'Clean user button and user dropdown UI' (#3) from feature/logout-functionality into main

Reviewed-on: #3

index.php

@@ -78,11 +78,6 @@
     padding: 0.5rem 1rem;
   }
 
-  .add-project-btn {
-    font-size: 1.5rem; /* increase to your desired size */
-    line-height: 1;
-  }
-
   .settings-btn {
     font-size: 1.5rem; /* increase to your desired size */
     line-height: 1;
@@ -136,6 +131,41 @@
     color: #d00;
   }
   
+  .user-menu-btn {
+    font-size: 1.4rem;
+    padding: 0.5rem 0.9rem;
+  }
+
+  .header-action-btn {
+    font-size: 1.4rem;
+    padding: 0.6rem 0.9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .add-project-btn {
+    font-size: 1.4rem;
+    padding: 0.5rem 1rem;
+  }
+
+  .custom-dropdown {
+    min-width: 120px;
+    text-align: right;
+  }
+
+  .custom-dropdown .dropdown-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .custom-dropdown .dropdown-item,
+  .custom-dropdown .dropdown-item-text {
+    font-size: 1.5rem !important;
+    text-align: right;
+  }
+
   .project-color-0 { background-color: #f9f9fc; }
   .project-color-1 { background-color: #eefaf5; }
   .project-color-2 { background-color: #fef7e0; }
@@ -228,9 +258,38 @@
       <i class="bi bi-gear-fill"></i>
     </button>
   </span>
-  <button class="btn btn-sm btn-success add-project-btn" data-bs-toggle="modal" data-bs-target="#addProjectModal" title="Add Project">
+
-    <i class="bi bi-plus"></i>
+<div class="d-flex align-items-center gap-3">
+
+  <!-- Add Project -->
+  <button class="btn btn-success btn-lg header-action-btn"
+          data-bs-toggle="modal"
+          data-bs-target="#addProjectModal">
+    <i class="bi bi-plus-lg"></i>
   </button>
+
+  <!-- User Dropdown -->
+  <div class="dropdown">
+    <button class="btn btn-outline-secondary btn-lg header-action-btn"
+            type="button"
+            id="menuButton"
+            data-bs-toggle="dropdown">
+      <i class="bi bi-person-circle"></i>
+    </button>
+
+    <ul class="dropdown-menu dropdown-menu-end custom-dropdown" aria-labelledby="menuButton">
+      <li class="dropdown-item-text fw-semibold fs-5" id="dropdownUserEmail"></li>
+      <li><hr class="dropdown-divider"></li>
+      <li>
+        <button class="dropdown-item fs-5" type="button" id="logoutBtn">
+          <i class="bi bi-box-arrow-right"></i>
+          <span>Logout</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+
+</div>
 </h1>
 
 
@@ -910,6 +969,11 @@ document.querySelectorAll('.project-column').forEach(col => {
           return;
         }
 
+        // Add user name to user menu
+        if (me.logged_in) {
+          document.getElementById('dropdownUserEmail').textContent = me.user.email;
+        }
+
         // Hide settings button if user can't manage settings
         if (!me.user.can_manage_settings) {
           document.querySelectorAll('.settings-btn').forEach(b => b.style.display = 'none');
@@ -919,6 +983,27 @@ document.querySelectorAll('.project-column').forEach(col => {
       });
   });
 
+  document.addEventListener('DOMContentLoaded', () => {
+    const logoutBtn = document.getElementById('logoutBtn');
+
+    if (logoutBtn) {
+      logoutBtn.addEventListener('click', () => {
+        fetch('logout.php')
+          .then(res => res.json())
+          .then(data => {
+            if (!data.success) return;
+
+            // Clear UI
+            document.getElementById('projectGrid').innerHTML = '';
+
+            // Show login modal
+            new bootstrap.Modal(document.getElementById('loginModal')).show();
+          })
+          .catch(err => console.error('Logout failed:', err));
+      });
+    }
+  });
+  
   </script>
   
   <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>