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

packages/frontend/core/src/components/page-list/filter/date-select.css.ts

@@ -0,0 +1,17 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const datePickerTriggerInput = style({
+  fontSize: cssVar('fontXs'),
+  width: '50px',
+  fontWeight: '600',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '22px',
+  textAlign: 'center',
+  ':hover': {
+    background: cssVar('hoverColor'),
+    borderRadius: '4px',
+  },
+});

packages/frontend/core/src/components/page-list/filter/date-select.tsx

@@ -0,0 +1,51 @@
+import { DatePicker, Popover, type PopoverProps } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import dayjs from 'dayjs';
+import { useCallback, useState } from 'react';
+
+import { datePickerTriggerInput } from './date-select.css';
+
+const datePickerPopperContentOptions: PopoverProps['contentOptions'] = {
+  style: { padding: 20, marginTop: 10 },
+};
+
+export const DateSelect = ({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+}) => {
+  const t = useAFFiNEI18N();
+  const [open, setOpen] = useState(false);
+
+  const onDateChange = useCallback(
+    (e: string) => {
+      setOpen(false);
+      onChange(dayjs(e, 'YYYY-MM-DD').valueOf());
+    },
+    [onChange]
+  );
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      contentOptions={datePickerPopperContentOptions}
+      content={
+        <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']()}
+          value={dayjs(value as number).format('YYYY-MM-DD')}
+          onChange={onDateChange}
+        />
+      }
+    >
+      <input
+        value={dayjs(value as number).format('MMM DD')}
+        className={datePickerTriggerInput}
+      />
+    </Popover>
+  );
+};

packages/frontend/core/src/components/page-list/filter/literal-matcher.tsx

@@ -1,8 +1,8 @@
-import { AFFiNEDatePicker, Input, Menu, MenuItem } from '@affine/component';
+import { Input, Menu, MenuItem } from '@affine/component';
 import type { LiteralValue, Tag } from '@affine/env/filter';
-import dayjs from 'dayjs';
 import { type ReactNode } from 'react';
 
+import { DateSelect } from './date-select';
 import { FilterTag } from './filter-tag-translation';
 import { inputStyle } from './index.css';
 import { tBoolean, tDate, tDateRange, tTag } from './logical/custom-type';
@@ -67,12 +67,7 @@ literalMatcher.register(tBoolean.create(), {
 });
 literalMatcher.register(tDate.create(), {
   render: ({ value, onChange }) => (
-    <AFFiNEDatePicker
-      value={dayjs(value as number).format('YYYY-MM-DD')}
-      onChange={e => {
-        onChange(dayjs(e, 'YYYY-MM-DD').valueOf());
-      }}
-    />
+    <DateSelect value={value as number} onChange={onChange} />
   ),
 });
 const getTagsOfArrayTag = (type: TType): Tag[] => {

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>