feat(mobile): jouranl daily activity and conflict operations (#8779)

close AF-1662

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -7,6 +7,7 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 import { observeResize } from '../../../utils';
 import { Button } from '../../button';
 import { Modal } from '../../modal';
+import { Scrollable } from '../../scrollbar';
 import type { MenuProps } from '../menu.types';
 import type { SubMenuContent } from './context';
 import { MobileMenuContext } from './context';
@@ -138,8 +139,12 @@ export const MobileMenu = ({
                 >
                   {sub.title || t['com.affine.backButton']()}
                 </Button>
-
-                {sub.items}
+                <Scrollable.Root>
+                  <Scrollable.Viewport className={styles.scrollArea}>
+                    {sub.items}
+                  </Scrollable.Viewport>
+                  <Scrollable.Scrollbar />
+                </Scrollable.Root>
               </div>
             ))}
           </div>

packages/frontend/component/src/ui/menu/mobile/styles.css.ts

@@ -3,7 +3,7 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 import { modalContent } from '../../modal/styles.css';
-import { bgColor } from '../styles.css';
+import { bgColor, iconColor, labelColor } from '../styles.css';
 
 // To override desktop menu style defined in '../styles.css.ts'
 
@@ -55,6 +55,12 @@ export const mobileMenuItem = style({
     },
   },
   selectors: {
+    '&.danger': {
+      vars: {
+        [labelColor]: cssVarV2('button/error'),
+        [iconColor]: cssVarV2('button/error'),
+      },
+    },
     '&.danger:hover': {
       vars: { [bgColor]: 'transparent' },
     },
@@ -97,3 +103,7 @@ export const backButton = style({
   paddingLeft: 0,
   marginLeft: 20,
 });
+
+export const scrollArea = style({
+  maxHeight: '80dvh',
+});