feat: history timeline shows relative time, such as today and yesterd…

…ay (#6864)

### TL;DR
First, fixed an i18n issue in history panel. When the browser language is set to Chinese, and the AFFiNE application language is set to English, the language supposed to be English global. But now the language is a mixture of Chinese and English, which is obviously wrong.

![截屏2024-05-08 18.23.21.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/93d8218a-3b26-4b0c-9f15-71a8996556db.png)

Second, design a time formatter to convert timestamp into relative calendar date, such today and yesterday and so on. Long-ago edits will show the exact date like before.

![截屏2024-05-10 15.30.57.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/dbc59e80-9504-40b1-b712-5c155cb6fa63.png)

### What changed?
- `new Intl.DateTimeFormat` with language option form  `document.documentElement.lang`
- Added `timestampToCalendarDate` function to convert timestamp into relative calendar date
- Updated unit tests
- Updated i18n copywriting

### How to test?
1. Open view history version
2. Check edit timeline

packages/frontend/core/src/components/affine/page-history-modal/data.ts

@@ -1,6 +1,9 @@
 import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useDocCollectionPage } from '@affine/core/hooks/use-block-suite-workspace-page';
-import { timestampToLocalDate } from '@affine/core/utils';
+import {
+  type CalendarTranslation,
+  timestampToCalendarDate,
+} from '@affine/core/utils';
 import { DebugLogger } from '@affine/debug';
 import type { ListHistoryQuery } from '@affine/graphql';
 import { listHistoryQuery, recoverDocMutation } from '@affine/graphql';
@@ -174,10 +177,13 @@ export const useSnapshotPage = (
   return page;
 };
 
