Mobilni mozaik: podrsanje levo/desno med trojkami, v krogu

client/src/pages/home.tsx

@@ -211,6 +211,32 @@ function MobileMosaic({ latest, popular, focalPoints }: { latest: Article[]; pop
     return () => clearInterval(timer);
   }, [paused, totalPages]);
 
+  const touchX = useRef<number | null>(null);
+  const resumeTimer = useRef<any>(null);
+
+  const goTo = useCallback((dir: number) => {
+    setPage((p) => (p + dir + totalPages) % totalPages);
+  }, [totalPages]);
+
+  const onTouchStart = useCallback((e: React.TouchEvent) => {
+    touchX.current = e.touches[0].clientX;
+    setPaused(true);
+    if (resumeTimer.current) clearTimeout(resumeTimer.current);
+  }, []);
+
+  const onTouchEnd = useCallback((e: React.TouchEvent) => {
+    const x0 = touchX.current;
+    touchX.current = null;
+    if (x0 !== null) {
+      const dx = e.changedTouches[0].clientX - x0;
+      if (Math.abs(dx) > 40) goTo(dx < 0 ? 1 : -1);
+    }
+    if (resumeTimer.current) clearTimeout(resumeTimer.current);
+    resumeTimer.current = setTimeout(() => setPaused(false), 6000);
+  }, [goTo]);
+
+  useEffect(() => () => { if (resumeTimer.current) clearTimeout(resumeTimer.current); }, []);
+
   const l = pool.slice(displayPage * pageSize, displayPage * pageSize + pageSize);
   if (l.length === 0) return null;
 
@@ -222,7 +248,11 @@ function MobileMosaic({ latest, popular, focalPoints }: { latest: Article[]; pop
 
   return (
     <div className="md:hidden space-y-6" data-testid="section-mobile-mosaic">
-      <section onTouchStart={() => setPaused(true)}>
+      <section
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
+        style={{ touchAction: "pan-y" }}
+      >
         <MosaicHeading>Neueste Artikel</MosaicHeading>
         {preload.length > 0 && (
           <div className="hidden" aria-hidden="true">