feat(core): add draghandle to doc page title (#9079)

fix AF-1846

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -2,8 +2,8 @@ import { Loading, Scrollable } from '@affine/component';
 import { EditorLoading } from '@affine/component/page-detail-skeleton';
 import { Button, IconButton } from '@affine/component/ui/button';
 import { Modal, useConfirmModal } from '@affine/component/ui/modal';
-import { useDocCollectionPageTitle } from '@affine/core/components/hooks/use-block-suite-workspace-page-title';
 import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { EditorService } from '@affine/core/modules/editor';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
@@ -433,7 +433,10 @@ const PageHistoryManager = ({
   const editor = useService(EditorService).editor;
   const [mode, setMode] = useState<DocMode>(editor.mode$.value);
 
-  const title = useDocCollectionPageTitle(docCollection, pageId);
+  const docDisplayMetaService = useService(DocDisplayMetaService);
+  const i18n = useI18n();
+
+  const title = useLiveData(docDisplayMetaService.title$(pageId));
 
   const onConfirmRestore = useCallback(() => {
     openConfirmModal({
@@ -467,7 +470,7 @@ const PageHistoryManager = ({
           snapshotPage={snapshotPage}
           mode={mode}
           onModeChange={setMode}
-          title={title}
+          title={i18n.t(title)}
         />
 
         <PageHistoryList

packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts

@@ -3,7 +3,6 @@ import { style, type StyleRule } from '@vanilla-extract/css';
 
 export const docEditorRoot = style({
   display: 'block',
-  background: cssVar('backgroundPrimaryColor'),
   overflowX: 'clip',
 });
 

packages/frontend/core/src/components/hooks/use-block-suite-workspace-page-title.ts

@@ -1,61 +0,0 @@
-import { assertExists } from '@blocksuite/affine/global/utils';
-import type { DocCollection } from '@blocksuite/affine/store';
-import type { Atom } from 'jotai';
-import { atom, useAtomValue } from 'jotai';
-import { useCallback } from 'react';
-
-import { useJournalInfoHelper } from './use-journal';
-
-const weakMap = new WeakMap<DocCollection, Map<string, Atom<string>>>();
-
-function getAtom(w: DocCollection, pageId: string): Atom<string> {
-  if (!weakMap.has(w)) {
-    weakMap.set(w, new Map());
-  }
-  const map = weakMap.get(w);
-  assertExists(map);
-  if (!map.has(pageId)) {
-    const baseAtom = atom<string>(w.getDoc(pageId)?.meta?.title || 'Untitled');
-    baseAtom.onMount = set => {
-      const disposable = w.meta.docMetaUpdated.on(() => {
-        const page = w.getDoc(pageId);
-        set(page?.meta?.title || 'Untitled');
-      });
-      return () => {
-        disposable.dispose();
-      };
-    };
-    map.set(pageId, baseAtom);
-    return baseAtom;
-  } else {
-    return map.get(pageId) as Atom<string>;
-  }
-}
-
-/**
- * @deprecated use `useDocTitle(docId: string)` instead
- */
-export function useDocCollectionPageTitle(
-  docCollection: DocCollection,
-  pageId: string
-) {
-  const titleAtom = getAtom(docCollection, pageId);
-  assertExists(titleAtom);
-  const title = useAtomValue(titleAtom);
-  const { localizedJournalDate } = useJournalInfoHelper(pageId);
-  return localizedJournalDate || title;
-}
-
-// This hook is NOT reactive to the page title change
-export function useGetDocCollectionPageTitle(docCollection: DocCollection) {
-  const { getLocalizedJournalDateString } = useJournalInfoHelper();
-  return useCallback(
-    (pageId: string) => {
-      return (
-        getLocalizedJournalDateString(pageId) ||
-        docCollection.getDoc(pageId)?.meta?.title
-      );
-    },
-    [docCollection, getLocalizedJournalDateString]
-  );
-}