From 57339147fc56ad6558a2dfedd9522db96acd6eab Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 21:48:33 +0000
Subject: [PATCH] Enable intuitive swipe navigation for an improved mobile
 viewing experience

Adds touch event handlers to `FolxStadlPage`, `GeschichteLiedPage`, and `GipfelstammtischPage` components to implement left and right swipe gestures for page navigation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/DyHCx4q
---
 client/src/pages/FolxStadlPage.tsx        | 40 +++++++++++++++++++++--
 client/src/pages/GeschichteLiedPage.tsx   |  4 +++
 client/src/pages/GipfelstammtischPage.tsx |  4 +++
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 93f5e5f..e058134 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -4,7 +4,7 @@ import { ArrowLeft, ChevronLeft, ChevronRight, Menu, X } from 'lucide-react';
 import VideoCard from '@/components/video-card';
 import BunnyVideoModal from '@/components/bunny-video-modal';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
@@ -17,6 +17,8 @@ export default function FolxStadlPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [, setLocation] = useLocation();
+  const [touchStart, setTouchStart] = useState<number>(0);
+  const [touchEnd, setTouchEnd] = useState<number>(0);
   const itemsPerPage = 10;
 
   const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
@@ -47,6 +49,35 @@ export default function FolxStadlPage() {
     setSelectedVideo(null);
   };
 
+  // Touch handlers for swipe navigation
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchEnd(0);
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (!touchStart || !touchEnd) return;
+    
+    const distance = touchStart - touchEnd;
+    const isLeftSwipe = distance > 50;
+    const isRightSwipe = distance < -50;
+    
+    console.log('Swipe detected:', { distance, isLeftSwipe, isRightSwipe, currentPage, totalPages });
+
+    if (isLeftSwipe && currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+      console.log('Swiped to next page:', currentPage + 1);
+    }
+    if (isRightSwipe && currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+      console.log('Swiped to previous page:', currentPage - 1);
+    }
+  };
+
   if (isLoading) {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
@@ -184,7 +215,12 @@ export default function FolxStadlPage() {
       </div>
 
       {/* Main Content */}
-      <div className="container pt-8 pb-8">
+      <div 
+        className="container pt-8 pb-8"
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
 
         {/* Video List with Descriptions */}
         <div className="space-y-6">
diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index 96701cf..8670cca 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -67,12 +67,16 @@ export default function GeschichteLiedPage() {
     const distance = touchStart - touchEnd;
     const isLeftSwipe = distance > 50;
     const isRightSwipe = distance < -50;
+    
+    console.log('Swipe detected:', { distance, isLeftSwipe, isRightSwipe, currentPage, totalPages });
 
     if (isLeftSwipe && currentPage < totalPages) {
       setCurrentPage(currentPage + 1);
+      console.log('Swiped to next page:', currentPage + 1);
     }
     if (isRightSwipe && currentPage > 1) {
       setCurrentPage(currentPage - 1);
+      console.log('Swiped to previous page:', currentPage - 1);
     }
   };
 
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index 4df83f0..5959247 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -67,12 +67,16 @@ export default function GipfelstammtischPage() {
     const distance = touchStart - touchEnd;
     const isLeftSwipe = distance > 50;
     const isRightSwipe = distance < -50;
+    
+    console.log('Swipe detected:', { distance, isLeftSwipe, isRightSwipe, currentPage, totalPages });
 
     if (isLeftSwipe && currentPage < totalPages) {
       setCurrentPage(currentPage + 1);
+      console.log('Swiped to next page:', currentPage + 1);
     }
     if (isRightSwipe && currentPage > 1) {
       setCurrentPage(currentPage - 1);
+      console.log('Swiped to previous page:', currentPage - 1);
     }
   };