Merge branch 'develop' into fix/clipboard

libs/components/account/src/login/firebase.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable filename-rules/match */
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { initializeApp } from 'firebase/app';
 import {
     GoogleAuthProvider,
@@ -8,15 +8,7 @@ import {
     browserLocalPersistence,
 } from 'firebase/auth';
 
-import { LogoImg } from '@toeverything/components/common';
-import {
-    MuiButton,
-    MuiBox,
-    MuiGrid,
-    MuiSnackbar,
-} from '@toeverything/components/ui';
-
-import { Error } from './../error';
+import { MuiButton } from '@toeverything/components/ui';
 
 const _firebaseConfig = {
     apiKey: 'AIzaSyD7A_VyGaKTXsPqtga9IbwrEsbWWc4rH3Y',
@@ -75,7 +67,7 @@ const GoogleIcon = () => (
     </svg>
 );
 
-export const Firebase = () => {
+export const Firebase = (props: { onError: () => void }) => {
     const [auth, provider] = useMemo(() => {
         const auth = getAuth(_app);
         auth.setPersistence(browserLocalPersistence);
@@ -83,8 +75,6 @@ export const Firebase = () => {
         return [auth, provider];
     }, []);
 
-    const [error, setError] = useState(false);
-
     const handleAuth = useCallback(() => {
         signInWithPopup(auth, provider).catch(error => {
             const errorCode = error.code;
@@ -92,53 +82,19 @@ export const Firebase = () => {
             const email = error.customData.email;
             const credential = GoogleAuthProvider.credentialFromError(error);
             console.log(errorCode, errorMessage, email, credential);
-            setError(true);
-            setTimeout(() => setError(false), 3000);
+            props.onError();
         });
-    }, [auth, provider]);
+    }, [auth, props, provider]);
 
     return (
-        <MuiGrid container>
-            <MuiSnackbar
-                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-                open={error}
-                message="Login failed, please check if you have permission"
-            />
-            <MuiGrid item xs={8}>
-                <Error
-                    title="Welcome to AFFiNE"
-                    subTitle="blocks of knowledge to power your team"
-                    action1Text="Login &nbsp; or &nbsp; Register"
-                />
-            </MuiGrid>
-
-            <MuiGrid item xs={4}>
-                <MuiBox
-                    onSubmit={handleAuth}
-                    onClick={handleAuth}
-                    style={{
-                        textAlign: 'center',
-                        width: '300px',
-                        margin: '300px  auto 20px auto',
-                    }}
-                    sx={{ mt: 1 }}
-                >
-                    <LogoImg
-                        style={{
-                            width: '100px',
-                        }}
-                    />
-
-                    <MuiButton
-                        variant="outlined"
-                        fullWidth
-                        style={{ textTransform: 'none' }}
-                        startIcon={<GoogleIcon />}
-                    >
-                        Continue with Google
-                    </MuiButton>
-                </MuiBox>
-            </MuiGrid>
-        </MuiGrid>
+        <MuiButton
+            variant="outlined"
+            fullWidth
+            style={{ textTransform: 'none' }}
+            startIcon={<GoogleIcon />}
+            onClick={handleAuth}
+        >
+            Continue with Google
+        </MuiButton>
     );
 };

libs/components/account/src/login/fs.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable filename-rules/match */
+import { useEffect, useMemo } from 'react';
+
+import { LogoIcon } from '@toeverything/components/icons';
+import { MuiButton } from '@toeverything/components/ui';
+import { services } from '@toeverything/datasource/db-service';
+import { useLocalTrigger } from '@toeverything/datasource/state';
+
+const cleanupWorkspace = (workspace: string) =>
+    new Promise((resolve, reject) => {
+        const req = indexedDB.deleteDatabase(workspace);
+        req.addEventListener('error', e => reject(e));
+        req.addEventListener('blocked', e => reject(e));
+        req.addEventListener('upgradeneeded', e => reject(e));
+        req.addEventListener('success', e => resolve(e));
+    });
+
+const requestPermission = async (workspace: string) => {
+    await cleanupWorkspace(workspace);
+    const dirHandler = await window.showDirectoryPicker({
+        id: 'AFFiNE_' + workspace,
+        mode: 'readwrite',
+        startIn: 'documents',
+    });
+    const fileHandle = await dirHandler.getFileHandle('affine.db', {
+        create: true,
+    });
+    const file = await fileHandle.getFile();
+    const initialData = new Uint8Array(await file.arrayBuffer());
+
+    const exporter = async (contents: Uint8Array) => {
+        try {
+            const writable = await fileHandle.createWritable();
+            await writable.write(contents);
+            await writable.close();
+        } catch (e) {
+            console.log(e);
+        }
+    };
+
+    await services.api.editorBlock.setupDataExporter(
+        workspace,
+        new Uint8Array(initialData),
+        exporter
+    );
+};
+
+export const FileSystem = (props: { onError: () => void }) => {
+    const onSelected = useLocalTrigger();
+
+    const apiSupported = useMemo(() => {
+        try {
+            return 'showOpenFilePicker' in window;
+        } catch (e) {
+            return false;
+        }
+    }, []);
+
+    useEffect(() => {
+        if (process.env['NX_E2E']) {
+            onSelected();
+        }
+    }, []);
+
+    return (
+        <MuiButton
+            variant="outlined"
+            fullWidth
+            style={{ textTransform: 'none' }}
+            startIcon={<LogoIcon />}
+            onClick={async () => {
+                try {
+                    if (apiSupported) {
+                        await requestPermission('AFFiNE');
+                        onSelected();
+                    } else {
+                        onSelected();
+                    }
+                } catch (e) {
+                    props.onError();
+                }
+            }}
+        >
+            {apiSupported ? 'Sync to Disk' : 'Try Live Demo'}
+        </MuiButton>
+    );
+};

libs/components/account/src/login/index.tsx

@@ -1,11 +1,64 @@
+/* eslint-disable filename-rules/match */
+import { useCallback, useState } from 'react';
+import { LogoImg } from '@toeverything/components/common';
+import { MuiBox, MuiGrid, MuiSnackbar } from '@toeverything/components/ui';
+
 // import { Authing } from './authing';
 import { Firebase } from './firebase';
+import { FileSystem } from './fs';
+import { Error } from './../error';
 
 export function Login() {
+    const [error, setError] = useState(false);
+
+    const onError = useCallback(() => {
+        setError(true);
+        setTimeout(() => setError(false), 3000);
+    }, []);
+
     return (
-        <>
-            {/* <Authing /> */}
-            <Firebase />
-        </>
+        <MuiGrid container>
+            <MuiSnackbar
+                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+                open={error}
+                message="Login failed, please check if you have permission"
+            />
+            <MuiGrid item xs={8}>
+                <Error
+                    title="Welcome to AFFiNE"
+                    subTitle="blocks of knowledge to power your team"
+                    action1Text="Login &nbsp; or &nbsp; Register"
+                />
+            </MuiGrid>
+
+            <MuiGrid item xs={4}>
+                {' '}
+                <MuiBox
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        rowGap: '1em',
+                        width: '300px',
+                        margin: '300px  auto 20px auto',
+                    }}
+                    sx={{ mt: 1 }}
+                >
+                    <LogoImg
+                        style={{
+                            width: '100px',
+                        }}
+                    />
+                    {/* {((process.env['NX_LOCAL'] || true) && ( */}
+                    <FileSystem onError={onError} />
+                    {/* )) ||
+                    null}
+                {((!process.env['NX_LOCAL'] || true) && ( */}
+                    <Firebase onError={onError} />
+                    {/* )) ||
+                    null} */}{' '}
+                </MuiBox>
+            </MuiGrid>
+        </MuiGrid>
     );
 }

libs/components/board-draw/src/TlDraw.tsx

@@ -1,5 +1,13 @@
 /* eslint-disable max-lines */
-import * as React from 'react';
+import {
+    memo,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useMemo,
+    useState,
+    type RefObject,
+} from 'react';
 import { Renderer } from '@tldraw/core';
 import { styled } from '@toeverything/components/ui';
 import {
@@ -132,13 +140,13 @@ export function Tldraw({
     getSession,
     tools,
 }: TldrawProps) {
-    const [sId, set_sid] = React.useState(id);
+    const [sId, setSid] = useState(id);
     const { pageClientWidth } = usePageClientWidth();
     // page padding left and right total 300px
     const editorShapeInitSize = pageClientWidth - 300;
 
     // Create a new app when the component mounts.
-    const [app, setApp] = React.useState(() => {
+    const [app, setApp] = useState(() => {
         const app = new TldrawApp({
             id,
             callbacks,
@@ -151,7 +159,7 @@ export function Tldraw({
     });
 
     // Create a new app if the `id` prop changes.
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (id === sId) return;
         const newApp = new TldrawApp({
             id,
@@ -161,14 +169,14 @@ export function Tldraw({
             tools,
         });
 
-        set_sid(id);
+        setSid(id);
 
         setApp(newApp);
     }, [sId, id]);
 
     // Update the document if the `document` prop changes but the ids,
     // are the same, or else load a new document if the ids are different.
-    React.useEffect(() => {
+    useEffect(() => {
         if (!document) return;
 
         if (document.id === app.document.id) {
@@ -179,34 +187,34 @@ export function Tldraw({
     }, [document, app]);
 
     // Disable assets when the `disableAssets` prop changes.
-    React.useEffect(() => {
+    useEffect(() => {
         app.setDisableAssets(disableAssets);
     }, [app, disableAssets]);
 
     // Change the page when the `currentPageId` prop changes.
-    React.useEffect(() => {
+    useEffect(() => {
         if (!currentPageId) return;
         app.changePage(currentPageId);
     }, [currentPageId, app]);
 
     // Toggle the app's readOnly mode when the `readOnly` prop changes.
-    React.useEffect(() => {
+    useEffect(() => {
         app.readOnly = readOnly;
     }, [app, readOnly]);
 
     // Toggle the app's darkMode when the `darkMode` prop changes.
-    React.useEffect(() => {
+    useEffect(() => {
         if (darkMode !== app.settings.isDarkMode) {
             app.toggleDarkMode();
         }
     }, [app, darkMode]);
 
     // Update the app's callbacks when any callback changes.
-    React.useEffect(() => {
+    useEffect(() => {
         app.callbacks = callbacks || {};
     }, [app, callbacks]);
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (typeof window === 'undefined') return;
         if (!window.document?.fonts) return;
 
@@ -260,7 +268,7 @@ interface InnerTldrawProps {
     showSponsorLink?: boolean;
 }
 
-const InnerTldraw = React.memo(function InnerTldraw({
+const InnerTldraw = memo(function InnerTldraw({
     id,
     autofocus,
     showPages,
@@ -276,7 +284,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
 }: InnerTldrawProps) {
     const app = useTldrawApp();
 
-    const rWrapper = React.useRef<HTMLDivElement>(null);
+    const rWrapper = useRef<HTMLDivElement>(null);
 
     const state = app.useStore();
 
@@ -299,7 +307,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
         TLDR.get_shape_util(page.shapes[selectedIds[0]].type).hideResizeHandles;
 
     // Custom rendering meta, with dark mode for shapes
-    const meta: TDMeta = React.useMemo(() => {
+    const meta: TDMeta = useMemo(() => {
         return { isDarkMode: settings.isDarkMode, app };
     }, [settings.isDarkMode, app]);
 
@@ -308,7 +316,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
         : appState.selectByContain;
 
     // Custom theme, based on darkmode
-    const theme = React.useMemo(() => {
+    const theme = useMemo(() => {
         const { selectByContain } = appState;
         const { isDarkMode, isCadSelectMode } = settings;
 
@@ -373,9 +381,11 @@ const InnerTldraw = React.memo(function InnerTldraw({
         !isSelecting ||
         !settings.showCloneHandles ||
         pageState.camera.zoom < 0.2;
+
     return (
         <StyledLayout
             ref={rWrapper}
+            panning={settings.forcePanning}
             tabIndex={-0}
             penColor={app?.appState?.currentStyle?.stroke}
         >
@@ -477,17 +487,17 @@ const InnerTldraw = React.memo(function InnerTldraw({
     );
 });
 
-const OneOff = React.memo(function OneOff({
+const OneOff = memo(function OneOff({
     focusableRef,
     autofocus,
 }: {
     autofocus?: boolean;
-    focusableRef: React.RefObject<HTMLDivElement>;
+    focusableRef: RefObject<HTMLDivElement>;
 }) {
     useKeyboardShortcuts(focusableRef);
     useStylesheet();
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (autofocus) {
             focusableRef.current?.focus();
         }
@@ -496,8 +506,8 @@ const OneOff = React.memo(function OneOff({
     return null;
 });
 
-const StyledLayout = styled('div')<{ penColor: string }>(
-    ({ theme, penColor }) => {
+const StyledLayout = styled('div')<{ penColor: string; panning: boolean }>(
+    ({ theme, panning, penColor }) => {
         return {
             position: 'relative',
             height: '100%',
@@ -509,6 +519,7 @@ const StyledLayout = styled('div')<{ penColor: string }>(
             overflow: 'hidden',
             boxSizing: 'border-box',
             outline: 'none',
+            cursor: panning ? 'grab' : 'unset',
 
             '& .tl-container': {
                 position: 'absolute',

libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx

@@ -6,6 +6,7 @@ import {
     Tooltip,
     PopoverContainer,
     IconButton,
+    useTheme,
 } from '@toeverything/components/ui';
 import {
     FrameIcon,
@@ -71,6 +72,7 @@ export const ToolsPanel: FC<{ app: TldrawApp }> = ({ app }) => {
     const activeTool = app.useStore(activeToolSelector);
 
     const isToolLocked = app.useStore(toolLockedSelector);
+    const theme = useTheme();
 
     return (
         <PopoverContainer
@@ -105,7 +107,8 @@ export const ToolsPanel: FC<{ app: TldrawApp }> = ({ app }) => {
                                         style={{
                                             color:
                                                 activeTool === type
-                                                    ? 'blue'
+                                                    ? theme.affine.palette
+                                                          .primary
                                                     : '',
                                         }}
                                         onClick={() => {

libs/components/board-state/src/tldraw-app.ts

@@ -219,8 +219,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
     isPointing = false;
 
-    isForcePanning = false;
-
     editingStartTime = -1;
 
     fileSystemHandle: FileSystemHandle | null = null;
@@ -262,7 +260,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
     constructor(props: TldrawAppCtorProps) {
         super(
-            TldrawApp.default_state,
+            TldrawApp.defaultState,
             props.id,
             TldrawApp.version,
             (prev, next, prevVersion) => {
@@ -326,9 +324,9 @@ export class TldrawApp extends StateManager<TDSnapshot> {
             );
 
             this.patchState({
-                ...TldrawApp.default_state,
+                ...TldrawApp.defaultState,
                 appState: {
-                    ...TldrawApp.default_state.appState,
+                    ...TldrawApp.defaultState.appState,
                     status: TDStatus.Idle,
                 },
             });
@@ -1473,13 +1471,13 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
         this.replace_state(
             {
-                ...TldrawApp.default_state,
+                ...TldrawApp.defaultState,
                 settings: {
                     ...this.state.settings,
                 },
                 document: migrate(document, TldrawApp.version),
                 appState: {
-                    ...TldrawApp.default_state.appState,
+                    ...TldrawApp.defaultState.appState,
                     ...this.state.appState,
                     currentPageId: Object.keys(document.pages)[0],
                     disableAssets: this.disableAssets,
@@ -3913,7 +3911,11 @@ export class TldrawApp extends StateManager<TDSnapshot> {
                 break;
             }
             case ' ': {
-                this.isForcePanning = true;
+                this.patchState({
+                    settings: {
+                        forcePanning: true,
+                    },
+                });
                 this.spaceKey = true;
                 break;
             }
@@ -3976,7 +3978,12 @@ export class TldrawApp extends StateManager<TDSnapshot> {
                 break;
             }
             case ' ': {
-                this.isForcePanning = false;
+                this.patchState({
+                    settings: {
+                        forcePanning:
+                            this.currentTool.type === TDShapeType.HandDraw,
+                    },
+                });
                 this.spaceKey = false;
                 break;
             }
@@ -4069,13 +4076,18 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         this.pan(delta);
 
         // When panning, we also want to call onPointerMove, except when "force panning" via spacebar / middle wheel button (it's called elsewhere in that case)
-        if (!this.isForcePanning)
+        if (!this.useStore.getState().settings.forcePanning)
             this.onPointerMove(info, e as unknown as React.PointerEvent);
     };
 
     onZoom: TLWheelEventHandler = (info, e) => {
         if (this.state.appState.status !== TDStatus.Idle) return;
-        const delta = info.delta[2] / 50;
+        // Normalize zoom scroll
+        // Fix https://github.com/toeverything/AFFiNE/issues/135
+        const delta =
+            Math.abs(info.delta[2]) > 10
+                ? 0.2 * Math.sign(info.delta[2])
+                : info.delta[2] / 50;
         this.zoomBy(delta, info.point);
         this.onPointerMove(info, e as unknown as React.PointerEvent);
     };
@@ -4093,7 +4105,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
     onPointerMove: TLPointerEventHandler = (info, e) => {
         this.previousPoint = this.currentPoint;
         this.updateInputs(info, e);
-        if (this.isForcePanning && this.isPointing) {
+        if (this.useStore.getState().settings.forcePanning && this.isPointing) {
             this.onPan?.(
                 { ...info, delta: Vec.neg(info.delta) },
                 e as unknown as WheelEvent
@@ -4117,20 +4129,23 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
     onPointerDown: TLPointerEventHandler = (info, e) => {
         if (e.buttons === 4) {
-            this.isForcePanning = true;
+            this.patchState({
+                settings: {
+                    forcePanning: true,
+                },
+            });
         } else if (this.isPointing) {
             return;
         }
         this.isPointing = true;
         this.originPoint = this.getPagePoint(info.point).concat(info.pressure);
         this.updateInputs(info, e);
-        if (this.isForcePanning) return;
+        if (this.useStore.getState().settings.forcePanning) return;
         this.currentTool.onPointerDown?.(info, e);
     };
 
     onPointerUp: TLPointerEventHandler = (info, e) => {
         this.isPointing = false;
-        if (!this.shiftKey) this.isForcePanning = false;
         this.updateInputs(info, e);
         this.currentTool.onPointerUp?.(info, e);
     };
@@ -4517,7 +4532,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         assets: {},
     };
 
-    static default_state: TDSnapshot = {
+    static defaultState: TDSnapshot = {
         settings: {
             isCadSelectMode: false,
             isPenMode: false,
@@ -4527,6 +4542,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
             isSnapping: false,
             isDebugMode: false,
             isReadonlyMode: false,
+            forcePanning: false,
             keepStyleMenuOpen: false,
             nudgeDistanceLarge: 16,
             nudgeDistanceSmall: 1,

libs/components/board-tools/src/hand-draw/hand-draw-tool.ts

@@ -18,34 +18,19 @@ export class HandDrawTool extends BaseTool {
 
     /* ----------------- Event Handlers ----------------- */
 
-    override onPointerDown: TLPointerEventHandler = () => {
-        if (this.app.readOnly) return;
-        if (this.status !== Status.Idle) return;
-
-        this.set_status(Status.Pointing);
+    override onEnter = () => {
+        this.app.patchState({
+            settings: {
+                forcePanning: true,
+            },
+        });
     };
 
-    override onPointerMove: TLPointerEventHandler = (info, e) => {
-        if (this.app.readOnly) return;
-        const delta = Vec.div(info.delta, this.app.camera.zoom);
-        const prev = this.app.camera.point;
-        const next = Vec.sub(prev, delta);
-        if (Vec.isEqual(next, prev)) return;
-
-        switch (this.status) {
-            case Status.Pointing: {
-                this.app.pan(Vec.neg(delta));
-
-                break;
-            }
-        }
-    };
-
-    override onPointerUp: TLPointerEventHandler = () => {
-        this.set_status(Status.Idle);
-    };
-
-    override onCancel = () => {
-        this.set_status(Status.Idle);
+    override onExit = () => {
+        this.app.patchState({
+            settings: {
+                forcePanning: false,
+            },
+        });
     };
 }

libs/components/board-types/src/types.ts

@@ -84,6 +84,7 @@ export interface TDSnapshot {
         isPenMode: boolean;
         isReadonlyMode: boolean;
         isZoomSnap: boolean;
+        forcePanning: boolean;
         keepStyleMenuOpen: boolean;
         nudgeDistanceSmall: number;
         nudgeDistanceLarge: number;

libs/components/common/src/lib/collapsible-title/index.tsx

@@ -13,6 +13,7 @@ const StyledContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
+    paddingLeft: '12px',
     '&:hover': {
         background: '#f5f7f8',
         borderRadius: '5px',
@@ -36,11 +37,6 @@ export function CollapsibleTitle(props: CollapsibleTitleProps) {
     return (
         <>
             <StyledContainer onClick={() => setOpen(prev => !prev)}>
-                {open ? (
-                    <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                ) : (
-                    <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                )}
                 <div
                     style={{
                         color: '#98ACBD',

libs/components/editor-blocks/src/blocks/grid/index.ts

@@ -36,6 +36,9 @@ export class GridBlock extends BaseView {
             }
             return block.remove();
         }
+        if (block.childrenIds.length === 0) {
+            return block.remove();
+        }
         return true;
     }
 }

libs/components/editor-blocks/src/blocks/group/GroupView.tsx

@@ -1,6 +1,8 @@
 import {
     addNewGroup,
+    LINE_GAP,
     RecastScene,
+    TAG_GAP,
     useCurrentView,
     useOnSelect,
 } from '@toeverything/components/editor-core';
@@ -38,6 +40,7 @@ const GroupActionWrapper = styled('div')(({ theme }) => ({
     visibility: 'hidden',
     fontSize: theme.affine.typography.xs.fontSize,
     color: theme.affine.palette.icons,
+    opacity: 0.6,
     '.line': {
         flex: 1,
         height: '15px',
@@ -60,7 +63,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
     ({ isSelect, theme }) => ({
         background: theme.affine.palette.white,
         border: '2px solid rgba(236,241,251,.5)',
-        padding: `15px 16px 0 16px`,
+        padding: `15px 16px ${LINE_GAP - TAG_GAP * 2}px 16px`,
         borderRadius: '10px',
         ...(isSelect
             ? {

libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx

@@ -156,7 +156,13 @@ export const CardContainer = (props: CardContainerProps) => {
     const { kanban } = useKanban();
     const { containerIds, items: dataSource, activeId } = props;
     return (
-        <KanbanContainer>
+        <KanbanContainer
+            onMouseDown={e => {
+                // Fix https://github.com/toeverything/AFFiNE/issues/29
+                // Prevent active selection when dragging kanban card
+                e.stopPropagation();
+            }}
+        >
             {containerIds.map((containerId, idx) => {
                 const items = dataSource[containerId];
 

libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx

@@ -60,6 +60,9 @@ export const CardContext = (props: Props) => {
 
 const StyledCardContainer = styled('div')`
     cursor: pointer;
+    &:hover {
+        z-index: 1;
+    }
     &:focus-within {
         z-index: 1;
     }

libs/components/editor-blocks/src/blocks/page/PageView.tsx

@@ -86,7 +86,7 @@ export const PageView: FC<CreateView> = ({ block, editor }) => {
                     alwaysShowPlaceholder
                     ref={textRef}
                     className={'title'}
-                    supportMarkdown={true}
+                    supportMarkdown={false}
                     handleEnter={onTextEnter}
                     placeholder={'Untitled'}
                     block={block}
@@ -109,12 +109,15 @@ export const PageView: FC<CreateView> = ({ block, editor }) => {
     );
 };
 
-const PageTitleBlock = styled('div')({
-    '.title': {
-        fontSize: Theme.typography.page.fontSize,
-        lineHeight: Theme.typography.page.lineHeight,
-    },
-    '.content': {
-        outline: 'none',
-    },
+const PageTitleBlock = styled('div')(({ theme }) => {
+    return {
+        '.title': {
+            fontSize: theme.affine.typography.page.fontSize,
+            lineHeight: theme.affine.typography.page.lineHeight,
+            fontWeight: theme.affine.typography.page.fontWeight,
+        },
+        '.content': {
+            outline: 'none',
+        },
+    };
 });

libs/components/editor-blocks/src/blocks/text/TextView.tsx

@@ -46,6 +46,7 @@ const TextBlock = styled(TextManage)<{ type: string }>(({ theme, type }) => {
         return {
             fontSize: textStyleMap.text.fontSize,
             lineHeight: textStyleMap.text.lineHeight,
+            fontWeight: textStyleMap.text.fontWeight,
         };
     }
 });

libs/components/editor-blocks/src/blocks/todo/TodoView.tsx

@@ -150,6 +150,7 @@ const TodoBlock = styled('div')({
     display: 'flex',
     '.checkBoxContainer': {
         marginRight: '4px',
+        padding: '0 4px',
         height: '22px',
     },
     '.textContainer': {

libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx

@@ -27,5 +27,6 @@ export const BlockContainer: FC<BlockContainerProps> = function ({
 export const Container = styled('div')<{ selected: boolean }>(
     ({ selected, theme }) => ({
         backgroundColor: selected ? theme.affine.palette.textSelected : '',
+        marginBottom: '2px',
     })
 );

libs/components/editor-blocks/src/components/text-manage/TextManage.tsx

@@ -39,6 +39,9 @@ export type ExtendedTextUtils = SlateUtils & {
 };
 const TextBlockContainer = styled(Text)(({ theme }) => ({
     lineHeight: theme.affine.typography.body1.lineHeight,
+    fontFamily: theme.affine.typography.body1.fontFamily,
+    color: theme.affine.typography.body1.color,
+    letterSpacing: '0.1px',
 }));
 
 const findSlice = (arr: string[], p: string, q: string) => {

libs/components/editor-core/src/RenderRoot.tsx

@@ -102,6 +102,12 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
         editor.getHooks().onRootNodeMouseLeave(event);
     };
 
+    const onContextmenu = (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
+        selectionRef.current?.onContextmenu(event);
+    };
+
     const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
         // IMP move into keyboard managers?
         editor.getHooks().onRootNodeKeyDown(event);
@@ -165,6 +171,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
                 onMouseUp={onMouseUp}
                 onMouseLeave={onMouseLeave}
                 onMouseOut={onMouseOut}
+                onContextMenu={onContextmenu}
                 onKeyDown={onKeyDown}
                 onKeyDownCapture={onKeyDownCapture}
                 onKeyUp={onKeyUp}

libs/components/editor-core/src/Selection.tsx

@@ -29,6 +29,9 @@ export type SelectionRef = {
     onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onMouseMove: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onMouseUp: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onContextmenu: (
+        event: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => void;
 };
 
 const getFixedPoint = (
@@ -207,10 +210,17 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
             scrollManager.stopAutoScroll();
         };
 
+        const onContextmenu = () => {
+            if (mouseType.current === 'down') {
+                onMouseUp();
+            }
+        };
+
         useImperativeHandle(ref, () => ({
             onMouseDown,
             onMouseMove,
             onMouseUp,
+            onContextmenu,
         }));
 
         useEffect(() => {

libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx

@@ -3,6 +3,8 @@ import { styled } from '@toeverything/components/ui';
 import type { AsyncBlock } from '../editor';
 import { PendantPopover } from './pendant-popover';
 import { PendantRender } from './pendant-render';
+import { useRef } from 'react';
+import { getRecastItemValue, useRecastBlockMeta } from '../recast-block';
 /**
  * @deprecated
  */
@@ -14,13 +16,27 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
     block,
     children,
 }) => {
+    const triggerRef = useRef<HTMLDivElement>();
+    const { getProperties } = useRecastBlockMeta();
+    const properties = getProperties();
+    const { getValue } = getRecastItemValue(block);
+    const showTriggerLine =
+        properties.filter(property => getValue(property.id)).length === 0;
+
     return (
         <Container>
             {children}
 
-            <PendantPopover block={block}>
-                <StyledTriggerLine />
-            </PendantPopover>
+            {showTriggerLine ? (
+                <StyledPendantContainer ref={triggerRef}>
+                    <PendantPopover
+                        block={block}
+                        container={triggerRef.current}
+                    >
+                        <StyledTriggerLine />
+                    </PendantPopover>
+                </StyledPendantContainer>
+            ) : null}
 
             <PendantRender block={block} />
         </Container>
@@ -28,7 +44,7 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
 };
 
 export const LINE_GAP = 16;
-const TAG_GAP = 4;
+export const TAG_GAP = 4;
 
 const StyledTriggerLine = styled('div')({
     padding: `${TAG_GAP}px 0`,
@@ -43,10 +59,12 @@ const StyledTriggerLine = styled('div')({
         width: '100%',
         height: '2px',
         background: '#dadada',
-        display: 'none',
+        display: 'flex',
         position: 'absolute',
         left: '0',
         top: '4px',
+        transition: 'opacity .2s',
+        opacity: '0',
     },
     '::after': {
         content: "''",
@@ -60,18 +78,24 @@ const StyledTriggerLine = styled('div')({
         transition: 'width .3s',
     },
 });
-
-const Container = styled('div')({
-    position: 'relative',
-    paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
+const StyledPendantContainer = styled('div')({
+    width: '100px',
     '&:hover': {
-        [StyledTriggerLine.toString()]: {
-            '&::before': {
-                display: 'flex',
-            },
+        [`${StyledTriggerLine}`]: {
             '&::after': {
                 width: '100%',
             },
         },
     },
 });
+const Container = styled('div')({
+    position: 'relative',
+    padding: `${TAG_GAP * 2}px 0 ${LINE_GAP - TAG_GAP * 4}px 0`,
+    '&:hover': {
+        [`${StyledTriggerLine}`]: {
+            '&::before': {
+                opacity: '1',
+            },
+        },
+    },
+});

libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx

@@ -29,6 +29,7 @@ export const PendantHistoryPanel = ({
 
     const [history, setHistory] = useState<RecastBlockValue[]>([]);
     const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
+    const historyPanelRef = useRef<HTMLDivElement>();
     const { getValueHistory } = getRecastItemValue(block);
 
     useEffect(() => {
@@ -84,7 +85,7 @@ export const PendantHistoryPanel = ({
     }, [block, getProperties, groupBlock, recastBlock]);
 
     return (
-        <StyledPendantHistoryPanel>
+        <StyledPendantHistoryPanel ref={historyPanelRef}>
             {history.map(item => {
                 const property = getProperty(item.id);
                 return (
@@ -116,6 +117,7 @@ export const PendantHistoryPanel = ({
                             />
                         }
                         trigger="click"
+                        container={historyPanelRef.current}
                     >
                         <PendantTag
                             style={{

libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx

@@ -1,5 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Input, Option, Select, Tooltip } from '@toeverything/components/ui';
+import {
+    Input,
+    message,
+    Option,
+    Select,
+    Tooltip,
+} from '@toeverything/components/ui';
 import { HelpCenterIcon } from '@toeverything/components/icons';
 import { AsyncBlock } from '../../editor';
 
@@ -18,6 +24,7 @@ import {
     generateRandomFieldName,
     generateInitialOptions,
     getPendantConfigByType,
+    checkPendantForm,
 } from '../utils';
 import { useOnCreateSure } from './hooks';
 
@@ -74,7 +81,7 @@ export const CreatePendantPanel = ({
                     setFieldName(e.target.value);
                 }}
                 endAdornment={
-                    <Tooltip content="Help info here">
+                    <Tooltip content="Help info here" placement="top">
                         <StyledInputEndAdornment>
                             <HelpCenterIcon />
                         </StyledInputEndAdornment>
@@ -98,6 +105,17 @@ export const CreatePendantPanel = ({
                         )}
                         iconConfig={getPendantConfigByType(selectedOption.type)}
                         onSure={async (type, newPropertyItem, newValue) => {
+                            const checkResult = checkPendantForm(
+                                type,
+                                fieldName,
+                                newPropertyItem,
+                                newValue
+                            );
+
+                            if (!checkResult.passed) {
+                                await message.error(checkResult.message);
+                                return;
+                            }
                             await onCreateSure({
                                 type,
                                 newPropertyItem,

libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Input, Tooltip } from '@toeverything/components/ui';
+import { Input, message, Tooltip } from '@toeverything/components/ui';
 import { HelpCenterIcon } from '@toeverything/components/icons';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import type { AsyncBlock } from '../../editor';
@@ -8,7 +8,7 @@ import {
     type RecastBlockValue,
     type RecastMetaProperty,
 } from '../../recast-block';
-import { getPendantConfigByType } from '../utils';
+import { checkPendantForm, getPendantConfigByType } from '../utils';
 import {
     StyledPopoverWrapper,
     StyledOperationLabel,
@@ -70,7 +70,7 @@ export const UpdatePendantPanel = ({
                         setFieldName(e.target.value);
                     }}
                     endAdornment={
-                        <Tooltip content="Help info here">
+                        <Tooltip content="Help info here" placement="top">
                             <StyledInputEndAdornment>
                                 <HelpCenterIcon />
                             </StyledInputEndAdornment>
@@ -98,6 +98,17 @@ export const UpdatePendantPanel = ({
                 property={property}
                 type={property.type}
                 onSure={async (type, newPropertyItem, newValue) => {
+                    const checkResult = checkPendantForm(
+                        type,
+                        fieldName,
+                        newPropertyItem,
+                        newValue
+                    );
+
+                    if (!checkResult.passed) {
+                        await message.error(checkResult.message);
+                        return;
+                    }
                     await onUpdateSure({
                         type,
                         newPropertyItem,

libs/components/editor-core/src/block-pendant/pendant-operation-panel/hooks.ts

@@ -23,12 +23,7 @@ import {
     PendantTypes,
     type TempInformationType,
 } from '../types';
-import {
-    checkPendantForm,
-    getOfficialSelected,
-    getPendantConfigByType,
-} from '../utils';
-import { message } from '@toeverything/components/ui';
+import { getOfficialSelected, getPendantConfigByType } from '../utils';
 
 type SelectPropertyType = MultiSelectProperty | SelectProperty;
 type SureParams = {
@@ -56,18 +51,6 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
         newPropertyItem,
         newValue,
     }: SureParams) => {
-        const checkResult = checkPendantForm(
-            type,
-            fieldName,
-            newPropertyItem,
-            newValue
-        );
-
-        if (!checkResult.passed) {
-            await message.error(checkResult.message);
-            return;
-        }
-
         if (
             type === PendantTypes.MultiSelect ||
             type === PendantTypes.Select ||
@@ -181,18 +164,6 @@ export const useOnUpdateSure = ({
         newPropertyItem,
         newValue,
     }: SureParams) => {
-        const checkResult = checkPendantForm(
-            type,
-            fieldName,
-            newPropertyItem,
-            newValue
-        );
-
-        if (!checkResult.passed) {
-            await message.error(checkResult.message);
-            return;
-        }
-
         if (
             type === PendantTypes.MultiSelect ||
             type === PendantTypes.Select ||

libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx

@@ -26,6 +26,7 @@ export const PendantPopover: FC<
                     block={block}
                     endElement={
                         <AddPendantPopover
+                            container={popoverProps.container}
                             block={block}
                             onSure={() => {
                                 popoverHandlerRef.current?.setVisible(false);

libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx

@@ -105,6 +105,8 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
                         <AddPendantPopover
                             block={block}
                             iconStyle={{ marginTop: 4 }}
+                            trigger="click"
+                            // trigger={isKanbanView ? 'hover' : 'click'}
                             container={blockRenderContainerRef.current}
                         />
                     </div>

libs/components/editor-core/src/editor/commands/block-commands.ts

@@ -162,7 +162,7 @@ export class BlockCommands {
     public async moveInNewGridItem(
         blockId: string,
         gridItemId: string,
-        isBefore = false
+        type = GridDropType.left
     ) {
         const block = await this._editor.getBlockById(blockId);
         if (block) {
@@ -175,7 +175,7 @@ export class BlockCommands {
             await block.remove();
             await gridItemBlock.append(block);
             if (targetGridItemBlock && gridItemBlock) {
-                if (isBefore) {
+                if (type === GridDropType.left) {
                     await targetGridItemBlock.before(gridItemBlock);
                 } else {
                     await targetGridItemBlock.after(gridItemBlock);

libs/components/editor-core/src/editor/drag-drop/drag-drop.ts

@@ -95,6 +95,9 @@ export class DragDropManager {
     }
 
     private async _handleDropBlock(event: React.DragEvent<Element>) {
+        const targetBlock = await this._editor.getBlockById(
+            this._blockDragTargetId
+        );
         if (this._blockDragDirection !== BlockDropPlacement.none) {
             const blockId = event.dataTransfer.getData(this._blockIdKey);
             if (!(await this._canBeDrop(event))) return;
@@ -109,13 +112,24 @@ export class DragDropManager {
                     this._blockDragDirection
                 )
             ) {
-                await this._editor.commands.blockCommands.createLayoutBlock(
-                    blockId,
-                    this._blockDragTargetId,
+                const dropType =
                     this._blockDragDirection === BlockDropPlacement.left
                         ? GridDropType.left
-                        : GridDropType.right
-                );
+                        : GridDropType.right;
+                // if target is a grid item create grid item
+                if (targetBlock.type !== Protocol.Block.Type.gridItem) {
+                    await this._editor.commands.blockCommands.createLayoutBlock(
+                        blockId,
+                        this._blockDragTargetId,
+                        dropType
+                    );
+                } else {
+                    await this._editor.commands.blockCommands.moveInNewGridItem(
+                        blockId,
+                        this._blockDragTargetId,
+                        dropType
+                    );
+                }
             }
             if (
                 [
@@ -123,9 +137,6 @@ export class DragDropManager {
                     BlockDropPlacement.outerRight,
                 ].includes(this._blockDragDirection)
             ) {
-                const targetBlock = await this._editor.getBlockById(
-                    this._blockDragTargetId
-                );
                 if (targetBlock.type !== Protocol.Block.Type.grid) {
                     await this._editor.commands.blockCommands.createLayoutBlock(
                         blockId,
@@ -154,7 +165,7 @@ export class DragDropManager {
                         await this._editor.commands.blockCommands.moveInNewGridItem(
                             blockId,
                             gridItems[0].id,
-                            true
+                            GridDropType.right
                         );
                     }
                 }
@@ -347,10 +358,10 @@ export class DragDropManager {
         blockId: string
     ) {
         const { clientX, clientY } = event;
-        this._setBlockDragTargetId(blockId);
         const path = await this._editor.getBlockPath(blockId);
         const mousePoint = new Point(clientX, clientY);
         const rect = domToRect(blockDom);
+        let targetBlock: AsyncBlock = path[path.length - 1];
         /**
          * IMP: compute the level of the target block
          * future feature drag drop has level support do not delete
@@ -386,13 +397,30 @@ export class DragDropManager {
             const gridBlocks = path.filter(
                 block => block.type === Protocol.Block.Type.grid
             );
-            // limit grid block floor counts, when drag block to init grid
-            if (gridBlocks.length >= MAX_GRID_BLOCK_FLOOR) {
+            const parentBlock = path[path.length - 2];
+            // a new grid should not be grid item`s child
+            if (
+                parentBlock &&
+                parentBlock.type === Protocol.Block.Type.gridItem
+            ) {
+                targetBlock = parentBlock;
+                // gridItem`s parent must be grid block
+                const gridItemCounts = (await path[path.length - 3].children())
+                    .length;
+                if (
+                    gridItemCounts >=
+                    this._editor.configManager.grid.maxGridItemCount
+                ) {
+                    direction = BlockDropPlacement.none;
+                }
+                // limit grid block floor counts, when drag block to init grid
+            } else if (gridBlocks.length >= MAX_GRID_BLOCK_FLOOR) {
                 direction = BlockDropPlacement.none;
             }
         }
+        this._setBlockDragTargetId(targetBlock.id);
         this._setBlockDragDirection(direction);
-        return direction;
+        return { direction, block: targetBlock };
     }
 
     public handlerEditorDrop(event: React.DragEvent<Element>) {

libs/components/editor-plugins/src/menu/command-menu/Menu.tsx

@@ -18,7 +18,6 @@ import {
     menuItemsMap,
 } from './config';
 import { QueryResult } from '../../search';
-
 export type CommandMenuProps = {
     editor: Virgo;
     hooks: PluginHooks;
@@ -82,6 +81,13 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
     const checkIfShowCommandMenu = useCallback(
         async (event: React.KeyboardEvent<HTMLDivElement>) => {
             const { type, anchorNode } = editor.selection.currentSelectInfo;
+            if (!anchorNode?.id) {
+                return;
+            }
+            const activeBlock = await editor.getBlockById(anchorNode.id);
+            if (activeBlock.type === Protocol.Block.Type.page) {
+                return;
+            }
             if (event.key === '/' && type === 'Range') {
                 if (anchorNode) {
                     const text = editor.blockHelper.getBlockTextBeforeSelection(
@@ -119,12 +125,12 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
 
                             const COMMAND_MENU_HEIGHT =
                                 window.innerHeight * 0.4;
-                            const { top, left } =
+                            const { top, left, bottom } =
                                 editor.container.getBoundingClientRect();
                             if (clientHeight - rectTop <= COMMAND_MENU_HEIGHT) {
                                 setCommandMenuPosition({
                                     left: rect.left - left,
-                                    bottom: rectTop - top + 10,
+                                    bottom: bottom - rect.bottom + 24,
                                     top: 'initial',
                                 });
                             } else {

libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx

@@ -168,6 +168,12 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
 
     useEffect(() => {
         setShowMenu(false);
+
+        if (groupBlock) {
+            const unobserve = groupBlock.onUpdate(() => setGroupBlock(null));
+            return unobserve;
+        }
+        return undefined;
     }, [groupBlock]);
 
     return (

libs/components/editor-plugins/src/menu/inline-menu/Container.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { Protocol } from '@toeverything/datasource/db-service';
 import {
     MuiClickAwayListener as ClickAwayListener,
     MuiGrow as Grow,
@@ -22,8 +23,14 @@ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
 
     useEffect(() => {
         // const unsubscribe = editor.selection.onSelectionChange(info => {
-        const unsubscribe = editor.selection.onSelectEnd(info => {
+        const unsubscribe = editor.selection.onSelectEnd(async info => {
             const { type, browserSelection, anchorNode } = info;
+            if (anchorNode) {
+                const activeBlock = await editor.getBlockById(anchorNode.id);
+                if (activeBlock.type === Protocol.Block.Type.page) {
+                    return;
+                }
+            }
             if (
                 type === 'None' ||
                 !anchorNode ||

libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx

@@ -15,6 +15,7 @@ import {
     BlockDropPlacement,
     LINE_GAP,
     AsyncBlock,
+    TAG_GAP,
 } from '@toeverything/framework/virgo';
 import { Button } from '@toeverything/components/common';
 import { styled } from '@toeverything/components/ui';
@@ -78,13 +79,13 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
     };
     const bottomLineStyle = {
         ...horizontalLineStyle,
-        top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP,
+        top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP + TAG_GAP,
     };
 
     const verticalLineStyle = {
         ...lineStyle,
         width: 2,
-        height: intersectionRect.height - LINE_GAP,
+        height: intersectionRect.height - LINE_GAP + TAG_GAP,
         top: intersectionRect.y - rootRect.y,
     };
     const leftLineStyle = {
@@ -184,6 +185,14 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
         return () => sub.unsubscribe();
     }, [blockInfo, editor]);
 
+    useEffect(() => {
+        if (block?.block != null) {
+            const unobserve = block.block.onUpdate(() => setBlock(undefined));
+            return unobserve;
+        }
+        return undefined;
+    }, [block?.block]);
+
     useEffect(() => {
         const sub = lineInfo.subscribe(data => {
             if (data == null) {
@@ -220,7 +229,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
                             MENU_WIDTH -
                             MENU_BUTTON_OFFSET -
                             rootRect.left,
-                        top: block.rect.top - rootRect.top,
+                        top: block.rect.top - rootRect.top + TAG_GAP * 2,
                         opacity: visible ? 1 : 0,
                         zIndex: 1,
                     }}

libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx

@@ -10,7 +10,7 @@ import {
 import { PluginRenderRoot } from '../../utils';
 import { Subject, throttleTime } from 'rxjs';
 import { domToRect, last, Point } from '@toeverything/utils';
-const DRAG_THROTTLE_DELAY = 150;
+const DRAG_THROTTLE_DELAY = 60;
 export class LeftMenuPlugin extends BasePlugin {
     private _mousedown?: boolean;
     private _root?: PluginRenderRoot;
@@ -105,16 +105,17 @@ export class LeftMenuPlugin extends BasePlugin {
             new Point(event.clientX, event.clientY)
         );
         if (block == null || ignoreBlockTypes.includes(block.type)) return;
-        const direction = await this.editor.dragDropManager.checkBlockDragTypes(
-            event,
-            block.dom,
-            block.id
-        );
+        const { direction, block: targetBlock } =
+            await this.editor.dragDropManager.checkBlockDragTypes(
+                event,
+                block.dom,
+                block.id
+            );
         this._lineInfo.next({
             direction,
             blockInfo: {
-                block,
-                rect: block.dom.getBoundingClientRect(),
+                block: targetBlock,
+                rect: targetBlock.dom.getBoundingClientRect(),
             },
         });
     };

libs/components/editor-plugins/src/menu/reference-menu/Container.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import style9 from 'style9';
 
 import { Virgo, PluginHooks, HookType } from '@toeverything/framework/virgo';
 import {

libs/components/editor-plugins/src/menu/reference-menu/Plugin.tsx

@@ -1,33 +1,34 @@
 import { StrictMode } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
 
 import { BasePlugin } from '../../base-plugin';
+import { PluginRenderRoot } from '../../utils';
 import { ReferenceMenu } from './ReferenceMenu';
 
 const PLUGIN_NAME = 'reference-menu';
 
 export class ReferenceMenuPlugin extends BasePlugin {
-    private root?: Root;
+    private _root?: PluginRenderRoot;
 
     public static override get pluginName(): string {
         return PLUGIN_NAME;
     }
 
     protected override _onRender(): void {
-        const container = document.createElement('div');
-        // TODO: remove
-        container.classList.add(`id-${PLUGIN_NAME}`);
-        // this.editor.attachElement(this.menu_container);
-        window.document.body.appendChild(container);
-        this.root = createRoot(container);
-        this.render_reference_menu();
-    }
+        this._root = new PluginRenderRoot({
+            name: PLUGIN_NAME,
+            render: this.editor.reactRenderRoot.render,
+        });
+        this._root.mount();
 
-    private render_reference_menu(): void {
-        this.root?.render(
+        this._root?.render(
             <StrictMode>
                 <ReferenceMenu editor={this.editor} hooks={this.hooks} />
             </StrictMode>
         );
     }
+
+    public override dispose() {
+        this._root?.unmount();
+        super.dispose();
+    }
 }

libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import style9 from 'style9';
 
-import { MuiClickAwayListener } from '@toeverything/components/ui';
+import { MuiClickAwayListener, styled } from '@toeverything/components/ui';
 import { Virgo, HookType, PluginHooks } from '@toeverything/framework/virgo';
 import { Point } from '@toeverything/utils';
 
@@ -120,8 +119,7 @@ export const ReferenceMenu = ({ editor, hooks, style }: ReferenceMenuProps) => {
     };
 
     return (
-        <div
-            className={styles('referenceMenu')}
+        <ReferenceMenuWrapper
             style={{ top: position.y, left: position.x }}
             onKeyUp={handle_keyup}
         >
@@ -140,13 +138,11 @@ export const ReferenceMenu = ({ editor, hooks, style }: ReferenceMenuProps) => {
                     />
                 </div>
             </MuiClickAwayListener>
-        </div>
+        </ReferenceMenuWrapper>
     );
 };
 
-const styles = style9.create({
-    referenceMenu: {
-        position: 'absolute',
-        zIndex: 1,
-    },
+const ReferenceMenuWrapper = styled('div')({
+    position: 'absolute',
+    zIndex: 1,
 });

libs/components/editor-plugins/src/menu/reference-menu/index.ts

@@ -0,0 +1 @@
+export { ReferenceMenuPlugin } from './Plugin';

libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx

@@ -17,16 +17,20 @@ export const StatusIcon = ({ mode }: StatusIconProps) => {
 const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
     ({ theme, mode }) => {
         return {
-            width: '20px',
-            height: '20px',
+            width: '24px',
+            height: '24px',
             borderRadius: '5px',
             boxShadow: theme.affine.shadows.shadow1,
             color: theme.affine.palette.primary,
             cursor: 'pointer',
             backgroundColor: theme.affine.palette.white,
-            transform: `translateX(${mode === DocMode.doc ? 0 : 20}px)`,
+            transform: `translateX(${mode === DocMode.doc ? 0 : 30}px)`,
             transition: 'transform 300ms ease',
 
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+
             '& > svg': {
                 fontSize: '20px',
             },

libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx

@@ -2,26 +2,37 @@ import { styled } from '@toeverything/components/ui';
 
 type StatusTextProps = {
     children: string;
+    width?: string;
     active?: boolean;
     onClick?: () => void;
 };
 
-export const StatusText = ({ children, active, onClick }: StatusTextProps) => {
+export const StatusText = ({
+    children,
+    width,
+    active,
+    onClick,
+}: StatusTextProps) => {
     return (
-        <StyledText active={active} onClick={onClick}>
+        <StyledText width={width} active={active} onClick={onClick}>
             {children}
         </StyledText>
     );
 };
 
-const StyledText = styled('div')<StatusTextProps>(({ theme, active }) => {
-    return {
-        display: 'inline-flex',
-        alignItems: 'center',
-        color: theme.affine.palette.primary,
-        fontWeight: active ? '500' : '300',
-        fontSize: '15px',
-        cursor: 'pointer',
-        padding: '0 6px',
-    };
-});
+const StyledText = styled('div')<StatusTextProps>(
+    ({ theme, width, active }) => {
+        return {
+            display: 'inline-flex',
+            alignItems: 'center',
+            color: active
+                ? theme.affine.palette.primary
+                : 'rgba(62, 111, 219, 0.6)',
+            fontWeight: active ? '600' : '400',
+            fontSize: '16px',
+            lineHeight: '22px',
+            cursor: 'pointer',
+            ...(!!width && { width }),
+        };
+    }
+);

libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx

@@ -18,11 +18,14 @@ export const StatusTrack: FC<StatusTrackProps> = ({ mode, onClick }) => {
 
 const Container = styled('div')(({ theme }) => {
     return {
-        backgroundColor: theme.affine.palette.textHover,
-        borderRadius: '5px',
-        height: '30px',
-        width: '50px',
+        width: '64px',
+        height: '32px',
+        border: '1px solid #ECF1FB',
+        borderRadius: '8px',
         cursor: 'pointer',
-        padding: '5px',
+        margin: '0 8px',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 4px',
     };
 });

libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx

@@ -32,6 +32,7 @@ export const Switcher = () => {
     return (
         <StyledContainerForSwitcher>
             <StatusText
+                width={'44px'}
                 active={pageViewMode === DocMode.doc}
                 onClick={() => switchToPageView(DocMode.doc)}
             >
@@ -48,6 +49,7 @@ export const Switcher = () => {
                 }}
             />
             <StatusText
+                width={'56px'}
                 active={pageViewMode === DocMode.board}
                 onClick={() => switchToPageView(DocMode.board)}
             >
@@ -60,4 +62,5 @@ export const Switcher = () => {
 const StyledContainerForSwitcher = styled('div')({
     display: 'flex',
     alignItems: 'center',
+    pointerEvents: 'all',
 });

libs/components/layout/src/header/LayoutHeader.tsx

@@ -1,4 +1,4 @@
-import { IconButton, styled } from '@toeverything/components/ui';
+import { IconButton, styled, MuiButton } from '@toeverything/components/ui';
 import {
     LogoIcon,
     SideBarViewIcon,
@@ -6,6 +6,7 @@ import {
     SideBarViewCloseIcon,
 } from '@toeverything/components/icons';
 import { useShowSettingsSidebar } from '@toeverything/datasource/state';
+
 import { CurrentPageTitle } from './Title';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 
@@ -24,18 +25,23 @@ export const LayoutHeader = () => {
                 </FlexContainer>
                 <FlexContainer>
                     <StyledHelper>
-                        <StyledShare>Share</StyledShare>
+                        <StyledShare disabled={true}>Share</StyledShare>
                         <div style={{ margin: '0px 12px' }}>
-                            <IconButton size="large">
+                            <IconButton
+                                size="large"
+                                hoverColor={'transparent'}
+                                disabled={true}
+                                style={{ cursor: 'not-allowed' }}
+                            >
                                 <SearchIcon />
                             </IconButton>
                         </div>
 
                         <IconButton onClick={toggleInfoSidebar} size="large">
                             {showSettingsSidebar ? (
-                                <SideBarViewIcon />
-                            ) : (
                                 <SideBarViewCloseIcon />
+                            ) : (
+                                <SideBarViewIcon />
                             )}
                         </IconButton>
                     </StyledHelper>
@@ -44,10 +50,37 @@ export const LayoutHeader = () => {
                     <EditorBoardSwitcher />
                 </StyledContainerForEditorBoardSwitcher>
             </StyledHeaderRoot>
+            <StyledUnstableTips>
+                <StyledUnstableTipsText>
+                    AFFiNE now under active development, the version is
+                    UNSTABLE, please DO NOT store important data in this version
+                </StyledUnstableTipsText>
+            </StyledUnstableTips>
         </StyledContainerForHeaderRoot>
     );
 };
 
+const StyledUnstableTips = styled('div')(({ theme }) => {
+    return {
+        width: '100%',
+        height: '2em',
+        display: 'flex',
+        zIndex: theme.affine.zIndex.header,
+        backgroundColor: '#fff8c5',
+        borderWidth: '1px 0',
+        borderColor: '#e4e49588',
+        borderStyle: 'solid',
+    };
+});
+
+const StyledUnstableTipsText = styled('span')(({ theme }) => {
+    return {
+        margin: 'auto 36px',
+        width: '100%',
+        textAlign: 'center',
+    };
+});
+
 const StyledContainerForHeaderRoot = styled('div')(({ theme }) => {
     return {
         width: '100%',
@@ -92,17 +125,19 @@ const StyledHelper = styled('div')({
     alignItems: 'center',
 });
 
-const StyledShare = styled('div')({
+const StyledShare = styled('div')<{ disabled?: boolean }>({
     padding: '10px 12px',
     fontWeight: 600,
     fontSize: '14px',
-    color: '#3E6FDB',
-    cursor: 'pointer',
-
-    '&:hover': {
-        background: '#F5F7F8',
-        borderRadius: '5px',
-    },
+    cursor: 'not-allowed',
+    color: '#98ACBD',
+    textTransform: 'none',
+    /* disabled for current time */
+    // color: '#3E6FDB',
+    // '&:hover': {
+    //     background: '#F5F7F8',
+    //     borderRadius: '5px',
+    // },
 });
 
 const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
@@ -112,9 +147,10 @@ const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
     };
 });
 
-const StyledContainerForEditorBoardSwitcher = styled('div')(({ theme }) => {
-    return {
-        position: 'absolute',
-        left: '50%',
-    };
+const StyledContainerForEditorBoardSwitcher = styled('div')({
+    width: '100%',
+    position: 'absolute',
+    display: 'flex',
+    justifyContent: 'center',
+    pointerEvents: 'none',
 });

libs/components/layout/src/header/Title.tsx

@@ -3,12 +3,14 @@ import { useParams } from 'react-router-dom';
 import { Typography, styled } from '@toeverything/components/ui';
 
 import { services } from '@toeverything/datasource/db-service';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
 
 /* card.7: Demand changes, temporarily closed, see https://github.com/toeverything/AFFiNE/issues/522 */
 // import { usePageTree} from '@toeverything/components/layout';
 // import { pickPath } from './utils';
 
 export const CurrentPageTitle = () => {
+    const { user } = useUserAndSpaces();
     const params = useParams();
     const { workspace_id } = params;
     const [pageId, setPageId] = useState<string>('');
@@ -40,11 +42,11 @@ export const CurrentPageTitle = () => {
     }, [pageId, workspace_id]);
 
     useEffect(() => {
-        fetchPageTitle();
-    }, [fetchPageTitle]);
+        if (user) fetchPageTitle();
+    }, [fetchPageTitle, user]);
 
     useEffect(() => {
-        if (!workspace_id || !pageId || pageTitle === undefined)
+        if (!user || !workspace_id || !pageId || pageTitle === undefined)
             return () => {};
 
         let unobserve: () => void;
@@ -63,7 +65,7 @@ export const CurrentPageTitle = () => {
         return () => {
             // unobserve?.();
         };
-    }, [fetchPageTitle, pageId, pageTitle, workspace_id]);
+    }, [fetchPageTitle, pageId, pageTitle, user, workspace_id]);
 
     useEffect(() => {
         document.title = pageTitle || '';

libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx

@@ -100,10 +100,10 @@ export const ContainerTabs = () => {
 
 const StyledTabsTitlesContainer = styled('div')(({ theme }) => {
     return {
+        height: '60px',
         display: 'flex',
+        alignItems: 'center',
         justifyContent: 'space-between',
-        marginTop: 24,
-        marginBottom: 24,
         marginLeft: theme.affine.spacing.smSpacing,
         marginRight: theme.affine.spacing.smSpacing,
     };

libs/components/layout/src/settings-sidebar/Settings/SettingsPanel.tsx

@@ -16,7 +16,6 @@ const StyledContainerForSettingsPanel = styled('div')(({ theme }) => {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',
-        paddingTop: 44,
         paddingBottom: 44,
         height: '100%',
     };

libs/components/layout/src/settings-sidebar/Settings/use-settings.ts

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { message } from '@toeverything/components/ui';
 import { useSettingFlags, type SettingFlags } from './use-setting-flags';
 import { copyToClipboard } from '@toeverything/utils';
 import {
@@ -91,7 +92,10 @@ export const useSettings = (): SettingItem[] => {
         {
             type: 'button',
             name: 'Copy Page Link',
-            onClick: () => copyToClipboard(window.location.href),
+            onClick: () => {
+                copyToClipboard(window.location.href);
+                message.success('Page link copied successfully');
+            },
         },
         {
             type: 'separator',

libs/components/layout/src/workspace-sidebar/activities/activities.tsx

@@ -10,9 +10,10 @@ import {
 } from '@toeverything/components/ui';
 import { useNavigate } from 'react-router';
 import { formatDistanceToNow } from 'date-fns';
+import { DotIcon } from '../dot-icon';
 
 const StyledWrapper = styled('div')({
-    paddingLeft: '12px',
+    width: '100%',
     span: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
@@ -22,8 +23,8 @@ const StyledWrapper = styled('div')({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingRight: '20px',
         whiteSpace: 'nowrap',
+        paddingLeft: '12px',
         '&:hover': {
             background: '#f5f7f8',
             borderRadius: '5px',
@@ -106,6 +107,8 @@ export const Activities = () => {
                     const { id, title, updated } = item;
                     return (
                         <ListItem className="item" key={id}>
+                            <DotIcon />
+
                             <StyledItemContent
                                 onClick={() => {
                                     navigate(`/${currentSpaceId}/${id}`);

libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx

@@ -0,0 +1,9 @@
+import { PageInPageTreeIcon } from '@toeverything/components/icons';
+
+export const DotIcon = () => {
+    return (
+        <PageInPageTreeIcon
+            style={{ fill: '#98ACBD', width: '20px', height: '20px' }}
+        />
+    );
+};

libs/components/layout/src/workspace-sidebar/dot-icon/index.ts

@@ -0,0 +1 @@
+export { DotIcon } from './DotIcon';

libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx

@@ -44,7 +44,7 @@ export type DndTreeProps = {
  */
 export function DndTree(props: DndTreeProps) {
     const {
-        indentationWidth = 12,
+        indentationWidth = 20,
         collapsible,
         removable,
         showDragIndicator,

libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx

@@ -3,10 +3,8 @@ import { DndTree } from './DndTree';
 import { useDndTreeAutoUpdate } from './use-page-tree';
 
 const Root = styled('div')({
-    minWidth: 160,
-    maxWidth: 260,
-    marginLeft: 18,
-    marginRight: 6,
+    minWidth: '160px',
+    maxWidth: '276px',
 });
 
 export const PageTree = () => {

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx

@@ -1,20 +1,18 @@
-import styles from './tree-item.module.scss';
+import { AddIcon, MoreIcon } from '@toeverything/components/icons';
 import {
-    MuiSnackbar as Snackbar,
     Cascader,
     CascaderItemProps,
-    MuiDivider as Divider,
-    MuiClickAwayListener as ClickAwayListener,
     IconButton,
+    MuiClickAwayListener as ClickAwayListener,
+    MuiSnackbar as Snackbar,
     styled,
 } from '@toeverything/components/ui';
-import React from 'react';
-import { NavLink, useNavigate } from 'react-router-dom';
-import { copyToClipboard } from '@toeverything/utils';
 import { services, TemplateFactory } from '@toeverything/datasource/db-service';
-import { NewFromTemplatePortal } from './NewFromTemplatePortal';
 import { useFlag } from '@toeverything/datasource/feature-flags';
-import { MoreIcon, AddIcon } from '@toeverything/components/icons';
+import { copyToClipboard } from '@toeverything/utils';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { TreeItemMoreActions } from './styles';
 
 const MESSAGES = {
     COPY_LINK_SUCCESS: 'Copyed link to clipboard',
@@ -47,6 +45,10 @@ function DndTreeItemMoreActions(props: ActionsProps) {
         set_alert_open(false);
     };
     const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (anchorEl) {
+            setAnchorEl(null);
+            return;
+        }
         setAnchorEl(event.currentTarget);
     };
     const handleClose = () => {
@@ -246,10 +248,11 @@ function DndTreeItemMoreActions(props: ActionsProps) {
     return (
         <ClickAwayListener onClickAway={() => handleClose()}>
             <div>
-                <div className={styles['TreeItemMoreActions']}>
+                <TreeItemMoreActions>
                     <StyledAction>
                         <IconButton
                             size="small"
+                            hoverColor="#E0E6EB"
                             onClick={handle_new_child_page}
                         >
                             <AddIcon />
@@ -262,14 +265,15 @@ function DndTreeItemMoreActions(props: ActionsProps) {
                             <MoreIcon />
                         </IconButton>
                     </StyledAction>
-                </div>
+                </TreeItemMoreActions>
+
                 <Cascader
                     items={menuList}
                     anchorEl={anchorEl}
                     placement="right-start"
                     open={open}
                     onClose={handleClose}
-                ></Cascader>
+                />
                 <Snackbar
                     anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
                     open={alert_open}

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx

@@ -1,20 +1,23 @@
-import React, {
-    forwardRef,
-    type CSSProperties,
-    type HTMLAttributes,
-} from 'react';
-import { useParams, Link } from 'react-router-dom';
-import cx from 'clsx';
-import { CloseIcon } from '@toeverything/components/common';
 import {
     ArrowDropDownIcon,
     ArrowRightIcon,
 } from '@toeverything/components/icons';
+import { forwardRef, type HTMLAttributes } from 'react';
+import { useParams } from 'react-router-dom';
 
-import styles from './tree-item.module.scss';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 
 import MoreActions from './MoreActions';
+import { DotIcon } from '../../dot-icon';
+import {
+    ActionButton,
+    Counter,
+    TextLink,
+    TreeItemContainer,
+    TreeItemContent,
+    Wrapper,
+} from './styles';
+
 export type TreeItemProps = {
     /** The main text to display on this line */
     value: string;
@@ -61,54 +64,40 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         },
         ref
     ) => {
-        const { workspace_id } = useParams();
+        const { workspace_id, page_id } = useParams();
         const BooleanPageTreeItemMoreActions = useFlag(
             'BooleanPageTreeItemMoreActions',
             true
         );
+
         return (
-            <li
+            <Wrapper
                 ref={wrapperRef}
-                className={cx(
-                    styles['Wrapper'],
-                    clone && styles['clone'],
-                    ghost && styles['ghost'],
-                    indicator && styles['indicator'],
-                    disableSelection && styles['disableSelection'],
-                    disableInteraction && styles['disableInteraction']
-                )}
-                style={
-                    {
-                        '--spacing': `${indentationWidth * depth}px`,
-                        paddingTop: 0,
-                        paddingBottom: 0,
-                    } as CSSProperties
-                }
+                clone={clone}
+                ghost={ghost}
+                disableSelection={disableSelection}
+                disableInteraction={disableInteraction}
+                spacing={`${indentationWidth * depth + 12}px`}
+                active={pageId === page_id}
                 {...props}
             >
-                <div
-                    ref={ref}
-                    className={styles['TreeItem']}
-                    style={style}
-                    title={value}
-                >
-                    <Action onClick={onCollapse}>
-                        {childCount !== 0 &&
-                            (collapsed ? (
+                <TreeItemContainer ref={ref} style={style} title={value}>
+                    <ActionButton tabIndex={0} onClick={onCollapse}>
+                        {childCount !== 0 ? (
+                            collapsed ? (
                                 <ArrowRightIcon />
                             ) : (
                                 <ArrowDropDownIcon />
-                            ))}
-                    </Action>
+                            )
+                        ) : (
+                            <DotIcon />
+                        )}
+                    </ActionButton>
 
-                    <div className={styles['ItemContent']}>
-                        <Link
-                            className={styles['Text']}
-                            {...handleProps}
-                            to={`/${workspace_id}/${pageId}`}
-                        >
+                    <TreeItemContent {...handleProps}>
+                        <TextLink to={`/${workspace_id}/${pageId}`}>
                             {value}
-                        </Link>
+                        </TextLink>
                         {BooleanPageTreeItemMoreActions && (
                             <MoreActions
                                 workspaceId={workspace_id}
@@ -119,71 +108,11 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
 
                         {/*{!clone && onRemove && <Remove onClick={onRemove} />}*/}
                         {clone && childCount && childCount > 1 ? (
-                            <span className={styles['Count']}>
-                                {childCount}
-                            </span>
+                            <Counter>{childCount}</Counter>
                         ) : null}
-                    </div>
-                </div>
-            </li>
+                    </TreeItemContent>
+                </TreeItemContainer>
+            </Wrapper>
         );
     }
 );
-
-export interface ActionProps extends React.HTMLAttributes<HTMLButtonElement> {
-    active?: {
-        fill: string;
-        background: string;
-    };
-    // cursor?: CSSProperties['cursor'];
-    cursor?: 'pointer' | 'grab';
-}
-
-/** Customizable buttons */
-export function Action({
-    active,
-    className,
-    cursor,
-    style,
-    ...props
-}: ActionProps) {
-    return (
-        <button
-            {...props}
-            className={cx(styles['Action'], className)}
-            tabIndex={0}
-            style={
-                {
-                    ...style,
-                    '--fill': active?.fill,
-                    '--background': active?.background,
-                } as CSSProperties
-            }
-        />
-    );
-}
-
-export function Handle(props: ActionProps) {
-    return (
-        <Action cursor="grab" data-cypress="draggable-handle" {...props}>
-            <ArrowDropDownIcon />
-        </Action>
-    );
-}
-
-export function Remove(props: ActionProps) {
-    return (
-        <Action
-            {...props}
-            active={{
-                fill: 'rgba(255, 70, 70, 0.95)',
-                background: 'rgba(255, 70, 70, 0.1)',
-            }}
-        >
-            <CloseIcon style={{ fontSize: 12 }} />
-            {/* <svg width="8" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-                <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
-            </svg> */}
-        </Action>
-    );
-}

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts

@@ -1,9 +1,49 @@
-.Wrapper {
+import { styled } from '@toeverything/components/ui';
+import { Link } from 'react-router-dom';
+
+export const TreeItemContainer = styled('div')`
     box-sizing: border-box;
-    padding-left: var(--spacing);
+    display: flex;
+    align-items: center;
+    color: #4c6275;
+`;
+
+export const Wrapper = styled('li')<{
+    spacing: string;
+    clone?: boolean;
+    ghost?: boolean;
+    indicator?: boolean;
+    disableSelection?: boolean;
+    disableInteraction?: boolean;
+    active?: boolean;
+}>`
+    box-sizing: border-box;
+    padding-left: ${({ spacing }) => spacing};
     list-style: none;
-    padding: 6px 0;
     font-size: 14px;
+    background-color: ${({ active }) => (active ? '#f5f7f8' : 'transparent')};
+    border-radius: 5px;
+
+    ${({ clone, disableSelection }) =>
+        (clone || disableSelection) &&
+        `width: 100%;
+        .Text,
+        .Count {
+            user-select: none;
+            -webkit-user-select: none;
+        }`}
+
+    ${({ indicator }) =>
+        indicator &&
+        `width: 100%;
+        .Text,
+        .Count {
+            user-select: none;
+            -webkit-user-select: none;
+        }`}
+
+    ${({ disableInteraction }) => disableInteraction && `pointer-events: none;`}
+
     &:hover {
         background: #f5f7f8;
         border-radius: 5px;
@@ -16,7 +56,7 @@
         margin-top: 5px;
         pointer-events: none;
 
-        .TreeItem {
+        ${TreeItemContainer} {
             padding-right: 20px;
             border-radius: 4px;
             box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
@@ -30,7 +70,7 @@
             z-index: 1;
             margin-bottom: -1px;
 
-            .TreeItem {
+            ${TreeItemContainer} {
                 position: relative;
                 padding: 0;
                 height: 8px;
@@ -61,56 +101,14 @@
             opacity: 0.5;
         }
 
-        .TreeItem > * {
+        ${TreeItemContainer} > * {
             box-shadow: none;
             background-color: transparent;
         }
     }
-}
+`;
 
-.TreeItem {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    color: #4c6275;
-}
-
-.ItemContent {
-    box-sizing: border-box;
-    width: 100%;
-    height: 32px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    color: #4c6275;
-    padding-right: 0.5rem;
-    overflow: hidden;
-
-    .TreeItemMoreActions {
-        visibility: hidden;
-        cursor: pointer;
-    }
-    &:hover {
-        .TreeItemMoreActions {
-            visibility: visible;
-            display: block;
-        }
-    }
-}
-
-.Text {
-    flex-grow: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    cursor: pointer;
-    appearance: none;
-    color: unset;
-    text-decoration: none;
-}
-
-.Count {
+export const Counter = styled('span')`
     position: absolute;
     top: 8px;
     right: 0;
@@ -124,36 +122,13 @@
     font-size: 0.9rem;
     font-weight: 500;
     color: #fff;
-}
+`;
 
-.disableInteraction {
-    pointer-events: none;
-}
-
-.disableSelection,
-.clone {
-    width: 100%;
-    .Text,
-    .Count {
-        user-select: none;
-        -webkit-user-select: none;
-    }
-}
-
-.Collapse {
-    svg {
-        transition: transform 250ms ease;
-    }
-
-    &.collapsed svg {
-        transform: rotate(-90deg);
-    }
-}
-
-.Action {
+export const ActionButton = styled('button')<{
+    background?: string;
+    fill?: string;
+}>`
     display: flex;
-    width: 12px;
-    padding: 0 15px;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
@@ -167,18 +142,20 @@
     -webkit-tap-highlight-color: transparent;
 
     svg {
+        width: 20px;
+        height: 20px;
         flex: 0 0 auto;
         margin: auto;
-        height: 100%;
         overflow: visible;
         fill: #919eab;
     }
 
     &:active {
-        background-color: var(--background, rgba(0, 0, 0, 0.05));
+        background-color: ${({ background }) =>
+            background ?? 'rgba(0, 0, 0, 0.05)'};
 
         svg {
-            fill: var(--fill, #788491);
+            fill: ${({ fill }) => fill ?? '#788491'};
         }
     }
 
@@ -186,4 +163,46 @@
         outline: none;
         box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
     }
-}
+`;
+
+export const TreeItemMoreActions = styled('div')`
+    display: block;
+    visibility: hidden;
+`;
+
+export const TextLink = styled(Link, {
+    shouldForwardProp: (prop: string) => !['active'].includes(prop),
+})<{ active?: boolean }>`
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
+    appearance: none;
+    text-decoration: none;
+    user-select: none;
+    color: #4c6275;
+`;
+
+export const TreeItemContent = styled('div')`
+    box-sizing: border-box;
+    width: 100%;
+    height: 32px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: #4c6275;
+    padding-right: 12px;
+    overflow: hidden;
+
+    &:hover {
+        ${TreeItemMoreActions} {
+            visibility: visible;
+            cursor: pointer;
+        }
+    }
+`;

libs/components/ui/src/select/Select.tsx

@@ -12,6 +12,7 @@ import SelectUnstyled, {
 } from '@mui/base/SelectUnstyled';
 /* eslint-disable no-restricted-imports */
 import PopperUnstyled from '@mui/base/PopperUnstyled';
+import { ArrowDropDownIcon } from '@toeverything/components/icons';
 import { styled } from '../styled';
 
 type ExtendSelectProps = {
@@ -41,20 +42,29 @@ export const Select = forwardRef(function CustomSelect<TValue>(
     const { width = '100%', style, listboxStyle, placeholder } = props;
     const components: SelectUnstyledProps<TValue>['components'] = {
         // Root: generateStyledRoot({ width, ...style }),
-        Root: forwardRef((rootProps, rootRef) => (
-            <StyledRoot
-                ref={rootRef}
-                {...rootProps}
-                style={{
-                    width,
-                    ...style,
-                }}
-            >
-                {rootProps.children || (
-                    <StyledPlaceholder>{placeholder}</StyledPlaceholder>
-                )}
-            </StyledRoot>
-        )),
+        Root: forwardRef((rootProps, rootRef) => {
+            const {
+                ownerState: { open },
+            } = rootProps;
+
+            return (
+                <StyledRoot
+                    ref={rootRef}
+                    {...rootProps}
+                    style={{
+                        width,
+                        ...style,
+                    }}
+                >
+                    {rootProps.children || (
+                        <StyledPlaceholder>{placeholder}</StyledPlaceholder>
+                    )}
+                    <StyledSelectedArrowWrapper open={open}>
+                        <ArrowDropDownIcon />
+                    </StyledSelectedArrowWrapper>
+                </StyledRoot>
+            );
+        }),
         Listbox: forwardRef((listboxProps, listboxRef) => (
             <StyledListbox
                 ref={listboxRef}
@@ -73,6 +83,20 @@ export const Select = forwardRef(function CustomSelect<TValue>(
         RefAttributes<HTMLUListElement>
 ) => JSX.Element;
 
+const StyledSelectedArrowWrapper = styled('div')<{ open: boolean }>(
+    ({ open }) => ({
+        position: 'absolute',
+        top: '0',
+        bottom: '0',
+        right: '12px',
+        margin: 'auto',
+        lineHeight: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        transform: `rotate(${open ? '180deg' : '0'})`,
+    })
+);
+
 const StyledRoot = styled('div')(({ theme }) => ({
     height: '32px',
     border: `1px solid ${theme.affine.palette.borderColor}`,
@@ -95,18 +119,6 @@ const StyledRoot = styled('div')(({ theme }) => ({
 
     [`&.${selectUnstyledClasses.expanded}`]: {
         borderColor: `${theme.affine.palette.primary}`,
-        '&::after': {
-            content: '"▴"',
-        },
-    },
-    '&::after': {
-        content: '"▾"',
-        position: ' absolute',
-        top: '0',
-        bottom: '0',
-        right: '12px',
-        margin: 'auto',
-        lineHeight: '32px',
     },
 }));
 

libs/components/ui/src/theme/theme.ts

@@ -173,26 +173,34 @@ export const Theme = {
         body1: {
             fontSize: '16px',
             lineHeight: '22px',
+            fontWeight: 400,
+            fontFamily: 'PingFang SC',
+            color: '#3A4C5C',
         },
         h1: {
             fontSize: '28px',
             lineHeight: '40px',
+            fontWeight: 600,
         },
         h2: {
             fontSize: '24px',
             lineHeight: '34px',
+            fontWeight: 600,
         },
         h3: {
             fontSize: '20px',
             lineHeight: '28px',
+            fontWeight: 600,
         },
         h4: {
             fontSize: '16px',
             lineHeight: '22px',
+            fontWeight: 600,
         },
         page: {
             fontSize: '36px',
             lineHeight: '44px',
+            fontWeight: 600,
         },
         callout: {
             fontSize: '36px',
@@ -221,6 +229,7 @@ export const Theme = {
         articleTitle: {
             fontSize: '36px',
             lineHeight: '54px',
+            fontWeight: 600,
         },
     },
     shadows: {