feat(core): journal sidebar dater-picker navigation (#5558)

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

@@ -194,7 +194,7 @@ const DetailPageImpl = memo(function DetailPageImpl({ page }: { page: Page }) {
           !isInTrash ? (
             <div className={styles.sidebarContainerInner}>
               <RightSidebarHeader workspace={blockSuiteWorkspace} page={page} />
-              <EditorSidebar />
+              <EditorSidebar workspace={blockSuiteWorkspace} page={page} />
             </div>
           ) : null
         }

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

@@ -1,11 +1,16 @@
 import { useAtomValue } from 'jotai';
 
+import type { EditorExtensionProps } from '.';
 import { editorSidebarActiveExtensionAtom } from './atoms';
 import * as styles from './editor-sidebar.css';
 
-export const EditorSidebar = () => {
+export const EditorSidebar = (props: EditorExtensionProps) => {
   const activeExtension = useAtomValue(editorSidebarActiveExtensionAtom);
   const Component = activeExtension?.Component;
 
-  return <div className={styles.root}>{Component ? <Component /> : null}</div>;
+  return (
+    <div className={styles.root}>
+      {Component ? <Component {...props} /> : null}
+    </div>
+  );
 };

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const calendar = style({
+  padding: '16px',
+});

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.tsx

@@ -1,9 +1,40 @@
+import { AFFiNEDatePicker } from '@affine/component';
+import {
+  useJournalHelper,
+  useJournalInfoHelper,
+} from '@affine/core/hooks/use-journal';
 import { TodayIcon } from '@blocksuite/icons';
+import dayjs from 'dayjs';
+import { useCallback, useEffect, useState } from 'react';
 
-import type { EditorExtension } from '..';
+import type { EditorExtension, EditorExtensionProps } from '..';
+import * as styles from './journal.css';
 
-const EditorJournalPanel = () => {
-  return <div>journal extension</div>;
+const EditorJournalPanel = ({ workspace, page }: EditorExtensionProps) => {
+  const { journalDate } = useJournalInfoHelper(page?.meta);
+  const { openJournal } = useJournalHelper(workspace);
+  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
+
+  useEffect(() => {
+    journalDate && setDate(journalDate.format('YYYY-MM-DD'));
+  }, [journalDate]);
+
+  const onDateSelect = useCallback(
+    (date: string) => {
+      if (journalDate && dayjs(date).isSame(dayjs(journalDate))) return;
+      openJournal(date);
+    },
+    [journalDate, openJournal]
+  );
+
+  return (
+    <AFFiNEDatePicker
+      inline
+      value={date}
+      onSelect={onDateSelect}
+      calendarClassName={styles.calendar}
+    />
+  );
 };
 
 export const journalExtension: EditorExtension = {

packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/types.ts

@@ -1,7 +1,15 @@
+import type { BlockSuiteWorkspace } from '@affine/core/shared';
+import type { Page } from '@blocksuite/store';
+
 export type EditorExtensionName = 'outline' | 'frame' | 'copilot' | 'journal';
 
+export interface EditorExtensionProps {
+  workspace: BlockSuiteWorkspace;
+  page: Page;
+}
+
 export interface EditorExtension {
   name: EditorExtensionName;
   icon: React.ReactNode;
-  Component: React.ComponentType;
+  Component: React.ComponentType<EditorExtensionProps>;
 }