feat: migrate to react-modal-sheet for mobile

Author: HMarzban

packages/webapp/components/TipTap/pad-title-section/MobilePadTitle.tsx

@@ -14,17 +14,21 @@ import SignInPanel from '@components/pages/panels/SignInPanel'
 import ToolbarButton from '@components/TipTap/toolbar/ToolbarButton'
 import { BiCheck, BiUndo, BiRedo } from 'react-icons/bi'
 import { useNotificationCount } from '@hooks/useNotificationCount'
-import { ModalBottomToTop } from '@components/ui/ModalBottomToTop'
 import NotificationModal from '@components/notificationPanel/mobile/NotificationModal'
-
+import { Sheet } from 'react-modal-sheet'
 interface UserProfileButtonProps {
   user: any
   onProfileClick: () => void
 }
 
+interface UndoRedoButtonsProps {
+  editor: any
+  className?: string
+}
+
 interface NotificationButtonProps {
   unreadCount: number
-  modalRef: React.RefObject<any>
+  setIsNotificationSheetOpen: (isOpen: boolean) => void
 }
 
 const EditableToggle = ({ isEditable }: { isEditable: boolean }) => {
@@ -73,12 +77,15 @@ const UserProfileButton = ({ user, onProfileClick }: UserProfileButtonProps) =>
   )
 }
 
