fix: page crash in public workspace (#1324)

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

@@ -1,19 +1,25 @@
-import { ListSkeleton } from '@affine/component';
+import { Breadcrumbs, IconButton, ListSkeleton } from '@affine/component';
+import { SearchIcon } from '@blocksuite/icons';
+import { Box } from '@mui/material';
 import { useAtomValue, useSetAtom } from 'jotai';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import React, { Suspense, useCallback, useEffect } from 'react';
 
-import { currentWorkspaceIdAtom } from '../../atoms';
+import { currentWorkspaceIdAtom, openQuickSearchModalAtom } from '../../atoms';
 import {
   publicBlockSuiteAtom,
   publicWorkspaceIdAtom,
 } from '../../atoms/public-workspace';
 import { QueryParamError } from '../../components/affine/affine-error-eoundary';
 import { StyledTableContainer } from '../../components/blocksuite/block-suite-page-list/page-list/styles';
+import { WorkspaceAvatar } from '../../components/pure/footer';
 import { PageLoading } from '../../components/pure/loading';
+import { useBlockSuiteWorkspaceAvatarUrl } from '../../hooks/use-blocksuite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '../../hooks/use-blocksuite-workspace-name';
 import { WorkspaceLayout } from '../../layouts';
 import { NextPageWithLayout } from '../../shared';
+import { NavContainer, StyledBreadcrumbs } from './[workspaceId]/[pageId]';
 
 const BlockSuitePublicPageList = dynamic(
   async () =>
@@ -38,14 +44,43 @@ const ListPageInner: React.FC<{
     },
     [router, workspaceId]
   );
+  useEffect(() => {
+    blockSuiteWorkspace.awarenessStore.setFlag('enable_block_hub', false);
+  }, [blockSuiteWorkspace]);
+  const [name] = useBlockSuiteWorkspaceName(blockSuiteWorkspace);
+  const [avatar] = useBlockSuiteWorkspaceAvatarUrl(blockSuiteWorkspace);
+  const setSearchModalOpen = useSetAtom(openQuickSearchModalAtom);
+  const handleOpen = useCallback(() => {
+    setSearchModalOpen(true);
+  }, [setSearchModalOpen]);
   if (!blockSuiteWorkspace) {
     return <PageLoading />;
   }
   return (
-    <BlockSuitePublicPageList
-      onOpenPage={handleClickPage}
-      blockSuiteWorkspace={blockSuiteWorkspace}
-    />
+    <>
+      <NavContainer>
+        <Breadcrumbs>
+          <StyledBreadcrumbs
+            href={`/public-workspace/${blockSuiteWorkspace.room}`}
+          >
+            <WorkspaceAvatar size={24} name={name} avatar={avatar} />
+            <span>{name}</span>
+          </StyledBreadcrumbs>
+        </Breadcrumbs>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        />
+        <IconButton onClick={handleOpen}>
+          <SearchIcon />
+        </IconButton>
+      </NavContainer>
+      <BlockSuitePublicPageList
+        onOpenPage={handleClickPage}
+        blockSuiteWorkspace={blockSuiteWorkspace}
+      />
+    </>
   );
 };
 

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

@@ -19,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 { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '../../../hooks/use-blocksuite-workspace-name';
 import { WorkspaceLayout } from '../../../layouts';
 import { NextPageWithLayout } from '../../../shared';
 
@@ -67,12 +69,17 @@ const PublicWorkspaceDetailPageInner: React.FC<{
   if (!blockSuiteWorkspace) {
     throw new Error('cannot find workspace');
   }
+  useEffect(() => {
+    blockSuiteWorkspace.awarenessStore.setFlag('enable_block_hub', false);
+  }, [blockSuiteWorkspace]);
   const { t } = useTranslation();
-  const name = blockSuiteWorkspace.meta.name;
+  const [name] = useBlockSuiteWorkspaceName(blockSuiteWorkspace);
+  const [avatar] = useBlockSuiteWorkspaceAvatarUrl(blockSuiteWorkspace);
   const pageTitle = blockSuiteWorkspace.meta.getPageMeta(pageId)?.title;
   return (
     <>
       <PageDetailEditor
+        isPublic={true}
         pageId={pageId}
         blockSuiteWorkspace={blockSuiteWorkspace}
         onLoad={(_, editor) => {
@@ -90,11 +97,7 @@ const PublicWorkspaceDetailPageInner: React.FC<{
               <StyledBreadcrumbs
                 href={`/public-workspace/${blockSuiteWorkspace.room}`}
               >
-                <WorkspaceAvatar
-                  size={24}
-                  name={name}
-                  avatar={blockSuiteWorkspace.meta.avatar}
-                />
+                <WorkspaceAvatar size={24} name={name} avatar={avatar} />
                 <span>{name}</span>
               </StyledBreadcrumbs>
               <StyledBreadcrumbs