chore: clippy

* chore: import into space

* chore: par insert

* fix: migrate from anon

* chore: fix test

* chore: update test

* chore: add test

* chore: update test

* chore: update test

* chore: update docs

* fix: space collab

* chore: update test

.github/actions/flutter_build/action.yml

@@ -58,19 +58,24 @@ runs:
 
     - name: Install prerequisites
       working-directory: frontend
-      run: |
-        if [ "$RUNNER_OS" == "Linux" ]; then
-          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 libmpv-dev mpv
-        elif [ "$RUNNER_OS" == "Windows" ]; then
-          vcpkg integrate install
-        elif [ "$RUNNER_OS" == "macOS" ]; then
-          echo 'do nothing'
-        fi
-        cargo make appflowy-flutter-deps-tools
       shell: bash
+      run: |
+        case $RUNNER_OS in
+          Linux)
+            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
+            ;;
+          Windows)
+            vcpkg integrate install
+            vcpkg update
+            ;;
+          macOS)
+            # No additional prerequisites needed for macOS
+            ;;
+        esac
+        cargo make appflowy-flutter-deps-tools
 
     - name: Build AppFlowy
       working-directory: frontend
@@ -94,4 +99,4 @@ runs:
     - uses: actions/upload-artifact@v4
       with:
         name: ${{ github.run_id }}-${{ matrix.os }}
-        path: appflowy_flutter.tar.gz
+        path: appflowy_flutter.tar.gz

.github/workflows/docker_ci.yml

@@ -2,18 +2,10 @@ name: Docker-CI
 
 on:
   push:
-    branches:
-      - main
-      - release/*
-    paths:
-      - frontend/**
+    branches: ["main", "release/*"]
   pull_request:
-    branches:
-      - main
-      - release/*
-    paths:
-      - frontend/**
-    types: [ opened, synchronize, reopened, unlocked, ready_for_review ]
+    branches: ["main", "release/*"]
+  workflow_dispatch:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -27,25 +19,29 @@ jobs:
       - name: Checkout source code
         uses: actions/checkout@v4
 
-      - name: Set up Docker Compose
-        run: |
-          docker-compose --version || {
-            echo "Docker Compose not found, installing..."
-            sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
-            sudo chmod +x /usr/local/bin/docker-compose
-            docker-compose --version
-          }
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # cache the docker layers
+      # don't cache anything temporarly, because it always triggers "no space left on device" error
+      # - name: Cache Docker layers
+      #   uses: actions/cache@v3
+      #   with:
+      #     path: /tmp/.buildx-cache
+      #     key: ${{ runner.os }}-buildx-${{ github.sha }}
+      #     restore-keys: |
+      #       ${{ runner.os }}-buildx-
 
       - name: Build the app
-        shell: bash
-        run: |
-          set -eu -o pipefail
-          cd frontend/scripts/docker-buildfiles
-          docker-compose build --no-cache --progress=plain \
-          | while read line; do \
-              if [[ "$line" =~ ^Step[[:space:]] ]]; then \
-                echo "$(date -u '+%H:%M:%S') | $line"; \
-              else \
-                echo "$line"; \
-              fi; \
-            done
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./frontend/scripts/docker-buildfiles/Dockerfile
+          push: false
+          # cache-from: type=local,src=/tmp/.buildx-cache
+          # cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
+
+      # - name: Move cache
+      #   run: |
+      #     rm -rf /tmp/.buildx-cache
+      #     mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.github/workflows/flutter_ci.yaml

@@ -25,9 +25,9 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
-  FLUTTER_VERSION: "3.22.0"
-  RUST_TOOLCHAIN: "1.77.2"
-  CARGO_MAKE_VERSION: "0.36.6"
+  FLUTTER_VERSION: "3.22.2"
+  RUST_TOOLCHAIN: "1.80.1"
+  CARGO_MAKE_VERSION: "0.37.18"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -73,9 +73,9 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        os: [ windows-latest ]
+        os: [ windows-2019 ]
         include:
-          - os: windows-latest
+          - os: windows-2019
             flutter_profile: development-windows-x86
             target: x86_64-pc-windows-msvc
     runs-on: ${{ matrix.os }}
@@ -241,12 +241,15 @@ jobs:
           cp deploy.env .env
           sed -i 's|RUST_LOG=.*|RUST_LOG=trace|' .env
           sed -i 's/GOTRUE_EXTERNAL_GOOGLE_ENABLED=.*/GOTRUE_EXTERNAL_GOOGLE_ENABLED=true/' .env
+          sed -i 's|GOTRUE_MAILER_AUTOCONFIRM=.*|GOTRUE_MAILER_AUTOCONFIRM=true|' .env
           sed -i 's|API_EXTERNAL_URL=.*|API_EXTERNAL_URL=http://localhost|' .env
 
       - name: Run Docker-Compose
         working-directory: AppFlowy-Cloud
         env:
-          APPFLOWY_CLOUD_VERSION: 0.6.4-amd64
+          APPFLOWY_CLOUD_VERSION: 0.6.29-amd64
+          APPFLOWY_HISTORY_VERSION: 0.6.29-amd64
+          APPFLOWY_WORKER_VERSION: 0.6.29-amd64
         run: |
           container_id=$(docker ps --filter name=appflowy-cloud-appflowy_cloud-1 -q)
           if [ -z "$container_id" ]; then
@@ -317,7 +320,7 @@ jobs:
           sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 &
           sudo apt-get install network-manager
           docker ps -a
-          flutter test integration_test/cloud/cloud_runner.dart -d Linux --coverage
+          flutter test integration_test/desktop/cloud/cloud_runner.dart -d Linux --coverage
         shell: bash
 
   # split the integration tests into different machines to minimize the time
@@ -330,7 +333,7 @@ jobs:
         os: [ ubuntu-latest ]
         include:
           - os: ubuntu-latest
-            target: 'x86_64-unknown-linux-gnu'
+            target: "x86_64-unknown-linux-gnu"
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout source code
@@ -360,7 +363,7 @@ jobs:
         os: [ ubuntu-latest ]
         include:
           - os: ubuntu-latest
-            target: 'x86_64-unknown-linux-gnu'
+            target: "x86_64-unknown-linux-gnu"
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout source code
@@ -390,7 +393,7 @@ jobs:
         os: [ ubuntu-latest ]
         include:
           - os: ubuntu-latest
-            target: 'x86_64-unknown-linux-gnu'
+            target: "x86_64-unknown-linux-gnu"
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout source code
@@ -409,4 +412,4 @@ jobs:
           flutter_version: ${{ env.FLUTTER_VERSION }}
           rust_toolchain: ${{ env.RUST_TOOLCHAIN }}
           cargo_make_version: ${{ env.CARGO_MAKE_VERSION }}
-          rust_target: ${{ matrix.target }}
+          rust_target: ${{ matrix.target }}

.github/workflows/release.yml

@@ -232,10 +232,10 @@ jobs:
       matrix:
         job:
           - {
-            targets: "aarch64-apple-darwin,x86_64-apple-darwin",
-            os: macos-latest,
-            extra-build-args: "",
-          }
+              targets: "aarch64-apple-darwin,x86_64-apple-darwin",
+              os: macos-latest,
+              extra-build-args: "",
+            }
     steps:
       - name: Checkout source code
         uses: actions/checkout@v4
@@ -336,12 +336,12 @@ jobs:
       matrix:
         job:
           - {
-            arch: x86_64,
-            target: x86_64-unknown-linux-gnu,
-            os: ubuntu-20.04,
-            extra-build-args: "",
-            flutter_profile: production-linux-x86_64,
-          }
+              arch: x86_64,
+              target: x86_64-unknown-linux-gnu,
+              os: ubuntu-20.04,
+              extra-build-args: "",
+              flutter_profile: production-linux-x86_64,
+            }
     steps:
       - name: Checkout source code
         uses: actions/checkout@v4

.github/workflows/rust_ci.yaml

@@ -47,6 +47,8 @@ jobs:
         working-directory: AppFlowy-Cloud
         env:
           APPFLOWY_CLOUD_VERSION: 0.6.4-amd64
+          APPFLOWY_HISTORY_VERSION: 0.6.29-amd64
+          APPFLOWY_WORKER_VERSION: 0.6.29-amd64
         run: |
           container_id=$(docker ps --filter name=appflowy-cloud-appflowy_cloud-1 -q)
           if [ -z "$container_id" ]; then
@@ -127,12 +129,15 @@ jobs:
         run: |
           cp deploy.env .env
           sed -i 's|RUST_LOG=.*|RUST_LOG=trace|' .env
+          sed -i 's|GOTRUE_MAILER_AUTOCONFIRM=.*|GOTRUE_MAILER_AUTOCONFIRM=true|' .env 
           sed -i 's|API_EXTERNAL_URL=.*|API_EXTERNAL_URL=http://localhost|' .env
 
       - name: Ensure AppFlowy-Cloud is Running with Correct Version
         working-directory: AppFlowy-Cloud
         env:
           APPFLOWY_CLOUD_VERSION: 0.6.4-amd64
+          APPFLOWY_HISTORY_VERSION: 0.6.29-amd64
+          APPFLOWY_WORKER_VERSION: 0.6.29-amd64
         run: |
           container_id=$(docker ps --filter name=appflowy-cloud-appflowy_cloud-1 -q)
           if [ -z "$container_id" ]; then

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.7.0"
+APPFLOWY_VERSION = "0.7.1"
 FLUTTER_DESKTOP_FEATURES = "dart"
 PRODUCT_NAME = "AppFlowy"
 MACOSX_DEPLOYMENT_TARGET = "11.0"

frontend/appflowy_flutter/integration_test/cloud/cloud_runner.dart

@@ -1,29 +0,0 @@
-import 'anon_user_continue_test.dart' as anon_user_continue_test;
-import 'appflowy_cloud_auth_test.dart' as appflowy_cloud_auth_test;
-import 'document/document_drag_block_test.dart' as document_drag_block_test;
-import 'empty_test.dart' as preset_af_cloud_env_test;
-import 'sidebar/sidebar_move_page_test.dart' as sidebar_move_page_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;
-import 'workspace/collaborative_workspace_test.dart'
-    as collaboration_workspace_test;
-import 'workspace/workspace_settings_test.dart' as workspace_settings_test;
-
-Future<void> main() async {
-  preset_af_cloud_env_test.main();
-  appflowy_cloud_auth_test.main();
-  user_sync_test.main();
-  anon_user_continue_test.main();
-
-  // workspace
-  collaboration_workspace_test.main();
-  change_workspace_name_and_icon_test.main();
-  workspace_settings_test.main();
-
-  // document
-  document_drag_block_test.main();
-
-  // sidebar
-  sidebar_move_page_test.main();
-}

frontend/appflowy_flutter/integration_test/cloud/document/document_delete_block_test.dart

@@ -1,60 +0,0 @@
-import 'package:appflowy/env/cloud_env.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/drag_to_reorder/draggable_option_button.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:integration_test/integration_test.dart';
-
-import '../../shared/constants.dart';
-import '../../shared/util.dart';
-
-void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
-  group('document delete block: ', () {
-    testWidgets('hover on the block and delete it', (tester) async {
-      await tester.initializeAppFlowy(
-        cloudType: AuthenticatorType.appflowyCloudSelfHost,
-      );
-      await tester.tapGoogleLoginInButton();
-      await tester.expectToSeeHomePageWithGetStartedPage();
-
-      // open getting started page
-      await tester.openPage(Constants.gettingStartedPageName);
-
-      // before delete
-      final path = [1];
-      final beforeDeletedBlock = tester.editor.getNodeAtPath(path);
-
-      // hover on the block and delete it
-      final optionButton = find.byWidgetPredicate(
-        (widget) =>
-            widget is DraggableOptionButton &&
-            widget.blockComponentContext.node.path.equals(path),
-      );
-
-      await tester.hoverOnWidget(
-        optionButton,
-        onHover: () async {
-          // click the delete button
-          await tester.tapButton(optionButton);
-        },
-      );
-      await tester.pumpAndSettle(Durations.short1);
-
-      // click the delete button
-      final deleteButton =
-          find.findTextInFlowyText(LocaleKeys.button_delete.tr());
-      await tester.tapButton(deleteButton);
-
-      // wait for the deletion
-      await tester.pumpAndSettle(Durations.short1);
-
-      // check if the block is deleted
-      final afterDeletedBlock = tester.editor.getNodeAtPath([1]);
-      expect(afterDeletedBlock.id, isNot(equals(beforeDeletedBlock.id)));
-    });
-  });
-}

frontend/appflowy_flutter/integration_test/cloud/document/document_drag_block_test.dart

@@ -1,67 +0,0 @@
-import 'package:appflowy/env/cloud_env.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:integration_test/integration_test.dart';
-
-import '../../shared/constants.dart';
-import '../../shared/util.dart';
-
-void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
-  group('document drag block: ', () {
-    testWidgets('drag block to the top', (tester) async {
-      await tester.initializeAppFlowy(
-        cloudType: AuthenticatorType.appflowyCloudSelfHost,
-      );
-      await tester.tapGoogleLoginInButton();
-      await tester.expectToSeeHomePageWithGetStartedPage();
-
-      // open getting started page
-      await tester.openPage(Constants.gettingStartedPageName);
-
-      // before move
-      final beforeMoveBlock = tester.editor.getNodeAtPath([1]);
-
-      // move the desktop guide to the top, above the getting started
-      await tester.editor.dragBlock(
-        [1],
-        const Offset(20, -80),
-      );
-
-      // wait for the move animation to complete
-      await tester.pumpAndSettle(Durations.short1);
-
-      // check if the block is moved to the top
-      final afterMoveBlock = tester.editor.getNodeAtPath([0]);
-      expect(afterMoveBlock.delta, beforeMoveBlock.delta);
-    });
-
-    testWidgets('drag block to other block\'s child', (tester) async {
-      await tester.initializeAppFlowy(
-        cloudType: AuthenticatorType.appflowyCloudSelfHost,
-      );
-      await tester.tapGoogleLoginInButton();
-      await tester.expectToSeeHomePageWithGetStartedPage();
-
-      // open getting started page
-      await tester.openPage(Constants.gettingStartedPageName);
-
-      // before move
-      final beforeMoveBlock = tester.editor.getNodeAtPath([10]);
-
-      // move the checkbox to the child of the block at path [9]
-      await tester.editor.dragBlock(
-        [10],
-        const Offset(80, -30),
-      );
-
-      // wait for the move animation to complete
-      await tester.pumpAndSettle(Durations.short1);
-
-      // check if the block is moved to the child of the block at path [9]
-      final afterMoveBlock = tester.editor.getNodeAtPath([9, 0]);
-      expect(afterMoveBlock.delta, beforeMoveBlock.delta);
-    });
-  });
-}

frontend/appflowy_flutter/integration_test/cloud/supabase_auth_test.dart

@@ -1,93 +0,0 @@
-// import 'package:appflowy/env/cloud_env.dart';
-// import 'package:appflowy/workspace/application/settings/prelude.dart';
-// import 'package:appflowy/workspace/presentation/settings/pages/settings_account_view.dart';
-// import 'package:appflowy/workspace/presentation/settings/widgets/setting_supabase_cloud.dart';
-// import 'package:flutter_test/flutter_test.dart';
-// import 'package:integration_test/integration_test.dart';
-
-// import '../shared/util.dart';
-
-// void main() {
-//   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
-//   group('supabase auth', () {
-//     testWidgets('sign in with supabase', (tester) async {
-//       await tester.initializeAppFlowy(cloudType: AuthenticatorType.supabase);
-//       await tester.tapGoogleLoginInButton();
-//       await tester.expectToSeeHomePageWithGetStartedPage();
-//     });
-
-//     testWidgets('sign out with supabase', (tester) async {
-//       await tester.initializeAppFlowy(cloudType: AuthenticatorType.supabase);
-//       await tester.tapGoogleLoginInButton();
-
-//       // Open the setting page and sign out
-//       await tester.openSettings();
-//       await tester.openSettingsPage(SettingsPage.account);
-//       await tester.logout();
-
-//       // Go to the sign in page again
-//       await tester.pumpAndSettle(const Duration(seconds: 1));
-//       tester.expectToSeeGoogleLoginButton();
-//     });
-
-//     testWidgets('sign in as anonymous', (tester) async {
-//       await tester.initializeAppFlowy(cloudType: AuthenticatorType.supabase);
-//       await tester.tapSignInAsGuest();
-
-//       // should not see the sync setting page when sign in as anonymous
-//       await tester.openSettings();
-//       await tester.openSettingsPage(SettingsPage.account);
-
-//       // Scroll to sign-out
-//       await tester.scrollUntilVisible(
-//         find.byType(SignInOutButton),
-//         100,
-//         scrollable: find.findSettingsScrollable(),
-//       );
-//       await tester.tapButton(find.byType(SignInOutButton));
-
-//       tester.expectToSeeGoogleLoginButton();
-//     });
-
-//     // testWidgets('enable encryption', (tester) async {
-//     //   await tester.initializeAppFlowy(cloudType: CloudType.supabase);
-//     //   await tester.tapGoogleLoginInButton();
-
-//     //   // Open the setting page and sign out
-//     //   await tester.openSettings();
-//     //   await tester.openSettingsPage(SettingsPage.cloud);
-
-//     //   // the switch should be off by default
-//     //   tester.assertEnableEncryptSwitchValue(false);
-//     //   await tester.toggleEnableEncrypt();
-
-//     //   // the switch should be on after toggling
-//     //   tester.assertEnableEncryptSwitchValue(true);
-
-//     //   // the switch can not be toggled back to off
-//     //   await tester.toggleEnableEncrypt();
-//     //   tester.assertEnableEncryptSwitchValue(true);
-//     // });
-
-//     testWidgets('enable sync', (tester) async {
-//       await tester.initializeAppFlowy(cloudType: AuthenticatorType.supabase);
-//       await tester.tapGoogleLoginInButton();
-
-//       // Open the setting page and sign out
-//       await tester.openSettings();
-//       await tester.openSettingsPage(SettingsPage.cloud);
-
-//       // the switch should be on by default
-//       tester.assertSupabaseEnableSyncSwitchValue(true);
-//       await tester.toggleEnableSync(SupabaseEnableSync);
-
-//       // the switch should be off
-//       tester.assertSupabaseEnableSyncSwitchValue(false);
-
-//       // the switch should be on after toggling
-//       await tester.toggleEnableSync(SupabaseEnableSync);
-//       tester.assertSupabaseEnableSyncSwitchValue(true);
-//     });
-//   });
-// }

frontend/appflowy_flutter/integration_test/desktop/cloud/cloud_runner.dart

@@ -0,0 +1,22 @@
+import 'document/document_test_runner.dart' as document_test_runner;
+import 'sidebar/sidebar_move_page_test.dart' as sidebar_move_page_test;
+import 'uncategorized/uncategorized_test_runner.dart'
+    as uncategorized_test_runner;
+import 'workspace/workspace_test_runner.dart' as workspace_test_runner;
+import 'data_migration/data_migration_test_runner.dart' as data_migration_test_runner;
+
+Future<void> main() async {
+  data_migration_test_runner.main();
+  // uncategorized
+  uncategorized_test_runner.main();
+
+  // workspace
+  workspace_test_runner.main();
+
+  // document
+  document_test_runner.main();
+
+  // sidebar
+  sidebar_move_page_test.main();
+
+}

frontend/appflowy_flutter/integration_test/desktop/cloud/data_migration/anon_user_data_migration_test.dart

@@ -24,16 +24,16 @@ import 'package:integration_test/integration_test.dart';
 import 'package:intl/intl.dart';
 import 'package:path/path.dart' as p;
 
-import '../desktop/board/board_hide_groups_test.dart';
-import '../shared/dir.dart';
-import '../shared/mock/mock_file_picker.dart';
-import '../shared/util.dart';
+import '../../../shared/dir.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
+import '../../board/board_hide_groups_test.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   group('appflowy cloud', () {
-    testWidgets('anon user and then sign in', (tester) async {
+    testWidgets('anon user -> sign in -> open imported space', (tester) async {
       await tester.initializeAppFlowy(
         cloudType: AuthenticatorType.appflowyCloudSelfHost,
       );
@@ -42,6 +42,10 @@ void main() {
       await tester.tapAnonymousSignInButton();
       await tester.expectToSeeHomePageWithGetStartedPage();
 
+      const pageName = 'Test Document';
+      await tester.createNewPageWithNameUnderParent(name: pageName);
+      tester.expectToSeePageName(pageName);
+
       // rename the name of the anon user
       await tester.openSettings();
       await tester.openSettingsPage(SettingsPage.account);
@@ -60,20 +64,16 @@ void main() {
 
       // sign up with Google
       await tester.tapGoogleLoginInButton();
+      // await tester.pumpAndSettle(const Duration(seconds: 16));
 
-      // sign out
+      // open the imported space
       await tester.expectToSeeHomePage();
-      await tester.openSettings();
-      await tester.openSettingsPage(SettingsPage.account);
+      await tester.clickSpaceHeader();
 
-      // Scroll to sign-out
-      await tester.scrollUntilVisible(
-        find.byType(AccountSignInOutButton),
-        100,
-        scrollable: find.findSettingsScrollable(),
-      );
+      // After import the anon user data, we will create a new space for it
+      await tester.openSpace("Getting started");
+      await tester.openPage(pageName);
 
-      await tester.logout();
       await tester.pumpAndSettle();
     });
   });

frontend/appflowy_flutter/integration_test/desktop/cloud/data_migration/data_migration_test_runner.dart

@@ -0,0 +1,5 @@
+import 'anon_user_data_migration_test.dart' as anon_user_test;
+
+void main() async {
+  anon_user_test.main();
+}

frontend/appflowy_flutter/integration_test/desktop/cloud/document/document_option_actions_test.dart

@@ -0,0 +1,146 @@
+import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/drag_to_reorder/draggable_option_button.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../../shared/constants.dart';
+import '../../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('document option actions:', () {
+    testWidgets('drag block to the top', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloudSelfHost,
+      );
+      await tester.tapGoogleLoginInButton();
+      await tester.expectToSeeHomePageWithGetStartedPage();
+
+      // open getting started page
+      await tester.openPage(Constants.gettingStartedPageName);
+
+      // before move
+      final beforeMoveBlock = tester.editor.getNodeAtPath([1]);
+
+      // move the desktop guide to the top, above the getting started
+      await tester.editor.dragBlock(
+        [1],
+        const Offset(20, -80),
+      );
+
+      // wait for the move animation to complete
+      await tester.pumpAndSettle(Durations.short1);
+
+      // check if the block is moved to the top
+      final afterMoveBlock = tester.editor.getNodeAtPath([0]);
+      expect(afterMoveBlock.delta, beforeMoveBlock.delta);
+    });
+
+    testWidgets('drag block to other block\'s child', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloudSelfHost,
+      );
+      await tester.tapGoogleLoginInButton();
+      await tester.expectToSeeHomePageWithGetStartedPage();
+
+      // open getting started page
+      await tester.openPage(Constants.gettingStartedPageName);
+
+      // before move
+      final beforeMoveBlock = tester.editor.getNodeAtPath([10]);
+
+      // move the checkbox to the child of the block at path [9]
+      await tester.editor.dragBlock(
+        [10],
+        const Offset(80, -30),
+      );
+
+      // wait for the move animation to complete
+      await tester.pumpAndSettle(Durations.short1);
+
+      // check if the block is moved to the child of the block at path [9]
+      final afterMoveBlock = tester.editor.getNodeAtPath([9, 0]);
+      expect(afterMoveBlock.delta, beforeMoveBlock.delta);
+    });
+
+    // Copy link to block feature is disable temporarily, enable this test when the feature is ready.
+    // testWidgets('copy block link', (tester) async {
+    //   await tester.initializeAppFlowy(
+    //     cloudType: AuthenticatorType.appflowyCloudSelfHost,
+    //   );
+    //   await tester.tapGoogleLoginInButton();
+    //   await tester.expectToSeeHomePageWithGetStartedPage();
+
+    //   // open getting started page
+    //   await tester.openPage(Constants.gettingStartedPageName);
+
+    //   // hover and click on the option menu button beside the block component.
+    //   await tester.editor.hoverAndClickOptionMenuButton([0]);
+
+    //   // click the copy link to block option
+    //   await tester.tap(
+    //     find.findTextInFlowyText(
+    //       LocaleKeys.document_plugins_optionAction_copyLinkToBlock.tr(),
+    //     ),
+    //   );
+    //   await tester.pumpAndSettle(Durations.short1);
+
+    //   // check the clipboard
+    //   final content = await Clipboard.getData(Clipboard.kTextPlain);
+    //   expect(
+    //     content?.text,
+    //     matches(
+    //       r'^https:\/\/appflowy\.com\/app\/[a-f0-9-]{36}\/[a-f0-9-]{36}\?blockId=[A-Za-z0-9_-]+$',
+    //     ),
+    //   );
+    // });
+
+    testWidgets('hover on the block and delete it', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloudSelfHost,
+      );
+      await tester.tapGoogleLoginInButton();
+      await tester.expectToSeeHomePageWithGetStartedPage();
+
+      // open getting started page
+      await tester.openPage(Constants.gettingStartedPageName);
+
+      // before delete
+      final path = [1];
+      final beforeDeletedBlock = tester.editor.getNodeAtPath(path);
+
+      // hover on the block and delete it
+      final optionButton = find.byWidgetPredicate(
+        (widget) =>
+            widget is DraggableOptionButton &&
+            widget.blockComponentContext.node.path.equals(path),
+      );
+
+      await tester.hoverOnWidget(
+        optionButton,
+        onHover: () async {
+          // click the delete button
+          await tester.tapButton(optionButton);
+        },
+      );
+      await tester.pumpAndSettle(Durations.short1);
+
+      // click the delete button
+      final deleteButton =
+          find.findTextInFlowyText(LocaleKeys.button_delete.tr());
+      await tester.tapButton(deleteButton);
+
+      // wait for the deletion
+      await tester.pumpAndSettle(Durations.short1);
+
+      // check if the block is deleted
+      final afterDeletedBlock = tester.editor.getNodeAtPath([1]);
+      expect(afterDeletedBlock.id, isNot(equals(beforeDeletedBlock.id)));
+    });
+  });
+}

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

