feat: connect pinboard and reference link (#1859)

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

@@ -1,13 +1,14 @@
 import { Breadcrumbs, displayFlex, styled } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { PageIcon } from '@blocksuite/icons';
+import { assertExists } from '@blocksuite/store';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import { useAtomValue, useSetAtom } from 'jotai';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type React from 'react';
-import { Suspense, useEffect } from 'react';
+import { Suspense, useCallback, useEffect } from 'react';
 
 import {
   publicPageBlockSuiteAtom,
@@ -18,6 +19,8 @@ import { QueryParamError } from '../../../components/affine/affine-error-eoundar
 import { PageDetailEditor } from '../../../components/page-detail-editor';
 import { WorkspaceAvatar } from '../../../components/pure/footer';
 import { PageLoading } from '../../../components/pure/loading';
+import { useReferenceLink } from '../../../hooks/affine/use-reference-link';
+import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { PublicWorkspaceLayout } from '../../../layouts/public-workspace-layout';
 import type { NextPageWithLayout } from '../../../shared';
 import { initPage } from '../../../utils';
@@ -56,9 +59,21 @@ const PublicWorkspaceDetailPageInner: React.FC<{
   if (!blockSuiteWorkspace) {
     throw new Error('cannot find workspace');
   }
+  const router = useRouter();
+  const { openPage } = useRouterHelper(router);
+
   useEffect(() => {
     blockSuiteWorkspace.awarenessStore.setFlag('enable_block_hub', false);
   }, [blockSuiteWorkspace]);
+  useReferenceLink({
+    pageLinkClicked: useCallback(
+      ({ pageId }: { pageId: string }) => {
+        assertExists(currentWorkspace);
+        return openPage(blockSuiteWorkspace.id, pageId);
+      },
+      [blockSuiteWorkspace.id, openPage]
+    ),
+  });
   const { t } = useTranslation();
   const [name] = useBlockSuiteWorkspaceName(blockSuiteWorkspace);
   const [avatar] = useBlockSuiteWorkspaceAvatarUrl(blockSuiteWorkspace);

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);