Migrate from MUI Swipeable Drawer to react-modal-sheet

package.json

@@ -112,6 +112,7 @@
     "lottie-react": "^2.4.1",
     "marked": "^17.0.1",
     "moize": "^6.1.7",
+    "motion": "^12.23.26",
     "murmurhash3js": "^3.0.1",
     "nanoid": "^5.1.6",
     "openai": "^5.20.3",
@@ -127,6 +128,7 @@
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.1",
     "react-gravatar": "^2.6.3",
+    "react-modal-sheet": "^5.2.1",
     "react-native-web": "^0.21.2",
     "react-redux": "^9.2.0",
     "react-signature-pad-wrapper": "^4.2.0",

src/components/AppComponent.tsx

@@ -1,7 +1,7 @@
 import { Capacitor } from '@capacitor/core'
 import { StatusBar, Style } from '@capacitor/status-bar'
 import _ from 'lodash'
-import React, { FC, PropsWithChildren, useEffect, useLayoutEffect } from 'react'
+import React, { FC, PropsWithChildren, useEffect, useLayoutEffect, useRef } from 'react'
 import { useSelector } from 'react-redux'
 import { WebviewBackground } from 'webview-background'
 import { css } from '../../styled-system/css'
@@ -115,6 +115,7 @@ const AppComponent: FC = () => {
   const fontSize = useSelector(state => state.fontSize)
   const showModal = useSelector(state => state.showModal)
   const tutorial = useSelector(isTutorial)
+  const rootRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     WebviewBackground.changeBackgroundColor({ color: colors.bg })
@@ -171,6 +172,7 @@ const AppComponent: FC = () => {
         /* safeAreaTop applies for rounded screens */
         paddingTop: 'safeAreaTop',
       })}
+      ref={rootRef}
     >
       <Alert />
       <Tips />
@@ -215,7 +217,7 @@ const AppComponent: FC = () => {
           {/* NavBar must be outside MultiGestureIfTouch in order to have a higher stacking order than the Sidebar. Otherwise the user can accidentally activate the Sidebar edge swipe when trying to tap the Home icon. */}
           <NavBar position='bottom' />
 
-          <CommandCenter />
+          <CommandCenter mountPoint={rootRef.current ?? undefined} />
           <div style={{ fontSize }}>
             <Footer />
           </div>