feat(core): at menu journal entries (#8877) (#8935)

fix AF-1790
fix AF-1774
added `DateSelectorDialog` for selecting a date through blocksuite;
added `AtMenuConfigService` for constructing the at menu config
fix AF-1776
fix PD-1942

resubmitted to replace #8877

packages/frontend/core/src/desktop/dialogs/index.tsx

@@ -15,6 +15,7 @@ import { ImportDialog } from './import';
 import { ImportTemplateDialog } from './import-template';
 import { ImportWorkspaceDialog } from './import-workspace';
 import { CollectionSelectorDialog } from './selectors/collection';
+import { DateSelectorDialog } from './selectors/date';
 import { DocSelectorDialog } from './selectors/doc';
 import { TagSelectorDialog } from './selectors/tag';
 import { SettingDialog } from './setting';
@@ -36,6 +37,7 @@ const WORKSPACE_DIALOGS = {
   'tag-selector': TagSelectorDialog,
   'doc-selector': DocSelectorDialog,
   'collection-selector': CollectionSelectorDialog,
+  'date-selector': DateSelectorDialog,
   import: ImportDialog,
 } satisfies {
   [key in keyof WORKSPACE_DIALOG_SCHEMA]?: React.FC<

packages/frontend/core/src/desktop/dialogs/selectors/date.tsx

@@ -0,0 +1,76 @@
+import { DatePicker, Menu } from '@affine/component';
+import type { DialogComponentProps } from '@affine/core/modules/dialogs';
+import type { WORKSPACE_DIALOG_SCHEMA } from '@affine/core/modules/dialogs/constant';
+import { useI18n } from '@affine/i18n';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { useCallback, useState } from 'react';
+
+/**
+ * A global date selector popover, mainly used in blocksuite editor
+ */
+export const DateSelectorDialog = ({
+  close,
+  position,
+  onSelect,
+}: DialogComponentProps<WORKSPACE_DIALOG_SCHEMA['date-selector']>) => {
+  const [selectedDate, setSelectedDate] = useState<string>();
+
+  const t = useI18n();
+
+  const onClose = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        close();
+      }
+    },
+    [close]
+  );
+
+  const handleSelect = useCallback(
+    (date?: string) => {
+      setSelectedDate(date);
+      onSelect?.(date);
+    },
+    [onSelect]
+  );
+
+  return (
+    <Menu
+      rootOptions={{
+        modal: true,
+        open: true,
+        onOpenChange: onClose,
+      }}
+      contentOptions={{
+        side: 'bottom',
+        sideOffset: 8,
+        align: 'start',
+        style: {
+          padding: 20,
+          borderRadius: 8,
+          background: cssVarV2('layer/background/primary'),
+        },
+      }}
+      items={
+        <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={selectedDate}
+          onChange={handleSelect}
+        />
+      }
+    >
+      {/* hack the menu positioning using the following fixed anchor */}
+      <div
+        style={{
+          position: 'fixed',
+          left: position[0],
+          top: position[1],
+          width: position[2],
+          height: position[3],
+        }}
+      />
+    </Menu>
+  );
+};