From d9630c99c7d208c6a84d55af67b2dbe06deddff5 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Nov 2023 17:45:09 +0530
Subject: [PATCH] refactor: take velocity into account for mobile popover
 gesture [skip e2e]

---
 .../Components/Popover/MobilePopoverContent.tsx      | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
index ae412ed12..6a997bbfd 100644
--- a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
@@ -72,6 +72,7 @@ const MobilePopoverContent = ({
 
     let elementY = 0
     let startY = 0
+    let startTimestamp = Date.now()
     let closestScrollContainerScrollTop = 0
     let isClosestScrollContainerScrolledAtStart = false
     let containerScrollChangedAfterTouchStart = false
@@ -79,6 +80,7 @@ const MobilePopoverContent = ({
     const touchStartHandler = (e: TouchEvent) => {
       startY = e.touches[0].clientY
       elementY = element.getBoundingClientRect().y
+      startTimestamp = Date.now()
       closestScrollContainerScrollTop = closestScrollContainer?.scrollTop || 0
       isClosestScrollContainerScrolledAtStart = !!closestScrollContainer && closestScrollContainerScrollTop > 0
       containerScrollChangedAfterTouchStart = false
@@ -117,11 +119,17 @@ const MobilePopoverContent = ({
         },
       )
     }
-    const touchEndHandler = () => {
+    const touchEndHandler = (event: TouchEvent) => {
       const y = element.getBoundingClientRect().y
       const threshold = window.innerHeight * 0.75
 
-      if (y > threshold && !isClosestScrollContainerScrolledAtStart) {
+      const endTimestamp = Date.now()
+      const deltaY = event.changedTouches[0].clientY - startY
+      const velocity = deltaY / (endTimestamp - startTimestamp)
+
+      if (y < threshold && velocity > 2) {
+        requestClose()
+      } else if (y > threshold && !isClosestScrollContainerScrolledAtStart) {
         requestClose()
       } else {
         element.animate(