Swipe to toggle poll results

src/app.jsx

@@ -15,6 +15,7 @@ import {
   useNavigate,
   useParams,
 } from 'react-router-dom';
+import 'swiped-events';
 import { useSnapshot } from 'valtio';
 
 import AccountSheet from './components/account-sheet';

src/components/poll.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 import emojifyText from '../utils/emojify-text';
 import shortenNumber from '../utils/shorten-number';
@@ -61,8 +61,22 @@ export default function Poll({
 
   const [showResults, setShowResults] = useState(false);
   const optionsHaveVoteCounts = options.every((o) => o.votesCount !== null);
+
+  const pollRef = useRef();
+  useEffect(() => {
+    const handleSwipe = () => {
+      console.log('swiped left');
+      setShowResults(!showResults);
+    };
+    pollRef.current?.addEventListener?.('swiped-left', handleSwipe);
+    return () => {
+      pollRef.current?.removeEventListener?.('swiped-left', handleSwipe);
+    };
+  }, [showResults]);
+
   return (
     <div
+      ref={pollRef}
       lang={lang}
       dir="auto"
       class={`poll ${readOnly ? 'read-only' : ''} ${

src/components/status.jsx

@@ -15,7 +15,6 @@ import pThrottle from 'p-throttle';
 import { memo } from 'preact/compat';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
-import 'swiped-events';
 import { useLongPress } from 'use-long-press';
 import useResizeObserver from 'use-resize-observer';
 import { useSnapshot } from 'valtio';