Swipe down for closing carousel

package-lock.json

@@ -20,6 +20,7 @@
         "preact-router": "~4.1.0",
         "react-intersection-observer": "~9.4.1",
         "string-length": "~5.0.1",
+        "swiped-events": "~1.1.7",
         "toastify-js": "~1.12.0",
         "use-resize-observer": "~9.1.0",
         "valtio": "~1.8.0"
@@ -5041,6 +5042,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiped-events": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.1.7.tgz",
+      "integrity": "sha512-bxEy7djwuLykZpPfoE4IFsbna/ngACEpyPqw9tBOaPQtAshsRK7H5CxoCgSXr0QRQ+7rd2TT3bSKLL3R6xJFwg=="
+    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -9395,6 +9401,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "devOptional": true
     },
+    "swiped-events": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.1.7.tgz",
+      "integrity": "sha512-bxEy7djwuLykZpPfoE4IFsbna/ngACEpyPqw9tBOaPQtAshsRK7H5CxoCgSXr0QRQ+7rd2TT3bSKLL3R6xJFwg=="
+    },
     "temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "preact-router": "~4.1.0",
     "react-intersection-observer": "~9.4.1",
     "string-length": "~5.0.1",
+    "swiped-events": "~1.1.7",
     "toastify-js": "~1.12.0",
     "use-resize-observer": "~9.1.0",
     "valtio": "~1.8.0"

src/components/status.jsx

@@ -10,6 +10,7 @@ import {
   useState,
 } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
+import 'swiped-events';
 import useResizeObserver from 'use-resize-observer';
 import { useSnapshot } from 'valtio';
 
@@ -1270,10 +1271,25 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
 
   const [showControls, setShowControls] = useState(false);
 
+  useEffect(() => {
+    let handleSwipe = () => {
+      onClose();
+    };
+    if (carouselRef.current) {
+      carouselRef.current.addEventListener('swiped-down', handleSwipe);
+    }
+    return () => {
+      if (carouselRef.current) {
+        carouselRef.current.removeEventListener('swiped-down', handleSwipe);
+      }
+    };
+  }, []);
+
   return (
     <>
       <div
         ref={carouselRef}
+        data-swipe-threshold="44"
         class="carousel"
         onClick={(e) => {
           if (