feat: screen presentation and dismiss animations for mobile (#2073)

packages/web/src/javascripts/Hooks/useForwardedRef.tsx

@@ -0,0 +1,19 @@
+import { ForwardedRef, useEffect, useRef } from 'react'
+
+export const useForwardedRef = <T,>(ref: ForwardedRef<T>, initialValue = null) => {
+  const targetRef = useRef<T>(initialValue)
+
+  useEffect(() => {
+    if (!ref) {
+      return
+    }
+
+    if (typeof ref === 'function') {
+      ref(targetRef.current)
+    } else {
+      ref.current = targetRef.current
+    }
+  }, [ref])
+
+  return targetRef
+}

packages/web/src/javascripts/Hooks/useIsTabletOrMobileScreen.tsx

@@ -0,0 +1,37 @@
+import { WebApplication } from '@/Application/Application'
+import { useApplication } from '@/Components/ApplicationProvider'
+import { isMobileScreen, isTabletOrMobileScreen, isTabletScreen } from '@/Utils'
+import { useEffect, useState } from 'react'
+
+export function getIsTabletOrMobileScreen(application: WebApplication) {
+  const isNativeMobile = application.isNativeMobileWeb()
+  const isTabletOrMobile = isTabletOrMobileScreen() || isNativeMobile
+  const isTablet = isTabletScreen() || (isNativeMobile && !isMobileScreen())
+  const isMobile = isMobileScreen() || (isNativeMobile && !isTablet)
+
+  return {
+    isTabletOrMobile,
+    isTablet,
+    isMobile,
+  }
+}
+
+export default function useIsTabletOrMobileScreen() {
+  const [_windowSize, setWindowSize] = useState(0)
+  const application = useApplication()
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize(window.innerWidth)
+    }
+
+    window.addEventListener('resize', handleResize)
+    handleResize()
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return getIsTabletOrMobileScreen(application)
+}