fix: mobile touch events

src/client/chat.jsx

@@ -11,24 +11,25 @@ export default function Chat() {
   const ref = useRef(null);
   const {tablet} = useBreakpoints();
   let origin;
-  const onPointerEvents = {
-    onPointerDown: (event) => {
+  const abstract = {
+    down: ({pageX}) => {
       if (ref.current) {
         origin = {
           left: parseInt(ref.current.style.left, 10),
-          point: event.clientX,
+          point: pageX,
         };
       }
     },
-    onPointerMove: (event) => {
+    move: ({pageX}) => {
       if (origin) {
         ref.current.classList.add('moving');
-        const offset = event.clientX - origin.point + origin.left;
+        const offset = pageX - origin.point + origin.left;
+        const snapped = Math.abs(offset) < 64 ? 0 : offset;
         const max = Math.min(window.innerWidth - 32, (2 + 16) * 16);
-        ref.current.style.left = `${Math.max(-max, Math.min(max, offset))}px`;
+        ref.current.style.left = `${Math.max(-max, Math.min(max, snapped))}px`;
       }
     },
-    onPointerUp: () => {
+    up: () => {
       const left = parseInt(ref.current.style.left, 10);
       const max = Math.min(window.innerWidth - 32, (2 + 16) * 16);
       if (left >= max / 2) {
@@ -44,6 +45,20 @@ export default function Chat() {
       ref.current.classList.remove('moving');
     },
   };
+  const onPointerEvents = {
+    onMouseDown: abstract.down,
+    onMouseMove: abstract.move,
+    onMouseUp: abstract.up,
+    onTouchStart: (event) => {
+      abstract.down(event.touches[0]);
+    },
+    onTouchMove: (event) => {
+      abstract.move(event.touches[0]);
+    },
+    onTouchEnd: (event) => {
+      abstract.up(event.touches[0]);
+    },
+  };
   if (tablet && ref.current) {
     ref.current.style.left = 0;
   }