@@ -0,0 +1,9 @@
+import 'package:integration_test/integration_test.dart';
+
+import 'document_option_actions_test.dart' as document_option_actions_test;
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  document_option_actions_test.main();
+}

frontend/appflowy_flutter/integration_test/desktop/cloud/sidebar/sidebar_move_page_test.dart

@@ -24,12 +24,12 @@ import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
 import 'package:universal_platform/universal_platform.dart';
 
-import '../../shared/constants.dart';
-import '../../shared/database_test_op.dart';
-import '../../shared/dir.dart';
-import '../../shared/emoji.dart';
-import '../../shared/mock/mock_file_picker.dart';
-import '../../shared/util.dart';
+import '../../../shared/constants.dart';
+import '../../../shared/database_test_op.dart';
+import '../../../shared/dir.dart';
+import '../../../shared/emoji.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/desktop/cloud/uncategorized/appflowy_cloud_auth_test.dart

@@ -15,8 +15,8 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
 
-import '../shared/mock/mock_file_picker.dart';
-import '../shared/util.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/desktop/cloud/uncategorized/document_sync_test.dart

@@ -17,9 +17,9 @@ 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';
+import '../../../shared/dir.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

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

@@ -2,7 +2,7 @@ import 'package:appflowy/env/cloud_env.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import '../shared/util.dart';
+import '../../../shared/util.dart';
 
 // This test is meaningless, just for preventing the CI from failing.
 void main() {

frontend/appflowy_flutter/integration_test/desktop/cloud/uncategorized/uncategorized_test_runner.dart

@@ -0,0 +1,9 @@
+import 'appflowy_cloud_auth_test.dart' as appflowy_cloud_auth_test;
+import 'empty_test.dart' as preset_af_cloud_env_test;
+import 'user_setting_sync_test.dart' as user_sync_test;
+
+void main() async {
+  preset_af_cloud_env_test.main();
+  appflowy_cloud_auth_test.main();
+  user_sync_test.main();
+}

frontend/appflowy_flutter/integration_test/desktop/cloud/uncategorized/user_setting_sync_test.dart

@@ -22,12 +22,12 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
 
-import '../desktop/board/board_hide_groups_test.dart';
-import '../shared/database_test_op.dart';
-import '../shared/dir.dart';
-import '../shared/emoji.dart';
-import '../shared/mock/mock_file_picker.dart';
-import '../shared/util.dart';
+import '../../../shared/database_test_op.dart';
+import '../../../shared/dir.dart';
+import '../../../shared/emoji.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
+import '../../board/board_hide_groups_test.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/desktop/cloud/workspace/change_name_and_icon_test.dart

@@ -15,9 +15,9 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
 
-import '../../shared/mock/mock_file_picker.dart';
-import '../../shared/util.dart';
-import '../../shared/workspace.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
+import '../../../shared/workspace.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

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

@@ -23,11 +23,11 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
 
-import '../../shared/database_test_op.dart';
-import '../../shared/dir.dart';
-import '../../shared/emoji.dart';
-import '../../shared/mock/mock_file_picker.dart';
-import '../../shared/util.dart';
+import '../../../shared/database_test_op.dart';
+import '../../../shared/dir.dart';
+import '../../../shared/emoji.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/desktop/cloud/workspace/share_menu_test.dart

@@ -0,0 +1,76 @@
+// ignore_for_file: unused_import
+
+import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
+import 'package:appflowy/plugins/shared/share/constants.dart';
+import 'package:appflowy/plugins/shared/share/share_menu.dart';
+import 'package:appflowy/shared/feature_flags.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/workspace/application/settings/prelude.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.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_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:path/path.dart' as p;
+
+import '../../../shared/constants.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
+import '../../../shared/workspace.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Share menu:', () {
+    testWidgets('share tab', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloudSelfHost,
+      );
+      await tester.tapGoogleLoginInButton();
+      await tester.expectToSeeHomePageWithGetStartedPage();
+
+      const pageName = 'Document';
+
+      await tester.createNewPageInSpace(
+        spaceName: Constants.generalSpaceName,
+        layout: ViewLayoutPB.Document,
+        pageName: pageName,
+      );
+
+      // click the share button
+      await tester.tapShareButton();
+
+      // expect the share menu is shown
+      final shareMenu = find.byType(ShareMenu);
+      expect(shareMenu, findsOneWidget);
+
+      // click the copy link button
+      final copyLinkButton = find.textContaining(
+        LocaleKeys.button_copyLink.tr(),
+      );
+      await tester.tapButton(copyLinkButton);
+
+      // read the clipboard content
+      final clipboardContent = await getIt<ClipboardService>().getData();
+      final plainText = clipboardContent.plainText;
+      expect(
+        plainText,
+        startsWith(ShareConstants.shareBaseUrl),
+      );
+
+      final shareValues = plainText!
+          .replaceAll('${ShareConstants.shareBaseUrl}/', '')
+          .split('/');
+      final workspaceId = shareValues[0];
+      expect(workspaceId, isNotEmpty);
+      final pageId = shareValues[1];
+      expect(pageId, isNotEmpty);
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/cloud/workspace/workspace_settings_test.dart

@@ -27,11 +27,11 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
 
-import '../../shared/database_test_op.dart';
-import '../../shared/dir.dart';
-import '../../shared/emoji.dart';
-import '../../shared/mock/mock_file_picker.dart';
-import '../../shared/util.dart';
+import '../../../shared/database_test_op.dart';
+import '../../../shared/dir.dart';
+import '../../../shared/emoji.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/desktop/cloud/workspace/workspace_test_runner.dart

@@ -0,0 +1,15 @@
+import 'package:integration_test/integration_test.dart';
+
+import 'change_name_and_icon_test.dart' as change_name_and_icon_test;
+import 'collaborative_workspace_test.dart' as collaborative_workspace_test;
+import 'share_menu_test.dart' as share_menu_test;
+import 'workspace_settings_test.dart' as workspace_settings_test;
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  workspace_settings_test.main();
+  share_menu_test.main();
+  collaborative_workspace_test.main();
+  change_name_and_icon_test.main();
+}

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

@@ -211,21 +211,21 @@ void main() {
       await tester.toggleIncludeTime();
 
       // Select a date
-      final today = DateTime.now();
-      await tester.selectDay(content: today.day);
+      final now = DateTime.now();
+      await tester.selectDay(content: now.day);
 
       await tester.dismissCellEditor();
 
       tester.assertCellContent(
         rowIndex: 0,
         fieldType: FieldType.DateTime,
-        content: DateFormat('MMM dd, y').format(today),
+        content: DateFormat('MMM dd, y').format(now),
       );
 
       await tester.tapCellInGrid(rowIndex: 0, fieldType: fieldType);
 
       // Toggle include time
-      final now = DateTime.now();
+      // When toggling include time, the time value is from the previous existing date time, not the current time
       await tester.toggleIncludeTime();
 
       await tester.dismissCellEditor();
@@ -299,7 +299,7 @@ void main() {
       await tester.dismissCellEditor();
 
       // Make sure the option is created and displayed in the cell
-      await tester.findSelectOptionWithNameInGrid(
+      tester.findSelectOptionWithNameInGrid(
         rowIndex: 0,
         name: 'tag 1',
       );
@@ -311,12 +311,12 @@ void main() {
       await tester.createOption(name: 'tag 2');
       await tester.dismissCellEditor();
 
-      await tester.findSelectOptionWithNameInGrid(
+      tester.findSelectOptionWithNameInGrid(
         rowIndex: 0,
         name: 'tag 2',
       );
 
-      await tester.assertNumberOfSelectedOptionsInGrid(
+      tester.assertNumberOfSelectedOptionsInGrid(
         rowIndex: 0,
         matcher: findsOneWidget,
       );
@@ -328,12 +328,12 @@ void main() {
       await tester.selectOption(name: 'tag 1');
       await tester.dismissCellEditor();
 
-      await tester.findSelectOptionWithNameInGrid(
+      tester.findSelectOptionWithNameInGrid(
         rowIndex: 0,
         name: 'tag 1',
       );
 
-      await tester.assertNumberOfSelectedOptionsInGrid(
+      tester.assertNumberOfSelectedOptionsInGrid(
         rowIndex: 0,
         matcher: findsOneWidget,
       );
@@ -345,7 +345,7 @@ void main() {
       await tester.selectOption(name: 'tag 1');
       await tester.dismissCellEditor();
 
-      await tester.assertNumberOfSelectedOptionsInGrid(
+      tester.assertNumberOfSelectedOptionsInGrid(
         rowIndex: 0,
         matcher: findsNothing,
       );
@@ -378,7 +378,7 @@ void main() {
       await tester.dismissCellEditor();
 
       // Make sure the option is created and displayed in the cell
-      await tester.findSelectOptionWithNameInGrid(
+      tester.findSelectOptionWithNameInGrid(
         rowIndex: 0,
         name: tags.first,
       );
@@ -393,13 +393,13 @@ void main() {
       await tester.dismissCellEditor();
 
       for (final tag in tags) {
-        await tester.findSelectOptionWithNameInGrid(
+        tester.findSelectOptionWithNameInGrid(
           rowIndex: 0,
           name: tag,
         );
       }
 
-      await tester.assertNumberOfSelectedOptionsInGrid(
+      tester.assertNumberOfSelectedOptionsInGrid(
         rowIndex: 0,
         matcher: findsNWidgets(4),
       );
@@ -413,7 +413,7 @@ void main() {
       }
       await tester.dismissCellEditor();
 
-      await tester.assertNumberOfSelectedOptionsInGrid(
+      tester.assertNumberOfSelectedOptionsInGrid(
         rowIndex: 0,
         matcher: findsNothing,
       );
@@ -426,16 +426,16 @@ void main() {
       await tester.selectOption(name: tags[3]);
       await tester.dismissCellEditor();
 
-      await tester.findSelectOptionWithNameInGrid(
+      tester.findSelectOptionWithNameInGrid(
         rowIndex: 0,
         name: tags[1],
       );
-      await tester.findSelectOptionWithNameInGrid(
+      tester.findSelectOptionWithNameInGrid(
         rowIndex: 0,
         name: tags[3],
       );
 
-      await tester.assertNumberOfSelectedOptionsInGrid(
+      tester.assertNumberOfSelectedOptionsInGrid(
         rowIndex: 0,
         matcher: findsNWidgets(2),
       );

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

@@ -1,5 +1,5 @@
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
-import 'package:appflowy_backend/protobuf/flowy-database2/setting_entities.pbenum.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pbenum.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
@@ -10,7 +10,7 @@ import '../../shared/util.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('database field settings', () {
+  group('grid field settings test:', () {
     testWidgets('field visibility', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
@@ -50,6 +50,15 @@ void main() {
       await tester.tapHidePropertyButtonInFieldEditor();
       await tester.dismissRowDetailPage();
       tester.noFieldWithName('New field 1');
+
+      // the field should still be sort and filter-able
+      await tester.tapDatabaseFilterButton();
+      await tester.tapCreateFilterByFieldType(
+        FieldType.RichText,
+        "New field 1",
+      );
+      await tester.tapDatabaseSortButton();
+      await tester.tapCreateSortByFieldType(FieldType.RichText, "New field 1");
     });
   });
 }

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

@@ -15,7 +15,7 @@ import '../../shared/util.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('grid field editor:', () {
+  group('grid edit field test:', () {
     testWidgets('rename existing field', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
@@ -24,7 +24,6 @@ void main() {
 
       // Invoke the field editor
       await tester.tapGridFieldWithName('Name');
-      await tester.tapEditFieldButton();
 
       await tester.renameField('hello world');
       await tester.dismissFieldEditor();
@@ -33,6 +32,32 @@ void main() {
       await tester.pumpAndSettle();
     });
 
+    testWidgets('edit field icon', (tester) async {
+      const icon = 'artificial_intelligence/ai-upscale-spark';
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Grid);
+
+      tester.assertFieldSvg('Name', FieldType.RichText);
+
+      // choose specific icon
+      await tester.tapGridFieldWithName('Name');
+      await tester.changeFieldIcon(icon);
+      await tester.dismissFieldEditor();
+
+      tester.assertFieldCustomSvg('Name', icon);
+
+      // remove icon
+      await tester.tapGridFieldWithName('Name');
+      await tester.changeFieldIcon('');
+      await tester.dismissFieldEditor();
+
+      tester.assertFieldSvg('Name', FieldType.RichText);
+
+      await tester.pumpAndSettle();
+    });
+
     testWidgets('update field type of existing field', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
@@ -126,7 +151,7 @@ void main() {
       await tester.dismissFieldEditor();
       tester.findFieldWithName('Right');
 
-      // insert new field to the right
+      // insert new field to the left
       await tester.tapGridFieldWithName('Type');
       await tester.tapInsertFieldButton(left: true, name: "Left");
       await tester.dismissFieldEditor();
@@ -245,7 +270,6 @@ void main() {
         matching: find.byType(TextField),
       );
       await tester.enterText(inputField, text);
-      await tester.pumpAndSettle();
       await tester.testTextInput.receiveAction(TextInputAction.done);
       await tester.pumpAndSettle(const Duration(milliseconds: 500));
 
@@ -357,5 +381,189 @@ void main() {
     //     content: DateFormat('dd/MM/y hh:mm a').format(modified),
     //   );
     // });
+
+    testWidgets('select option transform', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent(
+        layout: ViewLayoutPB.Grid,
+      );
+
+      // invoke the field editor of existing Single-Select field Type
+      await tester.tapGridFieldWithName('Type');
+      await tester.tapEditFieldButton();
+
+      // add some select options
+      await tester.tapAddSelectOptionButton();
+      for (final optionName in ['A', 'B', 'C']) {
+        final inputField = find.descendant(
+          of: find.byType(CreateOptionTextField),
+          matching: find.byType(TextField),
+        );
+        await tester.enterText(inputField, optionName);
+        await tester.testTextInput.receiveAction(TextInputAction.done);
+      }
+      await tester.dismissFieldEditor();
+
+      // select A in first row's cell under the Type field
+      await tester.tapCellInGrid(
+        rowIndex: 0,
+        fieldType: FieldType.SingleSelect,
+      );
+      await tester.selectOption(name: 'A');
+      await tester.dismissCellEditor();
+      tester.findSelectOptionWithNameInGrid(name: 'A', rowIndex: 0);
+
+      await tester.changeFieldTypeOfFieldWithName('Type', FieldType.RichText);
+      tester.assertCellContent(
+        rowIndex: 0,
+        fieldType: FieldType.RichText,
+        content: "A",
+        cellIndex: 1,
+      );
+
+      // add some random text in the second row
+      await tester.editCell(
+        rowIndex: 1,
+        fieldType: FieldType.RichText,
+        input: "random",
+        cellIndex: 1,
+      );
+      tester.assertCellContent(
+        rowIndex: 1,
+        fieldType: FieldType.RichText,
+        content: "random",
+        cellIndex: 1,
+      );
+
+      await tester.changeFieldTypeOfFieldWithName(
+        'Type',
+        FieldType.SingleSelect,
+      );
+      tester.findSelectOptionWithNameInGrid(name: 'A', rowIndex: 0);
+      tester.assertNumberOfSelectedOptionsInGrid(
+        rowIndex: 1,
+        matcher: findsNothing,
+      );
+
+      // create a new field for testing
+      await tester.createField(FieldType.RichText, name: 'Test');
+
+      // edit the first 2 rows
+      await tester.editCell(
+        rowIndex: 0,
+        fieldType: FieldType.RichText,
+        input: "E,F",
+        cellIndex: 1,
+      );
+      await tester.editCell(
+        rowIndex: 1,
+        fieldType: FieldType.RichText,
+        input: "G",
+        cellIndex: 1,
+      );
+
+      await tester.changeFieldTypeOfFieldWithName(
+        'Test',
+        FieldType.MultiSelect,
+      );
+      tester.assertMultiSelectOption(contents: ['E', 'F'], rowIndex: 0);
+      tester.assertMultiSelectOption(contents: ['G'], rowIndex: 1);
+
+      await tester.tapCellInGrid(
+        rowIndex: 2,
+        fieldType: FieldType.MultiSelect,
+      );
+      await tester.selectOption(name: 'G');
+      await tester.createOption(name: 'H');
+      await tester.dismissCellEditor();
+      tester.findSelectOptionWithNameInGrid(name: 'A', rowIndex: 0);
+      tester.assertMultiSelectOption(contents: ['G', 'H'], rowIndex: 2);
+
+      await tester.changeFieldTypeOfFieldWithName(
+        'Test',
+        FieldType.RichText,
+      );
+      tester.assertCellContent(
+        rowIndex: 2,
+        fieldType: FieldType.RichText,
+        content: "G,H",
+        cellIndex: 1,
+      );
+      await tester.changeFieldTypeOfFieldWithName(
+        'Test',
+        FieldType.MultiSelect,
+      );
+
+      tester.assertMultiSelectOption(contents: ['E', 'F'], rowIndex: 0);
+      tester.assertMultiSelectOption(contents: ['G'], rowIndex: 1);
+      tester.assertMultiSelectOption(contents: ['G', 'H'], rowIndex: 2);
+    });
+
+    testWidgets('date time transform', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Grid);
+      await tester.scrollToRight(find.byType(GridPage));
+
+      // create a date field
+      await tester.createField(FieldType.DateTime);
+
+      // edit the first date cell
+      await tester.tapCellInGrid(rowIndex: 0, fieldType: FieldType.DateTime);
+      await tester.toggleIncludeTime();
+      final now = DateTime.now();
+      await tester.selectDay(content: now.day);
+
+      await tester.dismissCellEditor();
+
+      tester.assertCellContent(
+        rowIndex: 0,
+        fieldType: FieldType.DateTime,
+        content: DateFormat('MMM dd, y HH:mm').format(now),
+      );
+
+      await tester.changeFieldTypeOfFieldWithName(
+        'Date',
+        FieldType.RichText,
+      );
+      tester.assertCellContent(
+        rowIndex: 0,
+        fieldType: FieldType.RichText,
+        content: DateFormat('MMM dd, y HH:mm').format(now),
+        cellIndex: 1,
+      );
+
+      await tester.editCell(
+        rowIndex: 1,
+        fieldType: FieldType.RichText,
+        input: "Oct 5, 2024",
+        cellIndex: 1,
+      );
+      tester.assertCellContent(
+        rowIndex: 1,
+        fieldType: FieldType.RichText,
+        content: "Oct 5, 2024",
+        cellIndex: 1,
+      );
+
+      await tester.changeFieldTypeOfFieldWithName(
+        'Date',
+        FieldType.DateTime,
+      );
+      tester.assertCellContent(
+        rowIndex: 0,
+        fieldType: FieldType.DateTime,
+        content: DateFormat('MMM dd, y').format(now),
+        // content: DateFormat('MMM dd, y HH:mm').format(now),
+      );
+      tester.assertCellContent(
+        rowIndex: 1,
+        fieldType: FieldType.DateTime,
+        content: "Oct 05, 2024",
+      );
+    });
   });
 }

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

@@ -1,10 +1,14 @@
+import 'package:appflowy/plugins/database/application/field/filter_entities.dart';
+import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checkbox.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/text.dart';
-import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.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();
@@ -138,5 +142,58 @@ void main() {
 
       await tester.pumpAndSettle();
     });
+
+    testWidgets('add date filter', (tester) async {
+      await tester.openTestDatabase(v020GridFileName);
+
+      // create a filter
+      await tester.tapDatabaseFilterButton();
+      await tester.tapCreateFilterByFieldType(FieldType.DateTime, 'date');
+
+      // By default, the condition of date filter is current day and time
+      tester.assertNumberOfRowsInGridPage(0);
+
+      await tester.tapFilterButtonInGrid('date');
+      await tester.tapDateFilterButtonInGrid();
+      await tester.tapDateFilterCondition(DateTimeFilterCondition.before);
+      tester.assertNumberOfRowsInGridPage(7);
+
+      await tester.tapDateFilterButtonInGrid();
+      await tester.tapDateFilterCondition(DateTimeFilterCondition.isEmpty);
+      tester.assertNumberOfRowsInGridPage(3);
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('add timestamp filter', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Grid);
+
+      await tester.scrollToRight(find.byType(GridPage));
+
+      await tester.createField(
+        FieldType.CreatedTime,
+        name: 'Created at',
+      );
+
+      // create a filter
+      await tester.tapDatabaseFilterButton();
+      await tester.tapCreateFilterByFieldType(
+        FieldType.CreatedTime,
+        'Created at',
+      );
+      await tester.pumpAndSettle();
+
+      tester.assertNumberOfRowsInGridPage(3);
+
+      await tester.tapFilterButtonInGrid('Created at');
+      await tester.tapDateFilterButtonInGrid();
+      await tester.tapDateFilterCondition(DateTimeFilterCondition.before);
+      tester.assertNumberOfRowsInGridPage(0);
+
+      await tester.pumpAndSettle();
+    });
   });
 }

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

@@ -1,19 +1,18 @@
 import 'dart:io';
 
-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/database/widgets/card/card.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/media_cell_editor.dart';
 import 'package:appflowy/plugins/database/widgets/row/row_banner.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/shared/af_image.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pbenum.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';
 import 'package:path/path.dart' as p;

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

@@ -115,7 +115,7 @@ void main() {
         [],
       ];
       for (final (index, contents) in multiSelectCells.indexed) {
-        await tester.assertMultiSelectOption(
+        tester.assertMultiSelectOption(
           rowIndex: index,
           contents: contents,
         );

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

@@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/database/grid/presentation/widgets/sort/sort_editor.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
@@ -7,8 +8,8 @@ import '../../shared/database_test_op.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('grid', () {
-    testWidgets('add text sort', (tester) async {
+  group('grid sort:', () {
+    testWidgets('text sort', (tester) async {
       await tester.openTestDatabase(v020GridFileName);
       // create a sort
       await tester.tapDatabaseSortButton();
@@ -37,7 +38,7 @@ void main() {
 
       // open the sort menu and select order by descending
       await tester.tapSortMenuInSettingBar();
-      await tester.tapSortButtonByName('Name');
+      await tester.tapEditSortConditionButtonByFieldName('Name');
       await tester.tapSortByDescending();
       for (final (index, content) in <String>[
         'E',
@@ -84,7 +85,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('add checkbox sort', (tester) async {
+    testWidgets('checkbox', (tester) async {
       await tester.openTestDatabase(v020GridFileName);
       // create a sort
       await tester.tapDatabaseSortButton();
@@ -111,7 +112,7 @@ void main() {
 
       // open the sort menu and select order by descending
       await tester.tapSortMenuInSettingBar();
-      await tester.tapSortButtonByName('Done');
+      await tester.tapEditSortConditionButtonByFieldName('Done');
       await tester.tapSortByDescending();
       for (final (index, content) in <bool>[
         true,
@@ -134,7 +135,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('add number sort', (tester) async {
+    testWidgets('number', (tester) async {
       await tester.openTestDatabase(v020GridFileName);
       // create a sort
       await tester.tapDatabaseSortButton();
@@ -162,7 +163,7 @@ void main() {
 
       // open the sort menu and select order by descending
       await tester.tapSortMenuInSettingBar();
-      await tester.tapSortButtonByName('number');
+      await tester.tapEditSortConditionButtonByFieldName('number');
       await tester.tapSortByDescending();
       for (final (index, content) in <String>[
         '12',
@@ -186,7 +187,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('add checkbox and number sort', (tester) async {
+    testWidgets('checkbox and number', (tester) async {
       await tester.openTestDatabase(v020GridFileName);
       // create a sort
       await tester.tapDatabaseSortButton();
@@ -194,7 +195,7 @@ void main() {
 
       // open the sort menu and sort checkbox by descending
       await tester.tapSortMenuInSettingBar();
-      await tester.tapSortButtonByName('Done');
+      await tester.tapEditSortConditionButtonByFieldName('Done');
       await tester.tapSortByDescending();
       for (final (index, content) in <bool>[
         true,
@@ -220,7 +221,7 @@ void main() {
         FieldType.Number,
         'number',
       );
-      await tester.tapSortButtonByName('number');
+      await tester.tapEditSortConditionButtonByFieldName('number');
       await tester.tapSortByDescending();
 
       // check checkbox cell order
@@ -273,7 +274,7 @@ void main() {
 
       // open the sort menu and sort checkbox by descending
       await tester.tapSortMenuInSettingBar();
-      await tester.tapSortButtonByName('Done');
+      await tester.tapEditSortConditionButtonByFieldName('Done');
       await tester.tapSortByDescending();
 
       // add another sort, this time by number descending
@@ -282,7 +283,7 @@ void main() {
         FieldType.Number,
         'number',
       );
-      await tester.tapSortButtonByName('number');
+      await tester.tapEditSortConditionButtonByFieldName('number');
       await tester.tapSortByDescending();
 
       // check checkbox cell order
@@ -370,5 +371,101 @@ void main() {
         );
       }
     });
+
+    testWidgets('edit field', (tester) async {
+      await tester.openTestDatabase(v020GridFileName);
+
+      // create a number sort
+      await tester.tapDatabaseSortButton();
+      await tester.tapCreateSortByFieldType(FieldType.Number, 'number');
+
+      // check the number cell order
+      for (final (index, content) in <String>[
+        '-2',
+        '-1',
+        '0.1',
+        '0.2',
+        '1',
+        '2',
+        '10',
+        '11',
+        '12',
+        '',
+      ].indexed) {
+        tester.assertCellContent(
+          rowIndex: index,
+          fieldType: FieldType.Number,
+          content: content,
+        );
+      }
+
+      final textCells = <String>[
+        'B',
+        'A',
+        'C',
+        'D',
+        'E',
+        '',
+        '',
+        '',
+        '',
+        '',
+      ];
+      for (final (index, content) in textCells.indexed) {
+        tester.assertCellContent(
+          rowIndex: index,
+          fieldType: FieldType.RichText,
+          content: content,
+        );
+      }
+
+      // edit the name of the number field
+      await tester.tapGridFieldWithName('number');
+
+      await tester.renameField('hello world');
+      await tester.dismissFieldEditor();
+
+      await tester.tapGridFieldWithName('hello world');
+      await tester.dismissFieldEditor();
+
+      // expect name to be changed as well
+      await tester.tapSortMenuInSettingBar();
+      final sortItem = find.ancestor(
+        of: find.text('hello world'),
+        matching: find.byType(DatabaseSortItem),
+      );
+      expect(sortItem, findsOneWidget);
+
+      // change the field type of the field to checkbox
+      await tester.tapGridFieldWithName('hello world');
+      await tester.changeFieldTypeOfFieldWithName(
+        'hello world',
+        FieldType.Checkbox,
+      );
+
+      // expect name to be changed as well
+      await tester.tapSortMenuInSettingBar();
+      expect(sortItem, findsOneWidget);
+
+      final newTextCells = <String>[
+        'A',
+        'B',
+        'C',
+        'D',
+        'E',
+        '',
+        '',
+        '',
+        '',
+        '',
+      ];
+      for (final (index, content) in newTextCells.indexed) {
+        tester.assertCellContent(
+          rowIndex: index,
+          fieldType: FieldType.RichText,
+          content: content,
+        );
+      }
+    });
   });
 }

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

@@ -0,0 +1,72 @@
+import 'dart:ui';
+
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/util.dart';
+
+void main() {
+  final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Editor AppLifeCycle tests', () {
+    testWidgets(
+      'Selection is added back after pausing AppFlowy',
+      (tester) async {
+        await tester.initializeAppFlowy();
+        await tester.tapAnonymousSignInButton();
+
+        final selection = Selection.single(path: [4], startOffset: 0);
+        await tester.editor.updateSelection(selection);
+
+        binding.handleAppLifecycleStateChanged(AppLifecycleState.inactive);
+        expect(tester.editor.getCurrentEditorState().selection, null);
+
+        binding.handleAppLifecycleStateChanged(AppLifecycleState.resumed);
+        await tester.pumpAndSettle();
+
+        expect(tester.editor.getCurrentEditorState().selection, selection);
+      },
+    );
+
+    testWidgets(
+      'Null selection is retained after pausing AppFlowy',
+      (tester) async {
+        await tester.initializeAppFlowy();
+        await tester.tapAnonymousSignInButton();
+
+        final selection = Selection.single(path: [4], startOffset: 0);
+        await tester.editor.updateSelection(selection);
+        await tester.editor.updateSelection(null);
+
+        binding.handleAppLifecycleStateChanged(AppLifecycleState.inactive);
+        expect(tester.editor.getCurrentEditorState().selection, null);
+
+        binding.handleAppLifecycleStateChanged(AppLifecycleState.resumed);
+        await tester.pumpAndSettle();
+
+        expect(tester.editor.getCurrentEditorState().selection, null);
+      },
+    );
+
+    testWidgets(
+      'Non-collapsed selection is retained after pausing AppFlowy',
+      (tester) async {
+        await tester.initializeAppFlowy();
+        await tester.tapAnonymousSignInButton();
+
+        final selection = Selection(
+          start: Position(path: [3]),
+          end: Position(path: [3], offset: 8),
+        );
+        await tester.editor.updateSelection(selection);
+
+        binding.handleAppLifecycleStateChanged(AppLifecycleState.inactive);
+        binding.handleAppLifecycleStateChanged(AppLifecycleState.resumed);
+        await tester.pumpAndSettle();
+
+        expect(tester.editor.getCurrentEditorState().selection, selection);
+      },
+    );
+  });
+}

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

@@ -13,13 +13,15 @@ import '../../shared/util.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('paste in codeblock', () {
+  group('paste in codeblock:', () {
     testWidgets('paste multiple lines in codeblock', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
 
       // create a new document
-      await tester.createNewPageWithNameUnderParent();
+      await tester.createNewPageWithNameUnderParent(name: 'Test Document');
+      // focus on the editor
+      await tester.tapButton(find.byType(AppFlowyEditor));
 
       // mock the clipboard
       const lines = 3;

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

@@ -1,12 +1,19 @@
 import 'dart:io';
 
+import 'package:flutter/services.dart';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/block_menu/block_menu_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.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/link_preview/custom_link_preview.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:easy_localization/easy_localization.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
+import 'package:universal_platform/universal_platform.dart';
 
 import '../../shared/util.dart';
 
@@ -226,15 +233,14 @@ void main() {
   });
 
   testWidgets('paste image(gif) from memory', (tester) async {
-    // It's not supported yet.
-    // final image = await rootBundle.load('assets/test/images/sample.gif');
-    // final bytes = image.buffer.asUint8List();
-    // await tester.pasteContent(image: ('gif', bytes), (editorState) {
-    //   expect(editorState.document.root.children.length, 2);
-    //   final node = editorState.getNodeAtPath([0])!;
-    //   expect(node.type, ImageBlockKeys.type);
-    //   expect(node.attributes[ImageBlockKeys.url], isNotNull);
-    // });
+    final image = await rootBundle.load('assets/test/images/sample.gif');
+    final bytes = image.buffer.asUint8List();
+    await tester.pasteContent(image: ('gif', bytes), (editorState) {
+      expect(editorState.document.root.children.length, 1);
+      final node = editorState.getNodeAtPath([0])!;
+      expect(node.type, ImageBlockKeys.type);
+      expect(node.attributes[ImageBlockKeys.url], isNotNull);
+    });
   });
 
   testWidgets(
@@ -312,15 +318,155 @@ void main() {
     'auto convert url to link preview block',
     (tester) async {
       const url = 'https://appflowy.io';
-      await tester.pasteContent(plainText: url, (editorState) {
+      await tester.pasteContent(plainText: url, (editorState) async {
         // the second one is the paragraph node
         expect(editorState.document.root.children.length, 2);
         final node = editorState.getNodeAtPath([0])!;
         expect(node.type, LinkPreviewBlockKeys.type);
         expect(node.attributes[LinkPreviewBlockKeys.url], url);
       });
+
+      // hover on the link preview block
+      // click the more button
+      // and select convert to link
+      await tester.hoverOnWidget(
+        find.byType(CustomLinkPreviewWidget),
+        onHover: () async {
+          final convertToLinkButton = find.byWidgetPredicate((widget) {
+            return widget is MenuBlockButton &&
+                widget.tooltip ==
+                    LocaleKeys.document_plugins_urlPreview_convertToLink.tr();
+          });
+          expect(convertToLinkButton, findsOneWidget);
+          await tester.tap(convertToLinkButton);
+          await tester.pumpAndSettle();
+        },
+      );
+
+      await tester.pumpAndSettle();
+
+      final editorState = tester.editor.getCurrentEditorState();
+      final textNode = editorState.getNodeAtPath([0])!;
+      expect(textNode.type, ParagraphBlockKeys.type);
+      expect(textNode.delta!.toJson(), [
+        {
+          'insert': url,
+          'attributes': {'href': url},
+        }
+      ]);
     },
   );
+
+  testWidgets(
+    'ctrl/cmd+z to undo the auto convert url to link preview block',
+    (tester) async {
+      const url = 'https://appflowy.io';
+      await tester.pasteContent(plainText: url, (editorState) async {
+        // the second one is the paragraph node
+        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.editor.tapLineOfEditorAt(0);
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isControlPressed:
+            UniversalPlatform.isLinux || UniversalPlatform.isWindows,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      final editorState = tester.editor.getCurrentEditorState();
+      final node = editorState.getNodeAtPath([0])!;
+      expect(node.type, ParagraphBlockKeys.type);
+      expect(node.delta!.toJson(), [
+        {
+          'insert': url,
+          'attributes': {'href': url},
+        }
+      ]);
+    },
+  );
+
+  testWidgets(
+    'paste the nodes start with non-delta node',
+    (tester) async {
+      await tester.pasteContent((_) {});
+      const text = 'Hello World';
+      final editorState = tester.editor.getCurrentEditorState();
+      final transaction = editorState.transaction;
+      // [image_block]
+      // [paragraph_block]
+      transaction.insertNodes([
+        0,
+      ], [
+        customImageNode(url: ''),
+        paragraphNode(text: text),
+      ]);
+      await editorState.apply(transaction);
+      await tester.pumpAndSettle();
+
+      await tester.editor.tapLineOfEditorAt(0);
+      // select all and copy
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyA,
+        isControlPressed:
+            UniversalPlatform.isLinux || UniversalPlatform.isWindows,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyC,
+        isControlPressed:
+            UniversalPlatform.isLinux || UniversalPlatform.isWindows,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+
+      // put the cursor to the end of the paragraph block
+      await tester.editor.tapLineOfEditorAt(0);
+
+      // paste the content
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed:
+            UniversalPlatform.isLinux || UniversalPlatform.isWindows,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      // expect the image and the paragraph block are inserted below the cursor
+      expect(editorState.getNodeAtPath([0])!.type, CustomImageBlockKeys.type);
+      expect(editorState.getNodeAtPath([1])!.type, ParagraphBlockKeys.type);
+      expect(editorState.getNodeAtPath([2])!.type, CustomImageBlockKeys.type);
+      expect(editorState.getNodeAtPath([3])!.type, ParagraphBlockKeys.type);
+    },
+  );
+
+  testWidgets('paste the url without protocol', (tester) async {
+    // paste the image that from local file
+    const plainText = '1.jpg';
+    final image = await rootBundle.load('assets/test/images/sample.jpeg');
+    final bytes = image.buffer.asUint8List();
+    await tester.pasteContent(plainText: plainText, image: ('jpeg', bytes),
+        (editorState) {
+      final node = editorState.getNodeAtPath([0])!;
+      expect(node.type, ImageBlockKeys.type);
+      expect(node.attributes[ImageBlockKeys.url], isNotEmpty);
+    });
+  });
+
+  testWidgets('paste the image url', (tester) async {
+    const plainText = 'https://appflowy.io/1.jpg';
+    final image = await rootBundle.load('assets/test/images/sample.jpeg');
+    final bytes = image.buffer.asUint8List();
+    await tester.pasteContent(plainText: plainText, image: ('jpeg', bytes),
+        (editorState) {
+      final node = editorState.getNodeAtPath([0])!;
+      expect(node.type, ImageBlockKeys.type);
+      expect(node.attributes[ImageBlockKeys.url], isNotEmpty);
+    });
+  });
 }
 
 extension on WidgetTester {
@@ -336,7 +482,9 @@ extension on WidgetTester {
     await tapAnonymousSignInButton();
 
     // create a new document
-    await createNewPageWithNameUnderParent();
+    await createNewPageWithNameUnderParent(name: 'Test Document');
+    // tap the editor
+    await tapButton(find.byType(AppFlowyEditor));
 
     await beforeTest?.call(editor.getCurrentEditorState());
 

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

@@ -1,6 +1,4 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -17,12 +15,11 @@ void main() {
       await tester.tapAnonymousSignInButton();
 
       // create a new document
-      await tester.createNewPageWithNameUnderParent();
+      const pageName = 'Test Document';
+      await tester.createNewPageWithNameUnderParent(name: pageName);
 
       // expect to see a new document
-      tester.expectToSeePageName(
-        LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-      );
+      tester.expectToSeePageName(pageName);
       // and with one paragraph block
       expect(find.byType(ParagraphBlockComponentWidget), findsOneWidget);
     });

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

@@ -0,0 +1,61 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('customer:', () {
+    testWidgets('backtick issue - inline code', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      const pageName = 'backtick issue';
+      await tester.createNewPageWithNameUnderParent(name: pageName);
+
+      // focus on the editor
+      await tester.tap(find.byType(AppFlowyEditor));
+      // input backtick
+      const text = '`Hello` AppFlowy';
+
+      for (var i = 0; i < text.length; i++) {
+        await tester.ime.insertCharacter(text[i]);
+      }
+
+      final node = tester.editor.getNodeAtPath([0]);
+      expect(
+        node.delta?.toJson(),
+        equals([
+          {
+            "insert": "Hello",
+            "attributes": {"code": true},
+          },
+          {"insert": " AppFlowy"},
+        ]),
+      );
+    });
+
+    testWidgets('backtick issue - inline code', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      const pageName = 'backtick issue';
+      await tester.createNewPageWithNameUnderParent(name: pageName);
+
+      // focus on the editor
+      await tester.tap(find.byType(AppFlowyEditor));
+      // input backtick
+      const text = '```';
+
+      for (var i = 0; i < text.length; i++) {
+        await tester.ime.insertCharacter(text[i]);
+      }
+
+      final node = tester.editor.getNodeAtPath([0]);
+      expect(node.type, equals(CodeBlockKeys.type));
+    });
+  });
+}

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

@@ -0,0 +1,51 @@
+import 'package:appflowy_editor/appflowy_editor.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('document selection:', () {
+    testWidgets('select text from start to end by pan gesture ',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent();
+
+      final editor = tester.editor;
+      final editorState = editor.getCurrentEditorState();
+      // insert a paragraph
+      final transaction = editorState.transaction;
+      transaction.insertNode(
+        [0],
+        paragraphNode(
+          text:
+              '''Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.''',
+        ),
+      );
+      await editorState.apply(transaction);
+      await tester.pumpAndSettle(Durations.short1);
+
+      final textBlocks = find.byType(AppFlowyRichText);
+      final topLeft = tester.getTopLeft(textBlocks.at(0));
+
+      final gesture = await tester.startGesture(
+        topLeft,
+        pointer: 7,
+      );
+      await tester.pumpAndSettle();
+
+      for (var i = 0; i < 10; i++) {
+        await gesture.moveBy(const Offset(10, 0));
+        await tester.pump(Durations.short1);
+      }
+
+      expect(editorState.selection!.start.offset, 0);
+    });
+  });
+}

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

@@ -0,0 +1,140 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:universal_platform/universal_platform.dart';
+
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('document shortcuts:', () {
+    testWidgets('custom cut command', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      const pageName = 'Test Document Shortcuts';
+      await tester.createNewPageWithNameUnderParent(name: pageName);
+
+      // focus on the editor
+      await tester.tap(find.byType(AppFlowyEditor));
+
+      // mock the data
+      final editorState = tester.editor.getCurrentEditorState();
+      final transaction = editorState.transaction;
+      const text1 = '1. First line';
+      const text2 = '2. Second line';
+      transaction.insertNodes([
+        0,
+      ], [
+        paragraphNode(text: text1),
+        paragraphNode(text: text2),
+      ]);
+      await editorState.apply(transaction);
+      await tester.pumpAndSettle();
+
+      // focus on the end of the first line
+      await tester.editor.updateSelection(
+        Selection.collapsed(
+          Position(path: [0], offset: text1.length),
+        ),
+      );
+      // press the keybinding
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyX,
+        isControlPressed: !UniversalPlatform.isMacOS,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      // check the clipboard
+      final clipboard = await Clipboard.getData(Clipboard.kTextPlain);
+      expect(
+        clipboard?.text,
+        equals(text1),
+      );
+
+      final node = tester.editor.getNodeAtPath([0]);
+      expect(
+        node.delta?.toPlainText(),
+        equals(text2),
+      );
+
+      // select the whole line
+      await tester.editor.updateSelection(
+        Selection.single(
+          path: [0],
+          startOffset: 0,
+          endOffset: text2.length,
+        ),
+      );
+
+      // press the keybinding
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyX,
+        isControlPressed: !UniversalPlatform.isMacOS,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      // all the text should be deleted
+      expect(
+        node.delta?.toPlainText(),
+        equals(''),
+      );
+
+      final clipboard2 = await Clipboard.getData(Clipboard.kTextPlain);
+      expect(
+        clipboard2?.text,
+        equals(text2),
+      );
+    });
+
+    testWidgets(
+        'custom copy command - copy whole line when selection is collapsed',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      const pageName = 'Test Document Shortcuts';
+      await tester.createNewPageWithNameUnderParent(name: pageName);
+
+      // focus on the editor
+      await tester.tap(find.byType(AppFlowyEditor));
+
+      // mock the data
+      final editorState = tester.editor.getCurrentEditorState();
+      final transaction = editorState.transaction;
+      const text1 = '1. First line';
+      transaction.insertNodes([
+        0,
+      ], [
+        paragraphNode(text: text1),
+      ]);
+      await editorState.apply(transaction);
+      await tester.pumpAndSettle();
+
+      // focus on the end of the first line
+      await tester.editor.updateSelection(
+        Selection.collapsed(
+          Position(path: [0], offset: text1.length),
+        ),
+      );
+      // press the keybinding
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyC,
+        isControlPressed: !UniversalPlatform.isMacOS,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      // check the clipboard
+      final clipboard = await Clipboard.getData(Clipboard.kTextPlain);
+      expect(
+        clipboard?.text,
+        equals(text1),
+      );
+    });
+  });
+}

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

@@ -0,0 +1,607 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/sub_page/sub_page_block_component.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:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/util.dart';
+
+// Test cases for the Document SubPageBlock that needs to be covered:
+// - [x] Insert a new SubPageBlock from Slash menu items (Expect it will create a child view under current view)
+// - [x] Delete a SubPageBlock from Block Action Menu (Expect the view is moved to trash / deleted)
+// - [x] Delete a SubPageBlock with backspace when selected (Expect the view is moved to trash / deleted)
+// - [x] Copy+paste a SubPageBlock in same Document (Expect a new view is created under current view with same content and name)
+// - [x] Copy+paste a SubPageBlock in different Document (Expect a new view is created under current view with same content and name)
+// - [x] Cut+paste a SubPageBlock in same Document (Expect the view to be deleted on Cut, and brought back on Paste)
+// - [x] Cut+paste a SubPageBlock in different Document (Expect the view to be deleted on Cut, and brought back on Paste)
+// - [x] Undo adding a SubPageBlock (Expect the view to be deleted)
+// - [x] Undo delete of a SubPageBlock (Expect the view to be brought back to original position)
+// - [x] Redo adding a SubPageBlock (Expect the view to be restored)
+// - [x] Redo delete of a SubPageBlock (Expect the view to be moved to trash again)
+// - [x] Renaming a child view (Expect the view name to be updated in the document)
+// - [x] Deleting a view (to trash) linked to a SubPageBlock shows a hint that the view is in trash (Expect a hint to be shown)
+// - [x] Deleting a view (in trash) linked to a SubPageBlock deletes the SubPageBlock (Expect the SubPageBlock to be deleted)
+// - [x] Duplicating a SubPageBlock node from Action Menu (Expect a new view is created under current view with same content and name + (copy))
+// - [x] Dragging a SubPageBlock node to a new position in the document (Expect everything to be normal)
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Document SubPageBlock tests', () {
+    testWidgets('Insert a new SubPageBlock from Slash menu items',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      expect(
+        find.text(LocaleKeys.menuAppHeader_defaultNewPageName.tr()),
+        findsNWidgets(3),
+      );
+    });
+
+    testWidgets('Rename and then Delete a SubPageBlock from Block Action Menu',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor.hoverAndClickOptionMenuButton([0]);
+
+      await tester.tapButtonWithName(LocaleKeys.button_delete.tr());
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNothing);
+    });
+
+    testWidgets('Copy+paste a SubPageBlock in same Document', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor.hoverAndClickOptionAddButton([0], false);
+      await tester.editor.tapLineOfEditorAt(1);
+
+      // This is a workaround to allow CTRL+A and CTRL+C to work to copy
+      // the SubPageBlock as well.
+      await tester.ime.insertText('ABC');
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyA,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyC,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      await tester.editor.hoverAndClickOptionAddButton([1], false);
+      await tester.editor.tapLineOfEditorAt(2);
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle(const Duration(seconds: 5));
+
+      expect(find.byType(SubPageBlockComponent), findsNWidgets(2));
+      expect(find.text('Child page'), findsNWidgets(2));
+      expect(find.text('Child page (copy)'), findsNWidgets(2));
+    });
+
+    testWidgets('Copy+paste a SubPageBlock in different Document',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor.hoverAndClickOptionAddButton([0], false);
+      await tester.editor.tapLineOfEditorAt(1);
+
+      // This is a workaround to allow CTRL+A and CTRL+C to work to copy
+      // the SubPageBlock as well.
+      await tester.ime.insertText('ABC');
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyA,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyC,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock-2');
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock-2',
+        layout: ViewLayoutPB.Document,
+      );
+
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+      expect(find.text('Child page'), findsOneWidget);
+      expect(find.text('Child page (copy)'), findsNWidgets(2));
+    });
+
+    testWidgets('Cut+paste a SubPageBlock in same Document', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor
+          .updateSelection(Selection.single(path: [0], startOffset: 0));
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyX,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(SubPageBlockComponent), findsNothing);
+      expect(find.text('Child page'), findsNothing);
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+      expect(find.text('Child page'), findsNWidgets(2));
+    });
+
+    testWidgets('Cut+paste a SubPageBlock in different Document',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor
+          .updateSelection(Selection.single(path: [0], startOffset: 0));
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyX,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(SubPageBlockComponent), findsNothing);
+      expect(find.text('Child page'), findsNothing);
+
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock-2');
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock-2',
+        layout: ViewLayoutPB.Document,
+      );
+
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+      expect(find.text('Child page'), findsNWidgets(2));
+      expect(find.text('Child page (copy)'), findsNothing);
+    });
+
+    testWidgets('Undo adding a SubPageBlock', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu(true);
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor.tapLineOfEditorAt(0);
+
+      // Undo
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(SubPageBlockComponent), findsNothing);
+      expect(find.text('Child page'), findsNothing);
+    });
+
+    testWidgets('Undo delete of a SubPageBlock', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor.hoverAndClickOptionMenuButton([0]);
+      await tester.tapButtonWithName(LocaleKeys.button_delete.tr());
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNothing);
+      expect(find.byType(SubPageBlockComponent), findsNothing);
+
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+    });
+
+    // Redo: undoing adding a subpage block, then redoing to bring it back
+    // -> Add a subpage block
+    // -> Undo
+    // -> Redo
+    testWidgets('Redo adding of a SubPageBlock', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu(true);
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor.tapLineOfEditorAt(0);
+
+      // Undo
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(SubPageBlockComponent), findsNothing);
+      expect(find.text('Child page'), findsNothing);
+
+      // Redo
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isShiftPressed: true,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+      expect(find.text('Child page'), findsNWidgets(2));
+    });
+
+    // Redo: undoing deleting a subpage block, then redoing to delete it again
+    // -> Add a subpage block
+    // -> Delete
+    // -> Undo
+    // -> Redo
+    testWidgets('Redo delete of a SubPageBlock', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu(true);
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      // Delete
+      await tester.editor.hoverAndClickOptionMenuButton([1]);
+      await tester.tapButtonWithName(LocaleKeys.button_delete.tr());
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNothing);
+      expect(find.byType(SubPageBlockComponent), findsNothing);
+
+      await tester.editor.tapLineOfEditorAt(0);
+
+      // Undo
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      // Redo
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isShiftPressed: true,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(SubPageBlockComponent), findsNothing);
+      expect(find.text('Child page'), findsNothing);
+    });
+
+    testWidgets('Delete a view first to trash, then from trash',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+
+      final hintText = LocaleKeys.document_plugins_subPage_inTrashHint.tr();
+      expect(find.text(hintText), findsNothing);
+
+      await tester.hoverOnPageName('Child page');
+      await tester.tapDeletePageButton();
+      await tester.pumpAndSettle(const Duration(seconds: 1));
+
+      expect(find.text(hintText), findsOne);
+
+      // Go to trash
+      await tester.tapTrashButton();
+      await tester.pumpAndSettle();
+
+      // Tap on delete all button
+      await tester.tap(find.text(LocaleKeys.trash_deleteAll.tr()));
+      await tester.pumpAndSettle();
+
+      // Tap ok to delete app pages in trash
+      await tester.tap(find.text(LocaleKeys.button_delete.tr()));
+      await tester.pumpAndSettle();
+
+      await tester.openPage('SubPageBlock');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNothing);
+      expect(find.byType(SubPageBlockComponent), findsNothing);
+    });
+
+    testWidgets('Duplicate SubPageBlock from Block Menu', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu();
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester
+          .hoverOnPageName(LocaleKeys.menuAppHeader_defaultNewPageName.tr());
+      await tester.renamePage('Child page');
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+
+      await tester.editor.hoverAndClickOptionMenuButton([0]);
+
+      await tester.tapButtonWithName(LocaleKeys.button_duplicate.tr());
+      await tester.pumpAndSettle();
+
+      expect(find.text('Child page'), findsNWidgets(2));
+      expect(find.text('Child page (copy)'), findsNWidgets(2));
+      expect(find.byType(SubPageBlockComponent), findsNWidgets(2));
+    });
+
+    testWidgets('Drag SubPageBlock to top of Document', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(name: 'SubPageBlock');
+
+      await tester.insertSubPageFromSlashMenu(true);
+
+      await tester.expandOrCollapsePage(
+        pageName: 'SubPageBlock',
+        layout: ViewLayoutPB.Document,
+      );
+
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+
+      final beforeNode = tester.editor.getNodeAtPath([1]);
+
+      await tester.editor.dragBlock([1], const Offset(20, -45));
+      await tester.pumpAndSettle(Durations.long1);
+
+      final afterNode = tester.editor.getNodeAtPath([0]);
+
+      expect(afterNode.type, SubPageBlockKeys.type);
+      expect(afterNode.type, beforeNode.type);
+      expect(find.byType(SubPageBlockComponent), findsOneWidget);
+      expect(
+        find.text(LocaleKeys.document_plugins_subPage_inTrashHint.tr()),
+        findsNothing,
+      );
+    });
+  });
+}
+
+extension _SubPageTestHelper on WidgetTester {
+  Future<void> insertSubPageFromSlashMenu([bool withTextNode = false]) async {
+    await editor.tapLineOfEditorAt(0);
+
+    if (withTextNode) {
+      await ime.insertText('ABC');
+      await editor.getCurrentEditorState().insertNewLine();
+      await pumpAndSettle();
+    }
+
+    await editor.showSlashMenu();
+    await editor.tapSlashMenuItemWithName(
+      LocaleKeys.document_slashMenu_subPage_name.tr(),
+      offset: 100,
+    );
+
+    await pumpUntilFound(find.byType(SubPageBlockComponent));
+  }
+}

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

@@ -5,10 +5,11 @@ import 'document_codeblock_paste_test.dart' as document_codeblock_paste_test;
 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_option_action_test.dart' as document_option_action_test;
+import 'document_shortcuts_test.dart' as document_shortcuts_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;
@@ -45,4 +46,5 @@ void startTesting() {
   document_inline_page_reference_test.main();
   document_more_actions_test.main();
   document_with_file_test.main();
+  document_shortcuts_test.main();
 }

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

@@ -0,0 +1,252 @@
+import 'package:appflowy_editor/appflowy_editor.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:universal_platform/universal_platform.dart';
+
+import '../../shared/constants.dart';
+import '../../shared/util.dart';
+
+const _testDocumentName = 'Test Document';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('document title:', () {
+    testWidgets('create a new document and edit title', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent();
+
+      final title = tester.editor.findDocumentTitle('');
+      expect(title, findsOneWidget);
+
+      // input name
+      await tester.enterText(title, _testDocumentName);
+      await tester.pumpAndSettle();
+
+      final newTitle = tester.editor.findDocumentTitle(_testDocumentName);
+      expect(newTitle, findsOneWidget);
+
+      // press enter to create a new line
+      await tester.simulateKeyEvent(LogicalKeyboardKey.enter);
+      await tester.pumpAndSettle();
+
+      const firstLine = 'First line of text';
+      await tester.ime.insertText(firstLine);
+      await tester.pumpAndSettle();
+
+      final firstLineText = find.text(firstLine, findRichText: true);
+      expect(firstLineText, findsOneWidget);
+
+      // press cmd/ctrl+left to move the cursor to the start of the line
+      if (UniversalPlatform.isMacOS) {
+        await tester.simulateKeyEvent(
+          LogicalKeyboardKey.arrowLeft,
+          isMetaPressed: true,
+        );
+      } else {
+        await tester.simulateKeyEvent(LogicalKeyboardKey.home);
+      }
+      await tester.pumpAndSettle();
+
+      // press arrow left to delete the first line
+      await tester.simulateKeyEvent(LogicalKeyboardKey.arrowLeft);
+      await tester.pumpAndSettle();
+
+      // check if the title is on focus
+      final titleOnFocus = tester.editor.findDocumentTitle(_testDocumentName);
+      final titleWidget = tester.widget<TextField>(titleOnFocus);
+      expect(titleWidget.focusNode?.hasFocus, isTrue);
+
+      // press the right arrow key to move the cursor to the first line
+      await tester.simulateKeyEvent(LogicalKeyboardKey.arrowRight);
+
+      // check if the title is not on focus
+      expect(titleWidget.focusNode?.hasFocus, isFalse);
+
+      final editorState = tester.editor.getCurrentEditorState();
+      expect(editorState.selection, Selection.collapsed(Position(path: [0])));
+
+      // press the backspace key to go to the title
+      await tester.simulateKeyEvent(LogicalKeyboardKey.backspace);
+
+      expect(editorState.selection, null);
+      expect(titleWidget.focusNode?.hasFocus, isTrue);
+    });
+
+    testWidgets('check if the title is saved', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent();
+
+      final title = tester.editor.findDocumentTitle('');
+      expect(title, findsOneWidget);
+
+      // input name
+      await tester.enterText(title, _testDocumentName);
+      await tester.pumpAndSettle();
+
+      if (UniversalPlatform.isLinux) {
+        // wait for the name to be saved
+        await tester.wait(250);
+      }
+
+      // go to the get started page
+      await tester.tapButton(
+        tester.findPageName(Constants.gettingStartedPageName),
+      );
+
+      // go back to the  page
+      await tester.tapButton(tester.findPageName(_testDocumentName));
+
+      // check if the title is saved
+      final testDocumentTitle = tester.editor.findDocumentTitle(
+        _testDocumentName,
+      );
+      expect(testDocumentTitle, findsOneWidget);
+    });
+
+    testWidgets('arrow up from first line moves focus to title',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent();
+
+      final title = tester.editor.findDocumentTitle('');
+      await tester.enterText(title, _testDocumentName);
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(LogicalKeyboardKey.enter);
+      await tester.ime.insertText('First line of text');
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(LogicalKeyboardKey.home);
+
+      // press the arrow upload
+      await tester.simulateKeyEvent(LogicalKeyboardKey.arrowUp);
+
+      final titleWidget = tester.widget<TextField>(
+        tester.editor.findDocumentTitle(_testDocumentName),
+      );
+      expect(titleWidget.focusNode?.hasFocus, isTrue);
+
+      final editorState = tester.editor.getCurrentEditorState();
+      expect(editorState.selection, null);
+    });
+
+    testWidgets(
+        'backspace at start of first line moves focus to title and deletes empty paragraph',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent();
+
+      final title = tester.editor.findDocumentTitle('');
+      await tester.enterText(title, _testDocumentName);
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(LogicalKeyboardKey.enter);
+
+      final editorState = tester.editor.getCurrentEditorState();
+      expect(editorState.document.root.children.length, equals(2));
+
+      await tester.simulateKeyEvent(LogicalKeyboardKey.backspace);
+
+      final titleWidget = tester.widget<TextField>(
+        tester.editor.findDocumentTitle(_testDocumentName),
+      );
+      expect(titleWidget.focusNode?.hasFocus, isTrue);
+
+      // at least one empty paragraph node is created
+      expect(editorState.document.root.children.length, equals(1));
+    });
+
+    testWidgets('arrow right from end of title moves focus to first line',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent();
+
+      final title = tester.editor.findDocumentTitle('');
+      await tester.enterText(title, _testDocumentName);
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(LogicalKeyboardKey.enter);
+      await tester.ime.insertText('First line of text');
+
+      await tester.tapButton(
+        tester.editor.findDocumentTitle(_testDocumentName),
+      );
+      await tester.simulateKeyEvent(LogicalKeyboardKey.end);
+      await tester.simulateKeyEvent(LogicalKeyboardKey.arrowRight);
+
+      final editorState = tester.editor.getCurrentEditorState();
+      expect(
+        editorState.selection,
+        Selection.collapsed(
+          Position(path: [0]),
+        ),
+      );
+    });
+
+    testWidgets('change the title via sidebar, check the title is updated',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent();
+
+      final title = tester.editor.findDocumentTitle('');
+      expect(title, findsOneWidget);
+
+      await tester.hoverOnPageName(
+        '',
+        onHover: () async {
+          await tester.renamePage(_testDocumentName);
+          await tester.pumpAndSettle();
+        },
+      );
+      await tester.pumpAndSettle();
+
+      final newTitle = tester.editor.findDocumentTitle(_testDocumentName);
+      expect(newTitle, findsOneWidget);
+    });
+
+    testWidgets('press arrow down key in title, check if the cursor flashes',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent();
+
+      final title = tester.editor.findDocumentTitle('');
+      await tester.enterText(title, _testDocumentName);
+      await tester.pumpAndSettle();
+
+      await tester.simulateKeyEvent(LogicalKeyboardKey.enter);
+      const inputText = 'Hello World';
+      await tester.ime.insertText(inputText);
+
+      await tester.tapButton(
+        tester.editor.findDocumentTitle(_testDocumentName),
+      );
+      await tester.simulateKeyEvent(LogicalKeyboardKey.arrowDown);
+      final editorState = tester.editor.getCurrentEditorState();
+      expect(
+        editorState.selection,
+        Selection.collapsed(
+          Position(path: [0], offset: inputText.length),
+        ),
+      );
+    });
+  });
+}

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

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';

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

@@ -60,6 +60,57 @@ void main() {
       );
     });
 
+    testWidgets('insert multiple referenced boards', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new grid
+      final id = uuid();
+      final name = '${ViewLayoutPB.Board.name}_$id';
+      await tester.createNewPageWithNameUnderParent(
+        name: name,
+        layout: ViewLayoutPB.Board,
+        openAfterCreated: false,
+      );
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(
+        name: 'insert_a_reference_${ViewLayoutPB.Board.name}',
+      );
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      // insert a referenced view
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName(
+        ViewLayoutPB.Board.slashMenuLinkedName,
+      );
+      final referencedDatabase1 = find.descendant(
+        of: find.byType(InlineActionsHandler),
+        matching: find.findTextInFlowyText(name),
+      );
+      expect(referencedDatabase1, findsOneWidget);
+      await tester.tapButton(referencedDatabase1);
+
+      await tester.editor.tapLineOfEditorAt(1);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName(
+        ViewLayoutPB.Board.slashMenuLinkedName,
+      );
+      final referencedDatabase2 = find.descendant(
+        of: find.byType(InlineActionsHandler),
+        matching: find.findTextInFlowyText(name),
+      );
+      expect(referencedDatabase2, findsOneWidget);
+      await tester.tapButton(referencedDatabase2);
+
+      expect(
+        find.descendant(
+          of: find.byType(AppFlowyEditor),
+          matching: find.byType(DesktopBoardPage),
+        ),
+        findsNWidgets(2),
+      );
+    });
+
     testWidgets('insert a referenced calendar', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();

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

@@ -1,5 +1,7 @@
 import 'dart:io';
 
+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';
@@ -8,7 +10,6 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.da
 import 'package:appflowy/startup/startup.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.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,10 +37,6 @@ void main() {
         LocaleKeys.document_slashMenu_name_file.tr(),
       );
       expect(find.byType(FileBlockComponent), findsOneWidget);
