fix(mobile): add missing mobile date selector and remove focus style from date picker in mobile (#9215)

Close [BS-2169](https://linear.app/affine-design/issue/BS-2169/新的-menu-不支持移动端)

### What changes
- add missing date-selector for mobile
- remove focus style of date picker for mobile
  ![CleanShot 2024-12-20 at 11.27.09@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/7a9b1c1a-e4aa-4746-9242-f1b8c12cd630.png)

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

@@ -46,18 +46,18 @@ export const focusInteractive = style([
   basicInteractive,
   {
     selectors: {
-      '&::before': {
+      ':not([data-mobile="true"]) &::before': {
         opacity: 0,
         boxShadow: `0 0 0 2px ${cssVar('brandColor')}`,
       },
-      '&::after': {
+      ':not([data-mobile="true"]) &::after': {
         border: '1px solid transparent',
       },
 
-      '&:focus-visible::before': {
+      ':not([data-mobile="true"]) &:focus-visible::before': {
         opacity: 0.5,
       },
-      '&:focus-visible::after': {
+      ':not([data-mobile="true"]) &:focus-visible::after': {
         borderColor: cssVar('brandColor'),
       },
     },

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

@@ -8,6 +8,7 @@ import type { WORKSPACE_DIALOG_SCHEMA } from '@affine/core/modules/dialogs/const
 import { useLiveData, useService } from '@toeverything/infra';
 
 import { CollectionSelectorDialog } from './selectors/collection-selector';
+import { DateSelectorDialog } from './selectors/date-selector';
 import { DocSelectorDialog } from './selectors/doc-selector';
 import { TagSelectorDialog } from './selectors/tag-selector';
 import { SettingDialog } from './setting';
@@ -32,6 +33,7 @@ const WORKSPACE_DIALOGS = {
   'tag-selector': TagSelectorDialog,
   'doc-selector': DocSelectorDialog,
   'collection-selector': CollectionSelectorDialog,
+  'date-selector': DateSelectorDialog,
 } satisfies {
   [key in keyof WORKSPACE_DIALOG_SCHEMA]?: React.FC<
     DialogComponentProps<WORKSPACE_DIALOG_SCHEMA[key]>

packages/frontend/core/src/mobile/dialogs/selectors/date-selector.tsx

@@ -0,0 +1,60 @@
+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 { useCallback, useState } from 'react';
+
+/**
+ * A global date selector popover for mobile, mainly used in blocksuite editor
+ */
+export const DateSelectorDialog = ({
+  close,
+  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={{
+        style: {
+          padding: '15px 20px',
+        },
+      }}
+      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}
+        />
+      }
+    >
+      <div />
+    </Menu>
+  );
+};