fix: prevent editor toolbar from opening during sheet switch

Author: HMarzban

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import EditorContent from './EditorContent'
 import ToolbarMobile from './toolbarMobile/ToolbarMobile'
-import { useChatStore, useStore } from '@stores'
+import { useChatStore, useStore, useSheetStore } from '@stores'
 import { useAdjustEditorSizeForChatRoom } from '../hooks'
 import useEditableDocControl from '@components/pages/document/hooks/useEditableDocControl'
 import usePageHeightAdjust from '@components/pages/document/hooks/usePageHeightAdjust'
@@ -12,8 +12,9 @@ const Editor = () => {
   const editorWrapperRef = useRef<HTMLDivElement>(null)
 
   const chatRoom = useChatStore((state) => state.chatRoom)
+  const { activeSheet, pendingSheet } = useSheetStore((state) => state)
 
-  const { isKeyboardOpen } = useStore((state) => state)
+  const { isKeyboardOpen, virtualKeyboardState } = useStore((state) => state)
 
   // @ts-ignore
   useAdjustEditorSizeForChatRoom(editorWrapperRef)
@@ -37,7 +38,9 @@ const Editor = () => {
 
       <div
         className={`toolbars bg-base-100 z-10 w-full ${
-          isKeyboardOpen && !chatRoom?.headingId ? 'block' : 'hidden'
+          isKeyboardOpen && !chatRoom?.headingId && !activeSheet && !pendingSheet
+            ? 'block'
+            : 'hidden'
         }`}>
         <ToolbarMobile />
       </div>

packages/webapp/hooks/useVirtualKeyboard.ts

@@ -1,14 +1,15 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { useStore } from '@stores'
 
 const useVirtualKeyboard = () => {
   const { setKeyboardOpen, setKeyboardHeight, setVirtualKeyboardState } = useStore((state) => state)
+  const previousIsOpenRef = useRef<boolean | null>(null)
+  const transitionTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
 
   useEffect(() => {
     const visualViewport = window.visualViewport
 
     if (!visualViewport) {
-      // Fallback for browsers without Visual Viewport API
       return
     }
 
@@ -17,10 +18,38 @@ const useVirtualKeyboard = () => {
       const viewportHeight = visualViewport.height
       const keyboardHeight = windowHeight - viewportHeight
       const isKeyboardOpen = keyboardHeight > 0
+      const previousIsOpen = previousIsOpenRef.current
 
       setKeyboardOpen(isKeyboardOpen)
       setKeyboardHeight(keyboardHeight)
-      setVirtualKeyboardState(isKeyboardOpen ? 'open' : 'closed')
+
+      // Clear any existing transition timeout
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current)
+      }
+
+      // Determine state based on current vs previous
+      if (previousIsOpen === null) {
+        // Initial state - no transition
+        setVirtualKeyboardState(isKeyboardOpen ? 'open' : 'closed')
+      } else if (previousIsOpen === false && isKeyboardOpen === true) {
+        // Keyboard is opening
+        setVirtualKeyboardState('opening')
+        transitionTimeoutRef.current = setTimeout(() => {
+          setVirtualKeyboardState('open')
+        }, 300) // Typical keyboard animation duration
+      } else if (previousIsOpen === true && isKeyboardOpen === false) {
+        // Keyboard is closing
+        setVirtualKeyboardState('closing')
+        transitionTimeoutRef.current = setTimeout(() => {
+          setVirtualKeyboardState('closed')
+        }, 300)
+      } else {
+        // No state change - maintain current state
+        setVirtualKeyboardState(isKeyboardOpen ? 'open' : 'closed')
+      }
+
+      previousIsOpenRef.current = isKeyboardOpen
     }
 
     // Initial check
@@ -33,6 +62,9 @@ const useVirtualKeyboard = () => {
     return () => {
       visualViewport.removeEventListener('resize', handleViewportChange)
       visualViewport.removeEventListener('scroll', handleViewportChange)
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current)
+      }
     }
   }, [])
 }