Merge remote-tracking branch 'origin/master' into develop

.all-contributorsrc

@@ -1,5 +1,5 @@
 {
-    "projectName": "Ligo-Virgo",
+    "projectName": "toeverything",
     "projectOwner": "toeverything",
     "repoType": "github",
     "repoHost": "https://github.com",
@@ -25,7 +25,7 @@
             "login": "tzhangchi",
             "name": "Chi Zhang",
             "avatar_url": "https://avatars.githubusercontent.com/u/5910926?v=4",
-            "profile": "https://zhangchi.blog.csdn.net/",
+            "profile": "http://zhangchi.page/",
             "contributions": [
                 "code",
                 "doc"
@@ -33,7 +33,7 @@
         },
         {
             "login": "alt1o",
-            "name": "alt1o",
+            "name": "wang xinglong",
             "avatar_url": "https://avatars.githubusercontent.com/u/21084335?v=4",
             "profile": "https://github.com/alt1o",
             "contributions": [
@@ -43,7 +43,7 @@
         },
         {
             "login": "DiamondThree",
-            "name": "Diamond",
+            "name": "DiamondThree",
             "avatar_url": "https://avatars.githubusercontent.com/u/24630517?v=4",
             "profile": "https://github.com/DiamondThree",
             "contributions": [
@@ -63,7 +63,7 @@
         },
         {
             "login": "zuoxiaodong0815",
-            "name": "zuoxiaodong0815",
+            "name": "xiaodong zuo",
             "avatar_url": "https://avatars.githubusercontent.com/u/53252747?v=4",
             "profile": "https://github.com/zuoxiaodong0815",
             "contributions": [
@@ -73,7 +73,7 @@
         },
         {
             "login": "SaikaSakura",
-            "name": "SaikaSakura",
+            "name": "MingLIang Wang",
             "avatar_url": "https://avatars.githubusercontent.com/u/11530942?v=4",
             "profile": "https://github.com/SaikaSakura",
             "contributions": [
@@ -92,10 +92,10 @@
             ]
         },
         {
-            "login": "tuluffy",
+            "login": "mitsuhatu",
-            "name": "tuluffy",
+            "name": "mitsuhatu",
-            "avatar_url": "https://avatars.githubusercontent.com/u/26808339?v=4",
+            "avatar_url": "https://avatars.githubusercontent.com/u/110213079?v=4",
-            "profile": "https://tuluffy.github.io/angular.github.io/",
+            "profile": "https://github.com/mitsuhatu",
             "contributions": [
                 "code",
                 "doc"

.github/deployment/Caddyfile-affine

@@ -0,0 +1,28 @@
+:3000 {
+        root /* ./dist
+
+        file_server {
+                precompressed br
+        }
+
+        encode {
+                zstd
+                gzip 9
+        }
+
+        @notStatic {
+                not path /*.css
+                not path /*.js
+                not path /*.png
+                not path /*.jpg
+                not path /*.svg
+                not path /*.ttf
+                not path /*.eot
+                not path /*.woff
+                not path /*.woff2
+        }
+
+        handle @notStatic {
+                try_files {path} /index.html
+        }
+}

.github/deployment/Dockerfile-affine

@@ -0,0 +1,21 @@
+FROM node:16-alpine as builder
+WORKDIR /app
+COPY . .
+RUN apk add g++ make python3 git libpng-dev
+RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:local
+
+FROM node:16-alpine as relocate
+WORKDIR /app
+COPY --from=builder /app/dist/apps/ligo-virgo ./dist
+COPY --from=builder /app/.github/deployment/Caddyfile-affine ./Caddyfile
+RUN rm ./dist/*.txt
+
+# =============
+# AFFiNE image
+# =============
+FROM caddy:2.4.6-alpine as AFFiNE
+WORKDIR /app
+COPY --from=relocate /app .
+
+EXPOSE 3000
+CMD ["caddy", "run"]

.github/deployment/Dockerfile-keck

@@ -1,7 +1,7 @@
 FROM node:16-alpine as builder
 WORKDIR /app
 COPY . .
-RUN apk add g++ make python3 git
+RUN apk add g++ make python3 git libpng-dev
 RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:keck
 
 FROM node:16-alpine as node_modules

.github/deployment/Dockerfile-lisa

@@ -1,13 +1,13 @@
 FROM node:16-alpine as builder
 WORKDIR /app
 COPY . .
-RUN apk add g++ make python3 git
+RUN apk add g++ make python3 git libpng-dev
 RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build
 
 FROM node:16-alpine as relocate
 WORKDIR /app
 COPY --from=builder /app/dist/apps/ligo-virgo ./dist
-COPY --from=builder /app/Caddyfile ./
+COPY --from=builder /app/.github/deployment/Caddyfile-lisa ./Caddyfile
 RUN rm ./dist/*.txt
 
 # =============

.github/deployment/Dockerfile-venus

@@ -1,13 +1,13 @@
 FROM node:16-alpine as builder
 WORKDIR /app
 COPY . .
-RUN apk add g++ make python3 git
+RUN apk add g++ make python3 git libpng-dev
 RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:venus
 
 FROM node:16-alpine as relocate
 WORKDIR /app
 COPY --from=builder /app/dist/apps/venus ./dist
-COPY --from=builder /app/Caddyfile-venus ./Caddyfile
+COPY --from=builder /app/.github/deployment/Caddyfile-venus ./Caddyfile
 RUN rm ./dist/*.txt
 
 # =============

.github/workflows/affine.yml

@@ -0,0 +1,57 @@
+name: Build AFFiNE-Local
+
+on:
+    push:
+        branches: [master]
+    pull_request:
+        branches: [master]
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+# See https://docs.github.com/en/actions/using-jobs/using-concurrency
+concurrency:
+    # The concurrency group contains the workflow name and the branch name for
+    # pull requests or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+env:
+    REGISTRY: ghcr.io
+    NAMESPACE: toeverything
+    AFFINE_IMAGE_NAME: AFFiNE
+    IMAGE_TAG_LATEST: nightly-latest
+
+jobs:
+    ligo-virgo:
+        runs-on: self-hosted
+        environment: development
+        permissions:
+            contents: read
+            packages: write
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+
+            - name: Log in to the Container registry
+              uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Extract metadata (tags, labels) for Docker (AFFiNE-Local)
+              id: meta_affine
+              uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.AFFINE_IMAGE_NAME }}
+                  tags: ${{ env.IMAGE_TAG_LATEST }}
+
+            - name: Build and push Docker image (AFFINE-Local)
+              uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+              with:
+                  context: .
+                  file: ./.github/deployment/Dockerfile-affine
+                  push: ${{ github.ref == 'refs/heads/master' && true || false }}
+                  tags: ${{ steps.meta_affine.outputs.tags }}
+                  labels: ${{ steps.meta_affine.outputs.labels }}
+                  target: AFFiNE

.github/workflows/keck.yml

@@ -6,11 +6,13 @@ on:
         branches: [master]
         paths:
             - 'apps/keck/**'
+            - '.github/deployment'
             - '.github/workflows/keck.yml'
     pull_request:
         branches: [master]
         paths:
             - 'apps/keck/**'
+            - '.github/deployment'
             - '.github/workflows/keck.yml'
 
 # Cancels all previous workflow runs for pull requests that have not completed.
@@ -60,7 +62,7 @@ jobs:
               uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
               with:
                   context: .
-                  file: ./Dockerfile-keck
+                  file: ./.github/deployment/Dockerfile-keck
                   push: ${{ github.ref == 'refs/heads/field' && true || false }}
                   tags: ${{ steps.meta_keck.outputs.tags }}
                   labels: ${{ steps.meta_keck.outputs.labels }}

.github/workflows/lisa.yml

@@ -53,6 +53,7 @@ jobs:
               uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
               with:
                   context: .
+                  file: ./.github/deployment/Dockerfile-lisa
                   push: ${{ github.ref == 'refs/heads/master' && true || false }}
                   tags: ${{ steps.meta_lisa.outputs.tags }}
                   labels: ${{ steps.meta_lisa.outputs.labels }}

.github/workflows/venus.yml

@@ -5,6 +5,7 @@ on:
         branches: [master]
         paths:
             - 'apps/venus/**'
+            - '.github/deployment'
             - '.github/workflows/venus.yml'
     pull_request:
         branches: [master]
@@ -59,7 +60,7 @@ jobs:
               uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
               with:
                   context: .
-                  file: ./Dockerfile-venus
+                  file: ./.github/deployment/Dockerfile-venus
                   push: ${{ github.ref == 'refs/heads/master' && true || false }}
                   tags: ${{ steps.meta_venus.outputs.tags }}
                   labels: ${{ steps.meta_venus.outputs.labels }}

README.md

@@ -14,7 +14,7 @@ Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Fre
 
 <!--
 Make New Badge Pattern badges inline
-See https://github.com/all-contributors/all-contributors/issues/361#issuecomment-637166066
+See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
 -->
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 
@@ -38,21 +38,27 @@ See https://github.com/all-contributors/all-contributors/issues/361#issuecomment
     <a href="https://t.me/affineworkos"><b>Telegram</b></a>
 </p>
 
-<p align="center"><img width="1920" alt="affine_screen" src="https://user-images.githubusercontent.com/79301703/182363099-48b479c3-dc26-4fc3-8f9b-45f9cf358f9a.png"><p/>
+<p align="center"><img width="1920" alt="affine_screen" src="https://user-images.githubusercontent.com/21084335/182552060-972cac0e-6258-4ccb-85bd-3bb466c30ccd.png"><p/>
 
 # Stay Up-to-Date
 
 ![952cd7a5-70fe-48ab-b74f-23981d94d2c5](https://user-images.githubusercontent.com/79301703/182365526-df074c64-cee4-45f6-b8e0-b912f17332c6.gif)
 
+# How to use
+
+If you have experience in front-end development, please [refer to here](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine); if you want to experience our latest version, please wait a moment, we will launch a web version in the near future
+
 # Table of contents
 
 -   [Stay Up-to-Date](#stay-up-to-date)
+-   [How to Use](#how-to-use)
 -   [Table of contents](#table-of-contents)
     -   [Shape your page](#shape-your-page)
     -   [Plan your task](#plan-your-task)
     -   [Sort your knowledge](#sort-your-knowledge)
     -   [Create your story](#create-your-story)
--   [Getting Started with development](#getting-started-with-development)
+-   [Documentation](#documentation)
+    -   [Getting Started with development](#getting-started-with-development)
 -   [Roadmap](#roadmap)
 -   [Releases](#releases)
 -   [Feature requests](#feature-requests)
@@ -60,6 +66,7 @@ See https://github.com/all-contributors/all-contributors/issues/361#issuecomment
 -   [The Philosophy of AFFiNE](#the-philosophy-of-affine)
 -   [Community](#community)
 -   [Contributors](#contributors)
+-   [Acknowledgments](#acknowledgments)
 -   [License](#license)
 
 ## Shape your page
@@ -80,9 +87,13 @@ We want your data always to be yours, and we don't want to make any sacrifice to
 Collaboration isn't only necessary for teams -- you may take and insert pics on your phone, then edit them on your desktop, and share them with your collaborators.
 Affine is fully built with web technologies so that consistency and accessibility are always guaranteed on Mac, Windows and Linux. The local file system support will be available when version 0.0.1beta is released.
 
-# Getting Started with development
+# Documentation
 
-Please view the [documentation](https://affine.gitbook.io/affine/) in Contribute-to-AFFiNE/Software-Contributions/Environment-setup.
+Please view the [documentation](https://affine.gitbook.io/affine/)
+
+## Getting Started with development
+
+Please view the path Contribute-to-AFFiNE/Software-Contributions/Quick-Start in documentation.
 
 # Roadmap
 
@@ -134,9 +145,17 @@ We would like to give special thanks to the innovators and pioneers who greatly
 
 We would also like to give thanks to open-source projects that make affine possible:
 
--   Yjs & Yrs
+-   [Yjs](https://github.com/yjs/yjs) & [Yrs](https://github.com/y-crdt/y-crdt) -- Fundamental support of CRDTs for our implements on state management and data sync.
--   React
+-   [React](https://github.com/facebook/react) -- View layer support and web GUI framework.
--   Rust
+-   [Rust](https://github.com/rust-lang/rust) -- High performance language that extends the ability and availability of our real-time backend, JWST.
+-   [Fossil](https://www2.fossil-scm.org/home/doc/trunk/www/index.wiki) -- Source code management tool made with CRDTs which inspired our design on block data structure.
+-   [slatejs](https://github.com/ianstormtaylor/slate) -- Customizable rich-text editor.
+-   [Jotai](https://github.com/pmndrs/jotai) -- Minimal state management tool for frontend.
+-   [Tldraw](https://github.com/tldraw/tldraw) -- Excellent drawing board.
+-   [MUI](https://github.com/mui/material-ui) -- Our most used graphic UI component library.
+-   Other [dependancies](https://github.com/toeverything/AFFiNE/network/dependencies)
+
+Thanks a lot to the community for providing such powerful and simple libraries, so that we can focus more on the implementation of the product logic, and we hope that in the future our projects will also provide a more easy-to-use knowledge base for everyone.
 
 # Community
 
@@ -152,16 +171,16 @@ For help, discussion about best practices, or any other conversation that would
 <table>
   <tr>
     <td align="center"><a href="https://darksky.eu.org/"><img src="https://avatars.githubusercontent.com/u/25152247?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DarkSky</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=darkskygit" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=darkskygit" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/tzhangchi"><img src="https://avatars.githubusercontent.com/u/5910926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chi Zhang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://zhangchi.page/"><img src="https://avatars.githubusercontent.com/u/5910926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chi Zhang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/alt1o"><img src="https://avatars.githubusercontent.com/u/21084335?v=4?s=100" width="100px;" alt=""/><br /><sub><b>alt1o</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/alt1o"><img src="https://avatars.githubusercontent.com/u/21084335?v=4?s=100" width="100px;" alt=""/><br /><sub><b>wang xinglong</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/DiamondThree"><img src="https://avatars.githubusercontent.com/u/24630517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Diamond</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/DiamondThree"><img src="https://avatars.githubusercontent.com/u/24630517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DiamondThree</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Documentation">📖</a></td>
     <td align="center"><a href="https://lawvs.github.io/profile/"><img src="https://avatars.githubusercontent.com/u/18554747?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Whitewater</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=lawvs" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=lawvs" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/zuoxiaodong0815"><img src="https://avatars.githubusercontent.com/u/53252747?v=4?s=100" width="100px;" alt=""/><br /><sub><b>zuoxiaodong0815</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/zuoxiaodong0815"><img src="https://avatars.githubusercontent.com/u/53252747?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xiaodong zuo</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/SaikaSakura"><img src="https://avatars.githubusercontent.com/u/11530942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SaikaSakura</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/SaikaSakura"><img src="https://avatars.githubusercontent.com/u/11530942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>MingLIang Wang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Documentation">📖</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/QiShaoXuan"><img src="https://avatars.githubusercontent.com/u/22772830?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Qi</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=QiShaoXuan" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=QiShaoXuan" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://tuluffy.github.io/angular.github.io/"><img src="https://avatars.githubusercontent.com/u/26808339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tuluffy</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tuluffy" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tuluffy" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/mitsuhatu"><img src="https://avatars.githubusercontent.com/u/110213079?v=4?s=100" width="100px;" alt=""/><br /><sub><b>mitsuhatu</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=mitsuhatu" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=mitsuhatu" title="Documentation">📖</a></td>
     <td align="center"><a href="https://shockwave.me/"><img src="https://avatars.githubusercontent.com/u/15013925?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Austaras</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Austaras" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=Austaras" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/uptonking?tab=repositories&type=source"><img src="https://avatars.githubusercontent.com/u/11391549?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jin Yao</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=uptonking" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=uptonking" title="Documentation">📖</a></td>
   </tr>

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -1,16 +1,9 @@
 /* eslint-disable filename-rules/match */
-import {
+import { useEffect, useRef, type UIEvent, useState } from 'react';
-    useEffect,
-    useRef,
-    type UIEvent,
-    useState,
-    useLayoutEffect,
-} from 'react';
 import { useParams } from 'react-router';
 import {
     MuiBox as Box,
     MuiCircularProgress as CircularProgress,
-    MuiDivider as Divider,
     styled,
 } from '@toeverything/components/ui';
 import { AffineEditor } from '@toeverything/components/affine-editor';
@@ -31,7 +24,7 @@ import { WorkspaceName } from './workspace-name';
 import { CollapsiblePageTree } from './collapsible-page-tree';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 import { type BlockEditor } from '@toeverything/components/editor-core';
-
+import { Tabs } from './components/tabs';
 type PageProps = {
     workspace: string;
 };
@@ -54,11 +47,11 @@ export function Page(props: PageProps) {
                 }
             );
 
-            // await services.api.userConfig.addRecentPage(
+            await services.api.userConfig.addRecentPage(
-            //     props.workspace,
+                props.workspace,
-            //     user.id,
+                user.id,
-            //     page_id
+                page_id
-            // );
+            );
             await services.api.editorBlock.clearUndoRedo(props.workspace);
         };
         updateRecentPages();
@@ -80,7 +73,9 @@ export function Page(props: PageProps) {
                     onMouseLeave={() => setSpaceSidebarVisible(false)}
                 >
                     <WorkspaceName />
-                    <Divider light={true} sx={{ my: 1, margin: '6px 0px' }} />
+
+                    <Tabs />
+
                     <WorkspaceSidebarContent>
                         <div>
                             {dailyNotesFlag && (
@@ -92,14 +87,14 @@ export function Page(props: PageProps) {
                             )}
                             <div>
                                 <CollapsibleTitle
-                                    title="Activities"
+                                    title="ACTIVITIES"
                                     initialOpen={false}
                                 >
                                     <Activities />
                                 </CollapsibleTitle>
                             </div>
                             <div>
-                                <CollapsiblePageTree title="Page Tree">
+                                <CollapsiblePageTree title="PAGES">
                                     {page_id ? <PageTree /> : null}
                                 </CollapsiblePageTree>
                             </div>
@@ -146,7 +141,7 @@ const EditorContainer = ({
             obv.observe(scrollContainerRef.current);
             return () => obv.disconnect();
         }
-    });
+    }, [setPageClientWidth]);
 
     return (
         <StyledEditorContainer
@@ -198,7 +193,7 @@ const LigoLeftContainer = styled('div')({
     position: 'relative',
 });
 
-const WorkspaceSidebar = styled('div')(({ hidden }) => ({
+const WorkspaceSidebar = styled('div')(({ theme }) => ({
     position: 'absolute',
     bottom: '48px',
     top: '12px',
@@ -208,7 +203,7 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
     width: 300,
     minWidth: 300,
     borderRadius: '0px 10px 10px 0px',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     backgroundColor: '#FFFFFF',
     transitionProperty: 'left',
     transitionDuration: '0.35s',
@@ -219,4 +214,5 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
 const WorkspaceSidebarContent = styled('div')({
     flex: 'auto',
     overflow: 'hidden auto',
+    marginTop: '18px',
 });

apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx

@@ -1,34 +1,34 @@
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import clsx from 'clsx';
-import style9 from 'style9';
 import {
     MuiBox as Box,
     MuiButton as Button,
     MuiCollapse as Collapse,
     MuiIconButton as IconButton,
+    styled,
 } from '@toeverything/components/ui';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+    ArrowDropDownIcon,
-
+    ArrowRightIcon,
+} from '@toeverything/components/icons';
 import { services } from '@toeverything/datasource/db-service';
-import { NewpageIcon } from '@toeverything/components/common';
 import {
     usePageTree,
     useCalendarHeatmap,
 } from '@toeverything/components/layout';
+import { AddIcon } from '@toeverything/components/icons';
 
-const styles = style9.create({
+const StyledContainer = styled('div')({
-    ligoButton: {
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const StyledBtn = styled('div')({
+    color: '#98ACBD',
     textTransform: 'none',
-    },
+    fontSize: '12px',
-    newPage: {
+    fontWeight: '600',
-        color: '#B6C7D3',
-        width: '26px',
-        fontSize: '18px',
-        textAlign: 'center',
-        cursor: 'pointer',
-    },
 });
 
 export type CollapsiblePageTreeProps = {
@@ -73,31 +73,35 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
                     justifyContent: 'space-between',
                     alignItems: 'center',
                     paddingRight: 1,
+                    '&:hover': {
+                        background: '#f5f7f8',
+                        borderRadius: '5px',
+                    },
                 }}
                 onMouseEnter={() => setNewPageBtnVisible(true)}
                 onMouseLeave={() => setNewPageBtnVisible(false)}
             >
-                <Button
+                <StyledContainer>
-                    startIcon={
+                    {open ? (
-                        open ? <ArrowDropDownIcon /> : <ArrowRightIcon />
+                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                    }
+                    ) : (
-                    onClick={() => setOpen(prev => !prev)}
+                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                    sx={{ color: '#566B7D', textTransform: 'none' }}
+                    )}
-                    className={clsx(styles('ligoButton'), className)}
+                    <StyledBtn onClick={() => setOpen(prev => !prev)}>
-                    style={style}
-                    disableElevation
-                    disableRipple
-                >
                         {title}
-                </Button>
+                    </StyledBtn>
+                </StyledContainer>
 
                 {newPageBtnVisible && (
-                    <div
+                    <AddIcon
+                        style={{
+                            width: '20px',
+                            height: '20px',
+                            color: '#98ACBD',
+                            cursor: 'pointer',
+                        }}
                         onClick={create_page}
-                        className={clsx(styles('newPage'), className)}
+                    />
-                    >
-                        +
-                    </div>
                 )}
             </Box>
             {children ? (

apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx

@@ -0,0 +1,19 @@
+export const Logo = ({ color, style, ...props }) => {
+    return (
+        <svg
+            width="52"
+            height="52"
+            viewBox="0 0 52 52"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <rect width="52" height="52" rx="10" fill="#3E6FDB" />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M24.2189 11.4392L14.6321 38.7943H20.2472L26.3453 19.8747L32.4461 38.7943H38.0423L28.454 11.4392H24.2189Z"
+                fill="white"
+            />
+        </svg>
+    );
+};

apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts

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

apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { MuiDivider as Divider, styled } from '@toeverything/components/ui';
+import type { ValueOf } from '@toeverything/utils';
+
+const StyledTabs = styled('div')({
+    width: '100%',
+    height: '12px',
+    marginTop: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+});
+
+const StyledDivider = styled(Divider)<{ isActive?: boolean }>(
+    ({ isActive }) => {
+        return {
+            flex: 1,
+            backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB',
+            borderWidth: '2px',
+        };
+    }
+);
+
+const TAB_TITLE = {
+    PAGES: 'pages',
+    GALLERY: 'gallery',
+    TOC: 'toc',
+} as const;
+
+const TabMap = new Map<TabKey, TabValue>([
+    ['PAGES', 'pages'],
+    ['GALLERY', 'gallery'],
+    ['TOC', 'toc'],
+]);
+
+type TabKey = keyof typeof TAB_TITLE;
+type TabValue = ValueOf<typeof TAB_TITLE>;
+
+const Tabs = () => {
+    const [activeTab, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
+
+    const onClick = (v: TabValue) => {
+        setActiveTab(v);
+    };
+
+    return (
+        <StyledTabs>
+            {[...TabMap.entries()].map(([k, v]) => {
+                return (
+                    <StyledDivider
+                        key={v}
+                        isActive={v === activeTab}
+                        onClick={() => onClick(v)}
+                    />
+                );
+            })}
+        </StyledTabs>
+    );
+};
+
+export { Tabs };

apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts

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

apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx

@@ -1,27 +1,28 @@
 import {
-    MuiButton as Button,
-    Switch,
     styled,
     MuiOutlinedInput as OutlinedInput,
 } from '@toeverything/components/ui';
-import { LogoIcon } from '@toeverything/components/icons';
+import { PinIcon } from '@toeverything/components/icons';
 import {
     useUserAndSpaces,
     useShowSpaceSidebar,
 } from '@toeverything/datasource/state';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { services } from '@toeverything/datasource/db-service';
+import { Logo } from './components/logo/Logo';
 
 const WorkspaceContainer = styled('div')({
     display: 'flex',
-    alignItems: 'center',
+    flexDirection: 'column',
-    minHeight: 60,
+    paddingBottom: '12px',
-    padding: '12px 0px',
     color: '#566B7D',
 });
 const LeftContainer = styled('div')({
     flex: 'auto',
     display: 'flex',
+    height: '52px',
+    alignItems: 'center',
+    margin: '0 12px',
 });
 
 const LogoContainer = styled('div')({
@@ -32,20 +33,36 @@ const LogoContainer = styled('div')({
     minWidth: 24,
 });
 
-const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
+const StyledPin = styled('div')({
-    return {
+    display: 'flex',
-        color: theme.affine.palette.primary,
+    justifyContent: 'end',
-        width: '16px !important',
+    alignItems: 'center',
-        height: '16px !important',
+});
-    };
+
+const StyledWorkspace = styled('div')({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    marginLeft: '12px',
+    paddingLeft: '12px',
+});
+
+const StyledWorkspaceDesc = styled('div')({
+    fontSize: '12px',
+    color: '#98ACBD',
+    height: '18px',
+
+    display: 'flex',
+    alignItems: 'center',
 });
 
 const WorkspaceNameContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
     flex: 'auto',
-    width: '100px',
+    width: '165px',
-    marginRight: '10px',
+    height: '34px',
     input: {
         padding: '5px 10px',
     },
@@ -58,21 +75,15 @@ const WorkspaceNameContainer = styled('div')({
 });
 
 const WorkspaceReNameContainer = styled('div')({
-    marginRight: '10px',
+    height: '34px',
+    display: 'flex',
+    alignItems: 'center',
+
     input: {
         padding: '5px 10px',
     },
 });
 
-const ToggleDisplayContainer = styled('div')({
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 12,
-    color: '#3E6FDB',
-    padding: 6,
-    minWidth: 64,
-});
-
 export const WorkspaceName = () => {
     const { currentSpaceId } = useUserAndSpaces();
     const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar();
@@ -139,14 +150,27 @@ export const WorkspaceName = () => {
 
     return (
         <WorkspaceContainer>
+            <StyledPin>
+                <PinIcon
+                    style={{
+                        width: '20px',
+                        height: '20px',
+                        color: fixedDisplay ? '#3E6FDB' : '',
+                        cursor: 'pointer',
+                    }}
+                    onClick={toggleSpaceSidebar}
+                />
+            </StyledPin>
             <LeftContainer>
                 <LogoContainer>
-                    <StyledLogoIcon />
+                    <Logo color={undefined} style={undefined} />
                 </LogoContainer>
 
+                <StyledWorkspace>
                     {inRename ? (
                         <WorkspaceReNameContainer>
                             <OutlinedInput
+                                style={{ width: '140px', height: '28px' }}
                                 value={workspaceName}
                                 onChange={handleChange}
                                 onKeyDown={handleKeyDown}
@@ -160,14 +184,12 @@ export const WorkspaceName = () => {
                             </span>
                         </WorkspaceNameContainer>
                     )}
+
+                    <StyledWorkspaceDesc>
+                        To shape, Not to Adapt.
+                    </StyledWorkspaceDesc>
+                </StyledWorkspace>
             </LeftContainer>
-            <ToggleDisplayContainer onClick={toggleSpaceSidebar}>
-                <Switch
-                    checked={fixedDisplay}
-                    checkedLabel="ON"
-                    uncheckedLabel="OFF"
-                />
-            </ToggleDisplayContainer>
         </WorkspaceContainer>
     );
 };

apps/venus/package.json

@@ -14,6 +14,9 @@
     },
     "devDependencies": {
         "mini-css-extract-plugin": "^2.6.1",
-        "webpack": "^5.73.0"
+        "image-minimizer-webpack-plugin": "^3.2.3",
+        "imagemin": "^8.0.1",
+        "imagemin-optipng": "^8.0.0",
+        "webpack": "^5.74.0"
     }
 }

apps/venus/src/app/index.tsx

@@ -6,13 +6,18 @@ import clsx from 'clsx';
 
 import { CssVarsProvider, styled } from '@mui/joy/styles';
 import { Box, Button, Container, Grid, SvgIcon, Typography } from '@mui/joy';
-import Card from '@mui/joy/Card';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import RedditIcon from '@mui/icons-material/Reddit';
 import TelegramIcon from '@mui/icons-material/Telegram';
 // eslint-disable-next-line no-restricted-imports
 import { useMediaQuery } from '@mui/material';
 
+import LogoImage from './logo.png';
+import CollaborationImage from './collaboration.png';
+import PageImage from './page.png';
+import ShapeImage from './shape.png';
+import TaskImage from './task.png';
+
 const DiscordIcon = (props: any) => {
     return (
         <SvgIcon
@@ -20,12 +25,12 @@ const DiscordIcon = (props: any) => {
             width="71"
             height="55"
             viewBox="0 0 71 55"
-            fill="none"
+            fill="currentcolor"
         >
             <g clip-path="url(#clip0)">
                 <path
                     d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
-                    fill="#23272A"
+                    fill="currentcolor"
                 />
             </g>
             <defs>
@@ -407,10 +412,7 @@ export function App() {
                             },
                         }}
                     >
-                        <AffineImage
+                        <AffineImage src={PageImage} alt="AFFiNE main ui" />
-                            src="/assets/page.png"
-                            alt="AFFiNE main ui"
-                        />
                     </Box>
                 </Grid>
                 <Grid xs={12} sx={{ display: 'flex' }}>
@@ -515,14 +517,16 @@ export function App() {
                                 justifyContent: 'left',
                                 textAlign: 'left',
                                 transition: 'all .5s',
-                                // boxShadow: '2px 2px 40px #08f2',
+                                transform: 'scale(0.98)',
-                                // ':hover': {
+                                boxShadow: '2px 2px 40px #0002',
-                                //     boxShadow: '2px 2px 40px #08f4',
+                                ':hover': {
-                                // },
+                                    transform: 'scale(1)',
+                                    boxShadow: '2px 2px 40px #0004',
+                                },
                             }}
                         >
                             <AffineImage
-                                src="/assets/shape.png"
+                                src={ShapeImage}
                                 alt="AFFiNE Shape Your Page"
                             />
                         </Box>
@@ -537,10 +541,10 @@ export function App() {
                     }}
                 >
                     <Grid
-                        xs={matches ? 12 : 4}
+                        xs={matches ? 12 : 6}
                         sx={{
                             display: 'flex',
-                            ...(matches ? {} : { marginRight: '4em' }),
+                            ...(matches ? {} : { marginLeft: '4em' }),
                         }}
                     >
                         <Box
@@ -584,7 +588,7 @@ export function App() {
                         </Box>
                     </Grid>
                     <Grid
-                        xs={matches ? 12 : 8}
+                        xs={matches ? 12 : 6}
                         sx={{ display: 'flex', width: '100%' }}
                     >
                         <Box
@@ -595,14 +599,16 @@ export function App() {
                                 justifyContent: 'left',
                                 textAlign: 'left',
                                 transition: 'all .5s',
-                                // boxShadow: '2px 2px 40px #08f2',
+                                transform: 'scale(0.98)',
-                                // ':hover': {
+                                boxShadow: '2px 2px 40px #0002',
-                                //     boxShadow: '2px 2px 40px #08f4',
+                                ':hover': {
-                                // },
+                                    transform: 'scale(1)',
+                                    boxShadow: '2px 2px 40px #0004',
+                                },
                             }}
                         >
                             <AffineImage
-                                src="/assets/task.png"
+                                src={TaskImage}
                                 alt="AFFiNE Plan Your Task"
                             />
                         </Box>
@@ -656,14 +662,14 @@ export function App() {
                             justifyContent: 'center',
                             margin: 'auto',
                             transition: 'all .5s',
-                            // boxShadow: '2px 2px 40px #08f2',
+                            transform: 'scale(0.98)',
-                            // ':hover': {
+                            ':hover': {
-                            //     boxShadow: '2px 2px 40px #08f4',
+                                transform: 'scale(1)',
-                            // },
+                            },
                         }}
                     >
                         <AffineImage
-                            src="/assets/collaboration.png"
+                            src={CollaborationImage}
                             alt="AFFiNE Privacy-first, and collaborative"
                         />
                     </Box>
@@ -676,7 +682,7 @@ export function App() {
                             margin: 'auto',
                         }}
                     >
-                        <AffineImage src="/assets/logo.png" alt="AFFiNE Logo" />
+                        <AffineImage src={LogoImage} alt="AFFiNE Logo" />
                     </Box>
                 </Grid>
                 <Grid xs={12} sx={{ display: 'flex' }}>
@@ -738,13 +744,20 @@ export function App() {
                     }}
                 >
                     <Box sx={{ display: 'flex', width: '100%' }}>
-                        <Card
+                        <Button
+                            variant="plain"
                             sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
                                 margin: 'auto',
-                                minWidth: '4em',
+                                padding: '1em',
-                                '--Card-padding': '4px',
+                                minWidth: '6em',
-                                '--Card-radius': '0',
                             }}
+                            onClick={() =>
+                                window.open(
+                                    'https://github.com/toeverything/AFFiNE/'
+                                )
+                            }
                         >
                             <Grid
                                 xs={12}
@@ -767,21 +780,30 @@ export function App() {
                                 }}
                             >
                                 <Typography
-                                    sx={{ display: 'flex', color: '#888' }}
+                                    sx={{
+                                        display: 'flex',
+                                        color: '#888',
+                                        fontSize: '0.5em',
+                                    }}
                                 >
                                     GitHub
                                 </Typography>
                             </Grid>
-                        </Card>
+                        </Button>
                     </Box>
                     <Box sx={{ display: 'flex', width: '100%' }}>
-                        <Card
+                        <Button
+                            variant="plain"
                             sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
                                 margin: 'auto',
-                                minWidth: '4em',
+                                padding: '1em',
-                                '--Card-padding': '4px',
+                                minWidth: '6em',
-                                '--Card-radius': '0',
                             }}
+                            onClick={() =>
+                                window.open('https://www.reddit.com/r/Affine/')
+                            }
                         >
                             <Grid
                                 xs={12}
@@ -804,12 +826,16 @@ export function App() {
                                 }}
                             >
                                 <Typography
-                                    sx={{ display: 'flex', color: '#888' }}
+                                    sx={{
+                                        display: 'flex',
+                                        color: '#888',
+                                        fontSize: '0.5em',
+                                    }}
                                 >
                                     Reddit
                                 </Typography>
                             </Grid>
-                        </Card>
+                        </Button>
                     </Box>
                     <Box
                         sx={{
@@ -817,13 +843,18 @@ export function App() {
                             width: '100%',
                         }}
                     >
-                        <Card
+                        <Button
+                            variant="plain"
                             sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
                                 margin: 'auto',
-                                minWidth: '4em',
+                                padding: '1em',
-                                '--Card-padding': '4px',
+                                minWidth: '6em',
-                                '--Card-radius': '0',
                             }}
+                            onClick={() =>
+                                window.open('https://t.me/affineworkos')
+                            }
                         >
                             <Grid
                                 xs={12}
@@ -846,21 +877,30 @@ export function App() {
                                 }}
                             >
                                 <Typography
-                                    sx={{ display: 'flex', color: '#888' }}
+                                    sx={{
+                                        display: 'flex',
+                                        color: '#888',
+                                        fontSize: '0.5em',
+                                    }}
                                 >
                                     Telegram
                                 </Typography>
                             </Grid>
-                        </Card>
+                        </Button>
                     </Box>
                     <Box sx={{ display: 'flex', width: '100%' }}>
-                        <Card
+                        <Button
+                            variant="plain"
                             sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
                                 margin: 'auto',
-                                minWidth: '4em',
+                                padding: '1em',
-                                '--Card-padding': '4px',
+                                minWidth: '6em',
-                                '--Card-radius': '0',
                             }}
+                            onClick={() =>
+                                window.open('https://discord.gg/yz6tGVsf5p')
+                            }
                         >
                             <Grid
                                 xs={12}
@@ -870,7 +910,11 @@ export function App() {
                                 }}
                             >
                                 <DiscordIcon
-                                    sx={{ width: '36px', height: '36px' }}
+                                    sx={{
+                                        width: '36px',
+                                        height: '36px',
+                                        color: '#09449d',
+                                    }}
                                 />
                             </Grid>
 
@@ -883,12 +927,16 @@ export function App() {
                                 }}
                             >
                                 <Typography
-                                    sx={{ display: 'flex', color: '#888' }}
+                                    sx={{
+                                        display: 'flex',
+                                        color: '#888',
+                                        fontSize: '0.5em',
+                                    }}
                                 >
                                     Discord
                                 </Typography>
                             </Grid>
-                        </Card>
+                        </Button>
                     </Box>
                 </Box>
                 <Grid xs={12} sx={{ display: 'flex', marginBottom: '2em' }}>

apps/venus/src/assets/discord.svg

@@ -1,10 +0,0 @@
-<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#23272A"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="71" height="55" fill="white"/>
-</clipPath>
-</defs>
-</svg>

apps/venus/webpack.config.js

@@ -7,6 +7,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const Style9Plugin = require('style9/webpack');
 
@@ -61,6 +62,14 @@ module.exports = function (webpackConfig) {
                     parallel: true,
                 }),
                 new CssMinimizerPlugin(),
+                new ImageMinimizerPlugin({
+                    minimizer: {
+                        implementation: ImageMinimizerPlugin.imageminMinify,
+                        options: {
+                            plugins: [['optipng', { optimizationLevel: 5 }]],
+                        },
+                    },
+                }),
             ],
             splitChunks: {
                 chunks: 'all',

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

@@ -29,6 +29,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from './components/error-fallback';
 import { ZoomBar } from './components/zoom-bar';
 import { CommandPanel } from './components/command-panel';
+import { usePageClientWidth } from '@toeverything/datasource/state';
 
 export interface TldrawProps extends TldrawAppCtorProps {
     /**
@@ -132,6 +133,9 @@ export function Tldraw({
     tools,
 }: TldrawProps) {
     const [sId, set_sid] = React.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(() => {
@@ -140,6 +144,7 @@ export function Tldraw({
             callbacks,
             commands,
             getSession,
+            editorShapeInitSize,
             tools,
         });
         return app;

libs/components/board-draw/src/components/command-panel/CommandPanel.tsx

@@ -11,6 +11,7 @@ import { StrokeLineStyleConfig } from './stroke-line-style-config';
 import { Group, UnGroup } from './GroupOperation';
 import { DeleteShapes } from './DeleteOperation';
 import { Lock, Unlock } from './LockOperation';
+import { FrameFillColorConfig } from './FrameFillColorConfig';
 
 export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => {
     const state = app.useStore();
@@ -51,6 +52,13 @@ export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => {
                 shapes={config.fill.selectedShapes}
             />
         ) : null,
+        frameFill: config.frameFill.selectedShapes.length ? (
+            <FrameFillColorConfig
+                key="fill"
+                app={app}
+                shapes={config.frameFill.selectedShapes}
+            />
+        ) : null,
         font: config.font.selectedShapes.length ? (
             <FontSizeConfig
                 key="font"

libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx

@@ -0,0 +1,89 @@
+import type { FC } from 'react';
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import {
+    Popover,
+    Tooltip,
+    IconButton,
+    useTheme,
+} from '@toeverything/components/ui';
+import {
+    ShapeColorNoneIcon,
+    ShapeColorDuotoneIcon,
+} from '@toeverything/components/icons';
+import { countBy, maxBy } from '@toeverything/utils';
+import { getShapeIds } from './utils';
+import { Palette } from '../palette';
+
+interface BorderColorConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+type ColorType = 'none' | string;
+
+const _colors: ColorType[] = [
+    'rgba(255, 133, 137, 0.5)',
+    'rgba(255, 159, 101, 0.5)',
+    'rgba(255, 251, 69, 0.5)',
+    'rgba(64, 255, 138, 0.5)',
+    'rgba(26, 252, 255, 0.5)',
+    'rgba(198, 156, 255, 0.5)',
+    'rgba(255, 143, 224, 0.5)',
+    'rgba(152, 172, 189, 0.5)',
+    'rgba(216, 226, 248, 0.5)',
+];
+
+const _getIconRenderColor = (shapes: TDShape[]) => {
+    const counted = countBy(shapes, shape => shape.style.fill);
+    const max = maxBy(Object.entries(counted), ([c, n]) => n);
+    return max[0];
+};
+
+export const FrameFillColorConfig: FC<BorderColorConfigProps> = ({
+    app,
+    shapes,
+}) => {
+    const theme = useTheme();
+    const setFillColor = (color: ColorType) => {
+        app.style(
+            { fill: color, isFilled: color !== 'none' },
+            getShapeIds(shapes)
+        );
+    };
+
+    const iconColor = _getIconRenderColor(shapes);
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <Palette
+                    colors={_colors}
+                    selected={iconColor}
+                    onSelect={setFillColor}
+                />
+            }
+        >
+            <Tooltip content="Frame Background Color" placement="top-start">
+                <IconButton>
+                    {iconColor === 'none' ? (
+                        <ShapeColorNoneIcon />
+                    ) : (
+                        <ShapeColorDuotoneIcon
+                            style={{
+                                color: iconColor,
+                                border:
+                                    iconColor === '#FFFFFF'
+                                        ? `1px solid ${theme.affine.palette.tagHover}`
+                                        : 0,
+                                borderRadius: '5px',
+                            }}
+                        />
+                    )}
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};

libs/components/board-draw/src/components/command-panel/utils/use-config.ts

@@ -7,6 +7,7 @@ interface Config {
     type:
         | 'stroke'
         | 'fill'
+        | 'frameFill'
         | 'font'
         | 'group'
         | 'ungroup'
@@ -22,6 +23,10 @@ const _createInitConfig = (): Record<Config['type'], Config> => {
             type: 'fill',
             selectedShapes: [],
         },
+        frameFill: {
+            type: 'frameFill',
+            selectedShapes: [],
+        },
         stroke: {
             type: 'stroke',
             selectedShapes: [],
@@ -64,6 +69,7 @@ const _isSupportStroke = (shape: TDShape): boolean => {
         TDShapeType.Pencil,
         TDShapeType.Laser,
         TDShapeType.Highlight,
+        TDShapeType.Draw,
         TDShapeType.Arrow,
         TDShapeType.Line,
     ].some(type => type === shape.type);
@@ -91,6 +97,10 @@ const _isSupportFont = (shape: TDShape): boolean => {
     ].some(type => type === shape.type);
 };
 
+const _isSupportFrameFill = (shape: TDShape): boolean => {
+    return shape.type === TDShapeType.Frame;
+};
+
 export const useConfig = (app: TldrawApp): Record<Config['type'], Config> => {
     const state = app.useStore();
     const selectedShapes = TLDR.get_selected_shapes(state, app.currentPageId);
@@ -105,6 +115,9 @@ export const useConfig = (app: TldrawApp): Record<Config['type'], Config> => {
             if (_isSupportFont(cur)) {
                 acc.font.selectedShapes.push(cur);
             }
+            if (_isSupportFrameFill(cur)) {
+                acc.frameFill.selectedShapes.push(cur);
+            }
             return acc;
         },
         _createInitConfig()

libs/components/board-sessions/src/rotate-session.ts

@@ -6,6 +6,7 @@ import {
     TldrawPatch,
     TDShape,
     TDStatus,
+    TDShapeType,
 } from '@toeverything/components/board-types';
 import { TLDR } from '@toeverything/components/board-state';
 import { BaseSession } from './base-session';
@@ -75,6 +76,10 @@ export class RotateSession extends BaseSession {
             app: { currentPageId, currentPoint, shiftKey },
         } = this;
 
+        const filteredShapes = initialShapes.filter(
+            shape => shape.shape.type !== TDShapeType.Editor
+        );
+
         const shapes: Record<string, Partial<TDShape>> = {};
 
         let directionDelta =
@@ -85,7 +90,7 @@ export class RotateSession extends BaseSession {
         }
 
         // Update the shapes
-        initialShapes.forEach(({ center, shape }) => {
+        filteredShapes.forEach(({ center, shape }) => {
             const { rotation = 0 } = shape;
             let shapeDelta = 0;
 

libs/components/board-shapes/src/frame-util/FrameUtil.tsx

@@ -1,12 +1,9 @@
-import * as React from 'react';
+/* eslint-disable no-restricted-syntax */
 import { Utils, SVGContainer } from '@tldraw/core';
 import {
     FrameShape,
-    DashStyle,
     TDShapeType,
     TDMeta,
-    GHOSTED_OPACITY,
-    LABEL_POINT,
 } from '@toeverything/components/board-types';
 import { TDShapeUtil } from '../TDShapeUtil';
 import {
@@ -14,14 +11,13 @@ import {
     getShapeStyle,
     getBoundsRectangle,
     transformRectangle,
-    getFontStyle,
     transformSingleRectangle,
 } from '../shared';
-import { DrawFrame } from './components/draw-frame';
+import { Frame } from './components/Frame';
 import { styled } from '@toeverything/components/ui';
 
 type T = FrameShape;
-type E = HTMLDivElement;
+type E = SVGSVGElement;
 
 export class FrameUtil extends TDShapeUtil<T, E> {
     type = TDShapeType.Frame as const;
@@ -56,10 +52,7 @@ export class FrameUtil extends TDShapeUtil<T, E> {
         (
             {
                 shape,
-                isEditing,
-                isBinding,
                 isSelected,
-                isGhost,
                 meta,
                 bounds,
                 events,
@@ -70,13 +63,13 @@ export class FrameUtil extends TDShapeUtil<T, E> {
         ) => {
             const { id, size, style } = shape;
             return (
-                <FullWrapper ref={ref} {...events}>
                 <SVGContainer
+                    ref={ref}
+                    {...events}
                     id={shape.id + '_svg'}
                     opacity={1}
-                        fill={'#fff'}
                 >
-                        <DrawFrame
+                    <Frame
                         id={id}
                         style={style}
                         size={size}
@@ -84,7 +77,6 @@ export class FrameUtil extends TDShapeUtil<T, E> {
                         isDarkMode={meta.isDarkMode}
                     />
                 </SVGContainer>
-                </FullWrapper>
             );
         }
     );
@@ -121,27 +113,9 @@ export class FrameUtil extends TDShapeUtil<T, E> {
     override transform = transformRectangle;
 
     override transformSingle = transformSingleRectangle;
-
-    override hitTestPoint = (shape: T, point: number[]): boolean => {
-        return false;
-    };
-
-    override hitTestLineSegment = (
-        shape: T,
-        A: number[],
-        B: number[]
-    ): boolean => {
-        return false;
-    };
 }
 
 const FullWrapper = styled('div')({
     width: '100%',
     height: '100%',
-    '.tl-fill-hitarea': {
-        fill: '#F7F9FF',
-    },
-    '.tl-stroke-hitarea': {
-        fill: '#F7F9FF',
-    },
 });

libs/components/board-shapes/src/frame-util/components/Frame.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+
+interface RectangleSvgProps {
+    id: string;
+    style: ShapeStyles;
+    isSelected: boolean;
+    size: number[];
+    isDarkMode: boolean;
+}
+
+export const Frame = React.memo(function DashedRectangle({
+    id,
+    style,
+    size,
+    isSelected,
+    isDarkMode,
+}: RectangleSvgProps) {
+    const { strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+
+    const _fill = fill && fill !== 'none' ? fill : '#F7F9FF';
+
+    const sw = 1 + strokeWidth * 1.618;
+
+    const w = Math.max(0, size[0] - sw / 2);
+    const h = Math.max(0, size[1] - sw / 2);
+
+    return (
+        <>
+            <rect
+                className={
+                    isSelected || style.isFilled
+                        ? 'tl-fill-hitarea'
+                        : 'tl-stroke-hitarea'
+                }
+                x={sw / 2}
+                y={sw / 2}
+                width={w}
+                height={h}
+                strokeWidth={BINDING_DISTANCE}
+            />
+            <rect
+                x={sw / 2}
+                y={sw / 2}
+                width={w}
+                height={h}
+                fill={_fill}
+                pointerEvents="none"
+            />
+        </>
+    );
+});

libs/components/board-shapes/src/frame-util/components/draw-frame.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { BINDING_DISTANCE } from '@toeverything/components/board-types';
-import type { ShapeStyles } from '@toeverything/components/board-types';
-import { getShapeStyle } from '../../shared';
-
-interface RectangleSvgProps {
-    id: string;
-    style: ShapeStyles;
-    isSelected: boolean;
-    size: number[];
-    isDarkMode: boolean;
-}
-
-export const DrawFrame = React.memo(function DashedRectangle({
-    id,
-    style,
-    size,
-    isSelected,
-    isDarkMode,
-}: RectangleSvgProps) {
-    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
-
-    const sw = 1 + strokeWidth * 1.618;
-
-    const w = Math.max(0, size[0] - sw / 2);
-    const h = Math.max(0, size[1] - sw / 2);
-
-    return (
-        <rect
-            className={
-                isSelected || style.isFilled
-                    ? 'tl-fill-hitarea'
-                    : 'tl-stroke-hitarea'
-            }
-            x={sw / 2}
-            y={sw / 2}
-            width={w}
-            height={h}
-            strokeWidth={BINDING_DISTANCE}
-        />
-    );
-});

libs/components/board-shapes/src/frame-util/index.ts

@@ -1 +1 @@
-export * from './frame-util';
+export * from './FrameUtil';

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

@@ -73,6 +73,7 @@ import { StateManager } from './manager/state-manager';
 import { getClipboard, setClipboard } from './idb-clipboard';
 import type { Commands } from './types/commands';
 import type { BaseTool } from './types/tool';
+import { MIN_PAGE_WIDTH } from '@toeverything/components/editor-core';
 
 const uuid = Utils.uniqueId();
 
@@ -178,6 +179,7 @@ export interface TldrawAppCtorProps {
     getSession: (type: SessionType) => {
         new (app: TldrawApp, ...args: any[]): BaseSessionType;
     };
+    editorShapeInitSize?: number;
     commands: Commands;
     tools: Record<string, { new (app: TldrawApp): BaseTool }>;
 }
@@ -223,6 +225,8 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
     fileSystemHandle: FileSystemHandle | null = null;
 
+    editorShapeInitSize = MIN_PAGE_WIDTH;
+
     viewport = Utils.getBoundsFromPoints([
         [0, 0],
         [100, 100],
@@ -285,6 +289,10 @@ export class TldrawApp extends StateManager<TDSnapshot> {
             return acc;
         }, {} as Record<string, BaseTool>);
         this.currentTool = this.tools['select'];
+
+        if (props.editorShapeInitSize) {
+            this.editorShapeInitSize = props.editorShapeInitSize;
+        }
     }
 
     /* -------------------- Internal -------------------- */

libs/components/board-tools/src/editor-tool/editor-tool.ts

@@ -18,6 +18,7 @@ export class EditorTool extends BaseTool {
         const {
             currentPoint,
             currentGrid,
+            editorShapeInitSize,
             settings: { showGrid },
             appState: { currentPageId, currentStyle },
             document: { id: workspace },
@@ -47,6 +48,7 @@ export class EditorTool extends BaseTool {
                     ? Vec.snap(currentPoint, currentGrid)
                     : currentPoint,
                 style: { ...currentStyle },
+                size: [editorShapeInitSize, 200],
                 workspace,
             });
             // In order to make the cursor just positioned at the beginning of the first line, it needs to be adjusted according to the padding            newShape.point = Vec.sub(newShape.point, [50, 30]);

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

@@ -1,16 +1,21 @@
 import { useState } from 'react';
-import clsx from 'clsx';
-import style9 from 'style9';
 import {
     MuiButton as Button,
     MuiCollapse as Collapse,
+    styled,
 } from '@toeverything/components/ui';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+    ArrowDropDownIcon,
+    ArrowRightIcon,
+} from '@toeverything/components/icons';
 
-const styles = style9.create({
+const StyledContainer = styled('div')({
-    ligoButton: {
+    display: 'flex',
-        textTransform: 'none',
+    alignItems: 'center',
+    cursor: 'pointer',
+    '&:hover': {
+        background: '#f5f7f8',
+        borderRadius: '5px',
     },
 });
 
@@ -24,29 +29,32 @@ export type CollapsibleTitleProps = {
 };
 
 export function CollapsibleTitle(props: CollapsibleTitleProps) {
-    const { className, style, children, title, initialOpen = true } = props;
+    const { children, title, initialOpen = true } = props;
 
     const [open, setOpen] = useState(initialOpen);
 
     return (
         <>
-            <Button
+            <StyledContainer onClick={() => setOpen(prev => !prev)}>
-                startIcon={
+                {open ? (
-                    open ? (
                     <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
                 ) : (
                     <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                    )
+                )}
-                }
+                <div
-                onClick={() => setOpen(prev => !prev)}
+                    style={{
-                sx={{ color: '#566B7D', textTransform: 'none' }}
+                        color: '#98ACBD',
-                className={clsx(styles('ligoButton'), className)}
+                        textTransform: 'none',
-                style={style}
+                        fontSize: '12px',
-                disableElevation
+                        fontWeight: '600',
-                disableRipple
+                        height: '32px',
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
                 >
                     {title}
-            </Button>
+                </div>
+            </StyledContainer>
             {children ? (
                 <Collapse in={open} timeout="auto" unmountOnExit>
                     {children}

libs/components/common/src/lib/text/plugins/link.tsx

@@ -121,11 +121,11 @@ const isLinkActive = (editor: ReactEditor) => {
 
 const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
     <Tooltip {...props} classes={{ popper: className }} />
-))(() => ({
+))(({ theme }) => ({
     [`& .${muiTooltipClasses.tooltip}`]: {
         backgroundColor: '#fff',
         color: '#4C6275',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        boxShadow: theme.affine.shadows.shadow1,
         fontSize: '14px',
     },
     [`& .MuiTooltip-tooltipPlacementBottom`]: {
@@ -412,8 +412,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
         visible && (
             <>
                 <LinkBehavior onMousedown={handle_mouse_down} rects={rects} />
-                <div
+                <LinkModalContainer
-                    className={styles('linkModalContainer')}
                     style={{
                         top: top + height + GAP_BETWEEN_CONTENT_AND_MODAL,
                         left,
@@ -431,7 +430,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
                         autoComplete="off"
                         ref={inputEl}
                     />
-                </div>
+                </LinkModalContainer>
             </>
         ),
         body
@@ -491,19 +490,20 @@ const LinkBehavior = (props: {
     );
 };
 
-const styles = style9.create({
+const LinkModalContainer = styled('div')(({ theme }) => ({
-    linkModalContainer: {
     position: 'fixed',
     width: '354px',
     height: '40px',
     padding: '12px',
     display: 'flex',
     borderRadius: '4px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     backgroundColor: '#fff',
     alignItems: 'center',
     zIndex: '1',
-    },
+}));
+
+const styles = style9.create({
     linkModalContainerIcon: {
         width: '16px',
         margin: '0 16px 0 4px',

libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx

@@ -17,7 +17,7 @@ import {
     supportChildren,
     RenderBlockChildren,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { List } from '../../components/style-container';
 import { getChildrenType, BulletIcon, NumberType } from './data';
@@ -188,7 +188,7 @@ export const BulletView: FC<CreateView> = ({ block, editor }) => {
 
     return (
         <BlockContainer editor={editor} block={block} selected={isSelect}>
-            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <BlockPendantProvider block={block}>
                 <List>
                     <BulletLeft>
                         <BulletIcon numberType={properties.numberType} />
@@ -206,7 +206,7 @@ export const BulletView: FC<CreateView> = ({ block, editor }) => {
                         />
                     </div>
                 </List>
-            </WrapperWithPendantAndDragDrop>
+            </BlockPendantProvider>
             <IndentWrapper>
                 <RenderBlockChildren block={block} />
             </IndentWrapper>

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -50,7 +50,7 @@ import { Option, Select } from '@toeverything/components/ui';
 
 import {
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { copyToClipboard } from '@toeverything/utils';
 interface CreateCodeView extends CreateView {
@@ -163,7 +163,7 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
         editor.selectionManager.activePreviousNode(block.id, 'start');
     };
     return (
-        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+        <BlockPendantProvider block={block}>
             <CodeBlock
                 onKeyDown={e => {
                     e.stopPropagation();
@@ -222,6 +222,6 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
                     handleKeyArrowUp={handleKeyArrowUp}
                 />
             </CodeBlock>
-        </WrapperWithPendantAndDragDrop>
+        </BlockPendantProvider>
     );
 };

libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
     useOnSelect,
 } from '@toeverything/components/editor-core';
 import { Upload } from '../../components/upload/upload';
@@ -33,7 +33,7 @@ export const EmbedLinkView: FC<EmbedLinkView> = props => {
     };
 
     return (
-        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+        <BlockPendantProvider block={block}>
             <LinkContainer>
                 {embedLinkUrl ? (
                     <SourceView
@@ -53,6 +53,6 @@ export const EmbedLinkView: FC<EmbedLinkView> = props => {
                     />
                 )}
             </LinkContainer>
-        </WrapperWithPendantAndDragDrop>
+        </BlockPendantProvider>
     );
 };

libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { Upload } from '../../components/upload/upload';
 import { SourceView } from '../../components/source-view';
@@ -30,7 +30,7 @@ export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
         setIsSelect(isSelect);
     });
     return (
-        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+        <BlockPendantProvider block={block}>
             <LinkContainer>
                 {figmaUrl ? (
                     <SourceView
@@ -52,6 +52,6 @@ export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
                     />
                 )}
             </LinkContainer>
-        </WrapperWithPendantAndDragDrop>
+        </BlockPendantProvider>
     );
 };

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

@@ -60,7 +60,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
     ({ isSelect, theme }) => ({
         background: theme.affine.palette.white,
         border: '2px solid rgba(236,241,251,.5)',
-        padding: '15px 12px',
+        padding: `15px 16px 0 16px`,
         borderRadius: '10px',
         ...(isSelect
             ? {
@@ -69,7 +69,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
               }
             : {
                   '&:hover': {
-                      boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
+                      boxShadow: theme.affine.shadows.shadow1,
                   },
               }),
     })

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

@@ -2,11 +2,11 @@ import { styled } from '@toeverything/components/ui';
 import type { ComponentPropsWithRef, MouseEvent } from 'react';
 import { forwardRef } from 'react';
 
-const StyledPanel = styled('div')(() => ({
+const StyledPanel = styled('div')(({ theme }) => ({
     position: 'absolute',
     top: 50,
     background: '#FFFFFF',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     borderRadius: 10,
     padding: '12px 24px',
 }));

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

@@ -41,6 +41,7 @@ const getKanbanColor = (
         return DEFAULT_COLOR;
     }
     if (
+        group.type === PropertyType.Status ||
         group.type === PropertyType.Select ||
         group.type === PropertyType.MultiSelect ||
         group.type === DEFAULT_GROUP_ID

libs/components/editor-blocks/src/blocks/image/ImageView.tsx

@@ -1,7 +1,7 @@
 import {
     useCurrentView,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
@@ -158,7 +158,7 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
     };
 
     return (
-        <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+        <BlockPendantProvider block={block}>
             <ImageBlock>
                 <div ref={resize_box}>
                     {imgUrl ? (
@@ -229,6 +229,6 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
                 </div> */}
                 </div>
             </ImageBlock>
-        </WrapperWithPendantAndDragDrop>
+        </BlockPendantProvider>
     );
 };

libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx

@@ -19,9 +19,8 @@ import {
     supportChildren,
     RenderBlockChildren,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
-import { styled } from '@toeverything/components/ui';
 import { List } from '../../components/style-container';
 import { BlockContainer } from '../../components/BlockContainer';
 
@@ -185,7 +184,7 @@ export const NumberedView: FC<CreateView> = ({ block, editor }) => {
 
     return (
         <BlockContainer editor={editor} block={block} selected={isSelect}>
-            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <BlockPendantProvider block={block}>
                 <List>
                     <div className={'checkBoxContainer'}>
                         {getNumber(properties.numberType, number)}.
@@ -203,7 +202,7 @@ export const NumberedView: FC<CreateView> = ({ block, editor }) => {
                         />
                     </div>
                 </List>
-            </WrapperWithPendantAndDragDrop>
+            </BlockPendantProvider>
 
             <IndentWrapper>
                 <RenderBlockChildren block={block} />

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

@@ -8,7 +8,7 @@ import {
     supportChildren,
     unwrapGroup,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import { Protocol } from '@toeverything/datasource/db-service';
@@ -231,7 +231,7 @@ export const TextView: FC<CreateTextView> = ({
             selected={isSelect}
             className={containerClassName}
         >
-            <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+            <BlockPendantProvider block={block}>
                 <TextBlock
                     block={block}
                     type={block.type}
@@ -242,7 +242,7 @@ export const TextView: FC<CreateTextView> = ({
                     handleConvert={handleConvert}
                     handleTab={onTab}
                 />
-            </WrapperWithPendantAndDragDrop>
+            </BlockPendantProvider>
             <IndentWrapper>
                 <RenderBlockChildren block={block} />
             </IndentWrapper>

libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx

@@ -3,7 +3,7 @@ import {
     RenderBlock,
     useCurrentView,
     useOnSelect,
-    WrapperWithPendantAndDragDrop,
+    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import type {
@@ -13,7 +13,6 @@ import type {
     ReactElement,
 } from 'react';
 import { forwardRef, useState } from 'react';
-import style9 from 'style9';
 import { SCENE_CONFIG } from '../blocks/group/config';
 import { BlockContainer } from '../components/BlockContainer';
 
@@ -30,29 +29,15 @@ const TreeView = forwardRef<
     { lastItem?: boolean } & ComponentPropsWithRef<'div'>
 >(({ lastItem, children, onClick, ...restProps }, ref) => {
     return (
-        <div ref={ref} className={treeStyles('treeWrapper')} {...restProps}>
+        <TreeWrapper ref={ref} {...restProps}>
-            <div className={treeStyles('treeView')}>
+            <StyledTreeView>
-                <div
+                <VerticalLine last={lastItem} onClick={onClick} />
-                    className={treeStyles({
+                <HorizontalLine last={lastItem} onClick={onClick} />
-                        line: true,
+                {lastItem && <LastItemRadius />}
-                        verticalLine: true,
+            </StyledTreeView>
-                        lastItemVerticalLine: lastItem,
-                    })}
-                    onClick={onClick}
-                />
-                <div
-                    className={treeStyles({
-                        line: true,
-                        horizontalLine: true,
-                        lastItemHorizontalLine: lastItem,
-                    })}
-                    onClick={onClick}
-                />
-                {lastItem && <div className={treeStyles('lastItemRadius')} />}
-            </div>
             {/* maybe need a child wrapper */}
             {children}
-        </div>
+        </TreeWrapper>
     );
 });
 
@@ -71,10 +56,7 @@ const ChildrenView = ({
     const isKanbanScene = currentView.type === SCENE_CONFIG.KANBAN;
 
     return (
-        <div
+        <Children style={{ ...(!isKanbanScene && { marginLeft: indent }) }}>
-            className={styles('children')}
-            style={{ ...(!isKanbanScene && { marginLeft: indent }) }}
-        >
             {childrenIds.map((childId, idx) => {
                 if (isKanbanScene) {
                     return (
@@ -94,7 +76,7 @@ const ChildrenView = ({
                     </TreeView>
                 );
             })}
-        </div>
+        </Children>
     );
 };
 
@@ -104,9 +86,7 @@ const CollapsedNode = forwardRef<
 >((props, ref) => {
     return (
         <TreeView ref={ref} lastItem={true} {...props}>
-            <div className={treeStyles('collapsed')} onClick={props.onClick}>
+            <Collapsed onClick={props.onClick}>···</Collapsed>
-                ···
-            </div>
         </TreeView>
     );
 });
@@ -146,11 +126,11 @@ export const withTreeViewChildren = (
                 editor={props.editor}
                 block={block}
                 selected={isSelect}
-                className={styles('wrapper')}
+                className={Wrapper.toString()}
             >
-                <WrapperWithPendantAndDragDrop editor={editor} block={block}>
+                <BlockPendantProvider block={block}>
-                    <div className={styles('node')}>{creator(props)}</div>
+                    <div>{creator(props)}</div>
-                </WrapperWithPendantAndDragDrop>
+                </BlockPendantProvider>
 
                 {collapsed && (
                     <CollapsedNode
@@ -170,93 +150,79 @@ export const withTreeViewChildren = (
     };
 };
 
-const styles = style9.create({
+const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' });
-    wrapper: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    node: {},
 
-    children: {
+const Children = Wrapper;
-        display: 'flex',
+
-        flexDirection: 'column',
+const TREE_COLOR = '#D5DFE6';
-    },
+// TODO determine the position of the horizontal line by the type of the item
+const ITEM_POINT_HEIGHT = '12.5px'; // '50%'
+
+const TreeWrapper = styled('div')({
+    position: 'relative',
 });
 
-const treeColor = '#D5DFE6';
+const StyledTreeView = styled('div')({
-// TODO determine the position of the horizontal line by the type of the item
-const itemPointHeight = '12.5px'; // '50%'
-
-const treeStyles = style9.create({
-    treeWrapper: {
-        position: 'relative',
-    },
-
-    treeView: {
     position: 'absolute',
     left: '-21px',
     height: '100%',
-    },
+});
-    line: {
+
+const Line = styled('div')({
     position: 'absolute',
     cursor: 'pointer',
-        backgroundColor: treeColor,
+    backgroundColor: TREE_COLOR,
-        boxSizing: 'content-box',
+    // somehow tldraw would override this
+    boxSizing: 'content-box!important' as any,
     // See [Can I add background color only for padding?](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding)
     backgroundClip: 'content-box',
     backgroundOrigin: 'content-box',
     // Increase click hot spot
     padding: '10px',
-    },
+});
-    verticalLine: {
+
+const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
     width: '1px',
-        height: '100%',
+    height: last ? ITEM_POINT_HEIGHT : '100%',
     paddingTop: 0,
     paddingBottom: 0,
     transform: 'translate(-50%, 0)',
-    },
+
-    horizontalLine: {
+    opacity: last ? 0 : 'unset',
+}));
+
+const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
     width: '16px',
     height: '1px',
     paddingLeft: 0,
     paddingRight: 0,
-        top: itemPointHeight,
+    top: ITEM_POINT_HEIGHT,
     transform: 'translate(0, -50%)',
-    },
+    opacity: last ? 0 : 'unset',
-    noItemHorizontalLine: {
+}));
-        display: 'none',
-    },
 
-    lastItemHorizontalLine: {
+const Collapsed = styled('div')({
-        opacity: 0,
+    cursor: 'pointer',
-    },
+    display: 'inline-block',
-    lastItemVerticalLine: {
+    color: '#B9CAD5',
-        height: itemPointHeight,
+});
-        opacity: 0,
+
-    },
+const LastItemRadius = styled('div')({
-    lastItemRadius: {
     boxSizing: 'content-box',
     position: 'absolute',
     left: '-0.5px',
     top: 0,
-        height: itemPointHeight,
+    height: ITEM_POINT_HEIGHT,
     bottom: '50%',
     width: '16px',
     borderWidth: '1px',
     borderStyle: 'solid',
-        borderLeftColor: treeColor,
+    borderLeftColor: TREE_COLOR,
-        borderBottomColor: treeColor,
+    borderBottomColor: TREE_COLOR,
     borderTop: 'none',
     borderRight: 'none',
     borderRadius: '0 0 0 3px',
     pointerEvents: 'none',
-    },
-
-    collapsed: {
-        cursor: 'pointer',
-        display: 'inline-block',
-        color: '#B9CAD5',
-    },
 });
 
 const StyledBorder = styled('div')({

libs/components/editor-core/src/block-content-wrapper/BlockContentWrapper.tsx

@@ -1,21 +0,0 @@
-import { AsyncBlock, BlockEditor } from '../editor';
-import type { FC, ReactElement } from 'react';
-import { BlockPendantProvider } from '../block-pendant';
-import { DragDropWrapper } from '../drag-drop-wrapper';
-
-type BlockContentWrapperProps = {
-    block: AsyncBlock;
-    editor: BlockEditor;
-    children: ReactElement | null;
-};
-
-export const WrapperWithPendantAndDragDrop: FC<BlockContentWrapperProps> =
-    function ({ block, children, editor }) {
-        return (
-            <DragDropWrapper block={block} editor={editor}>
-                <BlockPendantProvider block={block}>
-                    {children}
-                </BlockPendantProvider>
-            </DragDropWrapper>
-        );
-    };

libs/components/editor-core/src/block-content-wrapper/index.ts

@@ -1 +0,0 @@
-export * from './BlockContentWrapper';

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

@@ -1,5 +1,4 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { useState } from 'react';
 import { styled } from '@toeverything/components/ui';
 import type { AsyncBlock } from '../editor';
 import { PendantPopover } from './pendant-popover';
@@ -11,48 +10,28 @@ interface BlockTagProps {
     block: AsyncBlock;
 }
 
-/**
- * @deprecated Need to be refactored
- */
 export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
     block,
     children,
 }) => {
-    const [container, setContainer] = useState<HTMLElement>(null);
-    const [isHover, setIsHover] = useState(false);
     return (
-        <Container ref={(dom: HTMLElement) => setContainer(dom)}>
+        <Container>
             {children}
-            {container && (
+
-                <PendantPopover
+            <PendantPopover block={block}>
-                    block={block}
+                <StyledTriggerLine />
-                    container={container}
-                    onVisibleChange={visible => {
-                        setIsHover(visible);
-                    }}
-                >
-                    <StyledTriggerLine
-                        className="triggerLine"
-                        isHover={isHover}
-                    />
             </PendantPopover>
-            )}
+
             <PendantRender block={block} />
         </Container>
     );
 };
 
-const Container = styled('div')({
+export const LINE_GAP = 16;
-    position: 'relative',
+const TAG_GAP = 4;
-    padding: '4px',
-    '&:hover .triggerLine::before': {
-        display: 'flex',
-    },
-});
 
-const StyledTriggerLine = styled('div')<{ isHover: boolean }>(({ isHover }) => {
+const StyledTriggerLine = styled('div')({
-    return {
+    padding: `${TAG_GAP}px 0`,
-        padding: '4px 0',
     width: '100px',
     cursor: 'default',
     display: 'flex',
@@ -71,7 +50,7 @@ const StyledTriggerLine = styled('div')<{ isHover: boolean }>(({ isHover }) => {
     },
     '::after': {
         content: "''",
-            width: isHover ? '100%' : '0',
+        width: '0',
         height: '2px',
         background: '#aac4d5',
         display: 'block',
@@ -80,5 +59,19 @@ const StyledTriggerLine = styled('div')<{ isHover: boolean }>(({ isHover }) => {
         top: '4px',
         transition: 'width .3s',
     },
-    };
+});
+
+const Container = styled('div')({
+    position: 'relative',
+    paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
+    '&:hover': {
+        [StyledTriggerLine.toString()]: {
+            '&::before': {
+                display: 'flex',
+            },
+            '&::after': {
+                width: '100%',
+            },
+        },
+    },
 });

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

@@ -1,5 +1,4 @@
 import React, { ReactNode, useRef, useEffect, useState } from 'react';
-import { getPendantHistory } from '../utils';
 import {
     getRecastItemValue,
     RecastMetaProperty,
@@ -30,22 +29,22 @@ export const PendantHistoryPanel = ({
 
     const [history, setHistory] = useState<RecastBlockValue[]>([]);
     const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
+    const { getValueHistory } = getRecastItemValue(block);
 
     useEffect(() => {
         const init = async () => {
             const currentBlockValues = getRecastItemValue(block).getAllValue();
-            const allProperties = getProperties();
+            const missValues = getProperties().filter(
-            const missProperties = allProperties.filter(
                 property => !currentBlockValues.find(v => v.id === property.id)
             );
-            const pendantHistory = getPendantHistory({
+            const valueHistory = getValueHistory({
                 recastBlockId: recastBlock.id,
             });
-            const historyMap = missProperties.reduce<{
+            const historyMap = missValues.reduce<{
-                [key: RecastPropertyId]: string;
+                [key: RecastPropertyId]: string[];
             }>((history, property) => {
-                if (pendantHistory[property.id]) {
+                if (valueHistory[property.id]) {
-                    history[property.id] = pendantHistory[property.id];
+                    history[property.id] = valueHistory[property.id];
                 }
 
                 return history;
@@ -54,18 +53,30 @@ export const PendantHistoryPanel = ({
             const blockHistory = (
                 await Promise.all(
                     Object.entries(historyMap).map(
-                        async ([propertyId, blockId]) => {
+                        async ([propertyId, blockIds]) => {
-                            const latestValueBlock = (
+                            const blocks = await groupBlock.children();
-                                await groupBlock.children()
+                            const latestChangeBlock = blockIds
-                            ).find((block: AsyncBlock) => block.id === blockId);
+                                .reverse()
+                                .reduce<AsyncBlock>((block, id) => {
+                                    if (!block) {
+                                        return blocks.find(
+                                            block => block.id === id
+                                        );
+                                    }
+                                    return block;
+                                }, null);
 
+                            if (latestChangeBlock) {
                                 return getRecastItemValue(
-                                latestValueBlock
+                                    latestChangeBlock
                                 ).getValue(propertyId as RecastPropertyId);
                             }
+                            return null;
+                        }
                     )
                 )
             ).filter(v => v);
+
             setHistory(blockHistory);
         };
 

libs/components/editor-core/src/block-pendant/pendant-modify-panel/Information.tsx

@@ -4,7 +4,7 @@ import { ModifyPanelContentProps } from './types';
 import { StyledDivider, StyledPopoverSubTitle } from '../StyledComponent';
 import { BasicSelect } from './Select';
 import { InformationProperty, InformationValue } from '../../recast-block';
-import { genInitialOptions, getPendantIconsConfigByName } from '../utils';
+import { generateInitialOptions, getPendantIconsConfigByName } from '../utils';
 
 export default (props: ModifyPanelContentProps) => {
     const { onPropertyChange, onValueChange, initialValue, property } = props;
@@ -38,7 +38,7 @@ export default (props: ModifyPanelContentProps) => {
                 }}
                 initialOptions={
                     propProperty?.emailOptions ||
-                    genInitialOptions(
+                    generateInitialOptions(
                         property?.type,
                         getPendantIconsConfigByName('Email')
                     )
@@ -66,7 +66,7 @@ export default (props: ModifyPanelContentProps) => {
                 }}
                 initialOptions={
                     propProperty?.phoneOptions ||
-                    genInitialOptions(
+                    generateInitialOptions(
                         property?.type,
                         getPendantIconsConfigByName('Phone')
                     )
@@ -94,7 +94,7 @@ export default (props: ModifyPanelContentProps) => {
                 }}
                 initialOptions={
                     propProperty?.locationOptions ||
-                    genInitialOptions(
+                    generateInitialOptions(
                         property?.type,
                         getPendantIconsConfigByName('Location')
                     )

libs/components/editor-core/src/block-pendant/pendant-modify-panel/Mention.tsx

@@ -18,7 +18,9 @@ export default ({
         user: { username, nickname, photo },
     } = useUserAndSpaces();
 
-    const [selectedValue, setSelectedValue] = useState(initialValue?.value);
+    const [selectedValue, setSelectedValue] = useState(
+        initialValue?.value || ''
+    );
     const [focus, setFocus] = useState(false);
     const theme = useTheme();
     return (

libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx

@@ -21,7 +21,7 @@ import {
 } from '@toeverything/components/ui';
 import { HighLightIconInput } from './IconInput';
 import { PendantConfig, IconNames, OptionIdType, OptionType } from '../types';
-import { genBasicOption } from '../utils';
+import { generateBasicOption } from '../utils';
 
 type OptionItemType = {
     option: OptionType;
@@ -66,7 +66,7 @@ export const BasicSelect = ({
     const [selectIds, setSelectIds] = useState<OptionIdType[]>(initialValue);
 
     const insertOption = (insertId: OptionIdType) => {
-        const newOption = genBasicOption({
+        const newOption = generateBasicOption({
             index: options.length + 1,
             iconConfig,
         });

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

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { nanoid } from 'nanoid';
 import { Input, Option, Select, Tooltip } from '@toeverything/components/ui';
 import { HelpCenterIcon } from '@toeverything/components/icons';
 import { AsyncBlock } from '../../editor';
@@ -15,13 +14,13 @@ import {
     StyledPopoverSubTitle,
     StyledPopoverWrapper,
 } from '../StyledComponent';
-import { genInitialOptions, getPendantConfigByType } from '../utils';
+import {
+    generateRandomFieldName,
+    generateInitialOptions,
+    getPendantConfigByType,
+} from '../utils';
 import { useOnCreateSure } from './hooks';
 
-const upperFirst = (str: string) => {
-    return `${str[0].toUpperCase()}${str.slice(1)}`;
-};
-
 export const CreatePendantPanel = ({
     block,
     onSure,
@@ -35,7 +34,7 @@ export const CreatePendantPanel = ({
 
     useEffect(() => {
         selectedOption &&
-            setFieldName(upperFirst(`${selectedOption.type}#${nanoid(4)}`));
+            setFieldName(generateRandomFieldName(selectedOption.type));
     }, [selectedOption]);
 
     return (
@@ -45,7 +44,7 @@ export const CreatePendantPanel = ({
             <Select
                 width={284}
                 placeholder="Search for a field type"
-                value={selectedOption}
+                value={selectedOption ?? null}
                 onChange={(selectedValue: PendantOptions) => {
                     setSelectedOption(selectedValue);
                 }}
@@ -93,7 +92,7 @@ export const CreatePendantPanel = ({
                     <PendantModifyPanel
                         type={selectedOption.type}
                         // Select, MultiSelect, Status use this props as initial property
-                        initialOptions={genInitialOptions(
+                        initialOptions={generateInitialOptions(
                             selectedOption.type,
                             getPendantConfigByType(selectedOption.type)
                         )}

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

@@ -4,11 +4,11 @@ import { HelpCenterIcon } from '@toeverything/components/icons';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import type { AsyncBlock } from '../../editor';
 import {
+    getRecastItemValue,
     type RecastBlockValue,
     type RecastMetaProperty,
 } from '../../recast-block';
 import { getPendantConfigByType } from '../utils';
-import { usePendant } from '../use-pendant';
 import {
     StyledPopoverWrapper,
     StyledOperationLabel,
@@ -42,7 +42,8 @@ export const UpdatePendantPanel = ({
 }: Props) => {
     const pendantOption = pendantOptions.find(v => v.type === property.type);
     const iconConfig = getPendantConfigByType(property.type);
-    const { removePendant } = usePendant(block);
+    const { removeValue } = getRecastItemValue(block);
+
     const Icon = IconMap[iconConfig.iconName];
     const [fieldName, setFieldName] = useState(property.name);
     const onUpdateSure = useOnUpdateSure({ block, property });
@@ -108,7 +109,7 @@ export const UpdatePendantPanel = ({
                 onDelete={
                     hasDelete
                         ? async () => {
-                              await removePendant(property);
+                              await removeValue(property.id);
                           }
                         : null
                 }

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

@@ -1,16 +1,23 @@
 import type { CSSProperties } from 'react';
 import {
     genSelectOptionId,
+    getRecastItemValue,
     type InformationProperty,
     type MultiSelectProperty,
     type RecastMetaProperty,
     type SelectOption,
     type SelectProperty,
+    useRecastBlock,
     useRecastBlockMeta,
     useSelectProperty,
+    SelectValue,
+    MultiSelectValue,
+    StatusValue,
+    InformationValue,
+    TextValue,
+    DateValue,
 } from '../../recast-block';
 import { type AsyncBlock } from '../../editor';
-import { usePendant } from '../use-pendant';
 import {
     type OptionType,
     PendantTypes,
@@ -41,8 +48,8 @@ const genOptionWithId = (options: OptionType[] = []) => {
 export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
     const { addProperty } = useRecastBlockMeta();
     const { createSelect } = useSelectProperty();
-    const { setPendant } = usePendant(block);
+    const recastBlock = useRecastBlock();
-
+    const { setValue } = getRecastItemValue(block);
     return async ({
         type,
         fieldName,
@@ -79,7 +86,14 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
                 tempSelectedId: newValue,
             });
 
-            await setPendant(newProperty, selectedId);
+            await setValue(
+                {
+                    id: newProperty.id,
+                    type: newProperty.type,
+                    value: selectedId,
+                } as SelectValue | MultiSelectValue | StatusValue,
+                recastBlock.id
+            );
         } else if (type === PendantTypes.Information) {
             const emailOptions = genOptionWithId(newPropertyItem.emailOptions);
 
@@ -97,7 +111,11 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
                 locationOptions,
             } as Omit<InformationProperty, 'id'>);
 
-            await setPendant(newProperty, {
+            await setValue(
+                {
+                    id: newProperty.id,
+                    type: newProperty.type,
+                    value: {
                         email: getOfficialSelected({
                             isMulti: true,
                             options: emailOptions,
@@ -116,7 +134,10 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
                             tempOptions: newPropertyItem.locationOptions,
                             tempSelectedId: newValue.location,
                         }),
-            });
+                    },
+                } as InformationValue,
+                recastBlock.id
+            );
         } else {
             // TODO: Color and background should use pendant config, but ui is not design now
             const iconConfig = getPendantConfigByType(type);
@@ -129,8 +150,14 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
                 color: iconConfig.color as CSSProperties['color'],
                 iconName: iconConfig.iconName,
             });
-
+            await setValue(
-            await setPendant(newProperty, newValue);
+                {
+                    id: newProperty.id,
+                    type: newProperty.type,
+                    value: newValue,
+                } as TextValue | DateValue,
+                recastBlock.id
+            );
         }
     };
 };
@@ -144,8 +171,9 @@ export const useOnUpdateSure = ({
     property: RecastMetaProperty;
 }) => {
     const { updateSelect } = useSelectProperty();
-    const { setPendant } = usePendant(block);
     const { updateProperty } = useRecastBlockMeta();
+    const { setValue } = getRecastItemValue(block);
+    const recastBlock = useRecastBlock();
 
     return async ({
         type,
@@ -199,7 +227,14 @@ export const useOnUpdateSure = ({
                 tempSelectedId: newValue,
             });
 
-            await setPendant(selectProperty, selectedId);
+            await setValue(
+                {
+                    id: selectProperty.id,
+                    type: selectProperty.type,
+                    value: selectedId,
+                } as SelectValue | MultiSelectValue | StatusValue,
+                recastBlock.id
+            );
         } else if (type === PendantTypes.Information) {
             // const { emailOptions, phoneOptions, locationOptions } =
             //     property as InformationProperty;
@@ -231,7 +266,11 @@ export const useOnUpdateSure = ({
                 locationOptions,
             } as InformationProperty);
 
-            await setPendant(newProperty, {
+            await setValue(
+                {
+                    id: newProperty.id,
+                    type: newProperty.type,
+                    value: {
                         email: getOfficialSelected({
                             isMulti: true,
                             options: emailOptions as SelectOption[],
@@ -250,9 +289,19 @@ export const useOnUpdateSure = ({
                             tempOptions: newPropertyItem.locationOptions,
                             tempSelectedId: newValue.location,
                         }),
-            });
+                    },
+                } as InformationValue,
+                recastBlock.id
+            );
         } else {
-            await setPendant(property, newValue);
+            await setValue(
+                {
+                    id: property.id,
+                    type: property.type,
+                    value: newValue,
+                } as TextValue | DateValue,
+                recastBlock.id
+            );
         }
 
         if (fieldName !== property.name) {

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

@@ -1,4 +1,4 @@
-import React, { FC, useRef } from 'react';
+import { FC, useRef } from 'react';
 import { AsyncBlock } from '../../editor';
 import { PendantHistoryPanel } from '../pendant-history-panel';
 import {
@@ -21,8 +21,6 @@ export const PendantPopover: FC<
             pointerEnterDelay={300}
             pointerLeaveDelay={200}
             placement="bottom-start"
-            // visible={true}
-            // trigger="click"
             content={
                 <PendantHistoryPanel
                     block={block}

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

@@ -1,5 +1,5 @@
 import {
-    MuiZoom,
+    MuiFade,
     Popover,
     PopperHandler,
     styled,
@@ -100,16 +100,15 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
                 );
             })}
             {hasAddBtn ? (
-                <MuiZoom in={showAddBtn}>
+                <MuiFade in={showAddBtn}>
                     <div>
                         <AddPendantPopover
                             block={block}
                             iconStyle={{ marginTop: 4 }}
                             container={blockRenderContainerRef.current}
-                            trigger="click"
                         />
                     </div>
-                </MuiZoom>
+                </MuiFade>
             ) : null}
         </BlockPendantContainer>
     );

libs/components/editor-core/src/block-pendant/use-pendant.ts

@@ -1,41 +0,0 @@
-import { removePropertyValueRecord, setPendantHistory } from './utils';
-import { AsyncBlock } from '../editor';
-import {
-    getRecastItemValue,
-    RecastMetaProperty,
-    useRecastBlock,
-} from '../recast-block';
-
-export const usePendant = (block: AsyncBlock) => {
-    // const { getProperties, removeProperty } = useRecastBlockMeta();
-    const recastBlock = useRecastBlock();
-    const { getValue, setValue, removeValue } = getRecastItemValue(block);
-    // const { updateSelect } = useSelectProperty();
-
-    const setPendant = async (property: RecastMetaProperty, newValue: any) => {
-        const nv = {
-            id: property.id,
-            type: property.type,
-            value: newValue,
-        };
-        await setValue(nv);
-        setPendantHistory({
-            recastBlockId: recastBlock.id,
-            blockId: block.id,
-            propertyId: property.id,
-        });
-    };
-
-    const removePendant = async (property: RecastMetaProperty) => {
-        await removeValue(property.id);
-        removePropertyValueRecord({
-            recastBlockId: block.id,
-            propertyId: property.id,
-        });
-    };
-
-    return {
-        setPendant,
-        removePendant,
-    };
-};

libs/components/editor-core/src/block-pendant/utils.ts

@@ -1,84 +1,7 @@
-import {
+import { PropertyType, SelectOption } from '../recast-block';
-    PropertyType,
+import { OptionIdType, OptionType, PendantConfig, PendantTypes } from './types';
-    RecastBlockValue,
-    RecastPropertyId,
-    SelectOption,
-} from '../recast-block';
-import { OptionIdType, OptionType } from './types';
 import { pendantConfig } from './config';
-import { PendantConfig, PendantTypes } from './types';
+import { nanoid } from 'nanoid';
-type Props = {
-    recastBlockId: string;
-    blockId: string;
-    propertyId: RecastPropertyId;
-};
-
-type StorageMap = {
-    [recastBlockId: string]: {
-        [propertyId: RecastPropertyId]: string;
-    };
-};
-
-const LOCAL_STORAGE_NAME = 'TEMPORARY_PENDANT_DATA';
-
-const ensureLocalStorage = () => {
-    const data = localStorage.getItem(LOCAL_STORAGE_NAME);
-    if (!data) {
-        localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify({}));
-    }
-};
-
-export const setPendantHistory = ({
-    recastBlockId,
-    blockId,
-    propertyId,
-}: Props) => {
-    ensureLocalStorage();
-    const data: StorageMap = JSON.parse(
-        localStorage.getItem(LOCAL_STORAGE_NAME) as string
-    );
-
-    if (!data[recastBlockId]) {
-        data[recastBlockId] = {};
-    }
-    const propertyValueRecord = data[recastBlockId];
-    propertyValueRecord[propertyId] = blockId;
-
-    localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
-};
-
-export const getPendantHistory = ({
-    recastBlockId,
-}: {
-    recastBlockId: string;
-}) => {
-    ensureLocalStorage();
-    const data: StorageMap = JSON.parse(
-        localStorage.getItem(LOCAL_STORAGE_NAME) as string
-    );
-
-    return data[recastBlockId] ?? {};
-};
-
-export const removePropertyValueRecord = ({
-    recastBlockId,
-    propertyId,
-}: {
-    recastBlockId: string;
-    propertyId: RecastPropertyId;
-}) => {
-    ensureLocalStorage();
-    const data: StorageMap = JSON.parse(
-        localStorage.getItem(LOCAL_STORAGE_NAME) as string
-    );
-    if (!data[recastBlockId]) {
-        return;
-    }
-
-    delete data[recastBlockId][propertyId];
-
-    localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
-};
 
 /**
  * In select pendant panel, use mock options instead of use `createSelect` when add or delete option
@@ -107,7 +30,7 @@ export const getOfficialSelected = ({
             .map(id => {
                 return tempOptions.findIndex((o: OptionType) => o.id === id);
             })
-            .filter(index => index != -1);
+            .filter(index => index !== -1);
         selectedId = selectedIndex.map((index: number) => {
             return options[index].id;
         });
@@ -130,7 +53,7 @@ export const getPendantIconsConfigByName = (
     return pendantConfig[pendantName];
 };
 
-export const genBasicOption = ({
+export const generateBasicOption = ({
     index,
     iconConfig,
     name = '',
@@ -159,22 +82,22 @@ export const genBasicOption = ({
 /**
  * Status Pendant is a Select Pendant built-in some options
  * **/
-export const genInitialOptions = (
+export const generateInitialOptions = (
     type: PendantTypes,
     iconConfig: PendantConfig
 ) => {
     if (type === PendantTypes.Status) {
         return [
-            genBasicOption({ index: 0, iconConfig, name: 'No Started' }),
+            generateBasicOption({ index: 0, iconConfig, name: 'No Started' }),
-            genBasicOption({
+            generateBasicOption({
                 index: 1,
                 iconConfig,
                 name: 'In Progress',
             }),
-            genBasicOption({ index: 2, iconConfig, name: 'Complete' }),
+            generateBasicOption({ index: 2, iconConfig, name: 'Complete' }),
         ];
     }
-    return [genBasicOption({ index: 0, iconConfig })];
+    return [generateBasicOption({ index: 0, iconConfig })];
 };
 
 export const checkPendantForm = (
@@ -222,3 +145,10 @@ export const checkPendantForm = (
 
     return { passed: true, message: 'Check passed !' };
 };
+
+const upperFirst = (str: string) => {
+    return `${str[0].toUpperCase()}${str.slice(1)}`;
+};
+
+export const generateRandomFieldName = (type: PendantTypes) =>
+    upperFirst(`${type}#${nanoid(4)}`);

libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx

@@ -1,28 +0,0 @@
-import { AsyncBlock, BlockEditor } from '../editor';
-import { ReactElement } from 'react';
-
-interface DragDropWrapperProps {
-    editor: BlockEditor;
-    block: AsyncBlock;
-    children: ReactElement | null;
-}
-
-export function DragDropWrapper({
-    children,
-    editor,
-    block,
-}: DragDropWrapperProps) {
-    const handlerDragOver: React.DragEventHandler<HTMLDivElement> = event => {
-        event.preventDefault();
-        if (block.dom) {
-            editor.getHooks().afterOnNodeDragOver(event, {
-                blockId: block.id,
-                dom: block.dom,
-                rect: block.dom?.getBoundingClientRect(),
-                type: block.type,
-                properties: block.getProperties(),
-            });
-        }
-    };
-    return <div onDragOver={handlerDragOver}>{children}</div>;
-}

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

@@ -1 +0,0 @@
-export * from './DragDropWrapper';

libs/components/editor-core/src/editor/keyboard/keyboard.ts

@@ -35,20 +35,6 @@ export class KeyboardManager {
         }
         this.handler_map = {};
 
-        // WARNING: Remove the filter of hotkeys, the input event of input/select/textarea will be filtered out by default
-        // When there is a problem with the input of the text component, you need to pay attention to this
-        const old_filter = HotKeys.filter;
-        HotKeys.filter = event => {
-            let parent = (event.target as Element).parentElement;
-            while (parent) {
-                if (parent === editor.container) {
-                    return old_filter(event);
-                }
-                parent = parent.parentElement;
-            }
-
-            return true;
-        };
         HotKeys.setScope('editor');
 
         // this.init_common_shortcut_cb();

libs/components/editor-core/src/editor/plugin/hooks.ts

@@ -113,13 +113,6 @@ export class Hooks implements HooksRunner, PluginHooks {
         this._runHook(HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE, e);
     }
 
-    public afterOnNodeDragOver(
-        e: React.DragEvent<Element>,
-        node: BlockDomInfo
-    ): void {
-        this._runHook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node);
-    }
-
     public onSearch(): void {
         this._runHook(HookType.ON_SEARCH);
     }

libs/components/editor-core/src/editor/scroll/scroll.ts

@@ -30,7 +30,6 @@ export class ScrollManager {
 
     constructor(editor: BlockEditor) {
         this._editor = editor;
-        (window as any).scrollManager = this;
     }
 
     private _updateScrollInfo(left: number, top: number) {
@@ -111,6 +110,7 @@ export class ScrollManager {
     }
 
     public emitScrollEvent(event: UIEvent) {
+        this.scrollContainer = event.target as HTMLElement;
         this._scrollDirection = this._getScrollDirection();
         this._scrollMoveOffset = Math.abs(
             this.scrollContainer.scrollTop - this._scrollRecord[0]

libs/components/editor-core/src/editor/types.ts

@@ -177,7 +177,6 @@ export enum HookType {
     ON_ROOTNODE_DRAG_END = 'onRootNodeDragEnd',
     ON_ROOTNODE_DRAG_OVER_CAPTURE = 'onRootNodeDragOverCapture',
     ON_ROOTNODE_DROP = 'onRootNodeDrop',
-    AFTER_ON_NODE_DRAG_OVER = 'afterOnNodeDragOver',
     BEFORE_COPY = 'beforeCopy',
     BEFORE_CUT = 'beforeCut',
     ON_ROOTNODE_SCROLL = 'onRootNodeScroll',
@@ -219,10 +218,6 @@ export interface HooksRunner {
     onRootNodeDragEnd: (e: React.DragEvent<Element>) => void;
     onRootNodeDragLeave: (e: React.DragEvent<Element>) => void;
     onRootNodeDrop: (e: React.DragEvent<Element>) => void;
-    afterOnNodeDragOver: (
-        e: React.DragEvent<Element>,
-        node: BlockDomInfo
-    ) => void;
     beforeCopy: (e: ClipboardEvent) => void;
     beforeCut: (e: ClipboardEvent) => void;
     onRootNodeScroll: (e: React.UIEvent) => void;

libs/components/editor-core/src/index.ts

@@ -15,7 +15,4 @@ export * from './kanban/types';
 
 export * from './utils';
 
-export * from './drag-drop-wrapper';
-export * from './block-content-wrapper';
-
 export * from './editor';

libs/components/editor-core/src/kanban/atom.ts

@@ -6,10 +6,15 @@ import {
     PropertyType,
     RecastBlockValue,
     RecastMetaProperty,
-    RecastPropertyId,
 } from '../recast-block/types';
 import type { DefaultGroup, KanbanGroup } from './types';
 import { DEFAULT_GROUP_ID } from './types';
+import {
+    generateInitialOptions,
+    generateRandomFieldName,
+    getPendantIconsConfigByName,
+} from '../block-pendant/utils';
+import { SelectOption } from '../recast-block';
 
 /**
  * - If the `groupBy` is `SelectProperty` or `MultiSelectProperty`, return `(Multi)SelectProperty.options`.
@@ -23,6 +28,7 @@ export const getGroupOptions = async (
         return [];
     }
     switch (groupBy.type) {
+        case PropertyType.Status:
         case PropertyType.Select:
         case PropertyType.MultiSelect: {
             return groupBy.options.map(option => ({
@@ -51,12 +57,15 @@ const isValueBelongOption = (
     option: KanbanGroup
 ) => {
     switch (propertyValue.type) {
-        case PropertyType.Select: {
+        case PropertyType.Select || PropertyType.Status: {
             return propertyValue.value === option.id;
         }
         case PropertyType.MultiSelect: {
             return propertyValue.value.some(i => i === option.id);
         }
+        // case PropertyType.Status: {
+        //     return propertyValue.value === option.id;
+        // }
         // case PropertyType.Text: {
         // TOTODO:DO support this type
         // }
@@ -96,40 +105,67 @@ export const calcCardGroup = (
 /**
  * Set group value for the card block
  */
-export const moveCardToGroup = async (
+export const moveCardToGroup = async ({
-    groupById: RecastPropertyId,
+    groupBy,
-    cardBlock: RecastItem,
+    cardBlock,
-    group: KanbanGroup
+    group,
-) => {
+    recastBlock,
+}: {
+    groupBy: RecastMetaProperty;
+    cardBlock: RecastItem;
+    group: KanbanGroup;
+    recastBlock: RecastBlock;
+}) => {
     const { setValue, removeValue } = getRecastItemValue(cardBlock);
     let success = false;
     if (group.id === DEFAULT_GROUP_ID) {
-        success = await removeValue(groupById);
+        success = await removeValue(groupBy.id);
         return false;
     }
+
     switch (group.type) {
         case PropertyType.Select: {
-            success = await setValue({
+            success = await setValue(
-                id: groupById,
+                {
+                    id: groupBy.id,
                     type: group.type,
                     value: group.id,
-            });
+                },
+                recastBlock.id
+            );
+            break;
+        }
+        case PropertyType.Status: {
+            success = await setValue(
+                {
+                    id: groupBy.id,
+                    type: group.type,
+                    value: group.id,
+                },
+                recastBlock.id
+            );
             break;
         }
         case PropertyType.MultiSelect: {
-            success = await setValue({
+            success = await setValue(
-                id: groupById,
+                {
+                    id: groupBy.id,
                     type: group.type,
                     value: [group.id],
-            });
+                },
+                recastBlock.id
+            );
             break;
         }
         case PropertyType.Text: {
-            success = await setValue({
+            success = await setValue(
-                id: groupById,
+                {
+                    id: groupBy.id,
                     type: group.type,
                     value: group.id,
-            });
+                },
+                recastBlock.id
+            );
             break;
         }
         default:
@@ -194,14 +230,18 @@ export const genDefaultGroup = (groupBy: RecastMetaProperty): DefaultGroup => ({
     items: [],
 });
 
-export const DEFAULT_GROUP_BY_PROPERTY = {
+export const generateDefaultGroupByProperty = (): {
-    name: 'Status',
+    name: string;
-    options: [
+    options: Omit<SelectOption, 'id'>[];
-        { name: 'No Started', color: '#E53535', background: '#FFCECE' },
+    type: PropertyType.Status;
-        { name: 'In Progress', color: '#A77F1A', background: '#FFF5AB' },
+} => ({
-        { name: 'Complete', color: '#3C8867', background: '#C5FBE0' },
+    name: generateRandomFieldName(PropertyType.Status),
-    ],
+    type: PropertyType.Status,
-};
+    options: generateInitialOptions(
+        PropertyType.Status,
+        getPendantIconsConfigByName(PropertyType.Status)
+    ),
+});
 
 /**
  * Unwrap blocks from the grid recursively.

libs/components/editor-core/src/kanban/group.ts

@@ -7,6 +7,7 @@ export const useKanbanGroup = (groupBy: RecastMetaProperty) => {
     const { updateSelect } = useSelectProperty();
 
     switch (groupBy.type) {
+        case PropertyType.Status:
         case PropertyType.MultiSelect:
         case PropertyType.Select: {
             const {

libs/components/editor-core/src/kanban/kanban.ts

@@ -18,8 +18,8 @@ import {
 import { supportChildren } from '../utils';
 import {
     calcCardGroup,
-    DEFAULT_GROUP_BY_PROPERTY,
     genDefaultGroup,
+    generateDefaultGroupByProperty,
     getCardGroup,
     getGroupOptions,
     moveCardToAfter,
@@ -48,6 +48,7 @@ export const useRecastKanbanGroupBy = () => {
     // Add other type groupBy support
     const supportedGroupBy = getProperties().filter(
         prop =>
+            prop.type === PropertyType.Status ||
             prop.type === PropertyType.Select ||
             prop.type === PropertyType.MultiSelect
     );
@@ -88,7 +89,8 @@ export const useRecastKanbanGroupBy = () => {
     // TODO: support other property type
     if (
         groupByProperty.type !== PropertyType.Select &&
-        groupByProperty.type !== PropertyType.MultiSelect
+        groupByProperty.type !== PropertyType.MultiSelect &&
+        groupByProperty.type !== PropertyType.Status
     ) {
         console.warn('Not support groupBy type', groupByProperty);
 
@@ -134,7 +136,7 @@ export const useInitKanbanEffect = ():
             }
             // 3. no group by, no properties
             // create a new property and set it as group by
-            const prop = await createSelect(DEFAULT_GROUP_BY_PROPERTY);
+            const prop = await createSelect(generateDefaultGroupByProperty());
             await setGroupBy(prop.id);
         };
 
@@ -197,7 +199,12 @@ export const useRecastKanban = () => {
                         beforeBlock: string | null,
                         afterBlock: string | null
                     ) => {
-                        await moveCardToGroup(groupBy.id, child, kanbanMap[id]);
+                        await moveCardToGroup({
+                            groupBy,
+                            cardBlock: child,
+                            group: kanbanMap[id],
+                            recastBlock,
+                        });
                         if (beforeBlock) {
                             const block = await editor.getBlockById(
                                 beforeBlock
@@ -286,7 +293,12 @@ export const useKanban = () => {
             );
             if (isChangedGroup) {
                 // 1.2 Move to the target group
-                await moveCardToGroup(groupBy.id, targetCard, targetGroup);
+                await moveCardToGroup({
+                    groupBy,
+                    cardBlock: targetCard,
+                    group: targetGroup,
+                    recastBlock,
+                });
             }
 
             // 2. Reorder the card
@@ -324,7 +336,12 @@ export const useKanban = () => {
             }
             recastBlock.append(newBlock);
             const newCard = newBlock as unknown as RecastItem;
-            await moveCardToGroup(groupBy.id, newCard, group);
+            await moveCardToGroup({
+                groupBy,
+                cardBlock: newCard,
+                group,
+                recastBlock,
+            });
         },
         [editor, groupBy.id, recastBlock]
     );

libs/components/editor-core/src/kanban/types.ts

@@ -46,7 +46,10 @@ export type DefaultGroup = KanbanGroupBase & {
 
 type SelectGroup = KanbanGroupBase &
     SelectOption & {
-        type: PropertyType.Select | PropertyType.MultiSelect;
+        type:
+            | PropertyType.Select
+            | PropertyType.MultiSelect
+            | PropertyType.Status;
     };
 
 type TextGroup = KanbanGroupBase & {

libs/components/editor-core/src/recast-block/history.ts

@@ -0,0 +1,84 @@
+import { RecastPropertyId } from './types';
+
+// TODO: The logic for keeping history should be supported by the network layer
+type Props = {
+    recastBlockId: string;
+    blockId: string;
+    propertyId: RecastPropertyId;
+};
+
+type HistoryStorageMap = {
+    [recastBlockId: string]: {
+        [propertyId: RecastPropertyId]: string[];
+    };
+};
+
+const LOCAL_STORAGE_NAME = 'TEMPORARY_HISTORY_DATA';
+
+const ensureLocalStorage = () => {
+    const data = localStorage.getItem(LOCAL_STORAGE_NAME);
+    if (!data) {
+        localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify({}));
+    }
+};
+const ensureHistoryAtom = (
+    data: HistoryStorageMap,
+    recastBlockId: string,
+    propertyId: RecastPropertyId
+): HistoryStorageMap => {
+    if (!data[recastBlockId]) {
+        data[recastBlockId] = {};
+    }
+    if (!data[recastBlockId][propertyId]) {
+        data[recastBlockId][propertyId] = [];
+    }
+    return data;
+};
+
+export const setHistory = ({ recastBlockId, blockId, propertyId }: Props) => {
+    ensureLocalStorage();
+    const data: HistoryStorageMap = JSON.parse(
+        localStorage.getItem(LOCAL_STORAGE_NAME) as string
+    );
+    ensureHistoryAtom(data, recastBlockId, propertyId);
+    const propertyHistory = data[recastBlockId][propertyId];
+
+    if (propertyHistory.includes(blockId)) {
+        const idIndex = propertyHistory.findIndex(id => id === blockId);
+        propertyHistory.splice(idIndex, 1);
+    }
+
+    propertyHistory.push(blockId);
+
+    localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
+};
+
+export const getHistory = ({ recastBlockId }: { recastBlockId: string }) => {
+    ensureLocalStorage();
+    const data: HistoryStorageMap = JSON.parse(
+        localStorage.getItem(LOCAL_STORAGE_NAME) as string
+    );
+
+    return data[recastBlockId] ?? {};
+};
+
+export const removeHistory = ({
+    recastBlockId,
+    blockId,
+    propertyId,
+}: Props) => {
+    ensureLocalStorage();
+    const data: HistoryStorageMap = JSON.parse(
+        localStorage.getItem(LOCAL_STORAGE_NAME) as string
+    );
+    ensureHistoryAtom(data, recastBlockId, propertyId);
+
+    const propertyHistory = data[recastBlockId][propertyId];
+
+    if (propertyHistory.includes(blockId)) {
+        const idIndex = propertyHistory.findIndex(id => id === blockId);
+        propertyHistory.splice(idIndex, 1);
+    }
+
+    localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
+};

libs/components/editor-core/src/recast-block/property.ts

@@ -15,6 +15,7 @@ import {
     SelectProperty,
     TABLE_VALUES_KEY,
 } from './types';
+import { getHistory, removeHistory, setHistory } from './history';
 
 /**
  * Generate a unique id for a property
@@ -240,7 +241,13 @@ export const getRecastItemValue = (block: RecastItem | AsyncBlock) => {
         return props[id];
     };
 
-    const setValue = (newValue: RecastBlockValue) => {
+    const setValue = (newValue: RecastBlockValue, recastBlockId: string) => {
+        setHistory({
+            recastBlockId: recastBlockId,
+            blockId: block.id,
+            propertyId: newValue.id,
+        });
+
         return recastItem.setProperty(TABLE_VALUES_KEY, {
             ...props,
             [newValue.id]: newValue,
@@ -249,22 +256,30 @@ export const getRecastItemValue = (block: RecastItem | AsyncBlock) => {
 
     const removeValue = (propertyId: RecastPropertyId) => {
         const { [propertyId]: omitted, ...restProps } = props;
+
+        removeHistory({
+            recastBlockId: block.id,
+            propertyId: propertyId,
+            blockId: block.id,
+        });
+
         return recastItem.setProperty(TABLE_VALUES_KEY, restProps);
     };
-    return { getAllValue, getValue, setValue, removeValue };
+
+    const getValueHistory = getHistory;
+
+    return { getAllValue, getValue, setValue, removeValue, getValueHistory };
 };
 
 const isSelectLikeProperty = (
     metaProperty?: RecastMetaProperty
-): metaProperty is SelectProperty | MultiSelectProperty => {
+): metaProperty is SelectProperty | MultiSelectProperty | StatusProperty => {
-    if (
+    return (
-        !metaProperty ||
+        metaProperty &&
-        (metaProperty.type !== PropertyType.Select &&
+        (metaProperty.type === PropertyType.Status ||
-            metaProperty.type !== PropertyType.MultiSelect)
+            metaProperty.type === PropertyType.Select ||
-    ) {
+            metaProperty.type === PropertyType.MultiSelect)
-        return false;
+    );
-    }
-    return true;
 };
 
 /**
@@ -312,7 +327,7 @@ export const useSelectProperty = () => {
     };
 
     const updateSelect = (
-        selectProperty: SelectProperty | MultiSelectProperty
+        selectProperty: StatusProperty | SelectProperty | MultiSelectProperty
     ) => {
         // if (typeof selectProperty === 'string') {
         //     const maybeSelectProperty = getProperty(selectProperty);

libs/components/editor-plugins/src/comment/Container.tsx

@@ -64,7 +64,7 @@ const StyledContainerForAddCommentContainer = styled('div')(({ theme }) => {
         zIndex: 1,
         display: 'flex',
         borderRadius: theme.affine.shape.borderRadius,
-        boxShadow: theme.affine.shadows.shadowSxDownLg,
+        boxShadow: theme.affine.shadows.shadow1,
         backgroundColor: theme.affine.palette.white,
     };
 });

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

@@ -31,7 +31,7 @@ const RootContainer = styled('div')(({ theme }) => {
         width: 352,
         maxHeight: 525,
         borderRadius: '10px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        boxShadow: theme.affine.shadows.shadow1,
         backgroundColor: '#fff',
         padding: '8px 4px',
     };

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

@@ -75,13 +75,13 @@ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
     ) : null;
 };
 
-const ToolbarContainer = styled('div')({
+const ToolbarContainer = styled('div')(({ theme }) => ({
     position: 'absolute',
     zIndex: 1,
     display: 'flex',
     alignItems: 'center',
     padding: '0 12px',
     borderRadius: '10px',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     backgroundColor: '#fff',
-});
+}));

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

@@ -1,10 +1,19 @@
-import { useState, useEffect, FC } from 'react';
+import {
+    useState,
+    useEffect,
+    FC,
+    type MouseEvent,
+    type DragEvent,
+    type ReactNode,
+    type CSSProperties,
+} from 'react';
 
 import {
     Virgo,
     BlockDomInfo,
     PluginHooks,
     BlockDropPlacement,
+    LINE_GAP,
 } from '@toeverything/framework/virgo';
 import { Button } from '@toeverything/components/common';
 import { styled } from '@toeverything/components/ui';
@@ -14,7 +23,7 @@ import { distinctUntilChanged, Subject } from 'rxjs';
 import { HandleChildIcon } from '@toeverything/components/icons';
 import { MENU_WIDTH } from './menu-config';
 
-const MENU_BUTTON_OFFSET = 12;
+const MENU_BUTTON_OFFSET = 4;
 
 export type LineInfoSubject = Subject<
     | {
@@ -64,13 +73,13 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
     };
     const bottomLineStyle = {
         ...horizontalLineStyle,
-        top: intersectionRect.bottom + 1 - rootRect.y,
+        top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP,
     };
 
     const verticalLineStyle = {
         ...lineStyle,
         width: 2,
-        height: intersectionRect.height,
+        height: intersectionRect.height - LINE_GAP,
         top: intersectionRect.y - rootRect.y,
     };
     const leftLineStyle = {
@@ -93,10 +102,10 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
 }
 
 function DragComponent(props: {
-    children: React.ReactNode;
+    children: ReactNode;
-    style: React.CSSProperties;
+    style: CSSProperties;
-    onDragStart: (event: React.DragEvent<Element>) => void;
+    onDragStart: (event: DragEvent<Element>) => void;
-    onDragEnd: (event: React.DragEvent<Element>) => void;
+    onDragEnd: (event: DragEvent<Element>) => void;
 }) {
     const { style, children, onDragStart, onDragEnd } = props;
     return (
@@ -122,7 +131,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
     const [block, setBlock] = useState<BlockDomInfo | undefined>();
     const [line, setLine] = useState<LineInfo | undefined>(undefined);
 
-    const handleDragStart = async (event: React.DragEvent<Element>) => {
+    const handleDragStart = async (event: DragEvent<Element>) => {
         event.stopPropagation();
         setVisible(false);
 
@@ -138,12 +147,12 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
         }
     };
 
-    const handleDragEnd = (event: React.DragEvent<Element>) => {
+    const handleDragEnd = (event: DragEvent<Element>) => {
         event.preventDefault();
         setLine(undefined);
     };
 
-    const onClick = (event: React.MouseEvent) => {
+    const onClick = (event: MouseEvent<Element>) => {
         if (block == null) return;
         const currentTarget = event.currentTarget;
         editor.selection.setSelectedNodesIds([block.blockId]);
@@ -200,11 +209,10 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
                     style={{
                         position: 'absolute',
                         left:
-                            Math.min(
                             block.rect.left -
                             MENU_WIDTH -
-                                    MENU_BUTTON_OFFSET
+                            MENU_BUTTON_OFFSET -
-                            ) - rootRect.left,
+                            rootRect.left,
                         top: block.rect.top - rootRect.top,
                         opacity: visible ? 1 : 0,
                         zIndex: 1,
@@ -240,7 +248,7 @@ const Draggable = styled(Button)({
     justifyContent: 'center',
     backgroundColor: 'transparent',
     width: '16px',
-    height: '20px',
+    height: '22px',
     '& svg': {
         fontSize: '20px',
         marginLeft: '-2px',
@@ -253,5 +261,5 @@ const Draggable = styled(Button)({
 
 const LigoLeftMenu = styled('div')({
     backgroundColor: 'transparent',
-    marginRight: '4px',
+    // marginRight: '4px',
 });

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

@@ -1,5 +1,5 @@
 import { BlockDomInfo, HookType } from '@toeverything/framework/virgo';
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
 import { BasePlugin } from '../../base-plugin';
 import { ignoreBlockTypes } from './menu-config';
 import { LineInfoSubject, LeftMenuDraggable } from './LeftMenuDraggable';
@@ -37,7 +37,7 @@ export class LeftMenuPlugin extends BasePlugin {
         );
         this.sub.add(
             this.hooks
-                .get(HookType.AFTER_ON_NODE_DRAG_OVER)
+                .get(HookType.ON_ROOTNODE_DRAG_OVER)
                 .subscribe(this._handleDragOverBlockNode)
         );
         this.sub.add(
@@ -65,24 +65,30 @@ export class LeftMenuPlugin extends BasePlugin {
     private _onDrop = () => {
         this._lineInfo.next(undefined);
     };
-    private _handleDragOverBlockNode = async ([event, blockInfo]: [
+    private _handleDragOverBlockNode = async (
-        React.DragEvent<Element>,
+        event: React.DragEvent<Element>
-        BlockDomInfo
+    ) => {
-    ]) => {
-        const { type, dom, blockId } = blockInfo;
         event.preventDefault();
-        if (this.editor.dragDropManager.isDragBlock(event)) {
+        if (!this.editor.dragDropManager.isDragBlock(event)) return;
-            if (ignoreBlockTypes.includes(type)) {
+        const block = await this.editor.getBlockByPoint(
-                return;
+            new Point(event.clientX, event.clientY)
-            }
-            const direction =
-                await this.editor.dragDropManager.checkBlockDragTypes(
-                    event,
-                    dom,
-                    blockId
         );
-            this._lineInfo.next({ direction, blockInfo });
+        if (block == null || ignoreBlockTypes.includes(block.type)) return;
-        }
+        const direction = await this.editor.dragDropManager.checkBlockDragTypes(
+            event,
+            block.dom,
+            block.id
+        );
+        this._lineInfo.next({
+            direction,
+            blockInfo: {
+                blockId: block.id,
+                dom: block.dom,
+                rect: block.dom.getBoundingClientRect(),
+                type: block.type,
+                properties: block.getProperties(),
+            },
+        });
     };
 
     private _handleMouseMove = async (

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

@@ -8,6 +8,7 @@ import {
     commonListContainer,
 } from '@toeverything/components/common';
 import { domToRect } from '@toeverything/utils';
+import { styled } from '@toeverything/components/ui';
 
 import { QueryResult } from '../../search';
 
@@ -152,13 +153,12 @@ export const ReferenceMenuContainer = ({
     }, [hooks, handle_key_down]);
 
     return isShow ? (
-        <div
+        <RootContainer
             ref={menu_ref}
-            className={styles('rootContainer')}
             onKeyDownCapture={handle_key_down}
             style={style}
         >
-            <div className={styles('contentContainer')}>
+            <ContentContainer>
                 <CommonList
                     items={
                         searchBlocks?.map(
@@ -169,24 +169,23 @@ export const ReferenceMenuContainer = ({
                     currentItem={current_item}
                     setCurrentItem={set_current_item}
                 />
-            </div>
+            </ContentContainer>
-        </div>
+        </RootContainer>
     ) : null;
 };
 
-const styles = style9.create({
+const RootContainer = styled('div')(({ theme }) => ({
-    rootContainer: {
     position: 'fixed',
     zIndex: 1,
-        maxHeight: 525,
+    maxHeight: '525px',
     borderRadius: '10px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     backgroundColor: '#fff',
     padding: '8px 4px',
-    },
+}));
-    contentContainer: {
+
+const ContentContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     overflow: 'hidden',
-        maxHeight: 493,
+    maxHeight: '493px',
-    },
+}));
-});

libs/components/editor-plugins/src/placeholder/PlaceholderPanel.tsx

@@ -141,8 +141,7 @@ export const PlaceholderPanel = (props: PlaceholderPanelProps) => {
         setOpen(false);
         props.onClickTips();
     };
-    const templateList: Array<TemplateMeta> =
+    const templateList = TemplateFactory.defaultTemplateList;
-        TemplateFactory.defaultTemplateList;
     const handleNewFromTemplate = async (template: TemplateMeta) => {
         const pageId = await editor.getRootBlockId();
         const newPage = await services.api.editorBlock.getBlock(
@@ -162,7 +161,6 @@ export const PlaceholderPanel = (props: PlaceholderPanelProps) => {
         setOpen(false);
     };
     return (
-        <>
         <PlaceholderPanelContainer
             style={{
                 top: point.y + 'px',
@@ -171,8 +169,7 @@ export const PlaceholderPanel = (props: PlaceholderPanelProps) => {
             }}
         >
             <EmptyPageTipContainer onClick={handleClickEmptyPage}>
-                    Press Enter to continue with an empty page, or pick a
+                Press Enter to continue with an empty page, or pick a template
-                    template
             </EmptyPageTipContainer>
             <div style={{ marginTop: '4px', marginLeft: '-8px' }}>
                 {templateList.map((template, index) => {
@@ -189,6 +186,5 @@ export const PlaceholderPanel = (props: PlaceholderPanelProps) => {
                 })}
             </div>
         </PlaceholderPanelContainer>
-        </>
     );
 };

libs/components/editor-plugins/src/search/Search.tsx

@@ -7,6 +7,7 @@ import {
     TransitionsModal,
     MuiBox as Box,
     MuiBox,
+    styled,
 } from '@toeverything/components/ui';
 import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
 import { throttle } from '@toeverything/utils';
@@ -21,26 +22,6 @@ const styles = style9.create({
         display: 'flex',
         flexDirection: 'column',
     },
-    search: {
-        margin: '0.5em',
-        backgroundColor: 'white',
-        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        padding: '16px 32px',
-        borderRadius: '10px',
-    },
-    result: {
-        margin: '0.5em',
-        backgroundColor: 'white',
-        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        padding: '16px 32px',
-        borderRadius: '10px',
-        transitionProperty: 'max-height',
-        transitionDuration: '300ms',
-        transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        transitionDelay: '0ms',
-        overflowX: 'hidden',
-        overflowY: 'hidden',
-    },
     resultItem: {
         width: '100%',
     },
@@ -96,15 +77,14 @@ export const Search = (props: SearchProps) => {
             }}
         >
             <Box className={styles('wrapper')}>
-                <input
+                <SearchInput
-                    className={styles('search')}
                     autoFocus
                     value={search}
                     onChange={e => set_search(e.target.value)}
                 />
-                <MuiBox
+                <ResultContainer
                     sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
-                    className={styles('result', {
+                    className={styles({
                         resultHide: !result.length,
                     })}
                 >
@@ -119,8 +99,30 @@ export const Search = (props: SearchProps) => {
                             }}
                         />
                     ))}
-                </MuiBox>
+                </ResultContainer>
             </Box>
         </TransitionsModal>
     );
 };
+
+const SearchInput = styled('input')(({ theme }) => ({
+    margin: '0.5em',
+    backgroundColor: 'white',
+    boxShadow: theme.affine.shadows.shadow1,
+    padding: '16px 32px',
+    borderRadius: '10px',
+}));
+
+const ResultContainer = styled(MuiBox)(({ theme }) => ({
+    margin: '0.5em',
+    backgroundColor: 'white',
+    boxShadow: theme.affine.shadows.shadow1,
+    padding: '16px 32px',
+    borderRadius: '10px',
+    transitionProperty: 'max-height',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDelay: '0ms',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+}));

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

@@ -20,7 +20,7 @@ const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
             width: '20px',
             height: '20px',
             borderRadius: '5px',
-            boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+            boxShadow: theme.affine.shadows.shadow1,
             color: theme.affine.palette.primary,
             cursor: 'pointer',
             backgroundColor: theme.affine.palette.white,

libs/components/layout/src/settings-sidebar/Comments/CommentItem.tsx

@@ -94,7 +94,7 @@ const StyledContainerForCommentItem = styled('div', {
         transition: 'left 150ms ease-in-out',
         backgroundColor: theme.affine.palette.white,
         '&:hover': {
-            boxShadow: theme.affine.shadows.shadowSxDownLg,
+            boxShadow: theme.affine.shadows.shadow1,
         },
     };
 });

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

@@ -12,17 +12,22 @@ import { useNavigate } from 'react-router';
 import { formatDistanceToNow } from 'date-fns';
 
 const StyledWrapper = styled('div')({
-    margin: '0 16px 0 32px',
+    paddingLeft: '12px',
     span: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
     },
     '.item': {
+        height: '32px',
         display: 'flex',
         alignItems: 'center',
-        ustifyContent: 'space-between',
+        justifyContent: 'space-between',
-        padding: '7px 0px',
+        paddingRight: '20px',
         whiteSpace: 'nowrap',
+        '&:hover': {
+            background: '#f5f7f8',
+            borderRadius: '5px',
+        },
     },
     '.itemButton': {
         padding: 0,
@@ -31,6 +36,7 @@ const StyledWrapper = styled('div')({
     '.itemLeft': {
         color: '#4c6275',
         marginRight: '20px',
+        cursor: 'pointer',
         span: {
             fontSize: 14,
         },
@@ -44,6 +50,14 @@ const StyledWrapper = styled('div')({
     },
 });
 
+const StyledItemContent = styled('div')({
+    width: '100%',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+});
+
 export const Activities = () => {
     const navigate = useNavigate();
     const { user, currentSpaceId } = useUserAndSpaces();
@@ -51,34 +65,29 @@ export const Activities = () => {
     const userId = user?.id;
 
     /* temporarily remove:show recently viewed documents */
-    // const fetchRecentPages = useCallback(async () => {
+    const fetchRecentPages = useCallback(async () => {
-    //     if (!userId || !currentSpaceId) {
+        if (!userId || !currentSpaceId) {
-    //         return;
+            return;
-    //     }
+        }
-    //     const recent_pages = await services.api.userConfig.getRecentPages(
+        const recent_pages = await services.api.userConfig.getRecentPages(
-    //         currentSpaceId,
+            currentSpaceId,
-    //         userId
+            userId
-    //     );
+        );
-    //     setRecentPages(recent_pages);
+        setRecentPages(recent_pages);
-    // }, [userId, currentSpaceId]);
+    }, [userId, currentSpaceId]);
 
-    // useEffect(() => {
+    useEffect(() => {
-    //     (async () => {
+        (async () => {
-    //         await fetchRecentPages();
+            await fetchRecentPages();
-    //     })();
+        })();
-    // }, [fetchRecentPages]);
+    }, [fetchRecentPages]);
-
-    /* show recently edit documents */
-    const getRecentEditPages = async (state, block) => {
-        console.log(state, await block.children());
-    };
 
     useEffect(() => {
         let unobserve: () => void;
         const observe = async () => {
             unobserve = await services.api.userConfig.observe(
                 { workspace: currentSpaceId },
-                getRecentEditPages
+                fetchRecentPages
             );
         };
         observe();
@@ -86,16 +95,15 @@ export const Activities = () => {
         return () => {
             unobserve?.();
         };
-    }, [currentSpaceId, getRecentEditPages]);
+    }, [currentSpaceId, fetchRecentPages]);
 
     return (
         <StyledWrapper>
-            <List>
+            <List style={{ padding: '0px' }}>
                 {recentPages.map(({ id, title, lastOpenTime }) => {
                     return (
                         <ListItem className="item" key={id}>
-                            <ListItemButton
+                            <StyledItemContent
-                                className="itemButton"
                                 onClick={() => {
                                     navigate(`/${currentSpaceId}/${id}`);
                                 }}
@@ -110,7 +118,7 @@ export const Activities = () => {
                                         includeSeconds: true,
                                     })}
                                 />
-                            </ListItemButton>
+                            </StyledItemContent>
                         </ListItem>
                     );
                 })}

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

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

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

@@ -101,9 +101,6 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                                 <ArrowDropDownIcon />
                             ))}
                     </Action>
-                    {/*<Action>*/}
-                    {/*    <DocumentIcon />*/}
-                    {/*</Action>*/}
 
                     <div className={styles['ItemContent']}>
                         <span
@@ -161,7 +158,6 @@ export function Action({
             style={
                 {
                     ...style,
-                    // cursor,
                     '--fill': active?.fill,
                     '--background': active?.background,
                 } as CSSProperties

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss

@@ -4,6 +4,10 @@
     list-style: none;
     padding: 6px 0;
     font-size: 14px;
+    &:hover {
+        background: #f5f7f8;
+        border-radius: 5px;
+    }
 
     &.clone {
         display: inline-block;
@@ -43,7 +47,6 @@
                     height: 12px;
                     border-radius: 50%;
                     border: 1px solid #2389ff;
-                    background-color: #ffffff;
                 }
 
                 > * {
@@ -69,7 +72,6 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    background-color: #fff;
     color: #4c6275;
 }
 
@@ -81,7 +83,6 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    background-color: #fff;
     color: #4c6275;
     padding-right: 0.5rem;
     overflow: hidden;
@@ -96,11 +97,6 @@
             display: block;
         }
     }
-
-    &:hover {
-        background: #f5f7f8;
-        border-radius: 5px;
-    }
 }
 
 .Text {
@@ -167,14 +163,6 @@
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
 
-    &:hover {
-        background-color: var(--action-background, rgba(0, 0, 0, 0.05));
-
-        svg {
-            fill: #6f7b88;
-        }
-    }
-
     svg {
         flex: 0 0 auto;
         margin: auto;

libs/components/ui/src/cascader/Cascader.tsx

@@ -133,7 +133,7 @@ export function Cascader(props: CascaderProps) {
 const MenuPaper = styled('div')(({ theme }) => ({
     fontFamily: 'PingFang SC',
     background: '#FFF',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     borderRadius: '10px 0px 10px 10px',
     color: '#4C6275',
     fontWeight: '400',