-
-      await tester.tap(find.byType(FileBlockComponent));
-      await tester.pumpAndSettle(const Duration(seconds: 1));
-
       expect(find.byType(FileUploadMenu), findsOneWidget);
 
       final image = await rootBundle.load('assets/test/images/sample.jpeg');
@@ -116,9 +113,6 @@ void main() {
         LocaleKeys.document_slashMenu_name_file.tr(),
       );
       expect(find.byType(FileBlockComponent), findsOneWidget);
-
-      await tester.tap(find.byType(FileBlockComponent));
-      await tester.pumpAndSettle(const Duration(seconds: 1));
       expect(find.byType(FileUploadMenu), findsOneWidget);
 
       // Navigate to integrate link tab

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

@@ -161,9 +161,8 @@ void main() {
         );
         expect(find.byType(UploadImageMenu), findsOneWidget);
 
-        await tester.tapButtonWithName(
-          'Unsplash',
-        );
+        await tester.tapButtonWithName('Unsplash');
+        await tester.pumpUntilFound(find.byType(UnsplashImageWidget));
         expect(find.byType(UnsplashImageWidget), findsOneWidget);
       });
     });

frontend/appflowy_flutter/integration_test/desktop/grid/grid_edit_row_test.dart

@@ -0,0 +1,137 @@
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checkbox.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:time/time.dart';
+
+import '../../shared/database_test_op.dart';
+import 'grid_test_extensions.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('grid edit row test:', () {
+    testWidgets('with sort configured', (tester) async {
+      await tester.openTestDatabase(v069GridFileName);
+
+      // get grid data
+      final unsorted = tester.getGridRows();
+
+      // add a sort
+      await tester.tapDatabaseSortButton();
+      await tester.tapCreateSortByFieldType(FieldType.RichText, 'Name');
+
+      final sorted = [
+        unsorted[7],
+        unsorted[8],
+        unsorted[1],
+        unsorted[9],
+        unsorted[11],
+        unsorted[10],
+        unsorted[6],
+        unsorted[12],
+        unsorted[2],
+        unsorted[0],
+        unsorted[3],
+        unsorted[5],
+        unsorted[4],
+      ];
+
+      List actual = tester.getGridRows();
+      expect(actual, orderedEquals(sorted));
+
+      await tester.editCell(
+        rowIndex: 4,
+        fieldType: FieldType.RichText,
+        input: "x",
+      );
+      await tester.pumpAndSettle(200.milliseconds);
+
+      final reSorted = [
+        unsorted[7],
+        unsorted[8],
+        unsorted[1],
+        unsorted[9],
+        unsorted[10],
+        unsorted[6],
+        unsorted[12],
+        unsorted[2],
+        unsorted[0],
+        unsorted[3],
+        unsorted[5],
+        unsorted[11],
+        unsorted[4],
+      ];
+
+      // verify grid data
+      actual = tester.getGridRows();
+      expect(actual, orderedEquals(reSorted));
+
+      // delete the sort
+      await tester.tapSortMenuInSettingBar();
+      await tester.tapDeleteAllSortsButton();
+
+      // verify grid data
+      actual = tester.getGridRows();
+      expect(actual, orderedEquals(unsorted));
+    });
+
+    testWidgets('with filter configured', (tester) async {
+      await tester.openTestDatabase(v069GridFileName);
+
+      // get grid data
+      final original = tester.getGridRows();
+
+      // create a filter
+      await tester.tapDatabaseFilterButton();
+      await tester.tapCreateFilterByFieldType(
+        FieldType.Checkbox,
+        'Registration Complete',
+      );
+
+      final filtered = [
+        original[1],
+        original[3],
+        original[5],
+        original[6],
+        original[7],
+        original[9],
+        original[12],
+      ];
+
+      // verify grid data
+      List actual = tester.getGridRows();
+      expect(actual, orderedEquals(filtered));
+      expect(actual.length, equals(7));
+      tester.assertNumberOfRowsInGridPage(7);
+
+      await tester.tapCheckboxCellInGrid(rowIndex: 0);
+      await tester.pumpAndSettle(200.milliseconds);
+
+      // verify grid data
+      actual = tester.getGridRows();
+      expect(actual.length, equals(6));
+      tester.assertNumberOfRowsInGridPage(6);
+      final edited = [
+        original[3],
+        original[5],
+        original[6],
+        original[7],
+        original[9],
+        original[12],
+      ];
+      expect(actual, orderedEquals(edited));
+
+      // delete the filter
+      await tester.tapFilterButtonInGrid('Registration Complete');
+      await tester
+          .tapDisclosureButtonInFinder(find.byType(CheckboxFilterEditor));
+      await tester.tapDeleteFilterButtonInGrid();
+
+      // verify grid data
+      actual = tester.getGridRows();
+      expect(actual.length, equals(13));
+      tester.assertNumberOfRowsInGridPage(13);
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/grid/grid_row_test.dart

@@ -10,13 +10,14 @@ import 'package:integration_test/integration_test.dart';
 
 import '../../shared/database_test_op.dart';
 import '../../shared/util.dart';
+
 import 'grid_test_extensions.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('grid create row test:', () {
-    testWidgets('from the bottom', (tester) async {
+  group('grid row test:', () {
+    testWidgets('create from the bottom', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
 
@@ -33,7 +34,7 @@ void main() {
       tester.assertNumberOfRowsInGridPage(4);
     });
 
-    testWidgets('from a row\'s menu', (tester) async {
+    testWidgets('create from a row\'s menu', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
 
@@ -51,7 +52,7 @@ void main() {
       tester.assertNumberOfRowsInGridPage(4);
     });
 
-    testWidgets('with sort configured', (tester) async {
+    testWidgets('create with sort configured', (tester) async {
       await tester.openTestDatabase(v069GridFileName);
 
       // get grid data
@@ -104,7 +105,7 @@ void main() {
       tester.assertNumberOfRowsInGridPage(14);
     });
 
-    testWidgets('with filter configured', (tester) async {
+    testWidgets('create with filter configured', (tester) async {
       await tester.openTestDatabase(v069GridFileName);
 
       // get grid data
@@ -182,7 +183,6 @@ void main() {
       expect(actual, orderedEquals(original));
     });
 
-    // TODO(RS): move to somewhere else
     testWidgets('delete row of the grid', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();

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

@@ -1,11 +1,10 @@
-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/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -16,8 +15,8 @@ import '../board/board_hide_groups_test.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('shortcuts test', () {
-    testWidgets('can change and overwrite shortcut', (tester) async {
+  group('shortcuts:', () {
+    testWidgets('change and overwrite shortcut', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
 
@@ -29,7 +28,11 @@ void main() {
           LocaleKeys.settings_shortcutsPage_keybindings_backspace.tr();
 
       // Input "Delete" into the search field
-      await tester.enterText(find.byType(TextField), backspaceCmd);
+      final inputField = find.descendant(
+        of: find.byType(SettingsShortcutsView),
+        matching: find.byType(TextField),
+      );
+      await tester.enterText(inputField, backspaceCmd);
       await tester.pumpAndSettle();
 
       await tester.hoverOnWidget(

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

@@ -1,4 +1,3 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/board/presentation/board_page.dart';
 import 'package:appflowy/plugins/database/calendar/presentation/calendar_page.dart';
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
@@ -8,7 +7,6 @@ import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_more_action_button.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:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -17,7 +15,7 @@ import '../../shared/util.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('sidebar test', () {
+  group('sidebar:', () {
     testWidgets('create a new page', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
@@ -26,9 +24,7 @@ void main() {
       await tester.tapNewPageButton();
 
       // expect to see a new document
-      tester.expectToSeePageName(
-        LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-      );
+      tester.expectToSeePageName('');
       // and with one paragraph block
       expect(find.byType(ParagraphBlockComponentWidget), findsOneWidget);
     });

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

@@ -12,7 +12,7 @@ import '../../shared/common_operations.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('Zoom in/out: ', () {
+  group('Zoom in/out:', () {
     Future<void> resetAppFlowyScaleFactor(
       WindowSizeManager windowSizeManager,
     ) async {

frontend/appflowy_flutter/integration_test/desktop_runner_3.dart

@@ -3,12 +3,17 @@ import 'package:integration_test/integration_test.dart';
 import 'desktop/board/board_test_runner.dart' as board_test_runner;
 import 'desktop/database/database_row_cover_test.dart'
     as database_row_cover_test;
-import 'desktop/grid/grid_create_row_test.dart' as grid_create_row_test_runner;
+import 'desktop/document/document_title_test.dart' as document_title_test;
+import 'desktop/document/document_app_lifecycle_test.dart'
+    as document_app_lifecycle_test;
+import 'desktop/document/document_sub_page_test.dart' as document_sub_page_test;
 import 'desktop/grid/grid_filter_and_sort_test.dart'
     as grid_filter_and_sort_test_runner;
 import 'desktop/grid/grid_reopen_test.dart' as grid_reopen_test_runner;
 import 'desktop/grid/grid_reorder_row_test.dart'
     as grid_reorder_row_test_runner;
+import 'desktop/grid/grid_edit_row_test.dart' as grid_edit_row_test_runner;
+import 'desktop/grid/grid_row_test.dart' as grid_create_row_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/emoji_shortcut_test.dart' as emoji_shortcut_test;
@@ -44,6 +49,9 @@ Future<void> runIntegration3OnDesktop() async {
   grid_create_row_test_runner.main();
   grid_reorder_row_test_runner.main();
   grid_filter_and_sort_test_runner.main();
-
+  grid_edit_row_test_runner.main();
   zoom_in_out_test.main();
+  document_title_test.main();
+  document_sub_page_test.main();
+  document_app_lifecycle_test.main();
 }

frontend/appflowy_flutter/integration_test/mobile/cloud/cloud_runner.dart

@@ -0,0 +1,5 @@
+import 'workspace/workspace_operations_test.dart' as workspace_operations_test;
+
+Future<void> main() async {
+  workspace_operations_test.main();
+}

frontend/appflowy_flutter/integration_test/mobile/cloud/workspace/workspace_operations_test.dart

@@ -0,0 +1,67 @@
+// 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/constants.dart';
+import '../../../shared/dir.dart';
+import '../../../shared/mock/mock_file_picker.dart';
+import '../../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('workspace operations:', () {
+    testWidgets('create a new workspace', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloudSelfHost,
+      );
+      await tester.tapGoogleLoginInButton();
+      await tester.expectToSeeHomePageWithGetStartedPage();
+
+      // click the create a new workspace button
+      await tester.tapButton(find.text(Constants.defaultWorkspaceName));
+      await tester.tapButton(find.text(LocaleKeys.workspace_create.tr()));
+
+      // input the new workspace name
+      final inputField = find.byType(TextFormField);
+      const newWorkspaceName = 'AppFlowy';
+      await tester.enterText(inputField, newWorkspaceName);
+      await tester.pumpAndSettle();
+
+      // wait for the workspace to be created
+      await tester.pumpUntilFound(
+        find.text(LocaleKeys.workspace_createSuccess.tr()),
+      );
+
+      // expect to see the new workspace
+      expect(find.text(newWorkspaceName), findsOneWidget);
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/mobile_runner.dart

@@ -1,5 +1,6 @@
 import 'package:integration_test/integration_test.dart';
 
+import 'mobile/document/page_style_test.dart' as page_style_test;
 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;
 
@@ -7,4 +8,5 @@ Future<void> runIntegrationOnMobile() async {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
   anonymous_sign_in_test.main();
   create_new_page_test.main();
+  page_style_test.main();
 }

frontend/appflowy_flutter/integration_test/shared/auth_operation.dart

@@ -10,9 +10,10 @@ import 'package:flutter_test/flutter_test.dart';
 import 'util.dart';
 
 extension AppFlowyAuthTest on WidgetTester {
-  Future<void> tapGoogleLoginInButton() async {
+  Future<void> tapGoogleLoginInButton({bool pumpAndSettle = true}) async {
     await tapButton(
       find.byKey(signInWithGoogleButtonKey),
+      pumpAndSettle: pumpAndSettle,
     );
   }
 

frontend/appflowy_flutter/integration_test/shared/base.dart

@@ -174,7 +174,7 @@ extension AppFlowyTestBase on WidgetTester {
       await this.pumpAndSettle(
         Duration(milliseconds: milliseconds),
         EnginePhase.sendSemanticsUpdate,
-        const Duration(seconds: 5),
+        const Duration(seconds: 15),
       );
     }
   }

frontend/appflowy_flutter/integration_test/shared/common_operations.dart

@@ -1,5 +1,11 @@
 import 'dart:io';
 
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/sidebar_space_menu.dart';
+import 'package:flutter/foundation.dart';
+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';
@@ -11,6 +17,7 @@ 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/footer/sidebar_footer.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart';
@@ -33,10 +40,6 @@ 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';
@@ -237,6 +240,10 @@ extension CommonOperations on WidgetTester {
     await tapOKButton();
   }
 
+  Future<void> tapTrashButton() async {
+    await tap(find.byType(SidebarTrashButton));
+  }
+
   Future<void> tapOKButton() async {
     final okButton = find.byWidgetPredicate(
       (widget) =>
@@ -253,7 +260,10 @@ extension CommonOperations on WidgetTester {
   }) async {
     final page = findPageName(pageName, layout: layout);
     await hoverOnWidget(page);
-    final expandButton = find.byType(ViewItemDefaultLeftIcon);
+    final expandButton = find.descendant(
+      of: page,
+      matching: find.byType(ViewItemDefaultLeftIcon),
+    );
     await tapButton(expandButton.first);
   }
 
@@ -314,10 +324,14 @@ extension CommonOperations on WidgetTester {
     }
     await pumpAndSettle();
 
+    final defaultPageName = layout == ViewLayoutPB.Document
+        ? '' // the document name is empty by default
+        : LocaleKeys.menuAppHeader_defaultNewPageName.tr();
+
     // hover on it and change it's name
     if (name != null) {
       await hoverOnPageName(
-        LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+        defaultPageName,
         layout: layout,
         onHover: () async {
           await renamePage(name);
@@ -331,7 +345,7 @@ extension CommonOperations on WidgetTester {
     if (openAfterCreated) {
       await openPage(
         // if the name is null, use the default name
-        name ?? LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+        name ?? defaultPageName,
         layout: layout,
       );
       await pumpAndSettle();
@@ -368,7 +382,7 @@ extension CommonOperations on WidgetTester {
 
       // hover on new created page and change it's name
       await hoverOnPageName(
-        LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+        '',
         layout: layout,
         onHover: () async {
           await renamePage(pageName);
@@ -398,6 +412,19 @@ extension CommonOperations on WidgetTester {
     await tapButton(addPageButton);
   }
 
+  /// Click the + button in the space header
+  Future<void> clickSpaceHeader() async {
+    await tapButton(find.byType(SidebarSpaceHeader));
+  }
+
+  Future<void> openSpace(String spaceName) async {
+    final space = find.descendant(
+      of: find.byType(SidebarSpaceMenuItem),
+      matching: find.text(spaceName),
+    );
+    await tapButton(space);
+  }
+
   /// Create a new page on the top level
   Future<void> createNewPage({
     ViewLayoutPB layout = ViewLayoutPB.Document,
@@ -629,7 +656,11 @@ extension CommonOperations on WidgetTester {
     expect(createWorkspaceDialog, findsOneWidget);
 
     // input the workspace name
-    await enterText(find.byType(TextField), name);
+    final workspaceNameInput = find.descendant(
+      of: createWorkspaceDialog,
+      matching: find.byType(TextField),
+    );
+    await enterText(workspaceNameInput, name);
 
     await tapButtonWithName(LocaleKeys.button_ok.tr(), pumpAndSettle: false);
     await pump(const Duration(seconds: 5));

frontend/appflowy_flutter/integration_test/shared/constants.dart

@@ -3,4 +3,6 @@ class Constants {
   static const gettingStartedPageName = 'Getting started';
   static const toDosPageName = 'To-dos';
   static const generalSpaceName = 'General';
+
+  static const defaultWorkspaceName = 'My Workspace';
 }

frontend/appflowy_flutter/integration_test/shared/database_test_op.dart

@@ -1,5 +1,8 @@
 import 'dart:io';
 
+import 'package:appflowy/plugins/database/application/field/filter_entities.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -20,13 +23,14 @@ import 'package:appflowy/plugins/database/grid/presentation/widgets/calculations
 import 'package:appflowy/plugins/database/grid/presentation/widgets/calculations/calculation_type_item.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/common/type_option_separator.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checkbox.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checklist/checklist.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checklist.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/choicechip.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/select_option/option_list.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/select_option/select_option.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/text.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/date.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/create_filter_list.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/disclosure_button.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/filter_menu_item.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/footer/grid_footer.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/header/desktop_field_cell.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/row/row.dart';
@@ -147,6 +151,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
     expect(cell, findsOneWidget);
     await enterText(cell, input);
+    await testTextInput.receiveAction(TextInputAction.done);
     await pumpAndSettle();
   }
 
@@ -242,10 +247,10 @@ extension AppFlowyDatabaseTest on WidgetTester {
     }
   }
 
-  Future<void> assertMultiSelectOption({
+  void assertMultiSelectOption({
     required int rowIndex,
     required List<String> contents,
-  }) async {
+  }) {
     final findCell = cellFinder(rowIndex, FieldType.MultiSelect);
     for (final content in contents) {
       if (content.isNotEmpty) {
@@ -413,10 +418,10 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await tapButton(option);
   }
 
-  Future<void> findSelectOptionWithNameInGrid({
+  void findSelectOptionWithNameInGrid({
     required int rowIndex,
     required String name,
-  }) async {
+  }) {
     final findRow = find.byType(GridRow);
     final option = find.byWidgetPredicate(
       (widget) =>
@@ -428,10 +433,10 @@ extension AppFlowyDatabaseTest on WidgetTester {
     expect(cell, findsOneWidget);
   }
 
-  Future<void> assertNumberOfSelectedOptionsInGrid({
+  void assertNumberOfSelectedOptionsInGrid({
     required int rowIndex,
     required Matcher matcher,
-  }) async {
+  }) {
     final findRow = find.byType(GridRow);
 
     final options = find.byWidgetPredicate(
@@ -679,6 +684,53 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await dismissFieldEditor();
   }
 
+  Future<void> changeFieldIcon(String icon) async {
+    await tapButton(find.byType(FieldEditIconButton));
+    if (icon.isEmpty) {
+      final button = find.descendant(
+        of: find.byType(FlowyIconEmojiPicker),
+        matching: find.text(
+          LocaleKeys.button_remove.tr(),
+        ),
+      );
+      await tapButton(button);
+    } else {
+      final svgContent = kIconGroups?.findSvgContent(icon);
+      await tapButton(
+        find.byWidgetPredicate(
+          (widget) => widget is FlowySvg && widget.svgString == svgContent,
+        ),
+      );
+    }
+  }
+
+  void assertFieldSvg(String name, FieldType fieldType) {
+    final svgFinder = find.byWidgetPredicate(
+      (widget) => widget is FlowySvg && widget.svg == fieldType.svgData,
+    );
+    final fieldButton = find.byWidgetPredicate(
+      (widget) => widget is FieldCellButton && widget.field.name == name,
+    );
+    expect(
+      find.descendant(of: fieldButton, matching: svgFinder),
+      findsOneWidget,
+    );
+  }
+
+  void assertFieldCustomSvg(String name, String svg) {
+    final svgContent = kIconGroups?.findSvgContent(svg);
+    final svgFinder = find.byWidgetPredicate(
+      (widget) => widget is FlowySvg && widget.svgString == svgContent,
+    );
+    final fieldButton = find.byWidgetPredicate(
+      (widget) => widget is FieldCellButton && widget.field.name == name,
+    );
+    expect(
+      find.descendant(of: fieldButton, matching: svgFinder),
+      findsOneWidget,
+    );
+  }
+
   Future<void> changeCalculateAtIndex(int index, CalculationType type) async {
     await tap(find.byType(CalculateCell).at(index));
     await pumpAndSettle();
@@ -957,7 +1009,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
   Future<void> tapCreateFilterByFieldType(FieldType type, String title) async {
     final findFilter = find.byWidgetPredicate(
       (widget) =>
-          widget is GridFilterPropertyCell &&
+          widget is FilterableFieldButton &&
           widget.fieldInfo.fieldType == type &&
           widget.fieldInfo.name == title,
     );
@@ -965,8 +1017,9 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   Future<void> tapFilterButtonInGrid(String name) async {
-    final findFilter = find.byType(FilterMenuItem);
-    final button = find.descendant(of: findFilter, matching: find.text(name));
+    final button = find.byWidgetPredicate(
+      (widget) => widget is ChoiceChipButton && widget.fieldInfo.name == name,
+    );
     await tapButton(button);
   }
 
@@ -1004,12 +1057,15 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   /// Must call [tapSortMenuInSettingBar] first.
-  Future<void> tapSortButtonByName(String name) async {
-    final findSortItem = find.byWidgetPredicate(
-      (widget) =>
-          widget is DatabaseSortItem && widget.sortInfo.fieldInfo.name == name,
+  Future<void> tapEditSortConditionButtonByFieldName(String name) async {
+    final sortItem = find.descendant(
+      of: find.ancestor(
+        of: find.text(name),
+        matching: find.byType(DatabaseSortItem),
+      ),
+      matching: find.byType(SortConditionButton),
     );
-    await tapButton(findSortItem);
+    await tapButton(sortItem);
   }
 
   /// Must call [tapSortMenuInSettingBar] first.
@@ -1017,18 +1073,26 @@ extension AppFlowyDatabaseTest on WidgetTester {
     (FieldType, String) from,
     (FieldType, String) to,
   ) async {
-    final fromSortItem = find.byWidgetPredicate(
-      (widget) =>
-          widget is DatabaseSortItem &&
-          widget.sortInfo.fieldInfo.fieldType == from.$1 &&
-          widget.sortInfo.fieldInfo.name == from.$2,
+    final fromSortItem = find.ancestor(
+      of: find.text(from.$2),
+      matching: find.byType(DatabaseSortItem),
     );
-    final toSortItem = find.byWidgetPredicate(
-      (widget) =>
-          widget is DatabaseSortItem &&
-          widget.sortInfo.fieldInfo.fieldType == to.$1 &&
-          widget.sortInfo.fieldInfo.name == to.$2,
+    final toSortItem = find.ancestor(
+      of: find.text(to.$2),
+      matching: find.byType(DatabaseSortItem),
     );
+    // final fromSortItem = find.byWidgetPredicate(
+    //   (widget) =>
+    //       widget is DatabaseSortItem &&
+    //       widget.sort.fieldInfo.fieldType == from.$1 &&
+    //       widget.sort.fieldInfo.name == from.$2,
+    // );
+    // final toSortItem = find.byWidgetPredicate(
+    //   (widget) =>
+    //       widget is DatabaseSortItem &&
+    //       widget.sort.fieldInfo.fieldType == to.$1 &&
+    //       widget.sort.fieldInfo.name == to.$2,
+    // );
     final dragElement = find.descendant(
       of: fromSortItem,
       matching: find.byType(ReorderableDragStartListener),
@@ -1037,16 +1101,13 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await pumpAndSettle(const Duration(milliseconds: 200));
   }
 
-  /// Must call [tapSortButtonByName] first.
+  /// Must call [tapEditSortConditionButtonByFieldName] first.
   Future<void> tapSortByDescending() async {
     await tapButton(
-      find.descendant(
-        of: find.byType(OrderPannelItem),
-        matching: find.byWidgetPredicate(
-          (widget) =>
-              widget is FlowyText &&
-              widget.text == LocaleKeys.grid_sort_descending.tr(),
-        ),
+      find.byWidgetPredicate(
+        (widget) =>
+            widget is OrderPanelItem &&
+            widget.condition == SortConditionPB.Descending,
       ),
     );
     await sendKeyEvent(LogicalKeyboardKey.escape);
@@ -1096,6 +1157,10 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await tapButton(find.byType(ChecklistFilterConditionList));
   }
 
+  Future<void> tapDateFilterButtonInGrid() async {
+    await tapButton(find.byType(DateFilterConditionList));
+  }
+
   /// The [SelectOptionFilterList] must show up first.
   Future<void> tapOptionFilterWithName(String name) async {
     final findCell = find.descendant(
@@ -1129,6 +1194,15 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await tapButton(button);
   }
 
+  Future<void> tapDateFilterCondition(DateTimeFilterCondition condition) async {
+    final button = find.descendant(
+      of: find.byType(HoverButton),
+      matching: find.text(condition.filterName),
+    );
+
+    await tapButton(button);
+  }
+
   /// Should call [tapDatabaseSettingButton] first.
   Future<void> tapViewPropertiesButton() async {
     final findSettingItem = find.byType(DatabaseSettingsList);

frontend/appflowy_flutter/integration_test/shared/document_test_operations.dart

@@ -1,13 +1,17 @@
 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/document/presentation/editor_plugins/actions/block_action_add_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/drag_to_reorder/draggable_option_button.dart';
 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/cover_title.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_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';
@@ -15,8 +19,6 @@ import 'package:appflowy/shared/icon_emoji_picker/emoji_skin_tone.dart';
 import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 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';
 
@@ -43,7 +45,10 @@ class EditorOperations {
   Future<void> tapLineOfEditorAt(int index) async {
     final textBlocks = find.byType(AppFlowyRichText);
     index = index.clamp(0, textBlocks.evaluate().length - 1);
-    await tester.tapAt(tester.getTopRight(textBlocks.at(index)));
+    final center = tester.getCenter(textBlocks.at(index));
+    final right = tester.getTopRight(textBlocks.at(index));
+    final centerRight = Offset(right.dx, center.dy);
+    await tester.tapAt(centerRight);
     await tester.pumpAndSettle();
   }
 
@@ -211,7 +216,7 @@ class EditorOperations {
   }
 
   /// Update the editor's selection
-  Future<void> updateSelection(Selection selection) async {
+  Future<void> updateSelection(Selection? selection) async {
     final editorState = getCurrentEditorState();
     unawaited(
       editorState.updateSelectionWithReason(
@@ -323,4 +328,27 @@ class EditorOperations {
     );
     await tester.pumpAndSettle(Durations.short1);
   }
+
+  Finder findDocumentTitle(String title) {
+    return find.descendant(
+      of: find.byType(CoverTitle),
+      matching: find.byWidgetPredicate(
+        (widget) {
+          if (widget is! TextField) {
+            return false;
+          }
+
+          if (widget.controller?.text == title) {
+            return true;
+          }
+
+          if (title.isEmpty) {
+            return widget.controller?.text.isEmpty ?? false;
+          }
+
+          return false;
+        },
+      ),
+    );
+  }
 }

frontend/appflowy_flutter/integration_test/shared/expectation.dart

@@ -1,8 +1,9 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_view_item.dart';
+import 'package:appflowy/mobile/presentation/presentation.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';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
@@ -25,9 +26,15 @@ const String gettingStarted = 'Getting started';
 extension Expectation on WidgetTester {
   /// Expect to see the home page and with a default read me page.
   Future<void> expectToSeeHomePageWithGetStartedPage() async {
-    final finder = find.byType(HomeStack);
-    await pumpUntilFound(finder);
-    expect(finder, findsOneWidget);
+    if (UniversalPlatform.isDesktopOrWeb) {
+      final finder = find.byType(HomeStack);
+      await pumpUntilFound(finder);
+      expect(finder, findsOneWidget);
+    } else if (UniversalPlatform.isMobile) {
+      final finder = find.byType(MobileHomePage);
+      await pumpUntilFound(finder);
+      expect(finder, findsOneWidget);
+    }
 
     final docFinder = find.textContaining(gettingStarted);
     await pumpUntilFound(docFinder);

frontend/appflowy_flutter/ios/Podfile.lock

@@ -56,8 +56,6 @@ PODS:
     - Flutter
   - keyboard_height_plugin (0.0.1):
     - Flutter
-  - open_file_ios (0.0.1):
-    - Flutter
   - open_filex (0.0.2):
     - Flutter
   - package_info_plus (0.4.5):
@@ -104,7 +102,6 @@ DEPENDENCIES:
   - integration_test (from `.symlinks/plugins/integration_test/ios`)
   - irondash_engine_context (from `.symlinks/plugins/irondash_engine_context/ios`)
   - keyboard_height_plugin (from `.symlinks/plugins/keyboard_height_plugin/ios`)
-  - open_file_ios (from `.symlinks/plugins/open_file_ios/ios`)
   - open_filex (from `.symlinks/plugins/open_filex/ios`)
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
@@ -151,8 +148,6 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/irondash_engine_context/ios"
   keyboard_height_plugin:
     :path: ".symlinks/plugins/keyboard_height_plugin/ios"
-  open_file_ios:
-    :path: ".symlinks/plugins/open_file_ios/ios"
   open_filex:
     :path: ".symlinks/plugins/open_filex/ios"
   package_info_plus:
@@ -189,7 +184,6 @@ SPEC CHECKSUMS:
   integration_test: ce0a3ffa1de96d1a89ca0ac26fca7ea18a749ef4
   irondash_engine_context: 3458bf979b90d616ffb8ae03a150bafe2e860cc9
   keyboard_height_plugin: 43fa8bba20fd5c4fdeed5076466b8b9d43cc6b86
-  open_file_ios: 461db5853723763573e140de3193656f91990d9e
   open_filex: 6e26e659846ec990262224a12ef1c528bb4edbe4
   package_info_plus: 58f0028419748fad15bf008b270aaa8e54380b1c
   path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46

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

@@ -57,8 +57,6 @@ class KVKeys {
 
   static const String kCloudType = 'kCloudType';
   static const String kAppflowyCloudBaseURL = 'kAppFlowyCloudBaseURL';
-  static const String kSupabaseURL = 'kSupabaseURL';
-  static const String kSupabaseAnonKey = 'kSupabaseAnonKey';
 
   /// The key for saving the text scale factor.
   ///

frontend/appflowy_flutter/lib/env/cloud_env.dart

@@ -14,8 +14,12 @@ import 'package:appflowy_backend/log.dart';
 /// [ty] - The type of cloud to be set. It must be one of the values from
 /// [AuthenticatorType] enum. The corresponding integer value of the enum is stored:
 /// - `CloudType.local` is stored as "0".
-/// - `CloudType.supabase` is stored as "1".
 /// - `CloudType.appflowyCloud` is stored as "2".
+///
+/// The gap between [AuthenticatorType.local] and [AuthenticatorType.appflowyCloud] is
+/// due to previously supporting Supabase, this has been deprecated since and removed.
+/// To not cause conflicts with older clients, we keep the gap.
+///
 Future<void> _setAuthenticatorType(AuthenticatorType ty) async {
   switch (ty) {
     case AuthenticatorType.local:
@@ -84,7 +88,7 @@ Future<AuthenticatorType> getAuthenticatorType() async {
 /// A boolean value indicating whether authentication is enabled. It returns
 /// `true` if the application is in release or develop mode, and the cloud type
 /// is not set to `CloudType.local`. Additionally, it checks if either the
-/// AppFlowy Cloud or Supabase configuration is valid.
+/// AppFlowy Cloud configuration is valid.
 /// Returns `false` otherwise.
 bool get isAuthEnabled {
   final env = getIt<AppFlowyCloudSharedEnv>();
@@ -286,25 +290,3 @@ Future<String> _getAppFlowyCloudWSUrl(String baseURL) async {
 Future<String> _getAppFlowyCloudGotrueUrl(String baseURL) async {
   return "$baseURL/gotrue";
 }
-
-Future<void> setSupabaseServer(
-  String? url,
-  String? anonKey,
-) async {
-  assert(
-    (url != null && anonKey != null) || (url == null && anonKey == null),
-    "Either both Supabase URL and anon key must be set, or both should be unset",
-  );
-
-  if (url == null) {
-    await getIt<KeyValueStorage>().remove(KVKeys.kSupabaseURL);
-  } else {
-    await getIt<KeyValueStorage>().set(KVKeys.kSupabaseURL, url);
-  }
-
-  if (anonKey == null) {
-    await getIt<KeyValueStorage>().remove(KVKeys.kSupabaseAnonKey);
-  } else {
-    await getIt<KeyValueStorage>().set(KVKeys.kSupabaseAnonKey, anonKey);
-  }
-}

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

@@ -49,7 +49,13 @@ class BlockActionBottomSheet extends StatelessWidget {
         FlowyOptionTile.text(
           showTopBorder: false,
           text: LocaleKeys.button_duplicate.tr(),
-          leftIcon: const FlowySvg(FlowySvgs.m_duplicate_s),
+          leftIcon: const Padding(
+            padding: EdgeInsets.all(2),
+            child: FlowySvg(
+              FlowySvgs.copy_s,
+              size: Size.square(16),
+            ),
+          ),
           onTap: () => onAction(BlockActionBottomSheetType.duplicate),
         ),
 
@@ -59,7 +65,8 @@ class BlockActionBottomSheet extends StatelessWidget {
           showTopBorder: false,
           text: LocaleKeys.button_delete.tr(),
           leftIcon: FlowySvg(
-            FlowySvgs.m_delete_s,
+            FlowySvgs.trash_s,
+            size: const Size.square(18),
             color: Theme.of(context).colorScheme.error,
           ),
           textColor: Theme.of(context).colorScheme.error,

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

@@ -48,12 +48,14 @@ Future<T?> showMobileBottomSheet<T>(
   double? elevation,
   bool showDoneButton = false,
   bool enableDraggableScrollable = false,
+  bool enableScrollable = false,
   // this field is only used if showDragHandle is true
   Widget Function(BuildContext, ScrollController)? scrollableWidgetBuilder,
   // only used when enableDraggableScrollable is true
   double minChildSize = 0.5,
   double maxChildSize = 0.8,
   double initialChildSize = 0.51,
+  double bottomSheetPadding = 0,
 }) async {
   assert(
     showHeader ||
@@ -151,6 +153,19 @@ Future<T?> showMobileBottomSheet<T>(
             );
           },
         );
+      } else if (enableScrollable) {
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ...children,
+            Flexible(
+              child: SingleChildScrollView(
+                child: child,
+              ),
+            ),
+            VSpace(bottomSheetPadding),
+          ],
+        );
       }
 
       // ----- content area -----

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

@@ -7,11 +7,11 @@ import 'package:appflowy/mobile/presentation/database/board/widgets/group_card_h
 import 'package:appflowy/mobile/presentation/database/card/card.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/board/application/board_bloc.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:appflowy/plugins/database/widgets/card/card.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_style_maps/mobile_board_card_cell_style.dart';
 import 'package:appflowy/shared/flowy_error_page.dart';
+import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';

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

@@ -3,7 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
 import 'package:appflowy/plugins/database/board/application/board_bloc.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_type_extension.dart';
+import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:easy_localization/easy_localization.dart';

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_row_property_list.dart

@@ -1,13 +1,11 @@
-import 'package:flutter/material.dart';
-
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database/grid/application/row/row_detail_bloc.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/header/desktop_field_cell.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
-import 'package:appflowy/util/field_type_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class MobileRowPropertyList extends StatelessWidget {
@@ -77,10 +75,8 @@ class _PropertyCellState extends State<_PropertyCell> {
       children: [
         Row(
           children: [
-            FlowySvg(
-              fieldInfo.fieldType.svgData,
-              color: Theme.of(context).hintColor,
-              size: const Size.square(16),
+            FieldIcon(
+              fieldInfo: fieldInfo,
             ),
             const HSpace(6),
             Expanded(

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/option_text_field.dart

@@ -11,13 +11,13 @@ class OptionTextField extends StatelessWidget {
   const OptionTextField({
     super.key,
     required this.controller,
-    required this.type,
+    required this.fieldType,
     required this.onTextChanged,
     required this.onFieldTypeChanged,
   });
 
   final TextEditingController controller;
-  final FieldType type;
+  final FieldType fieldType;
   final void Function(String value) onTextChanged;
   final void Function(FieldType value) onFieldTypeChanged;
 
@@ -43,12 +43,12 @@ class OptionTextField extends StatelessWidget {
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(12),
             color: Theme.of(context).brightness == Brightness.light
-                ? type.mobileIconBackgroundColor
-                : type.mobileIconBackgroundColorDark,
+                ? fieldType.mobileIconBackgroundColor
+                : fieldType.mobileIconBackgroundColorDark,
           ),
           child: Center(
             child: FlowySvg(
-              type.svgData,
+              fieldType.svgData,
               size: const Size.square(22),
             ),
           ),

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_create_field_screen.dart

@@ -37,6 +37,7 @@ class _MobileNewPropertyScreenState extends State<MobileNewPropertyScreen> {
     final type = widget.fieldType ?? FieldType.RichText;
     optionValues = FieldOptionValues(
       type: type,
+      icon: "",
       name: type.i18n,
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_picker_list.dart

@@ -1,10 +1,9 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_option_tile.dart';
 import 'package:appflowy/plugins/base/drag_handler.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
-import 'package:appflowy/util/field_type_extension.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/header/desktop_field_cell.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
@@ -132,9 +131,9 @@ class _FieldButton extends StatelessWidget {
     return FlowyOptionTile.checkbox(
       text: field.name,
       isSelected: isSelected,
-      leftIcon: FlowySvg(
-        field.fieldType.svgData,
-        size: const Size.square(20),
+      leftIcon: FieldIcon(
+        fieldInfo: field,
+        dimension: 20,
       ),
       showTopBorder: showTopBorder,
       onTap: () => onSelect(field.id),

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_full_field_editor.dart

@@ -35,6 +35,7 @@ class FieldOptionValues {
   FieldOptionValues({
     required this.type,
     required this.name,
+    required this.icon,
     this.dateFormat,
     this.timeFormat,
     this.includeTime,
@@ -48,6 +49,7 @@ class FieldOptionValues {
     return FieldOptionValues(
       type: fieldType,
       name: field.name,
+      icon: field.icon,
       numberFormat: fieldType == FieldType.Number
           ? NumberTypeOptionPB.fromBuffer(buffer).format
           : null,
@@ -83,6 +85,7 @@ class FieldOptionValues {
 
   FieldType type;
   String name;
+  String icon;
 
   // FieldType.DateTime
   // FieldType.LastEditedTime
@@ -221,7 +224,7 @@ class _MobileFieldEditorState extends State<MobileFieldEditor> {
             const _Divider(),
             OptionTextField(
               controller: controller,
-              type: values.type,
+              fieldType: values.type,
               onTextChanged: (value) {
                 isFieldNameChanged = true;
                 _updateOptionValues(name: value);

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_quick_field_editor.dart

@@ -76,7 +76,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
               const VSpace(16),
               OptionTextField(
                 controller: controller,
-                type: state.field.fieldType,
+                fieldType: state.field.fieldType,
                 onTextChanged: (text) {
                   context
                       .read<FieldEditorBloc>()

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_field_list.dart

@@ -8,8 +8,8 @@ import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
 import 'package:appflowy/plugins/database/application/setting/property_bloc.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/header/desktop_field_cell.dart';
 import 'package:appflowy/plugins/database/widgets/setting/field_visibility_extension.dart';
-import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -168,9 +168,9 @@ class DatabaseFieldListTile extends StatelessWidget {
     if (fieldInfo.field.isPrimary) {
       return FlowyOptionTile.text(
         text: fieldInfo.name,
-        leftIcon: FlowySvg(
-          fieldInfo.fieldType.svgData,
-          size: const Size.square(20),
+        leftIcon: FieldIcon(
+          fieldInfo: fieldInfo,
+          dimension: 20,
         ),
         showTopBorder: showTopBorder,
       );
@@ -178,9 +178,9 @@ class DatabaseFieldListTile extends StatelessWidget {
       return FlowyOptionTile.toggle(
         isSelected: fieldInfo.visibility?.isVisibleState() ?? false,
         text: fieldInfo.name,
-        leftIcon: FlowySvg(
-          fieldInfo.fieldType.svgData,
-          size: const Size.square(20),
+        leftIcon: FieldIcon(
+          fieldInfo: fieldInfo,
+          dimension: 20,
         ),
         showTopBorder: showTopBorder,
         onTap: () => showEditFieldScreen(context, viewId, fieldInfo),

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_filter_bottom_sheet_cubit.dart

@@ -0,0 +1,104 @@
+import 'package:appflowy/plugins/database/application/field/filter_entities.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'database_filter_bottom_sheet_cubit.freezed.dart';
+
+class MobileFilterEditorCubit extends Cubit<MobileFilterEditorState> {
+  MobileFilterEditorCubit({
+    required this.pageController,
+  }) : super(MobileFilterEditorState.overview());
+
+  final PageController pageController;
+
+  void returnToOverview({bool scrollToBottom = false}) {
+    _animateToPage(0);
+    emit(MobileFilterEditorState.overview(scrollToBottom: scrollToBottom));
+  }
+
+  void startCreatingFilter() {
+    _animateToPage(1);
+    emit(MobileFilterEditorState.create());
+  }
+
+  void startEditingFilterField(String filterId) {
+    _animateToPage(1);
+    emit(MobileFilterEditorState.editField(filterId: filterId));
+  }
+
+  void updateFilter(DatabaseFilter filter) {
+    emit(
+      state.maybeWhen(
+        editCondition: (filterId, newFilter, showSave) =>
+            MobileFilterEditorState.editCondition(
+          filterId: filterId,
+          newFilter: filter,
+          showSave: showSave,
+        ),
+        editContent: (filterId, _) => MobileFilterEditorState.editContent(
+          filterId: filterId,
+          newFilter: filter,
+        ),
+        orElse: () => state,
+      ),
+    );
+  }
+
+  void startEditingFilterCondition(
+    String filterId,
+    DatabaseFilter filter,
+    bool showSave,
+  ) {
+    _animateToPage(1);
+    emit(
+      MobileFilterEditorState.editCondition(
+        filterId: filterId,
+        newFilter: filter,
+        showSave: showSave,
+      ),
+    );
+  }
+
+  void startEditingFilterContent(String filterId, DatabaseFilter filter) {
+    _animateToPage(1);
+    emit(
+      MobileFilterEditorState.editContent(
+        filterId: filterId,
+        newFilter: filter,
+      ),
+    );
+  }
+
+  Future<void> _animateToPage(int page) async {
+    return pageController.animateToPage(
+      page,
+      duration: const Duration(milliseconds: 150),
+      curve: Curves.easeOut,
+    );
+  }
+}
+
+@freezed
+class MobileFilterEditorState with _$MobileFilterEditorState {
+  factory MobileFilterEditorState.overview({
+    @Default(false) bool scrollToBottom,
+  }) = _OverviewState;
+
+  factory MobileFilterEditorState.create() = _CreateState;
+
+  factory MobileFilterEditorState.editField({
+    required String filterId,
+  }) = _EditFieldState;
+
+  factory MobileFilterEditorState.editCondition({
+    required String filterId,
+    required DatabaseFilter newFilter,
+    required bool showSave,
+  }) = _EditConditionState;
+
+  factory MobileFilterEditorState.editContent({
+    required String filterId,
+    required DatabaseFilter newFilter,
+  }) = _EditContentState;
+}

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_filter_condition_list.dart

@@ -0,0 +1,118 @@
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checkbox.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checklist.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/number.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/select_option/condition_list.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/text.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+
+abstract class FilterCondition<C> {
+  static FilterCondition fromFieldType(FieldType fieldType) {
+    return switch (fieldType) {
+      FieldType.RichText || FieldType.URL => TextFilterCondition().as(),
+      FieldType.Number => NumberFilterCondition().as(),
+      FieldType.Checkbox => CheckboxFilterCondition().as(),
+      FieldType.Checklist => ChecklistFilterCondition().as(),
+      FieldType.SingleSelect => SingleSelectOptionFilterCondition().as(),
+      FieldType.MultiSelect => MultiSelectOptionFilterCondition().as(),
+      _ => MultiSelectOptionFilterCondition().as(),
+    };
+  }
+
+  List<(C, String)> get conditions;
+}
+
+mixin _GenericCastHelper {
+  FilterCondition<T> as<T>() => this as FilterCondition<T>;
+}
+
+final class TextFilterCondition
+    with _GenericCastHelper
+    implements FilterCondition<TextFilterConditionPB> {
+  @override
+  List<(TextFilterConditionPB, String)> get conditions {
+    return [
+      TextFilterConditionPB.TextContains,
+      TextFilterConditionPB.TextDoesNotContain,
+      TextFilterConditionPB.TextIs,
+      TextFilterConditionPB.TextIsNot,
+      TextFilterConditionPB.TextStartsWith,
+      TextFilterConditionPB.TextEndsWith,
+      TextFilterConditionPB.TextIsEmpty,
+      TextFilterConditionPB.TextIsNotEmpty,
+    ].map((e) => (e, e.filterName)).toList();
+  }
+}
+
+final class NumberFilterCondition
+    with _GenericCastHelper
+    implements FilterCondition<NumberFilterConditionPB> {
+  @override
+  List<(NumberFilterConditionPB, String)> get conditions {
+    return [
+      NumberFilterConditionPB.Equal,
+      NumberFilterConditionPB.NotEqual,
+      NumberFilterConditionPB.LessThan,
+      NumberFilterConditionPB.LessThanOrEqualTo,
+      NumberFilterConditionPB.GreaterThan,
+      NumberFilterConditionPB.GreaterThanOrEqualTo,
+      NumberFilterConditionPB.NumberIsEmpty,
+      NumberFilterConditionPB.NumberIsNotEmpty,
+    ].map((e) => (e, e.filterName)).toList();
+  }
+}
+
+final class CheckboxFilterCondition
+    with _GenericCastHelper
+    implements FilterCondition<CheckboxFilterConditionPB> {
+  @override
+  List<(CheckboxFilterConditionPB, String)> get conditions {
+    return [
+      CheckboxFilterConditionPB.IsChecked,
+      CheckboxFilterConditionPB.IsUnChecked,
+    ].map((e) => (e, e.filterName)).toList();
+  }
+}
+
+final class ChecklistFilterCondition
+    with _GenericCastHelper
+    implements FilterCondition<ChecklistFilterConditionPB> {
+  @override
+  List<(ChecklistFilterConditionPB, String)> get conditions {
+    return [
+      ChecklistFilterConditionPB.IsComplete,
+      ChecklistFilterConditionPB.IsIncomplete,
+    ].map((e) => (e, e.filterName)).toList();
+  }
+}
+
+final class SingleSelectOptionFilterCondition
+    with _GenericCastHelper
+    implements FilterCondition<SelectOptionFilterConditionPB> {
+  @override
+  List<(SelectOptionFilterConditionPB, String)> get conditions {
+    return [
+      SelectOptionFilterConditionPB.OptionIs,
+      SelectOptionFilterConditionPB.OptionIsNot,
+      SelectOptionFilterConditionPB.OptionContains,
+      SelectOptionFilterConditionPB.OptionDoesNotContain,
+      SelectOptionFilterConditionPB.OptionIsEmpty,
+      SelectOptionFilterConditionPB.OptionIsNotEmpty,
+    ].map((e) => (e, e.i18n)).toList();
+  }
+}
+
+final class MultiSelectOptionFilterCondition
+    with _GenericCastHelper
+    implements FilterCondition<SelectOptionFilterConditionPB> {
+  @override
+  List<(SelectOptionFilterConditionPB, String)> get conditions {
+    return [
+      SelectOptionFilterConditionPB.OptionContains,
+      SelectOptionFilterConditionPB.OptionDoesNotContain,
+      SelectOptionFilterConditionPB.OptionIs,
+      SelectOptionFilterConditionPB.OptionIsNot,
+      SelectOptionFilterConditionPB.OptionIsEmpty,
+      SelectOptionFilterConditionPB.OptionIsNotEmpty,
+    ].map((e) => (e, e.i18n)).toList();
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_sort_bottom_sheet.dart

@@ -2,9 +2,13 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
+import 'package:appflowy/plugins/database/application/field/field_info.dart';
+import 'package:appflowy/plugins/database/application/field/sort_entities.dart';
 import 'package:appflowy/plugins/database/grid/application/sort/sort_editor_bloc.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/sort/sort_info.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/header/desktop_field_cell.dart';
+import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -139,7 +143,7 @@ class _Overview extends StatelessWidget {
         return Column(
           children: [
             Expanded(
-              child: state.sortInfos.isEmpty
+              child: state.sorts.isEmpty
                   ? Center(
                       child: Column(
                         mainAxisSize: MainAxisSize.min,
@@ -167,10 +171,10 @@ class _Overview extends StatelessWidget {
                       onReorder: (oldIndex, newIndex) => context
                           .read<SortEditorBloc>()
                           .add(SortEditorEvent.reorderSort(oldIndex, newIndex)),
-                      itemCount: state.sortInfos.length,
+                      itemCount: state.sorts.length,
                       itemBuilder: (context, index) => _SortItem(
                         key: ValueKey("sort_item_$index"),
-                        sort: state.sortInfos[index],
+                        sort: state.sorts[index],
                       ),
                     ),
             ),
@@ -232,7 +236,7 @@ class _Overview extends StatelessWidget {
 class _SortItem extends StatelessWidget {
   const _SortItem({super.key, required this.sort});
 
-  final SortInfo sort;
+  final DatabaseSort sort;
 
   @override
   Widget build(BuildContext context) {
@@ -288,9 +292,18 @@ class _SortItem extends StatelessWidget {
                             child: Row(
                               children: [
                                 Expanded(
-                                  child: FlowyText(
-                                    sort.fieldInfo.name,
-                                    overflow: TextOverflow.ellipsis,
+                                  child: BlocSelector<SortEditorBloc,
+                                      SortEditorState, FieldInfo?>(
+                                    selector: (state) =>
+                                        state.allFields.firstWhereOrNull(
+                                      (field) => field.id == sort.fieldId,
+                                    ),
+                                    builder: (context, field) {
+                                      return FlowyText(
+                                        field?.name ?? "",
+                                        overflow: TextOverflow.ellipsis,
+                                      );
+                                    },
                                   ),
                                 ),
                                 const HSpace(6.0),
@@ -327,7 +340,7 @@ class _SortItem extends StatelessWidget {
                               children: [
                                 Expanded(
                                   child: FlowyText(
-                                    sort.sortPB.condition.name,
+                                    sort.condition.name,
                                   ),
                                 ),
                                 const HSpace(6.0),
@@ -349,11 +362,11 @@ class _SortItem extends StatelessWidget {
           ),
           Positioned(
             right: 8,
-            top: 9,
+            top: 6,
             child: InkWell(
               onTap: () => context
                   .read<SortEditorBloc>()
-                  .add(SortEditorEvent.deleteSort(sort)),
+                  .add(SortEditorEvent.deleteSort(sort.sortId)),
               // steal from the container LongClickReorderWidget thing
               onLongPress: () {},
               borderRadius: BorderRadius.circular(10),
@@ -385,14 +398,14 @@ class _SortDetail extends StatelessWidget {
 
     return isCreatingNewSort
         ? const _SortDetailContent()
-        : BlocSelector<SortEditorBloc, SortEditorState, SortInfo>(
-            selector: (state) => state.sortInfos.firstWhere(
-              (sortInfo) =>
-                  sortInfo.sortId ==
+        : BlocSelector<SortEditorBloc, SortEditorState, DatabaseSort>(
+            selector: (state) => state.sorts.firstWhere(
+              (sort) =>
+                  sort.sortId ==
                   context.read<MobileSortEditorCubit>().state.editingSortId,
             ),
-            builder: (context, sortInfo) {
-              return _SortDetailContent(sortInfo: sortInfo);
+            builder: (context, sort) {
+              return _SortDetailContent(sort: sort);
             },
           );
   }
@@ -400,12 +413,12 @@ class _SortDetail extends StatelessWidget {
 
 class _SortDetailContent extends StatelessWidget {
   const _SortDetailContent({
-    this.sortInfo,
+    this.sort,
   });
 
-  final SortInfo? sortInfo;
+  final DatabaseSort? sort;
 
-  bool get isCreatingNewSort => sortInfo == null;
+  bool get isCreatingNewSort => sort == null;
 
   @override
   Widget build(BuildContext context) {
@@ -419,7 +432,7 @@ class _SortDetailContent extends StatelessWidget {
             length: 2,
             initialIndex: isCreatingNewSort
                 ? 0
-                : sortInfo!.sortPB.condition == SortConditionPB.Ascending
+                : sort!.condition == SortConditionPB.Ascending
                     ? 0
                     : 1,
             child: Container(
@@ -489,7 +502,7 @@ class _SortDetailContent extends StatelessWidget {
           child: BlocBuilder<SortEditorBloc, SortEditorState>(
             builder: (context, state) {
               final fields = state.allFields
-                  .where((field) => field.canCreateSort || field.hasSort)
+                  .where((field) => field.fieldType.canCreateSort)
                   .toList();
               return ListView.builder(
                 itemCount: fields.length,
@@ -501,14 +514,19 @@ class _SortDetailContent extends StatelessWidget {
                               .state
                               .newSortFieldId ==
                           fieldInfo.id
-                      : sortInfo!.fieldId == fieldInfo.id;
+                      : sort!.fieldId == fieldInfo.id;
 
-                  final enabled = fieldInfo.canCreateSort ||
-                      isCreatingNewSort && !fieldInfo.hasSort ||
-                      !isCreatingNewSort && sortInfo!.fieldId == fieldInfo.id;
+                  final canSort =
+                      fieldInfo.fieldType.canCreateSort && !fieldInfo.hasSort;
+                  final beingEdited =
+                      !isCreatingNewSort && sort!.fieldId == fieldInfo.id;
+                  final enabled = canSort || beingEdited;
 
                   return FlowyOptionTile.checkbox(
                     text: fieldInfo.field.name,
+                    leftIcon: FieldIcon(
+                      fieldInfo: fieldInfo,
+                    ),
                     isSelected: isSelected,
                     textColor: enabled ? null : Theme.of(context).disabledColor,
                     showTopBorder: false,
@@ -541,7 +559,7 @@ class _SortDetailContent extends StatelessWidget {
     } else {
       context.read<SortEditorBloc>().add(
             SortEditorEvent.editSort(
-              sortId: sortInfo!.sortId,
+              sortId: sort!.sortId,
               condition: newCondition,
             ),
           );
@@ -554,7 +572,7 @@ class _SortDetailContent extends StatelessWidget {
     } else {
       context.read<SortEditorBloc>().add(
             SortEditorEvent.editSort(
-              sortId: sortInfo!.sortId,
+              sortId: sort!.sortId,
               fieldId: newFieldId,
             ),
           );

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page.dart

@@ -291,7 +291,44 @@ class _HomePageState extends State<_HomePage> {
           },
         );
         break;
-
+      case UserWorkspaceActionType.delete:
+        message = result.fold(
+          (s) {
+            toastType = ToastificationType.success;
+            return LocaleKeys.workspace_deleteSuccess.tr();
+          },
+          (e) {
+            toastType = ToastificationType.error;
+            return '${LocaleKeys.workspace_deleteFailed.tr()}: ${e.msg}';
+          },
+        );
+        break;
+      case UserWorkspaceActionType.leave:
+        message = result.fold(
+          (s) {
+            toastType = ToastificationType.success;
+            return LocaleKeys
+                .settings_workspacePage_leaveWorkspacePrompt_success
+                .tr();
+          },
+          (e) {
+            toastType = ToastificationType.error;
+            return '${LocaleKeys.settings_workspacePage_leaveWorkspacePrompt_fail.tr()}: ${e.msg}';
+          },
+        );
+        break;
+      case UserWorkspaceActionType.rename:
+        message = result.fold(
+          (s) {
+            toastType = ToastificationType.success;
+            return LocaleKeys.workspace_renameSuccess.tr();
+          },
+          (e) {
+            toastType = ToastificationType.error;
+            return '${LocaleKeys.workspace_renameFailed.tr()}: ${e.msg}';
+          },
+        );
+        break;
       default:
         message = null;
         toastType = ToastificationType.error;

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page_header.dart

@@ -121,30 +121,32 @@ class _MobileWorkspace extends StatelessWidget {
           },
           child: Row(
             children: [
-              SizedBox.square(
-                dimension: currentWorkspace.icon.isNotEmpty ? 34.0 : 26.0,
-                child: WorkspaceIcon(
-                  workspace: currentWorkspace,
-                  iconSize: 26,
-                  fontSize: 16.0,
-                  enableEdit: false,
-                  alignment: Alignment.centerLeft,
-                  figmaLineHeight: 16.0,
-                  onSelected: (result) => context.read<UserWorkspaceBloc>().add(
-                        UserWorkspaceEvent.updateWorkspaceIcon(
-                          currentWorkspace.workspaceId,
-                          result.emoji,
-                        ),
+              WorkspaceIcon(
+                workspace: currentWorkspace,
+                iconSize: 36,
+                fontSize: 18.0,
+                enableEdit: true,
+                alignment: Alignment.centerLeft,
+                figmaLineHeight: 26.0,
+                emojiSize: 24.0,
+                borderRadius: 12.0,
+                showBorder: false,
+                onSelected: (result) => context.read<UserWorkspaceBloc>().add(
+                      UserWorkspaceEvent.updateWorkspaceIcon(
+                        currentWorkspace.workspaceId,
+                        result.emoji,
                       ),
-                ),
+                    ),
               ),
               currentWorkspace.icon.isNotEmpty
                   ? const HSpace(2)
                   : const HSpace(8),
-              FlowyText.semibold(
-                currentWorkspace.name,
-                fontSize: 20.0,
-                overflow: TextOverflow.ellipsis,
+              Flexible(
+                child: FlowyText.semibold(
+                  currentWorkspace.name,
+                  fontSize: 20.0,
+                  overflow: TextOverflow.ellipsis,
+                ),
               ),
             ],
           ),
@@ -163,6 +165,8 @@ class _MobileWorkspace extends StatelessWidget {
       showDragHandle: true,
       showCloseButton: true,
       useRootNavigator: true,
+      enableScrollable: true,
+      bottomSheetPadding: context.bottomSheetPadding(),
       title: LocaleKeys.workspace_menuTitle.tr(),
       backgroundColor: Theme.of(context).colorScheme.surface,
       builder: (sheetContext) {

frontend/appflowy_flutter/lib/mobile/presentation/home/workspaces/create_workspace_menu.dart

@@ -0,0 +1,113 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+enum EditWorkspaceNameType {
+  create,
+  edit;
+
+  String get title {
+    switch (this) {
+      case EditWorkspaceNameType.create:
+        return LocaleKeys.workspace_create.tr();
+      case EditWorkspaceNameType.edit:
+        return LocaleKeys.workspace_renameWorkspace.tr();
+    }
+  }
+
+  String get actionTitle {
+    switch (this) {
+      case EditWorkspaceNameType.create:
+        return LocaleKeys.workspace_create.tr();
+      case EditWorkspaceNameType.edit:
+        return LocaleKeys.button_confirm.tr();
+    }
+  }
+}
+
+class EditWorkspaceNameBottomSheet extends StatefulWidget {
+  const EditWorkspaceNameBottomSheet({
+    super.key,
+    required this.type,
+    required this.onSubmitted,
+    required this.workspaceName,
+  });
+
+  final EditWorkspaceNameType type;
+  final void Function(String) onSubmitted;
+
+  // if the workspace name is not empty, it will be used as the initial value of the text field.
+  final String? workspaceName;
+
+  @override
+  State<EditWorkspaceNameBottomSheet> createState() =>
+      _EditWorkspaceNameBottomSheetState();
+}
+
+class _EditWorkspaceNameBottomSheetState
+    extends State<EditWorkspaceNameBottomSheet> {
+  late final TextEditingController _textFieldController;
+
+  final _formKey = GlobalKey<FormState>();
+
+  @override
+  void initState() {
+    super.initState();
+    _textFieldController = TextEditingController(
+      text: widget.workspaceName,
+    );
+  }
+
+  @override
+  void dispose() {
+    _textFieldController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        Form(
+          key: _formKey,
+          child: TextFormField(
+            autofocus: true,
+            controller: _textFieldController,
+            keyboardType: TextInputType.text,
+            decoration: InputDecoration(
+              hintText: LocaleKeys.workspace_defaultName.tr(),
+            ),
+            validator: (value) {
+              if (value == null || value.isEmpty) {
+                return LocaleKeys.workspace_workspaceNameCannotBeEmpty.tr();
+              }
+              return null;
+            },
+            onEditingComplete: _onSubmit,
+          ),
+        ),
+        const VSpace(16),
+        SizedBox(
+          width: double.infinity,
+          child: PrimaryRoundedButton(
+            text: widget.type.actionTitle,
+            fontSize: 16,
+            margin: const EdgeInsets.symmetric(
+              vertical: 16,
+            ),
+            onTap: _onSubmit,
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _onSubmit() {
+    if (_formKey.currentState!.validate()) {
+      final value = _textFieldController.text;
+      widget.onSubmitted.call(value);
+    }
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/home/workspaces/workspace_menu_bottom_sheet.dart

@@ -1,16 +1,23 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/animated_gesture.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
+import 'package:appflowy/util/navigator_context_exntesion.dart';
 import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/members/workspace_member_bloc.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/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 'create_workspace_menu.dart';
+import 'workspace_more_options.dart';
+
 // Only works on mobile.
 class MobileWorkspaceMenu extends StatelessWidget {
   const MobileWorkspaceMenu({
@@ -28,13 +35,13 @@ class MobileWorkspaceMenu extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // user profile
     final List<Widget> children = [
       _WorkspaceUserItem(userProfile: userProfile),
-      const Padding(
-        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 10),
-        child: Divider(height: 0.5),
-      ),
+      _buildDivider(),
     ];
+
+    // workspace list
     for (var i = 0; i < workspaces.length; i++) {
       final workspace = workspaces[i];
       children.add(
@@ -48,10 +55,97 @@ class MobileWorkspaceMenu extends StatelessWidget {
         ),
       );
     }
+
+    // create workspace button
+    children.addAll([
+      _buildDivider(),
+      const _CreateWorkspaceButton(),
+    ]);
+
     return Column(
+      mainAxisSize: MainAxisSize.min,
       children: children,
     );
   }
+
+  Widget _buildDivider() {
+    return const Padding(
+      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+      child: Divider(height: 0.5),
+    );
+  }
+}
+
+class _CreateWorkspaceButton extends StatelessWidget {
+  const _CreateWorkspaceButton();
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 4.0),
+      child: FlowyOptionTile.text(
+        height: 60,
+        showTopBorder: false,
+        showBottomBorder: false,
+        leftIcon: _buildLeftIcon(context),
+        onTap: () => _showCreateWorkspaceBottomSheet(context),
+        content: Expanded(
+          child: Padding(
+            padding: const EdgeInsets.only(left: 16.0),
+            child: FlowyText.medium(
+              LocaleKeys.workspace_create.tr(),
+              fontSize: 14,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _showCreateWorkspaceBottomSheet(BuildContext context) {
+    showMobileBottomSheet(
+      context,
+      showHeader: true,
+      title: LocaleKeys.workspace_create.tr(),
+      showCloseButton: true,
+      showDragHandle: true,
+      showDivider: false,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      builder: (bottomSheetContext) {
+        return EditWorkspaceNameBottomSheet(
+          type: EditWorkspaceNameType.create,
+          workspaceName: LocaleKeys.workspace_defaultName.tr(),
+          onSubmitted: (name) {
+            // create a new workspace
+            Log.info('create a new workspace: $name');
+            bottomSheetContext.popToHome();
+
+            context.read<UserWorkspaceBloc>().add(
+                  UserWorkspaceEvent.createWorkspace(
+                    name,
+                  ),
+                );
+          },
+        );
+      },
+    );
+  }
+
+  Widget _buildLeftIcon(BuildContext context) {
+    return Container(
+      width: 36.0,
+      height: 36.0,
+      padding: const EdgeInsets.all(7.0),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(
+          color: const Color(0x01717171).withOpacity(0.12),
+          width: 0.8,
+        ),
+      ),
+      child: const FlowySvg(FlowySvgs.add_workspace_s),
+    );
+  }
 }
 
 class _WorkspaceUserItem extends StatelessWidget {
@@ -107,63 +201,285 @@ class _WorkspaceMenuItem extends StatelessWidget {
       )..add(const WorkspaceMemberEvent.initial()),
       child: BlocBuilder<WorkspaceMemberBloc, WorkspaceMemberState>(
         builder: (context, state) {
-          final members = state.members;
           return FlowyOptionTile.text(
-            content: Expanded(
-              child: Padding(
-                padding: const EdgeInsets.only(left: 12),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    FlowyText(
-                      workspace.name,
-                      fontSize: 14,
-                      fontWeight: FontWeight.w500,
-                    ),
-                    FlowyText(
-                      state.isLoading
-                          ? ''
-                          : LocaleKeys.settings_appearance_members_membersCount
-                              .plural(
-                              members.length,
-                            ),
-                      fontSize: 10.0,
-                      color: Theme.of(context).hintColor,
-                    ),
-                  ],
-                ),
-              ),
-            ),
             height: 60,
             showTopBorder: showTopBorder,
             showBottomBorder: false,
-            leftIcon: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 4.0),
-              child: WorkspaceIcon(
-                enableEdit: false,
-                iconSize: 26,
-                fontSize: 16.0,
-                figmaLineHeight: 16.0,
+            leftIcon: _WorkspaceMenuItemIcon(workspace: workspace),
+            trailing: _WorkspaceMenuItemTrailing(
+              workspace: workspace,
+              currentWorkspace: currentWorkspace,
+            ),
+            onTap: () => onWorkspaceSelected(workspace),
+            content: Expanded(
+              child: _WorkspaceMenuItemContent(
                 workspace: workspace,
-                onSelected: (result) => context.read<UserWorkspaceBloc>().add(
-                      UserWorkspaceEvent.updateWorkspaceIcon(
-                        workspace.workspaceId,
-                        result.emoji,
-                      ),
-                    ),
               ),
             ),
-            trailing: workspace.workspaceId == currentWorkspace.workspaceId
-                ? const FlowySvg(
-                    FlowySvgs.m_blue_check_s,
-                    blendMode: null,
-                  )
-                : null,
-            onTap: () => onWorkspaceSelected(workspace),
           );
         },
       ),
     );
   }
 }
+
+// - Workspace name
+// - Workspace member count
+class _WorkspaceMenuItemContent extends StatelessWidget {
+  const _WorkspaceMenuItemContent({
+    required this.workspace,
+  });
+
+  final UserWorkspacePB workspace;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 12),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          FlowyText(
+            workspace.name,
+            fontSize: 14,
+            fontWeight: FontWeight.w500,
+            overflow: TextOverflow.ellipsis,
+          ),
+          FlowyText(
+            context.read<WorkspaceMemberBloc>().state.isLoading
+                ? ''
+                : LocaleKeys.settings_appearance_members_membersCount.plural(
+                    context.read<WorkspaceMemberBloc>().state.members.length,
+                  ),
+            fontSize: 10.0,
+            color: Theme.of(context).hintColor,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _WorkspaceMenuItemIcon extends StatelessWidget {
+  const _WorkspaceMenuItemIcon({
+    required this.workspace,
+  });
+
+  final UserWorkspacePB workspace;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 4.0),
+      child: WorkspaceIcon(
+        enableEdit: false,
+        iconSize: 36,
+        emojiSize: 24.0,
+        fontSize: 18.0,
+        figmaLineHeight: 26.0,
+        borderRadius: 12.0,
+        workspace: workspace,
+        onSelected: (result) => context.read<UserWorkspaceBloc>().add(
+              UserWorkspaceEvent.updateWorkspaceIcon(
+                workspace.workspaceId,
+                result.emoji,
+              ),
+            ),
+      ),
+    );
+  }
+}
+
+class _WorkspaceMenuItemTrailing extends StatelessWidget {
+  const _WorkspaceMenuItemTrailing({
+    required this.workspace,
+    required this.currentWorkspace,
+  });
+
+  final UserWorkspacePB workspace;
+  final UserWorkspacePB currentWorkspace;
+
+  @override
+  Widget build(BuildContext context) {
+    const iconSize = Size.square(20);
+    return Row(
+      children: [
+        const HSpace(12.0),
+        // show the check icon if the workspace is the current workspace
+        if (workspace.workspaceId == currentWorkspace.workspaceId)
+          const FlowySvg(
+            FlowySvgs.m_blue_check_s,
+            size: iconSize,
+            blendMode: null,
+          ),
+        const HSpace(15.0),
+        // more options button
+        AnimatedGestureDetector(
+          onTapUp: () => _showMoreOptions(context),
+          child: const FlowySvg(
+            FlowySvgs.workspace_three_dots_s,
+            size: iconSize,
+          ),
+        ),
+        const HSpace(8.0),
+      ],
+    );
+  }
+
+  void _showMoreOptions(BuildContext context) {
+    final actions =
+        context.read<WorkspaceMemberBloc>().state.myRole == AFRolePB.Owner
+            ? [
+                // only the owner can update workspace properties
+                WorkspaceMenuMoreOption.rename,
+                WorkspaceMenuMoreOption.delete,
+              ]
+            : [
+                WorkspaceMenuMoreOption.leave,
+              ];
+
+    showMobileBottomSheet(
+      context,
+      showDragHandle: true,
+      showDivider: false,
+      useRootNavigator: true,
+      backgroundColor: Theme.of(context).colorScheme.surface,
+      builder: (bottomSheetContext) {
+        return WorkspaceMenuMoreOptions(
+          actions: actions,
+          onAction: (action) => _onActions(context, bottomSheetContext, action),
+        );
+      },
+    );
+  }
+
+  void _onActions(
+    BuildContext context,
+    BuildContext bottomSheetContext,
+    WorkspaceMenuMoreOption action,
+  ) {
+    Log.info('execute action in workspace menu bottom sheet: $action');
+
+    switch (action) {
+      case WorkspaceMenuMoreOption.rename:
+        _showRenameWorkspaceBottomSheet(context);
+        break;
+      case WorkspaceMenuMoreOption.invite:
+        _pushToInviteMembersPage(context);
+        break;
+      case WorkspaceMenuMoreOption.delete:
+        _deleteWorkspace(context, bottomSheetContext);
+        break;
+      case WorkspaceMenuMoreOption.leave:
+        _leaveWorkspace(context, bottomSheetContext);
+        break;
+    }
+  }
+
+  void _pushToInviteMembersPage(BuildContext context) {
+    // empty implementation
+    // we don't support invite members in workspace menu
+  }
+
+  void _showRenameWorkspaceBottomSheet(BuildContext context) {
+    showMobileBottomSheet(
+      context,
+      showHeader: true,
+      title: LocaleKeys.workspace_renameWorkspace.tr(),
+      showCloseButton: true,
+      showDragHandle: true,
+      showDivider: false,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      builder: (bottomSheetContext) {
+        return EditWorkspaceNameBottomSheet(
+          type: EditWorkspaceNameType.edit,
+          workspaceName: workspace.name,
+          onSubmitted: (name) {
+            // rename the workspace
+            Log.info('rename the workspace: $name');
+            bottomSheetContext.popToHome();
+
+            context.read<UserWorkspaceBloc>().add(
+                  UserWorkspaceEvent.renameWorkspace(
+                    workspace.workspaceId,
+                    name,
+                  ),
+                );
+          },
+        );
+      },
+    );
+  }
+
+  void _deleteWorkspace(BuildContext context, BuildContext bottomSheetContext) {
+    Navigator.of(bottomSheetContext).pop();
+
+    _showConfirmDialog(
+      context,
+      '${LocaleKeys.space_delete.tr()}: ${workspace.name}',
+      LocaleKeys.workspace_deleteWorkspaceHintText.tr(),
+      LocaleKeys.button_delete.tr(),
+      (_) async {
+        context.read<UserWorkspaceBloc>().add(
+              UserWorkspaceEvent.deleteWorkspace(
+                workspace.workspaceId,
+              ),
+            );
+        context.popToHome();
+      },
+    );
+  }
+
+  void _leaveWorkspace(BuildContext context, BuildContext bottomSheetContext) {
+    Navigator.of(bottomSheetContext).pop();
+
+    _showConfirmDialog(
+      context,
+      '${LocaleKeys.settings_workspacePage_leaveWorkspacePrompt_title.tr()}: ${workspace.name}',
+      LocaleKeys.settings_workspacePage_leaveWorkspacePrompt_content.tr(),
+      LocaleKeys.button_confirm.tr(),
+      (_) async {
+        context.read<UserWorkspaceBloc>().add(
+              UserWorkspaceEvent.leaveWorkspace(
+                workspace.workspaceId,
+              ),
+            );
+        context.popToHome();
+      },
+    );
+  }
+
+  void _showConfirmDialog(
+    BuildContext context,
+    String title,
+    String content,
+    String rightButtonText,
+    void Function(BuildContext context)? onRightButtonPressed,
+  ) {
+    showFlowyCupertinoConfirmDialog(
+      title: title,
+      content: FlowyText(
+        content,
+        fontSize: 14,
+        color: Theme.of(context).hintColor,
+        maxLines: 10,
+      ),
+      leftButton: FlowyText(
+        LocaleKeys.button_cancel.tr(),
+        fontSize: 17.0,
+        figmaLineHeight: 24.0,
+        fontWeight: FontWeight.w500,
+        color: const Color(0xFF007AFF),
+      ),
+      rightButton: FlowyText(
+        rightButtonText,
+        fontSize: 17.0,
+        figmaLineHeight: 24.0,
+        fontWeight: FontWeight.w400,
+        color: const Color(0xFFFE0220),
+      ),
+      onRightButtonPressed: onRightButtonPressed,
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/home/workspaces/workspace_more_options.dart

@@ -0,0 +1,108 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+enum WorkspaceMenuMoreOption {
+  rename,
+  invite,
+  delete,
+  leave,
+}
+
+class WorkspaceMenuMoreOptions extends StatelessWidget {
+  const WorkspaceMenuMoreOptions({
+    super.key,
+    this.isFavorite = false,
+    required this.onAction,
+    required this.actions,
+  });
+
+  final bool isFavorite;
+  final void Function(WorkspaceMenuMoreOption action) onAction;
+  final List<WorkspaceMenuMoreOption> actions;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: actions
+          .map(
+            (action) => _buildActionButton(context, action),
+          )
+          .toList(),
+    );
+  }
+
+  Widget _buildActionButton(
+    BuildContext context,
+    WorkspaceMenuMoreOption action,
+  ) {
+    switch (action) {
+      case WorkspaceMenuMoreOption.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(
+            WorkspaceMenuMoreOption.rename,
+          ),
+        );
+      case WorkspaceMenuMoreOption.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(
+            WorkspaceMenuMoreOption.delete,
+          ),
+        );
+      case WorkspaceMenuMoreOption.invite:
+        return FlowyOptionTile.text(
+          // i18n
+          text: 'Invite',
+          height: 52.0,
+          leftIcon: const FlowySvg(
+            FlowySvgs.workspace_add_member_s,
+            size: Size.square(18),
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            WorkspaceMenuMoreOption.invite,
+          ),
+        );
+      case WorkspaceMenuMoreOption.leave:
+        return FlowyOptionTile.text(
+          text: LocaleKeys.workspace_leaveCurrentWorkspace.tr(),
+          height: 52.0,
+          textColor: Theme.of(context).colorScheme.error,
+          leftIcon: FlowySvg(
+            FlowySvgs.leave_workspace_s,
+            size: const Size.square(18),
+            color: Theme.of(context).colorScheme.error,
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => onAction(
+            WorkspaceMenuMoreOption.leave,
+          ),
+        );
+      default:
+        return const Placeholder();
+    }
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_confirm_dialog.dart

@@ -91,6 +91,7 @@ Future<T?> showFlowyMobileConfirmDialog<T>(
 Future<T?> showFlowyCupertinoConfirmDialog<T>({
   BuildContext? context,
   required String title,
+  Widget? content,
   required Widget leftButton,
   required Widget rightButton,
   void Function(BuildContext context)? onLeftButtonPressed,
@@ -106,6 +107,7 @@ Future<T?> showFlowyCupertinoConfirmDialog<T>({
         maxLines: 10,
         figmaLineHeight: 22.0,
       ),
+      content: content,
       actions: [
         CupertinoDialogAction(
           onPressed: () {

frontend/appflowy_flutter/lib/plugins/database/application/defines.dart

@@ -1,22 +1,21 @@
 import 'dart:collection';
 
-// TODO(RS): remove dependency on presentation code
-import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/filter_info.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/sort/sort_info.dart';
+import 'package:appflowy/plugins/database/application/field/filter_entities.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/database_entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_result/appflowy_result.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 
 import 'field/field_info.dart';
+import 'field/sort_entities.dart';
 import 'row/row_cache.dart';
 import 'row/row_service.dart';
 
 part 'defines.freezed.dart';
 
 typedef OnFieldsChanged = void Function(UnmodifiableListView<FieldInfo>);
-typedef OnFiltersChanged = void Function(List<FilterInfo>);
-typedef OnSortsChanged = void Function(List<SortInfo>);
+typedef OnFiltersChanged = void Function(List<DatabaseFilter>);
+typedef OnSortsChanged = void Function(List<DatabaseSort>);
 typedef OnDatabaseChanged = void Function(DatabasePB);
 
 typedef OnRowsCreated = void Function(List<RowId> rowIds);

frontend/appflowy_flutter/lib/plugins/database/application/field/field_controller.dart

@@ -10,8 +10,6 @@ import 'package:appflowy/plugins/database/domain/filter_listener.dart';
 import 'package:appflowy/plugins/database/domain/filter_service.dart';
 import 'package:appflowy/plugins/database/domain/sort_listener.dart';
 import 'package:appflowy/plugins/database/domain/sort_service.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/filter_info.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/sort/sort_info.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
@@ -21,6 +19,8 @@ import 'package:flutter/foundation.dart';
 
 import '../setting/setting_service.dart';
 import 'field_info.dart';
+import 'filter_entities.dart';
+import 'sort_entities.dart';
 
 class _GridFieldNotifier extends ChangeNotifier {
   List<FieldInfo> _fieldInfos = [];
@@ -39,9 +39,9 @@ class _GridFieldNotifier extends ChangeNotifier {
 }
 
 class _GridFilterNotifier extends ChangeNotifier {
-  List<FilterInfo> _filters = [];
+  List<DatabaseFilter> _filters = [];
 
-  set filters(List<FilterInfo> filters) {
+  set filters(List<DatabaseFilter> filters) {
     _filters = filters;
     notifyListeners();
   }
@@ -50,13 +50,13 @@ class _GridFilterNotifier extends ChangeNotifier {
     notifyListeners();
   }
 
-  List<FilterInfo> get filters => _filters;
+  List<DatabaseFilter> get filters => _filters;
 }
 
 class _GridSortNotifier extends ChangeNotifier {
-  List<SortInfo> _sorts = [];
+  List<DatabaseSort> _sorts = [];
 
-  set sorts(List<SortInfo> sorts) {
+  set sorts(List<DatabaseSort> sorts) {
     _sorts = sorts;
     notifyListeners();
   }
@@ -65,14 +65,14 @@ class _GridSortNotifier extends ChangeNotifier {
     notifyListeners();
   }
 
-  List<SortInfo> get sorts => _sorts;
+  List<DatabaseSort> get sorts => _sorts;
 }
 
 typedef OnReceiveUpdateFields = void Function(List<FieldInfo>);
 typedef OnReceiveField = void Function(FieldInfo);
 typedef OnReceiveFields = void Function(List<FieldInfo>);
-typedef OnReceiveFilters = void Function(List<FilterInfo>);
-typedef OnReceiveSorts = void Function(List<SortInfo>);
+typedef OnReceiveFilters = void Function(List<DatabaseFilter>);
+typedef OnReceiveSorts = void Function(List<DatabaseSort>);
 
 class FieldController {
   FieldController({required this.viewId})
@@ -132,8 +132,8 @@ class FieldController {
 
   // Getters
   List<FieldInfo> get fieldInfos => [..._fieldNotifier.fieldInfos];
-  List<FilterInfo> get filterInfos => [..._filterNotifier?.filters ?? []];
-  List<SortInfo> get sortInfos => [..._sortNotifier?.sorts ?? []];
+  List<DatabaseFilter> get filters => [..._filterNotifier?.filters ?? []];
+  List<DatabaseSort> get sorts => [..._sortNotifier?.sorts ?? []];
   List<GroupSettingPB> get groupSettings =>
       _groupConfigurationByFieldId.entries.map((e) => e.value).toList();
 
@@ -142,22 +142,22 @@ class FieldController {
         .firstWhereOrNull((element) => element.id == fieldId);
   }
 
-  FilterInfo? getFilterByFilterId(String filterId) {
+  DatabaseFilter? getFilterByFilterId(String filterId) {
     return _filterNotifier?.filters
         .firstWhereOrNull((element) => element.filterId == filterId);
   }
 
-  FilterInfo? getFilterByFieldId(String fieldId) {
+  DatabaseFilter? getFilterByFieldId(String fieldId) {
     return _filterNotifier?.filters
         .firstWhereOrNull((element) => element.fieldId == fieldId);
   }
 
-  SortInfo? getSortBySortId(String sortId) {
+  DatabaseSort? getSortBySortId(String sortId) {
     return _sortNotifier?.sorts
         .firstWhereOrNull((element) => element.sortId == sortId);
   }
 
-  SortInfo? getSortByFieldId(String fieldId) {
+  DatabaseSort? getSortByFieldId(String fieldId) {
     return _sortNotifier?.sorts
         .firstWhereOrNull((element) => element.fieldId == fieldId);
   }
@@ -172,21 +172,8 @@ class FieldController {
 
         result.fold(
           (FilterChangesetNotificationPB changeset) {
-            final List<FilterInfo> filters = [];
-            for (final filter in changeset.filters.items) {
-              final fieldInfo = _findFieldInfo(
-                fieldInfos: fieldInfos,
-                fieldId: filter.data.fieldId,
-                fieldType: filter.data.fieldType,
-              );
-
-              if (fieldInfo != null) {
-                final filterInfo = FilterInfo(viewId, filter, fieldInfo);
-                filters.add(filterInfo);
-              }
-            }
-
-            _filterNotifier?.filters = filters;
+            _filterNotifier?.filters =
+                _filterListFromPBs(changeset.filters.items);
             _updateFieldInfos();
           },
           (err) => Log.error(err),
@@ -198,76 +185,55 @@ class FieldController {
   /// Listen for sort changes in the backend.
   void _listenOnSortChanged() {
     void deleteSortFromChangeset(
-      List<SortInfo> newSortInfos,
+      List<DatabaseSort> newDatabaseSorts,
       SortChangesetNotificationPB changeset,
     ) {
       final deleteSortIds = changeset.deleteSorts.map((e) => e.id).toList();
       if (deleteSortIds.isNotEmpty) {
-        newSortInfos.retainWhere(
+        newDatabaseSorts.retainWhere(
           (element) => !deleteSortIds.contains(element.sortId),
         );
       }
     }
 
     void insertSortFromChangeset(
-      List<SortInfo> newSortInfos,
+      List<DatabaseSort> newDatabaseSorts,
       SortChangesetNotificationPB changeset,
     ) {
       for (final newSortPB in changeset.insertSorts) {
-        final sortIndex = newSortInfos
+        final sortIndex = newDatabaseSorts
             .indexWhere((element) => element.sortId == newSortPB.sort.id);
         if (sortIndex == -1) {
-          final fieldInfo = _findFieldInfo(
-            fieldInfos: fieldInfos,
-            fieldId: newSortPB.sort.fieldId,
-            fieldType: null,
+          newDatabaseSorts.insert(
+            newSortPB.index,
+            DatabaseSort.fromPB(newSortPB.sort),
           );
-
-          if (fieldInfo != null) {
-            newSortInfos.insert(
-              newSortPB.index,
-              SortInfo(sortPB: newSortPB.sort, fieldInfo: fieldInfo),
-            );
-          }
         }
       }
     }
 
     void updateSortFromChangeset(
-      List<SortInfo> newSortInfos,
+      List<DatabaseSort> newDatabaseSorts,
       SortChangesetNotificationPB changeset,
     ) {
       for (final updatedSort in changeset.updateSorts) {
-        final sortIndex = newSortInfos.indexWhere(
+        final newDatabaseSort = DatabaseSort.fromPB(updatedSort);
+
+        final sortIndex = newDatabaseSorts.indexWhere(
           (element) => element.sortId == updatedSort.id,
         );
-        // Remove the old filter
+
         if (sortIndex != -1) {
-          newSortInfos.removeAt(sortIndex);
-        }
-
-        final fieldInfo = _findFieldInfo(
-          fieldInfos: fieldInfos,
-          fieldId: updatedSort.fieldId,
-          fieldType: null,
-        );
-
-        if (fieldInfo != null) {
-          final newSortInfo = SortInfo(
-            sortPB: updatedSort,
-            fieldInfo: fieldInfo,
-          );
-          if (sortIndex != -1) {
-            newSortInfos.insert(sortIndex, newSortInfo);
-          } else {
-            newSortInfos.add(newSortInfo);
-          }
+          newDatabaseSorts.removeAt(sortIndex);
+          newDatabaseSorts.insert(sortIndex, newDatabaseSort);
+        } else {
+          newDatabaseSorts.add(newDatabaseSort);
         }
       }
     }
 
     void updateFieldInfos(
-      List<SortInfo> newSortInfos,
+      List<DatabaseSort> newDatabaseSorts,
       SortChangesetNotificationPB changeset,
     ) {
       final changedFieldIds = HashSet<String>.from([
@@ -286,7 +252,7 @@ class FieldController {
           continue;
         }
         newFieldInfos[index] = newFieldInfos[index].copyWith(
-          hasSort: newSortInfos.any((sort) => sort.fieldId == fieldId),
+          hasSort: newDatabaseSorts.any((sort) => sort.fieldId == fieldId),
         );
       }
 
@@ -300,13 +266,13 @@ class FieldController {
         }
         result.fold(
           (SortChangesetNotificationPB changeset) {
-            final List<SortInfo> newSortInfos = sortInfos;
-            deleteSortFromChangeset(newSortInfos, changeset);
-            insertSortFromChangeset(newSortInfos, changeset);
-            updateSortFromChangeset(newSortInfos, changeset);
+            final List<DatabaseSort> newDatabaseSorts = sorts;
+            deleteSortFromChangeset(newDatabaseSorts, changeset);
+            insertSortFromChangeset(newDatabaseSorts, changeset);
+            updateSortFromChangeset(newDatabaseSorts, changeset);
 
-            updateFieldInfos(newSortInfos, changeset);
-            _sortNotifier?.sorts = newSortInfos;
+            updateFieldInfos(newDatabaseSorts, changeset);
+            _sortNotifier?.sorts = newDatabaseSorts;
           },
           (err) => Log.error(err),
         );
@@ -492,9 +458,9 @@ class FieldController {
       _groupConfigurationByFieldId[configuration.fieldId] = configuration;
     }
 
-    _filterNotifier?.filters = _filterInfoListFromPBs(setting.filters.items);
+    _filterNotifier?.filters = _filterListFromPBs(setting.filters.items);
 
-    _sortNotifier?.sorts = _sortInfoListFromPBs(setting.sorts.items);
+    _sortNotifier?.sorts = _sortListFromPBs(setting.sorts.items);
 
     _fieldSettings.clear();
     _fieldSettings.addAll(setting.fieldSettings.items);
@@ -554,7 +520,7 @@ class FieldController {
     return _filterBackendSvc.getAllFilters().then((result) {
       return result.fold(
         (filterPBs) {
-          _filterNotifier?.filters = _filterInfoListFromPBs(filterPBs);
+          _filterNotifier?.filters = _filterListFromPBs(filterPBs);
           return FlowyResult.success(null);
         },
         (err) => FlowyResult.failure(err),
@@ -567,7 +533,7 @@ class FieldController {
     return _sortBackendSvc.getAllSorts().then((result) {
       return result.fold(
         (sortPBs) {
-          _sortNotifier?.sorts = _sortInfoListFromPBs(sortPBs);
+          _sortNotifier?.sorts = _sortListFromPBs(sortPBs);
           return FlowyResult.success(null);
         },
         (err) => FlowyResult.failure(err),
@@ -606,39 +572,13 @@ class FieldController {
   }
 
   /// Attach corresponding `FieldInfo`s to the `FilterPB`s
-  List<FilterInfo> _filterInfoListFromPBs(List<FilterPB> filterPBs) {
-    FilterInfo? getFilterInfo(FilterPB filterPB) {
-      final fieldInfo = _findFieldInfo(
-        fieldInfos: fieldInfos,
-        fieldId: filterPB.data.fieldId,
-        fieldType: filterPB.data.fieldType,
-      );
-      return fieldInfo != null ? FilterInfo(viewId, filterPB, fieldInfo) : null;
-    }
-
-    return filterPBs
-        .map((filterPB) => getFilterInfo(filterPB))
-        .whereType<FilterInfo>()
-        .toList();
+  List<DatabaseFilter> _filterListFromPBs(List<FilterPB> filterPBs) {
+    return filterPBs.map(DatabaseFilter.fromPB).toList();
   }
 
   /// Attach corresponding `FieldInfo`s to the `SortPB`s
-  List<SortInfo> _sortInfoListFromPBs(List<SortPB> sortPBs) {
-    SortInfo? getSortInfo(SortPB sortPB) {
-      final fieldInfo = _findFieldInfo(
-        fieldInfos: fieldInfos,
-        fieldId: sortPB.fieldId,
-        fieldType: null,
-      );
-      return fieldInfo != null
-          ? SortInfo(sortPB: sortPB, fieldInfo: fieldInfo)
-          : null;
-    }
-
-    return sortPBs
-        .map((sortPB) => getSortInfo(sortPB))
-        .whereType<SortInfo>()
-        .toList();
+  List<DatabaseSort> _sortListFromPBs(List<SortPB> sortPBs) {
+    return sortPBs.map(DatabaseSort.fromPB).toList();
   }
 
   void addListener({
@@ -676,7 +616,7 @@ class FieldController {
         if (listenWhen != null && listenWhen() == false) {
           return;
         }
-        onFilters(filterInfos);
+        onFilters(filters);
       }
 
       _filterCallbacks[onFilters] = callback;
@@ -688,7 +628,7 @@ class FieldController {
         if (listenWhen != null && listenWhen() == false) {
           return;
         }
-        onSorts(sortInfos);
+        onSorts(sorts);
       }
 
       _sortCallbacks[onSorts] = callback;
@@ -827,15 +767,3 @@ class RowCacheDependenciesImpl extends RowFieldsDelegate with RowLifeCycle {
     }
   }
 }
-
-FieldInfo? _findFieldInfo({
-  required List<FieldInfo> fieldInfos,
-  required String fieldId,
-  required FieldType? fieldType,
-}) {
-  return fieldInfos.firstWhereOrNull(
-    (element) =>
-        element.id == fieldId &&
-        (fieldType == null || element.fieldType == fieldType),
-  );
-}

frontend/appflowy_flutter/lib/plugins/database/application/field/field_editor_bloc.dart

@@ -77,6 +77,10 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
             _logIfError(result);
             emit(state.copyWith(wasRenameManually: true));
           },
+          updateIcon: (icon) async {
+            final result = await _fieldService.updateField(icon: icon);
+            _logIfError(result);
+          },
           updateTypeOption: (typeOptionData) async {
             final result = await FieldBackendService.updateFieldTypeOption(
               viewId: viewId,
@@ -165,6 +169,7 @@ class FieldEditorEvent with _$FieldEditorEvent {
     final Uint8List typeOptionData,
   ) = _UpdateTypeOption;
   const factory FieldEditorEvent.renameField(final String name) = _RenameField;
+  const factory FieldEditorEvent.updateIcon(String icon) = _UpdateIcon;
   const factory FieldEditorEvent.insertLeft() = _InsertLeft;
   const factory FieldEditorEvent.insertRight() = _InsertRight;
   const factory FieldEditorEvent.toggleFieldVisibility() =

frontend/appflowy_flutter/lib/plugins/database/application/field/field_info.dart

@@ -1,6 +1,5 @@
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
-import 'package:protobuf/protobuf.dart';
 
 part 'field_info.freezed.dart';
 
@@ -30,6 +29,8 @@ class FieldInfo with _$FieldInfo {
 
   String get name => field.name;
 
+  String get icon => field.icon;
+
   bool get isPrimary => field.isPrimary;
 
   double? get width => fieldSettings?.width.toDouble();
@@ -37,69 +38,4 @@ class FieldInfo with _$FieldInfo {
   FieldVisibility? get visibility => fieldSettings?.visibility;
 
   bool? get wrapCellContent => fieldSettings?.wrapCellContent;
-
-  bool get canBeGroup {
-    switch (field.fieldType) {
-      case FieldType.URL:
-      case FieldType.Checkbox:
-      case FieldType.MultiSelect:
-      case FieldType.SingleSelect:
-      case FieldType.DateTime:
-        return true;
-      default:
-        return false;
-    }
-  }
-
-  bool get canCreateFilter {
-    if (isGroupField) {
-      return false;
-    }
-
-    switch (field.fieldType) {
-      case FieldType.Number:
-      case FieldType.Checkbox:
-      case FieldType.MultiSelect:
-      case FieldType.RichText:
-      case FieldType.SingleSelect:
-      case FieldType.Checklist:
-      case FieldType.URL:
-      case FieldType.Time:
-        return true;
-      default:
-        return false;
-    }
-  }
-
-  bool get canCreateSort {
-    if (hasSort) {
-      return false;
-    }
-
-    switch (field.fieldType) {
-      case FieldType.RichText:
-      case FieldType.Checkbox:
-      case FieldType.Number:
-      case FieldType.DateTime:
-      case FieldType.SingleSelect:
-      case FieldType.MultiSelect:
-      case FieldType.LastEditedTime:
-      case FieldType.CreatedTime:
-      case FieldType.Checklist:
-      case FieldType.URL:
-      case FieldType.Time:
-        return true;
-      default:
-        return false;
-    }
-  }
-
-  List<ProtobufEnum> get groupConditions {
-    switch (field.fieldType) {
-      case FieldType.DateTime:
-        return DateConditionPB.values;
-      default:
-        return [];
-    }
-  }
 }

frontend/appflowy_flutter/lib/plugins/database/application/field/filter_entities.dart

@@ -0,0 +1,706 @@
+import 'dart:typed_data';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/database/view/database_filter_bottom_sheet.dart';
+import 'package:appflowy/plugins/database/application/field/field_info.dart';
+import 'package:appflowy/plugins/database/grid/application/filter/select_option_loader.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checkbox.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/checklist.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/date.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/number.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/select_option/condition_list.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/filter/choicechip/text.dart';
+import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart';
+import 'package:appflowy/util/int64_extension.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:fixnum/fixnum.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/widgets.dart';
+
+abstract class DatabaseFilter {
+  const DatabaseFilter({
+    required this.filterId,
+    required this.fieldId,
+    required this.fieldType,
+  });
+
+  factory DatabaseFilter.fromPB(FilterPB filterPB) {
+    final FilterDataPB(:fieldId, :fieldType) = filterPB.data;
+    switch (fieldType) {
+      case FieldType.RichText:
+      case FieldType.URL:
+        final data = TextFilterPB.fromBuffer(filterPB.data.data);
+        return TextFilter(
+          filterId: filterPB.id,
+          fieldId: fieldId,
+          fieldType: fieldType,
+          condition: data.condition,
+          content: data.content,
+        );
+      case FieldType.Number:
+        final data = NumberFilterPB.fromBuffer(filterPB.data.data);
+        return NumberFilter(
+          filterId: filterPB.id,
+          fieldId: fieldId,
+          fieldType: fieldType,
+          condition: data.condition,
+          content: data.content,
+        );
+      case FieldType.Checkbox:
+        final data = CheckboxFilterPB.fromBuffer(filterPB.data.data);
+        return CheckboxFilter(
+          filterId: filterPB.id,
+          fieldId: fieldId,
+          fieldType: fieldType,
+          condition: data.condition,
+        );
+      case FieldType.Checklist:
+        final data = ChecklistFilterPB.fromBuffer(filterPB.data.data);
+        return ChecklistFilter(
+          filterId: filterPB.id,
+          fieldId: fieldId,
+          fieldType: fieldType,
+          condition: data.condition,
+        );
+      case FieldType.SingleSelect:
+      case FieldType.MultiSelect:
+        final data = SelectOptionFilterPB.fromBuffer(filterPB.data.data);
+        return SelectOptionFilter(
+          filterId: filterPB.id,
+          fieldId: fieldId,
+          fieldType: fieldType,
+          condition: data.condition,
+          optionIds: data.optionIds,
+        );
+      case FieldType.LastEditedTime:
+      case FieldType.CreatedTime:
+      case FieldType.DateTime:
+        final data = DateFilterPB.fromBuffer(filterPB.data.data);
+        return DateTimeFilter(
+          filterId: filterPB.id,
+          fieldId: fieldId,
+          fieldType: fieldType,
+          condition: data.condition,
+          timestamp: data.hasTimestamp() ? data.timestamp.toDateTime() : null,
+          start: data.hasStart() ? data.start.toDateTime() : null,
+          end: data.hasEnd() ? data.end.toDateTime() : null,
+        );
+      default:
+        throw ArgumentError();
+    }
+  }
+
+  final String filterId;
+  final String fieldId;
+  final FieldType fieldType;
+
+  String get conditionName;
+
+  bool get canAttachContent;
+
+  String getContentDescription(FieldInfo field);
+
+  Widget getMobileDescription(
+    FieldInfo field, {
+    required VoidCallback onExpand,
+    required void Function(DatabaseFilter filter) onUpdate,
+  }) =>
+      const SizedBox.shrink();
+
+  Uint8List writeToBuffer();
+}
+
+final class TextFilter extends DatabaseFilter {
+  const TextFilter({
+    required super.filterId,
+    required super.fieldId,
+    required super.fieldType,
+    required this.condition,
+    required this.content,
+  });
+
+  final TextFilterConditionPB condition;
+  final String content;
+
+  @override
+  String get conditionName => condition.filterName;
+
+  @override
+  bool get canAttachContent =>
+      condition != TextFilterConditionPB.TextIsEmpty &&
+      condition != TextFilterConditionPB.TextIsNotEmpty;
+
+  @override
+  String getContentDescription(FieldInfo field) {
+    final filterDesc = condition.choicechipPrefix;
+
+    if (condition == TextFilterConditionPB.TextIsEmpty ||
+        condition == TextFilterConditionPB.TextIsNotEmpty) {
+      return filterDesc;
+    }
+
+    return content.isEmpty ? filterDesc : "$filterDesc $content";
+  }
+
+  @override
+  Widget getMobileDescription(
+    FieldInfo field, {
+    required VoidCallback onExpand,
+    required void Function(DatabaseFilter filter) onUpdate,
+  }) {
+    return FilterItemInnerTextField(
+      content: content,
+      enabled: canAttachContent,
+      onSubmitted: (content) {
+        final newFilter = copyWith(content: content);
+        onUpdate(newFilter);
+      },
+    );
+  }
+
+  @override
+  Uint8List writeToBuffer() {
+    final filterPB = TextFilterPB()..condition = condition;
+
+    if (condition != TextFilterConditionPB.TextIsEmpty &&
+        condition != TextFilterConditionPB.TextIsNotEmpty) {
+      filterPB.content = content;
+    }
+    return filterPB.writeToBuffer();
+  }
+
+  TextFilter copyWith({
+    TextFilterConditionPB? condition,
+    String? content,
+  }) {
+    return TextFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition ?? this.condition,
+      content: content ?? this.content,
+    );
+  }
+}
+
+final class NumberFilter extends DatabaseFilter {
+  const NumberFilter({
+    required super.filterId,
+    required super.fieldId,
+    required super.fieldType,
+    required this.condition,
+    required this.content,
+  });
+
+  final NumberFilterConditionPB condition;
+  final String content;
+
+  @override
+  String get conditionName => condition.filterName;
+
+  @override
+  bool get canAttachContent =>
+      condition != NumberFilterConditionPB.NumberIsEmpty &&
+      condition != NumberFilterConditionPB.NumberIsNotEmpty;
+
+  @override
+  String getContentDescription(FieldInfo field) {
+    if (condition == NumberFilterConditionPB.NumberIsEmpty ||
+        condition == NumberFilterConditionPB.NumberIsNotEmpty) {
+      return condition.shortName;
+    }
+
+    return "${condition.shortName} $content";
+  }
+
+  @override
+  Widget getMobileDescription(
+    FieldInfo field, {
+    required VoidCallback onExpand,
+    required void Function(DatabaseFilter filter) onUpdate,
+  }) {
+    return FilterItemInnerTextField(
+      content: content,
+      enabled: canAttachContent,
+      onSubmitted: (content) {
+        final newFilter = copyWith(content: content);
+        onUpdate(newFilter);
+      },
+    );
+  }
+
+  @override
+  Uint8List writeToBuffer() {
+    final filterPB = NumberFilterPB()..condition = condition;
+
+    if (condition != NumberFilterConditionPB.NumberIsEmpty &&
+        condition != NumberFilterConditionPB.NumberIsNotEmpty) {
+      filterPB.content = content;
+    }
+    return filterPB.writeToBuffer();
+  }
+
+  NumberFilter copyWith({
+    NumberFilterConditionPB? condition,
+    String? content,
+  }) {
+    return NumberFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition ?? this.condition,
+      content: content ?? this.content,
+    );
+  }
+}
+
+final class CheckboxFilter extends DatabaseFilter {
+  const CheckboxFilter({
+    required super.filterId,
+    required super.fieldId,
+    required super.fieldType,
+    required this.condition,
+  });
+
+  final CheckboxFilterConditionPB condition;
+
+  @override
+  String get conditionName => condition.filterName;
+
+  @override
+  bool get canAttachContent => false;
+
+  @override
+  String getContentDescription(FieldInfo field) => condition.filterName;
+
+  @override
+  Uint8List writeToBuffer() {
+    return (CheckboxFilterPB()..condition = condition).writeToBuffer();
+  }
+
+  CheckboxFilter copyWith({
+    CheckboxFilterConditionPB? condition,
+  }) {
+    return CheckboxFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition ?? this.condition,
+    );
+  }
+}
+
+final class ChecklistFilter extends DatabaseFilter {
+  const ChecklistFilter({
+    required super.filterId,
+    required super.fieldId,
+    required super.fieldType,
+    required this.condition,
+  });
+
+  final ChecklistFilterConditionPB condition;
+
+  @override
+  String get conditionName => condition.filterName;
+
+  @override
+  bool get canAttachContent => false;
+
+  @override
+  String getContentDescription(FieldInfo field) => condition.filterName;
+
+  @override
+  Uint8List writeToBuffer() {
+    return (ChecklistFilterPB()..condition = condition).writeToBuffer();
+  }
+
+  ChecklistFilter copyWith({
+    ChecklistFilterConditionPB? condition,
+  }) {
+    return ChecklistFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition ?? this.condition,
+    );
+  }
+}
+
+final class SelectOptionFilter extends DatabaseFilter {
+  const SelectOptionFilter({
+    required super.filterId,
+    required super.fieldId,
+    required super.fieldType,
+    required this.condition,
+    required this.optionIds,
+  });
+
+  final SelectOptionFilterConditionPB condition;
+  final List<String> optionIds;
+
+  @override
+  String get conditionName => condition.i18n;
+
+  @override
+  bool get canAttachContent =>
+      condition != SelectOptionFilterConditionPB.OptionIsEmpty &&
+      condition != SelectOptionFilterConditionPB.OptionIsNotEmpty;
+
+  @override
+  String getContentDescription(FieldInfo field) {
+    if (!canAttachContent) {
+      return condition.i18n;
+    }
+
+    final delegate = makeDelegate(field);
+    final options = delegate.getOptions(field);
+
+    final optionNames = options
+        .where((option) => optionIds.contains(option.id))
+        .map((option) => option.name)
+        .join(', ');
+    return "${condition.i18n} $optionNames";
+  }
+
+  @override
+  Widget getMobileDescription(
+    FieldInfo field, {
+    required VoidCallback onExpand,
+    required void Function(DatabaseFilter filter) onUpdate,
+  }) {
+    final delegate = makeDelegate(field);
+    final options = delegate
+        .getOptions(field)
+        .where((option) => optionIds.contains(option.id))
+        .toList();
+
+    return FilterItemInnerButton(
+      onTap: onExpand,
+      child: ListView.separated(
+        physics: const NeverScrollableScrollPhysics(),
+        scrollDirection: Axis.horizontal,
+        separatorBuilder: (context, index) => const HSpace(8),
+        itemCount: options.length,
+        itemBuilder: (context, index) => SelectOptionTag(
+          option: options[index],
+          fontSize: 14,
+          borderRadius: BorderRadius.circular(9),
+          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+        ),
+        padding: const EdgeInsets.symmetric(vertical: 8),
+      ),
+    );
+  }
+
+  @override
+  Uint8List writeToBuffer() {
+    final filterPB = SelectOptionFilterPB()..condition = condition;
+
+    if (canAttachContent) {
+      filterPB.optionIds.addAll(optionIds);
+    }
+
+    return filterPB.writeToBuffer();
+  }
+
+  SelectOptionFilter copyWith({
+    SelectOptionFilterConditionPB? condition,
+    List<String>? optionIds,
+  }) {
+    final options = optionIds ?? this.optionIds;
+    if (fieldType == FieldType.SingleSelect &&
+        (condition == SelectOptionFilterConditionPB.OptionIs ||
+            condition == SelectOptionFilterConditionPB.OptionIsNot) &&
+        options.length > 1) {
+      options.removeRange(1, options.length);
+    }
+    return SelectOptionFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition ?? this.condition,
+      optionIds: optionIds ?? this.optionIds,
+    );
+  }
+
+  SelectOptionFilterDelegate makeDelegate(FieldInfo field) =>
+      field.fieldType == FieldType.SingleSelect
+          ? const SingleSelectOptionFilterDelegateImpl()
+          : const MultiSelectOptionFilterDelegateImpl();
+}
+
+enum DateTimeFilterCondition {
+  on,
+  before,
+  after,
+  onOrBefore,
+  onOrAfter,
+  between,
+  isEmpty,
+  isNotEmpty;
+
+  DateFilterConditionPB toPB(bool isStart) {
+    return isStart
+        ? switch (this) {
+            on => DateFilterConditionPB.DateStartsOn,
+            before => DateFilterConditionPB.DateStartsBefore,
+            after => DateFilterConditionPB.DateStartsAfter,
+            onOrBefore => DateFilterConditionPB.DateStartsOnOrBefore,
+            onOrAfter => DateFilterConditionPB.DateStartsOnOrAfter,
+            between => DateFilterConditionPB.DateStartsBetween,
+            isEmpty => DateFilterConditionPB.DateStartIsEmpty,
+            isNotEmpty => DateFilterConditionPB.DateStartIsNotEmpty,
+          }
+        : switch (this) {
+            on => DateFilterConditionPB.DateEndsOn,
+            before => DateFilterConditionPB.DateEndsBefore,
+            after => DateFilterConditionPB.DateEndsAfter,
+            onOrBefore => DateFilterConditionPB.DateEndsOnOrBefore,
+            onOrAfter => DateFilterConditionPB.DateEndsOnOrAfter,
+            between => DateFilterConditionPB.DateEndsBetween,
+            isEmpty => DateFilterConditionPB.DateEndIsEmpty,
+            isNotEmpty => DateFilterConditionPB.DateEndIsNotEmpty,
+          };
+  }
+
+  String get choiceChipPrefix {
+    return switch (this) {
+      on => "",
+      before => LocaleKeys.grid_dateFilter_choicechipPrefix_before.tr(),
+      after => LocaleKeys.grid_dateFilter_choicechipPrefix_after.tr(),
+      onOrBefore => LocaleKeys.grid_dateFilter_choicechipPrefix_onOrBefore.tr(),
+      onOrAfter => LocaleKeys.grid_dateFilter_choicechipPrefix_onOrAfter.tr(),
+      between => LocaleKeys.grid_dateFilter_choicechipPrefix_between.tr(),
+      isEmpty => LocaleKeys.grid_dateFilter_choicechipPrefix_isEmpty.tr(),
+      isNotEmpty => LocaleKeys.grid_dateFilter_choicechipPrefix_isNotEmpty.tr(),
+    };
+  }
+
+  String get filterName {
+    return switch (this) {
+      on => LocaleKeys.grid_dateFilter_is.tr(),
+      before => LocaleKeys.grid_dateFilter_before.tr(),
+      after => LocaleKeys.grid_dateFilter_after.tr(),
+      onOrBefore => LocaleKeys.grid_dateFilter_onOrBefore.tr(),
+      onOrAfter => LocaleKeys.grid_dateFilter_onOrAfter.tr(),
+      between => LocaleKeys.grid_dateFilter_between.tr(),
+      isEmpty => LocaleKeys.grid_dateFilter_empty.tr(),
+      isNotEmpty => LocaleKeys.grid_dateFilter_notEmpty.tr(),
+    };
+  }
+
+  static List<DateTimeFilterCondition> availableConditionsForFieldType(
+      FieldType fieldType,) {
+    final result = [...values];
+    if (fieldType == FieldType.CreatedTime ||
+        fieldType == FieldType.LastEditedTime) {
+      result.remove(isEmpty);
+      result.remove(isNotEmpty);
+    }
+
+    return result;
+  }
+}
+
+final class DateTimeFilter extends DatabaseFilter {
+  const DateTimeFilter({
+    required super.filterId,
+    required super.fieldId,
+    required super.fieldType,
+    required this.condition,
+    this.timestamp,
+    this.start,
+    this.end,
+  });
+
+  final DateFilterConditionPB condition;
+  final DateTime? timestamp;
+  final DateTime? start;
+  final DateTime? end;
+
+  @override
+  String get conditionName => condition.toCondition().filterName;
+
+  @override
+  bool get canAttachContent => ![
+        DateFilterConditionPB.DateStartIsEmpty,
+        DateFilterConditionPB.DateStartIsNotEmpty,
+        DateFilterConditionPB.DateEndIsEmpty,
+        DateFilterConditionPB.DateEndIsNotEmpty,
+      ].contains(condition);
+
+  @override
+  String getContentDescription(FieldInfo field) {
+    return switch (condition) {
+      DateFilterConditionPB.DateStartIsEmpty ||
+      DateFilterConditionPB.DateStartIsNotEmpty ||
+      DateFilterConditionPB.DateEndIsEmpty ||
+      DateFilterConditionPB.DateEndIsNotEmpty =>
+        condition.toCondition().choiceChipPrefix,
+      DateFilterConditionPB.DateStartsOn ||
+      DateFilterConditionPB.DateEndsOn =>
+        timestamp?.defaultFormat ?? "",
+      DateFilterConditionPB.DateStartsBetween ||
+      DateFilterConditionPB.DateEndsBetween =>
+        "${condition.toCondition().choiceChipPrefix} ${start?.defaultFormat ?? ""} - ${end?.defaultFormat ?? ""}",
+      _ =>
+        "${condition.toCondition().choiceChipPrefix} ${timestamp?.defaultFormat ?? ""}"
+    };
+  }
+
+  @override
+  Widget getMobileDescription(
+    FieldInfo field, {
+    required VoidCallback onExpand,
+    required void Function(DatabaseFilter filter) onUpdate,
+  }) {
+    String? text;
+
+    if (condition.isRange) {
+      text = "${start?.defaultFormat ?? ""} - ${end?.defaultFormat ?? ""}";
+      text = text == " - " ? null : text;
+    } else {
+      text = timestamp.defaultFormat;
+    }
+    return FilterItemInnerButton(
+      onTap: onExpand,
+      child: FlowyText(
+        text ?? "",
+        overflow: TextOverflow.ellipsis,
+      ),
+    );
+  }
+
+  @override
+  Uint8List writeToBuffer() {
+    final filterPB = DateFilterPB()..condition = condition;
+
+    Int64 dateTimeToInt(DateTime dateTime) {
+      return Int64(dateTime.millisecondsSinceEpoch ~/ 1000);
+    }
+
+    switch (condition) {
+      case DateFilterConditionPB.DateStartsOn:
+      case DateFilterConditionPB.DateStartsBefore:
+      case DateFilterConditionPB.DateStartsOnOrBefore:
+      case DateFilterConditionPB.DateStartsAfter:
+      case DateFilterConditionPB.DateStartsOnOrAfter:
+      case DateFilterConditionPB.DateEndsOn:
+      case DateFilterConditionPB.DateEndsBefore:
+      case DateFilterConditionPB.DateEndsOnOrBefore:
+      case DateFilterConditionPB.DateEndsAfter:
+      case DateFilterConditionPB.DateEndsOnOrAfter:
+        if (timestamp != null) {
+          filterPB.timestamp = dateTimeToInt(timestamp!);
+        }
+        break;
+      case DateFilterConditionPB.DateStartsBetween:
+      case DateFilterConditionPB.DateEndsBetween:
+        if (start != null) {
+          filterPB.start = dateTimeToInt(start!);
+        }
+        if (end != null) {
+          filterPB.end = dateTimeToInt(end!);
+        }
+        break;
+      default:
+        break;
+    }
+
+    return filterPB.writeToBuffer();
+  }
+
+  DateTimeFilter copyWithCondition({
+    required bool isStart,
+    required DateTimeFilterCondition condition,
+  }) {
+    return DateTimeFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition.toPB(isStart),
+      start: start,
+      end: end,
+      timestamp: timestamp,
+    );
+  }
+
+  DateTimeFilter copyWithTimestamp({
+    required DateTime timestamp,
+  }) {
+    return DateTimeFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition,
+      start: start,
+      end: end,
+      timestamp: timestamp,
+    );
+  }
+
+  DateTimeFilter copyWithRange({
+    required DateTime? start,
+    required DateTime? end,
+  }) {
+    return DateTimeFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition,
+      start: start,
+      end: end,
+      timestamp: timestamp,
+    );
+  }
+}
+
+final class TimeFilter extends DatabaseFilter {
+  const TimeFilter({
+    required super.filterId,
+    required super.fieldId,
+    required super.fieldType,
+    required this.condition,
+    required this.content,
+  });
+
+  final NumberFilterConditionPB condition;
+  final String content;
+
+  @override
+  String get conditionName => condition.filterName;
+
+  @override
+  bool get canAttachContent =>
+      condition != NumberFilterConditionPB.NumberIsEmpty &&
+      condition != NumberFilterConditionPB.NumberIsNotEmpty;
+
+  @override
+  String getContentDescription(FieldInfo field) {
+    if (condition == NumberFilterConditionPB.NumberIsEmpty ||
+        condition == NumberFilterConditionPB.NumberIsNotEmpty) {
+      return condition.shortName;
+    }
+
+    return "${condition.shortName} $content";
+  }
+
+  @override
+  Uint8List writeToBuffer() {
+    return (NumberFilterPB()
+          ..condition = condition
+          ..content = content)
+        .writeToBuffer();
+  }
+
+  TimeFilter copyWith({NumberFilterConditionPB? condition, String? content}) {
+    return TimeFilter(
+      filterId: filterId,
+      fieldId: fieldId,
+      fieldType: fieldType,
+      condition: condition ?? this.condition,
+      content: content ?? this.content,
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/database/application/field/sort_entities.dart

@@ -0,0 +1,22 @@
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:equatable/equatable.dart';
+
+final class DatabaseSort extends Equatable {
+  const DatabaseSort({
+    required this.sortId,
+    required this.fieldId,
+    required this.condition,
+  });
+
+  DatabaseSort.fromPB(SortPB sort)
+      : sortId = sort.id,
+        fieldId = sort.fieldId,
+        condition = sort.condition;
+
+  final String sortId;
+  final String fieldId;
+  final SortConditionPB condition;
+
+  @override
+  List<Object> get props => [sortId, fieldId, condition];
+}

frontend/appflowy_flutter/lib/plugins/database/board/presentation/board_page.dart

@@ -1,5 +1,6 @@
 import 'dart:io';
 
+import 'package:appflowy/util/field_type_extension.dart';
 import 'package:flutter/material.dart' hide Card;
 import 'package:flutter/services.dart';
 
@@ -11,7 +12,6 @@ import 'package:appflowy/plugins/database/application/row/row_controller.dart';
 import 'package:appflowy/plugins/database/board/application/board_actions_bloc.dart';
 import 'package:appflowy/plugins/database/board/presentation/widgets/board_column_header.dart';
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:appflowy/plugins/database/tab_bar/desktop/setting_menu.dart';
 import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/plugins/database/widgets/card/card_bloc.dart';
@@ -521,7 +521,7 @@ class _BoardColumnFooterState extends State<BoardColumnFooter> {
               FlowySvgs.add_s,
               color: Theme.of(context).hintColor,
             ),
-            text: FlowyText.medium(
+            text: FlowyText(
               LocaleKeys.board_column_createNewCard.tr(),
               color: Theme.of(context).hintColor,
             ),

frontend/appflowy_flutter/lib/plugins/database/board/presentation/toolbar/board_setting_bar.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/plugins/database/application/database_controller.dart';
-import 'package:appflowy/plugins/database/grid/application/filter/filter_menu_bloc.dart';
+import 'package:appflowy/plugins/database/grid/application/filter/filter_editor_bloc.dart';
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/toolbar/filter_button.dart';
 import 'package:appflowy/plugins/database/widgets/setting/setting_button.dart';
@@ -19,35 +19,33 @@ class BoardSettingBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return BlocProvider<DatabaseFilterMenuBloc>(
-      create: (context) => DatabaseFilterMenuBloc(
+    return BlocProvider(
+      create: (context) => FilterEditorBloc(
         viewId: databaseController.viewId,
         fieldController: databaseController.fieldController,
-      )..add(const DatabaseFilterMenuEvent.initial()),
-      child: BlocListener<DatabaseFilterMenuBloc, DatabaseFilterMenuState>(
-        listenWhen: (p, c) => p.isVisible != c.isVisible,
-        listener: (context, state) => toggleExtension.toggle(),
-        child: ValueListenableBuilder<bool>(
-          valueListenable: databaseController.isLoading,
-          builder: (context, value, child) {
-            if (value) {
-              return const SizedBox.shrink();
-            }
-            return SizedBox(
-              height: 20,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.end,
-                children: [
-                  const FilterButton(),
-                  const HSpace(2),
-                  SettingButton(
-                    databaseController: databaseController,
-                  ),
-                ],
-              ),
-            );
-          },
-        ),
+      ),
+      child: ValueListenableBuilder<bool>(
+        valueListenable: databaseController.isLoading,
+        builder: (context, value, child) {
+          if (value) {
+            return const SizedBox.shrink();
+          }
+          return SizedBox(
+            height: 20,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                FilterButton(
+                  toggleExtension: toggleExtension,
+                ),
+                const HSpace(2),
+                SettingButton(
+                  databaseController: databaseController,
+                ),
+              ],
+            ),
+          );
+        },
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database/board/presentation/widgets/board_column_header.dart

@@ -4,7 +4,7 @@ import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/board/application/board_bloc.dart';
 import 'package:appflowy/plugins/database/board/group_ext.dart';
 import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_type_extension.dart';
+import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_board/appflowy_board.dart';
@@ -118,7 +118,7 @@ class GroupOptionsButton extends StatelessWidget {
                 height: GridSize.popoverItemHeight,
                 child: FlowyButton(
                   leftIcon: FlowySvg(action.icon),
-                  text: FlowyText.medium(
+                  text: FlowyText(
                     action.text,
                     lineHeight: 1.0,
                     overflow: TextOverflow.ellipsis,

frontend/appflowy_flutter/lib/plugins/database/board/presentation/widgets/board_hidden_groups.dart

@@ -279,14 +279,14 @@ class HiddenGroupButtonContent extends StatelessWidget {
                                 index: index,
                               ),
                               const HSpace(4),
-                              FlowyText.medium(
+                              FlowyText(
                                 group
                                     .generateGroupName(bloc.databaseController),
                                 overflow: TextOverflow.ellipsis,
                               ),
                               const HSpace(6),
                               Expanded(
-                                child: FlowyText.medium(
+                                child: FlowyText(
                                   group.rows.length.toString(),
                                   overflow: TextOverflow.ellipsis,
                                   color: Theme.of(context).hintColor,
@@ -387,7 +387,7 @@ class HiddenGroupPopupItemList extends StatelessWidget {
             final cells = <Widget>[
               Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
-                child: FlowyText.medium(
+                child: FlowyText(
                   group.generateGroupName(bloc.databaseController),
                   fontSize: 10,
                   color: Theme.of(context).hintColor,
@@ -471,7 +471,7 @@ class HiddenGroupPopupItem extends StatelessWidget {
         text: cellBuilder.build(
           cellContext: cellContext,
           styleMap: {FieldType.RichText: _titleCellStyle(context)},
-          hasNotes: !rowMeta.isDocumentEmpty,
+          hasNotes: false,
         ),
         onTap: onPressed,
       ),

frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/calendar_day.dart

@@ -326,7 +326,7 @@ class _DayBadge extends StatelessWidget {
             width: isToday ? size : null,
             height: isToday ? size : null,
             child: Center(
-              child: FlowyText.medium(
+              child: FlowyText(
                 dayString,
                 fontSize: UniversalPlatform.isMobile ? 12 : 11,
                 color: dayTextColor,

frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/calendar_event_card.dart

@@ -1,3 +1,5 @@
+import 'package:appflowy/plugins/database/application/row/row_controller.dart';
+import 'package:appflowy/plugins/database/widgets/row/row_detail.dart';
 import 'package:flutter/material.dart';
 
 import 'package:appflowy/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart';
@@ -168,6 +170,22 @@ class _EventCardState extends State<EventCard> {
             databaseController: widget.databaseController,
             rowMeta: widget.event.event.rowMeta,
             layoutSettings: settings,
+            onExpand: () {
+              final rowController = RowController(
+                rowMeta: widget.event.event.rowMeta,
+                viewId: widget.databaseController.viewId,
+                rowCache: widget.databaseController.rowCache,
+              );
+
+              FlowyOverlay.show(
+                context: context,
+                builder: (_) => RowDetailPage(
+                  databaseController: widget.databaseController,
+                  rowController: rowController,
+                  userProfile: context.read<CalendarBloc>().userProfile,
+                ),
+              );
+            },
           ),
         );
       },