feat: center peek view (#7073)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/7380c06e-880e-424a-9204-8cfb5e924978.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/7380c06e-880e-424a-9204-8cfb5e924978.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/7380c06e-880e-424a-9204-8cfb5e924978.mp4">Kapture 2024-05-30 at 19.42.46.mp4</video>

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -84,7 +84,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
 
   const doc = useService(DocService).doc;
   const docRecordList = useService(DocsService).list;
-  const { openPage, jumpToTag } = useNavigateHelper();
+  const { openPage, jumpToPageBlock, jumpToTag } = useNavigateHelper();
   const [editor, setEditor] = useState<AffineEditorContainer | null>(null);
   const workspace = useService(WorkspaceService).workspace;
   const globalContext = useService(GlobalContextService).globalContext;
@@ -199,10 +199,11 @@ const DetailPageImpl = memo(function DetailPageImpl() {
       };
 
       doc.setMode(mode);
-      // fixme: it seems pageLinkClicked is not triggered sometimes?
       disposable.add(
-        pageService.slots.docLinkClicked.on(({ docId }) => {
-          return openPage(docCollection.id, docId);
+        pageService.slots.docLinkClicked.on(({ docId, blockId }) => {
+          return blockId
+            ? jumpToPageBlock(docCollection.id, docId, blockId)
+            : openPage(docCollection.id, docId);
         })
       );
       disposable.add(
@@ -226,8 +227,9 @@ const DetailPageImpl = memo(function DetailPageImpl() {
       doc,
       mode,
       docRecordList,
-      openPage,
+      jumpToPageBlock,
       docCollection.id,
+      openPage,
       jumpToTag,
       workspace.id,
     ]