feat: connect pinboard and reference link (#1859)

apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -1,13 +1,18 @@
 import { WorkspaceFlavour } from '@affine/workspace/type';
+import { assertExists } from '@blocksuite/store';
 import { useRouter } from 'next/router';
 import type React from 'react';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { Unreachable } from '../../../components/affine/affine-error-eoundary';
 import { PageLoading } from '../../../components/pure/loading';
+import { useReferenceLink } from '../../../hooks/affine/use-reference-link';
 import { useCurrentPageId } from '../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
+import { usePageMeta } from '../../../hooks/use-page-meta';
+import { usePinboardHandler } from '../../../hooks/use-pinboard-handler';
 import { useSyncRecentViewsWithRouter } from '../../../hooks/use-recent-views';
+import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { useSyncRouterWithCurrentWorkspaceAndPage } from '../../../hooks/use-sync-router-with-current-workspace-and-page';
 import { WorkspaceLayout } from '../../../layouts';
 import { WorkspacePlugins } from '../../../plugins';
@@ -21,12 +26,37 @@ function enableFullFlags(blockSuiteWorkspace: BlockSuiteWorkspace) {
   blockSuiteWorkspace.awarenessStore.setFlag('enable_block_hub', true);
   blockSuiteWorkspace.awarenessStore.setFlag('enable_drag_handle', true);
   blockSuiteWorkspace.awarenessStore.setFlag('enable_surface', true);
+  blockSuiteWorkspace.awarenessStore.setFlag('enable_linked_page', true);
 }
 
 const WorkspaceDetail: React.FC = () => {
+  const router = useRouter();
+  const { openPage } = useRouterHelper(router);
   const [pageId] = useCurrentPageId();
   const [currentWorkspace] = useCurrentWorkspace();
-  useSyncRecentViewsWithRouter(useRouter());
+
+  const { deletePin } = usePinboardHandler({
+    blockSuiteWorkspace: currentWorkspace?.blockSuiteWorkspace ?? null,
+    metas: usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null ?? null),
+  });
+
+  useSyncRecentViewsWithRouter(router);
+
+  useReferenceLink({
+    pageLinkClicked: useCallback(
+      ({ pageId }: { pageId: string }) => {
+        assertExists(currentWorkspace);
+        return openPage(currentWorkspace.id, pageId);
+      },
+      [currentWorkspace, openPage]
+    ),
+    subpageUnlinked: useCallback(
+      ({ pageId }: { pageId: string }) => {
+        deletePin(pageId);
+      },
+      [deletePin]
+    ),
+  });
   useEffect(() => {
     if (currentWorkspace) {
       enableFullFlags(currentWorkspace.blockSuiteWorkspace);