feat: add public page navigation bar

packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -1,11 +1,17 @@
 import { ReactElement, useEffect, useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import type { NextPageWithLayout } from '../..//_app';
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { Page as PageStore, Workspace } from '@blocksuite/store';
 import { PageLoading } from '@/components/loading';
+import { Breadcrumbs } from '@/ui/breadcrumbs';
+import { IconButton } from '@/ui/button';
+import NextLink from 'next/link';
+import { PaperIcon, SearchIcon } from '@blocksuite/icons';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { useModal } from '@/providers/GlobalModalProvider';
 
 const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
   ssr: false,
@@ -16,11 +22,15 @@ const Page: NextPageWithLayout = () => {
   const { dataCenter } = useAppState();
   const router = useRouter();
   const [loaded, setLoaded] = useState(false);
+  const [workspaceName, setWorkspaceName] = useState('');
+  const [pageTitle, setPageTitle] = useState('');
+  const { triggerQuickSearchModal } = useModal();
 
   useEffect(() => {
     dataCenter
       .loadPublicWorkspace(router.query.workspaceId as string)
       .then(data => {
+        setWorkspaceName(data.blocksuiteWorkspace?.meta.name as string);
         if (data && data.blocksuiteWorkspace) {
           setWorkspace(data.blocksuiteWorkspace);
           if (
@@ -32,6 +42,7 @@ const Page: NextPageWithLayout = () => {
             const page = data.blocksuiteWorkspace.getPage(
               router.query.pageId as string
             );
+            page && setPageTitle(page.meta.title);
             page && setPage(page);
           } else {
             router.push('/404');
@@ -46,6 +57,30 @@ const Page: NextPageWithLayout = () => {
     <>
       {!loaded && <PageLoading />}
       <PageContainer>
+        <NavContainer>
+          <Breadcrumbs>
+            <StyledBreadcrumbs
+              href={`/public-workspace/${router.query.workspaceId}`}
+            >
+              <WorkspaceUnitAvatar size={24} name={workspaceName} />
+              <span>{workspaceName}</span>
+            </StyledBreadcrumbs>
+            <StyledBreadcrumbs
+              href={`/public-workspace/${router.query.workspaceId}/${router.query.pageId}`}
+            >
+              <PaperIcon fontSize={24} />
+              <span>{pageTitle ? pageTitle : 'Untitled'}</span>
+            </StyledBreadcrumbs>
+          </Breadcrumbs>
+          <SearchButton
+            onClick={() => {
+              triggerQuickSearchModal();
+            }}
+          >
+            <SearchIcon />
+          </SearchButton>
+        </NavContainer>
+
         {workspace && page && (
           <DynamicBlocksuite
             page={page}
@@ -69,9 +104,43 @@ export default Page;
 
 export const PageContainer = styled.div(({ theme }) => {
   return {
-    height: 'calc(100vh)',
+    height: '100vh',
-    padding: '78px 72px',
     overflowY: 'auto',
     backgroundColor: theme.colors.pageBackground,
   };
 });
+export const NavContainer = styled.div(({ theme }) => {
+  return {
+    width: '100vw',
+    padding: '0 12px',
+    height: '60px',
+    ...displayFlex('start', 'center'),
+    backgroundColor: theme.colors.pageBackground,
+  };
+});
+export const StyledBreadcrumbs = styled(NextLink)(({ theme }) => {
+  return {
+    flex: 1,
+    ...displayFlex('center', 'center'),
+    paddingLeft: '12px',
+    span: {
+      padding: '0 12px',
+      fontSize: theme.font.base,
+      lineHeight: theme.font.lineHeightBase,
+    },
+    ':hover': { color: theme.colors.primaryColor },
+    transition: 'all .15s',
+    ':visited': {
+      color: theme.colors.popoverColor,
+      ':hover': { color: theme.colors.primaryColor },
+    },
+  };
+});
+export const SearchButton = styled(IconButton)(({ theme }) => {
+  return {
+    color: theme.colors.iconColor,
+    fontSize: '24px',
+    marginLeft: 'auto',
+    padding: '0 24px',
+  };
+});

packages/app/src/pages/public-workspace/[workspaceId]/index.tsx

@@ -2,16 +2,28 @@ import { PageList } from '@/components/page-list';
 import { ReactElement, useEffect, useState } from 'react';
 import { PageMeta, useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-import { PageContainer } from './[pageId]';
+import {
+  PageContainer,
+  NavContainer,
+  StyledBreadcrumbs,
+  SearchButton,
+} from './[pageId]';
+import { Breadcrumbs } from '@/ui/breadcrumbs';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { SearchIcon } from '@blocksuite/icons';
+import { useModal } from '@/providers/GlobalModalProvider';
 const All = () => {
   const { dataCenter } = useAppState();
   const router = useRouter();
   const [pageList, setPageList] = useState<PageMeta[]>([]);
+  const [workspaceName, setWorkspaceName] = useState('');
+  const { triggerQuickSearchModal } = useModal();
   useEffect(() => {
     dataCenter
       .loadPublicWorkspace(router.query.workspaceId as string)
       .then(data => {
         setPageList(data.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]);
+        setWorkspaceName(data.blocksuiteWorkspace?.meta.name as string);
       })
       .catch(() => {
         router.push('/404');
@@ -20,6 +32,23 @@ const All = () => {
 
   return (
     <PageContainer>
+      <NavContainer>
+        <Breadcrumbs>
+          <StyledBreadcrumbs
+            href={`/public-workspace/${router.query.workspaceId}`}
+          >
+            <WorkspaceUnitAvatar size={24} name={workspaceName} />
+            <span>{workspaceName}</span>
+          </StyledBreadcrumbs>
+        </Breadcrumbs>
+        <SearchButton
+          onClick={() => {
+            triggerQuickSearchModal();
+          }}
+        >
+          <SearchIcon />
+        </SearchButton>
+      </NavContainer>
       <PageList
         pageList={pageList.filter(p => !p.trash)}
         showFavoriteTag={false}