feat(core): journal hooks and page header layout (#5549)

feat(core): split page header items

feat(core): journal page judgment and header layout

feat(core): Add journal today button and style changes to share menu

packages/frontend/core/src/pages/share/share-header.tsx

@@ -1,7 +1,8 @@
+import { EditorModeSwitch } from '@affine/core/components/blocksuite/block-suite-mode-switch';
 import type { Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
 
 import type { PageMode } from '../../atoms';
-import { BlockSuiteHeaderTitle } from '../../components/blocksuite/block-suite-header-title';
+import { BlocksuiteHeaderTitle } from '../../components/blocksuite/block-suite-header/title/index';
 import ShareHeaderLeftItem from '../../components/cloud/share-header-left-item';
 import ShareHeaderRightItem from '../../components/cloud/share-header-right-item';
 import { Header } from '../../components/pure/header';
@@ -20,12 +21,19 @@ export function ShareHeader({
       isFloat={publishMode === 'edgeless'}
       left={<ShareHeaderLeftItem />}
       center={
-        <BlockSuiteHeaderTitle
-          blockSuiteWorkspace={blockSuiteWorkspace}
-          pageId={pageId}
-          isPublic={true}
-          publicMode={publishMode}
-        />
+        <>
+          <EditorModeSwitch
+            isPublic
+            blockSuiteWorkspace={blockSuiteWorkspace}
+            pageId={pageId}
+            publicMode={publishMode}
+          />
+          <BlocksuiteHeaderTitle
+            blockSuiteWorkspace={blockSuiteWorkspace}
+            pageId={pageId}
+            isPublic={true}
+          />
+        </>
       }
       right={
         <ShareHeaderRightItem

packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.css.ts

@@ -28,6 +28,7 @@ export const mainHeader = style([
   header,
   {
     padding: '0 16px',
+    gap: 12,
   },
 ]);
 
@@ -58,3 +59,11 @@ export const standaloneExtensionSwitcherWrapper = style({
   height: '52px',
   position: 'relative',
 });
+
+export const journalWeekPicker = style({
+  minWidth: 100,
+  flexGrow: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.tsx

@@ -1,16 +1,24 @@
+import type { InlineEditHandle } from '@affine/component';
 import { IconButton } from '@affine/component';
 import {
   appSidebarFloatingAtom,
   appSidebarOpenAtom,
   SidebarSwitch,
 } from '@affine/component/app-sidebar';
+import { FavoriteButton } from '@affine/core/components/blocksuite/block-suite-header/favorite';
+import { JournalWeekDatePicker } from '@affine/core/components/blocksuite/block-suite-header/journal/date-picker';
+import { JournalTodayButton } from '@affine/core/components/blocksuite/block-suite-header/journal/today-button';
+import { PageHeaderMenuButton } from '@affine/core/components/blocksuite/block-suite-header/menu';
+import { EditorModeSwitch } from '@affine/core/components/blocksuite/block-suite-mode-switch';
+import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
 import type { Workspace } from '@affine/workspace';
 import { RightSidebarIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 import { useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useRef } from 'react';
 
 import { SharePageButton } from '../../../components/affine/share-page-modal';
-import { BlockSuiteHeaderTitle } from '../../../components/blocksuite/block-suite-header-title';
+import { BlocksuiteHeaderTitle } from '../../../components/blocksuite/block-suite-header/title/index';
 import { HeaderDivider } from '../../../components/pure/header';
 import { WindowsAppControls } from '../../../components/pure/header/windows-app-controls';
 import * as styles from './detail-page-header.css';
@@ -46,12 +54,7 @@ const WindowsMainPageHeaderRight = ({
   return (
     <>
       <HeaderDivider />
-      <div
-        className={styles.mainHeaderRight}
-        style={{
-          marginRight: editorSidebarOpen ? 0 : -16,
-        }}
-      >
+      <div className={styles.mainHeaderRight} style={{ marginRight: -16 }}>
         {showSidebarSwitch ? <ToggleSidebarButton /> : null}
         <WindowsAppControls />
       </div>
@@ -100,27 +103,71 @@ function Header({
   );
 }
 
-export function DetailPageHeader({
-  page,
-  workspace,
-  showSidebarSwitch = true,
-}: {
+interface PageHeaderProps {
   page: Page;
   workspace: Workspace;
   showSidebarSwitch?: boolean;
-}) {
+}
+const RightHeader = isWindowsDesktop
+  ? WindowsMainPageHeaderRight
+  : NonWindowsMainPageHeaderRight;
+export function JournalPageHeader({
+  page,
+  workspace,
+  showSidebarSwitch = true,
+}: PageHeaderProps) {
   const leftSidebarOpen = useAtomValue(appSidebarOpenAtom);
-  const RightHeader = isWindowsDesktop
-    ? WindowsMainPageHeaderRight
-    : NonWindowsMainPageHeaderRight;
   return (
     <Header className={styles.mainHeader}>
       <SidebarSwitch show={!leftSidebarOpen} />
       {!leftSidebarOpen ? <HeaderDivider /> : null}
-      <BlockSuiteHeaderTitle
-        pageId={page.id}
+      <EditorModeSwitch
+        blockSuiteWorkspace={workspace.blockSuiteWorkspace}
+        pageId={page?.id}
+      />
+      <div className={styles.journalWeekPicker}>
+        <JournalWeekDatePicker
+          workspace={workspace.blockSuiteWorkspace}
+          page={page}
+        />
+      </div>
+      <JournalTodayButton workspace={workspace.blockSuiteWorkspace} />
+      <HeaderDivider />
+      <PageHeaderMenuButton isJournal pageId={page?.id} />
+      {page ? (
+        <SharePageButton isJournal workspace={workspace} page={page} />
+      ) : null}
+      <RightHeader showSidebarSwitch={showSidebarSwitch} />
+    </Header>
+  );
+}
+
+export function NormalPageHeader({
+  page,
+  workspace,
+  showSidebarSwitch = true,
+}: PageHeaderProps) {
+  const titleInputHandleRef = useRef<InlineEditHandle>(null);
+  const leftSidebarOpen = useAtomValue(appSidebarOpenAtom);
+
+  const onRename = useCallback(() => {
+    setTimeout(() => titleInputHandleRef.current?.triggerEdit());
+  }, []);
+  return (
+    <Header className={styles.mainHeader}>
+      <SidebarSwitch show={!leftSidebarOpen} />
+      {!leftSidebarOpen ? <HeaderDivider /> : null}
+      <EditorModeSwitch
+        blockSuiteWorkspace={workspace.blockSuiteWorkspace}
+        pageId={page?.id}
+      />
+      <BlocksuiteHeaderTitle
+        inputHandleRef={titleInputHandleRef}
+        pageId={page?.id}
         blockSuiteWorkspace={workspace.blockSuiteWorkspace}
       />
+      <PageHeaderMenuButton rename={onRename} pageId={page?.id} />
+      <FavoriteButton pageId={page?.id} />
       <div className={styles.spacer} />
       {page ? <SharePageButton workspace={workspace} page={page} /> : null}
       <RightHeader showSidebarSwitch={showSidebarSwitch} />
@@ -128,6 +175,18 @@ export function DetailPageHeader({
   );
 }
 
+export function DetailPageHeader(props: PageHeaderProps) {
+  const { page } = props;
+  const { isJournal } = useJournalInfoHelper(page.meta);
+  const isInTrash = page.meta.trash;
+
+  return isJournal && !isInTrash ? (
+    <JournalPageHeader {...props} />
+  ) : (
+    <NormalPageHeader {...props} />
+  );
+}
+
 function WindowsSidebarHeader() {
   return (
     <>