feat(mobile): add document title editing dialog

Replace the inline contentEditable DocTitle on mobile with a tappable
title button that opens a rename dialog via the global dialog system
(openDialog / closeDialog from dialogStore).

The TitleEditContent component reuses useUpdateDocMetadata for
persistence and hocuspocusProvider.sendStateless for real-time sync.
A stateless event listener keeps the displayed title in sync with
remote changes from other collaborators.

Extend DialogConfig with an `align` prop ('center' | 'top') and
update ModalContent + GlobalDialog to support it. The title dialog
uses align="top" so it appears above the iOS virtual keyboard,
respecting safe-area-inset-top.

Author: HMarzban

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

@@ -7,18 +7,17 @@ import { Modal, ModalContent } from '@components/ui/Dialog'
 import UnreadBadge from '@components/ui/UnreadBadge'
 import { useBottomSheet } from '@hooks/useBottomSheet'
 import { useNotificationCount } from '@hooks/useNotificationCount'
-import { useStore } from '@stores'
-import { useAuthStore } from '@stores'
+import useUpdateDocMetadata from '@hooks/useUpdateDocMetadata'
+import { useAuthStore, useStore } from '@stores'
 import dynamic from 'next/dynamic'
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { BiCheck, BiRedo, BiUndo } from 'react-icons/bi'
 import { MdMenu, MdNotifications } from 'react-icons/md'
 
 const SettingsPanel = dynamic(() => import('@components/settings/SettingsPanel'), {
   loading: () => <SettingsPanelSkeleton />
 })
 
-import DocTitle from '../DocTitle'
 import FilterBar from './FilterBar'
 import ReadOnlyIndicator from './ReadOnlyIndicator'
 
@@ -128,13 +127,131 @@ const UndoRedoButtons = ({ editor, className }: UndoRedoButtonsProps) => {
   )
 }
 
