refactor: abstract header adapter (#2580)

2026-02-15 05:37:32 +00:00 · 2023-05-29 22:52:04 +08:00
parent 2dff731965
commit 540a93274a
24 changed files with 283 additions and 183 deletions
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -1,4 +1,5 @@
 import { DebugLogger } from '@affine/debug';
+import { WorkspaceSubPath } from '@affine/workspace/type';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { Suspense, useEffect } from 'react';
@@ -6,7 +7,6 @@ import { Suspense, useEffect } from 'react';
 import { PageLoading } from '../components/pure/loading';
 import { RouteLogic, useRouterHelper } from '../hooks/use-router-helper';
 import { useAppHelper, useWorkspaces } from '../hooks/use-workspaces';
-import { WorkspaceSubPath } from '../shared';

 const logger = new DebugLogger('index-page');

--- a/apps/web/src/pages/invite/[invite-code].tsx
+++ b/apps/web/src/pages/invite/[invite-code].tsx
@@ -1,6 +1,7 @@
 import { displayFlex, styled } from '@affine/component';
 import { Button } from '@affine/component';
 import type { Permission } from '@affine/workspace/affine/api';
+import { WorkspaceSubPath } from '@affine/workspace/type';
 import {
  SucessfulDuotoneIcon,
  UnsucessfulDuotoneIcon,
@@ -15,7 +16,6 @@ import { QueryKey } from '../../adapters/affine/fetcher';
 import { PageLoading } from '../../components/pure/loading';
 import { RouteLogic, useRouterHelper } from '../../hooks/use-router-helper';
 import type { NextPageWithLayout } from '../../shared';
-import { WorkspaceSubPath } from '../../shared';

 const InvitePage: NextPageWithLayout = () => {
  const router = useRouter();
--- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@@ -16,6 +16,7 @@ import {
  publicWorkspaceIdAtom,
  publicWorkspacePageIdAtom,
 } from '../../../atoms/public-workspace';
+import { BlockSuiteEditorHeader } from '../../../components/blocksuite/workspace-header';
 import { PageDetailEditor } from '../../../components/page-detail-editor';
 import { WorkspaceAvatar } from '../../../components/pure/footer';
 import { PageLoading } from '../../../components/pure/loading';
@@ -70,6 +71,28 @@ const PublicWorkspaceDetailPageInner = (): ReactElement => {
  return (
    <>
      <PublicQuickSearch workspace={publicWorkspace} />
+      <BlockSuiteEditorHeader
+        isPublic={true}
+        workspace={publicWorkspace}
+        currentPage={blockSuiteWorkspace.getPage(pageId)}
+      >
+        <NavContainer>
+          <Breadcrumbs>
+            <StyledBreadcrumbs
+              href={`/public-workspace/${blockSuiteWorkspace.id}`}
+            >
+              <WorkspaceAvatar size={24} name={name} avatar={avatar} />
+              <span>{name}</span>
+            </StyledBreadcrumbs>
+            <StyledBreadcrumbs
+              href={`/public-workspace/${blockSuiteWorkspace.id}/${pageId}`}
+            >
+              <PageIcon fontSize={24} />
+              <span>{pageTitle ? pageTitle : t['Untitled']()}</span>
+            </StyledBreadcrumbs>
+          </Breadcrumbs>
+        </NavContainer>
+      </BlockSuiteEditorHeader>
      <PageDetailEditor
        isPublic={true}
        pageId={pageId}
@@ -85,24 +108,6 @@ const PublicWorkspaceDetailPageInner = (): ReactElement => {
          };
        }}
        onInit={initPage}
-        header={
-          <NavContainer>
-            <Breadcrumbs>
-              <StyledBreadcrumbs
-                href={`/public-workspace/${blockSuiteWorkspace.id}`}
-              >
-                <WorkspaceAvatar size={24} name={name} avatar={avatar} />
-                <span>{name}</span>
-              </StyledBreadcrumbs>
-              <StyledBreadcrumbs
-                href={`/public-workspace/${blockSuiteWorkspace.id}/${pageId}`}
-              >
-                <PageIcon fontSize={24} />
-                <span>{pageTitle ? pageTitle : t['Untitled']()}</span>
-              </StyledBreadcrumbs>
-            </Breadcrumbs>
-          </NavContainer>
-        }
      />
    </>
  );
--- a/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
@@ -56,13 +56,21 @@ const WorkspaceDetail: React.FC = () => {
    }
  }, [currentWorkspace]);