-const NotificationButton = ({ unreadCount, modalRef }: NotificationButtonProps) => {
+const NotificationButton = ({
+  unreadCount,
+  setIsNotificationSheetOpen
+}: NotificationButtonProps) => {
   return (
     <Button
       className="btn-ghost tooltip tooltip-bottom relative p-2"
       data-tip="Notifications"
-      onClick={() => modalRef.current?.check()}>
+      onClick={() => setIsNotificationSheetOpen(true)}>
       <MdInsertComment size={26} className="text-docsy" />
       {unreadCount > 0 && (
         <div className="absolute top-[2px] right-[2px] flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs text-white">
@@ -89,11 +96,6 @@ const NotificationButton = ({ unreadCount, modalRef }: NotificationButtonProps)
   )
 }
 
-interface UndoRedoButtonsProps {
-  editor: any
-  className?: string
-}
-
 const UndoRedoButtons = ({ editor, className }: UndoRedoButtonsProps) => {
   return (
     <div className={`flex items-center ${className}`}>
@@ -119,6 +121,8 @@ const MobilePadTitle = () => {
   } = useStore((state) => state.settings)
   const [isProfileModalOpen, setProfileModalOpen] = useState(false)
   const notificationModalRef = useRef<any>(null!)
+  const [isNotificationSheetOpen, setIsNotificationSheetOpen] = useState(false)
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false)
 
   return (
     <>
@@ -139,7 +143,10 @@ const MobilePadTitle = () => {
 
             <div className="flex w-[20%] items-center justify-end gap-2">
               <ReadOnlyIndicator />
-              <NotificationButton unreadCount={unreadCount} modalRef={notificationModalRef} />
+              <NotificationButton
+                unreadCount={unreadCount}
+                setIsNotificationSheetOpen={setIsNotificationSheetOpen}
+              />
               <UserProfileButton user={user} onProfileClick={() => setProfileModalOpen(true)} />
             </div>
           </div>
@@ -149,17 +156,19 @@ const MobilePadTitle = () => {
         </div>
       </div>
 
-      <ModalBottomToTop
-        modalId="notificationModal"
-        contentClassName="h-[60%] overflow-hidden"
-        ref={notificationModalRef}
-        defaultHeight={800}>
-        <div
-          style={{ height: 'calc(100% - 24px)' }}
-          className="flex flex-col justify-start overflow-hidden">
-          <NotificationModal />
-        </div>
-      </ModalBottomToTop>
+      <Sheet
+        id="notification_sheet"
+        modalEffectRootId="notification_sheet"
+        isOpen={isNotificationSheetOpen}
+        onClose={() => setIsNotificationSheetOpen(false)}>
+        <Sheet.Container>
+          <Sheet.Header />
+          <Sheet.Content>
+            <NotificationModal />
+          </Sheet.Content>
+        </Sheet.Container>
+        <Sheet.Backdrop />
+      </Sheet>
 
       <Modal
         asAChild={false}

packages/webapp/components/notificationPanel/desktop/NotificationPanel.tsx

@@ -19,7 +19,7 @@ export const NotificationPanel = () => {
     setNotificationActiveTab
   } = useStore((state) => state)
 
-  useNotificationSummary({ mobile: false })
+  useNotificationSummary()
   useNotificationTabData()
 
   const activeTabNotifList = useMemo(() => {

packages/webapp/components/notificationPanel/hooks/useNotificationSummary.ts

@@ -3,10 +3,8 @@ import { useApi } from '@hooks/useApi'
 import { getNotificationsSummary } from '@api'
 import { useAuthStore, useStore } from '@stores'
 import { TNotificationSummary } from '@types'
-import { useDropdown } from '@components/ui/Dropdown'
-import { useModalBottomToTopOptional } from '@components/ui'
 
-export const useNotificationSummary = ({ mobile = false }: { mobile: boolean }) => {
+export const useNotificationSummary = () => {
   const { workspaceId } = useStore((state) => state.settings)
   const user = useAuthStore((state) => state.profile)
   const {
@@ -17,9 +15,6 @@ export const useNotificationSummary = ({ mobile = false }: { mobile: boolean })
     setNotificationTab,
     setNotificationPage
   } = useStore((state) => state)
-  const modalContext = mobile ? useModalBottomToTopOptional() : null
-  const dropdownContext = mobile ? null : useDropdown()
-  const isOpen = modalContext?.isOpen || dropdownContext?.isOpen || false
 
   const { request: summaryRequest } = useApi(getNotificationsSummary, null, false)
 
@@ -55,5 +50,5 @@ export const useNotificationSummary = ({ mobile = false }: { mobile: boolean })
     }
 
     fetchNotificationSummary()
-  }, [user, workspaceId, isOpen])
+  }, [user, workspaceId])
 }

packages/webapp/components/notificationPanel/mobile/NotificationModal.tsx

@@ -12,7 +12,7 @@ import { useNotificationTabData } from '../hooks/useNotificationTabData'
 const NotificationModal = () => {
   const { loadingNotification, notifications, notificationActiveTab } = useStore((state) => state)
 
-  useNotificationSummary({ mobile: true })
+  useNotificationSummary()
   useNotificationTabData()
 
   const activeTabNotifList = useMemo(() => {

packages/webapp/components/pages/document/components/FilterModal.tsx

@@ -1,8 +1,36 @@
 import React, { useState, useEffect, useRef, RefObject } from 'react'
 import { useRouter } from 'next/router'
 import { IoClose } from 'react-icons/io5'
+const FilterModalHeader = ({
+  setIsFilterModalOpen
+}: {
+  setIsFilterModalOpen: (isOpen: boolean) => void
+}) => {
+  return (
+    <>
+      <div className="flex w-full items-center justify-center">
+        <span className="drag-indicator h-1 w-14 rounded-full bg-gray-300"></span>
+      </div>
+      <div className="mb-3 flex w-full bg-white py-2 text-black">
+        <p className="w-2/3 text-lg font-semibold">Filters</p>
+        <div className="flex w-1/3 flex-row items-center justify-end justify-items-end">
+          <label
+            htmlFor="filterModalBottom"
+            className="btn btn-square btn-ghost btn-sm ml-2 text-black"
+            onClick={() => setIsFilterModalOpen(false)}>
+            <IoClose size={20} />
+          </label>
+        </div>
+      </div>
+    </>
+  )
+}
 
-const FilterModal = () => {
+const FilterModal = ({
+  setIsFilterModalOpen
+}: {
+  setIsFilterModalOpen: (isOpen: boolean) => void
+}) => {
   const filterSearchRef = useRef<HTMLInputElement>(null)
   const [totalHeading, setTotalHeading] = useState(0)
   const [totalSearch, setTotalSearch] = useState(0)
@@ -51,15 +79,8 @@ const FilterModal = () => {
   }
 
   return (
-    <div className="h-full max-h-96 w-full rounded-t-2xl bg-white p-4">
-      <div className="mb-3 flex w-full bg-white py-2 text-blue-600">
-        <p className="w-2/3">Filters</p>
-        <div className="flex w-1/3 flex-row items-center justify-end justify-items-end">
-          <label htmlFor="filterModalBottom" className="btn btn-circle btn-xs ml-2">
-            <IoClose size={20} />
-          </label>
-        </div>
-      </div>
+    <div className="h-full max-h-96 w-full rounded-t-lg bg-white p-4">
+      <FilterModalHeader setIsFilterModalOpen={setIsFilterModalOpen} />
       <div className="join w-full">
         <input
           id="filterModalBottom"
@@ -71,7 +92,7 @@ const FilterModal = () => {
           onKeyUp={searchThroughHeading}
           ref={filterSearchRef}
         />
-        <p className="join-item flex w-3/12 items-center justify-center rounded-r bg-base-300 text-sm">
+        <p className="join-item bg-base-300 flex w-3/12 items-center justify-center rounded-r text-sm">
           <span className="text-center">
             found <br /> {totalSearch} of {totalHeading}
           </span>

packages/webapp/components/pages/document/components/TocModal.tsx

@@ -8,16 +8,12 @@ import { MdFilterAlt, MdHistory } from 'react-icons/md'
 import TableOfContents from '@components/TipTap/tableOfContents/mobile/TocMobile'
 import { useModal } from '@components/ui/ModalDrawer'
 
-const TocModal = ({ filterModalRef }: any) => {
+const TocModal = ({ setIsFilterModalOpen }: any) => {
   const { close: closeModal } = useModal() || {}
   const {
     editor: { loading, applyingFilters, providerSyncing, instance: editor }
   } = useStore((state) => state.settings)
 
-  const handleFilterClick = useCallback(() => {
-    filterModalRef.current?.check()
-  }, [])
-
   if (loading || !editor || applyingFilters || providerSyncing) {
     return null
   }
@@ -46,7 +42,7 @@ const TocModal = ({ filterModalRef }: any) => {
             <label
               htmlFor="mobile_history_panel"
               onClick={() => {
-                handleFilterClick()
+                setIsFilterModalOpen(true)
                 closeModal?.()
               }}
               className="btn btn-sm join-item">

packages/webapp/components/pages/document/components/chat/ChatContainerMobile.tsx

@@ -2,8 +2,7 @@ import { useChatStore } from '@stores'
 import ToolbarMobile from '@components/chat/components/ToolbarMobile'
 import { ChannelProvider } from '@components/chat/context/ChannelProvider'
 import { ChatRoom } from '@components/chat/ChatRoom'
-import { ModalBottomToTop } from '@components/ui/ModalBottomToTop'
-import { useEffect, useRef } from 'react'
+import { Sheet } from 'react-modal-sheet'
 
 const initSettings = {
   displayChannelBar: false,
@@ -22,42 +21,27 @@ const initSettings = {
 
 const ChatContainerMobile = () => {
   const chatRoom = useChatStore((state) => state.chatRoom)
-  const modalRef = useRef(null)
-  const destroyChatRoom = useChatStore((state) => state.destroyChatRoom)
-
-  useEffect(() => {
-    if (!modalRef.current) return
-
-    if (chatRoom?.headingId) {
-      ;(modalRef.current as any).check()
-    } else {
-      ;(modalRef.current as any).uncheck()
-    }
-  }, [chatRoom?.headingId, modalRef.current])
-
-  const modalStateChange = (state: boolean) => {
-    if (!state) destroyChatRoom()
-  }
+  const toggleChatRoom = useChatStore((state) => state.toggleChatRoom)
 
   if (!chatRoom?.headingId) return null
 
   return (
-    <ModalBottomToTop
-      showBackdrop={false}
-      ref={modalRef}
-      onModalStateChange={modalStateChange}
-      modalId="chatBottomPannel"
-      contentClassName="h-[60%] overflow-hidden"
-      defaultHeight={560}>
-      <div
-        style={{ height: 'calc(100% - 24px)' }}
-        className="flex flex-col justify-start overflow-hidden">
-        <ToolbarMobile />
-        <ChannelProvider initChannelId={chatRoom.headingId} initSettings={initSettings}>
-          <ChatRoom className="flex h-auto flex-auto flex-col overflow-auto"></ChatRoom>
-        </ChannelProvider>
-      </div>
-    </ModalBottomToTop>
+    <Sheet
+      isOpen={chatRoom.open}
+      onClose={() => toggleChatRoom()}
+      id="chat_sheet"
+      modalEffectRootId="chat_sheet">
+      <Sheet.Container>
+        <Sheet.Header />
+        <Sheet.Content>
+          <ToolbarMobile />
+          <ChannelProvider initChannelId={chatRoom.headingId} initSettings={initSettings}>
+            <ChatRoom className="flex h-auto flex-auto flex-col overflow-auto"></ChatRoom>
+          </ChannelProvider>
+        </Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop />
+    </Sheet>
   )
 }
 

packages/webapp/components/pages/document/layouts/MobileLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import MobilePadTitle from '@components/TipTap/pad-title-section/MobilePadTitle'
 import FilterModal from '../components/FilterModal'
 import MobileEditor from '../components/MobileEditor'
@@ -9,12 +9,12 @@ import BigPencilBtn from '@components/pages/document/components/BigPencilBtn'
 import { ModalDrawer } from '@components/ui/ModalDrawer'
 import { useHashRouter } from '@hooks/useHashRouter'
 import MobileHistory from '@components/pages/history/mobile/MobileHistory'
-import { ModalBottomToTop } from '@components/ui/ModalBottomToTop'
+import { Sheet } from 'react-modal-sheet'
 
-const MobileLeftSidePanel = ({ filterModalRef }: any) => {
+const MobileLeftSidePanel = ({ filterModalRef, setIsFilterModalOpen }: any) => {
   return (
     <ModalDrawer modalId="mobile_left_side_panel" width={80}>
-      <TocModal filterModalRef={filterModalRef} />
+      <TocModal filterModalRef={filterModalRef} setIsFilterModalOpen={setIsFilterModalOpen} />
     </ModalDrawer>
   )
 }
@@ -26,6 +26,8 @@ const MobileLayout = () => {
     }
   } = useStore((state) => state)
 
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false)
+
   const filterModalRef = useRef<HTMLDivElement>(null)
   const deviceClass = isMobile ? 'm_mobile' : 'm_desktop'
 
@@ -36,13 +38,27 @@ const MobileLayout = () => {
   return (
     <div className={`tiptap relative flex h-full w-full flex-col ${deviceClass}`}>
       <MobilePadTitle />
-      <MobileLeftSidePanel filterModalRef={filterModalRef} />
+      <MobileLeftSidePanel
+        filterModalRef={filterModalRef}
+        setIsFilterModalOpen={setIsFilterModalOpen}
+      />
       <MobileEditor />
       <BigPencilBtn />
       <ChatContainerMobile />
-      <ModalBottomToTop modalId="filterModal" ref={filterModalRef} defaultHeight={300}>
-        <FilterModal />
-      </ModalBottomToTop>
+
+      <Sheet
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        snapPoints={[0.5, 0]}
+        modalEffectRootId="filter_sheet"
+        id="filter_sheet">
+        <Sheet.Container>
+          <Sheet.Content>
+            <FilterModal setIsFilterModalOpen={setIsFilterModalOpen} />
+          </Sheet.Content>
+        </Sheet.Container>
+        <Sheet.Backdrop />
+      </Sheet>
     </div>
   )
 }