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

packages/frontend/component/src/ui/date-picker/date-picker.tsx

@@ -5,7 +5,7 @@ import {
 } from '@blocksuite/icons';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import { type HTMLAttributes, useCallback, useState } from 'react';
+import { type HTMLAttributes, useCallback, useEffect, useState } from 'react';
 import DatePicker, { type ReactDatePickerProps } from 'react-datepicker';
 
 import * as styles from './index.css';
@@ -24,9 +24,10 @@ const months = [
   'December',
 ];
 export interface AFFiNEDatePickerProps
-  extends Omit<ReactDatePickerProps, 'onChange'> {
+  extends Omit<ReactDatePickerProps, 'onChange' | 'onSelect'> {
   value?: string;
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
+  onSelect?: (value: string) => void;
 }
 
 interface HeaderLayoutProps extends HTMLAttributes<HTMLDivElement> {
@@ -74,6 +75,10 @@ const HeaderLayout = ({
 export const AFFiNEDatePicker = ({
   value,
   onChange,
+  onSelect,
+
+  calendarClassName,
+
   ...props
 }: AFFiNEDatePickerProps) => {
   const [openMonthPicker, setOpenMonthPicker] = useState(false);
@@ -86,10 +91,16 @@ export const AFFiNEDatePicker = ({
   const handleCloseMonthPicker = useCallback(() => {
     setOpenMonthPicker(false);
   }, []);
-  const handleSelectDate = (date: Date | null) => {
+  const handleDateChange = (date: Date | null) => {
     if (date) {
       setSelectedDate(date);
-      onChange(dayjs(date).format('YYYY-MM-DD'));
+      onChange?.(dayjs(date).format('YYYY-MM-DD'));
+      setOpenMonthPicker(false);
+    }
+  };
+  const handleDateSelect = (date: Date | null) => {
+    if (date) {
+      onSelect?.(dayjs(date).format('YYYY-MM-DD'));
       setOpenMonthPicker(false);
     }
   };
@@ -207,17 +218,23 @@ export const AFFiNEDatePicker = ({
       />
     );
   };
+
+  useEffect(() => {
+    setSelectedDate(value ? dayjs(value).toDate() : null);
+  }, [value]);
+
   return (
     <DatePicker
       onClickOutside={handleCloseMonthPicker}
       className={styles.inputStyle}
-      calendarClassName={styles.calendarStyle}
+      calendarClassName={clsx(styles.calendarStyle, calendarClassName)}
       weekDayClassName={() => styles.weekStyle}
       dayClassName={() => styles.dayStyle}
       popperClassName={styles.popperStyle}
       monthClassName={() => styles.mouthsStyle}
       selected={selectedDate}
-      onChange={handleSelectDate}
+      onChange={handleDateChange}
+      onSelect={handleDateSelect}
       showPopperArrow={false}
       dateFormat="MMM dd"
       showMonthYearPicker={openMonthPicker}

packages/frontend/component/src/ui/date-picker/index.css.ts

@@ -151,28 +151,22 @@ export const dayStyle = style([
     fontWeight: '400',
     borderRadius: '8px',
     selectors: {
-      '&:hover': {
+      '&[aria-selected="false"]:hover': {
         background: 'var(--affine-hover-color)',
         borderRadius: '8px',
         transition: 'background-color 0.3s ease-in-out',
       },
       '&[aria-selected="true"]': {
-        color: 'var(--affine-black)',
-        background: 'var(--affine-hover-color)',
-      },
-      '&[aria-selected="true"]:hover': {
-        background: 'var(--affine-hover-color)',
+        color: 'var(--affine-pure-white)',
+        background: 'var(--affine-primary-color)',
+        fontWeight: '500',
       },
       '&[tabindex="0"][aria-selected="false"]': {
         background: 'var(--affine-background-overlay-panel-color)',
       },
       '&.react-datepicker__day--today[aria-selected="false"]': {
-        background: 'var(--affine-primary-color)',
-        color: 'var(--affine-palette-line-white)',
-      },
-      '&.react-datepicker__day--today[aria-selected="false"]:hover': {
-        color: 'var(--affine-black)',
-        background: 'var(--affine-hover-color)',
+        fontWeight: '600',
+        color: 'var(--affine-primary-color)',
       },
       '&.react-datepicker__day--outside-month[aria-selected="false"]': {
         color: 'var(--affine-text-disable-color)',