chore: update dotenv

* fix: only show collapse page button when the children of the page is not emtpy

* chore: set minimum sidebar width to 268

* chore: replace space lock icon and pin & unpin icon

* chore: change divider color

* chore: update divider color

* chore: improve create space color

* feat: highlight delete button when hovering

* chore: update translations

* fix: icon align issue

* feat: highlight sidebar resizer when hovering

* feat: add border to popover

* feat: optimize scroll bar

* feat: improve scrollbar hover color

* feat: support creating a new page via cmd+n

* chore: improve scrollbar color

* feat: improve tooltip style

* chore: fix unit test

* chore: bump version 0.6.6

.github/actions/flutter_build/action.yml

@@ -63,7 +63,7 @@ runs:
           sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
           sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
           sudo apt-get update
-          sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev
+          sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev libmpv-dev mpv
         elif [ "$RUNNER_OS" == "Windows" ]; then
           vcpkg integrate install
         elif [ "$RUNNER_OS" == "macOS" ]; then

.github/actions/flutter_integration_test/action.yml

@@ -52,7 +52,7 @@ runs:
         sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
         sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
         sudo apt-get update
-        sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev network-manager
+        sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev network-manager libmpv-dev mpv
       shell: bash
 
     - name: Enable Flutter Desktop

.github/workflows/android_ci.yaml.bak

@@ -19,7 +19,7 @@
 
 # env:
 #   CARGO_TERM_COLOR: always
-#   FLUTTER_VERSION: "3.19.0"
+#   FLUTTER_VERSION: "3.22.0"
 #   RUST_TOOLCHAIN: "1.77.2"
 #   CARGO_MAKE_VERSION: "0.36.6"
 

.github/workflows/build_bot.yaml

@@ -1,28 +0,0 @@
-name: Build Bot
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  dispatch_slash_command:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout source code
-        uses: actions/checkout@v4
-
-      # get build name from pubspec.yaml
-      - name: Get build version
-        working-directory: frontend/appflowy_flutter
-        id: get_build_name
-        run: |
-          echo "fetching version from pubspec.yaml..."
-          echo "build_name=$(grep 'version: ' pubspec.yaml | awk '{print $2}')" >> $GITHUB_OUTPUT
-
-      - uses: peter-evans/slash-command-dispatch@v4
-        with:
-          token: ${{ secrets.PAT }}
-          commands: build
-          static-args: |
-            ref=refs/pull/${{ github.event.issue.number }}/head
-            build_name=${{ steps.get_build_name.outputs.build_name }}

.github/workflows/deploy_test_web.yaml

@@ -1,72 +0,0 @@
-name: Deploy Web (Test)
-
-on:
-  push:
-    branches:
-      - build/test
-env:
-  NODE_VERSION: "18.16.0"
-  PNPM_VERSION: "8.5.0"
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    env:
-      SSH_PRIVATE_KEY: ${{ secrets.WEB_TEST_SSH_PRIVATE_KEY }}
-      REMOTE_HOST: ${{ secrets.WEB_TEST_REMOTE_HOST }}
-      REMOTE_USER: ${{ secrets.WEB_TEST_REMOTE_USER }}
-      SSL_CERTIFICATE: ${{ secrets.WEB_TEST_SSL_CERTIFICATE }}
-      SSL_CERTIFICATE_KEY: ${{ secrets.WEB_TEST_SSL_CERTIFICATE_KEY }}
-      ENV_FILE: test.env
-    steps:
-      - uses: actions/checkout@v4
-      - name: setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-      - name: setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: ${{ env.PNPM_VERSION }}
-      - name: Node_modules cache
-        uses: actions/cache@v2
-        with:
-          path: frontend/appflowy_web_app/node_modules
-          key: node-modules-${{ runner.os }}
-      - name: install frontend dependencies
-        working-directory: frontend/appflowy_web_app
-        run: |
-          pnpm install
-      - name: copy env file
-        working-directory: frontend/appflowy_web_app
-        run: |
-          cp ${{ env.ENV_FILE }} .env
-      - name: test and lint
-        working-directory: frontend/appflowy_web_app
-        run: |
-          pnpm run lint
-      - name: build
-        working-directory: frontend/appflowy_web_app
-        run: |
-          pnpm run build
-      - name: generate SSL certificate
-        run: |
-          echo "${{ env.SSL_CERTIFICATE }}" > nginx-signed.crt
-          echo "${{ env.SSL_CERTIFICATE_KEY }}" > nginx-signed.key
-      - name: Deploy to EC2
-        uses: easingthemes/ssh-deploy@main
-        with:
-          SSH_PRIVATE_KEY: ${{ env.SSH_PRIVATE_KEY }}
-          ARGS: "-rlgoDzvc -i"
-          SOURCE: "frontend/appflowy_web_app/dist frontend/appflowy_web_app/Dockerfile frontend/appflowy_web_app/nginx.conf frontend/appflowy_web_app/.env nginx-signed.crt nginx-signed.key"
-          REMOTE_HOST: ${{ env.REMOTE_HOST }}
-          REMOTE_USER: ${{ env.REMOTE_USER }}
-          EXCLUDE: "frontend/appflowy_web_app/dist/, frontend/appflowy_web_app/node_modules/"
-          SCRIPT_AFTER: |
-            docker build -t appflowy-web-app .
-            docker rm -f appflowy-web-app || true
-            docker run -d -p 80:80 -p 443:443 --name appflowy-web-app appflowy-web-app

.github/workflows/docker_ci.yml

