fix: page crash in public workspace (#1324)

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from '@affine/i18n';
 import React, { useState } from 'react';
 
 import { useIsWorkspaceOwner } from '../../../../../hooks/affine/use-is-workspace-owner';
-import { useBlockSuiteWorkspaceBlobUrl } from '../../../../../hooks/use-blocksuite-workspace-blob-url';
+import { useBlockSuiteWorkspaceAvatarUrl } from '../../../../../hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '../../../../../hooks/use-blocksuite-workspace-name';
 import { RemWorkspaceFlavour } from '../../../../../shared';
 import { Upload } from '../../../../pure/file-upload';
@@ -43,7 +43,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
     setName(name);
   };
 
-  const [, update] = useBlockSuiteWorkspaceBlobUrl(
+  const [, update] = useBlockSuiteWorkspaceAvatarUrl(
     workspace.blockSuiteWorkspace
   );
   return (

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -30,7 +30,6 @@ export const BlockSuitePublicPageList: React.FC<BlockSuitePageListProps> = ({
       isPublic={true}
       blockSuiteWorkspace={blockSuiteWorkspace}
       onClickPage={onOpenPage}
-      listType="all"
     />
   );
 };

apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx

@@ -149,7 +149,7 @@ export const PageList: React.FC<PageListProps> = ({
                         {pageMeta.title || t('Untitled')}
                       </Content>
                     </StyledTitleLink>
-                    {!isTrash && (
+                    {listType && !isTrash && (
                       <FavoriteTag
                         onClick={() => {
                           helper.setPageMeta(pageMeta.id, {

apps/web/src/components/blocksuite/header/index.tsx

@@ -20,12 +20,14 @@ import {
 export type BlockSuiteEditorHeaderProps = React.PropsWithChildren<{
   blockSuiteWorkspace: BlockSuiteWorkspace;
   pageId: string;
+  isPublic?: boolean;
 }>;
 
 export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
   blockSuiteWorkspace,
   pageId,
   children,
+  isPublic,
 }) => {
   const page = blockSuiteWorkspace.getPage(pageId);
   // fixme(himself65): remove this atom and move it to props
@@ -43,7 +45,10 @@ export const BlockSuiteEditorHeader: React.FC<BlockSuiteEditorHeaderProps> = ({
   return (
     <Header
       rightItems={
-        isTrash
+        // fixme(himself65): other right items not supported in public mode
+        isPublic
+          ? ['themeModeSwitch']
+          : isTrash
           ? ['trashButtonGroup']
           : ['syncUser', 'themeModeSwitch', 'editorOptionMenu']
       }

apps/web/src/components/page-detail-editor.tsx

@@ -11,6 +11,7 @@ import { PageNotFoundError } from './affine/affine-error-eoundary';
 import { BlockSuiteEditorHeader } from './blocksuite/header';
 
 export type PageDetailEditorProps = {
+  isPublic?: boolean;
   blockSuiteWorkspace: BlockSuiteWorkspace;
   pageId: string;
   onInit?: (page: Page, editor: Readonly<EditorContainer>) => void;
@@ -32,6 +33,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
   onInit,
   onLoad,
   header,
+  isPublic,
 }) => {
   const page = blockSuiteWorkspace.getPage(pageId);
   if (!page) {
@@ -48,6 +50,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
         <title>{title}</title>
       </Helmet>
       <BlockSuiteEditorHeader
+        isPublic={isPublic}
         blockSuiteWorkspace={blockSuiteWorkspace}
         pageId={pageId}
       >

apps/web/src/components/pure/workspace-avatar/index.tsx

@@ -1,7 +1,7 @@
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
 import React from 'react';
 
-import { useBlockSuiteWorkspaceBlobUrl } from '../../../hooks/use-blocksuite-workspace-blob-url';
+import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
 import { BlockSuiteWorkspace, RemWorkspace } from '../../../shared';
 import { stringToColour } from '../../../utils';
 
@@ -87,7 +87,7 @@ export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
   style,
   ...props
 }) => {
-  const [avatar] = useBlockSuiteWorkspaceBlobUrl(workspace);
+  const [avatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
 
   return (
     <Avatar

apps/web/src/hooks/use-blocksuite-workspace-avatar-url.ts

@@ -5,7 +5,7 @@ import useSWR from 'swr';
 import { QueryKey } from '../plugins/affine/fetcher';
 import { BlockSuiteWorkspace } from '../shared';
 
-export function useBlockSuiteWorkspaceBlobUrl(
+export function useBlockSuiteWorkspaceAvatarUrl(
   // todo: remove `null` from type
   blockSuiteWorkspace: BlockSuiteWorkspace | null
 ) {

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}
+      <NavContainer>
-      blockSuiteWorkspace={blockSuiteWorkspace}
+        <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
+                <WorkspaceAvatar size={24} name={name} avatar={avatar} />
-                  size={24}
-                  name={name}
-                  avatar={blockSuiteWorkspace.meta.avatar}
-                />
                 <span>{name}</span>
               </StyledBreadcrumbs>
               <StyledBreadcrumbs