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[] => {