feat(core): replace page filter, journal's date-picker with new one (#5675)

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

@@ -1,5 +1,6 @@
 import { cssVar } from '@toeverything/theme';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
+
 const interactive = style({
   position: 'relative',
   cursor: 'pointer',
@@ -41,6 +42,7 @@ export const journalPanel = style({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'stretch',
+  overflow: 'hidden',
 });
 export const dailyCount = style({
   height: 0,
@@ -179,14 +181,47 @@ export const journalConflictMoreTrigger = style([
   },
 ]);
 
-// TODO: when date-picker's cell is customizable, we should implement by custom cell
-// override date-picker's active day when is not journal
-globalStyle(
-  `.${journalPanel}[data-is-journal="false"] .react-datepicker__day[aria-selected="true"]`,
+// customize date-picker cell
+export const journalDateCell = style([
+  interactive,
   {
-    backgroundColor: 'transparent',
+    width: '100%',
+    height: '100%',
+    borderRadius: 8,
+    fontSize: cssVar('fontSm'),
     color: cssVar('textPrimaryColor'),
-    fontWeight: 500,
-    border: `1px solid ${cssVar('primaryColor')}`,
-  }
-);
+    fontWeight: 400,
+    position: 'relative',
+
+    selectors: {
+      '&[data-is-today="true"]': {
+        fontWeight: 600,
+        color: cssVar('brandColor'),
+      },
+      '&[data-not-current-month="true"]': {
+        color: cssVar('black10'),
+      },
+      '&[data-selected="true"]': {
+        backgroundColor: cssVar('brandColor'),
+        fontWeight: 500,
+        color: cssVar('pureWhite'),
+      },
+      '&[data-is-journal="false"][data-selected="true"]': {
+        backgroundColor: 'transparent',
+        color: 'var(--affine-text-primary-color)',
+        fontWeight: 500,
+        border: `1px solid ${cssVar('primaryColor')}`,
+      },
+    },
+  },
+]);
+export const journalDateCellDot = style({
+  width: 4,
+  height: 4,
+  borderRadius: '50%',
+  backgroundColor: cssVar('primaryColor'),
+  position: 'absolute',
+  bottom: 0,
+  left: '50%',
+  transform: 'translateX(-50%)',
+});

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

@@ -1,5 +1,6 @@
 import {
-  AFFiNEDatePicker,
+  type DateCell,
+  DatePicker,
   IconButton,
   Menu,
   Scrollable,
@@ -80,6 +81,7 @@ interface JournalBlockProps extends EditorExtensionProps {
 
 const EditorJournalPanel = (props: EditorExtensionProps) => {
   const { workspace, page } = props;
+  const t = useAFFiNEI18N();
   const { journalDate, isJournal } = useJournalInfoHelper(
     page.workspace,
     page.id
@@ -99,14 +101,45 @@ const EditorJournalPanel = (props: EditorExtensionProps) => {
     [journalDate, openJournal]
   );
 
+  const customDayRenderer = useCallback(
+    (cell: DateCell) => {
+      // TODO: add a dot to indicate journal
+      // has performance issue for now, better to calculate it in advance
+      // const hasJournal = !!getJournalsByDate(cell.date.format('YYYY-MM-DD'))?.length;
+      const hasJournal = false;
+      return (
+        <button
+          className={styles.journalDateCell}
+          data-is-date-cell
+          tabIndex={cell.focused ? 0 : -1}
+          data-is-today={cell.isToday}
+          data-not-current-month={cell.notCurrentMonth}
+          data-selected={cell.selected}
+          data-is-journal={isJournal}
+          data-has-journal={hasJournal}
+        >
+          {cell.label}
+          {hasJournal && !cell.selected ? (
+            <div className={styles.journalDateCellDot} />
+          ) : null}
+        </button>
+      );
+    },
+    [isJournal]
+  );
+
   return (
     <div className={styles.journalPanel} data-is-journal={isJournal}>
-      <AFFiNEDatePicker
-        inline
-        value={date}
-        onSelect={onDateSelect}
-        calendarClassName={styles.calendar}
-      />
+      <div className={styles.calendar}>
+        <DatePicker
+          weekDays={t['com.affine.calendar-date-picker.week-days']()}
+          monthNames={t['com.affine.calendar-date-picker.month-names']()}
+          todayLabel={t['com.affine.calendar-date-picker.today']()}
+          customDayRenderer={customDayRenderer}
+          value={date}
+          onChange={onDateSelect}
+        />
+      </div>
       <JournalConflictBlock date={dayjs(date)} {...props} />
       <JournalDailyCountBlock date={dayjs(date)} {...props} />
     </div>