1 files changed, 58 insertions, 0 deletions
diff --git a/web/static/js/app.js b/web/static/js/app.js
index 52d0c91..6646400 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -207,3 +207,61 @@ function toggleTask(taskId) {
     console.log('Toggle task:', taskId);
     // To be implemented in Phase 2
 }
+
+// Mobile Swipe Navigation
+(function() {
+    let touchStartX = 0;
+    let touchEndX = 0;
+    const SWIPE_THRESHOLD = 50; // Minimum px for a swipe
+
+    // Get ordered list of tab names (main tabs only for swipe)
+    const TAB_ORDER = ['timeline', 'shopping', 'tasks', 'planning', 'meals'];
+
+    function handleSwipe() {
+        const swipeDistance = touchEndX - touchStartX;
+
+        if (Math.abs(swipeDistance) < SWIPE_THRESHOLD) {
+            return; // Not a significant swipe
+        }
+
+        const currentIndex = TAB_ORDER.indexOf(currentTab);
+        if (currentIndex === -1) return;
+
+        let newIndex;
+        if (swipeDistance > 0) {
+            // Swiped right -> previous tab
+            newIndex = currentIndex - 1;
+        } else {
+            // Swiped left -> next tab
+            newIndex = currentIndex + 1;
+        }
+
+        // Bounds check
+        if (newIndex < 0 || newIndex >= TAB_ORDER.length) {
+            return;
+        }
+
+        const newTab = TAB_ORDER[newIndex];
+        const tabButton = document.querySelector(`[hx-get="/tabs/${newTab}"]`);
+
+        if (tabButton) {
+            console.log(`Swipe navigation: ${currentTab} -> ${newTab}`);
+            tabButton.click();
+        }
+    }
+
+    // Set up touch event listeners on the tab content area
+    document.addEventListener('DOMContentLoaded', function() {
+        const tabContent = document.getElementById('tab-content');
+        if (!tabContent) return;
+
+        tabContent.addEventListener('touchstart', function(e) {
+            touchStartX = e.changedTouches[0].screenX;
+        }, { passive: true });
+
+        tabContent.addEventListener('touchend', function(e) {
+            touchEndX = e.changedTouches[0].screenX;
+            handleSwipe();
+        }, { passive: true });
+    });
+})();