refactor: allow note list swipe gesture on android to start from anywhere, and close keyboard on any swipe gesture

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -9,7 +9,7 @@ import {
 } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/WebApplication'
 import { PANEL_NAME_NOTES } from '@/Constants/Constants'
-import { FileItem, PrefKey, WebAppEvent } from '@standardnotes/snjs'
+import { FileItem, Platform, PrefKey, WebAppEvent } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { forwardRef, useCallback, useEffect, useMemo } from 'react'
 import ContentList from '@/Components/ContentListView/ContentList'
@@ -305,7 +305,9 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
       }
     }, [selectedUuids, innerRef, isCurrentNoteTemplate, renderedItems, panes])
 
-    const [setElement] = usePaneSwipeGesture('right', () => setPaneLayout(PaneLayout.TagSelection))
+    const [setElement] = usePaneSwipeGesture('right', () => setPaneLayout(PaneLayout.TagSelection), {
+      requiresStartFromEdge: application.platform !== Platform.Android,
+    })
 
     return (
       <div

packages/web/src/javascripts/Components/Panes/usePaneGesture.ts

@@ -36,8 +36,12 @@ const supportsPassive = (() => {
 export const usePaneSwipeGesture = (
   direction: 'left' | 'right',
   onSwipeEnd: (element: HTMLElement) => void,
-  gesture: 'pan' | 'swipe' = 'pan',
+  options?: {
+    gesture?: 'swipe' | 'pan'
+    requiresStartFromEdge?: boolean
+  },
 ) => {
+  const { gesture = 'pan', requiresStartFromEdge = true } = options || {}
   const application = useApplication()
 
   const underlayElementRef = useRef<HTMLElement | null>(null)
@@ -100,10 +104,11 @@ export const usePaneSwipeGesture = (
       const touch = event.touches[0]
       startX = touch.clientX
 
-      if (
+      const isStartOutOfThreshold =
         (direction === 'right' && startX > TouchStartThreshold) ||
         (direction === 'left' && startX < TouchStartThreshold)
-      ) {
+
+      if (isStartOutOfThreshold && requiresStartFromEdge) {
         canceled = true
         return
       }
@@ -197,6 +202,10 @@ export const usePaneSwipeGesture = (
         closestScrollContainer.style.overflowY = 'hidden'
       }
 
+      if (document.activeElement) {
+        ;(document.activeElement as HTMLElement).blur()
+      }
+
       if (adjustedGesture === 'pan') {
         const x =
           direction === 'right' ? Math.max(deltaX - TouchMoveThreshold, 0) : Math.min(deltaX + TouchMoveThreshold, 0)
@@ -265,7 +274,7 @@ export const usePaneSwipeGesture = (
       element.removeEventListener('touchend', touchEndListener)
       disposeUnderlay()
     }
-  }, [direction, element, isMobileScreen, onSwipeEndRef, isEnabled, adjustedGesture])
+  }, [direction, element, isMobileScreen, onSwipeEndRef, isEnabled, adjustedGesture, requiresStartFromEdge])
 
   return [setElement]
 }

packages/web/src/javascripts/Components/Tags/Navigation.tsx

@@ -52,7 +52,9 @@ const Navigation = forwardRef<HTMLDivElement, Props>(({ application, className,
       setPaneLayout(PaneLayout.ItemSelection)
       element.style.left = '0'
     },
-    'swipe',
+    {
+      gesture: 'swipe',
+    },
   )
 
   const { hasBottomInset } = useAvailableSafeAreaPadding()