-export const historyListGroupByDay = (histories: DocHistory[]) => {
+export const historyListGroupByDay = (
+  histories: DocHistory[],
+  translation: CalendarTranslation
+) => {
   const map = new Map<string, DocHistory[]>();
   for (const history of histories) {
-    const day = timestampToLocalDate(history.timestamp);
+    const day = timestampToCalendarDate(history.timestamp, translation);
     const list = map.get(day) ?? [];
     list.push(history);
     map.set(day, list);

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -33,7 +33,11 @@ import {
 import { encodeStateAsUpdate } from 'yjs';
 
 import { pageHistoryModalAtom } from '../../../atoms/page-history';
-import { mixpanel, timestampToLocalTime } from '../../../utils';
+import {
+  type CalendarTranslation,
+  mixpanel,
+  timestampToLocalTime,
+} from '../../../utils';
 import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
 import { StyledEditorModeSwitch } from '../../blocksuite/block-suite-mode-switch/style';
 import {
@@ -311,14 +315,19 @@ const PageHistoryList = ({
   onLoadMore: (() => void) | false;
   loadingMore: boolean;
 }) => {
+  const t = useAFFiNEI18N();
   const historyListByDay = useMemo(() => {
-    return historyListGroupByDay(historyList);
-  }, [historyList]);
+    const translation: CalendarTranslation = {
+      yesterday: t['com.affine.yesterday'],
+      today: t['com.affine.today'],
+      tomorrow: t['com.affine.tomorrow'],
+      nextWeek: t['com.affine.nextWeek'],
+    };
+    return historyListGroupByDay(historyList, translation);
+  }, [historyList, t]);
 
   const [collapsedMap, setCollapsedMap] = useState<Record<number, boolean>>({});
 
-  const t = useAFFiNEI18N();
-
   useLayoutEffect(() => {
     if (historyList.length > 0 && !activeVersion) {
       onVersionChange(historyList[0].timestamp);

packages/frontend/core/src/utils/__tests__/intl-formatter.spec.ts

@@ -0,0 +1,112 @@
+import { getI18n } from '@affine/i18n';
+import { describe, expect, test } from 'vitest';
+
+import type { CalendarTranslation } from '../intl-formatter';
+import { timestampToCalendarDate } from '../intl-formatter';
+
+const translation: CalendarTranslation = {
+  yesterday: () => 'Yesterday',
+  today: () => 'Today',
+  tomorrow: () => 'Tomorrow',
+  nextWeek: () => 'Next Week',
+};
+
+const ONE_DAY = 24 * 60 * 60 * 1000;
+
+describe('intl calendar date formatter', () => {
+  const week = new Intl.DateTimeFormat(getI18n()?.language, {
+    weekday: 'long',
+  });
+
+  test('someday before last week', async () => {
+    const timestamp = '2000-01-01 10:00';
+    expect(timestampToCalendarDate(timestamp, translation)).toBe('Jan 1, 2000');
+  });
+
+  test('someday in last week', async () => {
+    const timestamp = Date.now() - 6 * ONE_DAY;
+    expect(timestampToCalendarDate(timestamp, translation)).toBe(
+      week.format(timestamp)
+    );
+  });
+
+  test('someday is yesterday', async () => {
+    const timestamp = Date.now() - ONE_DAY;
+    expect(timestampToCalendarDate(timestamp, translation)).toBe('Yesterday');
+  });
+
+  test('someday is today', async () => {
+    const timestamp = Date.now();
+    expect(timestampToCalendarDate(timestamp, translation)).toBe('Today');
+  });
+
+  test('someday is tomorrow', async () => {
+    const timestamp = Date.now() + ONE_DAY;
+    expect(timestampToCalendarDate(timestamp, translation)).toBe('Tomorrow');
+  });
+
+  test('someday in next week', async () => {
+    const timestamp = Date.now() + 6 * ONE_DAY;
+    expect(timestampToCalendarDate(timestamp, translation)).toBe(
+      `Next Week ${week.format(timestamp)}`
+    );
+  });
+
+  test('someday after next week', async () => {
+    const timestamp = '3000-01-01 10:00';
+    expect(timestampToCalendarDate(timestamp, translation)).toBe('Jan 1, 3000');
+  });
+});
+
+describe('intl calendar date formatter with specific reference time', () => {
+  const referenceTime = '2024-05-10 14:00';
+
+  test('someday before last week', async () => {
+    const timestamp = '2024-04-27 10:00';
+    expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe(
+      'Apr 27, 2024'
+    );
+  });
+
+  test('someday in last week', async () => {
+    const timestamp = '2024-05-6 10:00';
+    expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe(
+      'Monday'
+    );
+  });
+
+  test('someday is yesterday', async () => {
+    const timestamp = '2024-05-9 10:00';
+    expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe(
+      'Yesterday'
+    );
+  });
+
+  test('someday is today', async () => {
+    const timestamp = '2024-05-10 10:00';
+    expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe(
+      'Today'
+    );
+  });
+
+  test('someday is tomorrow', async () => {
+    const timestamp = '2024-05-11 10:00';
+    expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe(
+      'Tomorrow'
+    );
+  });
+
+  test('someday in next week', async () => {
+    const timestamp = '2024-05-15 10:00';
+    expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe(
+      'Next Week Wednesday'
+    );
+  });
+
+  test('someday after next week', async () => {
+    const timestamp = '2024-05-30 10:00';
+    expect(timestampToCalendarDate(timestamp, translation, referenceTime)).toBe(
+      'May 30, 2024'
+    );
+  });
+});

packages/frontend/core/src/utils/intl-formatter.ts

@@ -1,19 +1,66 @@
+import { getI18n } from '@affine/i18n';
 import dayjs from 'dayjs';
 
-const timeFormatter = new Intl.DateTimeFormat(undefined, {
-  timeStyle: 'short',
-});
+function createTimeFormatter() {
+  return new Intl.DateTimeFormat(getI18n()?.language, {
+    timeStyle: 'short',
+  });
+}
 
-const dateFormatter = new Intl.DateTimeFormat(undefined, {
-  year: 'numeric',
-  month: 'short',
-  day: 'numeric',
-});
+function createDateFormatter() {
+  return new Intl.DateTimeFormat(getI18n()?.language, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+function createWeekFormatter() {
+  return new Intl.DateTimeFormat(getI18n()?.language, {
+    weekday: 'long',
+  });
+}
 
 export const timestampToLocalTime = (ts: string | number) => {
-  return timeFormatter.format(dayjs(ts).toDate());
+  const formatter = createTimeFormatter();
+  return formatter.format(dayjs(ts).toDate());
 };
 
 export const timestampToLocalDate = (ts: string | number) => {
-  return dateFormatter.format(dayjs(ts).toDate());
+  const formatter = createDateFormatter();
+  return formatter.format(dayjs(ts).toDate());
+};
+
+export interface CalendarTranslation {
+  yesterday: () => string;
+  today: () => string;
+  tomorrow: () => string;
+  nextWeek: () => string;
+}
+
+export const timestampToCalendarDate = (
+  ts: string | number,
+  translation: CalendarTranslation,
+  referenceTime?: string | number
+) => {
+  const startOfDay = dayjs(referenceTime).startOf('d');
+  const diff = dayjs(ts).diff(startOfDay, 'd', true);
+  const sameElse = timestampToLocalDate(ts);
+
+  const formatter = createWeekFormatter();
+  const week = formatter.format(dayjs(ts).toDate());
+
+  return diff < -6
+    ? sameElse
+    : diff < -1
+      ? week
+      : diff < 0
+        ? translation.yesterday()
+        : diff < 1
+          ? translation.today()
+          : diff < 2
+            ? translation.tomorrow()
+            : diff < 7
+              ? `${translation.nextWeek()} ${week}`
+              : sameElse;
 };

packages/frontend/i18n/src/index.ts

@@ -45,6 +45,8 @@ export function useI18N() {
   return i18n;
 }
 
+export { getI18n } from 'react-i18next';
+
 const resources = LOCALES.reduce<Resource>((acc, { tag, res }) => {
   return Object.assign(acc, { [tag]: { translation: res } });
 }, {});

packages/frontend/i18n/src/resources/en.json

@@ -784,6 +784,7 @@
   "com.affine.last7Days": "Last 7 Days",
   "com.affine.lastMonth": "Last month",
   "com.affine.lastWeek": "Last week",
+  "com.affine.nextWeek": "Next week",
   "com.affine.lastYear": "Last year",
   "com.affine.loading": "Loading...",
   "com.affine.moreThan30Days": "Older than a month",
@@ -1239,6 +1240,7 @@
   "com.affine.toastMessage.restored": "{{title}} restored",
   "com.affine.toastMessage.successfullyDeleted": "Successfully deleted",
   "com.affine.today": "Today",
+  "com.affine.tomorrow": "Tomorrow",
   "com.affine.trashOperation.delete": "Delete",
   "com.affine.trashOperation.delete.description": "Once deleted, you can't undo this action. Do you confirm?",
   "com.affine.trashOperation.delete.title": "Permanently delete",