feat(core): show sync state at doc info (#7244)

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

@@ -7,6 +7,13 @@ function createTimeFormatter() {
   });
 }
 
+function createDateTimeFormatter() {
+  return new Intl.DateTimeFormat(getI18n()?.language, {
+    timeStyle: 'medium',
+    dateStyle: 'medium',
+  });
+}
+
 function createDateFormatter() {
   return new Intl.DateTimeFormat(getI18n()?.language, {
     year: 'numeric',
@@ -31,6 +38,17 @@ export const timestampToLocalDate = (ts: string | number) => {
   return formatter.format(dayjs(ts).toDate());
 };
 
+export const timestampToLocalDateTime = (ts: string | number) => {
+  const formatter = createDateTimeFormatter();
+  return formatter.format(dayjs(ts).toDate());
+};
+
+export const createRelativeTimeFormatter = () => {
+  return new Intl.RelativeTimeFormat(getI18n()?.language, {
+    style: 'narrow',
+  });
+};
+
 export interface CalendarTranslation {
   yesterday: () => string;
   today: () => string;
@@ -64,3 +82,24 @@ export const timestampToCalendarDate = (
               ? `${translation.nextWeek()} ${week}`
               : sameElse;
 };
+
+// TODO: refactor this to @affine/i18n
+export const timestampToHumanTime = (ts: number) => {
+  const diff = Math.abs(dayjs(ts).diff(dayjs()));
+
+  if (diff < 1000 * 60) {
+    return getI18n().t('com.affine.just-now');
+  } else if (diff < 1000 * 60 * 60) {
+    return createRelativeTimeFormatter().format(
+      -Math.floor(diff / 1000 / 60),
+      'minutes'
+    );
+  } else if (diff < 1000 * 60 * 60 * 24) {
+    return createRelativeTimeFormatter().format(
+      -Math.floor(diff / 1000 / 60 / 60),
+      'hours'
+    );
+  } else {
+    return timestampToLocalDate(ts);
+  }
+};