refactor: update mobile sheet and fix keyboard toolbar layout

Author: HMarzban

packages/webapp/components/BottomSheet.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react'
+import { Sheet, SheetProps } from 'react-modal-sheet'
+
+import { useSheetStore, useChatStore } from '@stores'
+import FilterModal from '@components/pages/document/components/FilterModal'
+import NotificationModal from './notificationPanel/mobile/NotificationModal'
+import ChatContainerMobile from './pages/document/components/chat/ChatContainerMobile'
+import SheetHeader from './SheetHeader'
+
+const BottomSheet = () => {
+  const { activeSheet, sheetData, closeSheet } = useSheetStore()
+  const chatRoom = useChatStore((state) => state.chatRoom)
+  const closeChatRoom = useChatStore((state) => state.closeChatRoom)
+  const destroyChatRoom = useChatStore((state) => state.destroyChatRoom)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Sync chat store with bottom sheet
+  useEffect(() => {
+    if (chatRoom.open && activeSheet !== 'chatroom') {
+      // Chat is open in chat store but not in bottom sheet, close chat store
+      closeChatRoom()
+      destroyChatRoom()
+    }
+  }, [activeSheet, chatRoom.open, closeChatRoom])
+
+  const renderContent = () => {
+    switch (activeSheet) {
+      case 'chatroom':
+        return <ChatContainerMobile />
+      case 'notifications':
+        return <NotificationModal />
+      case 'filters':
+        return <FilterModal />
+      default:
+        return null
+    }
+  }
+
+  const getSheetProps = () => {
+    switch (activeSheet) {
+      case 'filters':
+        return {
+          id: 'filter_sheet',
+          detent: 'content-height' as SheetProps['detent']
+        }
+      case 'chatroom':
+        return {
+          id: 'chatroom_sheet',
+          snapPoints: [1, 0.5, 0]
+        }
+      default:
+        return {
+          id: 'bottom_sheet'
+        }
+    }
+  }
+
+  const handleClose = () => {
+    if (activeSheet === 'chatroom') {
+      closeChatRoom()
+      destroyChatRoom()
+    }
+    closeSheet()
+  }
+
+  if (!activeSheet) return null
+
+  return (
+    <Sheet
+      className="bottom-sheet"
+      isOpen={!!activeSheet}
+      onClose={handleClose}
+      {...getSheetProps()}>
+      <Sheet.Container ref={containerRef}>
+        <Sheet.Header />
+        <Sheet.Content>{renderContent()}</Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop onTap={handleClose} />
+    </Sheet>
+  )
+}
+
+export default BottomSheet