+// ---------------------------------------------------------------------------
+// TitleEditContent – rendered inside the global dialog via openDialog()
+// ---------------------------------------------------------------------------
+
+const TitleEditContent = () => {
+  const { metadata, hocuspocusProvider } = useStore((state) => state.settings)
+  const setWorkspaceSetting = useStore((state) => state.setWorkspaceSetting)
+  const closeDialog = useStore((state) => state.closeDialog)
+  const { isLoading, mutate } = useUpdateDocMetadata()
+  const [value, setValue] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Populate + auto-select on mount (dialog just opened)
+  useEffect(() => {
+    setValue(metadata?.title || '')
+    const timer = setTimeout(() => inputRef.current?.select(), 120)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const handleSave = () => {
+    const trimmed = value.trim()
+    if (!trimmed || trimmed === metadata?.title) {
+      closeDialog()
+      return
+    }
+
+    mutate(
+      { title: trimmed, documentId: metadata.documentId },
+      {
+        onSuccess: (responseData) => {
+          const updated = (responseData as any).data ?? responseData
+          setWorkspaceSetting('metadata', { ...metadata, title: updated.title })
+          hocuspocusProvider?.sendStateless(JSON.stringify({ type: 'docTitle', state: updated }))
+          closeDialog()
+        }
+      }
+    )
+  }
+
+  return (
+    <div className="p-5">
+      <label
+        htmlFor="mobile-doc-title-input"
+        className="text-base-content mb-3 block text-base font-semibold">
+        Rename Document Title
+      </label>
+
+      <input
+        ref={inputRef}
+        id="mobile-doc-title-input"
+        type="text"
+        className="input input-bordered w-full"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') handleSave()
+          if (e.key === 'Escape') closeDialog()
+        }}
+        placeholder="Document title"
+        autoComplete="off"
+        maxLength={200}
+      />
+
+      <div className="mt-4 flex justify-end gap-2">
+        <Button variant="ghost" size="sm" onClick={closeDialog}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={handleSave}
+          disabled={isLoading || !value.trim()}>
+          {isLoading ? 'Saving…' : 'Save'}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// MobilePadTitle – sticky header for the mobile document view
+// ---------------------------------------------------------------------------
+
 const MobilePadTitle = () => {
   const user = useAuthStore((state) => state.profile)
   const {
-    editor: { isEditable, instance: editor }
+    editor: { isEditable, instance: editor },
+    metadata,
+    hocuspocusProvider
   } = useStore((state) => state.settings)
+  const setWorkspaceSetting = useStore((state) => state.setWorkspaceSetting)
+  const openDialog = useStore((state) => state.openDialog)
   const [isProfileModalOpen, setProfileModalOpen] = useState(false)
 
+  // Keep the store title in sync with remote changes from other users.
+  // On desktop this is handled by the always-mounted DocTitle component;
+  // on mobile we need our own listener since DocTitle is not rendered.
+  //
+  // A ref is used so the handler always reads the latest metadata without
+  // causing the effect to re-subscribe on every metadata change.
+  const metadataRef = useRef(metadata)
+  metadataRef.current = metadata
+
+  useEffect(() => {
+    if (!hocuspocusProvider) return
+
+    const handler = ({ payload }: any) => {
+      try {
+        const msg = JSON.parse(payload)
+        if (msg.type === 'docTitle') {
+          setWorkspaceSetting('metadata', { ...metadataRef.current, title: msg.state.title })
+        }
+      } catch {
+        /* ignore malformed payloads */
+      }
+    }
+
+    hocuspocusProvider.on('stateless', handler)
+    return () => hocuspocusProvider.off('stateless', handler)
+  }, [hocuspocusProvider, setWorkspaceSetting])
+
+  const handleTitleClick = () => {
+    openDialog(<TitleEditContent />, { size: 'sm', align: 'top', className: 'mt-14' })
+  }
+
   return (
     <>
       {/* Sticky mobile header - theme-aware */}
@@ -149,9 +266,12 @@ const MobilePadTitle = () => {
               {isEditable ? (
                 <UndoRedoButtons editor={editor} className="ml-2" />
               ) : (
-                <div className="min-w-0 flex-1 overflow-hidden">
-                  <DocTitle className="truncate text-sm font-medium" />
-                </div>
+                <button
+                  type="button"
+                  className="min-w-0 flex-1 truncate text-left text-lg font-semibold"
+                  onClick={handleTitleClick}>
+                  {metadata?.title || 'Untitled'}
+                </button>
               )}
             </div>
 

packages/webapp/src/components/ui/Dialog.tsx

@@ -72,12 +72,14 @@ export function Modal({
 
 type Props = {
   size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full'
+  align?: 'center' | 'top'
   className?: string
   children: React.ReactNode
 } & Omit<React.HTMLProps<HTMLDivElement>, 'size'>
 
 export const ModalContent = function ModalContent({
   size = 'md',
+  align = 'center',
   className = '',
   children,
   ...restProps
@@ -107,7 +109,12 @@ export const ModalContent = function ModalContent({
       <FloatingOverlay
         className="bg-base-content/40 fixed inset-0 z-50 backdrop-blur-sm"
         lockScroll>
-        <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div
+          className={`fixed inset-0 flex justify-center p-4 ${
+            align === 'top'
+              ? 'items-start pt-[max(env(safe-area-inset-top,1rem),1rem)]'
+              : 'items-center'
+          }`}>
           <FloatingFocusManager context={context}>
             <div
               ref={ref}

packages/webapp/src/components/ui/GlobalDialog.tsx

@@ -16,7 +16,7 @@ export function GlobalDialog() {
 
   return (
     <Modal open={isOpen} onOpenChange={handleOpenChange}>
-      <ModalContent size={config.size} className={config.className}>
+      <ModalContent size={config.size} align={config.align} className={config.className}>
         {content}
       </ModalContent>
     </Modal>

packages/webapp/src/stores/dialogStore.ts

@@ -3,6 +3,7 @@ import { immer } from 'zustand/middleware/immer'
 
 export interface DialogConfig {
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  align?: 'center' | 'top'
   className?: string
   dismissible?: boolean
 }