chore: merge branch 'upstream/main' into HEAD

.github/workflows/docker_ci.yml

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

.github/workflows/flutter_ci.yaml

@@ -248,10 +248,13 @@ jobs:
         env:
           BACKEND_VERSION: 0.3.24-amd64
         run: |
-          docker compose down -v --remove-orphans
-          docker compose pull
-          docker compose up -d
-          sleep 10
+          if [ "$(docker ps --filter name=appflowy-cloud -q)" == "" ]; then
+            docker compose pull
+            docker compose up -d
+            sleep 10
+          else
+            echo "Docker container 'appflowy-cloud' is already running."
+          fi
 
       - name: Checkout source code
         uses: actions/checkout@v4

.github/workflows/ios_ci.yaml

@@ -28,20 +28,35 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  build:
-    if: github.event.pull_request.draft != true
-    strategy:
-      fail-fast: true
-      matrix:
-        os: [ macos-14 ]
-    runs-on: ${{ matrix.os }}
+  build-self-hosted:
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: self-hosted
+
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v2
+
+      - name: Build AppFlowy
+        working-directory: frontend
+        run: |
+          cargo make --profile development-ios-arm64-sim appflowy-core-dev-ios
+          cargo make --profile development-ios-arm64-sim code_generation
+
+      - uses: futureware-tech/simulator-action@v3
+        id: simulator-action
+        with:
+          model: 'iPhone 15'
+          shutdown_after_job: false
+
+  build-macos:
+    if: github.event.pull_request.head.repo.full_name != github.repository
+    runs-on: macos-latest
 
     steps:
       - name: Checkout source code
         uses: actions/checkout@v2
 
       - name: Install Rust toolchain
-        id: rust_toolchain
         uses: actions-rs/toolchain@v1
         with:
           toolchain: ${{ env.RUST_TOOLCHAIN }}
@@ -49,8 +64,7 @@ jobs:
           override: true
           profile: minimal
 
-      - name: Install flutter
-        id: flutter
+      - name: Install Flutter
         uses: subosito/flutter-action@v2
         with:
           channel: "stable"
@@ -59,7 +73,7 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          prefix-key: ${{ matrix.os }}
+          prefix-key: macos-latest
           workspaces: |
             frontend/rust-lib
 

.github/workflows/release.yml

@@ -479,6 +479,24 @@ jobs:
           cache-from: type=registry,ref=${{ secrets.DOCKER_HUB_USERNAME }}/af_build_cache:buildcache
           cache-to: type=registry,ref=${{ secrets.DOCKER_HUB_USERNAME }}/af_build_cache:buildcache,mode=max
 
+  notify-failure:
+    runs-on: ubuntu-latest
+    needs:
+      - build-for-macOS-x86_64
+      - build-for-windows
+      - build-for-linux
+    if: failure()
+    steps:
+      - uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          text: |
+            🔴🔴🔴Workflow ${{ github.workflow }} in repository ${{ github.repository }} was failed 🔴🔴🔴.
+          fields: repo,message,author,eventName,ref,workflow
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.RELEASE_SLACK_WEBHOOK }}
+        if: always()
+
   notify-discord:
     runs-on: ubuntu-latest
     needs:

.github/workflows/rust_ci.yaml

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

.github/workflows/tauri2_ci.yaml

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

CHANGELOG.md

@@ -1,9 +1,23 @@
 # Release Notes
-## Version 0.6.4 - 15/07/2024
+## Version 0.6.6 - 30/07/2024
 ### New Features
--
+- Upgrade your workspace to a premium plan to unlock more features and storage.
+- Image galleries and drag-and-drop image support in documents.
+
 ### Bug Fixes
--
+- Fix minor UI issues on Desktop and Mobile.
+
+## Version 0.6.5 - 24/07/2024
+### New Features
+- Publish a Database to the Web
+
+## Version 0.6.4 - 16/07/2024
+### New Features
+- Enhanced the message style on the AI chat page.
+- Added the ability to choose cursor color and selection color from a palette in settings page.
+### Bug Fixes
+- Optimized the performance for loading recent pages.
+- Fixed an issue where the cursor would jump randomly when typing in the document title on mobile.
 
 ## Version 0.6.3 - 08/07/2024
 ### New Features

frontend/.vscode/launch.json

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

frontend/Makefile.toml

@@ -26,7 +26,7 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CRATE_FS_NAME = "dart_ffi"
 CARGO_MAKE_CRATE_NAME = "dart-ffi"
 LIB_NAME = "dart_ffi"
-APPFLOWY_VERSION = "0.6.4"
+APPFLOWY_VERSION = "0.6.7"
 FLUTTER_DESKTOP_FEATURES = "dart"
 PRODUCT_NAME = "AppFlowy"
 MACOSX_DEPLOYMENT_TARGET = "11.0"

frontend/appflowy_flutter/integration_test/cloud/anon_user_continue_test.dart

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

frontend/appflowy_flutter/integration_test/cloud/appflowy_cloud_auth_test.dart

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

frontend/appflowy_flutter/integration_test/cloud/user_setting_sync_test.dart

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

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

@@ -1,11 +1,10 @@
 import 'dart:io';
 
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -246,10 +245,6 @@ void main() {
           expect(editorState.document.root.children.length, 2);
           final node = editorState.getNodeAtPath([0])!;
           expect(node.type, ImageBlockKeys.type);
-          expect(
-            node.attributes[ImageBlockKeys.url],
-            'https://user-images.githubusercontent.com/9403740/262918875-603f4adb-58dd-49b5-8201-341d354935fd.png',
-          );
         },
       );
     },

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

@@ -12,10 +12,13 @@ import 'document_more_actions_test.dart' as document_more_actions_test;
 import 'document_text_direction_test.dart' as document_text_direction_test;
 import 'document_with_cover_image_test.dart' as document_with_cover_image_test;
 import 'document_with_database_test.dart' as document_with_database_test;
+import 'document_with_file_test.dart' as document_with_file_test;
 import 'document_with_image_block_test.dart' as document_with_image_block_test;
 import 'document_with_inline_math_equation_test.dart'
     as document_with_inline_math_equation_test;
 import 'document_with_inline_page_test.dart' as document_with_inline_page_test;
+import 'document_with_multi_image_block_test.dart'
+    as document_with_multi_image_block_test;
 import 'document_with_outline_block_test.dart' as document_with_outline_block;
 import 'document_with_toggle_list_test.dart' as document_with_toggle_list_test;
 import 'edit_document_test.dart' as document_edit_test;
@@ -38,6 +41,8 @@ void startTesting() {
   document_text_direction_test.main();
   document_option_action_test.main();
   document_with_image_block_test.main();
+  document_with_multi_image_block_test.main();
   document_inline_page_reference_test.main();
   document_more_actions_test.main();
+  document_with_file_test.main();
 }

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

@@ -0,0 +1,166 @@
+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/document/presentation/editor_plugins/file/file_upload_menu.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+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_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:path/path.dart' as p;
+import 'package:path_provider/path_provider.dart';
+
+import '../../shared/mock/mock_file_picker.dart';
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  group('file block in document', () {
+    testWidgets('insert a file from local file + rename file', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(name: 'Insert file test');
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName('File');
+      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');
+      final tempDirectory = await getTemporaryDirectory();
+      final filePath = p.join(tempDirectory.path, 'sample.jpeg');
+      final file = File(filePath)..writeAsBytesSync(image.buffer.asUint8List());
+
+      mockPickFilePaths(paths: [filePath]);
+
+      await getIt<KeyValueStorage>().set(KVKeys.kCloudType, '0');
+      await tester.tap(
+        find.text(LocaleKeys.document_plugins_file_fileUploadHint.tr()),
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(FileUploadMenu), findsNothing);
+      expect(find.byType(FileBlockComponent), findsOneWidget);
+
+      final node = tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(node.type, FileBlockKeys.type);
+      expect(node.attributes[FileBlockKeys.url], isNotEmpty);
+      expect(
+        node.attributes[FileBlockKeys.urlType],
+        FileUrlType.local.toIntValue(),
+      );
+
+      // Check the name of the file is correctly extracted
+      expect(node.attributes[FileBlockKeys.name], 'sample.jpeg');
+      expect(find.text('sample.jpeg'), findsOneWidget);
+
+      const newName = "Renamed file";
+
+      // Hover on the widget to see the three dots to open FileBlockMenu
+      await tester.hoverOnWidget(
+        find.byType(FileBlockComponent),
+        onHover: () async {
+          await tester.tap(find.byType(FileMenuTrigger));
+          await tester.pumpAndSettle();
+
+          await tester.tap(
+            find.text(LocaleKeys.document_plugins_file_renameFile_title.tr()),
+          );
+        },
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(FlowyTextField), findsOneWidget);
+      await tester.enterText(find.byType(FlowyTextField), newName);
+      await tester.pump();
+
+      await tester.tap(find.text(LocaleKeys.button_save.tr()));
+      await tester.pumpAndSettle();
+
+      final updatedNode =
+          tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(updatedNode.attributes[FileBlockKeys.name], newName);
+      expect(find.text(newName), findsOneWidget);
+
+      // remove the temp file
+      file.deleteSync();
+    });
+
+    testWidgets('insert a file from network', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(name: 'Insert file test');
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName('File');
+      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
+      await tester.tapButtonWithName(
+        LocaleKeys.document_plugins_file_networkTab.tr(),
+      );
+      await tester.pumpAndSettle();
+
+      const url =
+          'https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=david-marcu-78A265wPiO4-unsplash.jpg&w=640';
+      await tester.enterText(
+        find.descendant(
+          of: find.byType(FileUploadMenu),
+          matching: find.byType(FlowyTextField),
+        ),
+        url,
+      );
+      await tester.tapButton(
+        find.descendant(
+          of: find.byType(FileUploadMenu),
+          matching: find.text(
+            LocaleKeys.document_plugins_file_networkAction.tr(),
+            findRichText: true,
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(FileUploadMenu), findsNothing);
+      expect(find.byType(FileBlockComponent), findsOneWidget);
+
+      final node = tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(node.type, FileBlockKeys.type);
+      expect(node.attributes[FileBlockKeys.url], isNotEmpty);
+      expect(
+        node.attributes[FileBlockKeys.urlType],
+        FileUrlType.network.toIntValue(),
+      );
+
+      // Check the name is correctly extracted from the url
+      expect(
+        node.attributes[FileBlockKeys.name],
+        'photo-1469474968028-56623f02e42e',
+      );
+      expect(find.text('photo-1469474968028-56623f02e42e'), findsOneWidget);
+    });
+  });
+}

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

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

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

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

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

@@ -1,6 +1,6 @@
 import 'dart:io';
 
-import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
+import 'package:appflowy/plugins/shared/share/share_button.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:path/path.dart' as p;
@@ -51,9 +51,8 @@ void main() {
           },
         );
 