packages/webapp/components/SheetHeader.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { IoClose } from 'react-icons/io5'
+import { useSheetStore } from '@stores'
+
+interface SheetHeaderProps {
+  title?: string
+  onClose?: () => void
+  className?: string
+  children?: React.ReactNode
+}
+
+interface SheetHeaderTitleProps {
+  children: React.ReactNode
+  className?: string
+}
+
+interface SheetHeaderActionsProps {
+  children: React.ReactNode
+  className?: string
+}
+
+const SheetHeaderTitle: React.FC<SheetHeaderTitleProps> = ({ children, className = '' }) => (
+  <p className={`flex-1 text-lg font-semibold ${className}`}>{children}</p>
+)
+
+const SheetHeaderActions: React.FC<SheetHeaderActionsProps> = ({ children, className = '' }) => (
+  <div className={`flex flex-row items-center justify-end ${className}`}>{children}</div>
+)
+
+const SheetHeader: React.FC<SheetHeaderProps> & {
+  Title: typeof SheetHeaderTitle
+  Actions: typeof SheetHeaderActions
+} = ({ title, onClose, className = '', children }) => {
+  const { closeSheet } = useSheetStore()
+  const handleClose = onClose || closeSheet
+
+  // Compound component usage
+  if (children) {
+    return (
+      <div className={`mb-3 flex w-full bg-white pb-2 text-black ${className}`}>{children}</div>
+    )
+  }
+
+  return (
+    <div className={`mb-3 flex w-full bg-white pb-2 text-black ${className}`}>
+      <p className="flex-1 text-lg font-semibold">{title}</p>
+      <div className="flex flex-row items-center justify-end">
+        <button className="btn btn-square btn-ghost btn-sm ml-2 text-black" onClick={handleClose}>
+          <IoClose size={20} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+SheetHeader.Title = SheetHeaderTitle
+SheetHeader.Actions = SheetHeaderActions
+
+export default SheetHeader

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

@@ -3,7 +3,7 @@ import ReadOnlyIndicator from './ReadOnlyIndicator'
 import FilterBar from './FilterBar'
 import { useStore } from '@stores'
 import Modal from '@components/ui/Modal'
-import React, { useRef, useState } from 'react'
+import React, { useState } from 'react'
 import { Avatar } from '@components/ui/Avatar'
 import Button from '@components/ui/Button'
 import { useAuthStore } from '@stores'
@@ -14,8 +14,7 @@ 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 NotificationModal from '@components/notificationPanel/mobile/NotificationModal'
-import { Sheet } from 'react-modal-sheet'
+import { useBottomSheet } from '@hooks/useBottomSheet'
 interface UserProfileButtonProps {
   user: any
   onProfileClick: () => void
@@ -26,11 +25,6 @@ interface UndoRedoButtonsProps {
   className?: string
 }
 
-interface NotificationButtonProps {
-  unreadCount: number
-  setIsNotificationSheetOpen: (isOpen: boolean) => void
-}
-
 const EditableToggle = ({ isEditable }: { isEditable: boolean }) => {
   if (isEditable) {
     return (
@@ -77,15 +71,16 @@ const UserProfileButton = ({ user, onProfileClick }: UserProfileButtonProps) =>
   )
 }
 
-const NotificationButton = ({
-  unreadCount,
-  setIsNotificationSheetOpen
-}: NotificationButtonProps) => {
+const NotificationButton = () => {
+  const { openNotifications } = useBottomSheet()
+  const { workspaceId } = useStore((state) => state.settings)
+  const unreadCount = useNotificationCount({ workspaceId })
+
   return (
     <Button
       className="btn-ghost tooltip tooltip-bottom relative p-2"
       data-tip="Notifications"
-      onClick={() => setIsNotificationSheetOpen(true)}>
+      onClick={openNotifications}>
       <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">
@@ -113,16 +108,11 @@ const UndoRedoButtons = ({ editor, className }: UndoRedoButtonsProps) => {
 }
 
 const MobilePadTitle = () => {
-  const { workspaceId } = useStore((state) => state.settings)
-  const unreadCount = useNotificationCount({ workspaceId })
   const user = useAuthStore((state) => state.profile)
   const {
     editor: { isEditable, instance: editor }
   } = 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 (
     <>
@@ -143,10 +133,7 @@ const MobilePadTitle = () => {
 
             <div className="flex w-[20%] items-center justify-end gap-2">
               <ReadOnlyIndicator />
-              <NotificationButton
-                unreadCount={unreadCount}
-                setIsNotificationSheetOpen={setIsNotificationSheetOpen}
-              />
+              <NotificationButton />
               <UserProfileButton user={user} onProfileClick={() => setProfileModalOpen(true)} />
             </div>
           </div>
@@ -156,20 +143,6 @@ const MobilePadTitle = () => {
         </div>
       </div>
 
-      <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}
         id="modal_profile"

packages/webapp/components/chat/components/ToolbarMobile.tsx

@@ -1,41 +1,15 @@
 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>
-    </>
-  )
-}
+import { useSheetStore } from '@stores'
+import SheetHeader from '@components/SheetHeader'
 
-const FilterModal = ({
-  setIsFilterModalOpen
-}: {
-  setIsFilterModalOpen: (isOpen: boolean) => void
-}) => {
+const FilterModal = () => {
   const filterSearchRef = useRef<HTMLInputElement>(null)
   const [totalHeading, setTotalHeading] = useState(0)
   const [totalSearch, setTotalSearch] = useState(0)
   const [search, setSearch] = useState('')
   const router = useRouter()
+  const { isSheetOpen } = useSheetStore((state) => state)
 
   const countHeadings = () => {
     const headings = document.querySelectorAll('.title')
@@ -73,14 +47,13 @@ const FilterModal = ({
     if (search) window.location.href = `/${mainDoc}/${encodeURIComponent(search)}`
   }
 
-  const handleModalStateChange = (isOpen: boolean) => {
-    if (!isOpen) setSearch('')
-    else countHeadings()
-  }
+  useEffect(() => {
+    if (isSheetOpen('filters')) countHeadings()
+  }, [isSheetOpen])
 
   return (
-    <div className="h-full max-h-96 w-full rounded-t-lg bg-white p-4">
-      <FilterModalHeader setIsFilterModalOpen={setIsFilterModalOpen} />
+    <div className="h-full max-h-96 w-full rounded-t-lg bg-white p-4 pt-0">
+      <SheetHeader title="Filters" />
       <div className="join w-full">
         <input
           id="filterModalBottom"

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

@@ -1,5 +1,4 @@
-import { useRef } from 'react'
-import useDetectKeyboardOpen from 'use-detect-keyboard-open'
+import { useEffect, useRef, useState } from 'react'
 import EditorContent from './EditorContent'
 import ToolbarMobile from './toolbarMobile/ToolbarMobile'
 import { useChatStore } from '@stores'
@@ -8,13 +7,15 @@ import useEditableDocControl from '@components/pages/document/hooks/useEditableD
 import usePageHeightAdjust from '@components/pages/document/hooks/usePageHeightAdjust'
 import useUpdateDocPageUnreadMsg from '@components/pages/document/hooks/useUpdateDocPageUnreadMsg'
 import { MobileBubbleMenu } from './MobileBubbleMenu'
+import { animate, useMotionValue } from 'motion/react'
+import useKeyboardHeight from '@hooks/useKeyboardHeight'
 
 const Editor = () => {
   const editorWrapperRef = useRef<HTMLDivElement>(null)
 
   const chatRoom = useChatStore((state) => state.chatRoom)
 
-  const isKeyboardOpen = useDetectKeyboardOpen() || false
+  const { isOpen: isKeyboardOpen, height: keyboardHeight, viewportHeight } = useKeyboardHeight()
 
   // @ts-ignore
   useAdjustEditorSizeForChatRoom(editorWrapperRef)
@@ -27,17 +28,17 @@ const Editor = () => {
 
   return (
     <>
-      <div className="editor relative flex size-full w-full max-w-full flex-col justify-around align-top">
+      <div className="editor editorHeighttt relative flex size-full w-full max-w-full flex-col justify-around align-top">
         <div
           ref={editorWrapperRef}
-          className="editorWrapper flex h-full grow items-start justify-center overflow-hidden overflow-y-auto p-0">
+          className="editorWrapper flex h-full w-full justify-center overflow-hidden overflow-y-auto p-0">
           <MobileBubbleMenu />
           <EditorContent />
         </div>
       </div>
 
       <div
-        className={`toolbars bg-base-100 sticky inset-x-0 bottom-0 z-10 w-full ${
+        className={`toolbars bg-base-100 z-10 w-full ${
           isKeyboardOpen && !chatRoom?.headingId ? 'block' : 'hidden'
         }`}>
         <ToolbarMobile />