-  const { PageDetail } = getUIAdapter(currentWorkspace.flavour);
+  const { PageDetail, Header } = getUIAdapter(currentWorkspace.flavour);
  return (
-    <PageDetail
-      currentWorkspace={currentWorkspace}
-      currentPageId={currentPageId}
-      onLoadEditor={onLoad}
-    />
+    <>
+      <Header
+        currentWorkspace={currentWorkspace}
+        currentEntry={{
+          pageId: currentPageId,
+        }}
+      />
+      <PageDetail
+        currentWorkspace={currentWorkspace}
+        currentPageId={currentPageId}
+        onLoadEditor={onLoad}
+      />
+    </>
  );
 };

--- a/apps/web/src/pages/workspace/[workspaceId]/all.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/all.tsx
@@ -1,14 +1,7 @@
-import { Button } from '@affine/component';
-import {
-  FilterList,
-  SaveViewButton,
-  useAllPageSetting,
-  ViewList,
-} from '@affine/component/page-list';
-import { config } from '@affine/env';
+import { useAllPageSetting } from '@affine/component/page-list';
 import { QueryParamError } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { FolderIcon } from '@blocksuite/icons';
+import { WorkspaceSubPath } from '@affine/workspace/type';
 import { assertExists } from '@blocksuite/store';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -16,7 +9,6 @@ import React, { useCallback } from 'react';

 import { getUIAdapter } from '../../../adapters/workspace';
 import { PageLoading } from '../../../components/pure/loading';
