feat(web): add mobile swipe gestures to image gallery

Install react-swipeable and wire useSwipeable onto the main image
container — left-swipe advances to next image, right-swipe goes back.
Gestures only activate when there are multiple images; desktop button
navigation is fully preserved.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/listings/image-gallery.tsx

@@ -2,6 +2,7 @@
 
 import Image from 'next/image';
 import * as React from 'react';
+import { useSwipeable } from 'react-swipeable';
 import { ImageLightbox } from '@/components/listings/image-lightbox';
 import { shimmerBlurDataURL } from '@/lib/image-blur';
 import type { PropertyMedia } from '@/lib/listings-api';
@@ -22,6 +23,13 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
     setLightboxOpen(true);
   }, []);
 
+  const swipeHandlers = useSwipeable({
+    onSwipedLeft: () => setSelectedIndex((i) => (i < images.length - 1 ? i + 1 : 0)),
+    onSwipedRight: () => setSelectedIndex((i) => (i > 0 ? i - 1 : images.length - 1)),
+    preventScrollOnSwipe: true,
+    trackMouse: false,
+  });
+
   if (images.length === 0) {
     return (
       <div
@@ -38,7 +46,7 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
   return (
     <div className={cn('space-y-3', className)}>
       {/* Main image */}
-      <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
+      <div className="relative aspect-video overflow-hidden rounded-lg bg-muted" {...(images.length > 1 ? swipeHandlers : {})}>
         <button
           onClick={() => openLightbox(selectedIndex)}
           className="absolute inset-0 z-10 cursor-zoom-in"