feat: Added swipe gestures for dismissing panes on mobile (#2201)

packages/web/src/javascripts/Components/NoteGroupView/EditorPane.tsx

@@ -0,0 +1,33 @@
+import { WebApplication } from '@/Application/Application'
+import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
+import { mergeRefs } from '@/Hooks/mergeRefs'
+import { ForwardedRef, forwardRef } from 'react'
+import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
+import { usePaneSwipeGesture } from '../Panes/usePaneGesture'
+import NoteGroupView from './NoteGroupView'
+
+type Props = {
+  application: WebApplication
+  className?: string
+  id: string
+}
+
+const EditorPane = forwardRef(({ application, className, id }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  const { setPaneLayout } = useResponsiveAppPane()
+
+  const [setElement] = usePaneSwipeGesture('right', () => {
+    setPaneLayout(PaneLayout.ItemSelection)
+  })
+
+  return (
+    <div
+      id={id}
+      ref={mergeRefs([ref, setElement])}
+      className={`flex h-full flex-grow flex-col bg-default pt-safe-top ${className}`}
+    >
+      <NoteGroupView className={className} application={application} />
+    </div>
+  )
+})
+
+export default EditorPane

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

@@ -21,8 +21,6 @@ type State = {
 type Props = {
   application: WebApplication
   className?: string
-  innerRef: (ref: HTMLDivElement) => void
-  id: string
 }
 
 class NoteGroupView extends AbstractComponent<Props, State> {
@@ -99,11 +97,7 @@ class NoteGroupView extends AbstractComponent<Props, State> {
     const hasControllers = this.state.controllers.length > 0
 
     return (
-      <div
-        id={this.props.id}
-        className={`flex h-full flex-grow flex-col pt-safe-top ${this.props.className}`}
-        ref={this.props.innerRef}
-      >
+      <>
         {this.state.showMultipleSelectedNotes && (
           <MultipleSelectedNotes
             application={this.application}
@@ -138,7 +132,7 @@ class NoteGroupView extends AbstractComponent<Props, State> {
             })}
           </>
         )}
-      </div>
+      </>
     )
   }
 }