Update assets/js/script.js

assets/js/script.js

@@ -442,16 +442,14 @@ class GestureDetector {
     
     detectGesture(landmarks) {
         try {
-            // Convert to pixel coordinates for easier calculation
             const indexTip = landmarks[8];
             const middleTip = landmarks[12];
-            const wrist = landmarks[0];
             
-            // Pointing detection (index finger higher than middle)
-            // Fix: Proper Y-axis calculation (inverted in MediaPipe)
+            // 🔥 CRITICAL FIX: Account for 60px header height!
             const screenX = indexTip.x * window.innerWidth;
-            const screenY = (1 - indexTip.y) * window.innerHeight;
+            const screenY = (1 - indexTip.y) * (window.innerHeight - 60); // Subtract header height
             
+            // Pointing detection (index finger higher than middle)
             if (indexTip.y < middleTip.y) {
                 this.checkEmailSelection(screenX, screenY);
             } else {
@@ -469,7 +467,7 @@ class GestureDetector {
             }
             
             // Get palm center for gesture detection
-            // Fix: Better palm center calculation
+            const wrist = landmarks[0];
             const palmCenterX = (wrist.x + landmarks[9].x) / 2;
             const palmCenterY = (wrist.y + landmarks[9].y) / 2;
             
@@ -533,14 +531,18 @@ class GestureDetector {
     
     checkEmailSelection(x, y) {
         try {
-            // Check which email is under the finger
+            // Convert to page-relative coordinates (accounting for scroll)
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const adjustedY = y + scrollTop;
+            
+            // Find the email under the finger
             for (let i = this.uiManager.emailElements.length - 1; i >= 0; i--) {
                 const email = this.uiManager.emailElements[i];
                 if (email.rect && 
-                    x >= email.rect.left && 
+                    x >= email.rect.left &&
                     x <= email.rect.right &&
-                    y >= email.rect.top && 
-                    y <= email.rect.bottom) {
+                    adjustedY >= email.rect.top &&
+                    adjustedY <= email.rect.bottom) {
                     
                     // Only select if it's a different email
                     if (this.selectedEmailId !== email.id) {
@@ -557,8 +559,8 @@ class GestureDetector {
                 email.rect && 
                 x >= email.rect.left && 
                 x <= email.rect.right &&
-                y >= email.rect.top && 
-                y <= email.rect.bottom)) {
+                adjustedY >= email.rect.top && 
+                adjustedY <= email.rect.bottom)) {
                 this.uiManager.clearSelection();
                 this.selectedEmailId = null;
                 this.debugManager.updateSelectedEmail(null);
@@ -578,7 +580,6 @@ class GestureDetector {
             switch (gesture) {
                 case 'swipe_left':
                     this.uiManager.showActionFeedback(`🗑️ Deleted: ${email.subject}`, 'delete');
-                    // Remove from UI
                     const index = emails.findIndex(e => e.id === this.selectedEmailId);
                     if (index !== -1) emails.splice(index, 1);
                     this.uiManager.renderEmails();
@@ -588,7 +589,6 @@ class GestureDetector {
                     
                 case 'swipe_right':
                     this.uiManager.showActionFeedback(`✅ Archived: ${email.subject}`, 'archive');
-                    // In a real app, we'd move to archive
                     const archiveIndex = emails.findIndex(e => e.id === this.selectedEmailId);
                     if (archiveIndex !== -1) emails.splice(archiveIndex, 1);
                     this.uiManager.renderEmails();