-import { WorkspaceTitle } from '../../../components/pure/workspace-title';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { WorkspaceLayout } from '../../../layouts/workspace-layout';
@@ -45,56 +37,19 @@ const AllPage: NextPageWithLayout = () => {
  if (typeof router.query.workspaceId !== 'string') {
    throw new QueryParamError('workspaceId', router.query.workspaceId);
  }
-  const leftSlot = config.enableAllPageFilter && (
-    <ViewList setting={setting}></ViewList>
-  );
-  const filterContainer = config.enableAllPageFilter &&
-    setting.currentView.filterList.length > 0 && (
-      <div style={{ padding: 12, display: 'flex' }}>
-        <div style={{ flex: 1 }}>
-          <FilterList
-            value={setting.currentView.filterList}
-            onChange={filterList =>
-              setting.changeView(
-                {
-                  ...setting.currentView,
-                  filterList,
-                },
-                setting.currentViewIndex
-              )
-            }
-          />
-        </div>
-        <div>
-          {setting.currentViewIndex == null ? (
-            <SaveViewButton
-              init={setting.currentView.filterList}
-              onConfirm={setting.createView}
-            ></SaveViewButton>
-          ) : (
-            <Button onClick={() => setting.selectView()}>Back to all</Button>
-          )}
-        </div>
-      </div>
-    );

-  const { PageList } = getUIAdapter(currentWorkspace.flavour);
+  const { PageList, Header } = getUIAdapter(currentWorkspace.flavour);
  return (
    <>
      <Head>
        <title>{t['All pages']()} - AFFiNE</title>
      </Head>
-      <WorkspaceTitle
-        workspace={currentWorkspace}
-        currentPage={null}
-        isPreview={false}
-        isPublic={false}
-        icon={<FolderIcon />}
-        leftSlot={leftSlot}
-      >
-        {t['All pages']()}
-      </WorkspaceTitle>
-      {filterContainer}
+      <Header
+        currentWorkspace={currentWorkspace}
+        currentEntry={{
+          subPath: WorkspaceSubPath.ALL,
+        }}
+      />
      <PageList
        view={setting.currentView}
        onOpenPage={onClickPage}
--- a/apps/web/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/setting.tsx
@@ -1,8 +1,11 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import type { SettingPanel } from '@affine/workspace/type';
-import { settingPanel, settingPanelValues } from '@affine/workspace/type';
-import { SettingsIcon } from '@blocksuite/icons';
+import {
+  settingPanel,
+  settingPanelValues,
+  WorkspaceSubPath,
+} from '@affine/workspace/type';
 import { assertExists } from '@blocksuite/store';
 import { useAtom, useAtomValue } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
@@ -13,7 +16,6 @@ import React, { useCallback, useEffect } from 'react';

 import { getUIAdapter } from '../../../adapters/workspace';
 import { PageLoading } from '../../../components/pure/loading';
-import { WorkspaceTitle } from '../../../components/pure/workspace-title';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useOnTransformWorkspace } from '../../../hooks/root/use-on-transform-workspace';
 import { useAppHelper } from '../../../hooks/use-workspaces';
@@ -115,21 +117,18 @@ const SettingPage: NextPageWithLayout = () => {
  } else if (settingPanelValues.indexOf(currentTab as SettingPanel) === -1) {
    return <PageLoading />;
  }
-  const { SettingsDetail } = getUIAdapter(currentWorkspace.flavour);
+  const { SettingsDetail, Header } = getUIAdapter(currentWorkspace.flavour);
  return (
    <>
      <Head>
        <title>{t['Settings']()} - AFFiNE</title>
      </Head>
-      <WorkspaceTitle
-        workspace={currentWorkspace}
-        currentPage={null}
-        isPreview={false}
-        isPublic={false}
-        icon={<SettingsIcon />}
-      >
-        {t['Workspace Settings']()}
-      </WorkspaceTitle>
+      <Header
+        currentWorkspace={currentWorkspace}
+        currentEntry={{
+          subPath: WorkspaceSubPath.SETTING,
+        }}
+      />
      <SettingsDetail
        onTransformWorkspace={onTransformWorkspace}
        onDeleteWorkspace={onDeleteWorkspace}
--- a/apps/web/src/pages/workspace/[workspaceId]/shared.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/shared.tsx
@@ -1,18 +1,17 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { ShareIcon } from '@blocksuite/icons';
+import { WorkspaceSubPath } from '@affine/workspace/type';
 import { assertExists } from '@blocksuite/store';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';

+import { getUIAdapter } from '../../../adapters/workspace';
 import { BlockSuitePageList } from '../../../components/blocksuite/block-suite-page-list';
 import { PageLoading } from '../../../components/pure/loading';
-import { WorkspaceTitle } from '../../../components/pure/workspace-title';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { WorkspaceLayout } from '../../../layouts/workspace-layout';
 import type { NextPageWithLayout } from '../../../shared';
-
 const SharedPages: NextPageWithLayout = () => {
  const router = useRouter();
  const { jumpToPage } = useRouterHelper(router);
@@ -34,20 +33,18 @@ const SharedPages: NextPageWithLayout = () => {
  }
  const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
  assertExists(blockSuiteWorkspace);
+  const { Header } = getUIAdapter(currentWorkspace.flavour);
  return (
    <>
      <Head>
        <title>{t['Shared Pages']()} - AFFiNE</title>
      </Head>
-      <WorkspaceTitle
-        workspace={currentWorkspace}
-        currentPage={null}
-        isPreview={false}
-        isPublic={false}
-        icon={<ShareIcon />}
-      >
-        {t['Shared Pages']()}
-      </WorkspaceTitle>
+      <Header
+        currentWorkspace={currentWorkspace}
+        currentEntry={{
+          subPath: WorkspaceSubPath.SHARED,
+        }}
+      />
      <BlockSuitePageList
        blockSuiteWorkspace={blockSuiteWorkspace}
        onOpenPage={onClickPage}
--- a/apps/web/src/pages/workspace/[workspaceId]/trash.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/trash.tsx
@@ -1,13 +1,13 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { DeleteTemporarilyIcon } from '@blocksuite/icons';
+import { WorkspaceSubPath } from '@affine/workspace/type';
 import { assertExists } from '@blocksuite/store';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';

+import { getUIAdapter } from '../../../adapters/workspace';
 import { BlockSuitePageList } from '../../../components/blocksuite/block-suite-page-list';
 import { PageLoading } from '../../../components/pure/loading';
-import { WorkspaceTitle } from '../../../components/pure/workspace-title';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { WorkspaceLayout } from '../../../layouts/workspace-layout';
@@ -37,20 +37,18 @@ const TrashPage: NextPageWithLayout = () => {
  // todo(himself65): refactor to plugin
  const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
  assertExists(blockSuiteWorkspace);
+  const { Header } = getUIAdapter(currentWorkspace.flavour);
  return (
    <>
      <Head>
        <title>{t['Trash']()} - AFFiNE</title>
      </Head>
-      <WorkspaceTitle
-        workspace={currentWorkspace}
-        currentPage={null}
-        isPreview={false}
-        isPublic={false}
-        icon={<DeleteTemporarilyIcon />}
-      >
-        {t['Trash']()}
-      </WorkspaceTitle>
+      <Header
+        currentWorkspace={currentWorkspace}
+        currentEntry={{
+          subPath: WorkspaceSubPath.TRASH,
+        }}
+      />
      <BlockSuitePageList
        blockSuiteWorkspace={blockSuiteWorkspace}
        onOpenPage={onClickPage}