@@ -13,7 +13,7 @@ on:
       - release/*
     paths:
       - frontend/**
-    types: [opened, synchronize, reopened, unlocked, ready_for_review]
+    types: [ opened, synchronize, reopened, unlocked, ready_for_review ]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}

.github/workflows/flutter_ci.yaml

@@ -25,7 +25,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
-  FLUTTER_VERSION: "3.19.0"
+  FLUTTER_VERSION: "3.22.0"
   RUST_TOOLCHAIN: "1.77.2"
   CARGO_MAKE_VERSION: "0.36.6"
 
@@ -89,6 +89,7 @@ jobs:
         with:
           os: ${{ matrix.os }}
           flutter_version: ${{ env.FLUTTER_VERSION }}
+          DISABLE_CI_TEST_LOG: "true"
           rust_toolchain: ${{ env.RUST_TOOLCHAIN }}
           cargo_make_version: ${{ env.CARGO_MAKE_VERSION }}
           rust_target: ${{ matrix.target }}
@@ -172,7 +173,7 @@ jobs:
             sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
             sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
             sudo apt-get update
-            sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev
+            sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev libmpv-dev mpv
           fi
         shell: bash
 
@@ -202,6 +203,7 @@ jobs:
       - name: Run Flutter unit tests
         env:
           DISABLE_EVENT_LOG: true
+          DISABLE_CI_TEST_LOG: "true"
         working-directory: frontend
         run: |
           if [ "$RUNNER_OS" == "macOS" ]; then
@@ -246,10 +248,13 @@ jobs:
         env:
           BACKEND_VERSION: 0.3.24-amd64
         run: |
-          docker compose down -v --remove-orphans
-          docker compose pull
-          docker compose up -d
-          sleep 10
+          if [ "$(docker ps --filter name=appflowy-cloud -q)" == "" ]; then
+            docker compose pull  
+            docker compose up -d
+            sleep 10
+          else
+            echo "Docker container 'appflowy-cloud' is already running."
+          fi
 
       - name: Checkout source code
         uses: actions/checkout@v4
@@ -272,7 +277,7 @@ jobs:
           sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
           sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
           sudo apt-get update
-          sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev
+          sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev libmpv-dev mpv
         shell: bash
 
       - name: Enable Flutter Desktop
@@ -319,6 +324,12 @@ jobs:
       - name: Checkout source code
         uses: actions/checkout@v4
 
+      - name: Install video dependency
+        run: |
+          sudo apt-get update
+          sudo apt-get -y install libmpv-dev mpv
+        shell: bash
+
       - name: Flutter Integration Test 1
         uses: ./.github/actions/flutter_integration_test
         with:
@@ -343,6 +354,12 @@ jobs:
       - name: Checkout source code
         uses: actions/checkout@v4
 
+      - name: Install video dependency
+        run: |
+          sudo apt-get update
+          sudo apt-get -y install libmpv-dev mpv
+        shell: bash
+
       - name: Flutter Integration Test 2
         uses: ./.github/actions/flutter_integration_test
         with:
@@ -367,6 +384,12 @@ jobs:
       - name: Checkout source code
         uses: actions/checkout@v4
 
+      - name: Install video dependency
+        run: |
+          sudo apt-get update
+          sudo apt-get -y install libmpv-dev mpv
+        shell: bash
+
       - name: Flutter Integration Test 3
         uses: ./.github/actions/flutter_integration_test
         with:

.github/workflows/ios_ci.yaml

@@ -20,7 +20,7 @@ on:
       - "!frontend/appflowy_web_app/**"
 
 env:
-  FLUTTER_VERSION: "3.19.0"
+  FLUTTER_VERSION: "3.22.0"
   RUST_TOOLCHAIN: "1.77.2"
 
 concurrency:
@@ -28,20 +28,35 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  build:
-    if: github.event.pull_request.draft != true
-    strategy:
-      fail-fast: true
-      matrix:
-        os: [ macos-14 ]
-    runs-on: ${{ matrix.os }}
+  build-self-hosted:
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: self-hosted
+
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v2
+
+      - name: Build AppFlowy
+        working-directory: frontend
+        run: |
+          cargo make --profile development-ios-arm64-sim appflowy-core-dev-ios
+          cargo make --profile development-ios-arm64-sim code_generation
+
+      - uses: futureware-tech/simulator-action@v3
+        id: simulator-action
+        with:
+          model: 'iPhone 15'
+          shutdown_after_job: false
+
+  build-macos:
+    if: github.event.pull_request.head.repo.full_name != github.repository
+    runs-on: macos-latest
 
     steps:
       - name: Checkout source code
         uses: actions/checkout@v2
 
       - name: Install Rust toolchain
-        id: rust_toolchain
         uses: actions-rs/toolchain@v1
         with:
           toolchain: ${{ env.RUST_TOOLCHAIN }}
@@ -49,8 +64,7 @@ jobs:
           override: true
           profile: minimal
 
-      - name: Install flutter
-        id: flutter
+      - name: Install Flutter
         uses: subosito/flutter-action@v2
         with:
           channel: "stable"
@@ -59,7 +73,7 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          prefix-key: ${{ matrix.os }}
+          prefix-key: macos-latest
           workspaces: |
             frontend/rust-lib
 
@@ -88,7 +102,16 @@ jobs:
           model: 'iPhone 15'
           shutdown_after_job: false
 
-        # enable it again if the 12 mins timeout is fixed
-        # - name: Run integration tests
-        #   working-directory: frontend/appflowy_flutter
-        # run: flutter test integration_test/runner.dart -d ${{ steps.simulator-action.outputs.udid }}
+      # - name: Run AppFlowy on simulator
+      #   working-directory: frontend/appflowy_flutter
+      #   run: |
+      #     flutter run -d ${{ steps.simulator-action.outputs.udid }} &
+      #     pid=$!
+      #     sleep 500
+      #     kill $pid
+      #   continue-on-error: true
+
+      # enable it again if the 12 mins timeout is fixed
+      # - name: Run integration tests
+      #   working-directory: frontend/appflowy_flutter
+      #   run: flutter test integration_test/runner.dart -d ${{ steps.simulator-action.outputs.udid }}

.github/workflows/release.yml

@@ -6,7 +6,7 @@ on:
       - "*"
 
 env:
-  FLUTTER_VERSION: "3.19.0"
+  FLUTTER_VERSION: "3.22.0"
   RUST_TOOLCHAIN: "1.77.2"
 
 jobs:
@@ -135,7 +135,7 @@ jobs:
       fail-fast: false
       matrix:
         job:
-          - { target: x86_64-apple-darwin, os: macos-11, extra-build-args: "" }
+          - { target: x86_64-apple-darwin, os: macos-12, extra-build-args: "" }
     steps:
       - name: Checkout source code
         uses: actions/checkout@v4
@@ -233,7 +233,7 @@ jobs:
         job:
           - {
             targets: "aarch64-apple-darwin,x86_64-apple-darwin",
-            os: macos-11,
+            os: macos-latest,
             extra-build-args: "",
           }
     steps:
@@ -367,8 +367,8 @@ jobs:
           sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
           sudo apt-get update
           sudo apt-get install -y build-essential libsqlite3-dev libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev
-          sudo apt-get install keybinder-3.0 libnotify-dev
-          sudo apt-get -y install alien
+          sudo apt-get install keybinder-3.0
+          sudo apt-get install -y  alien libnotify-dev libmpv-dev mpv
           source $HOME/.cargo/env
           cargo install --force cargo-make
           cargo install --force duckscript_cli
@@ -479,6 +479,24 @@ jobs:
           cache-from: type=registry,ref=${{ secrets.DOCKER_HUB_USERNAME }}/af_build_cache:buildcache
           cache-to: type=registry,ref=${{ secrets.DOCKER_HUB_USERNAME }}/af_build_cache:buildcache,mode=max
 
+  notify-failure:
+    runs-on: ubuntu-latest
+    needs:
+      - build-for-macOS-x86_64
+      - build-for-windows
+      - build-for-linux
+    if: failure()
+    steps:
+      - uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          text: |
+            🔴🔴🔴Workflow ${{ github.workflow }} in repository ${{ github.repository }} was failed 🔴🔴🔴.
+          fields: repo,message,author,eventName,ref,workflow
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.RELEASE_SLACK_WEBHOOK }}
+        if: always()
+
   notify-discord:
     runs-on: ubuntu-latest
     needs:

.github/workflows/rust_ci.yaml

@@ -8,6 +8,7 @@ on:
       - "release/*"
     paths:
       - "frontend/rust-lib/**"
+      - ".github/workflows/rust_ci.yaml"
 
   pull_request:
     branches:
@@ -22,70 +23,25 @@ env:
   RUST_TOOLCHAIN: "1.77.2"
 
 jobs:
-  test-on-ubuntu:
-    runs-on: ubuntu-latest
+  self-hosted-job:
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: self-hosted
     steps:
-      # - name: Maximize build space
-      #   uses: easimon/maximize-build-space@master
-      #   with:
-      #     root-reserve-mb: 2048
-      #     swap-size-mb: 1024
-      #     remove-dotnet: 'true'
-
-      # # the following step is required to avoid running out of space
-      # - name: Maximize build space
-      #   run: |
-      #     sudo rm -rf /usr/share/dotnet
-      #     sudo rm -rf /opt/ghc
-      #     sudo rm -rf "/usr/local/share/boost"
-      #     sudo rm -rf "$AGENT_TOOLSDIRECTORY"
-      #     sudo docker image prune --all --force
-
       - name: Checkout source code
         uses: actions/checkout@v4
 
-      - name: Install Rust toolchain
-        id: rust_toolchain
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: ${{ env.RUST_TOOLCHAIN }}
-          override: true
-          components: rustfmt, clippy
-          profile: minimal
-
-      - name: Install prerequisites
-        working-directory: frontend
-        run: |
-          cargo install --force cargo-make
-          cargo install --force duckscript_cli
-
-      - uses: Swatinem/rust-cache@v2
-        with:
-          prefix-key: "ubuntu-latest"
-          workspaces: |
-            frontend/rust-lib
-
-      - name: Checkout appflowy cloud code
+      - name: Checkout Appflowy Cloud
         uses: actions/checkout@v4
         with:
           repository: AppFlowy-IO/AppFlowy-Cloud
           path: AppFlowy-Cloud
 
-      - name: Prepare appflowy cloud env
+      - name: Prepare Appflowy Cloud env
         working-directory: AppFlowy-Cloud
         run: |
-          # log level
           cp deploy.env .env
-          sed -i 's|RUST_LOG=.*|RUST_LOG=trace|' .env
-          sed -i 's|API_EXTERNAL_URL=.*|API_EXTERNAL_URL=http://localhost|' .env
-
-      - name: Run Docker-Compose
-        working-directory: AppFlowy-Cloud
-        env:
-          BACKEND_VERSION: 0.3.24-amd64
-        run: |
-          docker pull appflowyinc/appflowy_cloud:latest
-          docker compose up -d
+          sed -i '' 's|RUST_LOG=.*|RUST_LOG=trace|' .env
+          sed -i '' 's|API_EXTERNAL_URL=.*|API_EXTERNAL_URL=http://localhost|' .env
 
       - name: Run rust-lib tests
         working-directory: frontend/rust-lib
@@ -106,6 +62,84 @@ jobs:
         run: cargo clippy --all-targets -- -D warnings
         working-directory: frontend/rust-lib
 
+  ubuntu-job:
+    if: github.event.pull_request.head.repo.full_name != github.repository
+    runs-on: ubuntu-latest
+    steps:
+      - name: Maximize build space
+        run: |
+          sudo rm -rf /usr/share/dotnet
+          sudo rm -rf /opt/ghc
+          sudo rm -rf "/usr/local/share/boost"
+          sudo rm -rf "$AGENT_TOOLSDIRECTORY"
+          sudo docker image prune --all --force
+
+      - name: Checkout source code
+        uses: actions/checkout@v4
+
+      - name: Install Rust toolchain
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: ${{ env.RUST_TOOLCHAIN }}
+          override: true
+          components: rustfmt, clippy
+          profile: minimal
+      - uses: Swatinem/rust-cache@v2
+        with:
+          prefix-key: ${{ runner.os }}
+          cache-on-failure: true
+          workspaces: |
+            frontend/rust-lib
+
+      - name: Checkout appflowy cloud code
+        uses: actions/checkout@v4
+        with:
+          repository: AppFlowy-IO/AppFlowy-Cloud
+          path: AppFlowy-Cloud
+
+      - name: Prepare appflowy cloud env
+        working-directory: AppFlowy-Cloud
+        run: |
+          cp deploy.env .env
+          sed -i 's|RUST_LOG=.*|RUST_LOG=trace|' .env
+          sed -i 's|API_EXTERNAL_URL=.*|API_EXTERNAL_URL=http://localhost|' .env
+
+      - name: Run Docker-Compose
+        working-directory: AppFlowy-Cloud
+        run: |
+          if [ "$(docker ps --filter name=appflowy-cloud -q)" == "" ]; then
+            docker compose pull  
+            docker compose up -d
+            sleep 10
+          else
+            echo "Docker container 'appflowy-cloud' is already running."
+          fi
+
+      - name: Run rust-lib tests
+        working-directory: frontend/rust-lib
+        env:
+          RUST_LOG: info
+          RUST_BACKTRACE: 1
+          af_cloud_test_base_url: http://localhost
+          af_cloud_test_ws_url: ws://localhost/ws/v1
+          af_cloud_test_gotrue_url: http://localhost/gotrue
+        run: |
+          DISABLE_CI_TEST_LOG="true" cargo test --no-default-features --features="dart"
+
+      - name: rustfmt rust-lib
+        run: cargo fmt --all -- --check
+        working-directory: frontend/rust-lib/
+
+      - name: clippy rust-lib
+        run: cargo clippy --all-targets -- -D warnings
+        working-directory: frontend/rust-lib
+
+      - name: "Debug: show Appflowy-Cloud container logs"
+        if: failure()
+        working-directory: AppFlowy-Cloud
+        run: |
+          docker compose logs appflowy_cloud
+
       - name: Clean up Docker images
         run: |
           docker image prune -af

.github/workflows/rust_coverage.yml

@@ -10,7 +10,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
-  FLUTTER_VERSION: "3.19.0"
+  FLUTTER_VERSION: "3.22.0"
   RUST_TOOLCHAIN: "1.77.2"
 
 jobs:

.github/workflows/tauri2_ci.yaml

@@ -1,4 +1,5 @@
 name: Tauri-CI
+
 on:
   pull_request:
     paths:
@@ -11,28 +12,47 @@ env:
   NODE_VERSION: "18.16.0"
   PNPM_VERSION: "8.5.0"
   RUST_TOOLCHAIN: "1.77.2"
+  CARGO_MAKE_VERSION: "0.36.6"
+  CI: true
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
 jobs:
-  tauri-build:
-    if: github.event.pull_request.draft != true
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [ ubuntu-20.04 ]
+  tauri-build-self-hosted:
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: self-hosted
 
-    runs-on: ${{ matrix.platform }}
-
-    env:
-      CI: true
     steps:
       - uses: actions/checkout@v4
+      - name: install frontend dependencies
+        working-directory: frontend/appflowy_web_app
+        run: |
+          mkdir dist
+          pnpm install
+          cd src-tauri && cargo build
 
-      - name: Maximize build space (ubuntu only)
-        if: matrix.platform == 'ubuntu-20.04'
+      - name: test and lint
+        working-directory: frontend/appflowy_web_app
+        run: |
+          pnpm run lint:tauri
+
+      - uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tauriScript: pnpm tauri
+          projectPath: frontend/appflowy_web_app
+          args: "--debug"
+
+  tauri-build-ubuntu:
+    if: github.event.pull_request.head.repo.full_name != github.repository
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Maximize build space
         run: |
           sudo rm -rf /usr/share/dotnet
           sudo rm -rf /opt/ghc
@@ -61,36 +81,27 @@ jobs:
           override: true
           profile: minimal
 
-      - name: Rust cache
-        uses: swatinem/rust-cache@v2
-        with:
-          workspaces: "./frontend/appflowy_web_app/src-tauri -> target"
-
       - name: Node_modules cache
         uses: actions/cache@v2
         with:
           path: frontend/appflowy_web_app/node_modules
           key: node-modules-${{ runner.os }}
 
-      - name: install dependencies (windows only)
-        if: matrix.platform == 'windows-latest'
-        working-directory: frontend
-        run: |
-          cargo install --force duckscript_cli
-          vcpkg integrate install
-
-      - name: install dependencies (ubuntu only)
-        if: matrix.platform == 'ubuntu-20.04'
+      - name: install dependencies
         working-directory: frontend
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
 
-      - name: install cargo-make
+      - uses: taiki-e/install-action@v2
+        with:
+          tool: cargo-make@${{ env.CARGO_MAKE_VERSION }}
+
+      - name: install tauri deps tools
         working-directory: frontend
         run: |
-          cargo install --force cargo-make
           cargo make appflowy-tauri-deps-tools
+        shell: bash
 
       - name: install frontend dependencies
         working-directory: frontend/appflowy_web_app

.github/workflows/web2_ci.yaml

@@ -52,11 +52,11 @@ jobs:
         working-directory: frontend/appflowy_web_app
         run: |
           pnpm install
-      - name: test and lint
+      - name: Run lint check
         working-directory: frontend/appflowy_web_app
         run: |
           pnpm run lint
-          pnpm run test:unit
+      
       - name: build and analyze
         working-directory: frontend/appflowy_web_app
         run: |

.github/workflows/web_ci.yaml

@@ -1,83 +0,0 @@
-name: WEB-CI
-
-on:
-  workflow_dispatch:
-    inputs:
-      build:
-        description: 'Build the web app'
-        required: true
-        default: 'true'
-
-env:
-  CARGO_TERM_COLOR: always
-  NODE_VERSION: "18.16.0"
-  PNPM_VERSION: "8.5.0"
-  RUST_TOOLCHAIN: "1.77.2"
-  CARGO_MAKE_VERSION: "0.36.6"
-
-jobs:
-  web-build:
-    if: github.event.pull_request.draft != true
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [ ubuntu-latest ]
-
-    runs-on: ${{ matrix.platform }}
-    steps:
-      - uses: actions/checkout@v4
-      - name: setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Cache Rust Dependencies
-        uses: Swatinem/rust-cache@v2
-        with:
-          key: rust-dependencies-${{ runner.os }}
-          workspaces: |
-            frontend/rust-lib
-            frontend/appflowy_web/appflowy_wasm
-
-      # TODO: Can combine caching deps and node_modules in one
-      # See Glob patterns: https://github.com/actions/toolkit/tree/main/packages/glob
-      - name: Cache Node.js dependencies
-        uses: actions/cache@v4
-        with:
-          path: ~/.npm
-          key: npm-${{ runner.os }}
-
-      - name: Cache node_modules
-        uses: actions/cache@v4
-        with:
-          path: frontend/appflowy_web/node_modules
-          key: node-modules-${{ runner.os }}
-
-      - name: Install Rust toolchain
-        id: rust_toolchain
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: ${{ env.RUST_TOOLCHAIN }}
-          override: true
-          profile: minimal
-
-      - name: Install wasm-pack
-        run: cargo install wasm-pack
-
-      - uses: taiki-e/install-action@v2
-        with:
-          tool: cargo-make@${{ env.CARGO_MAKE_VERSION }}
-
-      - name: install dependencies
-        if: matrix.platform == 'ubuntu-latest'
-        working-directory: frontend
-        run: |
-          sudo apt-get update
-          npm install -g pnpm@${{ env.PNPM_VERSION }}
-          cargo make install_web_protobuf
-
-      - name: Build
-        working-directory: frontend/appflowy_web
-        run: |
-          pnpm install
-          pnpm run build_release_wasm

.github/workflows/web_coverage.yaml

@@ -1,4 +1,4 @@
-name: Cypress Tests
+name: Web Code Coverage
 
 on:
   pull_request:
@@ -6,6 +6,7 @@ on:
       - ".github/workflows/web2_ci.yaml"
       - "frontend/appflowy_web_app/**"
       - "frontend/resources/**"
+
 env:
   NODE_VERSION: "18.16.0"
   PNPM_VERSION: "8.5.0"
@@ -13,7 +14,7 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 jobs:
-  cypress-run:
+  test:
     if: github.event.pull_request.draft != true
     runs-on: ubuntu-22.04
     steps:
@@ -45,4 +46,20 @@ jobs:
           component: true
           build: pnpm run build
           start: pnpm run start
-          browser: chrome
+          browser: chrome
+
+      - name: Jest run
+        working-directory: frontend/appflowy_web_app
+        run: |
+          pnpm run test:unit
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v2
+        with:
+          token: cf9245e0-e136-4e21-b0ee-35755fa0c493
+          files: frontend/appflowy_web_app/coverage/jest/lcov.info,frontend/appflowy_web_app/coverage/cypress/lcov.info
+          flags: appflowy_web_app
+          name: frontend/appflowy_web_app
+          fail_ci_if_error: true
+          verbose: true
+

CHANGELOG.md

@@ -1,4 +1,88 @@
 # Release Notes
+## Version 0.6.5 - 24/07/2024
+### New Features
+- Publish a Database to the Web
+
+## Version 0.6.4 - 16/07/2024
+### New Features
+- Enhanced the message style on the AI chat page.
+- Added the ability to choose cursor color and selection color from a palette in settings page.
+### Bug Fixes
+- Optimized the performance for loading recent pages.
+- Fixed an issue where the cursor would jump randomly when typing in the document title on mobile.
+
+## Version 0.6.3 - 08/07/2024
+### New Features
+- Publish a Document to the Web
+
+## Version 0.6.2 - 01/07/2024
+### New Features
+- Added support for duplicating spaces.
+- Added support for moving pages across spaces.
+- Undo markdown formatting with `Ctrl + Z` or `Cmd + Z`.
+- Improved shortcuts settings UI.
+### Bug Fixes
+- Fixed unable to zoom in with `Ctrl` and `+` or `Cmd` and `+` on some keyboards.
+- Fixed unable to paste nested lists in existing lists.
+
+## Version 0.6.1 - 22/06/2024
+### New Features
+- Introduced the "Space" feature to help you organize your pages more efficiently.
+### Bug Fixes
+- Resolved shortcut conflicts on the board page.
+- Resolved an issue where underscores could cause the editor to freeze.
+
+## Version 0.6.0 - 19/06/2024
+### New Features
+- Introduced the "Space" feature to help you organize your pages more efficiently.
+### Bug Fixes
+- Resolved shortcut conflicts on the board page.
+- Resolved an issue where underscores could cause the editor to freeze.
+
+## Version 0.5.9 - 06/06/2024
+### New Features
+- Revamped the sidebar for both Desktop and Mobile.
+- Added support for embedding videos in documents.
+- Introduced a hotkey (Cmd/Ctrl + 0) to reset the app scale.
+- Supported searching the workspace by page title.
+### Bug Fixes
+- Fixed the issue preventing the use of Backspace to delete words in Kanban boards.
+
+## Version 0.5.8 - 05/20/2024
+### New Features
+- Improvement to the Callout block to insert new lines
+- New settings page "Manage data" replaced the "Files" page
+- New settings page "Workspace" replaced the "Appearance" and "Language" pages
+- A custom implementation of a title bar for Windows users
+- Added support for selecting Cards in kanban and performing grouped keyboard shortcuts
+- Added support for default system font family
+- Support for scaling the application up/down using a keyboard shortcut (CMD/CTRL + PLUS/MINUS)
+
+### Bug Fixes
+- Resolved and refined the UI on Mobile
+- Resolved issue with text editing in database
+- Improved appearance of empty text cells in kanban/calendar
+- Resolved an issue where a page's more actions (delete, duplicate) did not work properly
+- Resolved and inconsistency in padding on get started screen on Desktop
+
+## Version 0.5.7 - 05/10/2024
+### Bug Fixes
+- Resolved page opening issue on Android.
+- Fixed text input inconsistency on Kanban board cards.
+
+## Version 0.5.6 - 05/07/2024
+### New Features
+- Team collaboration is live! Add members to your workspace to edit and collaborate on pages together.
+- Collaborate in real time on the same page with other members. Edits made by others will appear instantly.
+- Create multiple workspaces for different kinds of content.
+- Customize your entire page on mobile through the Page Style menu with options for layout, font, font size, emoji, and cover image.
+- Open a row record as a full page.
+### Bug Fixes
+- Resolved issue with setting background color for the Simple Table block.
+- Adjusted toolbar for various screen sizes.
+- Added a request for photo permission before uploading images on mobile.
+- Exported creation and last modification timestamps to CSV.
+
 ## Version 0.5.5 - 04/24/2024
 ### New Features
 - Improved the display of code blocks with line numbers
@@ -70,7 +154,7 @@
 - Fixed a bug where newly created rows were not being automatically sorted.
 - Fixed issues related to deleting a sorting field or sort not removing existing sorts properly.
 ### Notes
-- Windows 7, Windows 8, and iOS 11 are not yet supported due to the upgrade to Flutter 3.19.0.
+- Windows 7, Windows 8, and iOS 11 are not yet supported due to the upgrade to Flutter 3.22.0.
 
 ## Version 0.4.9 - 02/17/2024
 ### Bug Fixes

frontend/.vscode/launch.json

@@ -13,7 +13,6 @@
             "type": "dart",
             "env": {
                 "RUST_LOG": "debug",
-                "RUST_BACKTRACE": "1"
             },
             // uncomment the following line to testing performance.
             // "flutterMode": "profile",
@@ -138,4 +137,4 @@
             "cwd": "${workspaceRoot}/appflowy_tauri/"
         },
     ]
-}
+}

frontend/Makefile.toml

@@ -26,7 +26,7 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CRATE_FS_NAME = "dart_ffi"
 CARGO_MAKE_CRATE_NAME = "dart-ffi"
 LIB_NAME = "dart_ffi"
-APPFLOWY_VERSION = "0.5.6"
+APPFLOWY_VERSION = "0.6.6"
 FLUTTER_DESKTOP_FEATURES = "dart"
 PRODUCT_NAME = "AppFlowy"
 MACOSX_DEPLOYMENT_TARGET = "11.0"
@@ -50,7 +50,6 @@ APP_ENVIRONMENT = "local"
 FLUTTER_FLOWY_SDK_PATH = "appflowy_flutter/packages/appflowy_backend"
 TAURI_BACKEND_SERVICE_PATH = "appflowy_tauri/src/services/backend"
 WEB_BACKEND_SERVICE_PATH = "appflowy_web/src/services/backend"
-WEB_LIB_PATH = "appflowy_web/wasm-libs/af-wasm"
 TAURI_APP_BACKEND_SERVICE_PATH = "appflowy_web_app/src/application/services/tauri-services/backend"
 # Test default config
 TEST_CRATE_TYPE = "cdylib"

frontend/appflowy_flutter/android/app/build.gradle

@@ -52,8 +52,8 @@ android {
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "io.appflowy.appflowy"
-        minSdkVersion 23
-        targetSdkVersion 33
+        minSdkVersion 24
+        targetSdkVersion 34
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
         multiDexEnabled true

frontend/appflowy_flutter/android/app/src/main/AndroidManifest.xml

@@ -58,4 +58,11 @@
       <action android:name="android.support.customtabs.action.CustomTabsService" />
     </intent>
   </queries>
+  <!--
+    Media access permissions.
+    Android 13 or higher.
+    Used for VideoBlock (edia_kit)
+  -->
+  <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
+  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
 </manifest>

frontend/appflowy_flutter/integration_test/cloud/anon_user_continue_test.dart

@@ -42,7 +42,7 @@ void main() {
       await tester.tapAnonymousSignInButton();
       await tester.expectToSeeHomePageWithGetStartedPage();
 
-      // reanme the name of the anon user
+      // rename the name of the anon user
       await tester.openSettings();
       await tester.openSettingsPage(SettingsPage.account);
       await tester.pumpAndSettle();

frontend/appflowy_flutter/integration_test/cloud/appflowy_cloud_auth_test.dart

@@ -47,11 +47,11 @@ void main() {
       );
       await tester.tapButton(find.byType(SignInOutButton));
 
-      tester.expectToSeeText(LocaleKeys.button_confirm.tr());
-      await tester.tapButtonWithName(LocaleKeys.button_confirm.tr());
+      tester.expectToSeeText(LocaleKeys.button_ok.tr());
+      await tester.tapButtonWithName(LocaleKeys.button_ok.tr());
 
       // Go to the sign in page again
-      await tester.pumpAndSettle(const Duration(seconds: 1));
+      await tester.pumpAndSettle(const Duration(seconds: 5));
       tester.expectToSeeGoogleLoginButton();
     });
 

frontend/appflowy_flutter/integration_test/cloud/cloud_runner.dart

@@ -1,7 +1,6 @@
 import 'anon_user_continue_test.dart' as anon_user_continue_test;
 import 'appflowy_cloud_auth_test.dart' as appflowy_cloud_auth_test;
 import 'empty_test.dart' as preset_af_cloud_env_test;
-// import 'document_sync_test.dart' as document_sync_test;
 import 'user_setting_sync_test.dart' as user_sync_test;
 import 'workspace/change_name_and_icon_test.dart'
     as change_workspace_name_and_icon_test;
@@ -10,13 +9,8 @@ import 'workspace/collaborative_workspace_test.dart'
 
 Future<void> main() async {
   preset_af_cloud_env_test.main();
-
   appflowy_cloud_auth_test.main();
-
-  // document_sync_test.main();
-
   user_sync_test.main();
-
   anon_user_continue_test.main();
 
   // workspace

frontend/appflowy_flutter/integration_test/cloud/document_sync_test.dart

@@ -46,7 +46,6 @@ void main() {
       await tester.ime.insertText(inputContent);
       expect(find.text(inputContent, findRichText: true), findsOneWidget);
 
-      // TODO(nathan): remove the await
       // 6 seconds for data sync
       await tester.waitForSeconds(6);
 

frontend/appflowy_flutter/integration_test/cloud/user_setting_sync_test.dart

@@ -50,26 +50,28 @@ void main() {
       await tester.tapEscButton();
 
       // wait 2 seconds for the sync to finish
-      await tester.pumpAndSettle(const Duration(seconds: 2));
+      await tester.pumpAndSettle(const Duration(seconds: 6));
+    });
+
+
+    testWidgets('get user icon and name from server', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloudSelfHost,
+        email: email,
+      );
+      await tester.tapGoogleLoginInButton();
+      await tester.expectToSeeHomePageWithGetStartedPage();
+      await tester.pumpAndSettle();
+
+      await tester.openSettings();
+      await tester.openSettingsPage(SettingsPage.account);
+
+      // Verify name
+      final profileSetting =
+          tester.widget(find.byType(UserProfileSetting)) as UserProfileSetting;
+
+      expect(profileSetting.name, name);
     });
   });
 
-  testWidgets('get user icon and name from server', (tester) async {
-    await tester.initializeAppFlowy(
-      cloudType: AuthenticatorType.appflowyCloudSelfHost,
-      email: email,
-    );
-    await tester.tapGoogleLoginInButton();
-    await tester.expectToSeeHomePageWithGetStartedPage();
-    await tester.pumpAndSettle();
-
-    await tester.openSettings();
-    await tester.openSettingsPage(SettingsPage.account);
-
-    // Verify name
-    final profileSetting =
-        tester.widget(find.byType(UserProfileSetting)) as UserProfileSetting;
-
-    expect(profileSetting.name, name);
-  });
 }

frontend/appflowy_flutter/integration_test/cloud/workspace/collaborative_workspace_test.dart

@@ -2,8 +2,6 @@
 
 import 'dart:io';
 
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/loading.dart';
@@ -12,14 +10,15 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/auth/af_cloud_mock_auth_service.dart';
 import 'package:appflowy/user/application/auth/auth_service.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
-import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar_workspace.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_actions.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart';
 import 'package:appflowy/workspace/presentation/widgets/user_avatar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/uuid.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
@@ -33,66 +32,69 @@ import '../../shared/util.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  final email = '${uuid()}@appflowy.io';
+  // final email = '${uuid()}@appflowy.io';
 
   group('collaborative workspace', () {
     // combine the create and delete workspace test to reduce the time
     testWidgets('create a new workspace, open it and then delete it',
         (tester) async {
       // only run the test when the feature flag is on
-      if (!FeatureFlag.collaborativeWorkspace.isOn) {
-        return;
-      }
+      // if (!FeatureFlag.collaborativeWorkspace.isOn) {
+      //   return;
+      // }
 
-      await tester.initializeAppFlowy(
-        cloudType: AuthenticatorType.appflowyCloudSelfHost,
-        email: email,
-      );
-      await tester.tapGoogleLoginInButton();
-      await tester.expectToSeeHomePageWithGetStartedPage();
+      // await tester.initializeAppFlowy(
+      //   cloudType: AuthenticatorType.appflowyCloudSelfHost,
+      //   email: email,
+      // );
+      // await tester.tapGoogleLoginInButton();
+      // await tester.expectToSeeHomePageWithGetStartedPage();
 
-      const name = 'AppFlowy.IO';
-      // the workspace will be opened after created
-      await tester.createCollaborativeWorkspace(name);
+      // const name = 'AppFlowy.IO';
+      // // the workspace will be opened after created
+      // await tester.createCollaborativeWorkspace(name);
 
-      final loading = find.byType(Loading);
-      await tester.pumpUntilNotFound(loading);
+      // final loading = find.byType(Loading);
+      // await tester.pumpUntilNotFound(loading);
 
-      Finder success;
+      // Finder success;
 
-      // delete the newly created workspace
-      await tester.openCollaborativeWorkspaceMenu();
-      final Finder items = find.byType(WorkspaceMenuItem);
-      expect(items, findsNWidgets(2));
-      expect(
-        tester.widget<WorkspaceMenuItem>(items.last).workspace.name,
-        name,
-      );
+      // final Finder items = find.byType(WorkspaceMenuItem);
 
-      final secondWorkspace = find.byType(WorkspaceMenuItem).last;
-      await tester.hoverOnWidget(
-        secondWorkspace,
-        onHover: () async {
-          // click the more button
-          final moreButton = find.byType(WorkspaceMoreActionList);
-          expect(moreButton, findsOneWidget);
-          await tester.tapButton(moreButton);
-          // click the delete button
-          final deleteButton = find.text(LocaleKeys.button_delete.tr());
-          expect(deleteButton, findsOneWidget);
-          await tester.tapButton(deleteButton);
-          // see the delete confirm dialog
-          final confirm =
-              find.text(LocaleKeys.workspace_deleteWorkspaceHintText.tr());
-          expect(confirm, findsOneWidget);
-          await tester.tapButton(find.text(LocaleKeys.button_ok.tr()));
-          // delete success
-          success = find.text(LocaleKeys.workspace_createSuccess.tr());
-          await tester.pumpUntilFound(success);
-          expect(success, findsOneWidget);
-          await tester.pumpUntilNotFound(success);
-        },
-      );
+      // // delete the newly created workspace
+      // await tester.openCollaborativeWorkspaceMenu();
+      // await tester.pumpUntilFound(items);
+
+      // expect(items, findsNWidgets(2));
+      // expect(
+      //   tester.widget<WorkspaceMenuItem>(items.last).workspace.name,
+      //   name,
+      // );
+
+      // final secondWorkspace = find.byType(WorkspaceMenuItem).last;
+      // await tester.hoverOnWidget(
+      //   secondWorkspace,
+      //   onHover: () async {
+      //     // click the more button
+      //     final moreButton = find.byType(WorkspaceMoreActionList);
+      //     expect(moreButton, findsOneWidget);
+      //     await tester.tapButton(moreButton);
+      //     // click the delete button
+      //     final deleteButton = find.text(LocaleKeys.button_delete.tr());
+      //     expect(deleteButton, findsOneWidget);
+      //     await tester.tapButton(deleteButton);
+      //     // see the delete confirm dialog
+      //     final confirm =
+      //         find.text(LocaleKeys.workspace_deleteWorkspaceHintText.tr());
+      //     expect(confirm, findsOneWidget);
+      //     await tester.tapButton(find.text(LocaleKeys.button_ok.tr()));
+      //     // delete success
+      //     success = find.text(LocaleKeys.workspace_createSuccess.tr());
+      //     await tester.pumpUntilFound(success);
+      //     expect(success, findsOneWidget);
+      //     await tester.pumpUntilNotFound(success);
+      //   },
+      // );
     });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/board/board_add_row_test.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/plugins/database/board/presentation/board_page.dart';
 import 'package:appflowy/plugins/database/board/presentation/widgets/board_column_header.dart';
 import 'package:appflowy/plugins/database/widgets/card/card.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
@@ -82,23 +83,19 @@ void main() {
         findsOneWidget,
       );
 
-      await tester.tap(
-        find
-            .descendant(
-              of: find.byType(AppFlowyGroupFooter),
-              matching: find.byType(FlowySvg),
-            )
-            .at(1),
+      await tester.tapButton(
+        find.byType(BoardColumnFooter).at(1),
       );
 
       const newCardName = 'Card 4';
       await tester.enterText(
         find.descendant(
-          of: lastCard,
+          of: find.byType(BoardColumnFooter),
           matching: find.byType(TextField),
         ),
         newCardName,
       );
+      await tester.testTextInput.receiveAction(TextInputAction.done);
       await tester.pumpAndSettle(const Duration(milliseconds: 500));
 
       await tester.tap(find.byType(AppFlowyBoard));

frontend/appflowy_flutter/integration_test/desktop/board/board_field_test.dart

@@ -0,0 +1,37 @@
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/database_test_op.dart';
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('board field test', () {
+    testWidgets('change field type whithin card #5360', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Board);
+      const name = 'Card 1';
+      final card1 = find.text(name);
+      await tester.tapButton(card1);
+
+      const fieldName = "test change field";
+      await tester.createField(
+        FieldType.RichText,
+        fieldName,
+        layout: ViewLayoutPB.Board,
+      );
+      await tester.tapButton(card1);
+      await tester.changeFieldTypeOfFieldWithName(
+        fieldName,
+        FieldType.Checkbox,
+        layout: ViewLayoutPB.Board,
+      );
+      await tester.hoverOnWidget(find.text('Card 2'));
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/board/board_row_test.dart

@@ -29,6 +29,7 @@ void main() {
         },
       );
       await tester.tapButtonWithName(LocaleKeys.button_delete.tr());
+      await tester.tapOKButton();
       expect(find.text(name), findsNothing);
     });
 

frontend/appflowy_flutter/integration_test/desktop/board/board_test_runner.dart

@@ -1,10 +1,10 @@
 import 'package:integration_test/integration_test.dart';
 
-import 'board_row_test.dart' as board_row_test;
 import 'board_add_row_test.dart' as board_add_row_test;
 import 'board_group_test.dart' as board_group_test;
+import 'board_row_test.dart' as board_row_test;
 
-void startTesting() {
+void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   // Board integration tests

frontend/appflowy_flutter/integration_test/desktop/database/database_row_test.dart

@@ -41,15 +41,16 @@ void main() {
       await tester.tapAnonymousSignInButton();
 
       await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Grid);
-      await tester.hoverOnFirstRowOfGrid();
+      await tester.hoverOnFirstRowOfGrid(() async {
+        // Open the row menu and then click the delete
+        await tester.tapRowMenuButtonInGrid();
+        await tester.pumpAndSettle();
+        await tester.tapDeleteOnRowMenu();
+        await tester.pumpAndSettle();
 
-      // Open the row menu and then click the delete
-      await tester.tapRowMenuButtonInGrid();
-      await tester.tapDeleteOnRowMenu();
-
-      // 3 initial rows - 1 deleted
-      await tester.assertNumberOfRowsInGridPage(2);
-      await tester.pumpAndSettle();
+        // 3 initial rows - 1 deleted
+        await tester.assertNumberOfRowsInGridPage(2);
+      });
     });
 
     testWidgets('check number of row indicator in the initial grid',

frontend/appflowy_flutter/integration_test/desktop/document/document_alignment_test.dart

@@ -66,6 +66,7 @@ void main() {
           LogicalKeyboardKey.keyR,
         ],
         tester: tester,
+        withKeyUp: true,
       );
       expect(first.attributes[blockComponentAlign], rightAlignmentKey);
 
@@ -77,6 +78,7 @@ void main() {
           LogicalKeyboardKey.keyE,
         ],
         tester: tester,
+        withKeyUp: true,
       );
       expect(first.attributes[blockComponentAlign], centerAlignmentKey);
 
@@ -88,6 +90,7 @@ void main() {
           LogicalKeyboardKey.keyL,
         ],
         tester: tester,
+        withKeyUp: true,
       );
       expect(first.attributes[blockComponentAlign], leftAlignmentKey);
     });

frontend/appflowy_flutter/integration_test/desktop/document/document_copy_and_paste_test.dart

@@ -1,10 +1,11 @@
 import 'dart:io';
 
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -116,6 +117,53 @@ void main() {
         ]);
       });
     });
+
+    testWidgets('paste bulleted list in numbered list', (tester) async {
+      const inAppJson =
+          '{"document":{"type":"page","children":[{"type":"bulleted_list","children":[{"type":"bulleted_list","data":{"delta":[{"insert":"World"}]}}],"data":{"delta":[{"insert":"Hello"}]}}]}}';
+
+      await tester.pasteContent(
+        inAppJson: inAppJson,
+        beforeTest: (editorState) async {
+          final transaction = editorState.transaction;
+          // Insert two numbered list nodes
+          // 1. Parent One
+          // 2.
+          transaction.insertNodes(
+            [0],
+            [
+              Node(
+                type: NumberedListBlockKeys.type,
+                attributes: {
+                  'delta': [
+                    {"insert": "One"},
+                  ],
+                },
+              ),
+              Node(
+                type: NumberedListBlockKeys.type,
+                attributes: {'delta': []},
+              ),
+            ],
+          );
+
+          // Set the selection to the second numbered list node (which has empty delta)
+          transaction.afterSelection = Selection.collapsed(Position(path: [1]));
+
+          await editorState.apply(transaction);
+          await tester.pumpAndSettle();
+        },
+        (editorState) {
+          final secondNode = editorState.getNodeAtPath([1]);
+          expect(secondNode?.delta?.toPlainText(), 'Hello');
+          expect(secondNode?.children.length, 1);
+
+          final childNode = secondNode?.children.first;
+          expect(childNode?.delta?.toPlainText(), 'World');
+          expect(childNode?.type, BulletedListBlockKeys.type);
+        },
+      );
+    });
   });
 
   testWidgets('paste image(png) from memory', (tester) async {
@@ -210,42 +258,33 @@ void main() {
   testWidgets('paste the html content contains section', (tester) async {
     const html =
         '''<meta charset='utf-8'><section style="margin: 0px 8px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgba(255, 255, 255, 0.6); font-family: system-ui, -apple-system, &quot;system-ui&quot;, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(25, 25, 25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(0, 160, 113);"><strong style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important;">AppFlowy</strong></span></section><section style="margin: 0px 8px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgba(255, 255, 255, 0.6); font-family: system-ui, -apple-system, &quot;system-ui&quot;, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(25, 25, 25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(0, 160, 113);"><strong style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important;">Hello World</strong></span></section>''';
-    await tester.pasteContent(
-      html: html,
-      (editorState) {
-        expect(editorState.document.root.children.length, 2);
-        final node1 = editorState.getNodeAtPath([0])!;
-        final node2 = editorState.getNodeAtPath([1])!;
-        expect(node1.type, ParagraphBlockKeys.type);
-        expect(node2.type, ParagraphBlockKeys.type);
-      },
-    );
+    await tester.pasteContent(html: html, (editorState) {
+      expect(editorState.document.root.children.length, 2);
+      final node1 = editorState.getNodeAtPath([0])!;
+      final node2 = editorState.getNodeAtPath([1])!;
+      expect(node1.type, ParagraphBlockKeys.type);
+      expect(node2.type, ParagraphBlockKeys.type);
+    });
   });
 
   testWidgets('paste the html from google translation', (tester) async {
     const html =
         '''<meta charset='utf-8'><section style="margin: 0px 8px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgba(255, 255, 255, 0.6); font-family: system-ui, -apple-system, &quot;system-ui&quot;, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(25, 25, 25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(0, 160, 113);"><strong style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important;"><font style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: inherit;"><font style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: inherit;">new force</font></font></strong></span></section><section style="margin: 0px 8px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgba(255, 255, 255, 0.6); font-family: system-ui, -apple-system, &quot;system-ui&quot;, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(25, 25, 25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(0, 160, 113);"><strong style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important;"><font style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: inherit;"><font style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; vertical-align: inherit;">Assessment focus: potential motivations, empathy</font></font></strong></span></section><section style="margin: 0px 8px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgba(255, 255, 255, 0.6); font-family: system-ui, -apple-system, &quot;system-ui&quot;, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(25, 25, 25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section><section style="margin: 0px 8px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgba(255, 255, 255, 0.6); font-family: system-ui, -apple-system, &quot;system-ui&quot;, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(25, 25, 25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><font style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-Line truncated
-    await tester.pasteContent(
-      html: html,
-      (editorState) {
-        expect(editorState.document.root.children.length, 8);
-      },
-    );
+    await tester.pasteContent(html: html, (editorState) {
+      expect(editorState.document.root.children.length, 8);
+    });
   });
 
   testWidgets(
     'auto convert url to link preview block',
-    (widgetTester) async {
+    (tester) async {
       const url = 'https://appflowy.io';
-      await widgetTester.pasteContent(
-        plainText: url,
-        (editorState) {
-          expect(editorState.document.root.children.length, 2);
-          final node = editorState.getNodeAtPath([0])!;
-          expect(node.type, LinkPreviewBlockKeys.type);
-          expect(node.attributes[LinkPreviewBlockKeys.url], url);
-        },
-      );
+      await tester.pasteContent(plainText: url, (editorState) {
+        expect(editorState.document.root.children.length, 2);
+        final node = editorState.getNodeAtPath([0])!;
+        expect(node.type, LinkPreviewBlockKeys.type);
+        expect(node.attributes[LinkPreviewBlockKeys.url], url);
+      });
     },
   );
 }
@@ -256,6 +295,7 @@ extension on WidgetTester {
     Future<void> Function(EditorState editorState)? beforeTest,
     String? plainText,
     String? html,
+    String? inAppJson,
     (String, Uint8List?)? image,
   }) async {
     await initializeAppFlowy();
@@ -271,6 +311,7 @@ extension on WidgetTester {
       ClipboardServiceData(
         plainText: plainText,
         html: html,
+        inAppJson: inAppJson,
         image: image,
       ),
     );

frontend/appflowy_flutter/integration_test/desktop/document/document_inline_page_reference_test.dart

@@ -111,6 +111,7 @@ Future<void> triggerReferenceDocumentBySlashMenu(WidgetTester tester) async {
       LogicalKeyboardKey.enter,
     ],
     tester: tester,
+    withKeyUp: true,
   );
 
   await tester.pumpAndSettle();
@@ -129,6 +130,7 @@ Future<void> enterDocumentText(WidgetTester tester) async {
       LogicalKeyboardKey.keyT,
     ],
     tester: tester,
+    withKeyUp: true,
   );
   await tester.pumpAndSettle();
 }

frontend/appflowy_flutter/integration_test/desktop/document/document_more_actions_test.dart

@@ -0,0 +1,34 @@
+import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('MoreViewActions', () {
+    testWidgets('can duplicate and delete from menu', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.pumpAndSettle();
+
+      final pageFinder = find.byType(ViewItem);
+      expect(pageFinder, findsNWidgets(1));
+
+      // Duplicate
+      await tester.openMoreViewActions();
+      await tester.duplicateByMoreViewActions();
+      await tester.pumpAndSettle();
+
+      expect(pageFinder, findsNWidgets(2));
+
+      // Delete
+      await tester.openMoreViewActions();
+      await tester.deleteByMoreViewActions();
+      await tester.pumpAndSettle();
+
+      expect(pageFinder, findsNWidgets(1));
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/document/document_test_runner.dart

@@ -6,6 +6,9 @@ import 'document_copy_and_paste_test.dart' as document_copy_and_paste_test;
 import 'document_create_and_delete_test.dart'
     as document_create_and_delete_test;
 import 'document_option_action_test.dart' as document_option_action_test;
+import 'document_inline_page_reference_test.dart'
+    as document_inline_page_reference_test;
+import 'document_more_actions_test.dart' as document_more_actions_test;
 import 'document_text_direction_test.dart' as document_text_direction_test;
 import 'document_with_cover_image_test.dart' as document_with_cover_image_test;
 import 'document_with_database_test.dart' as document_with_database_test;
@@ -13,11 +16,11 @@ import 'document_with_image_block_test.dart' as document_with_image_block_test;
 import 'document_with_inline_math_equation_test.dart'
     as document_with_inline_math_equation_test;
 import 'document_with_inline_page_test.dart' as document_with_inline_page_test;
+import 'document_with_multi_image_block_test.dart'
+    as document_with_multi_image_block_test;
 import 'document_with_outline_block_test.dart' as document_with_outline_block;
 import 'document_with_toggle_list_test.dart' as document_with_toggle_list_test;
 import 'edit_document_test.dart' as document_edit_test;
-import 'document_inline_page_reference_test.dart'
-    as document_inline_page_reference_test;
 
 void startTesting() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -37,5 +40,7 @@ void startTesting() {
   document_text_direction_test.main();
   document_option_action_test.main();
   document_with_image_block_test.main();
+  document_with_multi_image_block_test.main();
   document_inline_page_reference_test.main();
+  document_more_actions_test.main();
 }

frontend/appflowy_flutter/integration_test/desktop/document/document_with_cover_image_test.dart

@@ -130,24 +130,24 @@ void main() {
       final searchEmojiTextField = find.byWidgetPredicate(
         (widget) =>
             widget is TextField &&
-            widget.decoration!.hintText == LocaleKeys.emoji_search.tr(),
+            widget.decoration!.hintText == LocaleKeys.search_label.tr(),
       );
       await tester.enterText(
         searchEmojiTextField,
-        'hand',
+        'punch',
       );
 
       // change skin tone
       await tester.editor.changeEmojiSkinTone(EmojiSkinTone.dark);
 
       // select an icon with skin tone
-      const hand = '👋🏿';
-      await tester.tapEmoji(hand);
-      tester.expectToSeeDocumentIcon(hand);
+      const punch = '👊🏿';
+      await tester.tapEmoji(punch);
+      tester.expectToSeeDocumentIcon(punch);
       tester.expectViewHasIcon(
         gettingStarted,
         ViewLayoutPB.Document,
-        hand,
+        punch,
       );
     });
   });

frontend/appflowy_flutter/integration_test/desktop/document/document_with_database_test.dart

@@ -56,7 +56,7 @@ void main() {
       expect(
         find.descendant(
           of: find.byType(AppFlowyEditor),
-          matching: find.byType(BoardPage),
+          matching: find.byType(DesktopBoardPage),
         ),
         findsOneWidget,
       );
@@ -104,7 +104,7 @@ void main() {
       expect(
         find.descendant(
           of: find.byType(AppFlowyEditor),
-          matching: find.byType(BoardPage),
+          matching: find.byType(DesktopBoardPage),
         ),
         findsOneWidget,
       );

frontend/appflowy_flutter/integration_test/desktop/document/document_with_image_block_test.dart

@@ -1,21 +1,22 @@
 import 'dart:io';
 
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/core/config/kv.dart';
 import 'package:appflowy/core/config/kv_keys.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/image/custom_image_block_component.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/image/embed_image_url_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/custom_image_block_component/custom_image_block_component.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_placeholder.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/resizeable_image.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu/upload_image_menu.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/embed_image_url_widget.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_editor/appflowy_editor.dart'
     hide UploadImageMenu, ResizableImage;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
@@ -36,7 +37,7 @@ void main() {
 
       // create a new document
       await tester.createNewPageWithNameUnderParent(
-        name: LocaleKeys.document_plugins_image_addAnImage.tr(),
+        name: LocaleKeys.document_plugins_image_addAnImageDesktop.tr(),
       );
 
       // tap the first line of the document
@@ -84,7 +85,7 @@ void main() {
 
       // create a new document
       await tester.createNewPageWithNameUnderParent(
-        name: LocaleKeys.document_plugins_image_addAnImage.tr(),
+        name: LocaleKeys.document_plugins_image_addAnImageDesktop.tr(),
       );
 
       // tap the first line of the document
@@ -137,7 +138,7 @@ void main() {
 
         // create a new document
         await tester.createNewPageWithNameUnderParent(
-          name: LocaleKeys.document_plugins_image_addAnImage.tr(),
+          name: LocaleKeys.document_plugins_image_addAnImageDesktop.tr(),
         );
 
         // tap the first line of the document
@@ -161,5 +162,67 @@ void main() {
         expect(find.byType(UnsplashImageWidget), findsOneWidget);
       });
     });
+
+    testWidgets('insert two images from local file at once', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(
+        name: LocaleKeys.document_plugins_image_addAnImageDesktop.tr(),
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName('Image');
+      expect(find.byType(CustomImageBlockComponent), findsOneWidget);
+      expect(find.byType(ImagePlaceholder), findsOneWidget);
+      expect(
+        find.descendant(
+          of: find.byType(ImagePlaceholder),
+          matching: find.byType(AppFlowyPopover),
+        ),
+        findsOneWidget,
+      );
+      expect(find.byType(UploadImageMenu), findsOneWidget);
+
+      final firstImage =
+          await rootBundle.load('assets/test/images/sample.jpeg');
+      final secondImage =
+          await rootBundle.load('assets/test/images/sample.gif');
+      final tempDirectory = await getTemporaryDirectory();
+
+      final firstImagePath = p.join(tempDirectory.path, 'sample.jpeg');
+      final firstFile = File(firstImagePath)
+        ..writeAsBytesSync(firstImage.buffer.asUint8List());
+
+      final secondImagePath = p.join(tempDirectory.path, 'sample.gif');
+      final secondFile = File(secondImagePath)
+        ..writeAsBytesSync(secondImage.buffer.asUint8List());
+
+      mockPickFilePaths(paths: [firstImagePath, secondImagePath]);
+
+      await getIt<KeyValueStorage>().set(KVKeys.kCloudType, '0');
+      await tester.tapButtonWithName(
+        LocaleKeys.document_imageBlock_upload_placeholder.tr(),
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(ResizableImage), findsNWidgets(2));
+
+      final firstNode =
+          tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(firstNode.type, ImageBlockKeys.type);
+      expect(firstNode.attributes[ImageBlockKeys.url], isNotEmpty);
+
+      final secondNode =
+          tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(secondNode.type, ImageBlockKeys.type);
+      expect(secondNode.attributes[ImageBlockKeys.url], isNotEmpty);
+
+      // remove the temp files
+      await Future.wait([firstFile.delete(), secondFile.delete()]);
+    });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/document/document_with_multi_image_block_test.dart

@@ -0,0 +1,287 @@
+import 'dart:io';
+
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import 'package:appflowy/core/config/kv.dart';
+import 'package:appflowy/core/config/kv_keys.dart';
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/multi_image_block_component/multi_image_block_component.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/multi_image_block_component/multi_image_placeholder.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/multi_image_layouts.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu/upload_image_menu.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/embed_image_url_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy/shared/appflowy_network_image.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/workspace/presentation/widgets/image_viewer/interactive_image_toolbar.dart';
+import 'package:appflowy/workspace/presentation/widgets/image_viewer/interactive_image_viewer.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:path/path.dart' as p;
+import 'package:path_provider/path_provider.dart';
+
+import '../../shared/mock/mock_file_picker.dart';
+import '../../shared/util.dart';
+import '../board/board_hide_groups_test.dart';
+
+void main() {
+  setUp(() {
+    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+    TestWidgetsFlutterBinding.ensureInitialized();
+  });
+
+  group('multi image block in document', () {
+    testWidgets('insert images from local and use interactive viewer',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(
+        name: 'multi image block test',
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName('Photo gallery');
+      expect(find.byType(MultiImageBlockComponent), findsOneWidget);
+      expect(find.byType(MultiImagePlaceholder), findsOneWidget);
+
+      await tester.tap(find.byType(MultiImagePlaceholder));
+      await tester.pumpAndSettle();
+
+      expect(find.byType(UploadImageMenu), findsOneWidget);
+
+      final firstImage =
+          await rootBundle.load('assets/test/images/sample.jpeg');
+      final secondImage =
+          await rootBundle.load('assets/test/images/sample.gif');
+      final tempDirectory = await getTemporaryDirectory();
+
+      final firstImagePath = p.join(tempDirectory.path, 'sample.jpeg');
+      final firstFile = File(firstImagePath)
+        ..writeAsBytesSync(firstImage.buffer.asUint8List());
+
+      final secondImagePath = p.join(tempDirectory.path, 'sample.gif');
+      final secondFile = File(secondImagePath)
+        ..writeAsBytesSync(secondImage.buffer.asUint8List());
+
+      mockPickFilePaths(paths: [firstImagePath, secondImagePath]);
+
+      await getIt<KeyValueStorage>().set(KVKeys.kCloudType, '0');
+      await tester.tapButtonWithName(
+        LocaleKeys.document_imageBlock_upload_placeholder.tr(),
+      );
+      await tester.pumpAndSettle();
+      expect(find.byType(ImageBrowserLayout), findsOneWidget);
+      final node = tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(node.type, MultiImageBlockKeys.type);
+
+      final data = MultiImageData.fromJson(
+        node.attributes[MultiImageBlockKeys.images],
+      );
+
+      expect(data.images.length, 2);
+
+      // Start using the interactive viewer to view the image(s)
+      final imageFinder = find
+          .byWidgetPredicate(
+            (w) =>
+                w is Image &&
+                w.image is FileImage &&
+                (w.image as FileImage).file.path.endsWith('.jpeg'),
+          )
+          .first;
+      await tester.tap(imageFinder);
+      await tester.pump(kDoubleTapMinTime);
+      await tester.tap(imageFinder);
+      await tester.pumpAndSettle();
+
+      final ivFinder = find.byType(InteractiveImageViewer);
+      expect(ivFinder, findsOneWidget);
+
+      // go to next image
+      await tester.tap(find.byFlowySvg(FlowySvgs.arrow_right_s));
+      await tester.pumpAndSettle();
+
+      // Expect image to end with .gif
+      final gifImageFinder = find.byWidgetPredicate(
+        (w) =>
+            w is Image &&
+            w.image is FileImage &&
+            (w.image as FileImage).file.path.endsWith('.gif'),
+      );
+
+      gifImageFinder.evaluate();
+      expect(gifImageFinder.found.length, 2);
+
+      // go to previous image
+      await tester.tap(find.byFlowySvg(FlowySvgs.arrow_left_s));
+      await tester.pumpAndSettle();
+
+      gifImageFinder.evaluate();
+      expect(gifImageFinder.found.length, 1);
+
+      // remove the temp files
+      await Future.wait([firstFile.delete(), secondFile.delete()]);
+    });
+
+    testWidgets('insert and delete images from network', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(
+        name: 'multi image block test',
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName('Photo gallery');
+      expect(find.byType(MultiImageBlockComponent), findsOneWidget);
+      expect(find.byType(MultiImagePlaceholder), findsOneWidget);
+
+      await tester.tap(find.byType(MultiImagePlaceholder));
+      await tester.pumpAndSettle();
+
+      expect(find.byType(UploadImageMenu), findsOneWidget);
+
+      await tester.tapButtonWithName(
+        LocaleKeys.document_imageBlock_embedLink_label.tr(),
+      );
+
+      const url =
+          'https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=david-marcu-78A265wPiO4-unsplash.jpg&w=640';
+      await tester.enterText(
+        find.descendant(
+          of: find.byType(EmbedImageUrlWidget),
+          matching: find.byType(TextField),
+        ),
+        url,
+      );
+      await tester.pumpAndSettle();
+
+      await tester.tapButton(
+        find.descendant(
+          of: find.byType(EmbedImageUrlWidget),
+          matching: find.text(
+            LocaleKeys.document_imageBlock_embedLink_label.tr(),
+            findRichText: true,
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(ImageBrowserLayout), findsOneWidget);
+      final node = tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(node.type, MultiImageBlockKeys.type);
+
+      final data = MultiImageData.fromJson(
+        node.attributes[MultiImageBlockKeys.images],
+      );
+
+      expect(data.images.length, 1);
+
+      final imageFinder = find
+          .byWidgetPredicate(
+            (w) => w is FlowyNetworkImage && w.url == url,
+          )
+          .first;
+
+      // Insert two images from network
+      for (int i = 0; i < 2; i++) {
+        // Hover on the image to show the image toolbar
+        await tester.hoverOnWidget(
+          imageFinder,
+          onHover: () async {
+            // Click on the add
+            final addFinder = find.descendant(
+              of: find.byType(MultiImageMenu),
+              matching: find.byFlowySvg(FlowySvgs.add_s),
+            );
+
+            expect(addFinder, findsOneWidget);
+            await tester.tap(addFinder);
+            await tester.pumpAndSettle();
+
+            await tester.tapButtonWithName(
+              LocaleKeys.document_imageBlock_embedLink_label.tr(),
+            );
+
+            await tester.enterText(
+              find.descendant(
+                of: find.byType(EmbedImageUrlWidget),
+                matching: find.byType(TextField),
+              ),
+              url,
+            );
+            await tester.pumpAndSettle();
+
+            await tester.tapButton(
+              find.descendant(
+                of: find.byType(EmbedImageUrlWidget),
+                matching: find.text(
+                  LocaleKeys.document_imageBlock_embedLink_label.tr(),
+                  findRichText: true,
+                ),
+              ),
+            );
+            await tester.pumpAndSettle();
+          },
+        );
+      }
+
+      await tester.pumpAndSettle();
+
+      // There should be 4 images visible now, where 2 are thumbnails
+      expect(find.byType(ThumbnailItem), findsNWidgets(3));
+
+      // And all three use ImageRender
+      expect(find.byType(ImageRender), findsNWidgets(4));
+
+      // Hover on and delete the first thumbnail image
+      await tester.hoverOnWidget(find.byType(ThumbnailItem).first);
+
+      final deleteFinder = find
+          .descendant(
+            of: find.byType(ThumbnailItem),
+            matching: find.byFlowySvg(FlowySvgs.delete_s),
+          )
+          .first;
+
+      expect(deleteFinder, findsOneWidget);
+      await tester.tap(deleteFinder);
+      await tester.pumpAndSettle();
+
+      expect(find.byType(ImageRender), findsNWidgets(3));
+
+      // Delete one from interactive viewer
+      await tester.tap(imageFinder);
+      await tester.pump(kDoubleTapMinTime);
+      await tester.tap(imageFinder);
+      await tester.pumpAndSettle();
+
+      final ivFinder = find.byType(InteractiveImageViewer);
+      expect(ivFinder, findsOneWidget);
+
+      await tester.tap(
+        find.descendant(
+          of: find.byType(InteractiveImageToolbar),
+          matching: find.byFlowySvg(FlowySvgs.delete_s),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(InteractiveImageViewer), findsNothing);
+
+      // There should be 1 image and the thumbnail for said image still visible
+      expect(find.byType(ImageRender), findsNWidgets(2));
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/settings/notifications_settings_test.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/workspace/application/settings/settings_dialog_bloc.dart';
-import 'package:flutter/material.dart';
+import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -8,8 +8,8 @@ import '../../shared/util.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('board add row test', () {
-    testWidgets('Add card from header', (tester) async {
+  group('notification test', () {
+    testWidgets('enable notification', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
 
@@ -17,25 +17,25 @@ void main() {
       await tester.openSettingsPage(SettingsPage.notifications);
       await tester.pumpAndSettle();
 
-      final switchFinder = find.byType(Switch);
+      final toggleFinder = find.byType(Toggle).first;
 
       // Defaults to enabled
-      Switch switchWidget = tester.widget(switchFinder);
-      expect(switchWidget.value, true);
+      Toggle toggleWidget = tester.widget(toggleFinder);
+      expect(toggleWidget.value, true);
 
       // Disable
-      await tester.tap(switchFinder);
+      await tester.tap(toggleFinder);
       await tester.pumpAndSettle();
 
-      switchWidget = tester.widget(switchFinder);
-      expect(switchWidget.value, false);
+      toggleWidget = tester.widget(toggleFinder);
+      expect(toggleWidget.value, false);
 
       // Enable again
-      await tester.tap(switchFinder);
+      await tester.tap(toggleFinder);
       await tester.pumpAndSettle();
 
-      switchWidget = tester.widget(switchFinder);
-      expect(switchWidget.value, true);
+      toggleWidget = tester.widget(toggleFinder);
+      expect(toggleWidget.value, true);
     });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/settings/settings_billing_test.dart

@@ -0,0 +1,50 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/auth_operation.dart';
+import '../../shared/base.dart';
+import '../../shared/expectation.dart';
+import '../../shared/settings.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Settings Billing', () {
+    testWidgets('Local auth cannot see plan+billing', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapSignInAsGuest();
+      await tester.expectToSeeHomePageWithGetStartedPage();
+
+      await tester.openSettings();
+      await tester.pumpAndSettle();
+
+      // We check that another settings page is present to ensure
+      // it's not a fluke
+      expect(
+        find.text(
+          LocaleKeys.settings_workspacePage_menuLabel.tr(),
+          skipOffstage: false,
+        ),
+        findsOneWidget,
+      );
+
+      expect(
+        find.text(
+          LocaleKeys.settings_planPage_menuLabel.tr(),
+          skipOffstage: false,
+        ),
+        findsNothing,
+      );
+
+      expect(
+        find.text(
+          LocaleKeys.settings_billingPage_menuLabel.tr(),
+          skipOffstage: false,
+        ),
+        findsNothing,
+      );
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/settings/settings_runner.dart

@@ -1,11 +1,13 @@
 import 'package:integration_test/integration_test.dart';
 
 import 'notifications_settings_test.dart' as notifications_settings_test;
-import 'user_language_test.dart' as user_language_test;
+import 'settings_billing_test.dart' as settings_billing_test;
+import 'shortcuts_settings_test.dart' as shortcuts_settings_test;
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   notifications_settings_test.main();
-  user_language_test.main();
+  settings_billing_test.main();
+  shortcuts_settings_test.main();
 }

frontend/appflowy_flutter/integration_test/desktop/settings/shortcuts_settings_test.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/application/settings/settings_dialog_bloc.dart';
+import 'package:appflowy/workspace/presentation/settings/pages/settings_shortcuts_view.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/keyboard.dart';
+import '../../shared/util.dart';
+import '../board/board_hide_groups_test.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('shortcuts test', () {
+    testWidgets('can change and overwrite shortcut', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.openSettings();
+      await tester.openSettingsPage(SettingsPage.shortcuts);
+      await tester.pumpAndSettle();
+
+      final backspaceCmd =
+          LocaleKeys.settings_shortcutsPage_keybindings_backspace.tr();
+
+      // Input "Delete" into the search field
+      await tester.enterText(find.byType(TextField), backspaceCmd);
+      await tester.pumpAndSettle();
+
+      await tester.hoverOnWidget(
+        find.descendant(
+          of: find.byType(ShortcutSettingTile),
+          matching: find.text(backspaceCmd),
+        ),
+        onHover: () async {
+          await tester.tap(find.byFlowySvg(FlowySvgs.edit_s));
+          await tester.pumpAndSettle();
+
+          await FlowyTestKeyboard.simulateKeyDownEvent(
+            [
+              LogicalKeyboardKey.delete,
+              LogicalKeyboardKey.enter,
+            ],
+            tester: tester,
+          );
+          await tester.pumpAndSettle();
+        },
+      );
+
+      // We expect to see conflict dialog
+      expect(
+        find.text(
+          LocaleKeys.settings_shortcutsPage_conflictDialog_confirmLabel.tr(),
+        ),
+        findsOneWidget,
+      );
+
+      // Press on confirm label
+      await tester.tap(
+        find.text(
+          LocaleKeys.settings_shortcutsPage_conflictDialog_confirmLabel.tr(),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      // We expect the first ShortcutSettingTile to have one
+      // [KeyBadge] with `delete` label
+      final first = tester.widget(find.byType(ShortcutSettingTile).first)
+          as ShortcutSettingTile;
+      expect(
+        first.command.command,
+        'delete',
+      );
+
+      // And the second one which is `Delete left character` to have none
+      // as it will have been overwritten
+      final second = tester.widget(find.byType(ShortcutSettingTile).at(1))
+          as ShortcutSettingTile;
+      expect(
+        second.command.command,
+        '',
+      );
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/settings/user_language_test.dart

@@ -1,70 +0,0 @@
-import 'dart:ui';
-
-import 'package:appflowy/workspace/application/settings/prelude.dart';
-import 'package:appflowy/workspace/presentation/settings/widgets/settings_language_view.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:integration_test/integration_test.dart';
-
-import '../../shared/util.dart';
-
-void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
-  group('Settings: user language tests', () {
-    testWidgets('select language, language changed', (tester) async {
-      await tester.initializeAppFlowy();
-
-      await tester.tapAnonymousSignInButton();
-      await tester.expectToSeeHomePageWithGetStartedPage();
-      await tester.openSettings();
-
-      await tester.openSettingsPage(SettingsPage.language);
-
-      final userLanguageFinder = find.descendant(
-        of: find.byType(SettingsLanguageView),
-        matching: find.byType(LanguageSelector),
-      );
-
-      // Grab current locale
-      LanguageSelector userLanguage =
-          tester.widget<LanguageSelector>(userLanguageFinder);
-      Locale currentLocale = userLanguage.currentLocale;
-
-      // Open language selector
-      await tester.tap(userLanguageFinder);
-      await tester.pumpAndSettle();
-
-      // Select first option that isn't default
-      await tester.tap(find.byType(LanguageItem).at(1));
-      await tester.pumpAndSettle();
-
-      // Make sure the new locale is not the same as previous one
-      userLanguage = tester.widget<LanguageSelector>(userLanguageFinder);
-      expect(
-        userLanguage.currentLocale,
-        isNot(equals(currentLocale)),
-        reason: "new language shouldn't equal the previous selected language",
-      );
-
-      // Update the current locale to a new one
-      currentLocale = userLanguage.currentLocale;
-
-      // Tried the same flow for the second time
-      // Open language selector
-      await tester.tap(userLanguageFinder);
-      await tester.pumpAndSettle();
-
-      // Select second option that isn't default
-      await tester.tap(find.byType(LanguageItem).at(2));
-      await tester.pumpAndSettle();
-
-      // Make sure the new locale is not the same as previous one
-      userLanguage = tester.widget<LanguageSelector>(userLanguageFinder);
-      expect(
-        userLanguage.currentLocale,
-        isNot(equals(currentLocale)),
-        reason: "new language shouldn't equal the previous selected language",
-      );
-    });
-  });
-}

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_expand_test.dart

@@ -1,6 +1,6 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
-import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar_folder.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -12,8 +12,8 @@ void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   group('sidebar expand test', () {
-    bool isExpanded({required FolderCategoryType type}) {
-      if (type == FolderCategoryType.private) {
+    bool isExpanded({required FolderSpaceType type}) {
+      if (type == FolderSpaceType.private) {
         return find
             .descendant(
               of: find.byType(PrivateSectionFolder),
@@ -30,19 +30,19 @@ void main() {
       await tester.tapAnonymousSignInButton();
 
       // first time is expanded
-      expect(isExpanded(type: FolderCategoryType.private), true);
+      expect(isExpanded(type: FolderSpaceType.private), true);
 
       // collapse the personal folder
       await tester.tapButton(
         find.byTooltip(LocaleKeys.sideBar_clickToHidePrivate.tr()),
       );
-      expect(isExpanded(type: FolderCategoryType.private), false);
+      expect(isExpanded(type: FolderSpaceType.private), false);
 
       // expand the personal folder
       await tester.tapButton(
         find.byTooltip(LocaleKeys.sideBar_clickToHidePrivate.tr()),
       );
-      expect(isExpanded(type: FolderCategoryType.private), true);
+      expect(isExpanded(type: FolderSpaceType.private), true);
     });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_favorites_test.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
-import 'package:appflowy/workspace/presentation/home/menu/sidebar/folder/_favorite_folder.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
@@ -46,7 +46,7 @@ void main() {
       await tester.favoriteViewByName(names[1]);
       expect(
         tester.findFavoritePageName(names[1]),
-        findsNWidgets(2),
+        findsNWidgets(1),
       );
 
       await tester.unfavoriteViewByName(gettingStarted);
@@ -120,9 +120,9 @@ void main() {
             (widget) =>
                 widget is SingleInnerViewItem &&
                 widget.view.isFavorite &&
-                widget.categoryType == FolderCategoryType.favorite,
+                widget.spaceType == FolderSpaceType.favorite,
           ),
-          findsNWidgets(6),
+          findsNWidgets(3),
         );
 
         await tester.hoverOnPageName(
@@ -135,7 +135,7 @@ void main() {
 
         expect(
           tester.findAllFavoritePages(),
-          findsNWidgets(3),
+          findsNWidgets(2),
         );
 
         await tester.hoverOnPageName(
@@ -168,7 +168,7 @@ void main() {
                 widget.isSelected != null &&
                 widget.isSelected!(),
           ),
-          findsNWidgets(2),
+          findsNWidgets(1),
         );
       },
     );

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_icon_test.dart

@@ -18,6 +18,9 @@ void main() {
 
       // create document, board, grid and calendar views
       for (final value in ViewLayoutPB.values) {
+        if (value == ViewLayoutPB.Chat) {
+          continue;
+        }
         await tester.createNewPageWithNameUnderParent(
           name: value.name,
           parentName: gettingStarted,
@@ -46,6 +49,9 @@ void main() {
 
       // create document, board, grid and calendar views
       for (final value in ViewLayoutPB.values) {
+        if (value == ViewLayoutPB.Chat) {
+          continue;
+        }
         await tester.createNewPageWithNameUnderParent(
           name: value.name,
           parentName: gettingStarted,

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_test.dart

@@ -39,6 +39,9 @@ void main() {
       await tester.tapAnonymousSignInButton();
 
       for (final layout in ViewLayoutPB.values) {
+        if (layout == ViewLayoutPB.Chat) {
+          continue;
+        }
         // create a new page
         final name = 'AppFlowy_$layout';
         await tester.createNewPageWithNameUnderParent(
@@ -61,11 +64,13 @@ void main() {
             expect(find.byType(GridPage), findsOneWidget);
             break;
           case ViewLayoutPB.Board:
-            expect(find.byType(BoardPage), findsOneWidget);
+            expect(find.byType(DesktopBoardPage), findsOneWidget);
             break;
           case ViewLayoutPB.Calendar:
             expect(find.byType(CalendarPage), findsOneWidget);
             break;
+          case ViewLayoutPB.Chat:
+            break;
         }
 
         await tester.openPage(gettingStarted);

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_test_runner.dart

@@ -4,7 +4,7 @@ import 'sidebar_favorites_test.dart' as sidebar_favorite_test;
 import 'sidebar_icon_test.dart' as sidebar_icon_test;
 import 'sidebar_test.dart' as sidebar_test;
 
-void startTesting() {
+void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   // Sidebar integration tests

frontend/appflowy_flutter/integration_test/desktop/uncategorized/appearance_settings_test.dart

@@ -1,93 +0,0 @@
-import 'package:appflowy/util/font_family_extension.dart';
-import 'package:appflowy/workspace/application/appearance_defaults.dart';
-import 'package:appflowy/workspace/application/settings/prelude.dart';
-import 'package:appflowy/workspace/presentation/settings/widgets/settings_appearance/settings_appearance.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:integration_test/integration_test.dart';
-
-import '../../shared/util.dart';
-
-void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
-  group('appearance settings tests', () {
-    testWidgets('after editing text field, button should be able to be clicked',
-        (tester) async {
-      await tester.initializeAppFlowy();
-
-      await tester.tapAnonymousSignInButton();
-      await tester.expectToSeeHomePageWithGetStartedPage();
-      await tester.openSettings();
-
-      await tester.openSettingsPage(SettingsPage.appearance);
-
-      final dropDown = find.byKey(ThemeFontFamilySetting.popoverKey);
-      await tester.tap(dropDown);
-      await tester.pumpAndSettle();
-
-      final textField = find.byKey(ThemeFontFamilySetting.textFieldKey);
-      await tester.tap(textField);
-      await tester.pumpAndSettle();
-
-      await tester.enterText(textField, 'Abel');
-      await tester.pumpAndSettle();
-      final fontFamilyButton = find.byKey(const Key('Abel'));
-
-      expect(fontFamilyButton, findsOneWidget);
-      await tester.tap(fontFamilyButton);
-      await tester.pumpAndSettle();
-
-      // just switch the page and verify that the font family was set after that
-      await tester.openSettingsPage(SettingsPage.files);
-      await tester.openSettingsPage(SettingsPage.appearance);
-
-      expect(find.textContaining('Abel'), findsOneWidget);
-    });
-
-    testWidgets('reset the font family', (tester) async {
-      await tester.initializeAppFlowy();
-
-      await tester.tapAnonymousSignInButton();
-      await tester.expectToSeeHomePageWithGetStartedPage();
-      await tester.openSettings();
-
-      await tester.openSettingsPage(SettingsPage.appearance);
-
-      final dropDown = find.byKey(ThemeFontFamilySetting.popoverKey);
-      await tester.tap(dropDown);
-      await tester.pumpAndSettle();
-
-      final textField = find.byKey(ThemeFontFamilySetting.textFieldKey);
-      await tester.tap(textField);
-      await tester.pumpAndSettle();
-
-      await tester.enterText(textField, 'Abel');
-      await tester.pumpAndSettle();
-      final fontFamilyButton = find.byKey(const Key('Abel'));
-
-      expect(fontFamilyButton, findsOneWidget);
-      await tester.tap(fontFamilyButton);
-      await tester.pumpAndSettle();
-
-      // just switch the page and verify that the font family was set after that
-      await tester.openSettingsPage(SettingsPage.files);
-      await tester.openSettingsPage(SettingsPage.appearance);
-
-      final resetButton = find.byKey(ThemeFontFamilySetting.resetButtonKey);
-      await tester.tap(resetButton);
-      await tester.pumpAndSettle();
-
-      // just switch the page and verify that the font family was set after that
-      await tester.openSettingsPage(SettingsPage.files);
-      await tester.openSettingsPage(SettingsPage.appearance);
-
-      expect(
-        find.textContaining(
-          DefaultAppearanceSettings.kDefaultFontFamily.fontFamilyDisplayName,
-        ),
-        findsNWidgets(2),
-      );
-    });
-  });
-}

frontend/appflowy_flutter/integration_test/desktop/uncategorized/empty_test.dart

@@ -8,9 +8,10 @@ void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   group('Empty', () {
-    testWidgets('toggle theme mode', (tester) async {
+    testWidgets('empty test', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
+      await tester.wait(1000);
     });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/uncategorized/hotkeys_test.dart

@@ -1,11 +1,13 @@
 import 'dart:io';
 
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -23,31 +25,35 @@ void main() {
       await tester.expectToSeeHomePageWithGetStartedPage();
 
       await tester.openSettings();
-      await tester.openSettingsPage(SettingsPage.appearance);
+      await tester.openSettingsPage(SettingsPage.workspace);
       await tester.pumpAndSettle();
 
-      tester.expectToSeeText(
-        LocaleKeys.settings_appearance_themeMode_system.tr(),
-      );
+      final appFinder = find.byType(MaterialApp).first;
+      ThemeMode? themeMode = tester.widget<MaterialApp>(appFinder).themeMode;
+
+      expect(themeMode, ThemeMode.system);
 
       await tester.tapButton(
         find.bySemanticsLabel(
-          LocaleKeys.settings_appearance_themeMode_system.tr(),
+          LocaleKeys.settings_workspacePage_appearance_options_light.tr(),
         ),
       );
-
       await tester.pumpAndSettle();
 
+      themeMode = tester.widget<MaterialApp>(appFinder).themeMode;
+      expect(themeMode, ThemeMode.light);
+
       await tester.tapButton(
         find.bySemanticsLabel(
-          LocaleKeys.settings_appearance_themeMode_dark.tr(),
+          LocaleKeys.settings_workspacePage_appearance_options_dark.tr(),
         ),
       );
+      await tester.pumpAndSettle();
 
-      await tester.pumpAndSettle(const Duration(seconds: 1));
+      themeMode = tester.widget<MaterialApp>(appFinder).themeMode;
+      expect(themeMode, ThemeMode.dark);
 
       await tester.tap(find.byType(SettingsDialog));
-
       await tester.pumpAndSettle();
 
       await FlowyTestKeyboard.simulateKeyDownEvent(
@@ -60,12 +66,10 @@ void main() {
         ],
         tester: tester,
       );
-
       await tester.pumpAndSettle();
 
-      tester.expectToSeeText(
-        LocaleKeys.settings_appearance_themeMode_light.tr(),
-      );
+      themeMode = tester.widget<MaterialApp>(appFinder).themeMode;
+      expect(themeMode, ThemeMode.light);
     });
 
     testWidgets('show or hide home menu', (tester) async {

frontend/appflowy_flutter/integration_test/desktop/uncategorized/import_files_test.dart

@@ -82,11 +82,11 @@ void main() {
         HeadingBlockKeys.type,
       );
       expect(
-        importedPageEditorState.getNodeAtPath([2])!.type,
+        importedPageEditorState.getNodeAtPath([1])!.type,
         HeadingBlockKeys.type,
       );
       expect(
-        importedPageEditorState.getNodeAtPath([4])!.type,
+        importedPageEditorState.getNodeAtPath([2])!.type,
         TableBlockKeys.type,
       );
     });

frontend/appflowy_flutter/integration_test/desktop/uncategorized/language_test.dart

@@ -1,4 +1,4 @@
-import 'package:appflowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:appflowy/user/presentation/screens/skip_log_in_screen.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 

frontend/appflowy_flutter/integration_test/desktop/uncategorized/open_ai_smart_menu_test.dart

@@ -1,4 +1,4 @@
-import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/service/openai_client.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/service/ai_client.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/render/toolbar/toolbar_widget.dart';
@@ -103,8 +103,8 @@ Future<AppFlowyEditor> setUpOpenAITesting(WidgetTester tester) async {
 }
 
 Future<void> mockOpenAIRepository() async {
-  await getIt.unregister<OpenAIRepository>();
-  getIt.registerFactoryAsync<OpenAIRepository>(
+  await getIt.unregister<AIRepository>();
+  getIt.registerFactoryAsync<AIRepository>(
     () => Future.value(
       MockOpenAIRepository(),
     ),

frontend/appflowy_flutter/integration_test/desktop/uncategorized/share_markdown_test.dart

@@ -1,6 +1,6 @@
 import 'dart:io';
 
-import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
+import 'package:appflowy/plugins/shared/share/share_button.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
@@ -51,13 +51,13 @@ void main() {
           },
         );
 
-        final shareButton = find.byType(ShareActionList);
-        final shareButtonState =
-            tester.state(shareButton) as ShareActionListState;
+        final shareButton = find.byType(ShareButton);
+        final shareButtonState = tester.widget(shareButton) as ShareButton;
+
         final path = await mockSaveFilePath(
           p.join(
             context.applicationDataDirectory,
-            '${shareButtonState.name}.md',
+            '${shareButtonState.view.name}.md',
           ),
         );
 

frontend/appflowy_flutter/integration_test/desktop/uncategorized/switch_folder_test.dart

@@ -101,7 +101,7 @@ void main() {
 
       // open settings and restore the location
       await tester.openSettings();
-      await tester.openSettingsPage(SettingsPage.files);
+      await tester.openSettingsPage(SettingsPage.manageData);
       await tester.restoreLocation();
 
       expect(

frontend/appflowy_flutter/integration_test/desktop_runner_3.dart

@@ -3,8 +3,6 @@ import 'package:integration_test/integration_test.dart';
 import 'desktop/board/board_test_runner.dart' as board_test_runner;
 import 'desktop/settings/settings_runner.dart' as settings_test_runner;
 import 'desktop/sidebar/sidebar_test_runner.dart' as sidebar_test_runner;
-import 'desktop/uncategorized/appearance_settings_test.dart'
-    as appearance_test_runner;
 import 'desktop/uncategorized/emoji_shortcut_test.dart' as emoji_shortcut_test;
 import 'desktop/uncategorized/empty_test.dart' as first_test;
 import 'desktop/uncategorized/hotkeys_test.dart' as hotkeys_test;
@@ -26,11 +24,10 @@ Future<void> runIntegration3OnDesktop() async {
   emoji_shortcut_test.main();
   hotkeys_test.main();
   emoji_shortcut_test.main();
-  appearance_test_runner.main();
   settings_test_runner.main();
   share_markdown_test.main();
   import_files_test.main();
-  sidebar_test_runner.startTesting();
-  board_test_runner.startTesting();
+  sidebar_test_runner.main();
+  board_test_runner.main();
   tabs_test.main();
 }

frontend/appflowy_flutter/integration_test/mobile/page_style/document_page_style_test.dart

@@ -0,0 +1,139 @@
+// ignore_for_file: unused_import
+
+import 'dart:io';
+
+import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/view_page/app_bar_buttons.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_buttons.dart';
+import 'package:appflowy/mobile/presentation/home/home.dart';
+import 'package:appflowy/plugins/document/presentation/editor_page.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/document_immersive_cover_bloc.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_style_layout.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/auth/af_cloud_mock_auth_service.dart';
+import 'package:appflowy/user/application/auth/auth_service.dart';
+import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/uuid.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:path/path.dart' as p;
+
+import '../../shared/dir.dart';
+import '../../shared/mock/mock_file_picker.dart';
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('document page style', () {
+    double getCurrentEditorFontSize() {
+      final editorPage = find
+          .byType(AppFlowyEditorPage)
+          .evaluate()
+          .single
+          .widget as AppFlowyEditorPage;
+      return editorPage.styleCustomizer
+          .style()
+          .textStyleConfiguration
+          .text
+          .fontSize!;
+    }
+
+    double getCurrentEditorLineHeight() {
+      final editorPage = find
+          .byType(AppFlowyEditorPage)
+          .evaluate()
+          .single
+          .widget as AppFlowyEditorPage;
+      return editorPage.styleCustomizer
+          .style()
+          .textStyleConfiguration
+          .text
+          .height!;
+    }
+
+    testWidgets('change font size in page style settings', (tester) async {
+      await tester.launchInAnonymousMode();
+
+      // click the getting start page
+      await tester.openPage(gettingStarted);
+      // click the layout button
+      await tester.tapButton(find.byType(MobileViewPageLayoutButton));
+      expect(getCurrentEditorFontSize(), PageStyleFontLayout.normal.fontSize);
+      // change font size from normal to large
+      await tester.tapSvgButton(FlowySvgs.m_font_size_large_s);
+      expect(getCurrentEditorFontSize(), PageStyleFontLayout.large.fontSize);
+      // change font size from large to small
+      await tester.tapSvgButton(FlowySvgs.m_font_size_small_s);
+      expect(getCurrentEditorFontSize(), PageStyleFontLayout.small.fontSize);
+    });
+
+    testWidgets('change line height in page style settings', (tester) async {
+      await tester.launchInAnonymousMode();
+
+      // click the getting start page
+      await tester.openPage(gettingStarted);
+      // click the layout button
+      await tester.tapButton(find.byType(MobileViewPageLayoutButton));
+      expect(
+        getCurrentEditorLineHeight(),
+        PageStyleLineHeightLayout.normal.lineHeight,
+      );
+      // change line height from normal to large
+      await tester.tapSvgButton(FlowySvgs.m_layout_large_s);
+      expect(
+        getCurrentEditorLineHeight(),
+        PageStyleLineHeightLayout.large.lineHeight,
+      );
+      // change line height from large to small
+      await tester.tapSvgButton(FlowySvgs.m_layout_small_s);
+      expect(
+        getCurrentEditorLineHeight(),
+        PageStyleLineHeightLayout.small.lineHeight,
+      );
+    });
+
+    testWidgets('use built-in image as cover', (tester) async {
+      await tester.launchInAnonymousMode();
+
+      // click the getting start page
+      await tester.openPage(gettingStarted);
+      // click the layout button
+      await tester.tapButton(find.byType(MobileViewPageLayoutButton));
+      // toggle the preset button
+      await tester.tapSvgButton(FlowySvgs.m_page_style_presets_m);
+
+      // select the first preset
+      final firstBuiltInImage = find.byWidgetPredicate(
+        (widget) =>
+            widget is Image &&
+            widget.image is AssetImage &&
+            (widget.image as AssetImage).assetName ==
+                PageStyleCoverImageType.builtInImagePath('1'),
+      );
+      await tester.tap(firstBuiltInImage);
+
+      // click done button to exit the page style settings
+      await tester.tapButton(find.byType(BottomSheetDoneButton).first);
+      await tester.tapButton(find.byType(BottomSheetDoneButton).first);
+
+      // check the cover
+      final builtInCover = find.descendant(
+        of: find.byType(DocumentImmersiveCover),
+        matching: firstBuiltInImage,
+      );
+      expect(builtInCover, findsOneWidget);
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/mobile_runner.dart

@@ -1,8 +1,10 @@
 import 'package:integration_test/integration_test.dart';
 
+import 'mobile/home_page/create_new_page_test.dart' as create_new_page_test;
 import 'mobile/sign_in/anonymous_sign_in_test.dart' as anonymous_sign_in_test;
 
 Future<void> runIntegrationOnMobile() async {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
   anonymous_sign_in_test.main();
+  create_new_page_test.main();
 }

frontend/appflowy_flutter/integration_test/shared/auth_operation.dart

@@ -1,18 +1,20 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
 import 'package:appflowy/workspace/presentation/settings/pages/settings_account_view.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/setting_supabase_cloud.dart';
+import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'util.dart';
 
 extension AppFlowyAuthTest on WidgetTester {
   Future<void> tapGoogleLoginInButton() async {
-    await tapButton(find.byKey(const Key('signInWithGoogleButton')));
+    await tapButton(
+      find.byKey(const Key('signInWithGoogleButton')),
+    );
   }
 
   /// Requires being on the SettingsPage.account of the SettingsDialog
@@ -26,8 +28,8 @@ extension AppFlowyAuthTest on WidgetTester {
 
     await tapButton(find.byType(SignInOutButton));
 
-    expectToSeeText(LocaleKeys.button_confirm.tr());
-    await tapButtonWithName(LocaleKeys.button_confirm.tr());
+    expectToSeeText(LocaleKeys.button_ok.tr());
+    await tapButtonWithName(LocaleKeys.button_ok.tr());
   }
 
   Future<void> tapSignInAsGuest() async {
@@ -44,6 +46,12 @@ extension AppFlowyAuthTest on WidgetTester {
     assert(isSwitched == value);
   }
 
+  void assertToggleValue(Finder finder, bool value) {
+    final Toggle switchWidget = widget(finder);
+    final isSwitched = switchWidget.value;
+    assert(isSwitched == value);
+  }
+
   void assertEnableEncryptSwitchValue(bool value) {
     assertSwitchValue(
       find.descendant(
@@ -65,10 +73,10 @@ extension AppFlowyAuthTest on WidgetTester {
   }
 
   void assertAppFlowyCloudEnableSyncSwitchValue(bool value) {
-    assertSwitchValue(
+    assertToggleValue(
       find.descendant(
         of: find.byType(AppFlowyCloudEnableSync),
-        matching: find.byWidgetPredicate((widget) => widget is Switch),
+        matching: find.byWidgetPredicate((widget) => widget is Toggle),
       ),
       value,
     );
@@ -86,7 +94,7 @@ extension AppFlowyAuthTest on WidgetTester {
   Future<void> toggleEnableSync(Type syncButton) async {
     final finder = find.descendant(
       of: find.byType(syncButton),
-      matching: find.byWidgetPredicate((widget) => widget is Switch),
+      matching: find.byWidgetPredicate((widget) => widget is Toggle),
     );
 
     await tapButton(finder);

frontend/appflowy_flutter/integration_test/shared/base.dart

@@ -173,27 +173,39 @@ extension AppFlowyTestBase on WidgetTester {
     int buttons = kPrimaryButton,
     bool warnIfMissed = false,
     int milliseconds = 500,
+    bool pumpAndSettle = true,
   }) async {
     await tap(
       finder,
       buttons: buttons,
       warnIfMissed: warnIfMissed,
     );
-    await pumpAndSettle(
-      Duration(milliseconds: milliseconds),
-      EnginePhase.sendSemanticsUpdate,
-      const Duration(seconds: 5),
-    );
+
+    if (pumpAndSettle) {
+      await this.pumpAndSettle(
+        Duration(milliseconds: milliseconds),
+        EnginePhase.sendSemanticsUpdate,
+        const Duration(seconds: 5),
+      );
+    }
   }
 
-  Future<void> tapButtonWithName(String tr, {int milliseconds = 500}) async {
+  Future<void> tapButtonWithName(
+    String tr, {
+    int milliseconds = 500,
+    bool pumpAndSettle = true,
+  }) async {
     Finder button = find.text(tr, findRichText: true, skipOffstage: false);
     if (button.evaluate().isEmpty) {
       button = find.byWidgetPredicate(
         (widget) => widget is FlowyText && widget.text == tr,
       );
     }
-    await tapButton(button, milliseconds: milliseconds);
+    await tapButton(
+      button,
+      milliseconds: milliseconds,
+      pumpAndSettle: pumpAndSettle,
+    );
   }
 
   Future<void> doubleTapAt(

frontend/appflowy_flutter/integration_test/shared/common_operations.dart

@@ -1,22 +1,19 @@
 import 'dart:io';
 
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/core/config/kv.dart';
 import 'package:appflowy/core/config/kv_keys.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart';
-import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
+import 'package:appflowy/plugins/shared/share/share_button.dart';
 import 'package:appflowy/shared/feature_flags.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/presentation/screens/screens.dart';
 import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
-import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar_new_page_button.dart';
-import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar_workspace.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/draggable_view_item.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_action_type.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_add_button.dart';
@@ -25,12 +22,18 @@ import 'package:appflowy/workspace/presentation/notifications/widgets/flowy_tab.
 import 'package:appflowy/workspace/presentation/notifications/widgets/notification_button.dart';
 import 'package:appflowy/workspace/presentation/notifications/widgets/notification_tab_bar.dart';
 import 'package:appflowy/workspace/presentation/settings/shared/settings_body.dart';
-import 'package:appflowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_menu.dart';
+import 'package:appflowy/workspace/presentation/widgets/more_view_actions/more_view_actions.dart';
+import 'package:appflowy/workspace/presentation/widgets/more_view_actions/widgets/common_view_action.dart';
 import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/widget/buttons/primary_button.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'emoji.dart';
@@ -57,6 +60,7 @@ extension CommonOperations on WidgetTester {
   /// Tap the + button on the home page.
   Future<void> tapAddViewButton({
     String name = gettingStarted,
+    ViewLayoutPB layout = ViewLayoutPB.Document,
   }) async {
     await hoverOnPageName(
       name,
@@ -254,7 +258,7 @@ extension CommonOperations on WidgetTester {
   /// Tap the share button above the document page.
   Future<void> tapShareButton() async {
     final shareButton = find.byWidgetPredicate(
-      (widget) => widget is DocumentShareButton,
+      (widget) => widget is ShareButton,
     );
     await tapButton(shareButton);
   }
@@ -276,7 +280,7 @@ extension CommonOperations on WidgetTester {
     bool openAfterCreated = true,
   }) async {
     // create a new page
-    await tapAddViewButton(name: parentName ?? gettingStarted);
+    await tapAddViewButton(name: parentName ?? gettingStarted, layout: layout);
     await tapButtonWithName(layout.menuName);
     final settingsOrFailure = await getIt<KeyValueStorage>().getWithFormat(
       KVKeys.showRenameDialogWhenCreatingNewFile,
@@ -510,8 +514,9 @@ extension CommonOperations on WidgetTester {
 
     final workspace = find.byType(SidebarWorkspace);
     expect(workspace, findsOneWidget);
-    // click it
-    await tapButton(workspace, milliseconds: 2000);
+
+    await tapButton(workspace, pumpAndSettle: false);
+    await pump(const Duration(seconds: 5));
   }
 
   Future<void> createCollaborativeWorkspace(String name) async {
@@ -526,7 +531,8 @@ extension CommonOperations on WidgetTester {
     // click the create button
     final createButton = find.byKey(createWorkspaceButtonKey);
     expect(createButton, findsOneWidget);
-    await tapButton(createButton);
+    await tapButton(createButton, pumpAndSettle: false);
+    await pump(const Duration(seconds: 5));
 
     // see the create workspace dialog
     final createWorkspaceDialog = find.byType(CreateWorkspaceDialog);
@@ -535,7 +541,70 @@ extension CommonOperations on WidgetTester {
     // input the workspace name
     await enterText(find.byType(TextField), name);
 
-    await tapButtonWithName(LocaleKeys.button_ok.tr());
+    await tapButtonWithName(LocaleKeys.button_ok.tr(), pumpAndSettle: false);
+    await pump(const Duration(seconds: 5));
+  }
+
+  // For mobile platform to launch the app in anonymous mode
+  Future<void> launchInAnonymousMode() async {
+    assert(
+      [TargetPlatform.android, TargetPlatform.iOS]
+          .contains(defaultTargetPlatform),
+      'This method is only supported on mobile platforms',
+    );
+
+    await initializeAppFlowy();
+
+    final anonymousSignInButton = find.byType(SignInAnonymousButtonV2);
+    expect(anonymousSignInButton, findsOneWidget);
+    await tapButton(anonymousSignInButton);
+
+    await pumpUntilFound(find.byType(MobileHomeScreen));
+  }
+
+  Future<void> tapSvgButton(FlowySvgData svg) async {
+    final button = find.byWidgetPredicate(
+      (widget) => widget is FlowySvg && widget.svg.path == svg.path,
+    );
+    await tapButton(button);
+  }
+
+  Future<void> openMoreViewActions() async {
+    final button = find.byType(MoreViewActions);
+    await tap(button);
+    await pumpAndSettle();
+  }
+
+  /// Presses on the Duplicate ViewAction in the [MoreViewActions] popup.
+  ///
+  /// [openMoreViewActions] must be called beforehand!
+  ///
+  Future<void> duplicateByMoreViewActions() async {
+    final button = find.descendant(
+      of: find.byType(ListView),
+      matching: find.byWidgetPredicate(
+        (widget) =>
+            widget is ViewAction && widget.type == ViewActionType.duplicate,
+      ),
+    );
+    await tap(button);
+    await pump();
+  }
+
+  /// Presses on the Delete ViewAction in the [MoreViewActions] popup.
+  ///
+  /// [openMoreViewActions] must be called beforehand!
+  ///
+  Future<void> deleteByMoreViewActions() async {
+    final button = find.descendant(
+      of: find.byType(ListView),
+      matching: find.byWidgetPredicate(
+        (widget) =>
+            widget is ViewAction && widget.type == ViewActionType.delete,
+      ),
+    );
+    await tap(button);
+    await pump();
   }
 }
 
@@ -551,6 +620,18 @@ extension SettingsFinder on CommonFinders {
         matching: find.byType(Scrollable),
       )
       .first;
+
+  Finder findSettingsMenuScrollable() => find
+      .descendant(
+        of: find
+            .descendant(
+              of: find.byType(SettingsMenu),
+              matching: find.byType(SingleChildScrollView),
+            )
+            .first,
+        matching: find.byType(Scrollable),
+      )
+      .first;
 }
 
 extension ViewLayoutPBTest on ViewLayoutPB {

frontend/appflowy_flutter/integration_test/shared/database_test_op.dart

@@ -130,12 +130,12 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await openPage('v020', layout: ViewLayoutPB.Grid);
   }
 
-  Future<void> hoverOnFirstRowOfGrid() async {
+  Future<void> hoverOnFirstRowOfGrid([Future<void> Function()? onHover]) async {
     final findRow = find.byType(GridRow);
     expect(findRow, findsWidgets);
 
     final firstRow = findRow.first;
-    await hoverOnWidget(firstRow);
+    await hoverOnWidget(firstRow, onHover: onHover);
   }
 
   Future<void> editCell({
@@ -661,10 +661,13 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
   Future<void> changeFieldTypeOfFieldWithName(
     String name,
-    FieldType type,
-  ) async {
+    FieldType type, {
+    ViewLayoutPB layout = ViewLayoutPB.Grid,
+  }) async {
     await tapGridFieldWithName(name);
-    await tapEditFieldButton();
+    if (layout == ViewLayoutPB.Grid) {
+      await tapEditFieldButton();
+    }
 
     await tapSwitchFieldTypeButton();
     await selectFieldType(type);
@@ -873,16 +876,24 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   Future<void> tapRowMenuButtonInGrid() async {
+    expect(find.byType(RowMenuButton), findsOneWidget);
     await tapButton(find.byType(RowMenuButton));
   }
 
   /// Should call [tapRowMenuButtonInGrid] first.
   Future<void> tapDeleteOnRowMenu() async {
+    expect(find.text(LocaleKeys.grid_row_delete.tr()), findsOneWidget);
     await tapButtonWithName(LocaleKeys.grid_row_delete.tr());
   }
 
-  Future<void> createField(FieldType fieldType, String name) async {
-    await scrollToRight(find.byType(GridPage));
+  Future<void> createField(
+    FieldType fieldType,
+    String name, {
+    ViewLayoutPB layout = ViewLayoutPB.Grid,
+  }) async {
+    if (layout == ViewLayoutPB.Grid) {
+      await scrollToRight(find.byType(GridPage));
+    }
     await tapNewPropertyButton();
     await renameField(name);
     await tapSwitchFieldTypeButton();
@@ -1463,7 +1474,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
   void assertCurrentDatabaseTagIs(DatabaseLayoutPB layout) => switch (layout) {
         DatabaseLayoutPB.Board =>
-          expect(find.byType(BoardPage), findsOneWidget),
+          expect(find.byType(DesktopBoardPage), findsOneWidget),
         DatabaseLayoutPB.Calendar =>
           expect(find.byType(CalendarPage), findsOneWidget),
         DatabaseLayoutPB.Grid => expect(find.byType(GridPage), findsOneWidget),
@@ -1521,7 +1532,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 }
 
 Finder finderForDatabaseLayoutType(DatabaseLayoutPB layout) => switch (layout) {
-      DatabaseLayoutPB.Board => find.byType(BoardPage),
+      DatabaseLayoutPB.Board => find.byType(DesktopBoardPage),
       DatabaseLayoutPB.Calendar => find.byType(CalendarPage),
       DatabaseLayoutPB.Grid => find.byType(GridPage),
       _ => throw Exception('Unknown database layout type: $layout'),

frontend/appflowy_flutter/integration_test/shared/editor_test_operations.dart

@@ -1,6 +1,9 @@
 import 'dart:async';
 import 'dart:ui';
 
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_skin_tone.dart';
@@ -10,12 +13,10 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/bl
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cover_editor.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/image/embed_image_url_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/embed_image_url_widget.dart';
 import 'package:appflowy/plugins/inline_actions/widgets/inline_actions_handler.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
 import 'package:flutter_test/flutter_test.dart';
 
@@ -81,15 +82,12 @@ class EditorOperations {
 
   /// Taps the 'Remove Icon' button in the cover toolbar and the icon popover
   Future<void> tapRemoveIconButton({bool isInPicker = false}) async {
-    Finder button =
-        find.text(LocaleKeys.document_plugins_cover_removeIcon.tr());
-    if (isInPicker) {
-      button = find.descendant(
-        of: find.byType(FlowyIconPicker),
-        matching: button,
-      );
-    }
-
+    final Finder button = !isInPicker
+        ? find.text(LocaleKeys.document_plugins_cover_removeIcon.tr())
+        : find.descendant(
+            of: find.byType(FlowyIconPicker),
+            matching: find.text(LocaleKeys.button_remove.tr()),
+          );
     await tester.tapButton(button);
   }
 

frontend/appflowy_flutter/integration_test/shared/expectation.dart

@@ -1,6 +1,5 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/page_item/mobile_view_item.dart';
 import 'package:appflowy/plugins/database/widgets/row/row_detail.dart';
 import 'package:appflowy/plugins/document/presentation/banner.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
@@ -12,8 +11,10 @@ import 'package:appflowy/workspace/presentation/notifications/widgets/notificati
 import 'package:appflowy/workspace/presentation/widgets/date_picker/widgets/reminder_selector.dart';
 import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'util.dart';
@@ -164,7 +165,7 @@ extension Expectation on WidgetTester {
         (widget) =>
             widget is SingleInnerViewItem &&
             widget.view.isFavorite &&
-            widget.categoryType == FolderCategoryType.favorite &&
+            widget.spaceType == FolderSpaceType.favorite &&
             widget.view.name == name &&
             widget.view.layout == layout,
         skipOffstage: false,
@@ -174,7 +175,7 @@ extension Expectation on WidgetTester {
         (widget) =>
             widget is SingleInnerViewItem &&
             widget.view.isFavorite &&
-            widget.categoryType == FolderCategoryType.favorite,
+            widget.spaceType == FolderSpaceType.favorite,
       );
 
   Finder findPageName(
@@ -183,25 +184,35 @@ extension Expectation on WidgetTester {
     String? parentName,
     ViewLayoutPB parentLayout = ViewLayoutPB.Document,
   }) {
-    if (parentName == null) {
-      return find.byWidgetPredicate(
-        (widget) =>
-            widget is SingleInnerViewItem &&
-            widget.view.name == name &&
-            widget.view.layout == layout,
-        skipOffstage: false,
+    if (PlatformExtension.isDesktop) {
+      if (parentName == null) {
+        return find.byWidgetPredicate(
+          (widget) =>
+              widget is SingleInnerViewItem &&
+              widget.view.name == name &&
+              widget.view.layout == layout,
+          skipOffstage: false,
+        );
+      }
+
+      return find.descendant(
+        of: find.byWidgetPredicate(
+          (widget) =>
+              widget is InnerViewItem &&
+              widget.view.name == parentName &&
+              widget.view.layout == parentLayout,
+          skipOffstage: false,
+        ),
+        matching: findPageName(name, layout: layout),
       );
     }
 
-    return find.descendant(
-      of: find.byWidgetPredicate(
-        (widget) =>
-            widget is InnerViewItem &&
-            widget.view.name == parentName &&
-            widget.view.layout == parentLayout,
-        skipOffstage: false,
-      ),
-      matching: findPageName(name, layout: layout),
+    return find.byWidgetPredicate(
+      (widget) =>
+          widget is SingleMobileInnerViewItem &&
+          widget.view.name == name &&
+          widget.view.layout == layout,
+      skipOffstage: false,
     );
   }
 

frontend/appflowy_flutter/integration_test/shared/keyboard.dart

@@ -5,10 +5,18 @@ class FlowyTestKeyboard {
   static Future<void> simulateKeyDownEvent(
     List<LogicalKeyboardKey> keys, {
     required flutter_test.WidgetTester tester,
+    bool withKeyUp = false,
   }) async {
     for (final LogicalKeyboardKey key in keys) {
       await flutter_test.simulateKeyDownEvent(key);
       await tester.pumpAndSettle();
     }
+
+    if (withKeyUp) {
+      for (final LogicalKeyboardKey key in keys) {
+        await flutter_test.simulateKeyUpEvent(key);
+        await tester.pumpAndSettle();
+      }
+    }
   }
 }

frontend/appflowy_flutter/integration_test/shared/mock/mock_openai_repository.dart

@@ -44,7 +44,7 @@ class MockOpenAIRepository extends HttpOpenAIRepository {
     required Future<void> Function() onStart,
     required Future<void> Function(TextCompletionResponse response) onProcess,
     required Future<void> Function() onEnd,
-    required void Function(OpenAIError error) onError,
+    required void Function(AIError error) onError,
     String? suffix,
     int maxTokens = 2048,
     double temperature = 0.3,

frontend/appflowy_flutter/integration_test/shared/settings.dart

@@ -1,11 +1,12 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
-import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar_setting.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_setting.dart';
 import 'package:appflowy/workspace/presentation/settings/pages/settings_account_view.dart';
+import 'package:appflowy/workspace/presentation/settings/pages/settings_workspace_view.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
-import 'package:appflowy/workspace/presentation/settings/widgets/settings_appearance/direction_setting.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_menu_element.dart';
+import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/text_field.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -13,6 +14,7 @@ import 'package:flutter_test/flutter_test.dart';
 import '../desktop/board/board_hide_groups_test.dart';
 
 import 'base.dart';
+import 'common_operations.dart';
 
 extension AppFlowySettings on WidgetTester {
   /// Open settings page
@@ -30,6 +32,14 @@ extension AppFlowySettings on WidgetTester {
     final button = find.byWidgetPredicate(
       (widget) => widget is SettingsMenuElement && widget.page == page,
     );
+
+    await scrollUntilVisible(
+      button,
+      0,
+      scrollable: find.findSettingsMenuScrollable(),
+    );
+    await pump();
+
     expect(button, findsOneWidget);
     await tapButton(button);
     return;
@@ -37,10 +47,14 @@ extension AppFlowySettings on WidgetTester {
 
   /// Restore the AppFlowy data storage location
   Future<void> restoreLocation() async {
-    final button =
-        find.byTooltip(LocaleKeys.settings_files_recoverLocationTooltips.tr());
+    final button = find.text(LocaleKeys.settings_common_reset.tr());
     expect(button, findsOneWidget);
     await tapButton(button);
+    await pumpAndSettle();
+
+    final confirmButton = find.text(LocaleKeys.button_confirm.tr());
+    expect(confirmButton, findsOneWidget);
+    await tapButton(confirmButton);
     return;
   }
 
@@ -77,12 +91,21 @@ extension AppFlowySettings on WidgetTester {
   // go to settings page and toggle enable RTL toolbar items
   Future<void> toggleEnableRTLToolbarItems() async {
     await openSettings();
-    await openSettingsPage(SettingsPage.appearance);
+    await openSettingsPage(SettingsPage.workspace);
 
-    final switchButton =
-        find.byKey(EnableRTLToolbarItemsSetting.enableRTLSwitchKey);
-    expect(switchButton, findsOneWidget);
-    await tapButton(switchButton);
+    final scrollable = find.findSettingsScrollable();
+    await scrollUntilVisible(
+      find.byType(EnableRTLItemsSwitcher),
+      0,
+      scrollable: scrollable,
+    );
+
+    final switcher = find.descendant(
+      of: find.byType(EnableRTLItemsSwitcher),
+      matching: find.byType(Toggle),
+    );
+
+    await tap(switcher);
 
     // tap anywhere to close the settings page
     await tapAt(Offset.zero);

frontend/appflowy_flutter/integration_test/shared/workspace.dart

@@ -1,14 +1,14 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/base/icon/icon_picker.dart';
-import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar_workspace.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_actions.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
-import 'base.dart';
+import 'util.dart';
 
 extension AppFlowyWorkspace on WidgetTester {
   /// Open workspace menu
@@ -36,12 +36,19 @@ extension AppFlowyWorkspace on WidgetTester {
       matching: find.byType(WorkspaceMoreActionList),
     );
     expect(moreButton, findsOneWidget);
-    await tapButton(moreButton);
-    await tapButton(find.findTextInFlowyText(LocaleKeys.button_rename.tr()));
-    final input = find.byType(TextFormField);
-    expect(input, findsOneWidget);
-    await enterText(input, name);
-    await tapButton(find.text(LocaleKeys.button_ok.tr()));
+    await hoverOnWidget(
+      moreButton,
+      onHover: () async {
+        await tapButton(moreButton);
+        await tapButton(
+          find.findTextInFlowyText(LocaleKeys.button_rename.tr()),
+        );
+        final input = find.byType(TextFormField);
+        expect(input, findsOneWidget);
+        await enterText(input, name);
+        await tapButton(find.text(LocaleKeys.button_ok.tr()));
+      },
+    );
   }
 
   Future<void> changeWorkspaceIcon(String icon) async {

frontend/appflowy_flutter/ios/Podfile.lock

@@ -65,6 +65,8 @@ PODS:
     - FlutterMacOS
   - permission_handler_apple (9.3.0):
     - Flutter
+  - printing (1.0.0):
+    - Flutter
   - ReachabilitySwift (5.0.0)
   - SDWebImage (5.14.2):
     - SDWebImage/Core (= 5.14.2)
@@ -101,6 +103,7 @@ DEPENDENCIES:
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
   - permission_handler_apple (from `.symlinks/plugins/permission_handler_apple/ios`)
+  - printing (from `.symlinks/plugins/printing/ios`)
   - share_plus (from `.symlinks/plugins/share_plus/ios`)
   - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
   - sqflite (from `.symlinks/plugins/sqflite/darwin`)
@@ -149,6 +152,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/path_provider_foundation/darwin"
   permission_handler_apple:
     :path: ".symlinks/plugins/permission_handler_apple/ios"
+  printing:
+    :path: ".symlinks/plugins/printing/ios"
   share_plus:
     :path: ".symlinks/plugins/share_plus/ios"
   shared_preferences_foundation:
@@ -173,12 +178,13 @@ SPEC CHECKSUMS:
   fluttertoast: 31b00dabfa7fb7bacd9e7dbee580d7a2ff4bf265
   image_gallery_saver: cb43cc43141711190510e92c460eb1655cd343cb
   image_picker_ios: 99dfe1854b4fa34d0364e74a78448a0151025425
-  integration_test: 13825b8a9334a850581300559b8839134b124670
+  integration_test: ce0a3ffa1de96d1a89ca0ac26fca7ea18a749ef4
   irondash_engine_context: 3458bf979b90d616ffb8ae03a150bafe2e860cc9
   keyboard_height_plugin: 43fa8bba20fd5c4fdeed5076466b8b9d43cc6b86
   package_info_plus: 58f0028419748fad15bf008b270aaa8e54380b1c
   path_provider_foundation: 3784922295ac71e43754bd15e0653ccfd36a147c
   permission_handler_apple: 9878588469a2b0d0fc1e048d9f43605f92e6cec2
+  printing: 233e1b73bd1f4a05615548e9b5a324c98588640b
   ReachabilitySwift: 985039c6f7b23a1da463388634119492ff86c825
   SDWebImage: b9a731e1d6307f44ca703b3976d18c24ca561e84
   share_plus: c3fef564749587fc939ef86ffb283ceac0baf9f5

frontend/appflowy_flutter/ios/Runner/Info.plist

@@ -66,5 +66,10 @@
 		</array>
 		<key>UIViewControllerBasedStatusBarAppearance</key>
 		<false />
+		<key>NSAppTransportSecurity</key>
+		<dict>
+			<key>NSAllowsArbitraryLoads</key>
+			<true/>
+		</dict>
 	</dict>
 </plist>

frontend/appflowy_flutter/lib/core/config/kv_keys.dart

@@ -18,6 +18,13 @@ class KVKeys {
   ///   {'dx': 10.0, 'dy': 10.0}
   static const String windowPosition = 'windowPosition';
 
+  /// The key for saving the window status
+  ///
+  /// The value is a json string with the following format:
+  ///  { 'windowMaximized': true }
+  ///
+  static const String windowMaximized = 'windowMaximized';
+
   static const String kDocumentAppearanceFontSize =
       'kDocumentAppearanceFontSize';
   static const String kDocumentAppearanceFontFamily =
@@ -65,9 +72,40 @@ class KVKeys {
   /// {'feature_flag_1': true, 'feature_flag_2': false}
   static const String featureFlag = 'featureFlag';
 
+  /// The key for saving show notification icon option
+  ///
+  /// The value is a boolean string
+  static const String showNotificationIcon = 'showNotificationIcon';
+
   /// The key for saving the last opened workspace id
   ///
   /// The workspace id is a string.
   @Deprecated('deprecated in version 0.5.5')
   static const String lastOpenedWorkspaceId = 'lastOpenedWorkspaceId';
+
+  /// The key for saving the scale factor
+  ///
+  /// The value is a double string.
+  static const String scaleFactor = 'scaleFactor';
+
+  /// The key for saving the last opened tab (favorite, recent, space etc.)
+  ///
+  /// The value is a int string.
+  static const String lastOpenedSpace = 'lastOpenedSpace';
+
+  /// The key for saving the space tab order
+  ///
+  /// The value is a json string with the following format:
+  /// [0, 1, 2]
+  static const String spaceOrder = 'spaceOrder';
+
+  /// The key for saving the last opened space id (space A, space B)
+  ///
+  /// The value is a string.
+  static const String lastOpenedSpaceId = 'lastOpenedSpaceId';
+
+  /// The key for saving the upgrade space tag
+  ///
+  /// The value is a boolean string
+  static const String hasUpgradedSpace = 'hasUpgradedSpace060';
 }

frontend/appflowy_flutter/lib/core/frameless_window.dart

@@ -1,6 +1,15 @@
-import 'package:flutter/services.dart';
+import 'dart:io';
+
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/shared/window_title_bar.dart';
+import 'package:appflowy/workspace/application/home/home_setting_bloc.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flutter/material.dart';
-import 'dart:io' show Platform;
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 class CocoaWindowChannel {
   CocoaWindowChannel._();
@@ -26,9 +35,14 @@ class CocoaWindowChannel {
 }
 
 class MoveWindowDetector extends StatefulWidget {
-  const MoveWindowDetector({super.key, this.child});
+  const MoveWindowDetector({
+    super.key,
+    this.child,
+    this.showTitleBar = false,
+  });
 
   final Widget? child;
+  final bool showTitleBar;
 
   @override
   MoveWindowDetectorState createState() => MoveWindowDetectorState();
@@ -40,15 +54,32 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
 
   @override
   Widget build(BuildContext context) {
-    if (!Platform.isMacOS) {
+    if (!Platform.isMacOS && !Platform.isWindows) {
       return widget.child ?? const SizedBox.shrink();
     }
+
+    if (Platform.isWindows) {
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (widget.showTitleBar) ...[
+            WindowTitleBar(
+              leftChildren: [
+                _buildToggleMenuButton(context),
+              ],
+            ),
+          ] else ...[
+            const SizedBox(height: 5),
+          ],
+          widget.child ?? const SizedBox.shrink(),
+        ],
+      );
+    }
+
     return GestureDetector(
       // https://stackoverflow.com/questions/52965799/flutter-gesturedetector-not-working-with-containers-in-stack
       behavior: HitTestBehavior.translucent,
-      onDoubleTap: () async {
-        await CocoaWindowChannel.instance.zoom();
-      },
+      onDoubleTap: () async => CocoaWindowChannel.instance.zoom(),
       onPanStart: (DragStartDetails details) {
         winX = details.globalPosition.dx;
         winY = details.globalPosition.dy;
@@ -65,4 +96,45 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
       child: widget.child,
     );
   }
+
+  Widget _buildToggleMenuButton(BuildContext context) {
+    if (!context.read<HomeSettingBloc>().state.isMenuCollapsed) {
+      return const SizedBox.shrink();
+    }
+
+    final textSpan = TextSpan(
+      children: [
+        TextSpan(
+          text: '${LocaleKeys.sideBar_openSidebar.tr()}\n',
+          style: context.tooltipTextStyle(),
+        ),
+        TextSpan(
+          text: Platform.isMacOS ? '⌘+.' : 'Ctrl+\\',
+          style: context
+              .tooltipTextStyle()
+              ?.copyWith(color: Theme.of(context).hintColor),
+        ),
+      ],
+    );
+
+    return FlowyTooltip(
+      richMessage: textSpan,
+      child: Listener(
+        behavior: HitTestBehavior.translucent,
+        onPointerDown: (_) => context
+            .read<HomeSettingBloc>()
+            .add(const HomeSettingEvent.collapseMenu()),
+        child: FlowyHover(
+          child: Container(
+            width: 24,
+            padding: const EdgeInsets.all(4),
+            child: const RotatedBox(
+              quarterTurns: 2,
+              child: FlowySvg(FlowySvgs.hide_menu_s),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
 }

frontend/appflowy_flutter/lib/core/helpers/url_launcher.dart

@@ -1,9 +1,10 @@
+import 'package:flutter/services.dart';
+import 'package:flutter/widgets.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter/widgets.dart';
 import 'package:string_validator/string_validator.dart';
 import 'package:url_launcher/url_launcher.dart' as launcher;
 

frontend/appflowy_flutter/lib/env/env.dart

@@ -29,4 +29,11 @@ abstract class Env {
     defaultValue: '',
   )
   static const String afCloudUrl = _Env.afCloudUrl;
+
+  @EnviedField(
+    obfuscate: false,
+    varName: 'INTERNAL_BUILD',
+    defaultValue: '',
+  )
+  static const String internalBuild = _Env.internalBuild;
 }

frontend/appflowy_flutter/lib/main.dart

@@ -1,9 +1,9 @@
-import 'package:flutter/material.dart';
+import 'package:scaled_app/scaled_app.dart';
 
 import 'startup/startup.dart';
 
 Future<void> main() async {
-  WidgetsFlutterBinding.ensureInitialized();
+  ScaledWidgetsFlutterBinding.ensureInitialized(scaleFactor: (_) => 1.0);
 
   await runAppFlowy();
 }

frontend/appflowy_flutter/lib/mobile/application/base/mobile_view_page_bloc.dart

@@ -0,0 +1,106 @@
+import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
+import 'package:appflowy/user/application/user_service.dart';
+import 'package:appflowy/workspace/application/view/prelude.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:appflowy_result/appflowy_result.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'mobile_view_page_bloc.freezed.dart';
+
+class MobileViewPageBloc
+    extends Bloc<MobileViewPageEvent, MobileViewPageState> {
+  MobileViewPageBloc({
+    required this.viewId,
+  })  : _viewListener = ViewListener(viewId: viewId),
+        super(MobileViewPageState.initial()) {
+    on<MobileViewPageEvent>(
+      (event, emit) async {
+        await event.when(
+          initial: () async {
+            _registerListeners();
+
+            final userProfilePB =
+                await UserBackendService.getCurrentUserProfile()
+                    .fold((s) => s, (f) => null);
+            final result = await ViewBackendService.getView(viewId);
+            final isImmersiveMode =
+                _isImmersiveMode(result.fold((s) => s, (f) => null));
+            emit(
+              state.copyWith(
+                isLoading: false,
+                result: result,
+                isImmersiveMode: isImmersiveMode,
+                userProfilePB: userProfilePB,
+              ),
+            );
+          },
+          updateImmersionMode: (isImmersiveMode) {
+            emit(
+              state.copyWith(
+                isImmersiveMode: isImmersiveMode,
+              ),
+            );
+          },
+        );
+      },
+    );
+  }
+
+  final String viewId;
+  final ViewListener _viewListener;
+
+  @override
+  Future<void> close() {
+    _viewListener.stop();
+    return super.close();
+  }
+
+  void _registerListeners() {
+    _viewListener.start(
+      onViewUpdated: (view) {
+        final isImmersiveMode = _isImmersiveMode(view);
+        add(MobileViewPageEvent.updateImmersionMode(isImmersiveMode));
+      },
+    );
+  }
+
+  // only the document page supports immersive mode (version 0.5.6)
+  bool _isImmersiveMode(ViewPB? view) {
+    if (view == null) {
+      return false;
+    }
+
+    final cover = view.cover;
+    if (cover == null || cover.type == PageStyleCoverImageType.none) {
+      return false;
+    } else if (view.layout == ViewLayoutPB.Document && !cover.isPresets) {
+      // only support immersive mode for document layout
+      return true;
+    }
+
+    return false;
+  }
+}
+
+@freezed
+class MobileViewPageEvent with _$MobileViewPageEvent {
+  const factory MobileViewPageEvent.initial() = Initial;
+  const factory MobileViewPageEvent.updateImmersionMode(bool isImmersiveMode) =
+      UpdateImmersionMode;
+}
+
+@freezed
+class MobileViewPageState with _$MobileViewPageState {
+  const factory MobileViewPageState({
+    @Default(true) bool isLoading,
+    @Default(null) FlowyResult<ViewPB, FlowyError>? result,
+    @Default(false) bool isImmersiveMode,
+    @Default(null) UserProfilePB? userProfilePB,
+  }) = _MobileViewPageState;
+
+  factory MobileViewPageState.initial() => const MobileViewPageState();
+}

frontend/appflowy_flutter/lib/mobile/application/mobile_router.dart

@@ -1,5 +1,7 @@
+import 'dart:async';
 import 'dart:convert';
 
+import 'package:appflowy/mobile/presentation/chat/mobile_chat_screen.dart';
 import 'package:appflowy/workspace/presentation/home/menu/menu_shared_state.dart';
 import 'package:flutter/material.dart';
 
@@ -14,15 +16,15 @@ import 'package:go_router/go_router.dart';
 
 extension MobileRouter on BuildContext {
   Future<void> pushView(ViewPB view, [Map<String, dynamic>? arguments]) async {
-    await push(
-      Uri(
-        path: view.routeName,
-        queryParameters: view.queryParameters(arguments),
-      ).toString(),
-    ).then((value) {
-      getIt<MenuSharedState>().latestOpenView = view;
-      getIt<CachedRecentService>().updateRecentViews([view.id], true);
-    });
+    // set the current view before pushing the new view
+    getIt<MenuSharedState>().latestOpenView = view;
+    unawaited(getIt<CachedRecentService>().updateRecentViews([view.id], true));
+
+    final uri = Uri(
+      path: view.routeName,
+      queryParameters: view.queryParameters(arguments),
+    ).toString();
+    await push(uri);
   }
 }
 
@@ -37,6 +39,9 @@ extension on ViewPB {
         return MobileCalendarScreen.routeName;
       case ViewLayoutPB.Board:
         return MobileBoardScreen.routeName;
+      case ViewLayoutPB.Chat:
+        return MobileChatScreen.routeName;
+
       default:
         throw UnimplementedError('routeName for $this is not implemented');
     }
@@ -65,6 +70,11 @@ extension on ViewPB {
           MobileBoardScreen.viewId: id,
           MobileBoardScreen.viewTitle: name,
         };
+      case ViewLayoutPB.Chat:
+        return {
+          MobileChatScreen.viewId: id,
+          MobileChatScreen.viewTitle: name,
+        };
       default:
         throw UnimplementedError(
           'queryParameters for $this is not implemented',

frontend/appflowy_flutter/lib/mobile/application/recent/recent_view_bloc.dart

@@ -57,7 +57,19 @@ class RecentViewBloc extends Bloc<RecentViewEvent, RecentViewState> {
                 }
               },
             );
+
+            // only document supports the cover
+            if (view.layout != ViewLayoutPB.Document) {
+              emit(
+                state.copyWith(
+                  name: view.name,
+                  icon: view.icon.value,
+                ),
+              );
+            }
+
             final cover = getCoverV2();
+
             if (cover != null) {
               emit(
                 state.copyWith(

frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar/app_bar.dart

@@ -37,6 +37,7 @@ class FlowyAppBar extends AppBar {
     Widget? title,
     String? titleText,
     FlowyAppBarLeadingType leadingType = FlowyAppBarLeadingType.back,
+    double? leadingWidth,
     Widget? leading,
     super.centerTitle,
     VoidCallback? onTapLeading,
@@ -52,7 +53,7 @@ class FlowyAppBar extends AppBar {
           titleSpacing: 0,
           elevation: 0,
           leading: leading ?? leadingType.getWidget(onTapLeading),
-          leadingWidth: leadingType.width,
+          leadingWidth: leadingWidth ?? leadingType.width,
           toolbarHeight: 44.0,
           bottom: showDivider
               ? const PreferredSize(

frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart

@@ -1,31 +1,24 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/application/base/mobile_view_page_bloc.dart';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar/app_bar.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar/app_bar_actions.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/mobile/presentation/base/view_page/app_bar_buttons.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_state_container.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_text.dart';
 import 'package:appflowy/plugins/document/presentation/document_collaborators.dart';
-import 'package:appflowy/plugins/document/presentation/editor_notification.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/page_style_bottom_sheet.dart';
-import 'package:appflowy/plugins/shared/sync_indicator.dart';
 import 'package:appflowy/shared/feature_flags.dart';
+import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
-import 'package:appflowy/workspace/application/view/view_listener.dart';
-import 'package:appflowy/workspace/application/view/view_service.dart';
-import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
-import 'package:appflowy_result/appflowy_result.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:go_router/go_router.dart';
 
 class MobileViewPage extends StatefulWidget {
   const MobileViewPage({
@@ -47,94 +40,33 @@ class MobileViewPage extends StatefulWidget {
 }
 
 class _MobileViewPageState extends State<MobileViewPage> {
-  late final Future<FlowyResult<ViewPB, FlowyError>> future;
-
   // used to determine if the user has scrolled down and show the app bar in immersive mode
   ScrollNotificationObserverState? _scrollNotificationObserver;
 
   // control the app bar opacity when in immersive mode
-  final ValueNotifier<double> _appBarOpacity = ValueNotifier(0.0);
-
-  // only enable immersive mode for document layout
-  final ValueNotifier<bool> _isImmersiveMode = ValueNotifier(false);
-  ViewListener? viewListener;
-
-  @override
-  void initState() {
-    super.initState();
-    future = ViewBackendService.getView(widget.id);
-  }
+  final ValueNotifier<double> _appBarOpacity = ValueNotifier(1.0);
 
   @override
   void dispose() {
     _appBarOpacity.dispose();
-    _isImmersiveMode.dispose();
-    viewListener?.stop();
     _scrollNotificationObserver = null;
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    final child = FutureBuilder(
-      future: future,
-      builder: (context, state) {
-        Widget body;
-        ViewPB? viewPB;
-        final actions = <Widget>[];
-        if (state.connectionState != ConnectionState.done) {
-          body = const Center(
-            child: CircularProgressIndicator(),
-          );
-        } else if (!state.hasData) {
-          body = FlowyMobileStateContainer.error(
-            emoji: '😔',
-            title: LocaleKeys.error_weAreSorry.tr(),
-            description: LocaleKeys.error_loadingViewError.tr(),
-            errorMsg: state.error.toString(),
-          );
-        } else {
-          body = state.data!.fold((view) {
-            viewPB = view;
-            _updateImmersiveMode(view);
-            viewListener?.stop();
-            viewListener = ViewListener(viewId: view.id)
-              ..start(
-                onViewUpdated: _updateImmersiveMode,
-              );
+    return BlocProvider(
+      create: (_) => MobileViewPageBloc(viewId: widget.id)
+        ..add(const MobileViewPageEvent.initial()),
+      child: BlocBuilder<MobileViewPageBloc, MobileViewPageState>(
+        builder: (context, state) {
+          final view = state.result?.fold((s) => s, (f) => null);
+          final body = _buildBody(context, state);
 
-            actions.addAll([
-              if (FeatureFlag.syncDocument.isOn) ...[
-                DocumentCollaborators(
-                  width: 60,
-                  height: 44,
-                  fontSize: 14,
-                  padding: const EdgeInsets.symmetric(vertical: 8),
-                  view: view,
-                ),
-                const HSpace(16.0),
-                view.layout == ViewLayoutPB.Document
-                    ? DocumentSyncIndicator(view: view)
-                    : DatabaseSyncIndicator(view: view),
-                const HSpace(8.0),
-              ],
-              _buildAppBarLayoutButton(view),
-              _buildAppBarMoreButton(view),
-            ]);
-            final plugin = view.plugin(arguments: widget.arguments ?? const {})
-              ..init();
-            return plugin.widgetBuilder.buildWidget(shrinkWrap: false);
-          }, (error) {
-            return FlowyMobileStateContainer.error(
-              emoji: '😔',
-              title: LocaleKeys.error_weAreSorry.tr(),
-              description: LocaleKeys.error_loadingViewError.tr(),
-              errorMsg: error.toString(),
-            );
-          });
-        }
+          if (view == null) {
+            return _buildApp(context, null, body);
+          }
 
-        if (viewPB != null) {
           return MultiBlocProvider(
             providers: [
               BlocProvider(
@@ -143,47 +75,163 @@ class _MobileViewPageState extends State<MobileViewPage> {
               ),
               BlocProvider(
                 create: (_) =>
-                    ViewBloc(view: viewPB!)..add(const ViewEvent.initial()),
+                    ViewBloc(view: view)..add(const ViewEvent.initial()),
               ),
               BlocProvider.value(
                 value: getIt<ReminderBloc>()
                   ..add(const ReminderEvent.started()),
               ),
-              if (viewPB!.layout == ViewLayoutPB.Document)
+              if (view.layout.isDocumentView)
                 BlocProvider(
-                  create: (_) => DocumentPageStyleBloc(view: viewPB!)
-                    ..add(
-                      const DocumentPageStyleEvent.initial(),
-                    ),
+                  create: (_) => DocumentPageStyleBloc(view: view)
+                    ..add(const DocumentPageStyleEvent.initial()),
                 ),
             ],
             child: Builder(
               builder: (context) {
                 final view = context.watch<ViewBloc>().state.view;
-                return _buildApp(view, actions, body);
+                return _buildApp(context, view, body);
               },
             ),
           );
-        } else {
-          return _buildApp(null, [], body);
-        }
-      },
+        },
+      ),
     );
-
-    return child;
   }
 
-  Widget _buildApp(ViewPB? view, List<Widget> actions, Widget child) {
-    // only enable immersive mode for document layout
-    final isImmersive = view?.layout == ViewLayoutPB.Document;
+  Widget _buildApp(
+    BuildContext context,
+    ViewPB? view,
+    Widget child,
+  ) {
+    final isDocument = view?.layout.isDocumentView ?? false;
+    final title = _buildTitle(context, view);
+    final actions = _buildAppBarActions(context, view);
+    final appBar = isDocument
+        ? MobileViewPageImmersiveAppBar(
+            preferredSize: Size(
+              double.infinity,
+              AppBarTheme.of(context).toolbarHeight ?? kToolbarHeight,
+            ),
+            title: title,
+            appBarOpacity: _appBarOpacity,
+            actions: actions,
+          )
+        : FlowyAppBar(title: title, actions: actions);
+    final body = isDocument
+        ? Builder(
+            builder: (context) {
+              _rebuildScrollNotificationObserver(context);
+              return child;
+            },
+          )
+        : SafeArea(child: child);
+    return Scaffold(
+      extendBodyBehindAppBar: isDocument,
+      appBar: appBar,
+      body: body,
+    );
+  }
+
+  Widget _buildBody(BuildContext context, MobileViewPageState state) {
+    if (state.isLoading) {
+      return const Center(
+        child: CircularProgressIndicator(),
+      );
+    }
+
+    final result = state.result;
+    if (result == null) {
+      return FlowyMobileStateContainer.error(
+        emoji: '😔',
+        title: LocaleKeys.error_weAreSorry.tr(),
+        description: LocaleKeys.error_loadingViewError.tr(),
+        errorMsg: '',
+      );
+    }
+
+    return result.fold(
+      (view) {
+        final plugin = view.plugin(arguments: widget.arguments ?? const {})
+          ..init();
+        return plugin.widgetBuilder.buildWidget(
+          shrinkWrap: false,
+          context: PluginContext(userProfile: state.userProfilePB),
+        );
+      },
+      (error) {
+        return FlowyMobileStateContainer.error(
+          emoji: '😔',
+          title: LocaleKeys.error_weAreSorry.tr(),
+          description: LocaleKeys.error_loadingViewError.tr(),
+          errorMsg: error.toString(),
+        );
+      },
+    );
+  }
+
+  // Document:
+  //  - [ collaborators, sync_indicator, layout_button, more_button]
+  // Database:
+  //  - [ sync_indicator, more_button]
+  List<Widget> _buildAppBarActions(BuildContext context, ViewPB? view) {
+    if (view == null) {
+      return [];
+    }
+
+    final isImmersiveMode =
+        context.read<MobileViewPageBloc>().state.isImmersiveMode;
+    final actions = <Widget>[];
+
+    if (FeatureFlag.syncDocument.isOn) {
+      // only document supports displaying collaborators.
+      if (view.layout.isDocumentView) {
+        actions.addAll([
+          DocumentCollaborators(
+            width: 60,
+            height: 44,
+            fontSize: 14,
+            padding: const EdgeInsets.symmetric(vertical: 8),
+            view: view,
+          ),
+          const HSpace(12.0),
+        ]);
+      }
+    }
+
+    if (view.layout.isDocumentView) {
+      actions.addAll([
+        MobileViewPageLayoutButton(
+          view: view,
+          isImmersiveMode: isImmersiveMode,
+          appBarOpacity: _appBarOpacity,
+        ),
+      ]);
+    }
+
+    actions.addAll([
+      MobileViewPageMoreButton(
+        view: view,
+        isImmersiveMode: isImmersiveMode,
+        appBarOpacity: _appBarOpacity,
+      ),
+    ]);
+
+    return actions;
+  }
+
+  Widget _buildTitle(BuildContext context, ViewPB? view) {
     final icon = view?.icon.value;
-    final title = Row(
+    return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
         if (icon != null && icon.isNotEmpty)
-          EmojiText(
-            emoji: '$icon ',
-            fontSize: 22.0,
+          ConstrainedBox(
+            constraints: const BoxConstraints.tightFor(width: 34.0),
+            child: EmojiText(
+              emoji: '$icon ',
+              fontSize: 22.0,
+            ),
           ),
         Expanded(
           child: FlowyText.medium(
@@ -194,55 +242,6 @@ class _MobileViewPageState extends State<MobileViewPage> {
         ),
       ],
     );
-
-    if (isImmersive) {
-      return Scaffold(
-        extendBodyBehindAppBar: true,
-        appBar: PreferredSize(
-          preferredSize: Size(
-            double.infinity,
-            AppBarTheme.of(context).toolbarHeight ?? kToolbarHeight,
-          ),
-          child: ValueListenableBuilder(
-            valueListenable: _appBarOpacity,
-            builder: (_, opacity, __) => FlowyAppBar(
-              backgroundColor:
-                  AppBarTheme.of(context).backgroundColor?.withOpacity(opacity),
-              showDivider: false,
-              title: Opacity(opacity: opacity >= 0.99 ? 1.0 : 0, child: title),
-              leading: Padding(
-                padding:
-                    const EdgeInsets.symmetric(horizontal: 2.0, vertical: 4.0),
-                child: AppBarButton(
-                  padding: EdgeInsets.zero,
-                  onTap: (context) => context.pop(),
-                  child: _buildImmersiveAppBarIcon(
-                    FlowySvgs.m_app_bar_back_s,
-                    30.0,
-                    iconPadding: 6.0,
-                  ),
-                ),
-              ),
-              actions: actions,
-            ),
-          ),
-        ),
-        body: Builder(
-          builder: (context) {
-            _rebuildScrollNotificationObserver(context);
-            return child;
-          },
-        ),
-      );
-    }
-
-    return Scaffold(
-      appBar: FlowyAppBar(
-        title: title,
-        actions: actions,
-      ),
-      body: child,
-    );
   }
 
   void _rebuildScrollNotificationObserver(BuildContext context) {
@@ -251,163 +250,6 @@ class _MobileViewPageState extends State<MobileViewPage> {
     _scrollNotificationObserver?.addListener(_onScrollNotification);
   }
 
-  Widget _buildAppBarLayoutButton(ViewPB view) {
-    // only display the layout button if the view is a document
-    if (view.layout != ViewLayoutPB.Document) {
-      return const SizedBox.shrink();
-    }
-
-    return AppBarButton(
-      padding: const EdgeInsets.symmetric(vertical: 2.0),
-      onTap: (context) {
-        EditorNotification.exitEditing().post();
-
-        showMobileBottomSheet(
-          context,
-          showDragHandle: true,
-          showDivider: false,
-          showDoneButton: true,
-          showHeader: true,
-          title: LocaleKeys.pageStyle_title.tr(),
-          backgroundColor: Theme.of(context).colorScheme.background,
-          builder: (_) => BlocProvider.value(
-            value: context.read<DocumentPageStyleBloc>(),
-            child: PageStyleBottomSheet(
-              view: context.read<ViewBloc>().state.view,
-            ),
-          ),
-        );
-      },
-      child: _buildImmersiveAppBarIcon(FlowySvgs.m_layout_s, 30.0),
-    );
-  }
-
-  Widget _buildAppBarMoreButton(ViewPB view) {
-    return AppBarButton(
-      padding: const EdgeInsets.only(left: 8, right: 16),
-      onTap: (context) {
-        EditorNotification.exitEditing().post();
-
-        showMobileBottomSheet(
-          context,
-          showDragHandle: true,
-          showDivider: false,
-          backgroundColor: Theme.of(context).colorScheme.background,
-          builder: (_) => _buildAppBarMoreBottomSheet(context),
-        );
-      },
-      child: _buildImmersiveAppBarIcon(FlowySvgs.m_app_bar_more_s, 30.0),
-    );
-  }
-
-  Widget _buildImmersiveAppBarIcon(
-    FlowySvgData icon,
-    double dimension, {
-    double iconPadding = 5.0,
-  }) {
-    assert(
-      dimension > 0.0 && dimension <= kToolbarHeight,
-      'dimension must be greater than 0, and less than or equal to kToolbarHeight',
-    );
-    return UnconstrainedBox(
-      child: SizedBox.square(
-        dimension: dimension,
-        child: ValueListenableBuilder(
-          valueListenable: _isImmersiveMode,
-          builder: (context, isImmersiveMode, child) {
-            return ValueListenableBuilder(
-              valueListenable: _appBarOpacity,
-              builder: (context, appBarOpacity, child) {
-                Color? color;
-
-                // if there's no cover or the cover is not immersive,
-                //  make sure the app bar is always visible
-                if (!isImmersiveMode) {
-                  color = null;
-                } else if (appBarOpacity < 0.99) {
-                  color = Colors.white;
-                }
-
-                Widget child = Container(
-                  margin: EdgeInsets.all(iconPadding),
-                  child: FlowySvg(
-                    icon,
-                    color: color,
-                  ),
-                );
-
-                if (isImmersiveMode && appBarOpacity <= 0.99) {
-                  child = DecoratedBox(
-                    decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(dimension / 2.0),
-                      color: Colors.black.withOpacity(0.2),
-                    ),
-                    child: child,
-                  );
-                }
-
-                return child;
-              },
-            );
-          },
-        ),
-      ),
-    );
-  }
-
-  Widget _buildAppBarMoreBottomSheet(BuildContext context) {
-    final view = context.read<ViewBloc>().state.view;
-    return ViewPageBottomSheet(
-      view: view,
-      onAction: (action) {
-        switch (action) {
-          case MobileViewBottomSheetBodyAction.duplicate:
-            context.pop();
-            context.read<ViewBloc>().add(const ViewEvent.duplicate());
-            // show toast
-            break;
-          case MobileViewBottomSheetBodyAction.share:
-            // unimplemented
-            context.pop();
-            break;
-          case MobileViewBottomSheetBodyAction.delete:
-            // pop to home page
-            context
-              ..pop()
-              ..pop();
-            context.read<ViewBloc>().add(const ViewEvent.delete());
-            break;
-          case MobileViewBottomSheetBodyAction.addToFavorites:
-          case MobileViewBottomSheetBodyAction.removeFromFavorites:
-            context.pop();
-            context.read<FavoriteBloc>().add(FavoriteEvent.toggle(view));
-            break;
-          case MobileViewBottomSheetBodyAction.undo:
-            EditorNotification.undo().post();
-            context.pop();
-            break;
-          case MobileViewBottomSheetBodyAction.redo:
-            EditorNotification.redo().post();
-            context.pop();
-            break;
-          case MobileViewBottomSheetBodyAction.helpCenter:
-            // unimplemented
-            context.pop();
-            break;
-          case MobileViewBottomSheetBodyAction.rename:
-            // no need to implement, rename is handled by the onRename callback.
-            throw UnimplementedError();
-        }
-      },
-      onRename: (name) {
-        if (name != view.name) {
-          context.read<ViewBloc>().add(ViewEvent.rename(name));
-        }
-        context.pop();
-      },
-    );
-  }
-
   // immersive mode related
   // auto show or hide the app bar based on the scroll position
   void _onScrollNotification(ScrollNotification notification) {
@@ -418,7 +260,10 @@ class _MobileViewPageState extends State<MobileViewPage> {
     if (notification is ScrollUpdateNotification &&
         defaultScrollNotificationPredicate(notification)) {
       final ScrollMetrics metrics = notification.metrics;
-      final height = MediaQuery.of(context).padding.top;
+      double height = MediaQuery.of(context).padding.top;
+      if (defaultTargetPlatform == TargetPlatform.android) {
+        height += AppBarTheme.of(context).toolbarHeight ?? kToolbarHeight;
+      }
       final progress = (metrics.pixels / height).clamp(0.0, 1.0);
       // reduce the sensitivity of the app bar opacity change
       if ((progress - _appBarOpacity.value).abs() >= 0.1 ||
@@ -428,16 +273,4 @@ class _MobileViewPageState extends State<MobileViewPage> {
       }
     }
   }
-
-  void _updateImmersiveMode(ViewPB view) {
-    final cover = view.cover;
-    if (cover == null || cover.type == PageStyleCoverImageType.none) {
-      _isImmersiveMode.value = false;
-    } else if (view.layout != ViewLayoutPB.Document) {
-      // only support immersive mode for document layout
-      _isImmersiveMode.value = false;
-    } else {
-      _isImmersiveMode.value = true;
-    }
-  }
 }

frontend/appflowy_flutter/lib/mobile/presentation/base/type_option_menu_item.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart' hide WidgetBuilder;
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 class TypeOptionMenuItemValue<T> {

frontend/appflowy_flutter/lib/mobile/presentation/base/view_page/app_bar_buttons.dart

@@ -0,0 +1,232 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/application/base/mobile_view_page_bloc.dart';
+import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar/app_bar.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/view_page/more_bottom_sheet.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/plugins/document/presentation/editor_notification.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/page_style_bottom_sheet.dart';
+import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/workspace/application/view/prelude.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
+
+class MobileViewPageImmersiveAppBar extends StatelessWidget
+    implements PreferredSizeWidget {
+  const MobileViewPageImmersiveAppBar({
+    super.key,
+    required this.preferredSize,
+    required this.appBarOpacity,
+    required this.title,
+    required this.actions,
+  });
+
+  final ValueListenable appBarOpacity;
+  final Widget title;
+  final List<Widget> actions;
+
+  @override
+  final Size preferredSize;
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder(
+      valueListenable: appBarOpacity,
+      builder: (_, opacity, __) => FlowyAppBar(
+        backgroundColor:
+            AppBarTheme.of(context).backgroundColor?.withOpacity(opacity),
+        showDivider: false,
+        title: Opacity(opacity: opacity >= 0.99 ? 1.0 : 0, child: title),
+        leadingWidth: 44,
+        leading: Padding(
+          padding: const EdgeInsets.only(top: 4.0, bottom: 4.0, left: 12.0),
+          child: _buildAppBarBackButton(context),
+        ),
+        actions: actions,
+      ),
+    );
+  }
+
+  Widget _buildAppBarBackButton(BuildContext context) {
+    return AppBarButton(
+      padding: EdgeInsets.zero,
+      onTap: (context) => context.pop(),
+      child: _ImmersiveAppBarButton(
+        icon: FlowySvgs.m_app_bar_back_s,
+        dimension: 30.0,
+        iconPadding: 3.0,
+        isImmersiveMode:
+            context.read<MobileViewPageBloc>().state.isImmersiveMode,
+        appBarOpacity: appBarOpacity,
+      ),
+    );
+  }
+}
+
+class MobileViewPageMoreButton extends StatelessWidget {
+  const MobileViewPageMoreButton({
+    super.key,
+    required this.view,
+    required this.isImmersiveMode,
+    required this.appBarOpacity,
+  });
+
+  final ViewPB view;
+  final bool isImmersiveMode;
+  final ValueListenable appBarOpacity;
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBarButton(
+      padding: const EdgeInsets.only(left: 8, right: 16),
+      onTap: (context) {
+        EditorNotification.exitEditing().post();
+
+        showMobileBottomSheet(
+          context,
+          showDragHandle: true,
+          showDivider: false,
+          backgroundColor: AFThemeExtension.of(context).background,
+          builder: (_) => MultiBlocProvider(
+            providers: [
+              BlocProvider.value(value: context.read<ViewBloc>()),
+              BlocProvider.value(value: context.read<FavoriteBloc>()),
+            ],
+            child: MobileViewPageMoreBottomSheet(view: view),
+          ),
+        );
+      },
+      child: _ImmersiveAppBarButton(
+        icon: FlowySvgs.m_app_bar_more_s,
+        dimension: 30.0,
+        iconPadding: 3.0,
+        isImmersiveMode: isImmersiveMode,
+        appBarOpacity: appBarOpacity,
+      ),
+    );
+  }
+}
+
+class MobileViewPageLayoutButton extends StatelessWidget {
+  const MobileViewPageLayoutButton({
+    super.key,
+    required this.view,
+    required this.isImmersiveMode,
+    required this.appBarOpacity,
+  });
+
+  final ViewPB view;
+  final bool isImmersiveMode;
+  final ValueListenable appBarOpacity;
+
+  @override
+  Widget build(BuildContext context) {
+    // only display the layout button if the view is a document
+    if (view.layout != ViewLayoutPB.Document) {
+      return const SizedBox.shrink();
+    }
+
+    return AppBarButton(
+      padding: const EdgeInsets.symmetric(vertical: 2.0),
+      onTap: (context) {
+        EditorNotification.exitEditing().post();
+
+        showMobileBottomSheet(
+          context,
+          showDragHandle: true,
+          showDivider: false,
+          showDoneButton: true,
+          showHeader: true,
+          title: LocaleKeys.pageStyle_title.tr(),
+          backgroundColor: AFThemeExtension.of(context).background,
+          builder: (_) => MultiBlocProvider(
+            providers: [
+              BlocProvider.value(value: context.read<DocumentPageStyleBloc>()),
+              BlocProvider.value(value: context.read<MobileViewPageBloc>()),
+            ],
+            child: PageStyleBottomSheet(
+              view: context.read<ViewBloc>().state.view,
+            ),
+          ),
+        );
+      },
+      child: _ImmersiveAppBarButton(
+        icon: FlowySvgs.m_layout_s,
+        dimension: 30.0,
+        iconPadding: 3.0,
+        isImmersiveMode: isImmersiveMode,
+        appBarOpacity: appBarOpacity,
+      ),
+    );
+  }
+}
+
+class _ImmersiveAppBarButton extends StatelessWidget {
+  const _ImmersiveAppBarButton({
+    required this.icon,
+    required this.dimension,
+    required this.iconPadding,
+    required this.isImmersiveMode,
+    required this.appBarOpacity,
+  });
+
+  final FlowySvgData icon;
+  final double dimension;
+  final double iconPadding;
+  final bool isImmersiveMode;
+  final ValueListenable appBarOpacity;
+
+  @override
+  Widget build(BuildContext context) {
+    assert(
+      dimension > 0.0 && dimension <= kToolbarHeight,
+      'dimension must be greater than 0, and less than or equal to kToolbarHeight',
+    );
+
+    // if the immersive mode is on, the icon should be white and add a black background
+    //  also, the icon opacity will change based on the app bar opacity
+    return UnconstrainedBox(
+      child: SizedBox.square(
+        dimension: dimension,
+        child: ValueListenableBuilder(
+          valueListenable: appBarOpacity,
+          builder: (context, appBarOpacity, child) {
+            Color? color;
+
+            // if there's no cover or the cover is not immersive,
+            //  make sure the app bar is always visible
+            if (!isImmersiveMode) {
+              color = null;
+            } else if (appBarOpacity < 0.99) {
+              color = Colors.white;
+            }
+
+            Widget child = Container(
+              margin: EdgeInsets.all(iconPadding),
+              child: FlowySvg(icon, color: color),
+            );
+
+            if (isImmersiveMode && appBarOpacity <= 0.99) {
+              child = DecoratedBox(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(dimension / 2.0),
+                  color: Colors.black.withOpacity(0.2),
+                ),
+                child: child,
+              );
+            }
+
+            return child;
+          },
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/base/view_page/more_bottom_sheet.dart

@@ -0,0 +1,68 @@
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/plugins/document/presentation/editor_notification.dart';
+import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/workspace/application/view/prelude.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
+
+class MobileViewPageMoreBottomSheet extends StatelessWidget {
+  const MobileViewPageMoreBottomSheet({super.key, required this.view});
+
+  final ViewPB view;
+
+  @override
+  Widget build(BuildContext context) {
+    return ViewPageBottomSheet(
+      view: view,
+      onAction: (action) {
+        switch (action) {
+          case MobileViewBottomSheetBodyAction.duplicate:
+            context.pop();
+            context.read<ViewBloc>().add(const ViewEvent.duplicate());
+            // show toast
+            break;
+          case MobileViewBottomSheetBodyAction.share:
+            // unimplemented
+            context.pop();
+            break;
+          case MobileViewBottomSheetBodyAction.delete:
+            // pop to home page
+            context
+              ..pop()
+              ..pop();
+            context.read<ViewBloc>().add(const ViewEvent.delete());
+            break;
+          case MobileViewBottomSheetBodyAction.addToFavorites:
+          case MobileViewBottomSheetBodyAction.removeFromFavorites:
+            context.pop();
+            context.read<FavoriteBloc>().add(FavoriteEvent.toggle(view));
+
+            break;
+          case MobileViewBottomSheetBodyAction.undo:
+            EditorNotification.undo().post();
+            context.pop();
+            break;
+          case MobileViewBottomSheetBodyAction.redo:
+            EditorNotification.redo().post();
+            context.pop();
+            break;
+          case MobileViewBottomSheetBodyAction.helpCenter:
+            // unimplemented
+            context.pop();
+            break;
+          case MobileViewBottomSheetBodyAction.rename:
+            // no need to implement, rename is handled by the onRename callback.
+            throw UnimplementedError();
+        }
+      },
+      onRename: (name) {
+        if (name != view.name) {
+          context.read<ViewBloc>().add(ViewEvent.rename(name));
+        }
+        context.pop();
+      },
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_action_widget.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
@@ -19,7 +20,7 @@ class BottomSheetActionWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final iconColor =
-        this.iconColor ?? Theme.of(context).colorScheme.onBackground;
+        this.iconColor ?? AFThemeExtension.of(context).onBackground;
 
     if (svg == null) {
       return OutlinedButton(

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_add_new_page.dart

@@ -21,40 +21,54 @@ class AddNewPageWidgetBottomSheet extends StatelessWidget {
       children: [
         FlowyOptionTile.text(
           text: LocaleKeys.document_menuName.tr(),
+          height: 52.0,
           leftIcon: const FlowySvg(
-            FlowySvgs.document_s,
-            size: Size.square(20),
+            FlowySvgs.icon_document_s,
+            size: Size.square(18),
           ),
           showTopBorder: false,
           onTap: () => onAction(ViewLayoutPB.Document),
         ),
         FlowyOptionTile.text(
           text: LocaleKeys.grid_menuName.tr(),
+          height: 52.0,
           leftIcon: const FlowySvg(
-            FlowySvgs.grid_s,
-            size: Size.square(20),
+            FlowySvgs.icon_grid_s,
+            size: Size.square(18),
           ),
           showTopBorder: false,
           onTap: () => onAction(ViewLayoutPB.Grid),
         ),
         FlowyOptionTile.text(
           text: LocaleKeys.board_menuName.tr(),
+          height: 52.0,
           leftIcon: const FlowySvg(
-            FlowySvgs.board_s,
-            size: Size.square(20),
+            FlowySvgs.icon_board_s,
+            size: Size.square(18),
           ),
           showTopBorder: false,
           onTap: () => onAction(ViewLayoutPB.Board),
         ),
         FlowyOptionTile.text(
           text: LocaleKeys.calendar_menuName.tr(),
+          height: 52.0,
           leftIcon: const FlowySvg(
-            FlowySvgs.date_s,
-            size: Size.square(20),
+            FlowySvgs.icon_calendar_s,
+            size: Size.square(18),
           ),
           showTopBorder: false,
           onTap: () => onAction(ViewLayoutPB.Calendar),
         ),
+        FlowyOptionTile.text(
+          text: LocaleKeys.chat_newChat.tr(),
+          height: 52.0,
+          leftIcon: const FlowySvg(
+            FlowySvgs.chat_ai_page_s,
+            size: Size.square(18),
+          ),
+          showTopBorder: false,
+          onTap: () => onAction(ViewLayoutPB.Chat),
+        ),
       ],
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_block_action_widget.dart

@@ -33,6 +33,7 @@ class BlockActionBottomSheet extends StatelessWidget {
             FlowySvgs.arrow_up_s,
             size: Size.square(20),
           ),
+          showTopBorder: false,
           onTap: () => onAction(BlockActionBottomSheetType.insertAbove),
         ),
         FlowyOptionTile.text(
@@ -48,7 +49,7 @@ class BlockActionBottomSheet extends StatelessWidget {
         FlowyOptionTile.text(
           showTopBorder: false,
           text: LocaleKeys.button_duplicate.tr(),
-          leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s),
+          leftIcon: const FlowySvg(FlowySvgs.m_duplicate_s),
           onTap: () => onAction(BlockActionBottomSheetType.duplicate),
         ),
 

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item.dart

@@ -1,9 +1,17 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/mobile/presentation/widgets/show_flowy_mobile_confirm_dialog.dart';
+import 'package:appflowy/startup/tasks/app_widget.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/workspace/application/recent/recent_views_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:fluttertoast/fluttertoast.dart';
 
 enum MobileBottomSheetType {
   view,
@@ -14,11 +22,13 @@ class MobileViewItemBottomSheet extends StatefulWidget {
   const MobileViewItemBottomSheet({
     super.key,
     required this.view,
+    required this.actions,
     this.defaultType = MobileBottomSheetType.view,
   });
 
   final ViewPB view;
   final MobileBottomSheetType defaultType;
+  final List<MobileViewItemBottomSheetBodyAction> actions;
 
   @override
   State<MobileViewItemBottomSheet> createState() =>
@@ -27,12 +37,14 @@ class MobileViewItemBottomSheet extends StatefulWidget {
 
 class _MobileViewItemBottomSheetState extends State<MobileViewItemBottomSheet> {
   MobileBottomSheetType type = MobileBottomSheetType.view;
+  final fToast = FToast();
 
   @override
   void initState() {
     super.initState();
 
     type = widget.defaultType;
+    fToast.init(AppGlobals.context);
   }
 
   @override
@@ -40,6 +52,7 @@ class _MobileViewItemBottomSheetState extends State<MobileViewItemBottomSheet> {
     switch (type) {
       case MobileBottomSheetType.view:
         return MobileViewItemBottomSheetBody(
+          actions: widget.actions,
           isFavorite: widget.view.isFavorite,
           onAction: (action) {
             switch (action) {
@@ -59,7 +72,6 @@ class _MobileViewItemBottomSheetState extends State<MobileViewItemBottomSheet> {
               case MobileViewItemBottomSheetBodyAction.delete:
                 Navigator.pop(context);
                 context.read<ViewBloc>().add(const ViewEvent.delete());
-
                 break;
               case MobileViewItemBottomSheetBodyAction.addToFavorites:
               case MobileViewItemBottomSheetBodyAction.removeFromFavorites:
@@ -68,6 +80,11 @@ class _MobileViewItemBottomSheetState extends State<MobileViewItemBottomSheet> {
                     .read<FavoriteBloc>()
                     .add(FavoriteEvent.toggle(widget.view));
                 break;
+              case MobileViewItemBottomSheetBodyAction.removeFromRecent:
+                _removeFromRecent(context);
+                break;
+              case MobileViewItemBottomSheetBodyAction.divider:
+                break;
             }
           },
         );
@@ -83,4 +100,74 @@ class _MobileViewItemBottomSheetState extends State<MobileViewItemBottomSheet> {
         );
     }
   }
+
+  Future<void> _removeFromRecent(BuildContext context) async {
+    final viewId = context.read<ViewBloc>().view.id;
+    final recentViewsBloc = context.read<RecentViewsBloc>();
+    Navigator.pop(context);
+
+    await _showConfirmDialog(
+      onDelete: () {
+        recentViewsBloc.add(RecentViewsEvent.removeRecentViews([viewId]));
+
+        fToast.showToast(
+          child: const _RemoveToast(),
+          positionedToastBuilder: (context, child) {
+            return Positioned.fill(
+              top: 450,
+              child: child,
+            );
+          },
+        );
+      },
+    );
+  }
+
+  Future<void> _showConfirmDialog({required VoidCallback onDelete}) async {
+    await showFlowyCupertinoConfirmDialog(
+      title: LocaleKeys.sideBar_removePageFromRecent.tr(),
+      leftButton: FlowyText.regular(
+        LocaleKeys.button_cancel.tr(),
+        color: const Color(0xFF1456F0),
+      ),
+      rightButton: FlowyText.medium(
+        LocaleKeys.button_delete.tr(),
+        color: const Color(0xFFFE0220),
+      ),
+      onRightButtonPressed: (context) {
+        onDelete();
+        Navigator.pop(context);
+      },
+    );
+  }
+}
+
+class _RemoveToast extends StatelessWidget {
+  const _RemoveToast();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 13.0),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(12.0),
+        color: const Color(0xE5171717),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          const FlowySvg(
+            FlowySvgs.success_s,
+            blendMode: null,
+          ),
+          const HSpace(8.0),
+          FlowyText.regular(
+            LocaleKeys.sideBar_removeSuccess.tr(),
+            fontSize: 16.0,
+            color: Colors.white,
+          ),
+        ],
+      ),
+    );
+  }
 }

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item_body.dart

@@ -1,6 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
@@ -11,6 +11,8 @@ enum MobileViewItemBottomSheetBodyAction {
   delete,
   addToFavorites,
   removeFromFavorites,
+  divider,
+  removeFromRecent,
 }
 
 class MobileViewItemBottomSheetBody extends StatelessWidget {
@@ -18,63 +20,134 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
     super.key,
     this.isFavorite = false,
     required this.onAction,
+    required this.actions,
   });
 
   final bool isFavorite;
   final void Function(MobileViewItemBottomSheetBodyAction action) onAction;
+  final List<MobileViewItemBottomSheetBodyAction> actions;
 
   @override
   Widget build(BuildContext context) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        MobileQuickActionButton(
-          text: LocaleKeys.button_rename.tr(),
-          icon: FlowySvgs.m_rename_s,
-          onTap: () => onAction(
-            MobileViewItemBottomSheetBodyAction.rename,
-          ),
-        ),
-        _divider(),
-        MobileQuickActionButton(
-          text: isFavorite
-              ? LocaleKeys.button_removeFromFavorites.tr()
-              : LocaleKeys.button_addToFavorites.tr(),
-          icon: isFavorite
-              ? FlowySvgs.m_favorite_selected_lg
-              : FlowySvgs.m_favorite_unselected_lg,
-          iconColor: isFavorite ? Colors.yellow : null,
-          onTap: () => onAction(
-            isFavorite
-                ? MobileViewItemBottomSheetBodyAction.removeFromFavorites
-                : MobileViewItemBottomSheetBodyAction.addToFavorites,
-          ),
-        ),
-        _divider(),
-        MobileQuickActionButton(
-          text: LocaleKeys.button_duplicate.tr(),
-          icon: FlowySvgs.m_duplicate_s,
-          onTap: () => onAction(
-            MobileViewItemBottomSheetBodyAction.duplicate,
-          ),
-        ),
-        _divider(),
-        MobileQuickActionButton(
-          text: LocaleKeys.button_delete.tr(),
-          textColor: Theme.of(context).colorScheme.error,
-          icon: FlowySvgs.m_delete_s,
-          iconColor: Theme.of(context).colorScheme.error,
-          onTap: () => onAction(
-            MobileViewItemBottomSheetBodyAction.delete,
-          ),
-        ),
-        _divider(),
-      ],
+      children:
+          actions.map((action) => _buildActionButton(context, action)).toList(),
     );
   }
 
-  Widget _divider() => const Divider(
-        height: 8.5,
-        thickness: 0.5,
-      );
+  Widget _buildActionButton(
+    BuildContext context,
+    MobileViewItemBottomSheetBodyAction action,
+  ) {
+    switch (action) {
+      case MobileViewItemBottomSheetBodyAction.rename:
+        return FlowyOptionTile.text(
+          text: LocaleKeys.button_rename.tr(),
+          height: 52.0,
+          leftIcon: const FlowySvg(
+            FlowySvgs.view_item_rename_s,
+            size: Size.square(18),
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            MobileViewItemBottomSheetBodyAction.rename,
+          ),
+        );
+      case MobileViewItemBottomSheetBodyAction.duplicate:
+        return FlowyOptionTile.text(
+          text: LocaleKeys.button_duplicate.tr(),
+          height: 52.0,
+          leftIcon: const FlowySvg(
+            FlowySvgs.duplicate_s,
+            size: Size.square(18),
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            MobileViewItemBottomSheetBodyAction.duplicate,
+          ),
+        );
+
+      case MobileViewItemBottomSheetBodyAction.share:
+        return FlowyOptionTile.text(
+          text: LocaleKeys.button_share.tr(),
+          height: 52.0,
+          leftIcon: const FlowySvg(
+            FlowySvgs.share_s,
+            size: Size.square(18),
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            MobileViewItemBottomSheetBodyAction.share,
+          ),
+        );
+      case MobileViewItemBottomSheetBodyAction.delete:
+        return FlowyOptionTile.text(
+          text: LocaleKeys.button_delete.tr(),
+          height: 52.0,
+          textColor: Theme.of(context).colorScheme.error,
+          leftIcon: FlowySvg(
+            FlowySvgs.trash_s,
+            size: const Size.square(18),
+            color: Theme.of(context).colorScheme.error,
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            MobileViewItemBottomSheetBodyAction.delete,
+          ),
+        );
+      case MobileViewItemBottomSheetBodyAction.addToFavorites:
+        return FlowyOptionTile.text(
+          height: 52.0,
+          text: LocaleKeys.button_addToFavorites.tr(),
+          leftIcon: const FlowySvg(
+            FlowySvgs.favorite_s,
+            size: Size.square(18),
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            MobileViewItemBottomSheetBodyAction.addToFavorites,
+          ),
+        );
+      case MobileViewItemBottomSheetBodyAction.removeFromFavorites:
+        return FlowyOptionTile.text(
+          height: 52.0,
+          text: LocaleKeys.button_removeFromFavorites.tr(),
+          leftIcon: const FlowySvg(
+            FlowySvgs.favorite_section_remove_from_favorite_s,
+            size: Size.square(18),
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            MobileViewItemBottomSheetBodyAction.removeFromFavorites,
+          ),
+        );
+      case MobileViewItemBottomSheetBodyAction.removeFromRecent:
+        return FlowyOptionTile.text(
+          height: 52.0,
+          text: LocaleKeys.button_removeFromRecent.tr(),
+          leftIcon: const FlowySvg(
+            FlowySvgs.remove_from_recent_s,
+            size: Size.square(18),
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            MobileViewItemBottomSheetBodyAction.removeFromRecent,
+          ),
+        );
+
+      case MobileViewItemBottomSheetBodyAction.divider:
+        return const Padding(
+          padding: EdgeInsets.symmetric(horizontal: 12.0),
+          child: Divider(height: 0.5),
+        );
+    }
+  }
 }

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart

@@ -89,7 +89,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
       children: [
         MobileQuickActionButton(
           text: LocaleKeys.button_rename.tr(),
-          icon: FlowySvgs.m_rename_s,
+          icon: FlowySvgs.view_item_rename_s,
           onTap: () => onAction(
             MobileViewBottomSheetBodyAction.rename,
           ),
@@ -99,10 +99,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
           text: isFavorite
               ? LocaleKeys.button_removeFromFavorites.tr()
               : LocaleKeys.button_addToFavorites.tr(),
-          icon: isFavorite
-              ? FlowySvgs.m_favorite_selected_lg
-              : FlowySvgs.m_favorite_unselected_lg,
-          iconColor: isFavorite ? Colors.yellow : null,
+          icon: isFavorite ? FlowySvgs.unfavorite_s : FlowySvgs.favorite_s,
           onTap: () => onAction(
             isFavorite
                 ? MobileViewBottomSheetBodyAction.removeFromFavorites
@@ -112,7 +109,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
         _divider(),
         MobileQuickActionButton(
           text: LocaleKeys.button_duplicate.tr(),
-          icon: FlowySvgs.m_duplicate_s,
+          icon: FlowySvgs.duplicate_s,
           onTap: () => onAction(
             MobileViewBottomSheetBodyAction.duplicate,
           ),
@@ -121,7 +118,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
         MobileQuickActionButton(
           text: LocaleKeys.button_delete.tr(),
           textColor: Theme.of(context).colorScheme.error,
-          icon: FlowySvgs.m_delete_s,
+          icon: FlowySvgs.trash_s,
           iconColor: Theme.of(context).colorScheme.error,
           onTap: () => onAction(
             MobileViewBottomSheetBodyAction.delete,

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart

@@ -1,8 +1,15 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/mobile/presentation/home/shared/mobile_page_card.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_slide_action_button.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/workspace/application/recent/recent_views_bloc.dart';
+import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
@@ -11,11 +18,14 @@ enum MobilePaneActionType {
   delete,
   addToFavorites,
   removeFromFavorites,
-  more;
+  more,
+  add;
 
   MobileSlideActionButton actionButton(
-    BuildContext context,
-  ) {
+    BuildContext context, {
+    MobilePageCardType? cardType,
+    FolderSpaceType? spaceType,
+  }) {
     switch (this) {
       case MobilePaneActionType.delete:
         return MobileSlideActionButton(
@@ -27,45 +37,89 @@ enum MobilePaneActionType {
         );
       case MobilePaneActionType.removeFromFavorites:
         return MobileSlideActionButton(
-          backgroundColor: Colors.orange,
-          svg: FlowySvgs.favorite_s,
+          backgroundColor: const Color(0xFFFA217F),
+          svg: FlowySvgs.favorite_section_remove_from_favorite_s,
+          size: 24.0,
           onPressed: (context) => context
               .read<FavoriteBloc>()
               .add(FavoriteEvent.toggle(context.read<ViewBloc>().view)),
         );
       case MobilePaneActionType.addToFavorites:
         return MobileSlideActionButton(
-          backgroundColor: Colors.orange,
-          svg: FlowySvgs.m_favorite_unselected_lg,
-          size: 34.0,
+          backgroundColor: const Color(0xFF00C8FF),
+          svg: FlowySvgs.favorite_s,
+          size: 24.0,
           onPressed: (context) => context
               .read<FavoriteBloc>()
               .add(FavoriteEvent.toggle(context.read<ViewBloc>().view)),
         );
-      case MobilePaneActionType.more:
+      case MobilePaneActionType.add:
         return MobileSlideActionButton(
-          backgroundColor: Colors.grey,
-          svg: FlowySvgs.three_dots_vertical_s,
+          backgroundColor: const Color(0xFF00C8FF),
+          svg: FlowySvgs.add_m,
           size: 28.0,
+          onPressed: (context) {
+            final viewBloc = context.read<ViewBloc>();
+            final view = viewBloc.state.view;
+            final title = view.name;
+            showMobileBottomSheet(
+              context,
+              showHeader: true,
+              title: title,
+              showDragHandle: true,
+              showCloseButton: true,
+              useRootNavigator: true,
+              backgroundColor: Theme.of(context).colorScheme.surface,
+              builder: (sheetContext) {
+                return AddNewPageWidgetBottomSheet(
+                  view: view,
+                  onAction: (layout) {
+                    Navigator.of(sheetContext).pop();
+                    viewBloc.add(
+                      ViewEvent.createView(
+                        LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+                        layout,
+                        section: spaceType!.toViewSectionPB,
+                      ),
+                    );
+                  },
+                );
+              },
+            );
+          },
+        );
+      case MobilePaneActionType.more:
+        return MobileSlideActionButton(
+          backgroundColor: const Color(0xE5515563),
+          svg: FlowySvgs.three_dots_s,
+          size: 24.0,
+          borderRadius: const BorderRadius.only(
+            topLeft: Radius.circular(10),
+            bottomLeft: Radius.circular(10),
+          ),
           onPressed: (context) {
             final viewBloc = context.read<ViewBloc>();
             final favoriteBloc = context.read<FavoriteBloc>();
+            final recentViewsBloc = context.read<RecentViewsBloc?>();
             showMobileBottomSheet(
               context,
               showDragHandle: true,
               showDivider: false,
-              backgroundColor: Theme.of(context).colorScheme.background,
               useRootNavigator: true,
+              backgroundColor: Theme.of(context).colorScheme.surface,
               builder: (context) {
                 return MultiBlocProvider(
                   providers: [
                     BlocProvider.value(value: viewBloc),
                     BlocProvider.value(value: favoriteBloc),
+                    if (recentViewsBloc != null)
+                      BlocProvider.value(value: recentViewsBloc),
                   ],
                   child: BlocBuilder<ViewBloc, ViewState>(
                     builder: (context, state) {
                       return MobileViewItemBottomSheet(
                         view: viewBloc.state.view,
+                        actions: _buildActions(state.view, cardType: cardType),
                       );
                     },
                   ),
@@ -76,19 +130,70 @@ enum MobilePaneActionType {
         );
     }
   }
+
+  List<MobileViewItemBottomSheetBodyAction> _buildActions(
+    ViewPB view, {
+    MobilePageCardType? cardType,
+  }) {
+    final isFavorite = view.isFavorite;
+
+    if (cardType != null) {
+      switch (cardType) {
+        case MobilePageCardType.recent:
+          return [
+            isFavorite
+                ? MobileViewItemBottomSheetBodyAction.removeFromFavorites
+                : MobileViewItemBottomSheetBodyAction.addToFavorites,
+            MobileViewItemBottomSheetBodyAction.divider,
+            if (view.layout != ViewLayoutPB.Chat)
+              MobileViewItemBottomSheetBodyAction.duplicate,
+            MobileViewItemBottomSheetBodyAction.divider,
+            MobileViewItemBottomSheetBodyAction.removeFromRecent,
+          ];
+        case MobilePageCardType.favorite:
+          return [
+            isFavorite
+                ? MobileViewItemBottomSheetBodyAction.removeFromFavorites
+                : MobileViewItemBottomSheetBodyAction.addToFavorites,
+            MobileViewItemBottomSheetBodyAction.divider,
+            MobileViewItemBottomSheetBodyAction.duplicate,
+          ];
+      }
+    }
+
+    return [
+      isFavorite
+          ? MobileViewItemBottomSheetBodyAction.removeFromFavorites
+          : MobileViewItemBottomSheetBodyAction.addToFavorites,
+      MobileViewItemBottomSheetBodyAction.divider,
+      MobileViewItemBottomSheetBodyAction.rename,
+      if (view.layout != ViewLayoutPB.Chat)
+        MobileViewItemBottomSheetBodyAction.duplicate,
+      MobileViewItemBottomSheetBodyAction.divider,
+      MobileViewItemBottomSheetBodyAction.delete,
+    ];
+  }
 }
 
 ActionPane buildEndActionPane(
   BuildContext context,
-  List<MobilePaneActionType> actions,
-) {
+  List<MobilePaneActionType> actions, {
+  bool needSpace = true,
+  MobilePageCardType? cardType,
+  FolderSpaceType? spaceType,
+}) {
   return ActionPane(
     motion: const ScrollMotion(),
     extentRatio: actions.length / 5,
-    children: actions
-        .map(
-          (action) => action.actionButton(context),
-        )
-        .toList(),
+    children: [
+      if (needSpace) const HSpace(20),
+      ...actions.map(
+        (action) => action.actionButton(
+          context,
+          spaceType: spaceType,
+          cardType: cardType,
+        ),
+      ),
+    ],
   );
 }

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart

@@ -1,6 +1,6 @@
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_buttons.dart';
 import 'package:appflowy/plugins/base/drag_handler.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart' hide WidgetBuilder;
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 extension BottomSheetPaddingExtension on BuildContext {

frontend/appflowy_flutter/lib/mobile/presentation/chat/mobile_chat_screen.dart

@@ -0,0 +1,28 @@
+import 'package:appflowy/mobile/presentation/base/mobile_view_page.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:flutter/material.dart';
+
+class MobileChatScreen extends StatelessWidget {
+  const MobileChatScreen({
+    super.key,
+    required this.id,
+    this.title,
+  });
+
+  /// view id
+  final String id;
+  final String? title;
+
+  static const routeName = '/chat';
+  static const viewId = 'id';
+  static const viewTitle = 'title';
+
+  @override
+  Widget build(BuildContext context) {
+    return MobileViewPage(
+      id: id,
+      title: title,
+      viewLayout: ViewLayoutPB.Chat,
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/database/board/board.dart

@@ -1,4 +1,4 @@
 export 'mobile_board_screen.dart';
-export 'mobile_board_content.dart';
+export 'mobile_board_page.dart';
 export 'widgets/mobile_hidden_groups_column.dart';
 export 'widgets/mobile_board_trailing.dart';