feat(toolbar): enhance visibility transitions for format selection on mobile

Author: HMarzban

packages/webapp/src/components/pages/document/components/toolbarMobile/FormatSelection.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { Editor } from '@tiptap/core'
 import {
   MdFormatBold,
@@ -13,13 +14,46 @@ import { HighlightMarker } from '@icons'
 import ToolbarButton from '@components/TipTap/toolbar/ToolbarButton'
 
 const FormatSelection = ({ isVisible, editor }: { isVisible: boolean; editor: Editor }) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
+
+  // Handle visibility and transitions
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    // Clear any pending timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
+    if (isVisible) {
+      // Show: make visible immediately for smooth transition
+      container.style.visibility = 'visible'
+    } else {
+      // Hide: wait for transition to complete (300ms), then hide from DOM
+      timeoutRef.current = setTimeout(() => {
+        if (container && !isVisible) {
+          container.style.visibility = 'hidden'
+        }
+      }, 300)
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [isVisible])
+
   return (
     <div
-      className={`tiptap-toolbar-mobile__format-selection bg-base-100 absolute top-0 left-0 z-0 w-full space-y-6 rounded-t-3xl px-4 py-6 transition-all ${
+      ref={containerRef}
+      className={`tiptap-toolbar-mobile__format-selection bg-base-100 absolute top-0 left-0 z-0 w-full space-y-6 rounded-t-3xl px-4 py-6 transition-all duration-300 ${
         isVisible
-          ? 'block -translate-y-[134px] shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1),_0_-2px_4px_-1px_rgba(0,0,0,0.06)]'
-          : 'hidden translate-y-[0]'
-      } `}>
+          ? 'pointer-events-auto -translate-y-[134px] opacity-100 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1),_0_-2px_4px_-1px_rgba(0,0,0,0.06)]'
+          : 'pointer-events-none translate-y-0 opacity-0'
+      }`}>
       <div className="flex items-center justify-between">
         <ToolbarButton
           onTouchEnd={() => editor.chain().focus().toggleBold().run()}