-        final shareButton = find.byType(DocumentShareButton);
-        final shareButtonState =
-            tester.widget(shareButton) as DocumentShareButton;
+        final shareButton = find.byType(ShareButton);
+        final shareButtonState = tester.widget(shareButton) as ShareButton;
 
         final path = await mockSaveFilePath(
           p.join(

frontend/appflowy_flutter/integration_test/shared/auth_operation.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
 import 'package:appflowy/workspace/presentation/settings/pages/settings_account_view.dart';
@@ -7,6 +5,7 @@ import 'package:appflowy/workspace/presentation/settings/widgets/setting_appflow
 import 'package:appflowy/workspace/presentation/settings/widgets/setting_supabase_cloud.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'util.dart';
@@ -29,8 +28,8 @@ extension AppFlowyAuthTest on WidgetTester {
 
     await tapButton(find.byType(SignInOutButton));
 
-    expectToSeeText(LocaleKeys.button_confirm.tr());
-    await tapButtonWithName(LocaleKeys.button_confirm.tr());
+    expectToSeeText(LocaleKeys.button_ok.tr());
+    await tapButtonWithName(LocaleKeys.button_ok.tr());
   }
 
   Future<void> tapSignInAsGuest() async {

frontend/appflowy_flutter/integration_test/shared/common_operations.dart

@@ -1,17 +1,12 @@
 import 'dart:io';
 
-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';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart';
-import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
+import 'package:appflowy/plugins/shared/share/share_button.dart';
 import 'package:appflowy/shared/feature_flags.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/presentation/screens/screens.dart';
@@ -35,6 +30,10 @@ 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';
@@ -259,7 +258,7 @@ extension CommonOperations on WidgetTester {
   /// Tap the share button above the document page.
   Future<void> tapShareButton() async {
     final shareButton = find.byWidgetPredicate(
-      (widget) => widget is DocumentShareButton,
+      (widget) => widget is ShareButton,
     );
     await tapButton(shareButton);
   }

frontend/appflowy_flutter/integration_test/shared/editor_test_operations.dart

@@ -1,6 +1,9 @@
 import 'dart:async';
 import 'dart:ui';
 
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_skin_tone.dart';
@@ -10,12 +13,10 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/bl
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cover_editor.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/image/embed_image_url_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/embed_image_url_widget.dart';
 import 'package:appflowy/plugins/inline_actions/widgets/inline_actions_handler.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
 import 'package:flutter_test/flutter_test.dart';
 
@@ -171,7 +172,17 @@ class EditorOperations {
   ///
   /// Must call [showSlashMenu] first.
   Future<void> tapSlashMenuItemWithName(String name) async {
+    final slashMenu = find
+        .ancestor(
+          of: find.byType(SelectionMenuItemWidget),
+          matching: find.byWidgetPredicate(
+            (widget) => widget is Scrollable,
+          ),
+        )
+        .first;
     final slashMenuItem = find.text(name, findRichText: true);
+    await tester.scrollUntilVisible(slashMenuItem, 200, scrollable: slashMenu);
+    // await tester.ensureVisible(slashMenuItem);
     await tester.tapButton(slashMenuItem);
   }
 

frontend/appflowy_flutter/integration_test/shared/settings.dart

@@ -12,17 +12,23 @@ import 'package:flowy_infra_ui/style_widget/text_field.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import '../desktop/board/board_hide_groups_test.dart';
-
 import 'base.dart';
 import 'common_operations.dart';
 
 extension AppFlowySettings on WidgetTester {
   /// Open settings page
   Future<void> openSettings() async {
+    final settingsDialog = find.byType(SettingsDialog);
+    // tap empty area to close the settings page
+    while (settingsDialog.evaluate().isNotEmpty) {
+      await tapAt(Offset.zero);
+      await pumpAndSettle();
+    }
+
     final settingsButton = find.byType(UserSettingButton);
     expect(settingsButton, findsOneWidget);
     await tapButton(settingsButton);
-    final settingsDialog = find.byType(SettingsDialog);
+
     expect(settingsDialog, findsOneWidget);
     return;
   }

frontend/appflowy_flutter/ios/Podfile.lock

@@ -175,7 +175,7 @@ SPEC CHECKSUMS:
   file_picker: 09aa5ec1ab24135ccd7a1621c46c84134bfd6655
   flowy_infra_ui: 0455e1fa8c51885aa1437848e361e99419f34ebc
   Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
-  fluttertoast: 31b00dabfa7fb7bacd9e7dbee580d7a2ff4bf265
+  fluttertoast: e9a18c7be5413da53898f660530c56f35edfba9c
   image_gallery_saver: cb43cc43141711190510e92c460eb1655cd343cb
   image_picker_ios: 99dfe1854b4fa34d0364e74a78448a0151025425
   integration_test: ce0a3ffa1de96d1a89ca0ac26fca7ea18a749ef4

frontend/appflowy_flutter/lib/core/frameless_window.dart

@@ -1,16 +1,14 @@
 import 'dart:io';
 
-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/shared/window_title_bar.dart';
-import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy/workspace/application/home/home_setting_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class CocoaWindowChannel {
@@ -104,19 +102,17 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
       return const SizedBox.shrink();
     }
 
-    final color = Theme.of(context).isLightMode ? Colors.white : Colors.black;
     final textSpan = TextSpan(
       children: [
         TextSpan(
           text: '${LocaleKeys.sideBar_openSidebar.tr()}\n',
-          style: Theme.of(context).textTheme.bodyMedium!.copyWith(color: color),
+          style: context.tooltipTextStyle(),
         ),
         TextSpan(
           text: Platform.isMacOS ? '⌘+.' : 'Ctrl+\\',
-          style: Theme.of(context)
-              .textTheme
-              .bodyMedium!
-              .copyWith(color: Theme.of(context).hintColor),
+          style: context
+              .tooltipTextStyle()
+              ?.copyWith(color: Theme.of(context).hintColor),
         ),
       ],
     );

frontend/appflowy_flutter/lib/mobile/application/notification/notification_reminder_bloc.dart

@@ -0,0 +1,194 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/application/document_data_pb_extension.dart';
+import 'package:appflowy/plugins/document/application/document_service.dart';
+import 'package:appflowy/user/application/reminder/reminder_extension.dart';
+import 'package:appflowy/workspace/application/settings/date_time/date_format_ext.dart';
+import 'package:appflowy/workspace/application/settings/date_time/time_format_ext.dart';
+import 'package:appflowy/workspace/application/view/prelude.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_result/appflowy_result.dart';
+import 'package:bloc/bloc.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:time/time.dart';
+
+part 'notification_reminder_bloc.freezed.dart';
+
+class NotificationReminderBloc
+    extends Bloc<NotificationReminderEvent, NotificationReminderState> {
+  NotificationReminderBloc() : super(NotificationReminderState.initial()) {
+    on<NotificationReminderEvent>((event, emit) async {
+      await event.when(
+        initial: (reminder, dateFormat, timeFormat) async {
+          this.reminder = reminder;
+
+          final createdAt = await _getCreatedAt(
+            reminder,
+            dateFormat,
+            timeFormat,
+          );
+          final view = await _getView(reminder);
+          final node = await _getContent(reminder);
+
+          if (view == null || node == null) {
+            emit(
+              NotificationReminderState(
+                createdAt: createdAt,
+                pageTitle: '',
+                reminderContent: '',
+                status: NotificationReminderStatus.error,
+              ),
+            );
+          } else {
+            emit(
+              NotificationReminderState(
+                createdAt: createdAt,
+                pageTitle: view.name,
+                view: view,
+                reminderContent: node.delta?.toPlainText() ?? '',
+                nodes: [node],
+                status: NotificationReminderStatus.loaded,
+              ),
+            );
+          }
+        },
+        reset: () {},
+      );
+    });
+  }
+
+  late final ReminderPB reminder;
+
+  Future<String> _getCreatedAt(
+    ReminderPB reminder,
+    UserDateFormatPB dateFormat,
+    UserTimeFormatPB timeFormat,
+  ) async {
+    final rCreatedAt = reminder.createdAt;
+    final createdAt = rCreatedAt != null
+        ? _formatTimestamp(
+            rCreatedAt,
+            timeFormat: timeFormat,
+            dateFormate: dateFormat,
+          )
+        : '';
+    return createdAt;
+  }
+
+  Future<ViewPB?> _getView(ReminderPB reminder) async {
+    return ViewBackendService.getView(reminder.objectId)
+        .fold((s) => s, (_) => null);
+  }
+
+  Future<Node?> _getContent(ReminderPB reminder) async {
+    final blockId = reminder.meta[ReminderMetaKeys.blockId];
+
+    if (blockId == null) {
+      return null;
+    }
+
+    final document = await DocumentService()
+        .openDocument(
+          documentId: reminder.objectId,
+        )
+        .fold((s) => s.toDocument(), (_) => null);
+
+    if (document == null) {
+      return null;
+    }
+
+    final node = _searchById(document.root, blockId);
+
+    if (node == null) {
+      return null;
+    }
+
+    return node;
+  }
+
+  Node? _searchById(Node current, String id) {
+    if (current.id == id) {
+      return current;
+    }
+
+    if (current.children.isNotEmpty) {
+      for (final child in current.children) {
+        final node = _searchById(child, id);
+
+        if (node != null) {
+          return node;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  String _formatTimestamp(
+    int timestamp, {
+    required UserDateFormatPB dateFormate,
+    required UserTimeFormatPB timeFormat,
+  }) {
+    final now = DateTime.now();
+    final dateTime = DateTime.fromMillisecondsSinceEpoch(timestamp);
+    final difference = now.difference(dateTime);
+    final String date;
+
+    if (difference.inMinutes < 1) {
+      date = LocaleKeys.sideBar_justNow.tr();
+    } else if (difference.inHours < 1 && dateTime.isToday) {
+      // Less than 1 hour
+      date = LocaleKeys.sideBar_minutesAgo
+          .tr(namedArgs: {'count': difference.inMinutes.toString()});
+    } else if (difference.inHours >= 1 && dateTime.isToday) {
+      // in same day
+      date = timeFormat.formatTime(dateTime);
+    } else {
+      date = dateFormate.formatDate(dateTime, false);
+    }
+
+    return date;
+  }
+}
+
+@freezed
+class NotificationReminderEvent with _$NotificationReminderEvent {
+  const factory NotificationReminderEvent.initial(
+    ReminderPB reminder,
+    UserDateFormatPB dateFormat,
+    UserTimeFormatPB timeFormat,
+  ) = _Initial;
+
+  const factory NotificationReminderEvent.reset() = _Reset;
+}
+
+enum NotificationReminderStatus {
+  initial,
+  loading,
+  loaded,
+  error,
+}
+
+@freezed
+class NotificationReminderState with _$NotificationReminderState {
+  const NotificationReminderState._();
+
+  const factory NotificationReminderState({
+    required String createdAt,
+    required String pageTitle,
+    required String reminderContent,
+    @Default(NotificationReminderStatus.initial)
+    NotificationReminderStatus status,
+    @Default([]) List<Node> nodes,
+    ViewPB? view,
+  }) = _NotificationReminderState;
+
+  factory NotificationReminderState.initial() =>
+      const NotificationReminderState(
+        createdAt: '',
+        pageTitle: '',
+        reminderContent: '',
+      );
+}

frontend/appflowy_flutter/lib/mobile/application/page_style/document_page_style_bloc.dart

@@ -23,6 +23,9 @@ class DocumentPageStyleBloc
         await event.when(
           initial: () async {
             try {
+              if (view.id.isEmpty) {
+                return;
+              }
               final layoutObject =
                   await ViewBackendService.getView(view.id).fold(
                 (s) => jsonDecode(s.extra),
@@ -146,7 +149,7 @@ class DocumentPageStyleBloc
   ) {
     double padding = switch (fontLayout) {
       PageStyleFontLayout.small => 1.0,
-      PageStyleFontLayout.normal => 2.0,
+      PageStyleFontLayout.normal => 1.0,
       PageStyleFontLayout.large => 4.0,
     };
     switch (lineHeightLayout) {
@@ -162,6 +165,16 @@ class DocumentPageStyleBloc
     return max(0, padding);
   }
 
+  double calculateIconScale(
+    PageStyleFontLayout fontLayout,
+  ) {
+    return switch (fontLayout) {
+      PageStyleFontLayout.small => 0.8,
+      PageStyleFontLayout.normal => 1.0,
+      PageStyleFontLayout.large => 1.2,
+    };
+  }
+
   PageStyleFontLayout _getSelectedFontLayout(Map layoutObject) {
     final fontLayout = layoutObject[ViewExtKeys.fontLayoutKey] ??
         PageStyleFontLayout.normal.toString();

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

@@ -0,0 +1,54 @@
+import 'package:appflowy/shared/feedback_gesture_detector.dart';
+import 'package:flutter/material.dart';
+
+class AnimatedGestureDetector extends StatefulWidget {
+  const AnimatedGestureDetector({
+    super.key,
+    this.scaleFactor = 0.98,
+    this.feedback = true,
+    this.duration = const Duration(milliseconds: 100),
+    this.alignment = Alignment.center,
+    this.behavior = HitTestBehavior.opaque,
+    this.onTapUp,
+    required this.child,
+  });
+
+  final Widget child;
+  final double scaleFactor;
+  final Duration duration;
+  final Alignment alignment;
+  final bool feedback;
+  final HitTestBehavior behavior;
+  final VoidCallback? onTapUp;
+
+  @override
+  State<AnimatedGestureDetector> createState() =>
+      _AnimatedGestureDetectorState();
+}
+
+class _AnimatedGestureDetectorState extends State<AnimatedGestureDetector> {
+  double scale = 1.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: widget.behavior,
+      onTapUp: (details) {
+        setState(() => scale = 1.0);
+
+        HapticFeedbackType.light.call();
+
+        widget.onTapUp?.call();
+      },
+      onTapDown: (details) {
+        setState(() => scale = widget.scaleFactor);
+      },
+      child: AnimatedScale(
+        scale: scale,
+        alignment: widget.alignment,
+        duration: widget.duration,
+        child: widget.child,
+      ),
+    );
+  }
+}

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

@@ -125,7 +125,7 @@ class _MobileViewPageState extends State<MobileViewPage> {
               return child;
             },
           )
-        : child;
+        : SafeArea(child: child);
     return Scaffold(
       extendBodyBehindAppBar: isDocument,
       appBar: appBar,

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

@@ -24,9 +24,10 @@ class AddNewPageWidgetBottomSheet extends StatelessWidget {
           height: 52.0,
           leftIcon: const FlowySvg(
             FlowySvgs.icon_document_s,
-            size: Size.square(18),
+            size: Size.square(20),
           ),
           showTopBorder: false,
+          showBottomBorder: false,
           onTap: () => onAction(ViewLayoutPB.Document),
         ),
         FlowyOptionTile.text(
@@ -34,9 +35,10 @@ class AddNewPageWidgetBottomSheet extends StatelessWidget {
           height: 52.0,
           leftIcon: const FlowySvg(
             FlowySvgs.icon_grid_s,
-            size: Size.square(18),
+            size: Size.square(20),
           ),
           showTopBorder: false,
+          showBottomBorder: false,
           onTap: () => onAction(ViewLayoutPB.Grid),
         ),
         FlowyOptionTile.text(
@@ -44,9 +46,10 @@ class AddNewPageWidgetBottomSheet extends StatelessWidget {
           height: 52.0,
           leftIcon: const FlowySvg(
             FlowySvgs.icon_board_s,
-            size: Size.square(18),
+            size: Size.square(20),
           ),
           showTopBorder: false,
+          showBottomBorder: false,
           onTap: () => onAction(ViewLayoutPB.Board),
         ),
         FlowyOptionTile.text(
@@ -54,9 +57,10 @@ class AddNewPageWidgetBottomSheet extends StatelessWidget {
           height: 52.0,
           leftIcon: const FlowySvg(
             FlowySvgs.icon_calendar_s,
-            size: Size.square(18),
+            size: Size.square(20),
           ),
           showTopBorder: false,
+          showBottomBorder: false,
           onTap: () => onAction(ViewLayoutPB.Calendar),
         ),
         FlowyOptionTile.text(
@@ -64,9 +68,10 @@ class AddNewPageWidgetBottomSheet extends StatelessWidget {
           height: 52.0,
           leftIcon: const FlowySvg(
             FlowySvgs.chat_ai_page_s,
-            size: Size.square(18),
+            size: Size.square(20),
           ),
           showTopBorder: false,
+          showBottomBorder: false,
           onTap: () => onAction(ViewLayoutPB.Chat),
         ),
       ],

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

@@ -1,4 +1,3 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/show_flowy_mobile_confirm_dialog.dart';
@@ -6,6 +5,7 @@ import 'package:appflowy/startup/tasks/app_widget.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
 import 'package:appflowy/workspace/application/recent/recent_views_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -109,16 +109,6 @@ class _MobileViewItemBottomSheetState extends State<MobileViewItemBottomSheet> {
     await _showConfirmDialog(
       onDelete: () {
         recentViewsBloc.add(RecentViewsEvent.removeRecentViews([viewId]));
-
-        fToast.showToast(
-          child: const _RemoveToast(),
-          positionedToastBuilder: (context, child) {
-            return Positioned.fill(
-              top: 450,
-              child: child,
-            );
-          },
-        );
       },
     );
   }
@@ -136,38 +126,14 @@ class _MobileViewItemBottomSheetState extends State<MobileViewItemBottomSheet> {
       ),
       onRightButtonPressed: (context) {
         onDelete();
+
         Navigator.pop(context);
+
+        showToastNotification(
+          context,
+          message: LocaleKeys.sideBar_removeSuccess.tr(),
+        );
       },
     );
   }
 }
-
-class _RemoveToast extends StatelessWidget {
-  const _RemoveToast();
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 13.0),
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(12.0),
-        color: const Color(0xE5171717),
-      ),
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          const FlowySvg(
-            FlowySvgs.success_s,
-            blendMode: null,
-          ),
-          const HSpace(8.0),
-          FlowyText.regular(
-            LocaleKeys.sideBar_removeSuccess.tr(),
-            fontSize: 16.0,
-            color: Colors.white,
-          ),
-        ],
-      ),
-    );
-  }
-}

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

@@ -7,6 +7,7 @@ import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
 import 'package:appflowy/workspace/application/recent/recent_views_bloc.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -40,18 +41,32 @@ enum MobilePaneActionType {
           backgroundColor: const Color(0xFFFA217F),
           svg: FlowySvgs.favorite_section_remove_from_favorite_s,
           size: 24.0,
-          onPressed: (context) => context
-              .read<FavoriteBloc>()
-              .add(FavoriteEvent.toggle(context.read<ViewBloc>().view)),
+          onPressed: (context) {
+            showToastNotification(
+              context,
+              message: LocaleKeys.button_unfavoriteSuccessfully.tr(),
+            );
+
+            context
+                .read<FavoriteBloc>()
+                .add(FavoriteEvent.toggle(context.read<ViewBloc>().view));
+          },
         );
       case MobilePaneActionType.addToFavorites:
         return MobileSlideActionButton(
           backgroundColor: const Color(0xFF00C8FF),
           svg: FlowySvgs.favorite_s,
           size: 24.0,
-          onPressed: (context) => context
-              .read<FavoriteBloc>()
-              .add(FavoriteEvent.toggle(context.read<ViewBloc>().view)),
+          onPressed: (context) {
+            showToastNotification(
+              context,
+              message: LocaleKeys.button_favoriteSuccessfully.tr(),
+            );
+
+            context
+                .read<FavoriteBloc>()
+                .add(FavoriteEvent.toggle(context.read<ViewBloc>().view));
+          },
         );
       case MobilePaneActionType.add:
         return MobileSlideActionButton(
@@ -69,6 +84,7 @@ enum MobilePaneActionType {
               showDragHandle: true,
               showCloseButton: true,
               useRootNavigator: true,
+              showDivider: false,
               backgroundColor: Theme.of(context).colorScheme.surface,
               builder: (sheetContext) {
                 return AddNewPageWidgetBottomSheet(
@@ -145,8 +161,6 @@ enum MobilePaneActionType {
                 ? MobileViewItemBottomSheetBodyAction.removeFromFavorites
                 : MobileViewItemBottomSheetBodyAction.addToFavorites,
             MobileViewItemBottomSheetBodyAction.divider,
-            if (view.layout != ViewLayoutPB.Chat)
-              MobileViewItemBottomSheetBodyAction.duplicate,
             MobileViewItemBottomSheetBodyAction.divider,
             MobileViewItemBottomSheetBodyAction.removeFromRecent,
           ];
@@ -156,7 +170,6 @@ enum MobilePaneActionType {
                 ? MobileViewItemBottomSheetBodyAction.removeFromFavorites
                 : MobileViewItemBottomSheetBodyAction.addToFavorites,
             MobileViewItemBottomSheetBodyAction.divider,
-            MobileViewItemBottomSheetBodyAction.duplicate,
           ];
       }
     }
@@ -181,12 +194,13 @@ ActionPane buildEndActionPane(
   bool needSpace = true,
   MobilePageCardType? cardType,
   FolderSpaceType? spaceType,
+  required double spaceRatio,
 }) {
   return ActionPane(
     motion: const ScrollMotion(),
-    extentRatio: actions.length / 5,
+    extentRatio: actions.length / spaceRatio,
     children: [
-      if (needSpace) const HSpace(20),
+      if (needSpace) const HSpace(60),
       ...actions.map(
         (action) => action.actionButton(
           context,

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

@@ -70,6 +70,7 @@ Future<T?> showMobileBottomSheet<T>(
   backgroundColor ??= Theme.of(context).brightness == Brightness.light
       ? const Color(0xFFF7F8FB)
       : const Color(0xFF23262B);
+  barrierColor ??= Colors.black.withOpacity(0.3);
 
   return showModalBottomSheet<T>(
     context: context,
@@ -226,10 +227,14 @@ class BottomSheetHeader extends StatelessWidget {
                 ),
               ),
             Align(
-              child: FlowyText(
-                title,
-                fontSize: 16.0,
-                fontWeight: FontWeight.w500,
+              child: Container(
+                constraints: const BoxConstraints(maxWidth: 250),
+                child: FlowyText(
+                  title,
+                  fontSize: 17.0,
+                  fontWeight: FontWeight.w500,
+                  overflow: TextOverflow.ellipsis,
+                ),
               ),
             ),
             if (showDoneButton)

frontend/appflowy_flutter/lib/mobile/presentation/home/favorite_folder/favorite_space.dart

@@ -100,8 +100,6 @@ class _FavoriteViews extends StatelessWidget {
       child: ListView.separated(
         key: const PageStorageKey('favorite_views_page_storage_key'),
         padding: EdgeInsets.only(
-          left: HomeSpaceViewSizes.mHorizontalPadding,
-          right: HomeSpaceViewSizes.mHorizontalPadding,
           bottom: HomeSpaceViewSizes.mVerticalPadding +
               MediaQuery.of(context).padding.bottom,
         ),

frontend/appflowy_flutter/lib/mobile/presentation/home/favorite_folder/mobile_home_favorite_folder.dart

@@ -72,6 +72,7 @@ class MobileFavoriteFolder extends StatelessWidget {
                         MobilePaneActionType.more,
                       ],
                       spaceType: FolderSpaceType.favorite,
+                      spaceRatio: 5,
                     ),
                   ),
                 ),

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

@@ -29,8 +29,6 @@ class _MobileHomeSpaceState extends State<MobileHomeSpace>
       child: SingleChildScrollView(
         child: Padding(
           padding: EdgeInsets.only(
-            left: HomeSpaceViewSizes.mHorizontalPadding,
-            right: HomeSpaceViewSizes.mHorizontalPadding,
             top: HomeSpaceViewSizes.mVerticalPadding,
             bottom: HomeSpaceViewSizes.mVerticalPadding +
                 MediaQuery.of(context).padding.bottom,

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

@@ -1,14 +1,13 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/application/mobile_router.dart';
-import 'package:appflowy/mobile/presentation/home/home.dart';
 import 'package:appflowy/mobile/presentation/home/section_folder/mobile_home_section_folder.dart';
 import 'package:appflowy/mobile/presentation/home/space/mobile_space.dart';
-import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.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';
@@ -32,73 +31,56 @@ class MobileFolders extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MultiBlocProvider(
-      providers: [
-        BlocProvider(
-          create: (_) => SidebarSectionsBloc()
-            ..add(SidebarSectionsEvent.initial(user, workspaceId)),
-        ),
-        BlocProvider(
-          create: (_) => FavoriteBloc()..add(const FavoriteEvent.initial()),
-        ),
-        BlocProvider(
-          create: (_) => SpaceBloc()
-            ..add(SpaceEvent.initial(user, workspaceId, openFirstPage: false)),
-        ),
-      ],
-      child: BlocListener<UserWorkspaceBloc, UserWorkspaceState>(
-        listener: (context, state) {
-          context.read<SidebarSectionsBloc>().add(
-                SidebarSectionsEvent.initial(
-                  user,
-                  state.currentWorkspace?.workspaceId ?? workspaceId,
+    final workspaceId =
+        context.read<UserWorkspaceBloc>().state.currentWorkspace?.workspaceId ??
+            '';
+    return BlocListener<UserWorkspaceBloc, UserWorkspaceState>(
+      listener: (context, state) {
+        context.read<SidebarSectionsBloc>().add(
+              SidebarSectionsEvent.initial(
+                user,
+                state.currentWorkspace?.workspaceId ?? workspaceId,
+              ),
+            );
+        context.read<SpaceBloc>().add(
+              SpaceEvent.reset(
+                user,
+                state.currentWorkspace?.workspaceId ?? workspaceId,
+              ),
+            );
+      },
+      child: const _MobileFolder(),
+    );
+  }
+}
+
+class _MobileFolder extends StatefulWidget {
+  const _MobileFolder();
+
+  @override
+  State<_MobileFolder> createState() => _MobileFolderState();
+}
+
+class _MobileFolderState extends State<_MobileFolder> {
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<SidebarSectionsBloc, SidebarSectionsState>(
+      builder: (context, state) {
+        return SlidableAutoCloseBehavior(
+          child: Column(
+            children: [
+              ..._buildSpaceOrSection(context, state),
+              const VSpace(4.0),
+              const Padding(
+                padding: EdgeInsets.symmetric(
+                  horizontal: HomeSpaceViewSizes.mHorizontalPadding,
                 ),
-              );
-          context.read<SpaceBloc>().add(
-                SpaceEvent.reset(
-                  user,
-                  state.currentWorkspace?.workspaceId ?? workspaceId,
-                ),
-              );
-        },
-        child: MultiBlocListener(
-          listeners: [
-            BlocListener<SpaceBloc, SpaceState>(
-              listenWhen: (p, c) =>
-                  p.lastCreatedPage?.id != c.lastCreatedPage?.id,
-              listener: (context, state) {
-                final lastCreatedPage = state.lastCreatedPage;
-                if (lastCreatedPage != null) {
-                  context.pushView(lastCreatedPage);
-                }
-              },
-            ),
-            BlocListener<SidebarSectionsBloc, SidebarSectionsState>(
-              listenWhen: (p, c) =>
-                  p.lastCreatedRootView?.id != c.lastCreatedRootView?.id,
-              listener: (context, state) {
-                final lastCreatedPage = state.lastCreatedRootView;
-                if (lastCreatedPage != null) {
-                  context.pushView(lastCreatedPage);
-                }
-              },
-            ),
-          ],
-          child: BlocBuilder<SidebarSectionsBloc, SidebarSectionsState>(
-            builder: (context, state) {
-              return SlidableAutoCloseBehavior(
-                child: Column(
-                  children: [
-                    ..._buildSpaceOrSection(context, state),
-                    const VSpace(4.0),
-                    const _TrashButton(),
-                  ],
-                ),
-              );
-            },
+                child: _TrashButton(),
+              ),
+            ],
           ),
-        ),
-      ),
+        );
+      },
     );
   }
 

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

@@ -1,7 +1,5 @@
 import 'dart:io';
 
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/mobile/presentation/home/mobile_home_page_header.dart';
 import 'package:appflowy/mobile/presentation/home/tab/mobile_space_tab.dart';
 import 'package:appflowy/mobile/presentation/home/tab/space_order_bloc.dart';
@@ -9,7 +7,9 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/auth/auth_service.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
 import 'package:appflowy/workspace/application/recent/cached_recent_service.dart';
+import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/errors/workspace_failed_screen.dart';
 import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
@@ -18,6 +18,8 @@ import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/workspace.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:provider/provider.dart';
 
@@ -74,6 +76,9 @@ class MobileHomeScreen extends StatelessWidget {
   }
 }
 
+final PropertyValueNotifier<UserWorkspacePB?> mCurrentWorkspace =
+    PropertyValueNotifier<UserWorkspacePB?>(null);
+
 class MobileHomePage extends StatefulWidget {
   const MobileHomePage({
     super.key,
@@ -99,6 +104,7 @@ class _MobileHomePageState extends State<MobileHomePage> {
   @override
   void dispose() {
     getIt<MenuSharedState>().removeLatestViewListener(_onLatestViewChange);
+
     super.dispose();
   }
 
@@ -122,12 +128,17 @@ class _MobileHomePageState extends State<MobileHomePage> {
         buildWhen: (previous, current) =>
             previous.currentWorkspace?.workspaceId !=
             current.currentWorkspace?.workspaceId,
-        listener: (context, state) => getIt<CachedRecentService>().reset(),
+        listener: (context, state) {
+          getIt<CachedRecentService>().reset();
+          mCurrentWorkspace.value = state.currentWorkspace;
+        },
         builder: (context, state) {
           if (state.currentWorkspace == null) {
             return const SizedBox.shrink();
           }
 
+          final workspaceId = state.currentWorkspace!.workspaceId;
+
           return Column(
             children: [
               // Header
@@ -143,9 +154,36 @@ class _MobileHomePageState extends State<MobileHomePage> {
               ),
 
               Expanded(
-                child: BlocProvider(
-                  create: (context) =>
-                      SpaceOrderBloc()..add(const SpaceOrderEvent.initial()),
+                child: MultiBlocProvider(
+                  providers: [
+                    BlocProvider(
+                      create: (_) => SpaceOrderBloc()
+                        ..add(const SpaceOrderEvent.initial()),
+                    ),
+                    BlocProvider(
+                      create: (_) => SidebarSectionsBloc()
+                        ..add(
+                          SidebarSectionsEvent.initial(
+                            widget.userProfile,
+                            workspaceId,
+                          ),
+                        ),
+                    ),
+                    BlocProvider(
+                      create: (_) =>
+                          FavoriteBloc()..add(const FavoriteEvent.initial()),
+                    ),
+                    BlocProvider(
+                      create: (_) => SpaceBloc()
+                        ..add(
+                          SpaceEvent.initial(
+                            widget.userProfile,
+                            workspaceId,
+                            openFirstPage: false,
+                          ),
+                        ),
+                    ),
+                  ],
                   child: MobileSpaceTab(
                     userProfile: widget.userProfile,
                   ),

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

@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/gesture.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/home/mobile_home_setting_page.dart';
 import 'package:appflowy/mobile/presentation/home/workspaces/workspace_menu_bottom_sheet.dart';
@@ -50,9 +51,10 @@ class MobileHomePageHeader extends StatelessWidget {
                   ),
                   child: const Padding(
                     padding: EdgeInsets.all(8.0),
-                    child: FlowySvg(FlowySvgs.m_setting_m),
+                    child: FlowySvg(FlowySvgs.m_notification_settings_s),
                   ),
                 ),
+                const HSpace(8.0),
               ],
             ),
           );
@@ -113,8 +115,9 @@ class _MobileWorkspace extends StatelessWidget {
         if (currentWorkspace == null) {
           return const SizedBox.shrink();
         }
-        return GestureDetector(
-          onTap: () {
+        return AnimatedGestureDetector(
+          alignment: Alignment.centerLeft,
+          onTapUp: () {
             context.read<UserWorkspaceBloc>().add(
                   const UserWorkspaceEvent.fetchWorkspaces(),
                 );
@@ -143,7 +146,7 @@ class _MobileWorkspace extends StatelessWidget {
                   : const HSpace(8),
               FlowyText.semibold(
                 currentWorkspace.name,
-                fontSize: 16.0,
+                fontSize: 20.0,
                 overflow: TextOverflow.ellipsis,
               ),
             ],
@@ -162,9 +165,10 @@ class _MobileWorkspace extends StatelessWidget {
       showHeader: true,
       showDragHandle: true,
       showCloseButton: true,
+      useRootNavigator: true,
       title: LocaleKeys.workspace_menuTitle.tr(),
       backgroundColor: Theme.of(context).colorScheme.surface,
-      builder: (_) {
+      builder: (sheetContext) {
         return BlocProvider.value(
           value: context.read<UserWorkspaceBloc>(),
           child: BlocBuilder<UserWorkspaceBloc, UserWorkspaceState>(
@@ -179,7 +183,7 @@ class _MobileWorkspace extends StatelessWidget {
                 currentWorkspace: currentWorkspace,
                 workspaces: workspaces,
                 onWorkspaceSelected: (workspace) {
-                  context.pop();
+                  Navigator.of(sheetContext).pop();
 
                   if (workspace == currentWorkspace) {
                     return;

frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/recent_space.dart

@@ -72,8 +72,6 @@ class _RecentViews extends StatelessWidget {
         child: ListView.separated(
           key: const PageStorageKey('recent_views_page_storage_key'),
           padding: EdgeInsets.only(
-            left: HomeSpaceViewSizes.mHorizontalPadding,
-            right: HomeSpaceViewSizes.mHorizontalPadding,
             bottom: HomeSpaceViewSizes.mVerticalPadding +
                 MediaQuery.of(context).padding.bottom,
           ),

frontend/appflowy_flutter/lib/mobile/presentation/home/section_folder/mobile_home_section_folder.dart

@@ -1,6 +1,6 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/application/mobile_router.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/home/section_folder/mobile_home_section_folder_header.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_view_item.dart';
 import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
@@ -43,47 +43,17 @@ class MobileSectionFolder extends StatelessWidget {
                   onPressed: () => context
                       .read<FolderBloc>()
                       .add(const FolderEvent.expandOrUnExpand()),
-                  onAdded: () {
-                    context.read<SidebarSectionsBloc>().add(
-                          SidebarSectionsEvent.createRootViewInSection(
-                            name: LocaleKeys.menuAppHeader_defaultNewPageName
-                                .tr(),
-                            index: 0,
-                            viewSection: spaceType.toViewSectionPB,
-                          ),
-                        );
-                    context.read<FolderBloc>().add(
-                          const FolderEvent.expandOrUnExpand(isExpanded: true),
-                        );
-                  },
+                  onAdded: () => _createNewPage(context),
                 ),
               ),
               if (state.isExpanded)
-                ...views.map(
-                  (view) => MobileViewItem(
-                    key: ValueKey(
-                      '${FolderSpaceType.private.name} ${view.id}',
-                    ),
+                Padding(
+                  padding: const EdgeInsets.only(
+                    left: HomeSpaceViewSizes.leftPadding,
+                  ),
+                  child: _Pages(
+                    views: views,
                     spaceType: spaceType,
-                    isFirstChild: view.id == views.first.id,
-                    view: view,
-                    level: 0,
-                    leftPadding: HomeSpaceViewSizes.leftPadding,
-                    isFeedback: false,
-                    onSelected: context.pushView,
-                    endActionPane: (context) {
-                      final view = context.read<ViewBloc>().state.view;
-                      return buildEndActionPane(
-                        context,
-                        [
-                          MobilePaneActionType.more,
-                          if (view.layout == ViewLayoutPB.Document)
-                            MobilePaneActionType.add,
-                        ],
-                        spaceType: spaceType,
-                        needSpace: false,
-                      );
-                    },
                   ),
                 ),
             ],
@@ -92,4 +62,63 @@ class MobileSectionFolder extends StatelessWidget {
       ),
     );
   }
+
+  void _createNewPage(BuildContext context) {
+    context.read<SidebarSectionsBloc>().add(
+          SidebarSectionsEvent.createRootViewInSection(
+            name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+            index: 0,
+            viewSection: spaceType.toViewSectionPB,
+          ),
+        );
+    context.read<FolderBloc>().add(
+          const FolderEvent.expandOrUnExpand(isExpanded: true),
+        );
+  }
+}
+
+class _Pages extends StatelessWidget {
+  const _Pages({
+    required this.views,
+    required this.spaceType,
+  });
+
+  final List<ViewPB> views;
+  final FolderSpaceType spaceType;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: views
+          .map(
+            (view) => MobileViewItem(
+              key: ValueKey(
+                '${FolderSpaceType.private.name} ${view.id}',
+              ),
+              spaceType: spaceType,
+              isFirstChild: view.id == views.first.id,
+              view: view,
+              level: 0,
+              leftPadding: HomeSpaceViewSizes.leftPadding,
+              isFeedback: false,
+              onSelected: context.pushView,
+              endActionPane: (context) {
+                final view = context.read<ViewBloc>().state.view;
+                return buildEndActionPane(
+                  context,
+                  [
+                    MobilePaneActionType.more,
+                    if (view.layout == ViewLayoutPB.Document)
+                      MobilePaneActionType.add,
+                  ],
+                  spaceType: spaceType,
+                  needSpace: false,
+                  spaceRatio: 5,
+                );
+              },
+            ),
+          )
+          .toList(),
+    );
+  }
 }

frontend/appflowy_flutter/lib/mobile/presentation/home/section_folder/mobile_home_section_folder_header.dart

@@ -32,6 +32,7 @@ class _MobileSectionFolderHeaderState extends State<MobileSectionFolderHeader> {
   Widget build(BuildContext context) {
     return Row(
       children: [
+        const HSpace(HomeSpaceViewSizes.mHorizontalPadding),
         Expanded(
           child: FlowyButton(
             text: FlowyText.medium(
@@ -57,15 +58,19 @@ class _MobileSectionFolderHeaderState extends State<MobileSectionFolderHeader> {
             },
           ),
         ),
-        FlowyIconButton(
-          key: mobileCreateNewPageButtonKey,
-          hoverColor: Theme.of(context).colorScheme.secondaryContainer,
-          height: HomeSpaceViewSizes.mViewButtonDimension,
-          width: HomeSpaceViewSizes.mViewButtonDimension,
-          icon: const FlowySvg(
-            FlowySvgs.m_space_add_s,
+        GestureDetector(
+          behavior: HitTestBehavior.translucent,
+          onTap: widget.onAdded,
+          child: Container(
+            // expand the touch area
+            margin: const EdgeInsets.symmetric(
+              horizontal: HomeSpaceViewSizes.mHorizontalPadding,
+              vertical: 8.0,
+            ),
+            child: const FlowySvg(
+              FlowySvgs.m_space_add_s,
+            ),
           ),
-          onPressed: widget.onAdded,
         ),
       ],
     );

frontend/appflowy_flutter/lib/mobile/presentation/home/shared/mobile_page_card.dart

@@ -5,6 +5,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/application/mobile_router.dart';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
 import 'package:appflowy/mobile/application/recent/recent_view_bloc.dart';
+import 'package:appflowy/mobile/presentation/base/gesture.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/shared/appflowy_network_image.dart';
@@ -15,6 +16,7 @@ import 'package:appflowy/workspace/application/settings/appearance/appearance_cu
 import 'package:appflowy/workspace/application/settings/date_time/date_format_ext.dart';
 import 'package:appflowy/workspace/application/settings/date_time/time_format_ext.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -76,13 +78,14 @@ class MobileViewPage extends StatelessWidget {
                     : MobilePaneActionType.addToFavorites,
               ],
               cardType: type,
+              spaceRatio: 4,
             ),
-            child: GestureDetector(
-              behavior: HitTestBehavior.opaque,
-              onTapUp: (_) => context.pushView(view),
+            child: AnimatedGestureDetector(
+              onTapUp: () => context.pushView(view),
               child: Row(
                 mainAxisSize: MainAxisSize.min,
                 children: [
+                  const HSpace(HomeSpaceViewSizes.mHorizontalPadding),
                   Expanded(child: _buildDescription(context, state)),
                   const HSpace(20.0),
                   SizedBox(
@@ -90,6 +93,7 @@ class MobileViewPage extends StatelessWidget {
                     height: 60,
                     child: _buildCover(context, state),
                   ),
+                  const HSpace(HomeSpaceViewSizes.mHorizontalPadding),
                 ],
               ),
             ),
@@ -211,7 +215,7 @@ class MobileViewPage extends StatelessWidget {
 
   Widget _buildLastViewed(BuildContext context) {
     final textColor = Theme.of(context).isLightMode
-        ? const Color(0xFF171717)
+        ? const Color(0x7F171717)
         : Colors.white.withOpacity(0.45);
     if (timestamp == null) {
       return const SizedBox.shrink();

frontend/appflowy_flutter/lib/mobile/presentation/home/space/mobile_space.dart

@@ -4,7 +4,6 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/home/space/mobile_space_header.dart';
 import 'package:appflowy/mobile/presentation/home/space/mobile_space_menu.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_view_item.dart';
-import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
@@ -15,26 +14,9 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
-class MobileSpace extends StatefulWidget {
+class MobileSpace extends StatelessWidget {
   const MobileSpace({super.key});
 
-  @override
-  State<MobileSpace> createState() => _MobileSpaceState();
-}
-
-class _MobileSpaceState extends State<MobileSpace> {
-  @override
-  void initState() {
-    super.initState();
-    createNewPageNotifier.addListener(_createNewPage);
-  }
-
-  @override
-  void dispose() {
-    createNewPageNotifier.removeListener(_createNewPage);
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<SpaceBloc, SpaceState>(
@@ -50,23 +32,17 @@ class _MobileSpaceState extends State<MobileSpace> {
             MobileSpaceHeader(
               isExpanded: state.isExpanded,
               space: currentSpace,
-              onAdded: () {
-                context.read<SpaceBloc>().add(
-                      SpaceEvent.createPage(
-                        name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-                        layout: ViewLayoutPB.Document,
-                        index: 0,
-                      ),
-                    );
-                context.read<SpaceBloc>().add(
-                      SpaceEvent.expand(currentSpace, true),
-                    );
-              },
+              onAdded: () => _showCreatePageMenu(context, currentSpace),
               onPressed: () => _showSpaceMenu(context),
             ),
-            _Pages(
-              key: ValueKey(currentSpace.id),
-              space: currentSpace,
+            Padding(
+              padding: const EdgeInsets.only(
+                left: HomeSpaceViewSizes.mHorizontalPadding,
+              ),
+              child: _Pages(
+                key: ValueKey(currentSpace.id),
+                space: currentSpace,
+              ),
             ),
           ],
         );
@@ -82,6 +58,7 @@ class _MobileSpaceState extends State<MobileSpace> {
       showDragHandle: true,
       showCloseButton: true,
       showDoneButton: true,
+      useRootNavigator: true,
       title: LocaleKeys.space_title.tr(),
       backgroundColor: Theme.of(context).colorScheme.surface,
       builder: (_) {
@@ -96,13 +73,36 @@ class _MobileSpaceState extends State<MobileSpace> {
     );
   }
 
-  void _createNewPage() {
-    context.read<SpaceBloc>().add(
-          SpaceEvent.createPage(
-            name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-            layout: ViewLayoutPB.Document,
-          ),
+  void _showCreatePageMenu(BuildContext context, ViewPB space) {
+    final title = space.name;
+    showMobileBottomSheet(
+      context,
+      showHeader: true,
+      title: title,
+      showDragHandle: true,
+      showCloseButton: true,
+      useRootNavigator: true,
+      showDivider: false,
+      backgroundColor: Theme.of(context).colorScheme.surface,
+      builder: (sheetContext) {
+        return AddNewPageWidgetBottomSheet(
+          view: space,
+          onAction: (layout) {
+            Navigator.of(sheetContext).pop();
+            context.read<SpaceBloc>().add(
+                  SpaceEvent.createPage(
+                    name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+                    layout: layout,
+                    index: 0,
+                  ),
+                );
+            context.read<SpaceBloc>().add(
+                  SpaceEvent.expand(space, true),
+                );
+          },
         );
+      },
+    );
   }
 }
 
@@ -140,15 +140,16 @@ class _Pages extends StatelessWidget {
                     onSelected: context.pushView,
                     endActionPane: (context) {
                       final view = context.read<ViewBloc>().state.view;
+                      final actions = [
+                        MobilePaneActionType.more,
+                        if (view.layout == ViewLayoutPB.Document)
+                          MobilePaneActionType.add,
+                      ];
                       return buildEndActionPane(
                         context,
-                        [
-                          MobilePaneActionType.more,
-                          if (view.layout == ViewLayoutPB.Document)
-                            MobilePaneActionType.add,
-                        ],
+                        actions,
                         spaceType: spaceType,
-                        needSpace: false,
+                        spaceRatio: actions.length == 1 ? 3 : 4,
                       );
                     },
                   ),

frontend/appflowy_flutter/lib/mobile/presentation/home/space/mobile_space_header.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_icon.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -30,6 +31,7 @@ class MobileSpaceHeader extends StatelessWidget {
         height: 48,
         child: Row(
           children: [
+            const HSpace(HomeSpaceViewSizes.mHorizontalPadding),
             SpaceIcon(
               dimension: 24,
               space: space,
@@ -49,8 +51,15 @@ class MobileSpaceHeader extends StatelessWidget {
             GestureDetector(
               behavior: HitTestBehavior.translucent,
               onTap: onAdded,
-              child: const FlowySvg(
-                FlowySvgs.m_space_add_s,
+              child: Container(
+                // expand the touch area
+                margin: const EdgeInsets.symmetric(
+                  horizontal: HomeSpaceViewSizes.mHorizontalPadding,
+                  vertical: 8.0,
+                ),
+                child: const FlowySvg(
+                  FlowySvgs.m_space_add_s,
+                ),
               ),
             ),
           ],

frontend/appflowy_flutter/lib/mobile/presentation/home/space/mobile_space_menu.dart

@@ -59,6 +59,7 @@ class _SidebarSpaceMenuItem extends StatelessWidget {
         children: [
           FlowyText.medium(
             space.name,
+            fontSize: 16.0,
           ),
           const HSpace(6.0),
           if (space.spacePermission == SpacePermission.private)
@@ -68,16 +69,17 @@ class _SidebarSpaceMenuItem extends StatelessWidget {
             ),
         ],
       ),
+      margin: const EdgeInsets.symmetric(horizontal: 12.0),
       iconPadding: 10,
       leftIcon: SpaceIcon(
         dimension: 24,
         space: space,
         cornerRadius: 6.0,
       ),
-      leftIconSize: const Size.square(20),
+      leftIconSize: const Size.square(24),
       rightIcon: isSelected
           ? const FlowySvg(
-              FlowySvgs.workspace_selected_s,
+              FlowySvgs.m_blue_check_s,
               blendMode: null,
             )
           : null,

frontend/appflowy_flutter/lib/mobile/presentation/home/tab/_tab_bar.dart

@@ -21,12 +21,14 @@ class MobileSpaceTabBar extends StatelessWidget {
   Widget build(BuildContext context) {
     final baseStyle = Theme.of(context).textTheme.bodyMedium;
     final labelStyle = baseStyle?.copyWith(
-      fontWeight: FontWeight.w600,
+      fontWeight: FontWeight.w500,
       fontSize: 16.0,
+      height: 22.0 / 16.0,
     );
     final unselectedLabelStyle = baseStyle?.copyWith(
       fontWeight: FontWeight.w400,
       fontSize: 15.0,
+      height: 22.0 / 15.0,
     );
 
     return Container(

frontend/appflowy_flutter/lib/mobile/presentation/home/tab/mobile_space_tab.dart

@@ -1,16 +1,27 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/application/mobile_router.dart';
 import 'package:appflowy/mobile/presentation/home/favorite_folder/favorite_space.dart';
 import 'package:appflowy/mobile/presentation/home/home_space/home_space.dart';
 import 'package:appflowy/mobile/presentation/home/recent_folder/recent_space.dart';
 import 'package:appflowy/mobile/presentation/home/tab/_tab_bar.dart';
 import 'package:appflowy/mobile/presentation/home/tab/space_order_bloc.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
+import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
+import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
+import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.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 'package:provider/provider.dart';
 
 class MobileSpaceTab extends StatefulWidget {
-  const MobileSpaceTab({super.key, required this.userProfile});
+  const MobileSpaceTab({
+    super.key,
+    required this.userProfile,
+  });
 
   final UserProfilePB userProfile;
 
@@ -22,10 +33,19 @@ class _MobileSpaceTabState extends State<MobileSpaceTab>
     with SingleTickerProviderStateMixin {
   TabController? tabController;
 
+  @override
+  void initState() {
+    super.initState();
+
+    mobileCreateNewPageNotifier.addListener(_createNewPage);
+  }
+
   @override
   void dispose() {
     tabController?.removeListener(_onTabChange);
     tabController?.dispose();
+    mobileCreateNewPageNotifier.removeListener(_createNewPage);
+
     super.dispose();
   }
 
@@ -33,36 +53,60 @@ class _MobileSpaceTabState extends State<MobileSpaceTab>
   Widget build(BuildContext context) {
     return Provider.value(
       value: widget.userProfile,
-      child: BlocBuilder<SpaceOrderBloc, SpaceOrderState>(
-        builder: (context, state) {
-          if (state.isLoading) {
-            return const SizedBox.shrink();
-          }
+      child: MultiBlocListener(
+        listeners: [
+          BlocListener<SpaceBloc, SpaceState>(
+            listenWhen: (p, c) =>
+                p.lastCreatedPage?.id != c.lastCreatedPage?.id,
+            listener: (context, state) {
+              final lastCreatedPage = state.lastCreatedPage;
+              if (lastCreatedPage != null) {
+                context.pushView(lastCreatedPage);
+              }
+            },
+          ),
+          BlocListener<SidebarSectionsBloc, SidebarSectionsState>(
+            listenWhen: (p, c) =>
+                p.lastCreatedRootView?.id != c.lastCreatedRootView?.id,
+            listener: (context, state) {
+              final lastCreatedPage = state.lastCreatedRootView;
+              if (lastCreatedPage != null) {
+                context.pushView(lastCreatedPage);
+              }
+            },
+          ),
+        ],
+        child: BlocBuilder<SpaceOrderBloc, SpaceOrderState>(
+          builder: (context, state) {
+            if (state.isLoading) {
+              return const SizedBox.shrink();
+            }
 
-          _initTabController(state);
+            _initTabController(state);
 
-          return Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              MobileSpaceTabBar(
-                tabController: tabController!,
-                tabs: state.tabsOrder,
-                onReorder: (from, to) {
-                  context.read<SpaceOrderBloc>().add(
-                        SpaceOrderEvent.reorder(from, to),
-                      );
-                },
-              ),
-              const HSpace(12.0),
-              Expanded(
-                child: TabBarView(
-                  controller: tabController,
-                  children: _buildTabs(state),
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                MobileSpaceTabBar(
+                  tabController: tabController!,
+                  tabs: state.tabsOrder,
+                  onReorder: (from, to) {
+                    context.read<SpaceOrderBloc>().add(
+                          SpaceOrderEvent.reorder(from, to),
+                        );
+                  },
                 ),
-              ),
-            ],
-          );
-        },
+                const HSpace(12.0),
+                Expanded(
+                  child: TabBarView(
+                    controller: tabController,
+                    children: _buildTabs(state),
+                  ),
+                ),
+              ],
+            );
+          },
+        ),
       ),
     );
   }
@@ -104,4 +148,27 @@ class _MobileSpaceTabState extends State<MobileSpaceTab>
       }
     }).toList();
   }
+
+  // quick create new page when clicking the add button in navigation bar
+  void _createNewPage() {
+    if (context.read<SpaceBloc>().state.spaces.isNotEmpty) {
+      context.read<SpaceBloc>().add(
+            SpaceEvent.createPage(
+              name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+              layout: ViewLayoutPB.Document,
+            ),
+          );
+    } else {
+      context.read<SidebarSectionsBloc>().add(
+            SidebarSectionsEvent.createRootViewInSection(
+              name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+              index: 0,
+              viewSection: FolderSpaceType.public.toViewSectionPB,
+            ),
+          );
+      context.read<FolderBloc>().add(
+            const FolderEvent.expandOrUnExpand(isExpanded: true),
+          );
+    }
+  }
 }

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

@@ -138,17 +138,20 @@ class _WorkspaceMenuItem extends StatelessWidget {
             height: 60,
             showTopBorder: showTopBorder,
             showBottomBorder: false,
-            leftIcon: WorkspaceIcon(
-              enableEdit: false,
-              iconSize: 26,
-              fontSize: 16.0,
-              workspace: workspace,
-              onSelected: (result) => context.read<UserWorkspaceBloc>().add(
-                    UserWorkspaceEvent.updateWorkspaceIcon(
-                      workspace.workspaceId,
-                      result.emoji,
+            leftIcon: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 4.0),
+              child: WorkspaceIcon(
+                enableEdit: false,
+                iconSize: 26,
+                fontSize: 16.0,
+                workspace: workspace,
+                onSelected: (result) => context.read<UserWorkspaceBloc>().add(
+                      UserWorkspaceEvent.updateWorkspaceIcon(
+                        workspace.workspaceId,
+                        result.emoji,
+                      ),
                     ),
-                  ),
+              ),
             ),
             trailing: workspace.workspaceId == currentWorkspace.workspaceId
                 ? const FlowySvg(

frontend/appflowy_flutter/lib/mobile/presentation/mobile_bottom_navigation_bar.dart

@@ -1,14 +1,30 @@
 import 'dart:ui';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/notifications/mobile_notifications_screen.dart';
+import 'package:appflowy/mobile/presentation/widgets/navigation_bar_button.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/util/theme_extension.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
-final PropertyValueNotifier<ViewLayoutPB?> createNewPageNotifier =
+enum BottomNavigationBarActionType {
+  home,
+  notificationMultiSelect,
+}
+
+final PropertyValueNotifier<ViewLayoutPB?> mobileCreateNewPageNotifier =
     PropertyValueNotifier(null);
+final ValueNotifier<BottomNavigationBarActionType> bottomNavigationBarType =
+    ValueNotifier(BottomNavigationBarActionType.home);
 
 const _homeLabel = 'home';
 const _addLabel = 'add';
@@ -25,16 +41,16 @@ final _items = <BottomNavigationBarItem>[
   ),
   const BottomNavigationBarItem(
     label: _notificationLabel,
-    icon: FlowySvg(FlowySvgs.m_home_notification_m),
-    activeIcon: FlowySvg(
-      FlowySvgs.m_home_notification_m,
+    icon: _NotificationNavigationBarItemIcon(),
+    activeIcon: _NotificationNavigationBarItemIcon(
+      isActive: true,
     ),
   ),
 ];
 
 /// Builds the "shell" for the app by building a Scaffold with a
 /// BottomNavigationBar, where [child] is placed in the body of the Scaffold.
-class MobileBottomNavigationBar extends StatelessWidget {
+class MobileBottomNavigationBar extends StatefulWidget {
   /// Constructs an [MobileBottomNavigationBar].
   const MobileBottomNavigationBar({
     required this.navigationShell,
@@ -44,41 +60,167 @@ class MobileBottomNavigationBar extends StatelessWidget {
   /// The navigation shell and container for the branch Navigators.
   final StatefulNavigationShell navigationShell;
 
+  @override
+  State<MobileBottomNavigationBar> createState() =>
+      _MobileBottomNavigationBarState();
+}
+
+class _MobileBottomNavigationBarState extends State<MobileBottomNavigationBar> {
+  Widget? _bottomNavigationBar;
+
+  @override
+  void initState() {
+    super.initState();
+
+    bottomNavigationBarType.addListener(_animate);
+  }
+
+  @override
+  void dispose() {
+    bottomNavigationBarType.removeListener(_animate);
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final isLightMode = Theme.of(context).isLightMode;
-    final backgroundColor = isLightMode
-        ? Colors.white.withOpacity(0.95)
-        : const Color(0xFF23262B).withOpacity(0.95);
+    _bottomNavigationBar = switch (bottomNavigationBarType.value) {
+      BottomNavigationBarActionType.home =>
+        _buildHomePageNavigationBar(context),
+      BottomNavigationBarActionType.notificationMultiSelect =>
+        _buildNotificationNavigationBar(context),
+    };
+
     return Scaffold(
-      body: navigationShell,
+      body: widget.navigationShell,
       extendBody: true,
-      bottomNavigationBar: ClipRRect(
-        child: BackdropFilter(
-          filter: ImageFilter.blur(
-            sigmaX: 3,
-            sigmaY: 3,
-          ),
-          child: DecoratedBox(
-            decoration: BoxDecoration(
-              border: isLightMode
-                  ? Border(
-                      top: BorderSide(color: Theme.of(context).dividerColor),
+      bottomNavigationBar: AnimatedSwitcher(
+        duration: const Duration(milliseconds: 250),
+        switchInCurve: Curves.easeInOut,
+        switchOutCurve: Curves.easeInOut,
+        transitionBuilder: _transitionBuilder,
+        child: _bottomNavigationBar,
+      ),
+    );
+  }
+
+  Widget _buildHomePageNavigationBar(BuildContext context) {
+    return _HomePageNavigationBar(
+      navigationShell: widget.navigationShell,
+    );
+  }
+
+  Widget _buildNotificationNavigationBar(BuildContext context) {
+    return const _NotificationNavigationBar();
+  }
+
+  // widget A going down, widget B going up
+  Widget _transitionBuilder(
+    Widget child,
+    Animation<double> animation,
+  ) {
+    return SlideTransition(
+      position: Tween<Offset>(
+        begin: const Offset(0, 1),
+        end: Offset.zero,
+      ).animate(animation),
+      child: child,
+    );
+  }
+
+  void _animate() {
+    setState(() {});
+  }
+}
+
+class _NotificationNavigationBarItemIcon extends StatelessWidget {
+  const _NotificationNavigationBarItemIcon({
+    this.isActive = false,
+  });
+
+  final bool isActive;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider.value(
+      value: getIt<ReminderBloc>(),
+      child: BlocBuilder<ReminderBloc, ReminderState>(
+        builder: (context, state) {
+          final hasUnreads = state.reminders.any(
+            (reminder) => !reminder.isRead,
+          );
+          return Stack(
+            children: [
+              isActive
+                  ? const FlowySvg(
+                      FlowySvgs.m_home_active_notification_m,
+                      blendMode: null,
                     )
-                  : null,
-              color: backgroundColor,
-            ),
-            child: BottomNavigationBar(
-              showSelectedLabels: false,
-              showUnselectedLabels: false,
-              enableFeedback: false,
-              type: BottomNavigationBarType.fixed,
-              elevation: 0,
-              items: _items,
-              backgroundColor: Colors.transparent,
-              currentIndex: navigationShell.currentIndex,
-              onTap: (int bottomBarIndex) => _onTap(context, bottomBarIndex),
-            ),
+                  : const FlowySvg(
+                      FlowySvgs.m_home_notification_m,
+                    ),
+              if (hasUnreads)
+                const Positioned(
+                  top: 2,
+                  right: 4,
+                  child: _RedDot(),
+                ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _RedDot extends StatelessWidget {
+  const _RedDot();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 6,
+      height: 6,
+      clipBehavior: Clip.antiAlias,
+      decoration: ShapeDecoration(
+        color: const Color(0xFFFF2214),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(20),
+        ),
+      ),
+    );
+  }
+}
+
+class _HomePageNavigationBar extends StatelessWidget {
+  const _HomePageNavigationBar({
+    required this.navigationShell,
+  });
+
+  final StatefulNavigationShell navigationShell;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      child: BackdropFilter(
+        filter: ImageFilter.blur(
+          sigmaX: 3,
+          sigmaY: 3,
+        ),
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            border: context.border,
+            color: context.backgroundColor,
+          ),
+          child: BottomNavigationBar(
+            showSelectedLabels: false,
+            showUnselectedLabels: false,
+            enableFeedback: false,
+            type: BottomNavigationBarType.fixed,
+            elevation: 0,
+            items: _items,
+            backgroundColor: Colors.transparent,
+            currentIndex: navigationShell.currentIndex,
+            onTap: (int bottomBarIndex) => _onTap(context, bottomBarIndex),
           ),
         ),
       ),
@@ -90,7 +232,8 @@ class MobileBottomNavigationBar extends StatelessWidget {
   void _onTap(BuildContext context, int bottomBarIndex) {
     if (_items[bottomBarIndex].label == _addLabel) {
       // show an add dialog
-      createNewPageNotifier.value = ViewLayoutPB.Document;
+      mobileCreateNewPageNotifier.value = ViewLayoutPB.Document;
+
       return;
     }
     // When navigating to a new branch, it's recommended to use the goBranch
@@ -106,3 +249,112 @@ class MobileBottomNavigationBar extends StatelessWidget {
     );
   }
 }
+
+class _NotificationNavigationBar extends StatelessWidget {
+  const _NotificationNavigationBar();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      // todo: use real height here.
+      height: 90,
+      decoration: BoxDecoration(
+        border: context.border,
+        color: context.backgroundColor,
+      ),
+      padding: const EdgeInsets.only(bottom: 20),
+      child: ValueListenableBuilder(
+        valueListenable: mSelectedNotificationIds,
+        builder: (context, value, child) {
+          if (value.isEmpty) {
+            // not editable
+            return IgnorePointer(
+              child: Opacity(
+                opacity: 0.3,
+                child: child,
+              ),
+            );
+          }
+
+          return child!;
+        },
+        child: Row(
+          children: [
+            const HSpace(20),
+            Expanded(
+              child: NavigationBarButton(
+                icon: FlowySvgs.m_notification_action_mark_as_read_s,
+                text: LocaleKeys.settings_notifications_action_markAsRead.tr(),
+                onTap: () => _onMarkAsRead(context),
+              ),
+            ),
+            const HSpace(16),
+            Expanded(
+              child: NavigationBarButton(
+                icon: FlowySvgs.m_notification_action_archive_s,
+                text: LocaleKeys.settings_notifications_action_archive.tr(),
+                onTap: () => _onArchive(context),
+              ),
+            ),
+            const HSpace(20),
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _onMarkAsRead(BuildContext context) {
+    if (mSelectedNotificationIds.value.isEmpty) {
+      return;
+    }
+
+    showToastNotification(
+      context,
+      message: LocaleKeys
+          .settings_notifications_markAsReadNotifications_allSuccess
+          .tr(),
+    );
+
+    getIt<ReminderBloc>()
+        .add(ReminderEvent.markAsRead(mSelectedNotificationIds.value));
+
+    mSelectedNotificationIds.value = [];
+  }
+
+  void _onArchive(BuildContext context) {
+    if (mSelectedNotificationIds.value.isEmpty) {
+      return;
+    }
+
+    showToastNotification(
+      context,
+      message: LocaleKeys.settings_notifications_archiveNotifications_allSuccess
+          .tr(),
+    );
+
+    getIt<ReminderBloc>()
+        .add(ReminderEvent.archive(mSelectedNotificationIds.value));
+
+    mSelectedNotificationIds.value = [];
+  }
+}
+
+extension on BuildContext {
+  Color get backgroundColor {
+    return Theme.of(this).isLightMode
+        ? Colors.white.withOpacity(0.95)
+        : const Color(0xFF23262B).withOpacity(0.95);
+  }
+
+  Color get borderColor {
+    return Theme.of(this).isLightMode
+        ? const Color(0x141F2329)
+        : const Color(0xFF23262B).withOpacity(0.5);
+  }
+
+  Border? get border {
+    return Theme.of(this).isLightMode
+        ? Border(top: BorderSide(color: borderColor))
+        : null;
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/mobile_notifications_multiple_select_page.dart

@@ -0,0 +1,59 @@
+import 'package:appflowy/mobile/presentation/notifications/mobile_notifications_screen.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class MobileNotificationsMultiSelectScreen extends StatelessWidget {
+  const MobileNotificationsMultiSelectScreen({super.key});
+
+  static const routeName = '/notifications_multi_select';
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<ReminderBloc>.value(
+      value: getIt<ReminderBloc>(),
+      child: const MobileNotificationMultiSelect(),
+    );
+  }
+}
+
+class MobileNotificationMultiSelect extends StatefulWidget {
+  const MobileNotificationMultiSelect({
+    super.key,
+  });
+
+  @override
+  State<MobileNotificationMultiSelect> createState() =>
+      _MobileNotificationMultiSelectState();
+}
+
+class _MobileNotificationMultiSelectState
+    extends State<MobileNotificationMultiSelect> {
+  @override
+  void dispose() {
+    mSelectedNotificationIds.value.clear();
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(
+      body: SafeArea(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            MobileNotificationMultiSelectPageHeader(),
+            VSpace(12.0),
+            Expanded(
+              child: MultiSelectNotificationTab(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/mobile_notifications_screen.dart

@@ -0,0 +1,129 @@
+import 'package:appflowy/mobile/presentation/notifications/mobile_notifications_multiple_select_page.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+final PropertyValueNotifier<List<String>> mSelectedNotificationIds =
+    PropertyValueNotifier([]);
+
+class MobileNotificationsScreenV2 extends StatefulWidget {
+  const MobileNotificationsScreenV2({super.key});
+
+  static const routeName = '/notifications';
+
+  @override
+  State<MobileNotificationsScreenV2> createState() =>
+      _MobileNotificationsScreenV2State();
+}
+
+class _MobileNotificationsScreenV2State
+    extends State<MobileNotificationsScreenV2>
+    with AutomaticKeepAliveClientMixin {
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  void initState() {
+    super.initState();
+
+    mCurrentWorkspace.addListener(_onRefresh);
+  }
+
+  @override
+  void dispose() {
+    mCurrentWorkspace.removeListener(_onRefresh);
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+
+    return BlocProvider<ReminderBloc>.value(
+      value: getIt<ReminderBloc>(),
+      child: ValueListenableBuilder(
+        valueListenable: bottomNavigationBarType,
+        builder: (_, value, __) {
+          switch (value) {
+            case BottomNavigationBarActionType.home:
+              return const MobileNotificationsTab();
+            case BottomNavigationBarActionType.notificationMultiSelect:
+              return const MobileNotificationMultiSelect();
+          }
+        },
+      ),
+    );
+  }
+
+  void _onRefresh() {
+    getIt<ReminderBloc>().add(const ReminderEvent.refresh());
+  }
+}
+
+class MobileNotificationsTab extends StatefulWidget {
+  const MobileNotificationsTab({
+    super.key,
+  });
+
+  @override
+  State<MobileNotificationsTab> createState() => _MobileNotificationsTabState();
+}
+
+class _MobileNotificationsTabState extends State<MobileNotificationsTab>
+    with SingleTickerProviderStateMixin {
+  late TabController tabController;
+
+  final tabs = [
+    MobileNotificationTabType.inbox,
+    MobileNotificationTabType.unread,
+    MobileNotificationTabType.archive,
+  ];
+
+  @override
+  void initState() {
+    super.initState();
+
+    tabController = TabController(
+      length: 3,
+      vsync: this,
+    );
+  }
+
+  @override
+  void dispose() {
+    tabController.dispose();
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const MobileNotificationPageHeader(),
+            MobileNotificationTabBar(
+              tabController: tabController,
+              tabs: tabs,
+            ),
+            const VSpace(12.0),
+            Expanded(
+              child: TabBarView(
+                controller: tabController,
+                children: tabs.map((e) => NotificationTab(tabType: e)).toList(),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/color.dart

@@ -0,0 +1,11 @@
+import 'package:appflowy/util/theme_extension.dart';
+import 'package:flutter/material.dart';
+
+extension NotificationItemColors on BuildContext {
+  Color get notificationItemTextColor {
+    if (Theme.of(this).isLightMode) {
+      return const Color(0xFF171717);
+    }
+    return const Color(0xFFffffff).withOpacity(0.8);
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/empty.dart

@@ -0,0 +1,58 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+class EmptyNotification extends StatelessWidget {
+  const EmptyNotification({
+    super.key,
+    required this.type,
+  });
+
+  final MobileNotificationTabType type;
+
+  @override
+  Widget build(BuildContext context) {
+    final title = switch (type) {
+      MobileNotificationTabType.inbox =>
+        LocaleKeys.settings_notifications_emptyInbox_title.tr(),
+      MobileNotificationTabType.archive =>
+        LocaleKeys.settings_notifications_emptyArchived_title.tr(),
+      MobileNotificationTabType.unread =>
+        LocaleKeys.settings_notifications_emptyUnread_title.tr(),
+    };
+    final desc = switch (type) {
+      MobileNotificationTabType.inbox =>
+        LocaleKeys.settings_notifications_emptyInbox_description.tr(),
+      MobileNotificationTabType.archive =>
+        LocaleKeys.settings_notifications_emptyArchived_description.tr(),
+      MobileNotificationTabType.unread =>
+        LocaleKeys.settings_notifications_emptyUnread_description.tr(),
+    };
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        const FlowySvg(FlowySvgs.m_empty_notification_xl),
+        const VSpace(12.0),
+        FlowyText(
+          title,
+          fontSize: 16.0,
+          figmaLineHeight: 24.0,
+          fontWeight: FontWeight.w500,
+        ),
+        const VSpace(4.0),
+        Opacity(
+          opacity: 0.45,
+          child: FlowyText(
+            desc,
+            fontSize: 15.0,
+            figmaLineHeight: 22.0,
+            fontWeight: FontWeight.w400,
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/header.dart

@@ -0,0 +1,96 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/notifications/mobile_notifications_screen.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/settings_popup_menu.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+class MobileNotificationPageHeader extends StatelessWidget {
+  const MobileNotificationPageHeader({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ConstrainedBox(
+      constraints: const BoxConstraints(minHeight: 56),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          const HSpace(16.0),
+          FlowyText(
+            LocaleKeys.settings_notifications_titles_notifications.tr(),
+            fontSize: 20,
+            fontWeight: FontWeight.w600,
+          ),
+          const Spacer(),
+          const NotificationSettingsPopupMenu(),
+          const HSpace(16.0),
+        ],
+      ),
+    );
+  }
+}
+
+class MobileNotificationMultiSelectPageHeader extends StatelessWidget {
+  const MobileNotificationMultiSelectPageHeader({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ConstrainedBox(
+      constraints: const BoxConstraints(minHeight: 56),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          _buildCancelButton(
+            isOpaque: false,
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            onTap: () => bottomNavigationBarType.value =
+                BottomNavigationBarActionType.home,
+          ),
+          ValueListenableBuilder(
+            valueListenable: mSelectedNotificationIds,
+            builder: (_, value, __) {
+              return FlowyText(
+                // todo: i18n
+                '${value.length} Selected',
+                fontSize: 17.0,
+                figmaLineHeight: 24.0,
+                fontWeight: FontWeight.w500,
+              );
+            },
+          ),
+          // this button is used to align the text to the center
+          _buildCancelButton(
+            isOpaque: true,
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+          ),
+        ],
+      ),
+    );
+  }
+
+  //
+  Widget _buildCancelButton({
+    required bool isOpaque,
+    required EdgeInsets padding,
+    VoidCallback? onTap,
+  }) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Padding(
+        padding: padding,
+        child: FlowyText(
+          LocaleKeys.button_cancel.tr(),
+          fontSize: 17.0,
+          figmaLineHeight: 24.0,
+          fontWeight: FontWeight.w400,
+          color: isOpaque ? Colors.transparent : null,
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/multi_select_notification_item.dart

@@ -0,0 +1,115 @@
+import 'package:appflowy/mobile/application/notification/notification_reminder_bloc.dart';
+import 'package:appflowy/mobile/presentation/base/gesture.dart';
+import 'package:appflowy/mobile/presentation/notifications/mobile_notifications_screen.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class MultiSelectNotificationItem extends StatelessWidget {
+  const MultiSelectNotificationItem({
+    super.key,
+    required this.reminder,
+  });
+
+  final ReminderPB reminder;
+
+  @override
+  Widget build(BuildContext context) {
+    final settings = context.read<AppearanceSettingsCubit>().state;
+    final dateFormate = settings.dateFormat;
+    final timeFormate = settings.timeFormat;
+    return BlocProvider<NotificationReminderBloc>(
+      create: (context) => NotificationReminderBloc()
+        ..add(
+          NotificationReminderEvent.initial(
+            reminder,
+            dateFormate,
+            timeFormate,
+          ),
+        ),
+      child: BlocBuilder<NotificationReminderBloc, NotificationReminderState>(
+        builder: (context, state) {
+          if (state.status == NotificationReminderStatus.loading ||
+              state.status == NotificationReminderStatus.initial) {
+            return const SizedBox.shrink();
+          }
+
+          if (state.status == NotificationReminderStatus.error) {
+            // error handle.
+            return const SizedBox.shrink();
+          }
+
+          final child = ValueListenableBuilder(
+            valueListenable: mSelectedNotificationIds,
+            builder: (_, selectedIds, child) {
+              return Container(
+                margin: const EdgeInsets.symmetric(horizontal: 12),
+                decoration: selectedIds.contains(reminder.id)
+                    ? ShapeDecoration(
+                        color: const Color(0x1900BCF0),
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                      )
+                    : null,
+                child: child,
+              );
+            },
+            child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 8),
+              child: _InnerNotificationItem(
+                reminder: reminder,
+              ),
+            ),
+          );
+
+          return AnimatedGestureDetector(
+            scaleFactor: 0.99,
+            onTapUp: () {
+              if (mSelectedNotificationIds.value.contains(reminder.id)) {
+                mSelectedNotificationIds.value = mSelectedNotificationIds.value
+                  ..remove(reminder.id);
+              } else {
+                mSelectedNotificationIds.value = mSelectedNotificationIds.value
+                  ..add(reminder.id);
+              }
+            },
+            child: child,
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _InnerNotificationItem extends StatelessWidget {
+  const _InnerNotificationItem({
+    required this.reminder,
+  });
+
+  final ReminderPB reminder;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const HSpace(10.0),
+        NotificationCheckIcon(
+          isSelected: mSelectedNotificationIds.value.contains(reminder.id),
+        ),
+        const HSpace(3.0),
+        !reminder.isRead ? const UnreadRedDot() : const HSpace(6.0),
+        const HSpace(3.0),
+        NotificationIcon(reminder: reminder),
+        const HSpace(12.0),
+        Expanded(
+          child: NotificationContent(reminder: reminder),
+        ),
+      ],
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/notification_item.dart

@@ -0,0 +1,164 @@
+import 'package:appflowy/mobile/application/mobile_router.dart';
+import 'package:appflowy/mobile/application/notification/notification_reminder_bloc.dart';
+import 'package:appflowy/mobile/presentation/base/gesture.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_slidable/flutter_slidable.dart';
+
+class NotificationItem extends StatelessWidget {
+  const NotificationItem({
+    super.key,
+    required this.tabType,
+    required this.reminder,
+  });
+
+  final MobileNotificationTabType tabType;
+  final ReminderPB reminder;
+
+  @override
+  Widget build(BuildContext context) {
+    final settings = context.read<AppearanceSettingsCubit>().state;
+    final dateFormate = settings.dateFormat;
+    final timeFormate = settings.timeFormat;
+    return BlocProvider<NotificationReminderBloc>(
+      create: (context) => NotificationReminderBloc()
+        ..add(
+          NotificationReminderEvent.initial(
+            reminder,
+            dateFormate,
+            timeFormate,
+          ),
+        ),
+      child: BlocBuilder<NotificationReminderBloc, NotificationReminderState>(
+        builder: (context, state) {
+          if (state.status == NotificationReminderStatus.loading ||
+              state.status == NotificationReminderStatus.initial) {
+            return const SizedBox.shrink();
+          }
+
+          if (state.status == NotificationReminderStatus.error) {
+            // error handle.
+            return const SizedBox.shrink();
+          }
+
+          final child = Padding(
+            padding: const EdgeInsets.symmetric(vertical: 8),
+            child: _SlidableNotificationItem(
+              tabType: tabType,
+              reminder: reminder,
+              child: _InnerNotificationItem(
+                tabType: tabType,
+                reminder: reminder,
+              ),
+            ),
+          );
+
+          return AnimatedGestureDetector(
+            scaleFactor: 0.99,
+            child: child,
+            onTapUp: () async {
+              final view = state.view;
+              if (view == null) {
+                return;
+              }
+
+              await context.pushView(view);
+
+              if (!reminder.isRead && context.mounted) {
+                context.read<ReminderBloc>().add(
+                      ReminderEvent.markAsRead([reminder.id]),
+                    );
+              }
+            },
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _InnerNotificationItem extends StatelessWidget {
+  const _InnerNotificationItem({
+    required this.reminder,
+    required this.tabType,
+  });
+
+  final MobileNotificationTabType tabType;
+  final ReminderPB reminder;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const HSpace(8.0),
+        !reminder.isRead ? const UnreadRedDot() : const HSpace(6.0),
+        const HSpace(4.0),
+        NotificationIcon(reminder: reminder),
+        const HSpace(12.0),
+        Expanded(
+          child: NotificationContent(reminder: reminder),
+        ),
+      ],
+    );
+  }
+}
+
+class _SlidableNotificationItem extends StatelessWidget {
+  const _SlidableNotificationItem({
+    required this.tabType,
+    required this.reminder,
+    required this.child,
+  });
+
+  final MobileNotificationTabType tabType;
+  final ReminderPB reminder;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final List<NotificationPaneActionType> actions = switch (tabType) {
+      MobileNotificationTabType.inbox => [
+          NotificationPaneActionType.more,
+          if (!reminder.isRead) NotificationPaneActionType.markAsRead,
+        ],
+      MobileNotificationTabType.unread => [
+          NotificationPaneActionType.more,
+          NotificationPaneActionType.markAsRead,
+        ],
+      MobileNotificationTabType.archive => [
+          if (kDebugMode) NotificationPaneActionType.unArchive,
+        ],
+    };
+
+    if (actions.isEmpty) {
+      return child;
+    }
+
+    final children = actions
+        .map(
+          (action) => action.actionButton(
+            context,
+            tabType: tabType,
+          ),
+        )
+        .toList();
+
+    final extentRatio = actions.length == 1 ? 1 / 5 : 1 / 3;
+
+    return Slidable(
+      endActionPane: ActionPane(
+        motion: const ScrollMotion(),
+        extentRatio: extentRatio,
+        children: children,
+      ),
+      child: child,
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/settings_popup_menu.dart

@@ -0,0 +1,167 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:provider/provider.dart';
+
+enum _NotificationSettingsPopupMenuItem {
+  settings,
+  markAllAsRead,
+  archiveAll,
+  // only visible in debug mode
+  unarchiveAll;
+}
+
+class NotificationSettingsPopupMenu extends StatelessWidget {
+  const NotificationSettingsPopupMenu({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PopupMenuButton<_NotificationSettingsPopupMenuItem>(
+      offset: const Offset(0, 36),
+      padding: EdgeInsets.zero,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(
+          Radius.circular(12.0),
+        ),
+      ),
+      // todo: replace it with shadows
+      shadowColor: const Color(0x68000000),
+      elevation: 10,
+      child: const Padding(
+        padding: EdgeInsets.all(8.0),
+        child: FlowySvg(
+          FlowySvgs.m_settings_more_s,
+        ),
+      ),
+      itemBuilder: (BuildContext context) =>
+          <PopupMenuEntry<_NotificationSettingsPopupMenuItem>>[
+        _buildItem(
+          value: _NotificationSettingsPopupMenuItem.settings,
+          svg: FlowySvgs.m_notification_settings_s,
+          text: LocaleKeys.settings_notifications_settings_settings.tr(),
+        ),
+        const PopupMenuDivider(height: 0.5),
+        _buildItem(
+          value: _NotificationSettingsPopupMenuItem.markAllAsRead,
+          svg: FlowySvgs.m_notification_mark_as_read_s,
+          text: LocaleKeys.settings_notifications_settings_markAllAsRead.tr(),
+        ),
+        const PopupMenuDivider(height: 0.5),
+        _buildItem(
+          value: _NotificationSettingsPopupMenuItem.archiveAll,
+          svg: FlowySvgs.m_notification_archived_s,
+          text: LocaleKeys.settings_notifications_settings_archiveAll.tr(),
+        ),
+        // only visible in debug mode
+        if (kDebugMode) ...[
+          const PopupMenuDivider(height: 0.5),
+          _buildItem(
+            value: _NotificationSettingsPopupMenuItem.unarchiveAll,
+            svg: FlowySvgs.m_notification_archived_s,
+            text: 'Unarchive all (Debug Mode)',
+          ),
+        ],
+      ],
+      onSelected: (_NotificationSettingsPopupMenuItem value) {
+        switch (value) {
+          case _NotificationSettingsPopupMenuItem.markAllAsRead:
+            _onMarkAllAsRead(context);
+            break;
+          case _NotificationSettingsPopupMenuItem.archiveAll:
+            _onArchiveAll(context);
+            break;
+          case _NotificationSettingsPopupMenuItem.settings:
+            context.push(MobileHomeSettingPage.routeName);
+            break;
+          case _NotificationSettingsPopupMenuItem.unarchiveAll:
+            _onUnarchiveAll(context);
+            break;
+        }
+      },
+    );
+  }
+
+  PopupMenuItem<T> _buildItem<T>({
+    required T value,
+    required FlowySvgData svg,
+    required String text,
+  }) {
+    return PopupMenuItem<T>(
+      value: value,
+      padding: EdgeInsets.zero,
+      child: _PopupButton(
+        svg: svg,
+        text: text,
+      ),
+    );
+  }
+
+  void _onMarkAllAsRead(BuildContext context) {
+    showToastNotification(
+      context,
+      message: LocaleKeys
+          .settings_notifications_markAsReadNotifications_allSuccess
+          .tr(),
+    );
+
+    context.read<ReminderBloc>().add(const ReminderEvent.markAllRead());
+  }
+
+  void _onArchiveAll(BuildContext context) {
+    showToastNotification(
+      context,
+      message: LocaleKeys.settings_notifications_archiveNotifications_allSuccess
+          .tr(),
+    );
+
+    context.read<ReminderBloc>().add(const ReminderEvent.archiveAll());
+  }
+
+  void _onUnarchiveAll(BuildContext context) {
+    if (!kDebugMode) {
+      return;
+    }
+
+    showToastNotification(
+      context,
+      message: 'Unarchive all success (Debug Mode)',
+    );
+
+    context.read<ReminderBloc>().add(const ReminderEvent.unarchiveAll());
+  }
+}
+
+class _PopupButton extends StatelessWidget {
+  const _PopupButton({
+    required this.svg,
+    required this.text,
+  });
+
+  final FlowySvgData svg;
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 44,
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      child: Row(
+        children: [
+          FlowySvg(svg),
+          const HSpace(12),
+          FlowyText.regular(
+            text,
+            fontSize: 16,
+          ),
+        ],
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/shared.dart

@@ -0,0 +1,246 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/application/notification/notification_reminder_bloc.dart';
+import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/color.dart';
+import 'package:appflowy/plugins/document/presentation/editor_configuration.dart';
+import 'package:appflowy/plugins/document/presentation/editor_style.dart';
+import 'package:appflowy/user/application/reminder/reminder_extension.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+const _kNotificationIconHeight = 36.0;
+
+class NotificationIcon extends StatelessWidget {
+  const NotificationIcon({
+    super.key,
+    required this.reminder,
+  });
+
+  final ReminderPB reminder;
+
+  @override
+  Widget build(BuildContext context) {
+    return const FlowySvg(
+      FlowySvgs.m_notification_reminder_s,
+      size: Size.square(_kNotificationIconHeight),
+      blendMode: null,
+    );
+  }
+}
+
+class NotificationCheckIcon extends StatelessWidget {
+  const NotificationCheckIcon({super.key, required this.isSelected});
+
+  final bool isSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: _kNotificationIconHeight,
+      child: Center(
+        child: FlowySvg(
+          isSelected
+              ? FlowySvgs.m_notification_multi_select_s
+              : FlowySvgs.m_notification_multi_unselect_s,
+          blendMode: isSelected ? null : BlendMode.srcIn,
+        ),
+      ),
+    );
+  }
+}
+
+class UnreadRedDot extends StatelessWidget {
+  const UnreadRedDot({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SizedBox(
+      height: _kNotificationIconHeight,
+      child: Center(
+        child: SizedBox.square(
+          dimension: 6.0,
+          child: DecoratedBox(
+            decoration: ShapeDecoration(
+              color: Color(0xFFFF6331),
+              shape: OvalBorder(),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class NotificationContent extends StatelessWidget {
+  const NotificationContent({
+    super.key,
+    required this.reminder,
+  });
+
+  final ReminderPB reminder;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<NotificationReminderBloc, NotificationReminderState>(
+      builder: (context, state) {
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            // title
+            _buildHeader(),
+
+            // time & page name
+            _buildTimeAndPageName(
+              context,
+              state.createdAt,
+              state.pageTitle,
+            ),
+
+            // content
+            Padding(
+              padding: const EdgeInsets.only(right: 16.0),
+              child: IntrinsicHeight(
+                child: BlocProvider(
+                  create: (context) => DocumentPageStyleBloc(view: state.view!),
+                  child: NotificationDocumentContent(
+                    reminder: reminder,
+                    nodes: state.nodes,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildHeader() {
+    return FlowyText.semibold(
+      LocaleKeys.settings_notifications_titles_reminder.tr(),
+      fontSize: 14,
+      figmaLineHeight: 20,
+    );
+  }
+
+  Widget _buildTimeAndPageName(
+    BuildContext context,
+    String createdAt,
+    String pageTitle,
+  ) {
+    return Opacity(
+      opacity: 0.5,
+      child: Row(
+        children: [
+          // the legacy reminder doesn't contain the timestamp, so we don't show it
+          if (createdAt.isNotEmpty) ...[
+            FlowyText.regular(
+              createdAt,
+              fontSize: 12,
+              figmaLineHeight: 18,
+              color: context.notificationItemTextColor,
+            ),
+            const NotificationEllipse(),
+          ],
+          FlowyText.regular(
+            pageTitle,
+            fontSize: 12,
+            figmaLineHeight: 18,
+            color: context.notificationItemTextColor,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class NotificationEllipse extends StatelessWidget {
+  const NotificationEllipse({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 2.50,
+      height: 2.50,
+      margin: const EdgeInsets.symmetric(horizontal: 5.0),
+      decoration: ShapeDecoration(
+        color: context.notificationItemTextColor,
+        shape: const OvalBorder(),
+      ),
+    );
+  }
+}
+
+class NotificationDocumentContent extends StatelessWidget {
+  const NotificationDocumentContent({
+    super.key,
+    required this.reminder,
+    required this.nodes,
+  });
+
+  final ReminderPB reminder;
+  final List<Node> nodes;
+
+  @override
+  Widget build(BuildContext context) {
+    final editorState = EditorState(
+      document: Document(
+        root: pageNode(children: nodes),
+      ),
+    );
+
+    final styleCustomizer = EditorStyleCustomizer(
+      context: context,
+      padding: EdgeInsets.zero,
+    );
+
+    final editorStyle = styleCustomizer.style().copyWith(
+          // hide the cursor
+          cursorColor: Colors.transparent,
+          cursorWidth: 0,
+          textStyleConfiguration: TextStyleConfiguration(
+            lineHeight: 22 / 14,
+            applyHeightToFirstAscent: true,
+            applyHeightToLastDescent: true,
+            text: TextStyle(
+              fontSize: 14,
+              color: context.notificationItemTextColor,
+              height: 22 / 14,
+              fontWeight: FontWeight.w400,
+              leadingDistribution: TextLeadingDistribution.even,
+            ),
+          ),
+        );
+
+    final blockBuilders = getEditorBuilderMap(
+      context: context,
+      editorState: editorState,
+      styleCustomizer: styleCustomizer,
+      // the editor is not editable in the chat
+      editable: false,
+      customHeadingPadding: EdgeInsets.zero,
+    );
+
+    return IgnorePointer(
+      child: Opacity(
+        opacity: reminder.type == ReminderType.past ? 0.3 : 1,
+        child: AppFlowyEditor(
+          editorState: editorState,
+          editorStyle: editorStyle,
+          disableSelectionService: true,
+          disableKeyboardService: true,
+          disableScrollService: true,
+          editable: false,
+          shrinkWrap: true,
+          blockComponentBuilders: blockBuilders,
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/slide_actions.dart

@@ -0,0 +1,212 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/application/notification/notification_reminder_bloc.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:appflowy/mobile/presentation/page_item/mobile_slide_action_button.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:appflowy/user/application/reminder/reminder_extension.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+enum NotificationPaneActionType {
+  more,
+  markAsRead,
+  // only used in the debug mode.
+  unArchive;
+
+  MobileSlideActionButton actionButton(
+    BuildContext context, {
+    required MobileNotificationTabType tabType,
+  }) {
+    switch (this) {
+      case NotificationPaneActionType.markAsRead:
+        return MobileSlideActionButton(
+          backgroundColor: const Color(0xFF00C8FF),
+          svg: FlowySvgs.m_notification_action_mark_as_read_s,
+          size: 24.0,
+          onPressed: (context) {
+            showToastNotification(
+              context,
+              message: LocaleKeys
+                  .settings_notifications_markAsReadNotifications_success
+                  .tr(),
+            );
+
+            context.read<ReminderBloc>().add(
+                  ReminderEvent.update(
+                    ReminderUpdate(
+                      id: context.read<NotificationReminderBloc>().reminder.id,
+                      isRead: true,
+                    ),
+                  ),
+                );
+          },
+        );
+      // this action is only used in the debug mode.
+      case NotificationPaneActionType.unArchive:
+        return MobileSlideActionButton(
+          backgroundColor: const Color(0xFF00C8FF),
+          svg: FlowySvgs.m_notification_action_mark_as_read_s,
+          size: 24.0,
+          onPressed: (context) {
+            showToastNotification(
+              context,
+              message: 'Unarchive notification success',
+            );
+
+            context.read<ReminderBloc>().add(
+                  ReminderEvent.update(
+                    ReminderUpdate(
+                      id: context.read<NotificationReminderBloc>().reminder.id,
+                      isArchived: false,
+                    ),
+                  ),
+                );
+          },
+        );
+      case NotificationPaneActionType.more:
+        return MobileSlideActionButton(
+          backgroundColor: const Color(0xE5515563),
+          svg: FlowySvgs.three_dots_s,
+          size: 24.0,
+          borderRadius: const BorderRadius.only(
+            topLeft: Radius.circular(10),
+            bottomLeft: Radius.circular(10),
+          ),
+          onPressed: (context) {
+            final reminderBloc = context.read<ReminderBloc>();
+            final notificationReminderBloc =
+                context.read<NotificationReminderBloc>();
+
+            showMobileBottomSheet(
+              context,
+              showDragHandle: true,
+              showDivider: false,
+              useRootNavigator: true,
+              backgroundColor: Theme.of(context).colorScheme.surface,
+              builder: (_) {
+                return MultiBlocProvider(
+                  providers: [
+                    BlocProvider.value(value: reminderBloc),
+                    BlocProvider.value(value: notificationReminderBloc),
+                  ],
+                  child: _NotificationMoreActions(
+                    onClickMultipleChoice: () {
+                      Future.delayed(const Duration(milliseconds: 250), () {
+                        bottomNavigationBarType.value =
+                            BottomNavigationBarActionType
+                                .notificationMultiSelect;
+                      });
+                    },
+                  ),
+                );
+              },
+            );
+          },
+        );
+    }
+  }
+}
+
+class _NotificationMoreActions extends StatelessWidget {
+  const _NotificationMoreActions({
+    required this.onClickMultipleChoice,
+  });
+
+  final VoidCallback onClickMultipleChoice;
+
+  @override
+  Widget build(BuildContext context) {
+    final reminder = context.read<NotificationReminderBloc>().reminder;
+    return Column(
+      children: [
+        if (!reminder.isRead)
+          FlowyOptionTile.text(
+            height: 52.0,
+            text: LocaleKeys.settings_notifications_action_markAsRead.tr(),
+            leftIcon: const FlowySvg(
+              FlowySvgs.m_notification_action_mark_as_read_s,
+              size: Size.square(20),
+            ),
+            showTopBorder: false,
+            showBottomBorder: false,
+            onTap: () => _onMarkAsRead(context),
+          ),
+        FlowyOptionTile.text(
+          height: 52.0,
+          text: LocaleKeys.settings_notifications_action_multipleChoice.tr(),
+          leftIcon: const FlowySvg(
+            FlowySvgs.m_notification_action_multiple_choice_s,
+            size: Size.square(20),
+          ),
+          showTopBorder: false,
+          showBottomBorder: false,
+          onTap: () => _onMultipleChoice(context),
+        ),
+        if (!reminder.isArchived)
+          FlowyOptionTile.text(
+            height: 52.0,
+            text: LocaleKeys.settings_notifications_action_archive.tr(),
+            leftIcon: const FlowySvg(
+              FlowySvgs.m_notification_action_archive_s,
+              size: Size.square(20),
+            ),
+            showTopBorder: false,
+            showBottomBorder: false,
+            onTap: () => _onArchive(context),
+          ),
+      ],
+    );
+  }
+
+  void _onMarkAsRead(BuildContext context) {
+    Navigator.of(context).pop();
+
+    showToastNotification(
+      context,
+      message: LocaleKeys.settings_notifications_markAsReadNotifications_success
+          .tr(),
+    );
+
+    context.read<ReminderBloc>().add(
+          ReminderEvent.update(
+            ReminderUpdate(
+              id: context.read<NotificationReminderBloc>().reminder.id,
+              isRead: true,
+            ),
+          ),
+        );
+  }
+
+  void _onMultipleChoice(BuildContext context) {
+    Navigator.of(context).pop();
+
+    onClickMultipleChoice();
+  }
+
+  void _onArchive(BuildContext context) {
+    showToastNotification(
+      context,
+      message: LocaleKeys.settings_notifications_archiveNotifications_success
+          .tr()
+          .tr(),
+    );
+
+    context.read<ReminderBloc>().add(
+          ReminderEvent.update(
+            ReminderUpdate(
+              id: context.read<NotificationReminderBloc>().reminder.id,
+              isRead: true,
+              isArchived: true,
+            ),
+          ),
+        );
+
+    Navigator.of(context).pop();
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/tab.dart

@@ -0,0 +1,137 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:appflowy/shared/list_extension.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:appflowy/user/application/reminder/reminder_extension.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
+import 'package:appflowy_backend/appflowy_backend.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';
+
+class NotificationTab extends StatefulWidget {
+  const NotificationTab({
+    super.key,
+    required this.tabType,
+  });
+
+  final MobileNotificationTabType tabType;
+
+  @override
+  State<NotificationTab> createState() => _NotificationTabState();
+}
+
+class _NotificationTabState extends State<NotificationTab>
+    with AutomaticKeepAliveClientMixin {
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+
+    return BlocBuilder<ReminderBloc, ReminderState>(
+      builder: (context, state) {
+        final reminders = _filterReminders(state.reminders);
+
+        if (reminders.isEmpty) {
+          // add refresh indicator to the empty notification.
+          return EmptyNotification(
+            type: widget.tabType,
+          );
+        }
+
+        final child = ListView.separated(
+          itemCount: reminders.length,
+          separatorBuilder: (context, index) => const VSpace(8.0),
+          itemBuilder: (context, index) {
+            final reminder = reminders[index];
+            return NotificationItem(
+              key: ValueKey('${widget.tabType}_${reminder.id}'),
+              tabType: widget.tabType,
+              reminder: reminder,
+            );
+          },
+        );
+
+        return RefreshIndicator.adaptive(
+          onRefresh: () async => _onRefresh(context),
+          child: child,
+        );
+      },
+    );
+  }
+
+  Future<void> _onRefresh(BuildContext context) async {
+    context.read<ReminderBloc>().add(const ReminderEvent.refresh());
+
+    // at least 0.5 seconds to dismiss the refresh indicator.
+    // otherwise, it will be dismissed immediately.
+    await context.read<ReminderBloc>().stream.firstOrNull;
+    await Future.delayed(const Duration(milliseconds: 500));
+
+    if (context.mounted) {
+      showToastNotification(
+        context,
+        message: LocaleKeys.settings_notifications_refreshSuccess.tr(),
+      );
+    }
+  }
+
+  List<ReminderPB> _filterReminders(List<ReminderPB> reminders) {
+    switch (widget.tabType) {
+      case MobileNotificationTabType.inbox:
+        return reminders.reversed
+            .where((reminder) => !reminder.isArchived)
+            .toList()
+            .unique((reminder) => reminder.id);
+      case MobileNotificationTabType.archive:
+        return reminders.reversed
+            .where((reminder) => reminder.isArchived)
+            .toList()
+            .unique((reminder) => reminder.id);
+      case MobileNotificationTabType.unread:
+        return reminders.reversed
+            .where((reminder) => !reminder.isRead)
+            .toList()
+            .unique((reminder) => reminder.id);
+    }
+  }
+}
+
+class MultiSelectNotificationTab extends StatelessWidget {
+  const MultiSelectNotificationTab({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<ReminderBloc, ReminderState>(
+      builder: (context, state) {
+        // find the reminders that are not archived or read.
+        final reminders = state.reminders.reversed
+            .where((reminder) => !reminder.isArchived || !reminder.isRead)
+            .toList();
+
+        if (reminders.isEmpty) {
+          // add refresh indicator to the empty notification.
+          return const SizedBox.shrink();
+        }
+
+        return ListView.separated(
+          itemCount: reminders.length,
+          separatorBuilder: (context, index) => const VSpace(8.0),
+          itemBuilder: (context, index) {
+            final reminder = reminders[index];
+            return MultiSelectNotificationItem(
+              key: ValueKey(reminder.id),
+              reminder: reminder,
+            );
+          },
+        );
+      },
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/tab_bar.dart

@@ -0,0 +1,88 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/home/tab/_round_underline_tab_indicator.dart';
+import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:reorderable_tabbar/reorderable_tabbar.dart';
+
+enum MobileNotificationTabType {
+  inbox,
+  unread,
+  archive;
+
+  String get tr {
+    switch (this) {
+      case MobileNotificationTabType.inbox:
+        return LocaleKeys.settings_notifications_tabs_inbox.tr();
+      case MobileNotificationTabType.unread:
+        return LocaleKeys.settings_notifications_tabs_unread.tr();
+      case MobileNotificationTabType.archive:
+        return LocaleKeys.settings_notifications_tabs_archived.tr();
+    }
+  }
+
+  List<NotificationPaneActionType> get actions {
+    switch (this) {
+      case MobileNotificationTabType.inbox:
+        return [
+          NotificationPaneActionType.more,
+          NotificationPaneActionType.markAsRead,
+        ];
+      case MobileNotificationTabType.unread:
+      case MobileNotificationTabType.archive:
+        return [];
+    }
+  }
+}
+
+class MobileNotificationTabBar extends StatelessWidget {
+  const MobileNotificationTabBar({
+    super.key,
+    this.height = 38.0,
+    required this.tabController,
+    required this.tabs,
+  });
+
+  final double height;
+  final List<MobileNotificationTabType> tabs;
+  final TabController tabController;
+
+  @override
+  Widget build(BuildContext context) {
+    final baseStyle = Theme.of(context).textTheme.bodyMedium;
+    final labelStyle = baseStyle?.copyWith(
+      fontWeight: FontWeight.w500,
+      fontSize: 16.0,
+      height: 22.0 / 16.0,
+    );
+    final unselectedLabelStyle = baseStyle?.copyWith(
+      fontWeight: FontWeight.w400,
+      fontSize: 15.0,
+      height: 22.0 / 15.0,
+    );
+
+    return Container(
+      height: height,
+      padding: const EdgeInsets.only(left: 8.0),
+      child: ReorderableTabBar(
+        controller: tabController,
+        tabs: tabs.map((e) => Tab(text: e.tr)).toList(),
+        indicatorSize: TabBarIndicatorSize.label,
+        indicatorColor: Theme.of(context).primaryColor,
+        isScrollable: true,
+        labelStyle: labelStyle,
+        labelColor: baseStyle?.color,
+        labelPadding: const EdgeInsets.symmetric(horizontal: 12.0),
+        unselectedLabelStyle: unselectedLabelStyle,
+        overlayColor: WidgetStateProperty.all(Colors.transparent),
+        indicator: RoundUnderlineTabIndicator(
+          width: 28.0,
+          borderSide: BorderSide(
+            color: Theme.of(context).primaryColor,
+            width: 3,
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,9 @@
+export 'empty.dart';
+export 'header.dart';
+export 'multi_select_notification_item.dart';
+export 'notification_item.dart';
+export 'settings_popup_menu.dart';
+export 'shared.dart';
+export 'slide_actions.dart';
+export 'tab.dart';
+export 'tab_bar.dart';

frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart

@@ -260,6 +260,7 @@ class _SingleMobileInnerViewItemState extends State<SingleMobileInnerViewItem> {
         child: FlowyText.regular(
           widget.view.name,
           fontSize: 16.0,
+          figmaLineHeight: 20.0,
           overflow: TextOverflow.ellipsis,
         ),
       ),
@@ -297,12 +298,17 @@ class _SingleMobileInnerViewItemState extends State<SingleMobileInnerViewItem> {
         ? FlowyText.emoji(
             widget.view.icon.value,
             fontSize: 18.0,
+            figmaLineHeight: 20.0,
+            optimizeEmojiAlign: true,
           )
         : Opacity(
             opacity: 0.7,
-            child: widget.view.defaultIcon(),
+            child: widget.view.defaultIcon(size: const Size.square(18)),
           );
-    return SizedBox(width: 18.0, child: icon);
+    return SizedBox(
+      width: 18.0,
+      child: icon,
+    );
   }
 
   // > button or · button

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

@@ -0,0 +1,47 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+class NavigationBarButton extends StatelessWidget {
+  const NavigationBarButton({
+    super.key,
+    required this.text,
+    required this.icon,
+    required this.onTap,
+    this.enable = true,
+  });
+
+  final String text;
+  final FlowySvgData icon;
+  final VoidCallback onTap;
+  final bool enable;
+
+  @override
+  Widget build(BuildContext context) {
+    return Opacity(
+      opacity: enable ? 1.0 : 0.3,
+      child: Container(
+        height: 40,
+        decoration: ShapeDecoration(
+          shape: RoundedRectangleBorder(
+            side: const BorderSide(color: Color(0x3F1F2329)),
+            borderRadius: BorderRadius.circular(10),
+          ),
+        ),
+        child: FlowyButton(
+          useIntrinsicWidth: true,
+          expandText: false,
+          iconPadding: 8,
+          leftIcon: FlowySvg(icon),
+          onTap: enable ? onTap : null,
+          text: FlowyText(
+            text,
+            fontSize: 15.0,
+            figmaLineHeight: 18.0,
+            fontWeight: FontWeight.w400,
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_ai_message_bloc.dart

@@ -3,7 +3,7 @@ import 'dart:async';
 import 'package:appflowy/plugins/ai_chat/application/chat_bloc.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/log.dart';
-import 'package:appflowy_backend/protobuf/flowy-chat/entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
 import 'package:fixnum/fixnum.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -17,17 +17,23 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
     required this.questionId,
   }) : super(ChatAIMessageState.initial(message)) {
     if (state.stream != null) {
-      _subscription = state.stream!.listen((text) {
-        if (isClosed) {
-          return;
-        }
-
-        if (text.startsWith("data:")) {
-          add(ChatAIMessageEvent.newText(text.substring(5)));
-        } else if (text.startsWith("error:")) {
-          add(ChatAIMessageEvent.receiveError(text.substring(5)));
-        }
-      });
+      state.stream!.listen(
+        onData: (text) {
+          if (!isClosed) {
+            add(ChatAIMessageEvent.updateText(text));
+          }
+        },
+        onError: (error) {
+          if (!isClosed) {
+            add(ChatAIMessageEvent.receiveError(error.toString()));
+          }
+        },
+        onAIResponseLimit: () {
+          if (!isClosed) {
+            add(const ChatAIMessageEvent.onAIResponseLimit());
+          }
+        },
+      );
 
       if (state.stream!.error != null) {
         Future.delayed(const Duration(milliseconds: 300), () {
@@ -42,11 +48,16 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
       (event, emit) async {
         await event.when(
           initial: () async {},
-          newText: (newText) {
-            emit(state.copyWith(text: state.text + newText, error: null));
+          updateText: (newText) {
+            emit(
+              state.copyWith(
+                text: newText,
+                messageState: const MessageState.ready(),
+              ),
+            );
           },
           receiveError: (error) {
-            emit(state.copyWith(error: error));
+            emit(state.copyWith(messageState: MessageState.onError(error)));
           },
           retry: () {
             if (questionId is! Int64) {
@@ -55,8 +66,7 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
             }
             emit(
               state.copyWith(
-                retryState: const LoadingState.loading(),
-                error: null,
+                messageState: const MessageState.loading(),
               ),
             );
 
@@ -64,7 +74,7 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
               chatId: chatId,
               messageId: questionId,
             );
-            ChatEventGetAnswerForQuestion(payload).send().then((result) {
+            AIEventGetAnswerForQuestion(payload).send().then((result) {
               if (!isClosed) {
                 result.fold(
                   (answer) {
@@ -82,8 +92,14 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
             emit(
               state.copyWith(
                 text: text,
-                error: null,
-                retryState: const LoadingState.finish(),
+                messageState: const MessageState.ready(),
+              ),
+            );
+          },
+          onAIResponseLimit: () {
+            emit(
+              state.copyWith(
+                messageState: const MessageState.onAIResponseLimit(),
               ),
             );
           },
@@ -92,13 +108,6 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
     );
   }
 
-  @override
-  Future<void> close() {
-    _subscription?.cancel();
-    return super.close();
-  }
-
-  StreamSubscription<AnswerStreamElement>? _subscription;
   final String chatId;
   final Int64? questionId;
 }
@@ -106,26 +115,34 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
 @freezed
 class ChatAIMessageEvent with _$ChatAIMessageEvent {
   const factory ChatAIMessageEvent.initial() = Initial;
-  const factory ChatAIMessageEvent.newText(String text) = _NewText;
+  const factory ChatAIMessageEvent.updateText(String text) = _UpdateText;
   const factory ChatAIMessageEvent.receiveError(String error) = _ReceiveError;
   const factory ChatAIMessageEvent.retry() = _Retry;
   const factory ChatAIMessageEvent.retryResult(String text) = _RetryResult;
+  const factory ChatAIMessageEvent.onAIResponseLimit() = _OnAIResponseLimit;
 }
 
 @freezed
 class ChatAIMessageState with _$ChatAIMessageState {
   const factory ChatAIMessageState({
     AnswerStream? stream,
-    String? error,
     required String text,
-    required LoadingState retryState,
+    required MessageState messageState,
   }) = _ChatAIMessageState;
 
   factory ChatAIMessageState.initial(dynamic text) {
     return ChatAIMessageState(
       text: text is String ? text : "",
       stream: text is AnswerStream ? text : null,
-      retryState: const LoadingState.finish(),
+      messageState: const MessageState.ready(),
     );
   }
 }
+
+@freezed
+class MessageState with _$MessageState {
+  const factory MessageState.onError(String error) = _Error;
+  const factory MessageState.onAIResponseLimit() = _AIResponseLimit;
+  const factory MessageState.ready() = _Ready;
+  const factory MessageState.loading() = _Loading;
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_bloc.dart

@@ -5,7 +5,7 @@ import 'dart:isolate';
 
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/log.dart';
-import 'package:appflowy_backend/protobuf/flowy-chat/entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/code.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
@@ -70,7 +70,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
               chatId: state.view.id,
               limit: Int64(10),
             );
-            ChatEventLoadNextMessage(payload).send().then(
+            AIEventLoadNextMessage(payload).send().then(
               (result) {
                 result.fold((list) {
                   if (!isClosed) {
@@ -202,7 +202,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
             }
 
             final payload = StopStreamPB(chatId: chatId);
-            await ChatEventStopStream(payload).send();
+            await AIEventStopStream(payload).send();
             final allMessages = _perminentMessages();
             if (state.streamingStatus != const LoadingState.finish()) {
               // If the streaming is not started, remove the message from the list
@@ -273,7 +273,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
               messageId: state.lastSentMessage!.messageId,
             );
             //  When user message was sent to the server, we start gettting related question
-            ChatEventGetRelatedQuestion(payload).send().then((result) {
+            AIEventGetRelatedQuestion(payload).send().then((result) {
               if (!isClosed) {
                 result.fold(
                   (list) {
@@ -322,7 +322,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
       limit: Int64(10),
       beforeMessageId: beforeMessageId,
     );
-    ChatEventLoadPrevMessage(payload).send();
+    AIEventLoadPrevMessage(payload).send();
   }
 
   Future<void> _startStreamingMessage(
@@ -344,7 +344,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
     );
 
     // Stream message to the server
-    final result = await ChatEventStreamMessage(payload).send();
+    final result = await AIEventStreamMessage(payload).send();
     result.fold(
       (ChatMessagePB question) {
         if (!isClosed) {
@@ -525,8 +525,6 @@ OnetimeShotType? onetimeMessageTypeFromMeta(Map<String, dynamic>? metadata) {
   return null;
 }
 
-typedef AnswerStreamElement = String;
-
 class AnswerStream {
   AnswerStream() {
     _port.handler = _controller.add;
@@ -534,23 +532,53 @@ class AnswerStream {
       (event) {
         if (event.startsWith("data:")) {
           _hasStarted = true;
+          final newText = event.substring(5);
+          _text += newText;
+          if (_onData != null) {
+            _onData!(_text);
+          }
         } else if (event.startsWith("error:")) {
           _error = event.substring(5);
+          if (_onError != null) {
+            _onError!(_error!);
+          }
+        } else if (event == "AI_RESPONSE_LIMIT") {
+          if (_onAIResponseLimit != null) {
+            _onAIResponseLimit!();
+          }
+        }
+      },
+      onDone: () {
+        if (_onEnd != null) {
+          _onEnd!();
+        }
+      },
+      onError: (error) {
+        if (_onError != null) {
+          _onError!(error.toString());
         }
       },
     );
   }
 
   final RawReceivePort _port = RawReceivePort();
-  final StreamController<AnswerStreamElement> _controller =
-      StreamController.broadcast();
-  late StreamSubscription<AnswerStreamElement> _subscription;
+  final StreamController<String> _controller = StreamController.broadcast();
+  late StreamSubscription<String> _subscription;
   bool _hasStarted = false;
   String? _error;
+  String _text = "";
+
+  // Callbacks
+  void Function(String text)? _onData;
+  void Function()? _onStart;
+  void Function()? _onEnd;
+  void Function(String error)? _onError;
+  void Function()? _onAIResponseLimit;
 
   int get nativePort => _port.sendPort.nativePort;
   bool get hasStarted => _hasStarted;
   String? get error => _error;
+  String get text => _text;
 
   Future<void> dispose() async {
     await _controller.close();
@@ -558,9 +586,21 @@ class AnswerStream {
     _port.close();
   }
 
-  StreamSubscription<AnswerStreamElement> listen(
-    void Function(AnswerStreamElement event)? onData,
-  ) {
-    return _controller.stream.listen(onData);
+  void listen({
+    void Function(String text)? onData,
+    void Function()? onStart,
+    void Function()? onEnd,
+    void Function(String error)? onError,
+    void Function()? onAIResponseLimit,
+  }) {
+    _onData = onData;
+    _onStart = onStart;
+    _onEnd = onEnd;
+    _onError = onError;
+    _onAIResponseLimit = onAIResponseLimit;
+
+    if (_onStart != null) {
+      _onStart!();
+    }
   }
 }

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_file_bloc.dart

@@ -1,6 +1,9 @@
+import 'dart:async';
+
 import 'package:appflowy/workspace/application/settings/ai/local_llm_listener.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
-import 'package:appflowy_backend/protobuf/flowy-chat/entities.pb.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 
@@ -9,13 +12,17 @@ part 'chat_file_bloc.freezed.dart';
 class ChatFileBloc extends Bloc<ChatFileEvent, ChatFileState> {
   ChatFileBloc({
     required String chatId,
-    dynamic message,
   })  : listener = LocalLLMListener(),
-        super(ChatFileState.initial(message)) {
+        super(const ChatFileState()) {
     listener.start(
       stateCallback: (pluginState) {
         if (!isClosed) {
-          add(ChatFileEvent.updateLocalAIState(pluginState));
+          add(ChatFileEvent.updatePluginState(pluginState));
+        }
+      },
+      chatStateCallback: (chatState) {
+        if (!isClosed) {
+          add(ChatFileEvent.updateChatState(chatState));
         }
       },
     );
@@ -24,27 +31,68 @@ class ChatFileBloc extends Bloc<ChatFileEvent, ChatFileState> {
       (event, emit) async {
         await event.when(
           initial: () async {
-            final result = await ChatEventGetPluginState().send();
+            final result = await AIEventGetLocalAIChatState().send();
             result.fold(
-              (pluginState) {
+              (chatState) {
                 if (!isClosed) {
-                  add(ChatFileEvent.updateLocalAIState(pluginState));
+                  add(
+                    ChatFileEvent.updateChatState(chatState),
+                  );
                 }
               },
-              (err) {},
+              (err) {
+                Log.error(err.toString());
+              },
             );
           },
-          newFile: (String filePath) {
-            final payload = ChatFilePB(filePath: filePath, chatId: chatId);
-            ChatEventChatWithFile(payload).send();
-          },
-          updateLocalAIState: (PluginStatePB pluginState) {
+          newFile: (String filePath, String fileName) async {
             emit(
               state.copyWith(
-                supportChatWithFile:
-                    pluginState.state == RunningStatePB.Running,
+                indexFileIndicator: IndexFileIndicator.indexing(fileName),
               ),
             );
+            final payload = ChatFilePB(filePath: filePath, chatId: chatId);
+            unawaited(
+              AIEventChatWithFile(payload).send().then((result) {
+                if (!isClosed) {
+                  result.fold((_) {
+                    add(
+                      ChatFileEvent.updateIndexFile(
+                        IndexFileIndicator.finish(fileName),
+                      ),
+                    );
+                  }, (err) {
+                    add(
+                      ChatFileEvent.updateIndexFile(
+                        IndexFileIndicator.error(err.msg),
+                      ),
+                    );
+                  });
+                }
+              }),
+            );
+          },
+          updateChatState: (LocalAIChatPB chatState) {
+            // Only user enable chat with file and the plugin is already running
+            final supportChatWithFile = chatState.fileEnabled &&
+                chatState.pluginState.state == RunningStatePB.Running;
+            emit(
+              state.copyWith(
+                supportChatWithFile: supportChatWithFile,
+                chatState: chatState,
+              ),
+            );
+          },
+          updateIndexFile: (IndexFileIndicator indicator) {
+            emit(
+              state.copyWith(indexFileIndicator: indicator),
+            );
+          },
+          updatePluginState: (LocalAIPluginStatePB chatState) {
+            final fileEnabled = state.chatState?.fileEnabled ?? false;
+            final supportChatWithFile =
+                fileEnabled && chatState.state == RunningStatePB.Running;
+            emit(state.copyWith(supportChatWithFile: supportChatWithFile));
           },
         );
       },
@@ -63,21 +111,29 @@ class ChatFileBloc extends Bloc<ChatFileEvent, ChatFileState> {
 @freezed
 class ChatFileEvent with _$ChatFileEvent {
   const factory ChatFileEvent.initial() = Initial;
-  const factory ChatFileEvent.newFile(String filePath) = _NewFile;
-  const factory ChatFileEvent.updateLocalAIState(PluginStatePB pluginState) =
-      _UpdateLocalAIState;
+  const factory ChatFileEvent.newFile(String filePath, String fileName) =
+      _NewFile;
+  const factory ChatFileEvent.updateChatState(LocalAIChatPB chatState) =
+      _UpdateChatState;
+  const factory ChatFileEvent.updatePluginState(
+    LocalAIPluginStatePB chatState,
+  ) = _UpdatePluginState;
+  const factory ChatFileEvent.updateIndexFile(IndexFileIndicator indicator) =
+      _UpdateIndexFile;
 }
 
 @freezed
 class ChatFileState with _$ChatFileState {
   const factory ChatFileState({
-    required String text,
     @Default(false) bool supportChatWithFile,
+    IndexFileIndicator? indexFileIndicator,
+    LocalAIChatPB? chatState,
   }) = _ChatFileState;
-
-  factory ChatFileState.initial(dynamic text) {
-    return ChatFileState(
-      text: text is String ? text : "",
-    );
-  }
+}
+
+@freezed
+class IndexFileIndicator with _$IndexFileIndicator {
+  const factory IndexFileIndicator.finish(String fileName) = _Finish;
+  const factory IndexFileIndicator.indexing(String fileName) = _Indexing;
+  const factory IndexFileIndicator.error(String error) = _Error;
 }

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_bloc.dart

@@ -0,0 +1,82 @@
+import 'dart:async';
+
+import 'package:appflowy/workspace/application/settings/ai/local_llm_listener.dart';
+import 'package:appflowy_backend/dispatch/dispatch.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
+import 'package:bloc/bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+part 'chat_input_bloc.freezed.dart';
+
+class ChatInputBloc extends Bloc<ChatInputEvent, ChatInputState> {
+  ChatInputBloc()
+      : listener = LocalLLMListener(),
+        super(const ChatInputState(aiType: _AppFlowyAI())) {
+    listener.start(
+      stateCallback: (pluginState) {
+        if (!isClosed) {
+          add(ChatInputEvent.updatePluginState(pluginState));
+        }
+      },
+    );
+
+    on<ChatInputEvent>(_handleEvent);
+  }
+
+  final LocalLLMListener listener;
+
+  @override
+  Future<void> close() async {
+    await listener.stop();
+    return super.close();
+  }
+
+  Future<void> _handleEvent(
+    ChatInputEvent event,
+    Emitter<ChatInputState> emit,
+  ) async {
+    await event.when(
+      started: () async {
+        final result = await AIEventGetLocalAIPluginState().send();
+        result.fold(
+          (pluginState) {
+            if (!isClosed) {
+              add(
+                ChatInputEvent.updatePluginState(pluginState),
+              );
+            }
+          },
+          (err) {
+            Log.error(err.toString());
+          },
+        );
+      },
+      updatePluginState: (pluginState) {
+        if (pluginState.state == RunningStatePB.Running) {
+          emit(const ChatInputState(aiType: _LocalAI()));
+        } else {
+          emit(const ChatInputState(aiType: _AppFlowyAI()));
+        }
+      },
+    );
+  }
+}
+
+@freezed
+class ChatInputEvent with _$ChatInputEvent {
+  const factory ChatInputEvent.started() = _Started;
+  const factory ChatInputEvent.updatePluginState(
+    LocalAIPluginStatePB pluginState,
+  ) = _UpdatePluginState;
+}
+
+@freezed
+class ChatInputState with _$ChatInputState {
+  const factory ChatInputState({required AIType aiType}) = _ChatInputState;
+}
+
+@freezed
+class AIType with _$AIType {
+  const factory AIType.appflowyAI() = _AppFlowyAI;
+  const factory AIType.localAI() = _LocalAI;
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_message_listener.dart

@@ -1,8 +1,8 @@
 import 'dart:async';
 import 'dart:typed_data';
 
-import 'package:appflowy_backend/protobuf/flowy-chat/entities.pb.dart';
-import 'package:appflowy_backend/protobuf/flowy-chat/notification.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-ai/notification.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-notification/subject.pb.dart';
 import 'package:appflowy_backend/rust_stream.dart';

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_notification.dart

@@ -2,7 +2,7 @@ import 'dart:async';
 import 'dart:typed_data';
 
 import 'package:appflowy/core/notification/notification_helper.dart';
-import 'package:appflowy_backend/protobuf/flowy-chat/notification.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-ai/notification.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-notification/protobuf.dart';
 import 'package:appflowy_backend/rust_stream.dart';

frontend/appflowy_flutter/lib/plugins/ai_chat/chat.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/plugins/ai_chat/chat_page.dart';
 import 'package:appflowy/plugins/util.dart';
@@ -9,6 +7,7 @@ import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:appflowy/workspace/presentation/widgets/tab_bar_item.dart';
 import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class AIChatPluginBuilder extends PluginBuilder {
@@ -96,6 +95,7 @@ class AIChatPagePluginWidgetBuilder extends PluginWidgetBuilder
   Widget buildWidget({
     required PluginContext context,
     required bool shrinkWrap,
+    Map<String, dynamic>? data,
   }) {
     notifier.isDeleted.addListener(() {
       final deletedView = notifier.isDeleted.value;

frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart

@@ -1,4 +1,7 @@
 import 'package:appflowy/plugins/ai_chat/application/chat_file_bloc.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_input_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:desktop_drop/desktop_drop.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -20,7 +23,7 @@ import 'package:flutter_chat_types/flutter_chat_types.dart';
 import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
 import 'package:flutter_chat_ui/flutter_chat_ui.dart' show Chat;
 
-import 'presentation/chat_input.dart';
+import 'presentation/chat_input/chat_input.dart';
 import 'presentation/chat_popmenu.dart';
 import 'presentation/chat_theme.dart';
 import 'presentation/chat_user_invalid_message.dart';
@@ -67,29 +70,56 @@ class AIChatPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     if (userProfile.authenticator == AuthenticatorPB.AppFlowyCloud) {
-      return BlocProvider(
-        create: (context) => ChatFileBloc(chatId: view.id.toString()),
-        child: BlocBuilder<ChatFileBloc, ChatFileState>(
-          builder: (context, state) {
-            return state.supportChatWithFile
-                ? DropTarget(
-                    onDragDone: (DropDoneDetails detail) async {
-                      for (final file in detail.files) {
-                        context
-                            .read<ChatFileBloc>()
-                            .add(ChatFileEvent.newFile(file.path));
-                      }
-                    },
-                    child: _ChatContentPage(
-                      view: view,
-                      userProfile: userProfile,
-                    ),
-                  )
-                : _ChatContentPage(
-                    view: view,
-                    userProfile: userProfile,
-                  );
+      return MultiBlocProvider(
+        providers: [
+          BlocProvider(
+            create: (_) => ChatFileBloc(chatId: view.id.toString())
+              ..add(const ChatFileEvent.initial()),
+          ),
+          BlocProvider(
+            create: (_) => ChatBloc(
+              view: view,
+              userProfile: userProfile,
+            )..add(const ChatEvent.initialLoad()),
+          ),
+          BlocProvider(
+            create: (_) => ChatInputBloc()..add(const ChatInputEvent.started()),
+          ),
+        ],
+        child: BlocListener<ChatFileBloc, ChatFileState>(
+          listenWhen: (previous, current) =>
+              previous.indexFileIndicator != current.indexFileIndicator,
+          listener: (context, state) {
+            _handleIndexIndicator(state.indexFileIndicator, context);
           },
+          child: BlocBuilder<ChatFileBloc, ChatFileState>(
+            builder: (context, state) {
+              return DropTarget(
+                onDragDone: (DropDoneDetails detail) async {
+                  if (state.supportChatWithFile) {
+                    await showConfirmDialog(
+                      context: context,
+                      style: ConfirmPopupStyle.cancelAndOk,
+                      title: LocaleKeys.chat_chatWithFilePrompt.tr(),
+                      confirmLabel: LocaleKeys.button_confirm.tr(),
+                      onConfirm: () {
+                        for (final file in detail.files) {
+                          context
+                              .read<ChatFileBloc>()
+                              .add(ChatFileEvent.newFile(file.path, file.name));
+                        }
+                      },
+                      description: '',
+                    );
+                  }
+                },
+                child: _ChatContentPage(
+                  view: view,
+                  userProfile: userProfile,
+                ),
+              );
+            },
+          ),
         ),
       );
     }
@@ -101,6 +131,35 @@ class AIChatPage extends StatelessWidget {
       ),
     );
   }
+
+  void _handleIndexIndicator(
+    IndexFileIndicator? indicator,
+    BuildContext context,
+  ) {
+    if (indicator != null) {
+      indicator.when(
+        finish: (fileName) {
+          showSnackBarMessage(
+            context,
+            LocaleKeys.chat_indexFileSuccess.tr(args: [fileName]),
+          );
+        },
+        indexing: (fileName) {
+          showSnackBarMessage(
+            context,
+            LocaleKeys.chat_indexingFile.tr(args: [fileName]),
+            duration: const Duration(seconds: 2),
+          );
+        },
+        error: (err) {
+          showSnackBarMessage(
+            context,
+            err,
+          );
+        },
+      );
+    }
+  }
 }
 
 class _ChatContentPage extends StatefulWidget {
@@ -146,67 +205,61 @@ class _ChatContentPageState extends State<_ChatContentPage> {
         Flexible(
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 784),
-            child: BlocProvider(
-              create: (_) => ChatBloc(
-                view: widget.view,
-                userProfile: widget.userProfile,
-              )..add(const ChatEvent.initialLoad()),
-              child: BlocBuilder<ChatBloc, ChatState>(
-                builder: (blocContext, state) => Chat(
-                  messages: state.messages,
-                  onSendPressed: (_) {
-                    // We use custom bottom widget for chat input, so
-                    // do not need to handle this event.
-                  },
-                  customBottomWidget: buildChatInput(blocContext),
-                  user: _user,
-                  theme: buildTheme(context),
-                  onEndReached: () async {
-                    if (state.hasMorePrevMessage &&
-                        state.loadingPreviousStatus !=
-                            const LoadingState.loading()) {
-                      blocContext
-                          .read<ChatBloc>()
-                          .add(const ChatEvent.startLoadingPrevMessage());
-                    }
-                  },
-                  emptyState: BlocBuilder<ChatBloc, ChatState>(
-                    builder: (_, state) => state.initialLoadingStatus ==
-                            const LoadingState.finish()
-                        ? Padding(
-                            padding: AIChatUILayout.welcomePagePadding,
-                            child: ChatWelcomePage(
-                              onSelectedQuestion: (question) => blocContext
-                                  .read<ChatBloc>()
-                                  .add(ChatEvent.sendMessage(question)),
+            child: BlocBuilder<ChatBloc, ChatState>(
+              builder: (blocContext, state) => Chat(
+                messages: state.messages,
+                onSendPressed: (_) {
+                  // We use custom bottom widget for chat input, so
+                  // do not need to handle this event.
+                },
+                customBottomWidget: buildChatInput(blocContext),
+                user: _user,
+                theme: buildTheme(context),
+                onEndReached: () async {
+                  if (state.hasMorePrevMessage &&
+                      state.loadingPreviousStatus !=
+                          const LoadingState.loading()) {
+                    blocContext
+                        .read<ChatBloc>()
+                        .add(const ChatEvent.startLoadingPrevMessage());
+                  }
+                },
+                emptyState: BlocBuilder<ChatBloc, ChatState>(
+                  builder: (_, state) =>
+                      state.initialLoadingStatus == const LoadingState.finish()
+                          ? Padding(
+                              padding: AIChatUILayout.welcomePagePadding,
+                              child: ChatWelcomePage(
+                                onSelectedQuestion: (question) => blocContext
+                                    .read<ChatBloc>()
+                                    .add(ChatEvent.sendMessage(question)),
+                              ),
+                            )
+                          : const Center(
+                              child: CircularProgressIndicator.adaptive(),
                             ),
-                          )
-                        : const Center(
-                            child: CircularProgressIndicator.adaptive(),
-                          ),
-                  ),
-                  messageWidthRatio: AIChatUILayout.messageWidthRatio,
-                  textMessageBuilder: (
-                    textMessage, {
-                    required messageWidth,
-                    required showName,
-                  }) =>
-                      _buildAITextMessage(blocContext, textMessage),
-                  bubbleBuilder: (
-                    child, {
-                    required message,
-                    required nextMessageInGroup,
-                  }) {
-                    if (message.author.id == _user.id) {
-                      return ChatUserMessageBubble(
-                        message: message,
-                        child: child,
-                      );
-                    }
-
-                    return _buildAIBubble(message, blocContext, state, child);
-                  },
                 ),
+                messageWidthRatio: AIChatUILayout.messageWidthRatio,
+                textMessageBuilder: (
+                  textMessage, {
+                  required messageWidth,
+                  required showName,
+                }) =>
+                    _buildAITextMessage(blocContext, textMessage),
+                bubbleBuilder: (
+                  child, {
+                  required message,
+                  required nextMessageInGroup,
+                }) {
+                  if (message.author.id == _user.id) {
+                    return ChatUserMessageBubble(
+                      message: message,
+                      child: child,
+                    );
+                  }
+
+                  return _buildAIBubble(message, blocContext, state, child);
+                },
               ),
             ),
           ),
@@ -338,31 +391,43 @@ class _ChatContentPageState extends State<_ChatContentPage> {
     return ClipRect(
       child: Padding(
         padding: AIChatUILayout.safeAreaInsets(context),
-        child: Column(
-          children: [
-            BlocSelector<ChatBloc, ChatState, LoadingState>(
-              selector: (state) => state.streamingStatus,
-              builder: (context, state) {
-                return ChatInput(
-                  chatId: widget.view.id,
-                  onSendPressed: (message) =>
-                      onSendPressed(context, message.text),
-                  isStreaming: state != const LoadingState.finish(),
-                  onStopStreaming: () {
-                    context.read<ChatBloc>().add(const ChatEvent.stopStream());
+        child: BlocBuilder<ChatInputBloc, ChatInputState>(
+          builder: (context, state) {
+            final hintText = state.aiType.when(
+              appflowyAI: () => LocaleKeys.chat_inputMessageHint.tr(),
+              localAI: () => LocaleKeys.chat_inputLocalAIMessageHint.tr(),
+            );
+
+            return Column(
+              children: [
+                BlocSelector<ChatBloc, ChatState, LoadingState>(
+                  selector: (state) => state.streamingStatus,
+                  builder: (context, state) {
+                    return ChatInput(
+                      chatId: widget.view.id,
+                      onSendPressed: (message) =>
+                          onSendPressed(context, message.text),
+                      isStreaming: state != const LoadingState.finish(),
+                      onStopStreaming: () {
+                        context
+                            .read<ChatBloc>()
+                            .add(const ChatEvent.stopStream());
+                      },
+                      hintText: hintText,
+                    );
                   },
-                );
-              },
-            ),
-            const VSpace(6),
-            Opacity(
-              opacity: 0.6,
-              child: FlowyText(
-                LocaleKeys.chat_aiMistakePrompt.tr(),
-                fontSize: 12,
-              ),
-            ),
-          ],
+                ),
+                const VSpace(6),
+                Opacity(
+                  opacity: 0.6,
+                  child: FlowyText(
+                    LocaleKeys.chat_aiMistakePrompt.tr(),
+                    fontSize: 12,
+                  ),
+                ),
+              ],
+            );
+          },
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/ai_message_bubble.dart

@@ -4,7 +4,7 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/ai_chat/application/chat_bloc.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/chat_avatar.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/chat_input.dart';
+import 'package:appflowy/plugins/ai_chat/presentation/chat_input/chat_input.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/chat_popmenu.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
 import 'package:appflowy/shared/markdown_to_document.dart';

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_inline_action_menu.dart

@@ -0,0 +1,237 @@
+import 'package:flowy_infra_ui/style_widget/button.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+abstract class ChatActionMenuItem {
+  String get title;
+}
+
+abstract class ChatActionHandler {
+  List<ChatActionMenuItem> get items;
+  void onEnter();
+  void onSelected(ChatActionMenuItem item);
+  void onExit();
+}
+
+abstract class ChatAnchor {
+  GlobalKey get anchorKey;
+  LayerLink get layerLink;
+}
+
+const int _itemHeight = 34;
+const int _itemVerticalPadding = 4;
+
+class ChatActionsMenu {
+  ChatActionsMenu({
+    required this.anchor,
+    required this.context,
+    required this.handler,
+    required this.style,
+  });
+
+  final BuildContext context;
+  final ChatAnchor anchor;
+  final ChatActionsMenuStyle style;
+  final ChatActionHandler handler;
+
+  OverlayEntry? _overlayEntry;
+
+  void dismiss() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+    handler.onExit();
+  }
+
+  void show() {
+    WidgetsBinding.instance.addPostFrameCallback((_) => _show());
+  }
+
+  void _show() {
+    if (_overlayEntry != null) {
+      dismiss();
+    }
+
+    if (anchor.anchorKey.currentContext == null) {
+      return;
+    }
+
+    handler.onEnter();
+
+    final height = handler.items.length * (_itemHeight + _itemVerticalPadding);
+    _overlayEntry = OverlayEntry(
+      builder: (context) => Stack(
+        children: [
+          CompositedTransformFollower(
+            link: anchor.layerLink,
+            showWhenUnlinked: false,
+            offset: Offset(0, -height - 4),
+            child: Material(
+              elevation: 4.0,
+              child: ConstrainedBox(
+                constraints: const BoxConstraints(
+                  minWidth: 200,
+                  maxWidth: 200,
+                  maxHeight: 200,
+                ),
+                child: DecoratedBox(
+                  decoration: BoxDecoration(
+                    color:
+                        Theme.of(context).colorScheme.surfaceContainerHighest,
+                    borderRadius: BorderRadius.circular(6.0),
+                  ),
+                  child: ActionList(
+                    handler: handler,
+                    onDismiss: () => dismiss(),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+
+    Overlay.of(context).insert(_overlayEntry!);
+  }
+}
+
+class _ActionItem extends StatelessWidget {
+  const _ActionItem({
+    required this.item,
+    required this.onTap,
+    required this.isSelected,
+  });
+
+  final ChatActionMenuItem item;
+  final VoidCallback? onTap;
+  final bool isSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: _itemHeight.toDouble(),
+      padding: const EdgeInsets.symmetric(vertical: _itemVerticalPadding / 2.0),
+      decoration: BoxDecoration(
+        color: isSelected
+            ? Theme.of(context).colorScheme.primary.withOpacity(0.1)
+            : Colors.transparent,
+        borderRadius: BorderRadius.circular(4.0),
+      ),
+      child: FlowyButton(
+        margin: const EdgeInsets.symmetric(horizontal: 6),
+        iconPadding: 10.0,
+        text: FlowyText.regular(
+          item.title,
+        ),
+        onTap: onTap,
+      ),
+    );
+  }
+}
+
+class ActionList extends StatefulWidget {
+  const ActionList({super.key, required this.handler, required this.onDismiss});
+
+  final ChatActionHandler handler;
+  final VoidCallback? onDismiss;
+
+  @override
+  State<ActionList> createState() => _ActionListState();
+}
+
+class _ActionListState extends State<ActionList> {
+  final FocusScopeNode _focusNode =
+      FocusScopeNode(debugLabel: 'ChatActionsMenu');
+  int _selectedIndex = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _focusNode.requestFocus();
+    });
+  }
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _handleKeyPress(event) {
+    setState(() {
+      // ignore: deprecated_member_use
+      if (event is KeyDownEvent || event is RawKeyDownEvent) {
+        if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
+          _selectedIndex = (_selectedIndex + 1) % widget.handler.items.length;
+        } else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
+          _selectedIndex = (_selectedIndex - 1 + widget.handler.items.length) %
+              widget.handler.items.length;
+        } else if (event.logicalKey == LogicalKeyboardKey.enter) {
+          widget.handler.onSelected(widget.handler.items[_selectedIndex]);
+          widget.onDismiss?.call();
+        } else if (event.logicalKey == LogicalKeyboardKey.escape) {
+          widget.onDismiss?.call();
+        }
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FocusScope(
+      node: _focusNode,
+      onKey: (node, event) {
+        _handleKeyPress(event);
+        return KeyEventResult.handled;
+      },
+      child: ListView(
+        shrinkWrap: true,
+        padding: const EdgeInsets.all(8),
+        children: widget.handler.items.asMap().entries.map((entry) {
+          final index = entry.key;
+          final ChatActionMenuItem item = entry.value;
+          return _ActionItem(
+            item: item,
+            onTap: () {
+              widget.handler.onSelected(item);
+              widget.onDismiss?.call();
+            },
+            isSelected: _selectedIndex == index,
+          );
+        }).toList(),
+      ),
+    );
+  }
+}
+
+class ChatActionsMenuStyle {
+  ChatActionsMenuStyle({
+    required this.backgroundColor,
+    required this.groupTextColor,
+    required this.menuItemTextColor,
+    required this.menuItemSelectedColor,
+    required this.menuItemSelectedTextColor,
+  });
+
+  const ChatActionsMenuStyle.light()
+      : backgroundColor = Colors.white,
+        groupTextColor = const Color(0xFF555555),
+        menuItemTextColor = const Color(0xFF333333),
+        menuItemSelectedColor = const Color(0xFFE0F8FF),
+        menuItemSelectedTextColor = const Color.fromARGB(255, 56, 91, 247);
+
+  const ChatActionsMenuStyle.dark()
+      : backgroundColor = const Color(0xFF282E3A),
+        groupTextColor = const Color(0xFFBBC3CD),
+        menuItemTextColor = const Color(0xFFBBC3CD),
+        menuItemSelectedColor = const Color(0xFF00BCF0),
+        menuItemSelectedTextColor = const Color(0xFF131720);
+
+  final Color backgroundColor;
+  final Color groupTextColor;
+  final Color menuItemTextColor;
+  final Color menuItemSelectedColor;
+  final Color menuItemSelectedTextColor;
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input.dart

@@ -1,303 +0,0 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/theme_extension.dart';
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
-import 'package:flutter_chat_ui/flutter_chat_ui.dart';
-
-class ChatInput extends StatefulWidget {
-  /// Creates [ChatInput] widget.
-  const ChatInput({
-    super.key,
-    this.isAttachmentUploading,
-    this.onAttachmentPressed,
-    required this.onSendPressed,
-    required this.chatId,
-    this.options = const InputOptions(),
-    required this.isStreaming,
-    required this.onStopStreaming,
-  });
-
-  final bool? isAttachmentUploading;
-  final VoidCallback? onAttachmentPressed;
-  final void Function(types.PartialText) onSendPressed;
-  final void Function() onStopStreaming;
-  final InputOptions options;
-  final String chatId;
-  final bool isStreaming;
-
-  @override
-  State<ChatInput> createState() => _ChatInputState();
-}
-
-/// [ChatInput] widget state.
-class _ChatInputState extends State<ChatInput> {
-  late final _inputFocusNode = FocusNode(
-    onKeyEvent: (node, event) {
-      if (event.physicalKey == PhysicalKeyboardKey.enter &&
-          !HardwareKeyboard.instance.physicalKeysPressed.any(
-            (el) => <PhysicalKeyboardKey>{
-              PhysicalKeyboardKey.shiftLeft,
-              PhysicalKeyboardKey.shiftRight,
-            }.contains(el),
-          )) {
-        if (kIsWeb && _textController.value.isComposingRangeValid) {
-          return KeyEventResult.ignored;
-        }
-        if (event is KeyDownEvent) {
-          _handleSendPressed();
-        }
-        return KeyEventResult.handled;
-      } else {
-        return KeyEventResult.ignored;
-      }
-    },
-  );
-
-  bool _sendButtonVisible = false;
-  late TextEditingController _textController;
-
-  @override
-  void initState() {
-    super.initState();
-
-    _textController =
-        widget.options.textEditingController ?? InputTextFieldController();
-    _handleSendButtonVisibilityModeChange();
-  }
-
-  void _handleSendButtonVisibilityModeChange() {
-    _textController.removeListener(_handleTextControllerChange);
-    _sendButtonVisible =
-        _textController.text.trim() != '' || widget.isStreaming;
-    _textController.addListener(_handleTextControllerChange);
-  }
-
-  void _handleSendPressed() {
-    if (widget.isStreaming) {
-      widget.onStopStreaming();
-    } else {
-      final trimmedText = _textController.text.trim();
-      if (trimmedText != '') {
-        final partialText = types.PartialText(text: trimmedText);
-        widget.onSendPressed(partialText);
-
-        if (widget.options.inputClearMode == InputClearMode.always) {
-          _textController.clear();
-        }
-      }
-    }
-  }
-
-  void _handleTextControllerChange() {
-    if (_textController.value.isComposingRangeValid) {
-      return;
-    }
-    setState(() {
-      _sendButtonVisible = _textController.text.trim() != '';
-    });
-  }
-
-  Widget _inputBuilder() {
-    const textPadding = EdgeInsets.symmetric(horizontal: 16, vertical: 6);
-    const buttonPadding = EdgeInsets.symmetric(horizontal: 16, vertical: 6);
-    const inputPadding = EdgeInsets.all(6);
-
-    return Focus(
-      autofocus: !widget.options.autofocus,
-      child: Padding(
-        padding: inputPadding,
-        child: Material(
-          borderRadius: BorderRadius.circular(30),
-          color: isMobile
-              ? Theme.of(context).colorScheme.surfaceContainer
-              : Theme.of(context).colorScheme.surfaceContainerHighest,
-          elevation: 0.6,
-          child: Row(
-            children: [
-              if (widget.onAttachmentPressed != null)
-                AttachmentButton(
-                  isLoading: widget.isAttachmentUploading ?? false,
-                  onPressed: widget.onAttachmentPressed,
-                  padding: buttonPadding,
-                ),
-              Expanded(child: _inputTextField(textPadding)),
-              _sendButton(buttonPadding),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-
-  Padding _inputTextField(EdgeInsets textPadding) {
-    return Padding(
-      padding: textPadding,
-      child: TextField(
-        controller: _textController,
-        readOnly: widget.isStreaming,
-        focusNode: _inputFocusNode,
-        decoration: InputDecoration(
-          border: InputBorder.none,
-          hintText: LocaleKeys.chat_inputMessageHint.tr(),
-          hintStyle: TextStyle(
-            color: AFThemeExtension.of(context).textColor.withOpacity(0.5),
-          ),
-        ),
-        style: TextStyle(
-          color: AFThemeExtension.of(context).textColor,
-        ),
-        enabled: widget.options.enabled,
-        autocorrect: widget.options.autocorrect,
-        autofocus: widget.options.autofocus,
-        enableSuggestions: widget.options.enableSuggestions,
-        keyboardType: widget.options.keyboardType,
-        textCapitalization: TextCapitalization.sentences,
-        maxLines: 10,
-        minLines: 1,
-        onChanged: widget.options.onTextChanged,
-        onTap: widget.options.onTextFieldTap,
-      ),
-    );
-  }
-
-  ConstrainedBox _sendButton(EdgeInsets buttonPadding) {
-    return ConstrainedBox(
-      constraints: BoxConstraints(
-        minHeight: buttonPadding.bottom + buttonPadding.top + 24,
-      ),
-      child: Visibility(
-        visible: _sendButtonVisible,
-        child: Padding(
-          padding: buttonPadding,
-          child: AccessoryButton(
-            onSendPressed: () {
-              _handleSendPressed();
-            },
-            onStopStreaming: () {
-              widget.onStopStreaming();
-            },
-            isStreaming: widget.isStreaming,
-          ),
-        ),
-      ),
-    );
-  }
-
-  @override
-  void didUpdateWidget(covariant ChatInput oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    _handleSendButtonVisibilityModeChange();
-  }
-
-  @override
-  void dispose() {
-    _inputFocusNode.dispose();
-    _textController.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) => GestureDetector(
-        onTap: () => _inputFocusNode.requestFocus(),
-        child: _inputBuilder(),
-      );
-}
-
-@immutable
-class InputOptions {
-  const InputOptions({
-    this.inputClearMode = InputClearMode.always,
-    this.keyboardType = TextInputType.multiline,
-    this.onTextChanged,
-    this.onTextFieldTap,
-    this.textEditingController,
-    this.autocorrect = true,
-    this.autofocus = false,
-    this.enableSuggestions = true,
-    this.enabled = true,
-  });
-
-  /// Controls the [ChatInput] clear behavior. Defaults to [InputClearMode.always].
-  final InputClearMode inputClearMode;
-
-  /// Controls the [ChatInput] keyboard type. Defaults to [TextInputType.multiline].
-  final TextInputType keyboardType;
-
-  /// Will be called whenever the text inside [TextField] changes.
-  final void Function(String)? onTextChanged;
-
-  /// Will be called on [TextField] tap.
-  final VoidCallback? onTextFieldTap;
-
-  /// Custom [TextEditingController]. If not provided, defaults to the
-  /// [InputTextFieldController], which extends [TextEditingController] and has
-  /// additional fatures like markdown support. If you want to keep additional
-  /// features but still need some methods from the default [TextEditingController],
-  /// you can create your own [InputTextFieldController] (imported from this lib)
-  /// and pass it here.
-  final TextEditingController? textEditingController;
-
-  /// Controls the [TextInput] autocorrect behavior. Defaults to [true].
-  final bool autocorrect;
-
-  /// Whether [TextInput] should have focus. Defaults to [false].
-  final bool autofocus;
-
-  /// Controls the [TextInput] enableSuggestions behavior. Defaults to [true].
-  final bool enableSuggestions;
-
-  /// Controls the [TextInput] enabled behavior. Defaults to [true].
-  final bool enabled;
-}
-
-final isMobile = defaultTargetPlatform == TargetPlatform.android ||
-    defaultTargetPlatform == TargetPlatform.iOS;
-
-class AccessoryButton extends StatelessWidget {
-  const AccessoryButton({
-    required this.onSendPressed,
-    required this.onStopStreaming,
-    required this.isStreaming,
-    super.key,
-  });
-
-  final void Function() onSendPressed;
-  final void Function() onStopStreaming;
-  final bool isStreaming;
-
-  @override
-  Widget build(BuildContext context) {
-    if (isStreaming) {
-      return FlowyIconButton(
-        width: 36,
-        icon: FlowySvg(
-          FlowySvgs.ai_stream_stop_s,
-          size: const Size.square(28),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        onPressed: onStopStreaming,
-        radius: BorderRadius.circular(18),
-        fillColor: AFThemeExtension.of(context).lightGreyHover,
-        hoverColor: AFThemeExtension.of(context).lightGreyHover,
-      );
-    } else {
-      return FlowyIconButton(
-        width: 36,
-        fillColor: AFThemeExtension.of(context).lightGreyHover,
-        hoverColor: AFThemeExtension.of(context).lightGreyHover,
-        radius: BorderRadius.circular(18),
-        icon: FlowySvg(
-          FlowySvgs.send_s,
-          size: const Size.square(24),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        onPressed: onSendPressed,
-      );
-    }
-  }
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_accessory_button.dart

@@ -0,0 +1,48 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flutter/material.dart';
+
+class ChatInputAccessoryButton extends StatelessWidget {
+  const ChatInputAccessoryButton({
+    required this.onSendPressed,
+    required this.onStopStreaming,
+    required this.isStreaming,
+    super.key,
+  });
+
+  final void Function() onSendPressed;
+  final void Function() onStopStreaming;
+  final bool isStreaming;
+
+  @override
+  Widget build(BuildContext context) {
+    if (isStreaming) {
+      return FlowyIconButton(
+        width: 36,
+        icon: FlowySvg(
+          FlowySvgs.ai_stream_stop_s,
+          size: const Size.square(28),
+          color: Theme.of(context).colorScheme.primary,
+        ),
+        onPressed: onStopStreaming,
+        radius: BorderRadius.circular(18),
+        fillColor: AFThemeExtension.of(context).lightGreyHover,
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+      );
+    } else {
+      return FlowyIconButton(
+        width: 36,
+        fillColor: AFThemeExtension.of(context).lightGreyHover,
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+        radius: BorderRadius.circular(18),
+        icon: FlowySvg(
+          FlowySvgs.send_s,
+          size: const Size.square(24),
+          color: Theme.of(context).colorScheme.primary,
+        ),
+        onPressed: onSendPressed,
+      );
+    }
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_command.dart

@@ -0,0 +1,76 @@
+import 'package:appflowy/plugins/ai_chat/presentation/chat_inline_action_menu.dart';
+import 'package:flutter/material.dart';
+
+class ChatTextFieldInterceptor {
+  String previosText = "";
+
+  ChatActionHandler? onTextChanged(
+    String text,
+    TextEditingController textController,
+    FocusNode textFieldFocusNode,
+  ) {
+    if (previosText == "/" && text == "/ ") {
+      final handler = IndexActionHandler(
+        textController: textController,
+        textFieldFocusNode: textFieldFocusNode,
+      ) as ChatActionHandler;
+      return handler;
+    }
+    previosText = text;
+    return null;
+  }
+}
+
+class FixGrammarMenuItem extends ChatActionMenuItem {
+  @override
+  String get title => "Fix Grammar";
+}
+
+class ImproveWritingMenuItem extends ChatActionMenuItem {
+  @override
+  String get title => "Improve Writing";
+}
+
+class ChatWithFileMenuItem extends ChatActionMenuItem {
+  @override
+  String get title => "Chat With PDF";
+}
+
+class IndexActionHandler extends ChatActionHandler {
+  IndexActionHandler({
+    required this.textController,
+    required this.textFieldFocusNode,
+  });
+
+  final TextEditingController textController;
+  final FocusNode textFieldFocusNode;
+
+  @override
+  List<ChatActionMenuItem> get items => [
+        ChatWithFileMenuItem(),
+        FixGrammarMenuItem(),
+        ImproveWritingMenuItem(),
+      ];
+
+  @override
+  void onSelected(ChatActionMenuItem item) {
+    textController.clear();
+    WidgetsBinding.instance.addPostFrameCallback(
+      (_) => textFieldFocusNode.requestFocus(),
+    );
+  }
+
+  @override
+  void onExit() {
+    if (!textFieldFocusNode.hasFocus) {
+      textFieldFocusNode.requestFocus();
+    }
+  }
+
+  @override
+  void onEnter() {
+    if (textFieldFocusNode.hasFocus) {
+      textFieldFocusNode.unfocus();
+    }
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input.dart

@@ -0,0 +1,240 @@
+import 'package:appflowy/plugins/ai_chat/presentation/chat_inline_action_menu.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
+import 'package:flutter_chat_ui/flutter_chat_ui.dart';
+
+import 'chat_accessory_button.dart';
+
+class ChatInput extends StatefulWidget {
+  /// Creates [ChatInput] widget.
+  const ChatInput({
+    super.key,
+    this.isAttachmentUploading,
+    this.onAttachmentPressed,
+    required this.onSendPressed,
+    required this.chatId,
+    this.options = const InputOptions(),
+    required this.isStreaming,
+    required this.onStopStreaming,
+    required this.hintText,
+  });
+
+  final bool? isAttachmentUploading;
+  final VoidCallback? onAttachmentPressed;
+  final void Function(types.PartialText) onSendPressed;
+  final void Function() onStopStreaming;
+  final InputOptions options;
+  final String chatId;
+  final bool isStreaming;
+  final String hintText;
+
+  @override
+  State<ChatInput> createState() => _ChatInputState();
+}
+
+/// [ChatInput] widget state.
+class _ChatInputState extends State<ChatInput> {
+  final GlobalKey _textFieldKey = GlobalKey();
+  final LayerLink _layerLink = LayerLink();
+  // final ChatTextFieldInterceptor _textFieldInterceptor =
+  //     ChatTextFieldInterceptor();
+
+  late final _inputFocusNode = FocusNode(
+    onKeyEvent: (node, event) {
+      if (event.physicalKey == PhysicalKeyboardKey.enter &&
+          !HardwareKeyboard.instance.physicalKeysPressed.any(
+            (el) => <PhysicalKeyboardKey>{
+              PhysicalKeyboardKey.shiftLeft,
+              PhysicalKeyboardKey.shiftRight,
+            }.contains(el),
+          )) {
+        if (kIsWeb && _textController.value.isComposingRangeValid) {
+          return KeyEventResult.ignored;
+        }
+        if (event is KeyDownEvent) {
+          if (!widget.isStreaming) {
+            _handleSendPressed();
+          }
+        }
+        return KeyEventResult.handled;
+      } else {
+        return KeyEventResult.ignored;
+      }
+    },
+  );
+  late TextEditingController _textController;
+
+  bool _sendButtonVisible = false;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _textController = InputTextFieldController();
+    _handleSendButtonVisibilityModeChange();
+  }
+
+  @override
+  void dispose() {
+    _inputFocusNode.dispose();
+    _textController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    const textPadding = EdgeInsets.symmetric(horizontal: 16, vertical: 6);
+    const buttonPadding = EdgeInsets.symmetric(horizontal: 16, vertical: 6);
+    const inputPadding = EdgeInsets.all(6);
+
+    return Focus(
+      child: Padding(
+        padding: inputPadding,
+        child: Material(
+          borderRadius: BorderRadius.circular(30),
+          color: isMobile
+              ? Theme.of(context).colorScheme.surfaceContainer
+              : Theme.of(context).colorScheme.surfaceContainerHighest,
+          elevation: 0.6,
+          child: Row(
+            children: [
+              if (widget.onAttachmentPressed != null)
+                AttachmentButton(
+                  isLoading: widget.isAttachmentUploading ?? false,
+                  onPressed: widget.onAttachmentPressed,
+                  padding: buttonPadding,
+                ),
+              Expanded(child: _inputTextField(textPadding)),
+              _sendButton(buttonPadding),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _handleSendButtonVisibilityModeChange() {
+    _textController.removeListener(_handleTextControllerChange);
+    _sendButtonVisible =
+        _textController.text.trim() != '' || widget.isStreaming;
+    _textController.addListener(_handleTextControllerChange);
+  }
+
+  void _handleSendPressed() {
+    final trimmedText = _textController.text.trim();
+    if (trimmedText != '') {
+      final partialText = types.PartialText(text: trimmedText);
+      widget.onSendPressed(partialText);
+
+      _textController.clear();
+    }
+  }
+
+  void _handleTextControllerChange() {
+    if (_textController.value.isComposingRangeValid) {
+      return;
+    }
+    setState(() {
+      _sendButtonVisible = _textController.text.trim() != '';
+    });
+  }
+
+  Widget _inputTextField(EdgeInsets textPadding) {
+    return CompositedTransformTarget(
+      link: _layerLink,
+      child: Padding(
+        padding: textPadding,
+        child: TextField(
+          key: _textFieldKey,
+          controller: _textController,
+          focusNode: _inputFocusNode,
+          decoration: InputDecoration(
+            border: InputBorder.none,
+            hintText: widget.hintText,
+            hintStyle: TextStyle(
+              color: AFThemeExtension.of(context).textColor.withOpacity(0.5),
+            ),
+          ),
+          style: TextStyle(
+            color: AFThemeExtension.of(context).textColor,
+          ),
+          keyboardType: TextInputType.multiline,
+          textCapitalization: TextCapitalization.sentences,
+          maxLines: 10,
+          minLines: 1,
+          // onChanged: (text) {
+          //   final handler = _textFieldInterceptor.onTextChanged(
+          //     text,
+          //     _textController,
+          //     _inputFocusNode,
+          //   );
+          //   // If the handler is not null, it means that the text has been
+          //   // recognized as a command.
+          //   if (handler != null) {
+          //     ChatActionsMenu(
+          //       anchor: ChatInputAnchor(
+          //         anchorKey: _textFieldKey,
+          //         layerLink: _layerLink,
+          //       ),
+          //       handler: handler,
+          //       context: context,
+          //       style: Theme.of(context).brightness == Brightness.dark
+          //           ? const ChatActionsMenuStyle.dark()
+          //           : const ChatActionsMenuStyle.light(),
+          //     ).show();
+          //   }
+          // },
+        ),
+      ),
+    );
+  }
+
+  ConstrainedBox _sendButton(EdgeInsets buttonPadding) {
+    return ConstrainedBox(
+      constraints: BoxConstraints(
+        minHeight: buttonPadding.bottom + buttonPadding.top + 24,
+      ),
+      child: Visibility(
+        visible: _sendButtonVisible,
+        child: Padding(
+          padding: buttonPadding,
+          child: ChatInputAccessoryButton(
+            onSendPressed: () {
+              if (!widget.isStreaming) {
+                widget.onStopStreaming();
+                _handleSendPressed();
+              }
+            },
+            onStopStreaming: () => widget.onStopStreaming(),
+            isStreaming: widget.isStreaming,
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  void didUpdateWidget(covariant ChatInput oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _handleSendButtonVisibilityModeChange();
+  }
+}
+
+final isMobile = defaultTargetPlatform == TargetPlatform.android ||
+    defaultTargetPlatform == TargetPlatform.iOS;
+
+class ChatInputAnchor extends ChatAnchor {
+  ChatInputAnchor({
+    required this.anchorKey,
+    required this.layerLink,
+  });
+
+  @override
+  final GlobalKey<State<StatefulWidget>> anchorKey;
+
+  @override
+  final LayerLink layerLink;
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_related_question.dart

@@ -1,12 +1,11 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy_backend/protobuf/flowy-chat/entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 
-
 class RelatedQuestionList extends StatelessWidget {
   const RelatedQuestionList({
     required this.chatId,
@@ -97,6 +96,7 @@ class _RelatedQuestionItemState extends State<RelatedQuestionItem> {
           style: TextStyle(
             color: _isHovered ? Theme.of(context).colorScheme.primary : null,
             fontSize: 14,
+            height: 1.5,
           ),
         ),
         onTap: () {

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_welcome_page.dart

@@ -5,7 +5,7 @@ import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 
-import 'chat_input.dart';
+import 'chat_input/chat_input.dart';
 
 class ChatWelcomePage extends StatelessWidget {
   ChatWelcomePage({required this.onSelectedQuestion, super.key});

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/ai_markdown_text.dart

@@ -1,11 +1,14 @@
+import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_configuration.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy/shared/markdown_to_document.dart';
 import 'package:appflowy/util/theme_extension.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:markdown_widget/markdown_widget.dart';
 
 import 'selectable_highlight.dart';
@@ -30,7 +33,11 @@ class AIMarkdownText extends StatelessWidget {
   Widget build(BuildContext context) {
     switch (type) {
       case AIMarkdownType.appflowyEditor:
-        return _AppFlowyEditorMarkdown(markdown: markdown);
+        return BlocProvider(
+          create: (context) => DocumentPageStyleBloc(view: ViewPB())
+            ..add(const DocumentPageStyleEvent.initial()),
+          child: _AppFlowyEditorMarkdown(markdown: markdown),
+        );
       case AIMarkdownType.markdownWidget:
         return _ThirdPartyMarkdown(markdown: markdown);
     }
@@ -52,15 +59,6 @@ class _AppFlowyEditorMarkdown extends StatefulWidget {
 
 class _AppFlowyEditorMarkdownState extends State<_AppFlowyEditorMarkdown> {
   late EditorState editorState;
-  late final styleCustomizer = EditorStyleCustomizer(
-    context: context,
-    padding: EdgeInsets.zero,
-  );
-  late final editorStyle = styleCustomizer.style().copyWith(
-        // hide the cursor
-        cursorColor: Colors.transparent,
-        cursorWidth: 0,
-      );
   late EditorScrollController scrollController;
 
   @override
@@ -99,6 +97,17 @@ class _AppFlowyEditorMarkdownState extends State<_AppFlowyEditorMarkdown> {
 
   @override
   Widget build(BuildContext context) {
+    // don't lazy load the styleCustomizer and blockBuilders,
+    //  it needs the context to get the theme.
+    final styleCustomizer = EditorStyleCustomizer(
+      context: context,
+      padding: EdgeInsets.zero,
+    );
+    final editorStyle = styleCustomizer.style().copyWith(
+          // hide the cursor
+          cursorColor: Colors.transparent,
+          cursorWidth: 0,
+        );
     final blockBuilders = getEditorBuilderMap(
       context: context,
       editorState: editorState,

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/ai_text_message.dart

@@ -1,6 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/ai_chat/application/chat_ai_message_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_bloc.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/chat_loading.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/message/ai_markdown_text.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -38,25 +37,34 @@ class ChatAITextMessageWidget extends StatelessWidget {
       )..add(const ChatAIMessageEvent.initial()),
       child: BlocBuilder<ChatAIMessageBloc, ChatAIMessageState>(
         builder: (context, state) {
-          if (state.error != null) {
-            return StreamingError(
-              onRetryPressed: () {
-                context.read<ChatAIMessageBloc>().add(
-                      const ChatAIMessageEvent.retry(),
-                    );
-              },
-            );
-          }
-
-          if (state.retryState == const LoadingState.loading()) {
-            return const ChatAILoading();
-          }
-
-          if (state.text.isEmpty) {
-            return const ChatAILoading();
-          } else {
-            return AIMarkdownText(markdown: state.text);
-          }
+          return state.messageState.when(
+            onError: (err) {
+              return StreamingError(
+                onRetryPressed: () {
+                  context.read<ChatAIMessageBloc>().add(
+                        const ChatAIMessageEvent.retry(),
+                      );
+                },
+              );
+            },
+            onAIResponseLimit: () {
+              return FlowyText(
+                LocaleKeys.sideBar_askOwnerToUpgradeToAIMax.tr(),
+                maxLines: 10,
+                lineHeight: 1.5,
+              );
+            },
+            ready: () {
+              if (state.text.isEmpty) {
+                return const ChatAILoading();
+              } else {
+                return AIMarkdownText(markdown: state.text);
+              }
+            },
+            loading: () {
+              return const ChatAILoading();
+            },
+          );
         },
       ),
     );

frontend/appflowy_flutter/lib/plugins/blank/blank.dart

@@ -54,6 +54,7 @@ class BlankPagePluginWidgetBuilder extends PluginWidgetBuilder
   Widget buildWidget({
     required PluginContext context,
     required bool shrinkWrap,
+    Map<String, dynamic>? data,
   }) =>
       const BlankPage();
 

frontend/appflowy_flutter/lib/plugins/database/application/cell/bloc/select_option_cell_editor_bloc.dart

@@ -1,5 +1,7 @@
 import 'dart:async';
 
+import 'package:flutter/widgets.dart';
+
 import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
 import 'package:appflowy/plugins/database/application/field/type_option/select_type_option_actions.dart';
@@ -9,7 +11,6 @@ import 'package:appflowy/plugins/database/domain/select_option_cell_service.dart
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:collection/collection.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 
@@ -109,16 +110,16 @@ class SelectOptionCellEditorBloc
           selectOption: (optionId) async {
             await _selectOptionService.select(optionIds: [optionId]);
           },
-          unSelectOption: (optionId) async {
-            await _selectOptionService.unSelect(optionIds: [optionId]);
+          unselectOption: (optionId) async {
+            await _selectOptionService.unselect(optionIds: [optionId]);
           },
-          unSelectLastOption: () async {
+          unselectLastOption: () async {
             if (state.selectedOptions.isEmpty) {
               return;
             }
             final lastSelectedOptionId = state.selectedOptions.last.id;
             await _selectOptionService
-                .unSelect(optionIds: [lastSelectedOptionId]);
+                .unselect(optionIds: [lastSelectedOptionId]);
           },
           submitTextField: () {
             _submitTextFieldValue(emit);
@@ -353,10 +354,10 @@ class SelectOptionCellEditorEvent with _$SelectOptionCellEditorEvent {
   const factory SelectOptionCellEditorEvent.createOption() = _CreateOption;
   const factory SelectOptionCellEditorEvent.selectOption(String optionId) =
       _SelectOption;
-  const factory SelectOptionCellEditorEvent.unSelectOption(String optionId) =
-      _UnSelectOption;
-  const factory SelectOptionCellEditorEvent.unSelectLastOption() =
-      _UnSelectLastOption;
+  const factory SelectOptionCellEditorEvent.unselectOption(String optionId) =
+      _UnselectOption;
+  const factory SelectOptionCellEditorEvent.unselectLastOption() =
+      _UnselectLastOption;
   const factory SelectOptionCellEditorEvent.updateOption(
     SelectOptionPB option,
   ) = _UpdateOption;

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

@@ -1,7 +1,5 @@
 import 'dart:collection';
 
-import 'package:flutter/foundation.dart';
-
 import 'package:appflowy/plugins/database/application/row/row_cache.dart';
 import 'package:appflowy/plugins/database/application/setting/setting_listener.dart';
 import 'package:appflowy/plugins/database/domain/database_view_service.dart';
@@ -19,9 +17,9 @@ import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_result/appflowy_result.dart';
 import 'package:collection/collection.dart';
+import 'package:flutter/foundation.dart';
 
 import '../setting/setting_service.dart';
-
 import 'field_info.dart';
 
 class _GridFieldNotifier extends ChangeNotifier {
@@ -76,7 +74,6 @@ typedef OnReceiveFields = void Function(List<FieldInfo>);
 typedef OnReceiveFilters = void Function(List<FilterInfo>);
 typedef OnReceiveSorts = void Function(List<SortInfo>);
 
-
 class FieldController {
   FieldController({required this.viewId})
       : _fieldListener = FieldsListener(viewId: viewId),
@@ -446,9 +443,13 @@ class FieldController {
 
   /// Listen for field setting changes in the backend.
   void _listenOnFieldSettingsChanged() {
-    FieldInfo updateFieldSettings(FieldSettingsPB updatedFieldSettings) {
+    FieldInfo? updateFieldSettings(FieldSettingsPB updatedFieldSettings) {
       final List<FieldInfo> newFields = fieldInfos;
-      FieldInfo updatedField = newFields[0];
+      var updatedField = newFields.firstOrNull;
+
+      if (updatedField == null) {
+        return null;
+      }
 
       final index = newFields
           .indexWhere((field) => field.id == updatedFieldSettings.fieldId);
@@ -470,6 +471,10 @@ class FieldController {
         result.fold(
           (fieldSettings) {
             final updatedFieldInfo = updateFieldSettings(fieldSettings);
+            if (updatedFieldInfo == null) {
+              return;
+            }
+
             for (final listener in _updatedFieldCallbacks.values) {
               listener([updatedFieldInfo]);
             }

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

@@ -52,7 +52,7 @@ class DatabaseTabBarBloc
             _createLinkedView(layout.layoutType, name ?? layout.layoutName);
           },
           deleteView: (String viewId) async {
-            final result = await ViewBackendService.delete(viewId: viewId);
+            final result = await ViewBackendService.deleteView(viewId: viewId);
             result.fold(
               (l) {},
               (r) => Log.error(r),

frontend/appflowy_flutter/lib/plugins/database/domain/select_option_cell_service.dart

@@ -70,7 +70,7 @@ class SelectOptionCellBackendService {
     return DatabaseEventUpdateSelectOptionCell(payload).send();
   }
 
-  Future<FlowyResult<void, FlowyError>> unSelect({
+  Future<FlowyResult<void, FlowyError>> unselect({
     required Iterable<String> optionIds,
   }) {
     final payload = SelectOptionCellChangesetPB()

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/grid_page.dart

@@ -1,6 +1,3 @@
-import 'package:appflowy/workspace/application/view/view_bloc.dart';
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/application/row/row_service.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/calculations/calculations_row.dart';
@@ -9,6 +6,7 @@ import 'package:appflowy/plugins/database/tab_bar/desktop/setting_menu.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/workspace/application/action_navigation/action_navigation_bloc.dart';
 import 'package:appflowy/workspace/application/action_navigation/navigation_action.dart';
+import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:collection/collection.dart';
@@ -16,6 +14,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scrollview.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:linked_scroll_controller/linked_scroll_controller.dart';
 
@@ -24,7 +23,6 @@ import '../../application/row/row_controller.dart';
 import '../../tab_bar/tab_bar_view.dart';
 import '../../widgets/row/row_detail.dart';
 import '../application/grid_bloc.dart';
-
 import 'grid_scroll.dart';
 import 'layout/layout.dart';
 import 'layout/sizes.dart';
@@ -504,7 +502,10 @@ class _PositionedCalculationsRowState
       left: 0,
       right: 0,
       child: Container(
-        margin: EdgeInsets.only(left: GridSize.horizontalHeaderPadding + 40),
+        margin: EdgeInsets.only(
+          left:
+              context.read<DatabasePluginWidgetBuilderSize>().horizontalPadding,
+        ),
         padding: const EdgeInsets.only(bottom: 10),
         decoration: BoxDecoration(
           color: Theme.of(context).canvasColor,

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/calculations/calculate_cell.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/plugins/database/application/calculations/calculation_type_ext.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
 import 'package:appflowy/plugins/database/application/field/type_option/number_format_bloc.dart';
@@ -16,6 +14,7 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class CalculateCell extends StatefulWidget {
@@ -141,11 +140,14 @@ class _CalculateCellState extends State<CalculateCell> {
                 TextSpan(
                   text: widget.calculation!.calculationType.shortLabel
                       .toUpperCase(),
+                  style: context.tooltipTextStyle(),
                 ),
                 const TextSpan(text: ' '),
                 TextSpan(
                   text: calculateValue,
-                  style: const TextStyle(fontWeight: FontWeight.w500),
+                  style: context
+                      .tooltipTextStyle()
+                      ?.copyWith(fontWeight: FontWeight.w500),
                 ),
               ],
             ),

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart

@@ -4,6 +4,7 @@ import 'package:appflowy/plugins/database/application/field/field_controller.dar
 import 'package:appflowy/plugins/database/domain/field_service.dart';
 import 'package:appflowy/plugins/database/grid/application/grid_bloc.dart';
 import 'package:appflowy/plugins/database/grid/application/grid_header_bloc.dart';
+import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
@@ -139,7 +140,9 @@ class _GridHeaderState extends State<_GridHeader> {
   }
 
   Widget _cellLeading() {
-    return SizedBox(width: GridSize.horizontalHeaderPadding + 40);
+    return SizedBox(
+      width: context.read<DatabasePluginWidgetBuilderSize>().horizontalPadding,
+    );
   }
 }
 

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import "package:appflowy/generated/locale_keys.g.dart";
 import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
@@ -7,18 +5,19 @@ import 'package:appflowy/plugins/database/application/field/field_controller.dar
 import 'package:appflowy/plugins/database/application/row/row_controller.dart';
 import 'package:appflowy/plugins/database/application/row/row_service.dart';
 import 'package:appflowy/plugins/database/grid/application/row/row_bloc.dart';
+import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:provider/provider.dart';
 
 import '../../../../widgets/row/accessory/cell_accessory.dart';
 import '../../../../widgets/row/cells/cell_container.dart';
 import '../../layout/sizes.dart';
-
 import 'action.dart';
 
 class GridRow extends StatefulWidget {
@@ -112,7 +111,9 @@ class _RowLeadingState extends State<_RowLeading> {
       child: Consumer<RegionStateNotifier>(
         builder: (context, state, _) {
           return SizedBox(
-            width: GridSize.horizontalHeaderPadding + 40,
+            width: context
+                .read<DatabasePluginWidgetBuilderSize>()
+                .horizontalPadding,
             child: state.onEnter ? _activeWidget() : null,
           );
         },

frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart

@@ -1,7 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/application/tab_bar_bloc.dart';
-import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
+import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
@@ -17,14 +17,17 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'tab_bar_add_button.dart';
 
 class TabBarHeader extends StatelessWidget {
-  const TabBarHeader({super.key});
+  const TabBarHeader({
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context) {
     return Container(
       height: 30,
       padding: EdgeInsets.symmetric(
-        horizontal: GridSize.horizontalHeaderPadding + 40,
+        horizontal:
+            context.read<DatabasePluginWidgetBuilderSize>().horizontalPadding,
       ),
       child: Stack(
         children: [

frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/tab_bar_bloc.dart';
-import 'package:appflowy/plugins/database/widgets/share_button.dart';
+import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
+import 'package:appflowy/plugins/shared/share/share_button.dart';
 import 'package:appflowy/plugins/util.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
@@ -16,6 +17,7 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:provider/provider.dart';
 
 import 'desktop/tab_bar_header.dart';
 import 'mobile/mobile_tab_bar_header.dart';
@@ -219,6 +221,16 @@ class DatabaseTabBarViewPlugin extends Plugin {
   }
 }
 
+const kDatabasePluginWidgetBuilderHorizontalPadding = 'horizontal_padding';
+
+class DatabasePluginWidgetBuilderSize {
+  const DatabasePluginWidgetBuilderSize({
+    required this.horizontalPadding,
+  });
+
+  final double horizontalPadding;
+}
+
 class DatabasePluginWidgetBuilder extends PluginWidgetBuilder {
   DatabasePluginWidgetBuilder({
     required this.bloc,
@@ -244,6 +256,7 @@ class DatabasePluginWidgetBuilder extends PluginWidgetBuilder {
   Widget buildWidget({
     required PluginContext context,
     required bool shrinkWrap,
+    Map<String, dynamic>? data,
   }) {
     notifier.isDeleted.addListener(() {
       final deletedView = notifier.isDeleted.value;
@@ -252,11 +265,20 @@ class DatabasePluginWidgetBuilder extends PluginWidgetBuilder {
       }
     });
 
-    return DatabaseTabBarView(
-      key: ValueKey(notifier.view.id),
-      view: notifier.view,
-      shrinkWrap: shrinkWrap,
-      initialRowId: initialRowId,
+    final horizontalPadding =
+        data?[kDatabasePluginWidgetBuilderHorizontalPadding] as double? ??
+            GridSize.horizontalHeaderPadding + 40;
+
+    return Provider(
+      create: (context) => DatabasePluginWidgetBuilderSize(
+        horizontalPadding: horizontalPadding,
+      ),
+      child: DatabaseTabBarView(
+        key: ValueKey(notifier.view.id),
+        view: notifier.view,
+        shrinkWrap: shrinkWrap,
+        initialRowId: initialRowId,
+      ),
     );
   }
 
@@ -270,7 +292,7 @@ class DatabasePluginWidgetBuilder extends PluginWidgetBuilder {
       value: bloc,
       child: Row(
         children: [
-          DatabaseShareButton(key: ValueKey(view.id), view: view),
+          ShareButton(key: ValueKey(view.id), view: view),
           const HSpace(10),
           ViewFavoriteButton(view: view),
           const HSpace(4),

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/editable_cell_skeleton/summary.dart

@@ -1,3 +1,6 @@
+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/plugins/database/application/cell/bloc/summary_cell_bloc.dart';
@@ -7,19 +10,18 @@ import 'package:appflowy/plugins/database/application/cell/cell_controller_build
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/widgets/cell/desktop_grid/desktop_grid_summary_cell.dart';
 import 'package:appflowy/plugins/database/widgets/cell/desktop_row_detail/desktop_row_detail_summary_cell.dart';
+import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/mobile_grid/mobile_grid_summary_cell.dart';
 import 'package:appflowy/plugins/database/widgets/cell/mobile_row_detail/mobile_row_detail_summary_cell.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
-import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
+import 'package:appflowy_backend/dispatch/error.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 abstract class IEditableSummaryCellSkin {
@@ -149,7 +151,22 @@ class SummaryCellAccessory extends StatelessWidget {
         rowId: rowId,
         fieldId: fieldId,
       ),
-      child: BlocBuilder<SummaryRowBloc, SummaryRowState>(
+      child: BlocConsumer<SummaryRowBloc, SummaryRowState>(
+        listenWhen: (previous, current) {
+          return previous.error != current.error;
+        },
+        listener: (context, state) {
+          if (state.error != null) {
+            if (state.error!.isAIResponseLimitExceeded) {
+              showSnackBarMessage(
+                context,
+                LocaleKeys.sideBar_aiResponseLimitDialogTitle.tr(),
+              );
+            } else {
+              showSnackBarMessage(context, state.error!.msg);
+            }
+          }
+        },
         builder: (context, state) {
           return const Row(
             children: [SummaryButton(), HSpace(6), CopyButton()],
@@ -169,13 +186,13 @@ class SummaryButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocBuilder<SummaryRowBloc, SummaryRowState>(
       builder: (context, state) {
-        return state.loadingState.map(
-          loading: (_) {
+        return state.loadingState.when(
+          loading: () {
             return const Center(
               child: CircularProgressIndicator.adaptive(),
             );
           },
-          finish: (_) {
+          finish: () {
             return FlowyTooltip(
               message: LocaleKeys.tooltip_aiGenerate.tr(),
               child: Container(

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/editable_cell_skeleton/translate.dart

@@ -1,3 +1,6 @@
+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/plugins/database/application/cell/bloc/translate_cell_bloc.dart';
@@ -7,19 +10,18 @@ import 'package:appflowy/plugins/database/application/cell/cell_controller_build
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/widgets/cell/desktop_grid/desktop_grid_translate_cell.dart';
 import 'package:appflowy/plugins/database/widgets/cell/desktop_row_detail/destop_row_detail_translate_cell.dart';
+import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/mobile_grid/mobile_grid_translate_cell.dart';
 import 'package:appflowy/plugins/database/widgets/cell/mobile_row_detail/mobile_row_detail_translate_cell.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
-import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
+import 'package:appflowy_backend/dispatch/error.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 abstract class IEditableTranslateCellSkin {
@@ -150,7 +152,22 @@ class TranslateCellAccessory extends StatelessWidget {
         rowId: rowId,
         fieldId: fieldId,
       ),
-      child: BlocBuilder<TranslateRowBloc, TranslateRowState>(
+      child: BlocConsumer<TranslateRowBloc, TranslateRowState>(
+        listenWhen: (previous, current) {
+          return previous.error != current.error;
+        },
+        listener: (context, state) {
+          if (state.error != null) {
+            if (state.error!.isAIResponseLimitExceeded) {
+              showSnackBarMessage(
+                context,
+                LocaleKeys.sideBar_aiResponseLimitDialogTitle.tr(),
+              );
+            } else {
+              showSnackBarMessage(context, state.error!.msg);
+            }
+          }
+        },
         builder: (context, state) {
           return const Row(
             children: [TranslateButton(), HSpace(6), CopyButton()],

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 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';
@@ -12,7 +14,6 @@ import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:protobuf/protobuf.dart';
@@ -176,7 +177,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
               } else {
                 context
                     .read<SelectOptionCellEditorBloc>()
-                    .add(SelectOptionCellEditorEvent.unSelectOption(option.id));
+                    .add(SelectOptionCellEditorEvent.unselectOption(option.id));
               }
             },
             onMoreOptions: (option) {

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/select_option_cell_editor.dart

@@ -1,6 +1,10 @@
 import 'dart:collection';
 import 'dart:io';
 
+import 'package:flutter/foundation.dart';
+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/plugins/database/application/cell/bloc/select_option_cell_editor_bloc.dart';
@@ -10,14 +14,11 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
-import '../../grid/presentation/layout/sizes.dart';
 import '../../grid/presentation/widgets/common/type_option_separator.dart';
 import '../field/type_option_editor/select/select_option_editor.dart';
+
 import 'extension.dart';
 import 'select_option_text_field.dart';
 
@@ -73,7 +74,7 @@ class _SelectOptionCellEditorState extends State<SelectOptionCellEditor> {
             break;
           case LogicalKeyboardKey.backspace when event is KeyUpEvent:
             if (!textEditingController.text.isNotEmpty) {
-              bloc.add(const SelectOptionCellEditorEvent.unSelectLastOption());
+              bloc.add(const SelectOptionCellEditorEvent.unselectLastOption());
               return KeyEventResult.handled;
             }
             break;
@@ -137,8 +138,7 @@ class _OptionList extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocConsumer<SelectOptionCellEditorBloc,
         SelectOptionCellEditorState>(
-      listenWhen: (previous, current) =>
-          previous.clearFilter != current.clearFilter,
+      listenWhen: (prev, curr) => prev.clearFilter != curr.clearFilter,
       listener: (context, state) {
         if (state.clearFilter) {
           textEditingController.clear();
@@ -151,60 +151,66 @@ class _OptionList extends StatelessWidget {
           !listEquals(previous.options, current.options) ||
           previous.createSelectOptionSuggestion !=
               current.createSelectOptionSuggestion,
-      builder: (context, state) {
-        return ReorderableListView.builder(
-          shrinkWrap: true,
-          proxyDecorator: (child, index, _) => Material(
-            color: Colors.transparent,
-            child: Stack(
-              children: [
-                BlocProvider.value(
-                  value: context.read<SelectOptionCellEditorBloc>(),
-                  child: child,
-                ),
-                MouseRegion(
-                  cursor: Platform.isWindows
-                      ? SystemMouseCursors.click
-                      : SystemMouseCursors.grabbing,
-                  child: const SizedBox.expand(),
-                ),
-              ],
-            ),
+      builder: (context, state) => ReorderableListView.builder(
+        shrinkWrap: true,
+        proxyDecorator: (child, index, _) => Material(
+          color: Colors.transparent,
+          child: Stack(
+            children: [
+              BlocProvider.value(
+                value: context.read<SelectOptionCellEditorBloc>(),
+                child: child,
+              ),
+              MouseRegion(
+                cursor: Platform.isWindows
+                    ? SystemMouseCursors.click
+                    : SystemMouseCursors.grabbing,
+                child: const SizedBox.expand(),
+              ),
+            ],
           ),
-          buildDefaultDragHandles: false,
-          itemCount: state.options.length,
-          onReorderStart: (_) => popoverMutex.close(),
-          itemBuilder: (_, int index) {
-            final option = state.options[index];
-            return _SelectOptionCell(
-              key: ValueKey("select_cell_option_list_${option.id}"),
-              index: index,
-              option: option,
-              popoverMutex: popoverMutex,
-            );
-          },
-          onReorder: (oldIndex, newIndex) {
-            if (oldIndex < newIndex) {
-              newIndex--;
-            }
-            final fromOptionId = state.options[oldIndex].id;
-            final toOptionId = state.options[newIndex].id;
-            context.read<SelectOptionCellEditorBloc>().add(
-                  SelectOptionCellEditorEvent.reorderOption(
-                    fromOptionId,
-                    toOptionId,
-                  ),
-                );
-          },
-          header: const _Title(),
-          footer: state.createSelectOptionSuggestion == null
-              ? null
-              : _CreateOptionCell(
-                  suggestion: state.createSelectOptionSuggestion!,
+        ),
+        buildDefaultDragHandles: false,
+        itemCount: state.options.length,
+        onReorderStart: (_) => popoverMutex.close(),
+        itemBuilder: (_, int index) {
+          final option = state.options[index];
+          return _SelectOptionCell(
+            key: ValueKey("select_cell_option_list_${option.id}"),
+            index: index,
+            option: option,
+            popoverMutex: popoverMutex,
+          );
+        },
+        onReorder: (oldIndex, newIndex) {
+          if (oldIndex < newIndex) {
+            newIndex--;
+          }
+          final fromOptionId = state.options[oldIndex].id;
+          final toOptionId = state.options[newIndex].id;
+          context.read<SelectOptionCellEditorBloc>().add(
+                SelectOptionCellEditorEvent.reorderOption(
+                  fromOptionId,
+                  toOptionId,
                 ),
-          padding: const EdgeInsets.symmetric(vertical: 8.0),
-        );
-      },
+              );
+        },
+        header: Padding(
+          padding: EdgeInsets.only(
+            bottom: state.createSelectOptionSuggestion != null ||
+                    state.options.isNotEmpty
+                ? 12
+                : 0,
+          ),
+          child: const _Title(),
+        ),
+        footer: state.createSelectOptionSuggestion != null
+            ? _CreateOptionCell(
+                suggestion: state.createSelectOptionSuggestion!,
+              )
+            : null,
+        padding: const EdgeInsets.symmetric(vertical: 8),
+      ),
     );
   }
 }
@@ -245,11 +251,9 @@ class _TextField extends StatelessWidget {
               scrollController: scrollController,
               textSeparators: const [','],
               onClick: () => popoverMutex.close(),
-              newText: (text) {
-                context
-                    .read<SelectOptionCellEditorBloc>()
-                    .add(SelectOptionCellEditorEvent.filterOption(text));
-              },
+              newText: (text) => context
+                  .read<SelectOptionCellEditorBloc>()
+                  .add(SelectOptionCellEditorEvent.filterOption(text)),
               onSubmitted: () {
                 context
                     .read<SelectOptionCellEditorBloc>()
@@ -264,13 +268,12 @@ class _TextField extends StatelessWidget {
                       ),
                     );
               },
-              onRemove: (optionName) {
-                context.read<SelectOptionCellEditorBloc>().add(
-                      SelectOptionCellEditorEvent.unSelectOption(
-                        optionMap[optionName]!.id,
+              onRemove: (name) =>
+                  context.read<SelectOptionCellEditorBloc>().add(
+                        SelectOptionCellEditorEvent.unselectOption(
+                          optionMap[name]!.id,
+                        ),
                       ),
-                    );
-              },
             ),
           ),
         );
@@ -286,12 +289,9 @@ class _Title extends StatelessWidget {
   Widget build(BuildContext context) {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16.0),
-      child: SizedBox(
-        height: GridSize.popoverItemHeight,
-        child: FlowyText.regular(
-          LocaleKeys.grid_selectOption_panelTitle.tr(),
-          color: Theme.of(context).hintColor,
-        ),
+      child: FlowyText.regular(
+        LocaleKeys.grid_selectOption_panelTitle.tr(),
+        color: Theme.of(context).hintColor,
       ),
     );
   }
@@ -326,16 +326,27 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
       constraints: BoxConstraints.loose(const Size(200, 470)),
       mutex: widget.popoverMutex,
       clickHandler: PopoverClickHandler.gestureDetector,
+      popupBuilder: (popoverContext) => SelectOptionEditor(
+        key: ValueKey(widget.option.id),
+        option: widget.option,
+        onDeleted: () {
+          context
+              .read<SelectOptionCellEditorBloc>()
+              .add(SelectOptionCellEditorEvent.deleteOption(widget.option));
+          PopoverContainer.of(popoverContext).close();
+        },
+        onUpdated: (updatedOption) => context
+            .read<SelectOptionCellEditorBloc>()
+            .add(SelectOptionCellEditorEvent.updateOption(updatedOption)),
+      ),
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
         child: MouseRegion(
-          onEnter: (_) {
-            context.read<SelectOptionCellEditorBloc>().add(
-                  SelectOptionCellEditorEvent.updateFocusedOption(
-                    widget.option.id,
-                  ),
-                );
-          },
+          onEnter: (_) => context.read<SelectOptionCellEditorBloc>().add(
+                SelectOptionCellEditorEvent.updateFocusedOption(
+                  widget.option.id,
+                ),
+              ),
           child: Container(
             height: 28,
             decoration: BoxDecoration(
@@ -382,42 +393,16 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
           ),
         ),
       ),
-      popupBuilder: (BuildContext popoverContext) {
-        return SelectOptionEditor(
-          option: widget.option,
-          onDeleted: () {
-            context
-                .read<SelectOptionCellEditorBloc>()
-                .add(SelectOptionCellEditorEvent.deleteOption(widget.option));
-            PopoverContainer.of(popoverContext).close();
-          },
-          onUpdated: (updatedOption) {
-            context
-                .read<SelectOptionCellEditorBloc>()
-                .add(SelectOptionCellEditorEvent.updateOption(updatedOption));
-          },
-          key: ValueKey(
-            widget.option.id,
-          ), // Use ValueKey to refresh the UI, otherwise, it will remain the old value.
-        );
-      },
     );
   }
 
   void _onTap() {
     widget.popoverMutex.close();
-    if (context
-        .read<SelectOptionCellEditorBloc>()
-        .state
-        .selectedOptions
-        .contains(widget.option)) {
-      context
-          .read<SelectOptionCellEditorBloc>()
-          .add(SelectOptionCellEditorEvent.unSelectOption(widget.option.id));
+    final bloc = context.read<SelectOptionCellEditorBloc>();
+    if (bloc.state.selectedOptions.contains(widget.option)) {
+      bloc.add(SelectOptionCellEditorEvent.unselectOption(widget.option.id));
     } else {
-      context
-          .read<SelectOptionCellEditorBloc>()
-          .add(SelectOptionCellEditorEvent.selectOption(widget.option.id));
+      bloc.add(SelectOptionCellEditorEvent.selectOption(widget.option.id));
     }
   }
 }
@@ -472,13 +457,14 @@ class SelectOptionTagCell extends StatelessWidget {
               child: Align(
                 alignment: AlignmentDirectional.centerStart,
                 child: Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 6.0,
-                  ),
+                  padding: const EdgeInsets.symmetric(horizontal: 6.0),
                   child: SelectOptionTag(
+                    fontSize: 14,
                     option: option,
-                    padding:
-                        const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 8,
+                      vertical: 2,
+                    ),
                   ),
                 ),
               ),
@@ -492,16 +478,14 @@ class SelectOptionTagCell extends StatelessWidget {
 }
 
 class _CreateOptionCell extends StatelessWidget {
-  const _CreateOptionCell({
-    required this.suggestion,
-  });
+  const _CreateOptionCell({required this.suggestion});
 
   final CreateSelectOptionSuggestion suggestion;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 28,
+      height: 32,
       margin: const EdgeInsets.symmetric(horizontal: 8.0),
       padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
       decoration: BoxDecoration(
@@ -537,10 +521,10 @@ class _CreateOptionCell extends StatelessWidget {
                   child: SelectOptionTag(
                     name: suggestion.name,
                     color: suggestion.color.toColor(context),
-                    fontSize: 11,
+                    fontSize: 14,
                     padding: const EdgeInsets.symmetric(
                       horizontal: 8,
-                      vertical: 1,
+                      vertical: 2,
                     ),
                   ),
                 ),

frontend/appflowy_flutter/lib/plugins/database/widgets/database_view_widget.dart

@@ -1,9 +1,9 @@
-import 'package:flutter/material.dart';
-
+import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy/workspace/application/view/view_listener.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:flutter/material.dart';
 
 class DatabaseViewWidget extends StatefulWidget {
   const DatabaseViewWidget({
@@ -55,6 +55,9 @@ class _DatabaseViewWidgetState extends State<DatabaseViewWidget> {
       builder: (_, __, ___) => viewPlugin.widgetBuilder.buildWidget(
         shrinkWrap: widget.shrinkWrap,
         context: PluginContext(),
+        data: {
+          kDatabasePluginWidgetBuilderHorizontalPadding: 40.0,
+        },
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart

@@ -104,6 +104,7 @@ class DatabaseDocumentPluginWidgetBuilder extends PluginWidgetBuilder
   Widget buildWidget({
     required PluginContext context,
     required bool shrinkWrap,
+    Map<String, dynamic>? data,
   }) {
     return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
       builder: (_, state) => DatabaseDocumentPage(

frontend/appflowy_flutter/lib/plugins/document/application/document_service.dart

@@ -136,7 +136,7 @@ class DocumentService {
   }) async {
     final workspace = await FolderEventReadCurrentWorkspace().send();
     return workspace.fold((l) async {
-      final payload = UploadedFilePB(
+      final payload = DownloadFilePB(
         url: url,
       );
       final result = await DocumentEventDownloadFile(payload).send();