fix: minor ui issues (#4102)

* fix: minor ui issues

* feat: support using emoji as icon

* chore: update langauges

* fix: missing reminder bloc in detail page

* fix: integration test

.github/workflows/flutter_ci.yaml

@@ -23,7 +23,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
-  FLUTTER_VERSION: "3.10.4"
+  FLUTTER_VERSION: "3.13.9"
   RUST_TOOLCHAIN: "1.70"
   CARGO_MAKE_VERSION: "0.36.6"
 
@@ -108,21 +108,19 @@ jobs:
 
       - name: Build AppFlowy
         working-directory: frontend
-        run: |
-          cargo make --profile ${{ matrix.flutter_profile }} appflowy-core-dev
+        run: cargo make --profile ${{ matrix.flutter_profile }} appflowy-core-dev
 
       - name: Run code generation
         working-directory: frontend
-        run: |
-          cargo make code_generation
+        run: cargo make code_generation
 
       - name: Flutter Analyzer
         working-directory: frontend/appflowy_flutter
-        run: |
-          flutter analyze .
+        run: flutter analyze .
 
       - name: Compress appflowy_flutter
-        run: tar -czf appflowy_flutter.tar.gz frontend/appflowy_flutter
+        run: |
+          tar -czf appflowy_flutter.tar.gz frontend/appflowy_flutter
 
       - uses: actions/upload-artifact@v3
         with:
@@ -135,11 +133,11 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [macos-latest]
+        os: [ubuntu-latest]
         include:
-          - os: macos-latest
-            flutter_profile: development-mac-x86_64
-            target: x86_64-apple-darwin
+          - os: ubuntu-latest
+            flutter_profile: development-linux-x86_64
+            target: x86_64-unknown-linux-gnu
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -176,36 +174,63 @@ jobs:
       - name: Install prerequisites
         working-directory: frontend
         run: |
-          if [ "$RUNNER_OS" == "macOS" ]; then
-            cargo make appflowy-flutter-deps-tools
+          if [ "$RUNNER_OS" == "Linux" ]; then
+            sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
+            sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
+            sudo apt-get update
+            sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev
           fi
         shell: bash
 
+      - name: Enable Flutter Desktop
+        run: |
+          if [ "$RUNNER_OS" == "Linux" ]; then
+            flutter config --enable-linux-desktop
+          elif [ "$RUNNER_OS" == "macOS" ]; then
+            flutter config --enable-macos-desktop
+          elif [ "$RUNNER_OS" == "Windows" ]; then
+            git config --system core.longpaths true
+            flutter config --enable-windows-desktop
+          fi
+        shell: bash
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: ${{ github.run_id }}-${{ matrix.os }}
+
+      - name: Uncompress appflowy_flutter
+        run: tar -xf appflowy_flutter.tar.gz
+
+      - name: Run flutter pub get
+        working-directory: frontend
+        run: cargo make pub_get
+
       - name: Run Flutter unit tests
         working-directory: frontend
         run: |
           if [ "$RUNNER_OS" == "macOS" ]; then
-            flutter config --enable-macos-desktop
-            cargo make --profile ${{ matrix.flutter_profile }} appflowy-dev
             cargo make dart_unit_test
-          else
+          elif [ "$RUNNER_OS" == "Linux" ]; then
+            cargo make dart_unit_test_no_build
+          elif [ "$RUNNER_OS" == "Windows" ]; then
             cargo make dart_unit_test_no_build
           fi
         shell: bash
 
-      - name: Upload coverage to Codecov
-        uses: Wandalen/wretry.action@v1.0.36
-        with:
-          action: codecov/codecov-action@v3
-          with: |
-            name: appflowy
-            flags: appflowy_flutter_unit_test
-            fail_ci_if_error: true
-            verbose: true
-            os: ${{ matrix.os }}
-            token: ${{ secrets.CODECOV_TOKEN }}
-          attempt_limit: 20
-          attempt_delay: 10000
+      # disable coverage for now as it's not working
+      # - name: Upload coverage to Codecov
+      #   uses: Wandalen/wretry.action@v1.0.36
+      #   with:
+      #     action: codecov/codecov-action@v3
+      #     with: |
+      #       name: appflowy
+      #       flags: appflowy_flutter_unit_test
+      #       fail_ci_if_error: true
+      #       verbose: true
+      #       os: ${{ matrix.os }}
+      #       token: ${{ secrets.CODECOV_TOKEN }}
+      #     attempt_limit: 20
+      #     attempt_delay: 10000
 
   integration_test:
     needs: [prepare]
@@ -213,7 +238,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu-latest,windows-latest]
+        os: [ubuntu-latest, windows-latest]
         include:
           - os: ubuntu-latest
             flutter_profile: development-linux-x86_64
@@ -274,13 +299,12 @@ jobs:
         with:
           name: ${{ github.run_id }}-${{ matrix.os }}
 
-      - name: Uncompress appflowy_flutter
+      - name: Uncompressed appflowy_flutter
         run: tar -xf appflowy_flutter.tar.gz
 
-      - name: Run code generation
+      - name: Run flutter pub get
         working-directory: frontend
-        run: |
-          cargo make code_generation
+        run: cargo make pub_get
 
       - name: Run Flutter integration tests
         working-directory: frontend/appflowy_flutter
@@ -297,19 +321,101 @@ jobs:
           fi
         shell: bash
 
-      - name: Upload coverage to Codecov
-        uses: Wandalen/wretry.action@v1.0.36
+  cloud_integration_test:
+    needs: [prepare]
+#    if: github.event_name != 'pull_request'
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+        include:
+          - os: ubuntu-latest
+            flutter_profile: development-linux-x86_64
+            target: x86_64-unknown-linux-gnu
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - name: Checkout appflowy cloud code
+        uses: actions/checkout@v3
         with:
-          action: codecov/codecov-action@v3
-          with: |
-            name: appflowy
-            flags: appflowy_flutter_integrateion_test
-            fail_ci_if_error: true
-            verbose: true
-            os: ${{ matrix.os }}
-            token: ${{ secrets.CODECOV_TOKEN }}
-          attempt_limit: 20
-          attempt_delay: 10000
+          repository: AppFlowy-IO/AppFlowy-Cloud
+          path: AppFlowy-Cloud
+          depth: 1
+
+
+      - name: Prepare appflowy cloud env
+        working-directory: AppFlowy-Cloud
+        run: |
+          # log level
+          cp dev.env .env
+          sed -i 's|RUST_LOG=.*|RUST_LOG=trace|' .env
+          sed -i 's/GOTRUE_SMTP_USER=.*/GOTRUE_SMTP_USER=${{ secrets.INTEGRATION_TEST_GOTRUE_SMTP_USER }}/' .env
+          sed -i 's/GOTRUE_SMTP_PASS=.*/GOTRUE_SMTP_PASS=${{ secrets.INTEGRATION_TEST_GOTRUE_SMTP_PASS }}/' .env
+          sed -i 's/GOTRUE_SMTP_ADMIN_EMAIL=.*/GOTRUE_SMTP_ADMIN_EMAIL=${{ secrets.INTEGRATION_TEST_GOTRUE_SMTP_ADMIN_EMAIL }}/' .env
+          sed -i 's/GOTRUE_EXTERNAL_GOOGLE_ENABLED=.*/GOTRUE_EXTERNAL_GOOGLE_ENABLED=true/' .env
+          sed -i 's|API_EXTERNAL_URL=.*|API_EXTERNAL_URL=http://localhost|' .env
+          cat .env
+
+      - name: Run Docker-Compose
+        working-directory: AppFlowy-Cloud
+        run: |
+          docker compose up -d
+
+      - name: Checkout source code
+        uses: actions/checkout@v2
+
+      - name: Install flutter
+        id: flutter
+        uses: subosito/flutter-action@v2
+        with:
+          channel: "stable"
+          flutter-version: ${{ env.FLUTTER_VERSION }}
+
+      - uses: taiki-e/install-action@v2
+        with:
+          tool: cargo-make@${{ env.CARGO_MAKE_VERSION }}
+
+      - name: Install prerequisites
+        working-directory: frontend
+        run: |
+          sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
+          sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
+          sudo apt-get update
+          sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev
+        shell: bash
+
+      - name: Enable Flutter Desktop
+        run: |
+          flutter config --enable-linux-desktop
+        shell: bash
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: ${{ github.run_id }}-${{ matrix.os }}
+
+      - name: Uncompressed appflowy_flutter
+        run: |
+          tar -xf appflowy_flutter.tar.gz
+          ls -al
+
+      - name: Enable localhost env
+        working-directory: frontend/appflowy_flutter
+        run: |
+          echo 'APPFLOWY_CLOUD_URL=http://localhost' >> .env
+          dart run build_runner clean && dart run build_runner build --delete-conflicting-outputs
+
+      - name: Run flutter pub get
+        working-directory: frontend
+        run: cargo make pub_get
+
+      - name: Run Flutter integration tests
+        working-directory: frontend/appflowy_flutter
+        run: |
+          export DISPLAY=:99
+          sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 &
+          sudo apt-get install network-manager
+          flutter test integration_test/cloud_runner.dart -d Linux --coverage
+        shell: bash
 
   build:
     needs: [prepare]
@@ -381,15 +487,9 @@ jobs:
         with:
           name: ${{ github.run_id }}-${{ matrix.os }}
 
-      - name: Uncompress appflowy_flutter
+      - name: Uncompressed appflowy_flutter
         run: tar -xf appflowy_flutter.tar.gz
 
-      - name: Run code generation
-        if: matrix.os == 'windows-latest'
-        working-directory: frontend
-        run: |
-          cargo make code_generation
-
       - name: Build flutter product
         working-directory: frontend
         run: |

.github/workflows/mobile_ci.yaml

@@ -18,7 +18,7 @@ on:
       - "!frontend/appflowy_tauri/**"
 
 env:
-  FLUTTER_VERSION: "3.10.1"
+  FLUTTER_VERSION: "3.13.9"
   RUST_TOOLCHAIN: "1.70"
 
 concurrency:

.github/workflows/release.yml

@@ -6,7 +6,7 @@ on:
       - "*"
 
 env:
-  FLUTTER_VERSION: "3.10.1"
+  FLUTTER_VERSION: "3.13.9"
   RUST_TOOLCHAIN: "1.70"
 
 jobs:
@@ -59,7 +59,6 @@ jobs:
         with:
           channel: "stable"
           flutter-version: ${{ env.FLUTTER_VERSION }}
-          cache: true
 
       - name: Install Rust toolchain
         uses: actions-rs/toolchain@v1
@@ -70,11 +69,6 @@ jobs:
           components: rustfmt
           profile: minimal
 
-      - uses: Swatinem/rust-cache@v2
-        with:
-          prefix-key: appflowy-lib-cache
-          key: ${{ matrix.job.os }}-${{ matrix.job.target }}
-
       - name: Install prerequisites
         working-directory: frontend
         run: |
@@ -151,7 +145,6 @@ jobs:
         with:
           channel: "stable"
           flutter-version: ${{ env.FLUTTER_VERSION }}
-          cache: true
 
       - name: Install Rust toolchain
         uses: actions-rs/toolchain@v1
@@ -162,11 +155,6 @@ jobs:
           components: rustfmt
           profile: minimal
 
-      - uses: Swatinem/rust-cache@v2
-        with:
-          prefix-key: appflowy-lib-cache
-          key: ${{ matrix.job.os }}-${{ matrix.job.target }}
-
       - name: Install prerequisites
         working-directory: frontend
         run: |
@@ -257,7 +245,6 @@ jobs:
         with:
           channel: "stable"
           flutter-version: ${{ env.FLUTTER_VERSION }}
-          cache: true
 
       - name: Install Rust toolchain
         uses: dtolnay/rust-toolchain@stable
@@ -266,11 +253,6 @@ jobs:
           targets: ${{ matrix.job.targets }}
           components: rustfmt
 
-      - uses: Swatinem/rust-cache@v2
-        with:
-          prefix-key: appflowy-lib-cache
-          key: ${{ matrix.job.os }}-${{ matrix.job.target }}
-
       - name: Install prerequisites
         working-directory: frontend
         run: |
@@ -366,7 +348,6 @@ jobs:
         with:
           channel: "stable"
           flutter-version: ${{ env.FLUTTER_VERSION }}
-          cache: true
 
       - name: Install Rust toolchain
         uses: actions-rs/toolchain@v1
@@ -377,11 +358,6 @@ jobs:
           components: rustfmt
           profile: minimal
 
-      - uses: Swatinem/rust-cache@v2
-        with:
-          prefix-key: appflowy-lib-cache
-          key: ${{ matrix.job.os }}-${{ matrix.job.target }}
-
       - name: Install prerequisites
         working-directory: frontend
         run: |

.github/workflows/rust_coverage.yml

@@ -11,7 +11,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
-  FLUTTER_VERSION: "3.10.1"
+  FLUTTER_VERSION: "3.13.9"
   RUST_TOOLCHAIN: "1.70"
 
 jobs:

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Release Notes
 
+## Version 0.3.8 - 11/13/2023
+
+### New Features
+- Support hiding any stack in a board
+- Support customizing page icons in menu
+- Display visual hint when card contains notes
+- Quick action for adding new stack to a board
+- Support more ways of inserting page references in documents
+- Shift + click on a checkbox to power toggle its children
+
+### Bug fixes
+- Improved color of the "Share"-button text
+- Text overflow issue in Calendar properties
+- Default font (Roboto) added to application
+- Placeholder added for the editor inside a Card
+- Toggle notifications in settings have been fixed
+- Dialog for linking board/grid/calendar opens in correct position
+- Quick add Card in Board at top, correctly adds a new Card at the top
+
 ## Version 0.3.7 - 10/30/2023
 
 ### New Features

frontend/.vscode/launch.json

@@ -25,7 +25,7 @@
             "preLaunchTask": "AF: Build Appflowy Core",
             "env": {
                 "RUST_LOG": "trace",
-                "RUST_BACKTRACE": 1
+                "RUST_BACKTRACE": "1"
             },
             "cwd": "${workspaceRoot}/appflowy_flutter"
         },
@@ -44,6 +44,17 @@
             },
             "cwd": "${workspaceRoot}/appflowy_flutter"
         },
+        {
+            "name": "AF-iOS: Build All",
+            "request": "launch",
+            "program": "./lib/main.dart",
+            "type": "dart",
+            "preLaunchTask": "AF: Build Appflowy Core For iOS",
+            "env": {
+                "RUST_LOG": "trace"
+            },
+            "cwd": "${workspaceRoot}/appflowy_flutter"
+        },
         {
             "name": "AF-iOS: Clean + Rebuild All",
             "request": "launch",
@@ -55,6 +66,27 @@
             },
             "cwd": "${workspaceRoot}/appflowy_flutter"
         },
+        {
+            "name": "AF-iOS-Simulator: Build Dart only",
+            "request": "launch",
+            "program": "./lib/main.dart",
+            "type": "dart",
+            "env": {
+                "RUST_LOG": "trace"
+            },
+            "cwd": "${workspaceRoot}/appflowy_flutter"
+        },
+        {
+            "name": "AF-iOS-Simulator: Build All",
+            "request": "launch",
+            "program": "./lib/main.dart",
+            "type": "dart",
+            "preLaunchTask": "AF: Build Appflowy Core For iOS Simulator",
+            "env": {
+                "RUST_LOG": "trace"
+            },
+            "cwd": "${workspaceRoot}/appflowy_flutter"
+        },
         {
             "name": "AF-iOS-Simulator: Clean + Rebuild All",
             "request": "launch",
@@ -66,6 +98,17 @@
             },
             "cwd": "${workspaceRoot}/appflowy_flutter"
         },
+        {
+            "name": "AF-Android: Build All",
+            "request": "launch",
+            "program": "./lib/main.dart",
+            "type": "dart",
+            "preLaunchTask": "AF: Build Appflowy Core For Android",
+            "env": {
+                "RUST_LOG": "trace"
+            },
+            "cwd": "${workspaceRoot}/appflowy_flutter"
+        },
         {
             "name": "AF-Android: Clean + Rebuild All",
             "request": "launch",

frontend/.vscode/tasks.json

@@ -14,7 +14,6 @@
       "type": "shell",
       "dependsOrder": "sequence",
       "dependsOn": [
-        "AF: Dart Clean",
         "AF: Flutter Clean",
         "AF: Build Appflowy Core",
         "AF: Flutter Pub Get",
@@ -33,7 +32,6 @@
       "type": "shell",
       "dependsOrder": "sequence",
       "dependsOn": [
-        "AF: Dart Clean",
         "AF: Flutter Clean",
         "AF: Build Appflowy Core For iOS",
         "AF: Flutter Pub Get",
@@ -52,7 +50,6 @@
       "type": "shell",
       "dependsOrder": "sequence",
       "dependsOn": [
-        "AF: Dart Clean",
         "AF: Flutter Clean",
         "AF: Build Appflowy Core For iOS Simulator",
         "AF: Flutter Pub Get",
@@ -89,7 +86,6 @@
       "type": "shell",
       "dependsOrder": "sequence",
       "dependsOn": [
-        "AF: Dart Clean",
         "AF: Flutter Clean",
         "AF: Build Appflowy Core For Android",
         "AF: Flutter Pub Get",
@@ -309,18 +305,10 @@
     {
       "label": "AF: Generate Env File",
       "type": "shell",
-      "command": "dart run build_runner clean && dart run build_runner build --delete-conflicting-outputs ",
+      "command": "dart run build_runner clean && dart run build_runner build --delete-conflicting-outputs",
       "options": {
         "cwd": "${workspaceFolder}/appflowy_flutter"
       }
     },
-    {
-      "label": "AF: Generate AppFlowyEnv",
-      "type": "shell",
-      "command": "dart run build_runner build --delete-conflicting-outputs",
-      "options": {
-        "cwd": "${workspaceFolder}/appflowy_flutter/packages/appflowy_backend"
-      }
-    }
   ]
 }

frontend/Makefile.toml

@@ -25,9 +25,10 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CRATE_FS_NAME = "dart_ffi"
 CARGO_MAKE_CRATE_NAME = "dart-ffi"
 LIB_NAME = "dart_ffi"
-CURRENT_APP_VERSION = "0.3.7"
+CURRENT_APP_VERSION = "0.3.9"
 FLUTTER_DESKTOP_FEATURES = "dart,rev-sqlite"
 PRODUCT_NAME = "AppFlowy"
+MACOSX_DEPLOYMENT_TARGET = "11.0"
 # CRATE_TYPE: https://doc.rust-lang.org/reference/linkage.html
 # If you update the macOS's CRATE_TYPE, don't forget to update the
 # appflowy_backend.podspec

frontend/appflowy_flutter/README.md

@@ -1,7 +1,7 @@
 <h1 align="center" style="margin:0"> AppFlowy_Flutter</h1>
 <div align="center">
-  <img src="https://img.shields.io/badge/Flutter-v3.10.1-blue"/>
-  <img src="https://img.shields.io/badge/Rust-v1.65-orange"/>
+  <img src="https://img.shields.io/badge/Flutter-v3.13.19-blue"/>
+  <img src="https://img.shields.io/badge/Rust-v1.70-orange"/>
 </div>
 
 > Documentation for Contributors

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

@@ -3,7 +3,7 @@
     android:name="${applicationName}">
     <activity android:name=".MainActivity"
       android:exported="true"
-      android:launchMode="singleTop"
+      android:launchMode="singleInstance"
       android:theme="@style/LaunchTheme"
       android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
       android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
@@ -45,4 +45,6 @@
 		-->
     <meta-data android:name="flutterEmbedding" android:value="2" />
   </application>
+  <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 </manifest>

frontend/appflowy_flutter/android/app/src/main/Classes/binding.h

@@ -3,7 +3,7 @@
 #include <stdint.h>
 #include <stdlib.h>
 
-int64_t init_sdk(char *path);
+int64_t init_sdk(char *data);
 
 void async_event(int64_t port, const uint8_t *input, uintptr_t len);
 

frontend/appflowy_flutter/assets/google_fonts/Roboto_Mono/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

frontend/appflowy_flutter/dev.env

@@ -1,23 +1 @@
-# Initial Setup
-# 1. Copy the dev.env file to .env:
-# cp dev.env .env 
-# 2. Alternatively, you can generate the .env file using the "Generate Env File" task in VSCode.
-
-# Configuring Cloud Type
-# This configuration file is used to specify the cloud type and the necessary configurations for each cloud type. The available options are:
-# Local: 0
-# Supabase: 1
-# AppFlowy Cloud: 2
-
-CLOUD_TYPE=0
-
-# Supabase Configuration
-# If you're using Supabase (CLOUD_TYPE=1), you need to provide the following configurations:
-SUPABASE_URL=replace-with-your-supabase-url
-SUPABASE_ANON_KEY=replace-with-your-supabase-key
-
-# AppFlowy Cloud Configuration
-# If you're using AppFlowy Cloud (CLOUD_TYPE=2), you need to provide the following configurations:
-APPFLOWY_CLOUD_BASE_URL=replace-with-your-appflowy-cloud-url
-APPFLOWY_CLOUD_WS_BASE_URL=replace-with-your-appflowy-cloud-ws-url
-APPFLOWY_CLOUD_GOTRUE_URL=replace-with-your-appflowy-cloud-gotrue-url
+APPFLOWY_CLOUD_URL=

frontend/appflowy_flutter/env.cloud.test

@@ -0,0 +1,5 @@
+
+SUPABASE_URL=
+SUPABASE_ANON_KEY=
+
+APPFLOWY_CLOUD_URL=

frontend/appflowy_flutter/integration_test/appearance_settings_test.dart

@@ -4,6 +4,7 @@ import 'package:appflowy/workspace/presentation/settings/widgets/settings_appear
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
+
 import 'util/util.dart';
 
 void main() {

frontend/appflowy_flutter/integration_test/auth/appflowy_cloud_auth_test.dart

@@ -0,0 +1,133 @@
+// ignore_for_file: unused_import
+
+import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/auth/af_cloud_mock_auth_service.dart';
+import 'package:appflowy/user/application/auth/auth_service.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/uuid.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:path/path.dart' as p;
+import 'package:integration_test/integration_test.dart';
+import '../util/mock/mock_file_picker.dart';
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('appflowy cloud auth', () {
+    testWidgets('sign in', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloud,
+      );
+      await tester.tapGoogleLoginInButton();
+      tester.expectToSeeHomePage();
+    });
+
+    testWidgets('sign out', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloud,
+      );
+      await tester.tapGoogleLoginInButton();
+
+      // Open the setting page and sign out
+      await tester.openSettings();
+      await tester.openSettingsPage(SettingsPage.user);
+      await tester.tapButton(find.byType(SettingLogoutButton));
+
+      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));
+      tester.expectToSeeGoogleLoginButton();
+    });
+
+    testWidgets('sign in as annoymous', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloud,
+      );
+      await tester.tapSignInAsGuest();
+
+      // should not see the sync setting page when sign in as annoymous
+      await tester.openSettings();
+      await tester.openSettingsPage(SettingsPage.user);
+      tester.expectToSeeGoogleLoginButton();
+    });
+
+    testWidgets('enable sync', (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloud,
+      );
+
+      await tester.tapGoogleLoginInButton();
+      // Open the setting page and sign out
+      await tester.openSettings();
+      await tester.openSettingsPage(SettingsPage.cloud);
+
+      // the switch should be on by default
+      tester.assertAppFlowyCloudEnableSyncSwitchValue(true);
+      await tester.toggleEnableSync(AppFlowyCloudEnableSync);
+
+      // the switch should be off
+      tester.assertAppFlowyCloudEnableSyncSwitchValue(false);
+
+      // the switch should be on after toggling
+      await tester.toggleEnableSync(AppFlowyCloudEnableSync);
+      tester.assertAppFlowyCloudEnableSyncSwitchValue(true);
+    });
+
+    // testWidgets('custom folder sign in', (tester) async {
+    //   const userA = 'UserA';
+    //   final userAEmail = "${uuid()}@appflowy.io";
+    //   final initialPath = p.join(userA, appFlowyDataFolder);
+    //   final context = await tester.initializeAppFlowy(
+    //     cloudType: AuthenticatorType.appflowyCloud,
+    //     pathExtension: initialPath,
+    //   );
+    //   getIt.registerFactory<AuthService>(
+    //     () => AppFlowyCloudMockAuthService(
+    //       email: userAEmail,
+    //     ),
+    //   );
+    //   // remove the last extension
+    //   final rootPath = context.applicationDataDirectory.replaceFirst(
+    //     initialPath,
+    //     '',
+    //   );
+    //   await tester.tapGoogleLoginInButton();
+
+    //   // Open the setting page and sign out
+    //   await tester.openSettings();
+    //   await tester.openSettingsPage(SettingsPage.user);
+    //   await tester.enterUserName(userA);
+
+    //   await tester.openSettingsPage(SettingsPage.files);
+    //   await tester.pumpAndSettle();
+
+    //   // mock the file_picker result
+    //   await mockGetDirectoryPath(
+    //     p.join(rootPath, "random_folder"),
+    //   );
+
+    //   // after selecting the folder, an annoymous user should be signed in
+    //   await tester.tapCustomLocationButton();
+    //   tester.expectToSeeHomePage();
+    //   await tester.pumpAndSettle();
+
+    //   // Login as userA in custom folder
+    //   await tester.openSettings();
+    //   await tester.openSettingsPage(SettingsPage.user);
+    //   await tester.tapGoogleLoginInButton();
+
+    //   await tester.pumpAndSettle(const Duration(seconds: 1));
+    //   tester.expectToSeeHomePage();
+    //   // UserA should be displayed
+    //   tester.expectToSeeUserName(userA);
+    // });
+  });
+}

frontend/appflowy_flutter/integration_test/auth/supabase_auth_test.dart

@@ -1,5 +1,7 @@
+import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/setting_supabase_cloud.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -9,15 +11,15 @@ import '../util/util.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('auth', () {
+  group('supabase auth', () {
     testWidgets('sign in with supabase', (tester) async {
-      await tester.initializeAppFlowy();
+      await tester.initializeAppFlowy(cloudType: AuthenticatorType.supabase);
       await tester.tapGoogleLoginInButton();
       tester.expectToSeeHomePage();
     });
 
     testWidgets('sign out with supabase', (tester) async {
-      await tester.initializeAppFlowy();
+      await tester.initializeAppFlowy(cloudType: AuthenticatorType.supabase);
       await tester.tapGoogleLoginInButton();
 
       // Open the setting page and sign out
@@ -34,52 +36,53 @@ void main() {
     });
 
     testWidgets('sign in as annoymous', (tester) async {
-      await tester.initializeAppFlowy();
+      await tester.initializeAppFlowy(cloudType: AuthenticatorType.supabase);
       await tester.tapSignInAsGuest();
 
       // should not see the sync setting page when sign in as annoymous
       await tester.openSettings();
-      await tester.expectNoSettingsPage(SettingsPage.syncSetting);
+      await tester.openSettingsPage(SettingsPage.user);
+      tester.expectToSeeGoogleLoginButton();
     });
 
-    testWidgets('enable encryption', (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapGoogleLoginInButton();
+    // testWidgets('enable encryption', (tester) async {
+    //   await tester.initializeAppFlowy(cloudType: CloudType.supabase);
+    //   await tester.tapGoogleLoginInButton();
 
-      // Open the setting page and sign out
-      await tester.openSettings();
-      await tester.openSettingsPage(SettingsPage.syncSetting);
+    //   // Open the setting page and sign out
+    //   await tester.openSettings();
+    //   await tester.openSettingsPage(SettingsPage.cloud);
 
-      // the switch should be off by default
-      tester.assertEnableEncryptSwitchValue(false);
-      await tester.toggleEnableEncrypt();
+    //   // the switch should be off by default
+    //   tester.assertEnableEncryptSwitchValue(false);
+    //   await tester.toggleEnableEncrypt();
 
-      // the switch should be on after toggling
-      tester.assertEnableEncryptSwitchValue(true);
+    //   // the switch should be on after toggling
+    //   tester.assertEnableEncryptSwitchValue(true);
 
-      // the switch can not be toggled back to off
-      await tester.toggleEnableEncrypt();
-      tester.assertEnableEncryptSwitchValue(true);
-    });
+    //   // the switch can not be toggled back to off
+    //   await tester.toggleEnableEncrypt();
+    //   tester.assertEnableEncryptSwitchValue(true);
+    // });
 
     testWidgets('enable sync', (tester) async {
-      await tester.initializeAppFlowy();
+      await tester.initializeAppFlowy(cloudType: AuthenticatorType.supabase);
       await tester.tapGoogleLoginInButton();
 
       // Open the setting page and sign out
       await tester.openSettings();
-      await tester.openSettingsPage(SettingsPage.syncSetting);
+      await tester.openSettingsPage(SettingsPage.cloud);
 
       // the switch should be on by default
-      tester.assertEnableSyncSwitchValue(true);
-      await tester.toggleEnableSync();
+      tester.assertSupabaseEnableSyncSwitchValue(true);
+      await tester.toggleEnableSync(SupabaseEnableSync);
 
       // the switch should be off
-      tester.assertEnableSyncSwitchValue(false);
+      tester.assertSupabaseEnableSyncSwitchValue(false);
 
       // the switch should be on after toggling
-      await tester.toggleEnableSync();
-      tester.assertEnableSyncSwitchValue(true);
+      await tester.toggleEnableSync(SupabaseEnableSync);
+      tester.assertSupabaseEnableSyncSwitchValue(true);
     });
   });
 }

frontend/appflowy_flutter/integration_test/board/board_add_row_test.dart

@@ -1,4 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/plugins/database_view/board/presentation/widgets/board_column_header.dart';
+import 'package:appflowy/plugins/database_view/widgets/card/container/card_container.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -14,8 +16,8 @@ const defaultLastCardName = 'Card 3';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('board add row test', () {
-    testWidgets('Add card from header', (tester) async {
+  group('board add row test:', () {
+    testWidgets('from header', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -32,17 +34,19 @@ void main() {
       await tester.tap(
         find
             .descendant(
-              of: find.byType(AppFlowyGroupHeader),
-              matching: find.byType(FlowySvg),
+              of: find.byType(BoardColumnHeader),
+              matching: find.byWidgetPredicate(
+                (widget) => widget is FlowySvg && widget.svg == FlowySvgs.add_s,
+              ),
             )
-            .first,
+            .at(1),
       );
       await tester.pumpAndSettle();
 
       const newCardName = 'Card 4';
       await tester.enterText(
         find.descendant(
-          of: find.byType(IntrinsicHeight),
+          of: find.byType(RowCardContainer),
           matching: find.byType(TextField),
         ),
         newCardName,
@@ -56,7 +60,7 @@ void main() {
       expect(firstCardText.text, newCardName);
     });
 
-    testWidgets('Add card from footer', (tester) async {
+    testWidgets('from footer', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -77,14 +81,14 @@ void main() {
               of: find.byType(AppFlowyGroupFooter),
               matching: find.byType(FlowySvg),
             )
-            .first,
+            .at(1),
       );
       await tester.pumpAndSettle();
 
       const newCardName = 'Card 4';
       await tester.enterText(
         find.descendant(
-          of: find.byType(IntrinsicHeight),
+          of: find.byType(RowCardContainer),
           matching: find.byType(TextField),
         ),
         newCardName,

frontend/appflowy_flutter/integration_test/board/board_group_test.dart

@@ -0,0 +1,50 @@
+import 'package:appflowy/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/row_property.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.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:appflowy_board/appflowy_board.dart';
+
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('board group test', () {
+    testWidgets('move row to another group', (tester) async {
+      const card1Name = 'Card 1';
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.createNewPageWithName(layout: ViewLayoutPB.Board);
+      final card1 = find.ancestor(
+        of: find.findTextInFlowyText(card1Name), 
+        matching: find.byType(AppFlowyGroupCard),
+      );
+      final doingGroup = find.findTextInFlowyText('Doing');
+      final doingGroupCenter = tester.getCenter(doingGroup);
+      final card1Center = tester.getCenter(card1);
+
+      await tester.timedDrag(
+        card1, 
+        doingGroupCenter.translate(-card1Center.dx, -card1Center.dy),
+        const Duration(seconds: 1),
+      );
+      await tester.pumpAndSettle();
+      await tester.tap(card1);
+      await tester.pumpAndSettle();
+
+      final card1StatusFinder = find.descendant(
+        of: find.byType(RowPropertyList), 
+        matching: find.descendant(
+          of: find.byType(SelectOptionTag), 
+          matching: find.byType(FlowyText),
+        ),
+      );
+      expect(card1StatusFinder, findsNWidgets(1));
+      final card1StatusText = tester.widget<FlowyText>(card1StatusFinder).text;
+      expect(card1StatusText, 'Doing');
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/board/board_hide_groups_test.dart

@@ -0,0 +1,141 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/plugins/database_view/board/presentation/widgets/board_column_header.dart';
+import 'package:appflowy/plugins/database_view/board/presentation/widgets/board_hidden_groups.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.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 '../util/database_test_op.dart';
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('board group options:', () {
+    testWidgets('expand/collapse hidden groups', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+      await tester.createNewPageWithName(layout: ViewLayoutPB.Board);
+
+      final collapseFinder = find.byFlowySvg(FlowySvgs.pull_left_outlined_s);
+      final expandFinder = find.byFlowySvg(FlowySvgs.hamburger_s_s);
+
+      // Is expanded by default
+      expect(collapseFinder, findsOneWidget);
+      expect(expandFinder, findsNothing);
+
+      // Collapse hidden groups
+      await tester.tap(collapseFinder);
+      await tester.pumpAndSettle();
+
+      // Is collapsed
+      expect(collapseFinder, findsNothing);
+      expect(expandFinder, findsOneWidget);
+
+      // Expand hidden groups
+      await tester.tap(expandFinder);
+      await tester.pumpAndSettle();
+
+      // Is expanded
+      expect(collapseFinder, findsOneWidget);
+      expect(expandFinder, findsNothing);
+    });
+
+    testWidgets('hide first group, and show it again', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+      await tester.createNewPageWithName(layout: ViewLayoutPB.Board);
+
+      // Tap the options of the first group
+      final optionsFinder = find
+          .descendant(
+            of: find.byType(BoardColumnHeader),
+            matching: find.byFlowySvg(FlowySvgs.details_horizontal_s),
+          )
+          .first;
+
+      await tester.tap(optionsFinder);
+      await tester.pumpAndSettle();
+
+      // Tap the hide option
+      await tester.tap(find.byFlowySvg(FlowySvgs.hide_s));
+      await tester.pumpAndSettle();
+
+      int shownGroups =
+          tester.widgetList(find.byType(BoardColumnHeader)).length;
+
+      // We still show Doing, Done, No Status
+      expect(shownGroups, 3);
+
+      final hiddenCardFinder = find.byType(HiddenGroupCard);
+      await tester.hoverOnWidget(hiddenCardFinder);
+      await tester.tap(find.byFlowySvg(FlowySvgs.show_m));
+      await tester.pumpAndSettle();
+
+      shownGroups = tester.widgetList(find.byType(BoardColumnHeader)).length;
+      expect(shownGroups, 4);
+    });
+  });
+
+  testWidgets('delete a group', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapGoButton();
+    await tester.createNewPageWithName(layout: ViewLayoutPB.Board);
+
+    expect(tester.widgetList(find.byType(BoardColumnHeader)).length, 4);
+
+    // tap group option button for the first group. Delete shouldn't show up
+    await tester.tapButton(
+      find
+          .descendant(
+            of: find.byType(BoardColumnHeader),
+            matching: find.byFlowySvg(FlowySvgs.details_horizontal_s),
+          )
+          .first,
+    );
+    expect(find.byFlowySvg(FlowySvgs.delete_s), findsNothing);
+
+    // dismiss the popup
+    await tester.sendKeyEvent(LogicalKeyboardKey.escape);
+    await tester.pumpAndSettle();
+
+    // tap group option button for the first group. Delete should show up
+    await tester.tapButton(
+      find
+          .descendant(
+            of: find.byType(BoardColumnHeader),
+            matching: find.byFlowySvg(FlowySvgs.details_horizontal_s),
+          )
+          .at(1),
+    );
+    expect(find.byFlowySvg(FlowySvgs.delete_s), findsOneWidget);
+
+    // Tap the delete button and confirm
+    await tester.tapButton(find.byFlowySvg(FlowySvgs.delete_s));
+    await tester.tapDialogOkButton();
+
+    // Expect number of groups to decrease by one
+    expect(tester.widgetList(find.byType(BoardColumnHeader)).length, 3);
+  });
+}
+
+extension FlowySvgFinder on CommonFinders {
+  Finder byFlowySvg(FlowySvgData svg) => _FlowySvgFinder(svg);
+}
+
+class _FlowySvgFinder extends MatchFinder {
+  _FlowySvgFinder(this.svg);
+
+  final FlowySvgData svg;
+
+  @override
+  String get description => 'flowy_svg "$svg"';
+
+  @override
+  bool matches(Element candidate) {
+    final Widget widget = candidate.widget;
+    return widget is FlowySvg && widget.svg == svg;
+  }
+}

frontend/appflowy_flutter/integration_test/board/board_row_test.dart

@@ -1,11 +1,14 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/widgets/card/card.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:appflowy_board/appflowy_board.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
 import '../util/util.dart';
+import '../util/database_test_op.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -46,5 +49,56 @@ void main() {
       await tester.tapButtonWithName(LocaleKeys.button_duplicate.tr());
       expect(find.textContaining(name, findRichText: true), findsNWidgets(2));
     });
+
+    testWidgets('add new group', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+      await tester.createNewPageWithName(layout: ViewLayoutPB.Board);
+
+      // assert number of groups
+      tester.assertNumberOfGroups(4);
+
+      // scroll the board horizontally to ensure add new group button appears
+      await tester.scrollBoardToEnd();
+
+      // assert and click on add new group button
+      tester.assertNewGroupTextField(false);
+      await tester.tapNewGroupButton();
+      tester.assertNewGroupTextField(true);
+
+      // enter new group name and submit
+      await tester.enterNewGroupName('needs design', submit: true);
+
+      // assert number of groups has increased
+      tester.assertNumberOfGroups(5);
+
+      // assert text field has disappeared
+      await tester.scrollBoardToEnd();
+      tester.assertNewGroupTextField(false);
+
+      // click on add new group button
+      await tester.tapNewGroupButton();
+      tester.assertNewGroupTextField(true);
+
+      // type some things
+      await tester.enterNewGroupName('needs planning', submit: false);
+
+      // click on clear button and assert empty contents
+      await tester.clearNewGroupTextField();
+
+      // press escape to cancel
+      await tester.sendKeyEvent(LogicalKeyboardKey.escape);
+      await tester.pumpAndSettle();
+      tester.assertNewGroupTextField(false);
+
+      // click on add new group button
+      await tester.tapNewGroupButton();
+      tester.assertNewGroupTextField(true);
+
+      // press elsewhere to cancel
+      await tester.tap(find.byType(AppFlowyBoard));
+      await tester.pumpAndSettle();
+      tester.assertNewGroupTextField(false);
+    });
   });
 }

frontend/appflowy_flutter/integration_test/board/board_test_runner.dart

@@ -2,6 +2,7 @@ import 'package:integration_test/integration_test.dart';
 
 import 'board_row_test.dart' as board_row_test;
 import 'board_add_row_test.dart' as board_add_row_test;
+import 'board_group_test.dart' as board_group_test;
 
 void startTesting() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -9,4 +10,5 @@ void startTesting() {
   // Board integration tests
   board_row_test.main();
   board_add_row_test.main();
+  board_group_test.main();
 }

frontend/appflowy_flutter/integration_test/cloud_runner.dart

@@ -0,0 +1,13 @@
+import 'package:integration_test/integration_test.dart';
+
+import 'auth/appflowy_cloud_auth_test.dart' as appflowy_cloud_auth_test;
+import 'empty_test.dart' as first_test;
+
+Future<void> main() async {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  // This test must be run first, otherwise the CI will fail.
+  first_test.main();
+
+  appflowy_cloud_auth_test.main();
+}

frontend/appflowy_flutter/integration_test/database/database_calendar_test.dart

@@ -3,8 +3,8 @@ import 'package:appflowy_backend/protobuf/flowy-folder2/view.pbenum.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
-import 'util/util.dart';
+import '../util/database_test_op.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -74,10 +74,10 @@ void main() {
       await tester.scrollToToday();
 
       // Hover over today's calendar cell
-      await tester.hoverOnTodayCalendarCell();
-
-      // Tap on create new event button
-      await tester.tapAddCalendarEventButton();
+      await tester.hoverOnTodayCalendarCell(
+        // Tap on create new event button
+        onHover: () async => await tester.tapAddCalendarEventButton(),
+      );
 
       // Make sure that the event editor popup is shown
       tester.assertEventEditorOpen();
@@ -90,15 +90,9 @@ void main() {
       // Double click on today's calendar cell to create a new event
       await tester.doubleClickCalendarCell(DateTime.now());
 
-      // Make sure that the event editor popup is shown
-      tester.assertEventEditorOpen();
-
       // Make sure that the event is inserted in the cell
       tester.assertNumberOfEventsInCalendar(2);
 
-      // Dismiss the event editor popup
-      await tester.dismissEventEditor();
-
       // Click on the event
       await tester.openCalendarEvent(index: 0);
       tester.assertEventEditorOpen();
@@ -112,7 +106,7 @@ void main() {
       tester.assertNumberOfEventsOnSpecificDay(2, DateTime.now());
 
       // Click on the event
-      await tester.openCalendarEvent(index: 1);
+      await tester.openCalendarEvent(index: 0);
       tester.assertEventEditorOpen();
 
       // Click on the open icon
@@ -137,7 +131,7 @@ void main() {
       tester.assertNumberOfEventsOnSpecificDay(2, DateTime.now());
 
       // Delete event from row detail page
-      await tester.openCalendarEvent(index: 1);
+      await tester.openCalendarEvent(index: 0);
       await tester.openEventToRowDetailPage();
       tester.assertRowDetailPageOpened();
 
@@ -163,7 +157,7 @@ void main() {
       await tester.dismissEventEditor();
 
       // Drag and drop the event onto the next week, same day
-      await tester.dragDropRescheduleCalendarEvent(firstOfThisMonth);
+      await tester.dragDropRescheduleCalendarEvent();
 
       // Make sure that the event has been rescheduled to the new date
       final sameDayNextWeek = firstOfThisMonth.add(const Duration(days: 7));

frontend/appflowy_flutter/integration_test/database/database_cell_test.dart

@@ -4,14 +4,14 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:intl/intl.dart';
 
-import 'util/database_test_op.dart';
-import 'util/util.dart';
+import '../util/database_test_op.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('grid cell', () {
-    testWidgets('edit text cell', (tester) async {
+  group('edit grid cell:', () {
+    testWidgets('text', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -32,9 +32,9 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    // Makesure the text cells are filled with the right content when there are
+    // Make sure the text cells are filled with the right content when there are
     // multiple text cell
-    testWidgets('edit multiple text cells', (tester) async {
+    testWidgets('multiple text cells', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
       await tester.createNewPageWithName(
@@ -73,7 +73,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('edit number cell', (tester) async {
+    testWidgets('number', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -131,7 +131,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('edit checkbox cell', (tester) async {
+    testWidgets('checkbox', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -149,7 +149,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('edit create time cell', (tester) async {
+    testWidgets('created time', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -167,7 +167,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('edit last time cell', (tester) async {
+    testWidgets('last modified time', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -185,7 +185,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('edit date time cell', (tester) async {
+    testWidgets('date time', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -275,7 +275,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('edit single select cell', (tester) async {
+    testWidgets('single select', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
@@ -347,7 +347,7 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('edit multi select cell', (tester) async {
+    testWidgets('multi select', (tester) async {
       final tags = [
         'tag 1',
         'tag 2',
@@ -436,107 +436,107 @@ void main() {
 
       await tester.pumpAndSettle();
     });
-  });
 
-  testWidgets('edit checklist cell', (tester) async {
-    await tester.initializeAppFlowy();
-    await tester.tapGoButton();
+    testWidgets('checklist', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
 
-    await tester.createNewPageWithName(layout: ViewLayoutPB.Grid);
+      await tester.createNewPageWithName(layout: ViewLayoutPB.Grid);
 
-    const fieldType = FieldType.Checklist;
-    await tester.createField(fieldType, fieldType.name);
+      const fieldType = FieldType.Checklist;
+      await tester.createField(fieldType, fieldType.name);
 
-    // assert that there is no progress bar in the grid
-    tester.assertChecklistCellInGrid(rowIndex: 0, percent: null);
+      // assert that there is no progress bar in the grid
+      tester.assertChecklistCellInGrid(rowIndex: 0, percent: null);
 
-    // tap on the first checklist cell
-    await tester.tapChecklistCellInGrid(rowIndex: 0);
+      // tap on the first checklist cell
+      await tester.tapChecklistCellInGrid(rowIndex: 0);
 
-    // assert that the checklist editor is shown
-    tester.assertChecklistEditorVisible(visible: true);
+      // assert that the checklist editor is shown
+      tester.assertChecklistEditorVisible(visible: true);
 
-    // create a new task with enter
-    await tester.createNewChecklistTask(name: "task 0", enter: true);
+      // create a new task with enter
+      await tester.createNewChecklistTask(name: "task 0", enter: true);
 
-    // assert that the task is displayed
-    tester.assertChecklistTaskInEditor(
-      index: 0,
-      name: "task 0",
-      isChecked: false,
-    );
+      // assert that the task is displayed
+      tester.assertChecklistTaskInEditor(
+        index: 0,
+        name: "task 0",
+        isChecked: false,
+      );
 
-    // update the task's name
-    await tester.renameChecklistTask(index: 0, name: "task 1");
+      // update the task's name
+      await tester.renameChecklistTask(index: 0, name: "task 1");
 
-    // assert that the task's name is updated
-    tester.assertChecklistTaskInEditor(
-      index: 0,
-      name: "task 1",
-      isChecked: false,
-    );
+      // assert that the task's name is updated
+      tester.assertChecklistTaskInEditor(
+        index: 0,
+        name: "task 1",
+        isChecked: false,
+      );
 
-    // dismiss new task editor
-    await tester.dismissCellEditor();
+      // dismiss new task editor
+      await tester.dismissCellEditor();
 
-    // dismiss checklist cell editor
-    await tester.dismissCellEditor();
+      // dismiss checklist cell editor
+      await tester.dismissCellEditor();
 
-    // assert that progress bar is shown in grid at 0%
-    tester.assertChecklistCellInGrid(rowIndex: 0, percent: 0);
+      // assert that progress bar is shown in grid at 0%
+      tester.assertChecklistCellInGrid(rowIndex: 0, percent: 0);
 
-    // start editing the first checklist cell again
-    await tester.tapChecklistCellInGrid(rowIndex: 0);
+      // start editing the first checklist cell again
+      await tester.tapChecklistCellInGrid(rowIndex: 0);
 
-    // create another task with the create button
-    await tester.createNewChecklistTask(name: "task 2", button: true);
+      // create another task with the create button
+      await tester.createNewChecklistTask(name: "task 2", button: true);
 
-    // assert that the task was inserted
-    tester.assertChecklistTaskInEditor(
-      index: 1,
-      name: "task 2",
-      isChecked: false,
-    );
+      // assert that the task was inserted
+      tester.assertChecklistTaskInEditor(
+        index: 1,
+        name: "task 2",
+        isChecked: false,
+      );
 
-    // mark it as complete
-    await tester.checkChecklistTask(index: 1);
+      // mark it as complete
+      await tester.checkChecklistTask(index: 1);
 
-    // assert that the task was checked in the editor
-    tester.assertChecklistTaskInEditor(
-      index: 1,
-      name: "task 2",
-      isChecked: true,
-    );
+      // assert that the task was checked in the editor
+      tester.assertChecklistTaskInEditor(
+        index: 1,
+        name: "task 2",
+        isChecked: true,
+      );
 
-    // dismiss checklist editor
-    await tester.dismissCellEditor();
-    await tester.dismissCellEditor();
+      // dismiss checklist editor
+      await tester.dismissCellEditor();
+      await tester.dismissCellEditor();
 
-    // assert that progressbar is shown in grid at 50%
-    tester.assertChecklistCellInGrid(rowIndex: 0, percent: 0.5);
+      // assert that progressbar is shown in grid at 50%
+      tester.assertChecklistCellInGrid(rowIndex: 0, percent: 0.5);
 
-    // re-open the cell editor
-    await tester.tapChecklistCellInGrid(rowIndex: 0);
+      // re-open the cell editor
+      await tester.tapChecklistCellInGrid(rowIndex: 0);
 
-    // hover over first task and delete it
-    await tester.deleteChecklistTask(index: 0);
+      // hover over first task and delete it
+      await tester.deleteChecklistTask(index: 0);
 
-    // dismiss cell editor
-    await tester.dismissCellEditor();
+      // dismiss cell editor
+      await tester.dismissCellEditor();
 
-    // assert that progressbar is shown in grid at 100%
-    tester.assertChecklistCellInGrid(rowIndex: 0, percent: 1);
+      // assert that progressbar is shown in grid at 100%
+      tester.assertChecklistCellInGrid(rowIndex: 0, percent: 1);
 
-    // re-open the cell edior
-    await tester.tapChecklistCellInGrid(rowIndex: 0);
+      // re-open the cell edior
+      await tester.tapChecklistCellInGrid(rowIndex: 0);
 
-    // delete the remaining task
-    await tester.deleteChecklistTask(index: 0);
+      // delete the remaining task
+      await tester.deleteChecklistTask(index: 0);
 
-    // dismiss the cell editor
-    await tester.dismissCellEditor();
+      // dismiss the cell editor
+      await tester.dismissCellEditor();
 
-    // check that the progress bar is not viisble
-    tester.assertChecklistCellInGrid(rowIndex: 0, percent: null);
+      // check that the progress bar is not viisble
+      tester.assertChecklistCellInGrid(rowIndex: 0, percent: null);
+    });
   });
 }

frontend/appflowy_flutter/integration_test/database/database_field_settings_test.dart

@@ -1,11 +1,11 @@
 import 'package:appflowy/plugins/database_view/grid/presentation/grid_page.dart';
-import 'package:appflowy/plugins/database_view/tar_bar/tar_bar_add_button.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/setting_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pbenum.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
-import 'util/util.dart';
+import '../util/database_test_op.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -16,7 +16,7 @@ void main() {
       await tester.tapGoButton();
 
       await tester.createNewPageWithName(layout: ViewLayoutPB.Grid);
-      await tester.tapCreateLinkedDatabaseViewButton(AddButtonAction.grid);
+      await tester.tapCreateLinkedDatabaseViewButton(DatabaseLayoutPB.Grid);
 
       // create a field
       await tester.scrollToRight(find.byType(GridPage));
@@ -34,7 +34,7 @@ void main() {
       await tester.findFieldWithName('New field 1');
 
       // go back to linked database view, expect field to be hidden
-      await tester.tapTabBarLinkedViewByViewName('grid');
+      await tester.tapTabBarLinkedViewByViewName('Grid');
       await tester.noFieldWithName('New field 1');
 
       // use the settings button to show the field

frontend/appflowy_flutter/integration_test/database/database_field_test.dart

@@ -6,13 +6,13 @@ import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
-import 'util/util.dart';
+import '../util/database_test_op.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('grid page', () {
+  group('grid field editor:', () {
     testWidgets('rename existing field', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
@@ -98,7 +98,7 @@ void main() {
       await tester.renameField('New field 1');
       await tester.dismissFieldEditor();
 
-      // Delete the field
+      // duplicate the field
       await tester.tapGridFieldWithName('New field 1');
       await tester.tapDuplicatePropertyButton();
 
@@ -106,7 +106,30 @@ void main() {
       await tester.pumpAndSettle();
     });
 
-    testWidgets('create checklist field ', (tester) async {
+    testWidgets('insert field on either side of a field', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.createNewPageWithName(layout: ViewLayoutPB.Grid);
+
+      await tester.scrollToRight(find.byType(GridPage));
+
+      // insert new field to the right
+      await tester.tapGridFieldWithName('Type');
+      await tester.tapInsertFieldButton(left: false, name: 'Right');
+      await tester.dismissFieldEditor();
+      await tester.findFieldWithName('Right');
+
+      // insert new field to the right
+      await tester.tapGridFieldWithName('Type');
+      await tester.tapInsertFieldButton(left: true, name: "Left");
+      await tester.dismissFieldEditor();
+      await tester.findFieldWithName('Left');
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('create checklist field', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 

frontend/appflowy_flutter/integration_test/database/database_filter_test.dart

@@ -4,7 +4,7 @@ import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
+import '../util/database_test_op.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/database/database_row_page_test.dart

@@ -7,9 +7,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
-import 'util/emoji.dart';
-import 'util/util.dart';
+import '../util/database_test_op.dart';
+import '../util/emoji.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -42,7 +42,6 @@ void main() {
       await tester.hoverRowBanner();
 
       await tester.openEmojiPicker();
-      await tester.switchToEmojiList();
       await tester.tapEmoji('😀');
 
       // After select the emoji, the EmojiButton will show up
@@ -60,12 +59,10 @@ void main() {
       await tester.openFirstRowDetailPage();
       await tester.hoverRowBanner();
       await tester.openEmojiPicker();
-      await tester.switchToEmojiList();
       await tester.tapEmoji('😀');
 
       // Update existing selected emoji
       await tester.tapButton(find.byType(EmojiButton));
-      await tester.switchToEmojiList();
       await tester.tapEmoji('😅');
 
       // The emoji already displayed in the row banner
@@ -89,7 +86,6 @@ void main() {
       await tester.openFirstRowDetailPage();
       await tester.hoverRowBanner();
       await tester.openEmojiPicker();
-      await tester.switchToEmojiList();
       await tester.tapEmoji('😀');
 
       // Remove the emoji
@@ -127,7 +123,6 @@ void main() {
         await tester.tapTypeOptionButton();
 
         await tester.selectFieldType(fieldType);
-        await tester.dismissFieldEditor();
 
         // After update the field type, the cells should be updated
         await tester.findCellByFieldType(fieldType);

frontend/appflowy_flutter/integration_test/database/database_row_test.dart

@@ -2,8 +2,8 @@ import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
-import 'util/util.dart';
+import '../util/database_test_op.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/database/database_setting_test.dart

@@ -3,8 +3,8 @@ import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
-import 'util/util.dart';
+import '../util/database_test_op.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/database/database_share_test.dart

@@ -2,7 +2,7 @@ import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
+import '../util/database_test_op.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -34,7 +34,7 @@ void main() {
         false,
         false,
         false,
-        false
+        false,
       ];
       for (final (index, content) in checkboxCells.indexed) {
         await tester.assertCheckboxCell(
@@ -54,7 +54,7 @@ void main() {
         '10',
         '11',
         '12',
-        ''
+        '',
       ];
       for (final (index, content) in numberCells.indexed) {
         await tester.assertCellContent(
@@ -152,7 +152,7 @@ void main() {
         'Jun 16, 2023',
         '',
         '',
-        ''
+        '',
       ];
       for (final (index, content) in dateCells.indexed) {
         await tester.assertDateCellInGrid(

frontend/appflowy_flutter/integration_test/database/database_sort_test.dart

@@ -2,7 +2,7 @@ import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
+import '../util/database_test_op.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/database/database_view_test.dart

@@ -1,11 +1,10 @@
-import 'package:appflowy/plugins/database_view/tar_bar/tar_bar_add_button.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/setting_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/database_test_op.dart';
-import 'util/util.dart';
+import '../util/database_test_op.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -18,15 +17,15 @@ void main() {
       await tester.createNewPageWithName(layout: ViewLayoutPB.Grid);
 
       // Create board view
-      await tester.tapCreateLinkedDatabaseViewButton(AddButtonAction.board);
+      await tester.tapCreateLinkedDatabaseViewButton(DatabaseLayoutPB.Board);
       tester.assertCurrentDatabaseTagIs(DatabaseLayoutPB.Board);
 
       // Create grid view
-      await tester.tapCreateLinkedDatabaseViewButton(AddButtonAction.grid);
+      await tester.tapCreateLinkedDatabaseViewButton(DatabaseLayoutPB.Grid);
       tester.assertCurrentDatabaseTagIs(DatabaseLayoutPB.Grid);
 
       // Create calendar view
-      await tester.tapCreateLinkedDatabaseViewButton(AddButtonAction.calendar);
+      await tester.tapCreateLinkedDatabaseViewButton(DatabaseLayoutPB.Calendar);
       tester.assertCurrentDatabaseTagIs(DatabaseLayoutPB.Calendar);
 
       await tester.pumpAndSettle();
@@ -39,7 +38,7 @@ void main() {
       await tester.createNewPageWithName(layout: ViewLayoutPB.Grid);
 
       // Create board view
-      await tester.tapCreateLinkedDatabaseViewButton(AddButtonAction.board);
+      await tester.tapCreateLinkedDatabaseViewButton(DatabaseLayoutPB.Board);
       tester.assertCurrentDatabaseTagIs(DatabaseLayoutPB.Board);
 
       // rename board view
@@ -64,7 +63,7 @@ void main() {
       await tester.createNewPageWithName(layout: ViewLayoutPB.Grid);
 
       // Create board view
-      await tester.tapCreateLinkedDatabaseViewButton(AddButtonAction.board);
+      await tester.tapCreateLinkedDatabaseViewButton(DatabaseLayoutPB.Board);
       tester.assertCurrentDatabaseTagIs(DatabaseLayoutPB.Board);
 
       // delete the board

frontend/appflowy_flutter/integration_test/document/document_copy_and_paste_test.dart

@@ -219,7 +219,7 @@ void main() {
           expect(node.delta!.toJson(), [
             {
               'insert': text,
-              'attributes': {'href': url}
+              'attributes': {'href': url},
             }
           ]);
         },

frontend/appflowy_flutter/integration_test/document/document_inline_page_reference_test.dart

@@ -0,0 +1,136 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
+import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:flowy_infra/uuid.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/keyboard.dart';
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('insert inline document reference', () {
+    testWidgets('insert by slash menu', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      final name = await createDocumentToReference(tester);
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.pumpAndSettle();
+
+      await triggerReferenceDocumentBySlashMenu(tester);
+
+      // Search for prefix of document
+      await enterDocumentText(tester);
+
+      // Select result
+      final optionFinder = find.descendant(
+        of: find.byType(LinkToPageMenu),
+        matching: find.text(name),
+      );
+
+      await tester.tap(optionFinder);
+      await tester.pumpAndSettle();
+
+      final mentionBlock = find.byType(MentionPageBlock);
+      expect(mentionBlock, findsOneWidget);
+    });
+
+    testWidgets('insert by `[[` character shortcut', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      final name = await createDocumentToReference(tester);
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.pumpAndSettle();
+
+      await tester.ime.insertText('[[');
+      await tester.pumpAndSettle();
+
+      // Select result
+      await tester.editor.tapAtMenuItemWithName(name);
+      await tester.pumpAndSettle();
+
+      final mentionBlock = find.byType(MentionPageBlock);
+      expect(mentionBlock, findsOneWidget);
+    });
+
+    testWidgets('insert by `+` character shortcut', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      final name = await createDocumentToReference(tester);
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.pumpAndSettle();
+
+      await tester.ime.insertText('+');
+      await tester.pumpAndSettle();
+
+      // Select result
+      await tester.editor.tapAtMenuItemWithName(name);
+      await tester.pumpAndSettle();
+
+      final mentionBlock = find.byType(MentionPageBlock);
+      expect(mentionBlock, findsOneWidget);
+    });
+  });
+}
+
+Future<String> createDocumentToReference(WidgetTester tester) async {
+  final name = 'document_${uuid()}';
+
+  await tester.createNewPageWithName(
+    name: name,
+    layout: ViewLayoutPB.Document,
+    openAfterCreated: false,
+  );
+
+  // This is a workaround since the openAfterCreated
+  //  option does not work in createNewPageWithName method
+  await tester.tap(find.byType(SingleInnerViewItem).first);
+  await tester.pumpAndSettle();
+
+  return name;
+}
+
+Future<void> triggerReferenceDocumentBySlashMenu(WidgetTester tester) async {
+  await tester.editor.showSlashMenu();
+  await tester.pumpAndSettle();
+
+  // Search for referenced document action
+  await enterDocumentText(tester);
+
+  // Select item
+  await FlowyTestKeyboard.simulateKeyDownEvent(
+    [
+      LogicalKeyboardKey.enter,
+    ],
+    tester: tester,
+  );
+
+  await tester.pumpAndSettle();
+}
+
+Future<void> enterDocumentText(WidgetTester tester) async {
+  await FlowyTestKeyboard.simulateKeyDownEvent(
+    [
+      LogicalKeyboardKey.keyD,
+      LogicalKeyboardKey.keyO,
+      LogicalKeyboardKey.keyC,
+      LogicalKeyboardKey.keyU,
+      LogicalKeyboardKey.keyM,
+      LogicalKeyboardKey.keyE,
+      LogicalKeyboardKey.keyN,
+      LogicalKeyboardKey.keyT,
+    ],
+    tester: tester,
+  );
+  await tester.pumpAndSettle();
+}

frontend/appflowy_flutter/integration_test/document/document_test_runner.dart

@@ -16,6 +16,8 @@ import 'document_with_inline_page_test.dart' as document_with_inline_page_test;
 import 'document_with_outline_block_test.dart' as document_with_outline_block;
 import 'document_with_toggle_list_test.dart' as document_with_toggle_list_test;
 import 'edit_document_test.dart' as document_edit_test;
+import 'document_inline_page_reference_test.dart'
+    as document_inline_page_reference_test;
 
 void startTesting() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -35,4 +37,5 @@ void startTesting() {
   document_text_direction_test.main();
   document_option_action_test.main();
   document_with_image_block_test.main();
+  document_inline_page_reference_test.main();
 }

frontend/appflowy_flutter/integration_test/document/document_with_cover_image_test.dart

@@ -1,4 +1,9 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -17,7 +22,6 @@ void main() {
 
       // Hover over cover toolbar to show 'Add Cover' and 'Add Icon' buttons
       await tester.editor.hoverOnCoverToolbar();
-      tester.expectToSeePluginAddCoverAndIconButton();
 
       // Insert a document cover
       await tester.editor.tapOnAddCover();
@@ -53,15 +57,10 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      tester.expectToSeeDocumentIcon(null);
-
-      // Hover over cover toolbar to show the 'Add Cover' and 'Add Icon' buttons
-      await tester.editor.hoverOnCoverToolbar();
-      tester.expectToSeePluginAddCoverAndIconButton();
+      tester.expectToSeeDocumentIcon('⭐️');
 
       // Insert a document icon
-      await tester.editor.tapAddIconButton();
-      await tester.switchToEmojiList();
+      await tester.editor.tapGettingStartedIcon();
       await tester.tapEmoji('😀');
       tester.expectToSeeDocumentIcon('😀');
 
@@ -73,13 +72,11 @@ void main() {
       // Add the icon back for further testing
       await tester.editor.hoverOnCoverToolbar();
       await tester.editor.tapAddIconButton();
-      await tester.switchToEmojiList();
       await tester.tapEmoji('😀');
       tester.expectToSeeDocumentIcon('😀');
 
       // Change the document icon
       await tester.editor.tapOnIconWidget();
-      await tester.switchToEmojiList();
       await tester.tapEmoji('😅');
       tester.expectToSeeDocumentIcon('😅');
 
@@ -93,19 +90,15 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      tester.expectToSeeDocumentIcon(null);
+      tester.expectToSeeDocumentIcon('⭐️');
       tester.expectToSeeNoDocumentCover();
 
-      // Hover over cover toolbar to show the 'Add Cover' and 'Add Icon' buttons
-      await tester.editor.hoverOnCoverToolbar();
-      tester.expectToSeePluginAddCoverAndIconButton();
-
       // Insert a document icon
-      await tester.editor.tapAddIconButton();
-      await tester.switchToEmojiList();
+      await tester.editor.tapGettingStartedIcon();
       await tester.tapEmoji('😀');
 
       // Insert a document cover
+      await tester.editor.hoverOnCoverToolbar();
       await tester.editor.tapOnAddCover();
 
       // Expect to see the icon and cover at the same time
@@ -116,5 +109,48 @@ void main() {
       await tester.editor.hoverOnCoverToolbar();
       tester.expectToSeeEmptyDocumentHeaderToolbar();
     });
+
+    testWidgets('shuffle icon', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.editor.tapGettingStartedIcon();
+
+      // click the shuffle button
+      await tester.tapButton(
+        find.byTooltip(LocaleKeys.emoji_random.tr()),
+      );
+      tester.expectDocumentIconNotNull();
+    });
+
+    testWidgets('change skin tone', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.editor.tapGettingStartedIcon();
+
+      final searchEmojiTextField = find.byWidgetPredicate(
+        (widget) =>
+            widget is TextField &&
+            widget.decoration!.hintText == LocaleKeys.emoji_search.tr(),
+      );
+      await tester.enterText(
+        searchEmojiTextField,
+        'hand',
+      );
+
+      // change skin tone
+      await tester.editor.changeEmojiSkinTone(EmojiSkinTone.dark);
+
+      // select an icon with skin tone
+      const hand = '👋🏿';
+      await tester.tapEmoji(hand);
+      tester.expectToSeeDocumentIcon(hand);
+      tester.expectViewHasIcon(
+        gettingStarted,
+        ViewLayoutPB.Document,
+        hand,
+      );
+    });
   });
 }

frontend/appflowy_flutter/integration_test/document/document_with_inline_math_equation_test.dart

@@ -21,7 +21,7 @@ void main() {
 
       // create a new document
       await tester.createNewPageWithName(
-        name: LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+        name: 'math equation',
         layout: ViewLayoutPB.Document,
       );
 
@@ -67,7 +67,7 @@ void main() {
 
       // create a new document
       await tester.createNewPageWithName(
-        name: LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+        name: 'math equation',
         layout: ViewLayoutPB.Document,
       );
 

frontend/appflowy_flutter/integration_test/document/document_with_inline_page_test.dart

@@ -15,7 +15,7 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      await insertingInlinePage(tester, ViewLayoutPB.Grid);
+      await insertInlinePage(tester, ViewLayoutPB.Grid);
 
       final mentionBlock = find.byType(MentionPageBlock);
       expect(mentionBlock, findsOneWidget);
@@ -26,7 +26,7 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      await insertingInlinePage(tester, ViewLayoutPB.Board);
+      await insertInlinePage(tester, ViewLayoutPB.Board);
 
       final mentionBlock = find.byType(MentionPageBlock);
       expect(mentionBlock, findsOneWidget);
@@ -37,7 +37,7 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      await insertingInlinePage(tester, ViewLayoutPB.Calendar);
+      await insertInlinePage(tester, ViewLayoutPB.Calendar);
 
       final mentionBlock = find.byType(MentionPageBlock);
       expect(mentionBlock, findsOneWidget);
@@ -48,7 +48,7 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      await insertingInlinePage(tester, ViewLayoutPB.Document);
+      await insertInlinePage(tester, ViewLayoutPB.Document);
 
       final mentionBlock = find.byType(MentionPageBlock);
       expect(mentionBlock, findsOneWidget);
@@ -59,7 +59,7 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      final pageName = await insertingInlinePage(tester, ViewLayoutPB.Document);
+      final pageName = await insertInlinePage(tester, ViewLayoutPB.Document);
 
       // rename
       const newName = 'RenameToNewPageName';
@@ -78,7 +78,7 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      final pageName = await insertingInlinePage(tester, ViewLayoutPB.Grid);
+      final pageName = await insertInlinePage(tester, ViewLayoutPB.Grid);
 
       // rename
       await tester.hoverOnPageName(
@@ -98,7 +98,7 @@ void main() {
 }
 
 /// Insert a referenced database of [layout] into the document
-Future<String> insertingInlinePage(
+Future<String> insertInlinePage(
   WidgetTester tester,
   ViewLayoutPB layout,
 ) async {
@@ -110,15 +110,19 @@ Future<String> insertingInlinePage(
     layout: layout,
     openAfterCreated: false,
   );
+
   // create a new document
   await tester.createNewPageWithName(
     name: 'insert_a_inline_page_${layout.name}',
     layout: ViewLayoutPB.Document,
   );
+
   // tap the first line of the document
   await tester.editor.tapLineOfEditorAt(0);
+
   // insert a inline page
   await tester.editor.showAtMenu();
   await tester.editor.tapAtMenuItemWithName(name);
+
   return name;
 }

frontend/appflowy_flutter/integration_test/document/document_with_toggle_list_test.dart

@@ -15,14 +15,23 @@ void main() {
   TestWidgetsFlutterBinding.ensureInitialized();
 
   group('toggle list in document', () {
+    Finder findToggleListIcon({
+      required bool isExpanded,
+    }) {
+      final turns = isExpanded ? 0.25 : 0.0;
+      return find.byWidgetPredicate(
+        (widget) => widget is AnimatedRotation && widget.turns == turns,
+      );
+    }
+
     void expectToggleListOpened() {
-      expect(find.byIcon(Icons.arrow_drop_down), findsOneWidget);
-      expect(find.byIcon(Icons.arrow_right), findsNothing);
+      expect(findToggleListIcon(isExpanded: true), findsOneWidget);
+      expect(findToggleListIcon(isExpanded: false), findsNothing);
     }
 
     void expectToggleListClosed() {
-      expect(find.byIcon(Icons.arrow_drop_down), findsNothing);
-      expect(find.byIcon(Icons.arrow_right), findsOneWidget);
+      expect(findToggleListIcon(isExpanded: false), findsOneWidget);
+      expect(findToggleListIcon(isExpanded: true), findsNothing);
     }
 
     testWidgets('convert > to toggle list, and click the icon to close it',
@@ -63,7 +72,7 @@ void main() {
       expect(find.text(text2, findRichText: true), findsOneWidget);
 
       // Click the toggle list icon to close it
-      final toggleListIcon = find.byIcon(Icons.arrow_drop_down);
+      final toggleListIcon = find.byIcon(Icons.arrow_right);
       await tester.tapButton(toggleListIcon);
 
       // expect the toggle list to be closed
@@ -88,7 +97,7 @@ void main() {
       await tester.ime.insertText('> $text');
 
       // Click the toggle list icon to close it
-      final toggleListIcon = find.byIcon(Icons.arrow_drop_down);
+      final toggleListIcon = find.byIcon(Icons.arrow_right);
       await tester.tapButton(toggleListIcon);
 
       // Press the enter key
@@ -164,7 +173,7 @@ void main() {
 
       // Press the enter key
       // Click the toggle list icon to close it
-      final toggleListIcon = find.byIcon(Icons.arrow_drop_down);
+      final toggleListIcon = find.byIcon(Icons.arrow_right);
       await tester.tapButton(toggleListIcon);
 
       await tester.editor.updateSelection(

frontend/appflowy_flutter/integration_test/document/edit_document_test.dart

@@ -113,9 +113,9 @@ const _sample = r'''
 
 [] Type followed by bullet or num to create a list.
 
-[x] Click `+ New Page` button at the bottom of your sidebar to add a new page.
+[x] Click `New Page` button at the bottom of your sidebar to add a new page.
 
-[] Click `+` next to any page title in the sidebar to quickly add a new subpage, `Document`, `Grid`, or `Kanban Board`.
+[] Click the plus sign next to any page title in the sidebar to quickly add a new subpage, `Document`, `Grid`, or `Kanban Board`.
 ---
 * bulleted list 1
 

frontend/appflowy_flutter/integration_test/open_ai_smart_menu_test.dart

@@ -1,13 +1,14 @@
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/service/openai_client.dart';
+import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/src/render/toolbar/toolbar_widget.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
+
 import 'util/mock/mock_openai_repository.dart';
 import 'util/util.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:appflowy_editor/src/render/toolbar/toolbar_widget.dart';
-import 'package:appflowy/startup/startup.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();

frontend/appflowy_flutter/integration_test/runner.dart

@@ -1,30 +1,29 @@
-import 'package:appflowy/env/env.dart';
 import 'package:integration_test/integration_test.dart';
 
 import 'appearance_settings_test.dart' as appearance_test_runner;
-import 'auth/auth_test.dart' as auth_test_runner;
 import 'board/board_test_runner.dart' as board_test_runner;
-import 'database_calendar_test.dart' as database_calendar_test;
-import 'database_cell_test.dart' as database_cell_test;
-import 'database_field_settings_test.dart' as database_field_settings_test;
-import 'database_field_test.dart' as database_field_test;
-import 'database_filter_test.dart' as database_filter_test;
-import 'database_row_page_test.dart' as database_row_page_test;
-import 'database_row_test.dart' as database_row_test;
-import 'database_setting_test.dart' as database_setting_test;
-import 'database_share_test.dart' as database_share_test;
-import 'database_sort_test.dart' as database_sort_test;
-import 'database_view_test.dart' as database_view_test;
+import 'database/database_calendar_test.dart' as database_calendar_test;
+import 'database/database_cell_test.dart' as database_cell_test;
+import 'database/database_field_settings_test.dart'
+    as database_field_settings_test;
+import 'database/database_field_test.dart' as database_field_test;
+import 'database/database_filter_test.dart' as database_filter_test;
+import 'database/database_row_page_test.dart' as database_row_page_test;
+import 'database/database_row_test.dart' as database_row_test;
+import 'database/database_setting_test.dart' as database_setting_test;
+import 'database/database_share_test.dart' as database_share_test;
+import 'database/database_sort_test.dart' as database_sort_test;
+import 'database/database_view_test.dart' as database_view_test;
 import 'document/document_test_runner.dart' as document_test_runner;
 import 'empty_test.dart' as first_test;
 import 'hotkeys_test.dart' as hotkeys_test;
 import 'import_files_test.dart' as import_files_test;
-import 'settings/user_icon_test.dart' as user_icon_test;
-import 'settings/user_language_test.dart' as user_language_test;
+import 'settings/settings_runner.dart' as settings_test_runner;
 import 'share_markdown_test.dart' as share_markdown_test;
 import 'sidebar/sidebar_test_runner.dart' as sidebar_test_runner;
 import 'switch_folder_test.dart' as switch_folder_test;
 import 'tabs_test.dart' as tabs_test;
+// import 'auth/supabase_auth_test.dart' as supabase_auth_test_runner;
 
 /// The main task runner for all integration tests in AppFlowy.
 ///
@@ -33,7 +32,7 @@ import 'tabs_test.dart' as tabs_test;
 /// If flutter/flutter#101031 is resolved, this file can be removed completely.
 /// Once removed, the integration_test.yaml must be updated to exclude this as
 /// as the test target.
-void main() {
+Future<void> main() async {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   // This test must be run first, otherwise the CI will fail.
@@ -75,12 +74,7 @@ void main() {
   appearance_test_runner.main();
 
   // User settings
-  user_icon_test.main();
-  user_language_test.main();
-
-  if (isCloudEnabled) {
-    auth_test_runner.main();
-  }
+  settings_test_runner.main();
 
   // board_test.main();
   // empty_document_test.main();

frontend/appflowy_flutter/integration_test/settings/notifications_settings_test.dart

@@ -0,0 +1,41 @@
+import 'package:appflowy/workspace/application/settings/settings_dialog_bloc.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('board add row test', () {
+    testWidgets('Add card from header', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.openSettings();
+      await tester.openSettingsPage(SettingsPage.notifications);
+      await tester.pumpAndSettle();
+
+      final switchFinder = find.byType(Switch);
+
+      // Defaults to enabled
+      Switch switchWidget = tester.widget(switchFinder);
+      expect(switchWidget.value, true);
+
+      // Disable
+      await tester.tap(switchFinder);
+      await tester.pumpAndSettle();
+
+      switchWidget = tester.widget(switchFinder);
+      expect(switchWidget.value, false);
+
+      // Enable again
+      await tester.tap(switchFinder);
+      await tester.pumpAndSettle();
+
+      switchWidget = tester.widget(switchFinder);
+      expect(switchWidget.value, true);
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/settings/settings_runner.dart

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

frontend/appflowy_flutter/integration_test/settings/user_icon_test.dart

@@ -3,6 +3,8 @@ import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_v
 import 'package:appflowy/workspace/presentation/widgets/user_avatar.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
+
+import '../util/emoji.dart';
 import '../util/util.dart';
 
 void main() {
@@ -28,27 +30,12 @@ void main() {
       await tester.pumpAndSettle();
 
       // Select first option that isn't default
-      await tester.tap(find.byType(IconOption).first);
+      await tester.tapEmoji('😁');
       await tester.pumpAndSettle();
 
-      UserAvatar userAvatar = tester.widget(userAvatarFinder) as UserAvatar;
-      expect(userAvatar.iconUrl, isNotEmpty);
-
-      // Open icon picker dialog again
-      await tester.tap(userAvatarFinder);
-      await tester.pumpAndSettle();
-
-      // Tap the default option
-      await tester.tap(
-        find.descendant(
-          of: find.byType(IconGallery),
-          matching: find.byType(UserAvatar),
-        ),
-      );
-      await tester.pumpAndSettle();
-
-      userAvatar = tester.widget(userAvatarFinder) as UserAvatar;
-      expect(userAvatar.iconUrl, isEmpty);
+      final UserAvatar userAvatar =
+          tester.widget(userAvatarFinder) as UserAvatar;
+      expect(userAvatar.iconUrl, '😁');
     });
   });
 }

frontend/appflowy_flutter/integration_test/sidebar/sidebar_favorites_test.dart

@@ -99,7 +99,7 @@ void main() {
         );
         expect(
           tester.findFavoritePageName(name),
-          findsNothing,
+          findsOneWidget,
         );
       },
     );
@@ -127,7 +127,7 @@ void main() {
         expect(
           find.byWidgetPredicate(
             (widget) =>
-                widget is ViewItem &&
+                widget is SingleInnerViewItem &&
                 widget.view.isFavorite &&
                 widget.categoryType == FolderCategoryType.favorite,
           ),
@@ -144,12 +144,7 @@ void main() {
         );
 
         expect(
-          find.byWidgetPredicate(
-            (widget) =>
-                widget is ViewItem &&
-                widget.view.isFavorite &&
-                widget.categoryType == FolderCategoryType.favorite,
-          ),
+          tester.findAllFavoritePages(),
           findsNWidgets(3),
         );
 
@@ -163,12 +158,7 @@ void main() {
         );
 
         expect(
-          find.byWidgetPredicate(
-            (widget) =>
-                widget is ViewItem &&
-                widget.view.isFavorite &&
-                widget.categoryType == FolderCategoryType.favorite,
-          ),
+          tester.findAllFavoritePages(),
           findsNothing,
         );
       },

frontend/appflowy_flutter/integration_test/sidebar/sidebar_icon_test.dart

@@ -0,0 +1,76 @@
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/base.dart';
+import '../util/common_operations.dart';
+import '../util/expectation.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  const emoji = '😁';
+
+  group('Icon', () {
+    testWidgets('Update page icon in sidebar', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create document, board, grid and calendar views
+      for (final value in ViewLayoutPB.values) {
+        await tester.createNewPageWithName(
+          name: value.name,
+          parentName: gettingStarted,
+          layout: value,
+        );
+
+        // update its icon
+        await tester.updatePageIconInSidebarByName(
+          name: value.name,
+          parentName: gettingStarted,
+          layout: value,
+          icon: emoji,
+        );
+
+        tester.expectViewHasIcon(
+          value.name,
+          value,
+          emoji,
+        );
+      }
+    });
+
+    testWidgets('Update page icon in title bar', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create document, board, grid and calendar views
+      for (final value in ViewLayoutPB.values) {
+        await tester.createNewPageWithName(
+          name: value.name,
+          parentName: gettingStarted,
+          layout: value,
+        );
+
+        // update its icon
+        await tester.updatePageIconInTitleBarByName(
+          name: value.name,
+          layout: value,
+          icon: emoji,
+        );
+
+        tester.expectViewHasIcon(
+          value.name,
+          value,
+          emoji,
+        );
+
+        tester.expectViewTitleHasIcon(
+          value.name,
+          value,
+          emoji,
+        );
+      }
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/sidebar/sidebar_test_runner.dart

@@ -1,8 +1,9 @@
 import 'package:integration_test/integration_test.dart';
 
-import 'sidebar_test.dart' as sidebar_test;
 import 'sidebar_expand_test.dart' as sidebar_expanded_test;
 import 'sidebar_favorites_test.dart' as sidebar_favorite_test;
+import 'sidebar_icon_test.dart' as sidebar_icon_test;
+import 'sidebar_test.dart' as sidebar_test;
 
 void startTesting() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -11,4 +12,5 @@ void startTesting() {
   sidebar_test.main();
   sidebar_expanded_test.main();
   sidebar_favorite_test.main();
+  sidebar_icon_test.main();
 }

frontend/appflowy_flutter/integration_test/util/auth_operation.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
-import 'package:appflowy/workspace/presentation/settings/widgets/sync_setting_view.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/setting_supabase_cloud.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
@@ -34,10 +35,20 @@ extension AppFlowyAuthTest on WidgetTester {
     );
   }
 
-  void assertEnableSyncSwitchValue(bool value) {
+  void assertSupabaseEnableSyncSwitchValue(bool value) {
     assertSwitchValue(
       find.descendant(
-        of: find.byType(EnableSync),
+        of: find.byType(SupabaseEnableSync),
+        matching: find.byWidgetPredicate((widget) => widget is Switch),
+      ),
+      value,
+    );
+  }
+
+  void assertAppFlowyCloudEnableSyncSwitchValue(bool value) {
+    assertSwitchValue(
+      find.descendant(
+        of: find.byType(AppFlowyCloudEnableSync),
         matching: find.byWidgetPredicate((widget) => widget is Switch),
       ),
       value,
@@ -53,9 +64,9 @@ extension AppFlowyAuthTest on WidgetTester {
     await tapButton(finder);
   }
 
-  Future<void> toggleEnableSync() async {
+  Future<void> toggleEnableSync(Type syncButton) async {
     final finder = find.descendant(
-      of: find.byType(EnableSync),
+      of: find.byType(syncButton),
       matching: find.byWidgetPredicate((widget) => widget is Switch),
     );
 

frontend/appflowy_flutter/integration_test/util/base.dart

@@ -1,10 +1,17 @@
 import 'dart:async';
 import 'dart:io';
 
+import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/env/cloud_env_test.dart';
 import 'package:appflowy/startup/entry_point.dart';
 import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/auth/af_cloud_mock_auth_service.dart';
+import 'package:appflowy/user/application/auth/auth_service.dart';
+import 'package:appflowy/user/application/auth/supabase_mock_auth_service.dart';
 import 'package:appflowy/user/presentation/presentation.dart';
+import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
+import 'package:dartz/dartz.dart';
 import 'package:flowy_infra/uuid.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/gestures.dart';
@@ -27,6 +34,8 @@ extension AppFlowyTestBase on WidgetTester {
     // use to append after the application data directory
     String? pathExtension,
     Size windowsSize = const Size(1600, 1200),
+    AuthenticatorType? cloudType,
+    String? userEmail,
   }) async {
     binding.setSurfaceSize(windowsSize);
 
@@ -36,13 +45,54 @@ extension AppFlowyTestBase on WidgetTester {
     );
 
     WidgetsFlutterBinding.ensureInitialized();
+
     await FlowyRunner.run(
       FlowyApp(),
       IntegrationMode.integrationTest,
+      rustEnvsBuilder: () {
+        final rustEnvs = <String, String>{};
+        if (cloudType != null) {
+          switch (cloudType) {
+            case AuthenticatorType.local:
+              break;
+            case AuthenticatorType.supabase:
+              break;
+            case AuthenticatorType.appflowyCloud:
+              rustEnvs["GOTRUE_ADMIN_EMAIL"] = "admin@example.com";
+              rustEnvs["GOTRUE_ADMIN_PASSWORD"] = "password";
+              break;
+          }
+        }
+        return rustEnvs;
+      },
+      didInitGetItCallback: () {
+        return Future(
+          () async {
+            if (cloudType != null) {
+              switch (cloudType) {
+                case AuthenticatorType.local:
+                  break;
+                case AuthenticatorType.supabase:
+                  await useSupabaseCloud();
+                  getIt.unregister<AuthService>();
+                  getIt.registerFactory<AuthService>(
+                    () => SupabaseMockAuthService(),
+                  );
+                  break;
+                case AuthenticatorType.appflowyCloud:
+                  await useAppFlowyCloud();
+                  getIt.unregister<AuthService>();
+                  getIt.registerFactory<AuthService>(
+                    () => AppFlowyCloudMockAuthService(email: userEmail),
+                  );
+                  break;
+              }
+            }
+          },
+        );
+      },
     );
-
     await waitUntilSignInPageShow();
-
     return FlowyTestContext(
       applicationDataDirectory: directory,
     );
@@ -81,9 +131,15 @@ extension AppFlowyTestBase on WidgetTester {
   }
 
   Future<void> waitUntilSignInPageShow() async {
-    final finder = find.byType(GoButton);
-    await pumpUntilFound(finder);
-    expect(finder, findsOneWidget);
+    if (isAuthEnabled) {
+      final finder = find.byType(SignInAnonymousButton);
+      await pumpUntilFound(finder);
+      expect(finder, findsOneWidget);
+    } else {
+      final finder = find.byType(GoButton);
+      await pumpUntilFound(finder);
+      expect(finder, findsOneWidget);
+    }
   }
 
   Future<void> pumpUntilFound(
@@ -199,3 +255,16 @@ extension AppFlowyFinderTestBase on CommonFinders {
     );
   }
 }
+
+Future<void> useSupabaseCloud() async {
+  await setAuthenticatorType(AuthenticatorType.supabase);
+  await setSupbaseServer(
+    Some(TestEnv.supabaseUrl),
+    Some(TestEnv.supabaseAnonKey),
+  );
+}
+
+Future<void> useAppFlowyCloud() async {
+  await setAuthenticatorType(AuthenticatorType.appflowyCloud);
+  // await setAppFlowyCloudUrl(Some(TestEnv.afCloudUrl));
+}

frontend/appflowy_flutter/integration_test/util/common_operations.dart

@@ -4,15 +4,18 @@ 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/base/emoji_picker_button.dart';
 import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/presentation/screens/screens.dart';
+import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar_new_page_button.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/draggable_view_item.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_action_type.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_add_button.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_more_action_button.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -22,13 +25,21 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+import 'emoji.dart';
 import 'util.dart';
 
 extension CommonOperations on WidgetTester {
   /// Tap the GetStart button on the launch page.
   Future<void> tapGoButton() async {
+    // local version
     final goButton = find.byType(GoButton);
-    await tapButton(goButton);
+    if (goButton.evaluate().isNotEmpty) {
+      await tapButton(goButton);
+    } else {
+      // cloud version
+      final anonymousButton = find.byType(SignInAnonymousButton);
+      await tapButton(anonymousButton);
+    }
 
     if (Platform.isWindows) {
       await pumpAndSettle(const Duration(milliseconds: 200));
@@ -292,7 +303,7 @@ extension CommonOperations on WidgetTester {
       KVKeys.showRenameDialogWhenCreatingNewFile,
       (value) => bool.parse(value),
     );
-    final showRenameDialog = settingsOrFailure.fold((l) => false, (r) => r);
+    final showRenameDialog = settingsOrFailure.fold(() => false, (r) => r);
     if (showRenameDialog) {
       await tapOKButton();
     }
@@ -434,6 +445,47 @@ extension CommonOperations on WidgetTester {
     );
     await tapButton(button);
   }
+
+  // update the page icon in the sidebar
+  Future<void> updatePageIconInSidebarByName({
+    required String name,
+    required String parentName,
+    required ViewLayoutPB layout,
+    required String icon,
+  }) async {
+    final iconButton = find.descendant(
+      of: findPageName(
+        name,
+        layout: layout,
+        parentName: parentName,
+      ),
+      matching:
+          find.byTooltip(LocaleKeys.document_plugins_cover_changeIcon.tr()),
+    );
+    await tapButton(iconButton);
+    await tapEmoji(icon);
+    await pumpAndSettle();
+  }
+
+  // update the page icon in the sidebar
+  Future<void> updatePageIconInTitleBarByName({
+    required String name,
+    required ViewLayoutPB layout,
+    required String icon,
+  }) async {
+    await openPage(
+      name,
+      layout: layout,
+    );
+    final title = find.descendant(
+      of: find.byType(ViewTitleBar),
+      matching: find.text(name),
+    );
+    await tapButton(title);
+    await tapButton(find.byType(EmojiPickerButton));
+    await tapEmoji(icon);
+    await pumpAndSettle();
+  }
 }
 
 extension ViewLayoutPBTest on ViewLayoutPB {

frontend/appflowy_flutter/integration_test/util/database_test_op.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/board/presentation/board_page.dart';
+import 'package:appflowy/plugins/database_view/board/presentation/widgets/board_column_header.dart';
 import 'package:appflowy/plugins/database_view/calendar/application/calendar_bloc.dart';
 import 'package:appflowy/plugins/database_view/calendar/presentation/calendar_day.dart';
 import 'package:appflowy/plugins/database_view/calendar/presentation/calendar_event_card.dart';
@@ -20,7 +21,6 @@ import 'package:appflowy/plugins/database_view/grid/presentation/widgets/filter/
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/filter/filter_menu_item.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_cell.dart';
-import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_cell_action_sheet.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_editor.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart';
@@ -33,12 +33,11 @@ import 'package:appflowy/plugins/database_view/grid/presentation/widgets/sort/or
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/toolbar/filter_button.dart';
-import 'package:appflowy/plugins/database_view/grid/presentation/widgets/toolbar/grid_layout.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/database_layout_selector.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart';
-import 'package:appflowy/plugins/database_view/tar_bar/tab_bar_header.dart';
-import 'package:appflowy/plugins/database_view/tar_bar/tar_bar_add_button.dart';
+import 'package:appflowy/plugins/database_view/tab_bar/desktop/tab_bar_add_button.dart';
+import 'package:appflowy/plugins/database_view/tab_bar/desktop/tab_bar_header.dart';
 import 'package:appflowy/plugins/database_view/widgets/database_layout_ext.dart';
-import 'package:appflowy/plugins/database_view/widgets/setting/setting_property_list.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/accessory/cell_accessory.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/cells/cells.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart';
@@ -52,14 +51,17 @@ import 'package:appflowy/plugins/database_view/widgets/row/row_banner.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_detail.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_document.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_property.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/database_setting_action.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/database_settings_list.dart';
 import 'package:appflowy/plugins/database_view/widgets/setting/setting_button.dart';
-import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/setting_property_list.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/setting_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:appflowy_board/appflowy_board.dart';
 import 'package:calendar_view/calendar_view.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -221,7 +223,9 @@ extension AppFlowyDatabaseTest on WidgetTester {
       final finder = find.descendant(
         of: findCell,
         matching: find.byWidgetPredicate(
-          (widget) => widget is SelectOptionTag && widget.name == content,
+          (widget) =>
+              widget is SelectOptionTag &&
+              (widget.name == content || widget.option?.name == content),
         ),
       );
       expect(finder, findsOneWidget);
@@ -238,7 +242,9 @@ extension AppFlowyDatabaseTest on WidgetTester {
         final finder = find.descendant(
           of: findCell,
           matching: find.byWidgetPredicate(
-            (widget) => widget is SelectOptionTag && widget.name == content,
+            (widget) =>
+                widget is SelectOptionTag &&
+                (widget.name == content || widget.option?.name == content),
           ),
         );
         expect(finder, findsOneWidget);
@@ -286,13 +292,8 @@ extension AppFlowyDatabaseTest on WidgetTester {
       skipOffstage: false,
     );
 
-    final dateCellText = find.descendant(
-      of: findCell,
-      matching: find.byType(GridDateCellText),
-    );
-
     final text = find.descendant(
-      of: dateCellText,
+      of: findCell,
       matching: find.byWidgetPredicate(
         (widget) {
           if (widget is FlowyText) {
@@ -444,7 +445,9 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }) async {
     final findRow = find.byType(GridRow);
     final option = find.byWidgetPredicate(
-      (widget) => widget is SelectOptionTag && widget.name == name,
+      (widget) =>
+          widget is SelectOptionTag &&
+          (widget.name == name || widget.option?.name == name),
     );
 
     final cell = find.descendant(
@@ -618,7 +621,6 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
   Future<void> openEmojiPicker() async {
     await tapButton(find.byType(EmojiPickerButton));
-    await tapButton(find.byType(EmojiSelectionMenu));
   }
 
   Future<void> tapDateCellInRowDetailPage() async {
@@ -688,7 +690,10 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   Future<void> tapDeletePropertyInFieldEditor() async {
-    final deleteButton = find.byType(DeleteFieldButton);
+    final deleteButton = find.byWidgetPredicate(
+      (widget) =>
+          widget is FieldActionCell && widget.action == FieldAction.delete,
+    );
     await tapButton(deleteButton);
 
     final confirmButton = find.descendant(
@@ -761,17 +766,36 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await tapButton(field);
   }
 
+  Future<void> tapInsertFieldButton({
+    required bool left,
+    required String name,
+  }) async {
+    final field = find.byWidgetPredicate(
+      (widget) =>
+          widget is FieldActionCell &&
+          (left && widget.action == FieldAction.insertLeft ||
+              !left && widget.action == FieldAction.insertRight),
+    );
+    await tapButton(field);
+    await renameField(name);
+  }
+
   /// Should call [tapGridFieldWithName] first.
   Future<void> tapHidePropertyButton() async {
     final field = find.byWidgetPredicate(
       (widget) =>
-          widget is FieldActionCell && widget.action == FieldAction.hide,
+          widget is FieldActionCell &&
+          widget.action == FieldAction.toggleVisibility,
     );
     await tapButton(field);
   }
 
   Future<void> tapHidePropertyButtonInFieldEditor() async {
-    final button = find.byType(FieldVisibilityToggleButton);
+    final button = find.byWidgetPredicate(
+      (widget) =>
+          widget is FieldActionCell &&
+          widget.action == FieldAction.toggleVisibility,
+    );
     await tapButton(button);
   }
 
@@ -1131,7 +1155,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
   /// Should call [tapDatabaseSettingButton] first.
   Future<void> tapViewPropertiesButton() async {
-    final findSettingItem = find.byType(DatabaseSettingListPopover);
+    final findSettingItem = find.byType(DatabaseSettingsList);
     final findLayoutButton = find.byWidgetPredicate(
       (widget) =>
           widget is FlowyText &&
@@ -1148,7 +1172,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
   /// Should call [tapDatabaseSettingButton] first.
   Future<void> tapDatabaseLayoutButton() async {
-    final findSettingItem = find.byType(DatabaseSettingListPopover);
+    final findSettingItem = find.byType(DatabaseSettingsList);
     final findLayoutButton = find.byWidgetPredicate(
       (widget) =>
           widget is FlowyText &&
@@ -1164,7 +1188,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   Future<void> tapCalendarLayoutSettingButton() async {
-    final findSettingItem = find.byType(DatabaseSettingListPopover);
+    final findSettingItem = find.byType(DatabaseSettingsList);
     final findLayoutButton = find.byWidgetPredicate(
       (widget) =>
           widget is FlowyText &&
@@ -1242,12 +1266,14 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await pumpAndSettle(const Duration(milliseconds: 300));
   }
 
-  Future<void> hoverOnTodayCalendarCell() async {
+  Future<void> hoverOnTodayCalendarCell({
+    Future<void> Function()? onHover,
+  }) async {
     final todayCell = find.byWidgetPredicate(
       (widget) => widget is CalendarDayCard && widget.isToday,
     );
 
-    await hoverOnWidget(todayCell);
+    await hoverOnWidget(todayCell, onHover: onHover);
   }
 
   Future<void> tapAddCalendarEventButton() async {
@@ -1355,7 +1381,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await tapButton(button);
   }
 
-  Future<void> dragDropRescheduleCalendarEvent(DateTime startDate) async {
+  Future<void> dragDropRescheduleCalendarEvent() async {
     final findEventCard = find.byType(EventCard);
     await drag(findEventCard.first, const Offset(0, 300));
     await pumpAndSettle();
@@ -1381,17 +1407,97 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await tapButton(unscheduledEvent);
   }
 
-  Future<void> tapCreateLinkedDatabaseViewButton(AddButtonAction action) async {
+  Future<void> tapCreateLinkedDatabaseViewButton(
+    DatabaseLayoutPB layoutType,
+  ) async {
     final findAddButton = find.byType(AddDatabaseViewButton);
     await tapButton(findAddButton);
 
     final findCreateButton = find.byWidgetPredicate(
       (widget) =>
-          widget is TarBarAddButtonActionCell && widget.action == action,
+          widget is TabBarAddButtonActionCell && widget.action == layoutType,
     );
     await tapButton(findCreateButton);
   }
 
+  void assertNumberOfGroups(int number) {
+    final groups = find.byType(BoardColumnHeader, skipOffstage: false);
+    expect(groups, findsNWidgets(number));
+  }
+
+  Future<void> scrollBoardToEnd() async {
+    final scrollable = find
+        .descendant(
+          of: find.byType(AppFlowyBoard),
+          matching: find.byWidgetPredicate(
+            (widget) => widget is Scrollable && widget.axis == Axis.horizontal,
+          ),
+        )
+        .first;
+    await scrollUntilVisible(
+      find.byType(BoardTrailing),
+      300,
+      scrollable: scrollable,
+    );
+  }
+
+  Future<void> tapNewGroupButton() async {
+    final button = find.descendant(
+      of: find.byType(BoardTrailing),
+      matching: find.byWidgetPredicate(
+        (widget) => widget is FlowySvg && widget.svg == FlowySvgs.add_s,
+      ),
+    );
+    expect(button, findsOneWidget);
+    await tapButton(button);
+  }
+
+  void assertNewGroupTextField(bool isVisible) {
+    final textField = find.descendant(
+      of: find.byType(BoardTrailing),
+      matching: find.byType(TextField),
+    );
+    if (isVisible) {
+      expect(textField, findsOneWidget);
+    } else {
+      expect(textField, findsNothing);
+    }
+  }
+
+  Future<void> enterNewGroupName(String name, {required bool submit}) async {
+    final textField = find.descendant(
+      of: find.byType(BoardTrailing),
+      matching: find.byType(TextField),
+    );
+    await enterText(textField, name);
+    await pumpAndSettle();
+    if (submit) {
+      await testTextInput.receiveAction(TextInputAction.done);
+      await pumpAndSettle();
+    }
+  }
+
+  Future<void> clearNewGroupTextField() async {
+    final textField = find.descendant(
+      of: find.byType(BoardTrailing),
+      matching: find.byType(TextField),
+    );
+    await tapButton(
+      find.descendant(
+        of: textField,
+        matching: find.byWidgetPredicate(
+          (widget) =>
+              widget is FlowySvg && widget.svg == FlowySvgs.close_filled_m,
+        ),
+      ),
+    );
+    final textFieldWidget = widget<TextField>(textField);
+    assert(
+      textFieldWidget.controller != null &&
+          textFieldWidget.controller!.text.isEmpty,
+    );
+  }
+
   Future<void> tapTabBarLinkedViewByViewName(String name) async {
     final viewButton = findTabBarLinkViewByViewName(name);
     await tapButton(viewButton);
@@ -1476,7 +1582,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
   Future<void> selectDatabaseLayoutType(DatabaseLayoutPB layout) async {
     final findLayoutCell = find.byType(DatabaseViewLayoutCell);
     final findText = find.byWidgetPredicate(
-      (widget) => widget is FlowyText && widget.text == layout.layoutName(),
+      (widget) => widget is FlowyText && widget.text == layout.layoutName,
     );
 
     final button = find.descendant(
@@ -1504,7 +1610,8 @@ extension AppFlowyDatabaseTest on WidgetTester {
   ) async {
     final field = find.byWidgetPredicate(
       (widget) =>
-          widget is DatabasePropertyCell && widget.fieldInfo.name == fieldName,
+          widget is DesktopDatabasePropertyCell &&
+          widget.fieldInfo.name == fieldName,
     );
     final toggleVisibilityButton =
         find.descendant(of: field, matching: find.byType(FlowyIconButton));

frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart

@@ -1,17 +1,20 @@
 import 'dart:ui';
 
 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';
+import 'package:appflowy/plugins/base/icon/icon_picker.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/block_action_add_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cover_editor.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/custom_cover_picker.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/header/emoji_popover.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';
 
 import 'util.dart';
@@ -54,7 +57,27 @@ class EditorOperations {
     await tester.tapButtonWithName(
       LocaleKeys.document_plugins_cover_addIcon.tr(),
     );
-    expect(find.byType(EmojiPopover), findsOneWidget);
+    expect(find.byType(FlowyEmojiPicker), findsOneWidget);
+  }
+
+  Future<void> tapGettingStartedIcon() async {
+    await tester.tapButton(
+      find.descendant(
+        of: find.byType(DocumentHeaderNodeWidget),
+        matching: find.findTextInFlowyText('⭐️'),
+      ),
+    );
+  }
+
+  /// Taps on the 'Skin tone' button
+  ///
+  /// Must call [tapAddIconButton] first.
+  Future<void> changeEmojiSkinTone(EmojiSkinTone skinTone) async {
+    await tester.tapButton(
+      find.byTooltip(LocaleKeys.emoji_selectSkinTone.tr()),
+    );
+    final skinToneButton = find.byKey(emojiSkinToneKey(skinTone.icon));
+    await tester.tapButton(skinToneButton);
   }
 
   /// Taps the 'Remove Icon' button in the cover toolbar and the icon popover
@@ -62,7 +85,10 @@ class EditorOperations {
     Finder button =
         find.text(LocaleKeys.document_plugins_cover_removeIcon.tr());
     if (isInPicker) {
-      button = find.descendant(of: find.byType(EmojiPopover), matching: button);
+      button = find.descendant(
+        of: find.byType(FlowyIconPicker),
+        matching: button,
+      );
     }
 
     await tester.tapButton(button);
@@ -143,7 +169,7 @@ class EditorOperations {
     await tester.ime.insertCharacter('/');
   }
 
-  /// trigger the slash command (selection menu)
+  /// trigger the mention (@) command
   Future<void> showAtMenu() async {
     await tester.ime.insertCharacter('@');
   }

frontend/appflowy_flutter/integration_test/util/emoji.dart

@@ -1,17 +1,14 @@
-import 'package:flutter/material.dart';
+import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'base.dart';
 
 extension EmojiTestExtension on WidgetTester {
-  /// Must call [openEmojiPicker] first
-  Future<void> switchToEmojiList() async {
-    final icon = find.byIcon(Icons.tag_faces);
-    await tapButton(icon);
-  }
-
   Future<void> tapEmoji(String emoji) async {
-    final emojiWidget = find.text(emoji);
+    final emojiWidget = find.descendant(
+      of: find.byType(EmojiPicker),
+      matching: find.text(emoji),
+    );
     await tapButton(emojiWidget);
   }
 }

frontend/appflowy_flutter/integration_test/util/expectation.dart

@@ -5,13 +5,14 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emo
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
+import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 // const String readme = 'Read me';
-const String gettingStarted = '⭐️ Getting started';
+const String gettingStarted = 'Getting started';
 
 extension Expectation on WidgetTester {
   /// Expect to see the home page and with a default read me page.
@@ -108,6 +109,13 @@ extension Expectation on WidgetTester {
     expect(iconWidget, findsOneWidget);
   }
 
+  void expectDocumentIconNotNull() {
+    final iconWidget = find.byWidgetPredicate(
+      (widget) => widget is EmojiIconWidget && widget.emoji.isNotEmpty,
+    );
+    expect(iconWidget, findsOneWidget);
+  }
+
   void expectToSeeDocumentCover(CoverType type) {
     final findCover = find.byWidgetPredicate(
       (widget) => widget is DocumentCover && widget.coverType == type,
@@ -157,7 +165,7 @@ extension Expectation on WidgetTester {
   }) {
     return find.byWidgetPredicate(
       (widget) =>
-          widget is ViewItem &&
+          widget is SingleInnerViewItem &&
           widget.view.isFavorite &&
           widget.categoryType == FolderCategoryType.favorite &&
           widget.view.name == name &&
@@ -166,6 +174,15 @@ extension Expectation on WidgetTester {
     );
   }
 
+  Finder findAllFavoritePages() {
+    return find.byWidgetPredicate(
+      (widget) =>
+          widget is SingleInnerViewItem &&
+          widget.view.isFavorite &&
+          widget.categoryType == FolderCategoryType.favorite,
+    );
+  }
+
   Finder findPageName(
     String name, {
     ViewLayoutPB layout = ViewLayoutPB.Document,
@@ -193,4 +210,24 @@ extension Expectation on WidgetTester {
       matching: findPageName(name, layout: layout),
     );
   }
+
+  void expectViewHasIcon(String name, ViewLayoutPB layout, String emoji) {
+    final pageName = findPageName(
+      name,
+      layout: layout,
+    );
+    final icon = find.descendant(
+      of: pageName,
+      matching: find.text(emoji),
+    );
+    expect(icon, findsOneWidget);
+  }
+
+  void expectViewTitleHasIcon(String name, ViewLayoutPB layout, String emoji) {
+    final icon = find.descendant(
+      of: find.byType(ViewTitleBar),
+      matching: find.text(emoji),
+    );
+    expect(icon, findsOneWidget);
+  }
 }

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

@@ -15,7 +15,7 @@ class MyMockClient extends Mock implements http.Client {
     if (requestType == 'POST' &&
         requestUri == OpenAIRequestType.textCompletion.uri) {
       final responseHeaders = <String, String>{
-        'content-type': 'text/event-stream'
+        'content-type': 'text/event-stream',
       };
       final responseBody = Stream.fromIterable([
         utf8.encode(

frontend/appflowy_flutter/ios/Podfile.lock

@@ -48,10 +48,19 @@ PODS:
   - fluttertoast (0.0.2):
     - Flutter
     - Toast
+  - FMDB (2.7.5):
+    - FMDB/standard (= 2.7.5)
+  - FMDB/standard (2.7.5)
+  - image_gallery_saver (2.0.2):
+    - Flutter
+  - image_picker_ios (0.0.1):
+    - Flutter
   - integration_test (0.0.1):
     - Flutter
   - irondash_engine_context (0.0.1):
     - Flutter
+  - keyboard_height_plugin (0.0.1):
+    - Flutter
   - package_info_plus (0.4.5):
     - Flutter
   - path_provider_foundation (0.0.1):
@@ -68,6 +77,9 @@ PODS:
     - FlutterMacOS
   - sign_in_with_apple (0.0.1):
     - Flutter
+  - sqflite (0.0.3):
+    - Flutter
+    - FMDB (>= 2.7.5)
   - super_native_extensions (0.0.1):
     - Flutter
   - SwiftyGif (5.4.3)
@@ -86,13 +98,17 @@ DEPENDENCIES:
   - flowy_infra_ui (from `.symlinks/plugins/flowy_infra_ui/ios`)
   - Flutter (from `Flutter`)
   - fluttertoast (from `.symlinks/plugins/fluttertoast/ios`)
+  - image_gallery_saver (from `.symlinks/plugins/image_gallery_saver/ios`)
+  - image_picker_ios (from `.symlinks/plugins/image_picker_ios/ios`)
   - integration_test (from `.symlinks/plugins/integration_test/ios`)
   - irondash_engine_context (from `.symlinks/plugins/irondash_engine_context/ios`)
+  - keyboard_height_plugin (from `.symlinks/plugins/keyboard_height_plugin/ios`)
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
   - rich_clipboard_ios (from `.symlinks/plugins/rich_clipboard_ios/ios`)
   - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
   - sign_in_with_apple (from `.symlinks/plugins/sign_in_with_apple/ios`)
+  - sqflite (from `.symlinks/plugins/sqflite/ios`)
   - super_native_extensions (from `.symlinks/plugins/super_native_extensions/ios`)
   - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
   - webview_flutter_wkwebview (from `.symlinks/plugins/webview_flutter_wkwebview/ios`)
@@ -101,6 +117,7 @@ SPEC REPOS:
   trunk:
     - DKImagePickerController
     - DKPhotoGallery
+    - FMDB
     - ReachabilitySwift
     - SDWebImage
     - SwiftyGif
@@ -123,10 +140,16 @@ EXTERNAL SOURCES:
     :path: Flutter
   fluttertoast:
     :path: ".symlinks/plugins/fluttertoast/ios"
+  image_gallery_saver:
+    :path: ".symlinks/plugins/image_gallery_saver/ios"
+  image_picker_ios:
+    :path: ".symlinks/plugins/image_picker_ios/ios"
   integration_test:
     :path: ".symlinks/plugins/integration_test/ios"
   irondash_engine_context:
     :path: ".symlinks/plugins/irondash_engine_context/ios"
+  keyboard_height_plugin:
+    :path: ".symlinks/plugins/keyboard_height_plugin/ios"
   package_info_plus:
     :path: ".symlinks/plugins/package_info_plus/ios"
   path_provider_foundation:
@@ -137,6 +160,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/shared_preferences_foundation/darwin"
   sign_in_with_apple:
     :path: ".symlinks/plugins/sign_in_with_apple/ios"
+  sqflite:
+    :path: ".symlinks/plugins/sqflite/ios"
   super_native_extensions:
     :path: ".symlinks/plugins/super_native_extensions/ios"
   url_launcher_ios:
@@ -151,12 +176,16 @@ SPEC CHECKSUMS:
   device_info_plus: 7545d84d8d1b896cb16a4ff98c19f07ec4b298ea
   DKImagePickerController: b512c28220a2b8ac7419f21c491fc8534b7601ac
   DKPhotoGallery: fdfad5125a9fdda9cc57df834d49df790dbb4179
-  file_picker: ce3938a0df3cc1ef404671531facef740d03f920
+  file_picker: 15fd9539e4eb735dc54bae8c0534a7a9511a03de
   flowy_infra_ui: 0455e1fa8c51885aa1437848e361e99419f34ebc
   Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
   fluttertoast: fafc4fa4d01a6a9e4f772ecd190ffa525e9e2d9c
+  FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
+  image_gallery_saver: cb43cc43141711190510e92c460eb1655cd343cb
+  image_picker_ios: 4a8aadfbb6dc30ad5141a2ce3832af9214a705b5
   integration_test: 13825b8a9334a850581300559b8839134b124670
   irondash_engine_context: 3458bf979b90d616ffb8ae03a150bafe2e860cc9
+  keyboard_height_plugin: 43fa8bba20fd5c4fdeed5076466b8b9d43cc6b86
   package_info_plus: fd030dabf36271f146f1f3beacd48f564b0f17f7
   path_provider_foundation: eaf5b3e458fc0e5fbb9940fb09980e853fe058b8
   ReachabilitySwift: 985039c6f7b23a1da463388634119492ff86c825
@@ -164,6 +193,7 @@ SPEC CHECKSUMS:
   SDWebImage: b9a731e1d6307f44ca703b3976d18c24ca561e84
   shared_preferences_foundation: e2dae3258e06f44cc55f49d42024fd8dd03c590c
   sign_in_with_apple: f3bf75217ea4c2c8b91823f225d70230119b8440
+  sqflite: 31f7eba61e3074736dff8807a9b41581e4f7f15a
   super_native_extensions: 4916b3c627a9c7fffdc48a23a9eca0b1ac228fa7
   SwiftyGif: 6c3eafd0ce693cad58bb63d2b2fb9bacb8552780
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196

frontend/appflowy_flutter/ios/Runner.xcodeproj/project.pbxproj

@@ -143,7 +143,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1300;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {
@@ -515,7 +515,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
 				DEAD_CODE_STRIPPING = NO;
-				DEVELOPMENT_TEAM = "";
+				DEVELOPMENT_TEAM = VHB67HRSZG;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = AppFlowy;

frontend/appflowy_flutter/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1300"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

frontend/appflowy_flutter/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1 +1,80 @@
-{"images":[{"size":"60x60","expected-size":"180","filename":"180.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"40x40","expected-size":"80","filename":"80.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"40x40","expected-size":"120","filename":"120.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"60x60","expected-size":"120","filename":"120.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"57x57","expected-size":"57","filename":"57.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"1x"},{"size":"29x29","expected-size":"58","filename":"58.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"29x29","expected-size":"29","filename":"29.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"1x"},{"size":"29x29","expected-size":"87","filename":"87.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"57x57","expected-size":"114","filename":"114.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"20x20","expected-size":"40","filename":"40.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"2x"},{"size":"20x20","expected-size":"60","filename":"60.png","folder":"Assets.xcassets/AppIcon.appiconset/","idiom":"iphone","scale":"3x"},{"size":"1024x1024","filename":"1024.png","expected-size":"1024","idiom":"ios-marketing","folder":"Assets.xcassets/AppIcon.appiconset/","scale":"1x"}]}
+{
+  "images" : [
+    {
+      "filename" : "40.png",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "filename" : "60.png",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "20x20"
+    },
+    {
+      "filename" : "29.png",
+      "idiom" : "iphone",
+      "scale" : "1x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "58.png",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "87.png",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "80.png",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "120.png",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "57.png",
+      "idiom" : "iphone",
+      "scale" : "1x",
+      "size" : "57x57"
+    },
+    {
+      "filename" : "114.png",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "57x57"
+    },
+    {
+      "filename" : "120.png",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "filename" : "180.png",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "filename" : "1024.png",
+      "idiom" : "ios-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

frontend/appflowy_flutter/ios/Runner/Assets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

frontend/appflowy_flutter/ios/Runner/Info.plist

@@ -1,66 +1,70 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
-	<key>NSPhotoLibraryUsageDescription</key>
-	<string>This app requires access to the photo library.</string>
-	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>$(DEVELOPMENT_LANGUAGE)</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleLocalizations</key>
-	<array>
-		<string>en</string>
-	</array>
-	<key>CFBundleName</key>
-	<string>AppFlowy</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>$(FLUTTER_BUILD_NAME)</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleURLTypes</key>
-	<array>
-		<dict>
-			<key>CFBundleURLName</key>
-			<string></string>
-			<key>CFBundleURLSchemes</key>
-			<array>
-				<string>appflowy-flutter</string>
-			</array>
-		</dict>
-	</array>
-	<key>CFBundleVersion</key>
-	<string>$(FLUTTER_BUILD_NUMBER)</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>UIApplicationSupportsIndirectInputEvents</key>
-	<true/>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIMainStoryboardFile</key>
-	<string>Main</string>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UISupportedInterfaceOrientations~ipad</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationPortraitUpsideDown</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
-</dict>
-</plist>
+	<dict>
+		<key>NSCameraUsageDescription</key>
+		<string>AppFlowy requires access to the camera.</string>
+		<key>NSPhotoLibraryUsageDescription</key>
+		<string>AppFlowy requires access to the photo library.</string>
+		<key>CADisableMinimumFrameDurationOnPhone</key>
+		<true />
+		<key>CFBundleDevelopmentRegion</key>
+		<string>$(DEVELOPMENT_LANGUAGE)</string>
+		<key>CFBundleExecutable</key>
+		<string>$(EXECUTABLE_NAME)</string>
+		<key>CFBundleIdentifier</key>
+		<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+		<key>CFBundleInfoDictionaryVersion</key>
+		<string>6.0</string>
+		<key>CFBundleLocalizations</key>
+		<array>
+			<string>en</string>
+		</array>
+		<key>FLTEnableImpeller</key>
+		<false />
+		<key>CFBundleName</key>
+		<string>AppFlowy</string>
+		<key>CFBundlePackageType</key>
+		<string>APPL</string>
+		<key>CFBundleShortVersionString</key>
+		<string>$(FLUTTER_BUILD_NAME)</string>
+		<key>CFBundleSignature</key>
+		<string>????</string>
+		<key>CFBundleURLTypes</key>
+		<array>
+			<dict>
+				<key>CFBundleURLName</key>
+				<string></string>
+				<key>CFBundleURLSchemes</key>
+				<array>
+					<string>appflowy-flutter</string>
+				</array>
+			</dict>
+		</array>
+		<key>CFBundleVersion</key>
+		<string>$(FLUTTER_BUILD_NUMBER)</string>
+		<key>LSRequiresIPhoneOS</key>
+		<true />
+		<key>UIApplicationSupportsIndirectInputEvents</key>
+		<true />
+		<key>UILaunchStoryboardName</key>
+		<string>LaunchScreen</string>
+		<key>UIMainStoryboardFile</key>
+		<string>Main</string>
+		<key>UISupportedInterfaceOrientations</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UISupportedInterfaceOrientations~ipad</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationPortraitUpsideDown</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UIViewControllerBasedStatusBarAppearance</key>
+		<false />
+	</dict>
+</plist>

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

@@ -1,13 +1,10 @@
-import 'package:appflowy_backend/dispatch/dispatch.dart';
-import 'package:appflowy_backend/protobuf/flowy-config/entities.pb.dart';
-import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:dartz/dartz.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
 abstract class KeyValueStorage {
   Future<void> set(String key, String value);
-  Future<Either<FlowyError, String>> get(String key);
-  Future<Either<FlowyError, T>> getWithFormat<T>(
+  Future<Option<String>> get(String key);
+  Future<Option<T>> getWithFormat<T>(
     String key,
     T Function(String value) formatter,
   );
@@ -20,25 +17,25 @@ class DartKeyValue implements KeyValueStorage {
   SharedPreferences get sharedPreferences => _sharedPreferences!;
 
   @override
-  Future<Either<FlowyError, String>> get(String key) async {
+  Future<Option<String>> get(String key) async {
     await _initSharedPreferencesIfNeeded();
 
     final value = sharedPreferences.getString(key);
     if (value != null) {
-      return Right(value);
+      return Some(value);
     }
-    return Left(FlowyError());
+    return none();
   }
 
   @override
-  Future<Either<FlowyError, T>> getWithFormat<T>(
+  Future<Option<T>> getWithFormat<T>(
     String key,
     T Function(String value) formatter,
   ) async {
     final value = await get(key);
     return value.fold(
-      (l) => left(l),
-      (r) => right(formatter(r)),
+      () => none(),
+      (s) => Some(formatter(s)),
     );
   }
 
@@ -67,47 +64,3 @@ class DartKeyValue implements KeyValueStorage {
     _sharedPreferences ??= await SharedPreferences.getInstance();
   }
 }
-
-/// Key-value store
-/// The data is stored in the local storage of the device.
-class RustKeyValue implements KeyValueStorage {
-  @override
-  Future<void> set(String key, String value) async {
-    await ConfigEventSetKeyValue(
-      KeyValuePB.create()
-        ..key = key
-        ..value = value,
-    ).send();
-  }
-
-  @override
-  Future<Either<FlowyError, String>> get(String key) async {
-    final payload = KeyPB.create()..key = key;
-    final response = await ConfigEventGetKeyValue(payload).send();
-    return response.swap().map((r) => r.value);
-  }
-
-  @override
-  Future<Either<FlowyError, T>> getWithFormat<T>(
-    String key,
-    T Function(String value) formatter,
-  ) async {
-    final value = await get(key);
-    return value.fold(
-      (l) => left(l),
-      (r) => right(formatter(r)),
-    );
-  }
-
-  @override
-  Future<void> remove(String key) async {
-    await ConfigEventRemoveKeyValue(
-      KeyPB.create()..key = key,
-    ).send();
-  }
-
-  @override
-  Future<void> clear() async {
-    // TODO(Lucas): implement clear
-  }
-}

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

@@ -6,13 +6,6 @@ class KVKeys {
   /// The key for the path location of the local data for the whole app.
   static const String pathLocation = '$prefix.path_location';
 
-  /// The key for the last time login type.
-  ///
-  /// The value is one of the following:
-  /// - local
-  /// - supabase
-  static const String loginType = '$prefix.login_type';
-
   /// The key for saving the window size
   ///
   /// The value is a json string with the following format:
@@ -49,4 +42,9 @@ class KVKeys {
   /// The value is a boolean string.
   static const String showRenameDialogWhenCreatingNewFile =
       'showRenameDialogWhenCreatingNewFile';
+
+  static const String kCloudType = 'kCloudType';
+  static const String kAppflowyCloudBaseURL = 'kAppFlowyCloudBaseURL';
+  static const String kSupabaseURL = 'kSupbaseURL';
+  static const String kSupabaseAnonKey = 'kSupabaseAnonKey';
 }

frontend/appflowy_flutter/lib/env/backend_env.dart

@@ -0,0 +1,92 @@
+// ignore_for_file: non_constant_identifier_names
+
+import 'package:json_annotation/json_annotation.dart';
+part 'backend_env.g.dart';
+
+@JsonSerializable()
+class AppFlowyConfiguration {
+  final String root;
+  final String custom_app_path;
+  final String origin_app_path;
+  final String device_id;
+  final int authenticator_type;
+  final SupabaseConfiguration supabase_config;
+  final AppFlowyCloudConfiguration appflowy_cloud_config;
+  final Map<String, String> envs;
+
+  AppFlowyConfiguration({
+    required this.root,
+    required this.custom_app_path,
+    required this.origin_app_path,
+    required this.device_id,
+    required this.authenticator_type,
+    required this.supabase_config,
+    required this.appflowy_cloud_config,
+    required this.envs,
+  });
+
+  factory AppFlowyConfiguration.fromJson(Map<String, dynamic> json) =>
+      _$AppFlowyConfigurationFromJson(json);
+
+  Map<String, dynamic> toJson() => _$AppFlowyConfigurationToJson(this);
+}
+
+@JsonSerializable()
+class SupabaseConfiguration {
+  /// Indicates whether the sync feature is enabled.
+  final String url;
+  final String anon_key;
+
+  SupabaseConfiguration({
+    required this.url,
+    required this.anon_key,
+  });
+
+  factory SupabaseConfiguration.fromJson(Map<String, dynamic> json) =>
+      _$SupabaseConfigurationFromJson(json);
+
+  Map<String, dynamic> toJson() => _$SupabaseConfigurationToJson(this);
+
+  static SupabaseConfiguration defaultConfig() {
+    return SupabaseConfiguration(
+      url: '',
+      anon_key: '',
+    );
+  }
+
+  bool get isValid {
+    return url.isNotEmpty && anon_key.isNotEmpty;
+  }
+}
+
+@JsonSerializable()
+class AppFlowyCloudConfiguration {
+  final String base_url;
+  final String ws_base_url;
+  final String gotrue_url;
+
+  AppFlowyCloudConfiguration({
+    required this.base_url,
+    required this.ws_base_url,
+    required this.gotrue_url,
+  });
+
+  factory AppFlowyCloudConfiguration.fromJson(Map<String, dynamic> json) =>
+      _$AppFlowyCloudConfigurationFromJson(json);
+
+  Map<String, dynamic> toJson() => _$AppFlowyCloudConfigurationToJson(this);
+
+  static AppFlowyCloudConfiguration defaultConfig() {
+    return AppFlowyCloudConfiguration(
+      base_url: '',
+      ws_base_url: '',
+      gotrue_url: '',
+    );
+  }
+
+  bool get isValid {
+    return base_url.isNotEmpty &&
+        ws_base_url.isNotEmpty &&
+        gotrue_url.isNotEmpty;
+  }
+}

frontend/appflowy_flutter/lib/env/cloud_env.dart

@@ -0,0 +1,320 @@
+import 'package:appflowy/core/config/kv.dart';
+import 'package:appflowy/core/config/kv_keys.dart';
+import 'package:appflowy/env/backend_env.dart';
+import 'package:appflowy/env/env.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:dartz/dartz.dart';
+
+/// Sets the cloud type for the application.
+///
+/// This method updates the cloud type setting in the key-value storage
+/// using the [KeyValueStorage] service. The cloud type is identified
+/// by the [AuthenticatorType] enum.
+///
+/// [ty] - The type of cloud to be set. It must be one of the values from
+/// [AuthenticatorType] enum. The corresponding integer value of the enum is stored:
+/// - `CloudType.local` is stored as "0".
+/// - `CloudType.supabase` is stored as "1".
+/// - `CloudType.appflowyCloud` is stored as "2".
+Future<void> setAuthenticatorType(AuthenticatorType ty) async {
+  switch (ty) {
+    case AuthenticatorType.local:
+      getIt<KeyValueStorage>().set(KVKeys.kCloudType, 0.toString());
+      break;
+    case AuthenticatorType.supabase:
+      getIt<KeyValueStorage>().set(KVKeys.kCloudType, 1.toString());
+      break;
+    case AuthenticatorType.appflowyCloud:
+      getIt<KeyValueStorage>().set(KVKeys.kCloudType, 2.toString());
+      break;
+  }
+}
+
+/// Retrieves the currently set cloud type.
+///
+/// This method fetches the cloud type setting from the key-value storage
+/// using the [KeyValueStorage] service and returns the corresponding
+/// [AuthenticatorType] enum value.
+///
+/// Returns:
+/// A Future that resolves to a [AuthenticatorType] enum value representing the
+/// currently set cloud type. The default return value is `CloudType.local`
+/// if no valid setting is found.
+///
+Future<AuthenticatorType> getAuthenticatorType() async {
+  final value = await getIt<KeyValueStorage>().get(KVKeys.kCloudType);
+  return value.fold(() => AuthenticatorType.local, (s) {
+    switch (s) {
+      case "0":
+        return AuthenticatorType.local;
+      case "1":
+        return AuthenticatorType.supabase;
+      case "2":
+        return AuthenticatorType.appflowyCloud;
+      default:
+        return AuthenticatorType.local;
+    }
+  });
+}
+
+/// Determines whether authentication is enabled.
+///
+/// This getter evaluates if authentication should be enabled based on the
+/// current integration mode and cloud type settings.
+///
+/// Returns:
+/// A boolean value indicating whether authentication is enabled. It returns
+/// `true` if the application is in release or develop mode, and the cloud type
+/// is not set to `CloudType.local`. Additionally, it checks if either the
+/// AppFlowy Cloud or Supabase configuration is valid.
+/// Returns `false` otherwise.
+bool get isAuthEnabled {
+  // Only enable supabase in release and develop mode.
+  if (integrationMode().isRelease ||
+      integrationMode().isDevelop ||
+      integrationMode().isIntegrationTest) {
+    final env = getIt<AppFlowyCloudSharedEnv>();
+    if (env.authenticatorType == AuthenticatorType.supabase) {
+      return env.supabaseConfig.isValid;
+    }
+
+    if (env.authenticatorType == AuthenticatorType.appflowyCloud) {
+      return env.appflowyCloudConfig.isValid;
+    }
+
+    return false;
+  } else {
+    return false;
+  }
+}
+
+/// Checks if Supabase is enabled.
+///
+/// This getter evaluates if Supabase should be enabled based on the
+/// current integration mode and cloud type setting.
+///
+/// Returns:
+/// A boolean value indicating whether Supabase is enabled. It returns `true`
+/// if the application is in release or develop mode and the current cloud type
+/// is `CloudType.supabase`. Otherwise, it returns `false`.
+bool get isSupabaseEnabled {
+  // Only enable supabase in release and develop mode.
+  if (integrationMode().isRelease ||
+      integrationMode().isDevelop ||
+      integrationMode().isIntegrationTest) {
+    return currentCloudType() == AuthenticatorType.supabase;
+  } else {
+    return false;
+  }
+}
+
+/// Determines if AppFlowy Cloud is enabled.
+///
+/// This getter assesses if AppFlowy Cloud should be enabled based on the
+/// current integration mode and cloud type setting.
+///
+/// Returns:
+/// A boolean value indicating whether AppFlowy Cloud is enabled. It returns
+/// `true` if the application is in release or develop mode and the current
+/// cloud type is `CloudType.appflowyCloud`. Otherwise, it returns `false`.
+bool get isAppFlowyCloudEnabled {
+  // Only enable appflowy cloud in release and develop mode.
+  if (integrationMode().isRelease ||
+      integrationMode().isDevelop ||
+      integrationMode().isIntegrationTest) {
+    return currentCloudType() == AuthenticatorType.appflowyCloud;
+  } else {
+    return false;
+  }
+}
+
+enum AuthenticatorType {
+  local,
+  supabase,
+  appflowyCloud;
+
+  bool get isEnabled => this != AuthenticatorType.local;
+  int get value {
+    switch (this) {
+      case AuthenticatorType.local:
+        return 0;
+      case AuthenticatorType.supabase:
+        return 1;
+      case AuthenticatorType.appflowyCloud:
+        return 2;
+    }
+  }
+
+  static fromValue(int value) {
+    switch (value) {
+      case 0:
+        return AuthenticatorType.local;
+      case 1:
+        return AuthenticatorType.supabase;
+      case 2:
+        return AuthenticatorType.appflowyCloud;
+      default:
+        return AuthenticatorType.local;
+    }
+  }
+}
+
+AuthenticatorType currentCloudType() {
+  return getIt<AppFlowyCloudSharedEnv>().authenticatorType;
+}
+
+Future<void> setAppFlowyCloudUrl(Option<String> url) async {
+  await url.fold(
+    () => getIt<KeyValueStorage>().remove(KVKeys.kAppflowyCloudBaseURL),
+    (s) => getIt<KeyValueStorage>().set(KVKeys.kAppflowyCloudBaseURL, s),
+  );
+}
+
+/// Use getIt<AppFlowyCloudSharedEnv>() to get the shared environment.
+class AppFlowyCloudSharedEnv {
+  final AuthenticatorType _authenticatorType;
+  final AppFlowyCloudConfiguration appflowyCloudConfig;
+  final SupabaseConfiguration supabaseConfig;
+
+  AppFlowyCloudSharedEnv({
+    required AuthenticatorType authenticatorType,
+    required this.appflowyCloudConfig,
+    required this.supabaseConfig,
+  }) : _authenticatorType = authenticatorType;
+
+  AuthenticatorType get authenticatorType => _authenticatorType;
+
+  static Future<AppFlowyCloudSharedEnv> fromEnv() async {
+    // If [Env.enableCustomCloud] is true, then use the custom cloud configuration.
+    if (Env.enableCustomCloud) {
+      // Use the custom cloud configuration.
+      final cloudType = await getAuthenticatorType();
+      final appflowyCloudConfig = await getAppFlowyCloudConfig();
+      final supabaseCloudConfig = await getSupabaseCloudConfig();
+
+      return AppFlowyCloudSharedEnv(
+        authenticatorType: cloudType,
+        appflowyCloudConfig: appflowyCloudConfig,
+        supabaseConfig: supabaseCloudConfig,
+      );
+    } else {
+      // Using the cloud settings from the .env file.
+      final appflowyCloudConfig = AppFlowyCloudConfiguration(
+        base_url: Env.afCloudUrl,
+        ws_base_url: await _getAppFlowyCloudWSUrl(Env.afCloudUrl),
+        gotrue_url: await _getAppFlowyCloudGotrueUrl(Env.afCloudUrl),
+      );
+
+      return AppFlowyCloudSharedEnv(
+        authenticatorType: AuthenticatorType.fromValue(Env.authenticatorType),
+        appflowyCloudConfig: appflowyCloudConfig,
+        supabaseConfig: SupabaseConfiguration.defaultConfig(),
+      );
+    }
+  }
+}
+
+Future<AppFlowyCloudConfiguration> configurationFromUri(
+  Uri baseUri,
+  String baseUrl,
+) async {
+// When the host is set to 'localhost', the application will utilize the local configuration. This setup assumes that 'localhost' does not employ a reverse proxy, therefore default port settings are used.
+  if (baseUri.host == "localhost") {
+    return AppFlowyCloudConfiguration(
+      base_url: "$baseUrl:8000",
+      ws_base_url: "ws://${baseUri.host}:8000/ws",
+      gotrue_url: "$baseUrl:9998",
+    );
+  } else {
+    return AppFlowyCloudConfiguration(
+      base_url: baseUrl,
+      ws_base_url: await _getAppFlowyCloudWSUrl(baseUrl),
+      gotrue_url: await _getAppFlowyCloudGotrueUrl(baseUrl),
+    );
+  }
+}
+
+Future<AppFlowyCloudConfiguration> getAppFlowyCloudConfig() async {
+  final baseURL = await getAppFlowyCloudUrl();
+
+  try {
+    final uri = Uri.parse(baseURL);
+    return await configurationFromUri(uri, baseURL);
+  } catch (e) {
+    Log.error("Failed to parse AppFlowy Cloud URL: $e");
+    return AppFlowyCloudConfiguration.defaultConfig();
+  }
+}
+
+Future<String> getAppFlowyCloudUrl() async {
+  final result =
+      await getIt<KeyValueStorage>().get(KVKeys.kAppflowyCloudBaseURL);
+  return result.fold(
+    () => "",
+    (url) => url,
+  );
+}
+
+Future<String> _getAppFlowyCloudWSUrl(String baseURL) async {
+  try {
+    final uri = Uri.parse(baseURL);
+
+    // Construct the WebSocket URL directly from the parsed URI.
+    final wsScheme = uri.isScheme('HTTPS') ? 'wss' : 'ws';
+    final wsUrl = Uri(scheme: wsScheme, host: uri.host, path: '/ws');
+
+    return wsUrl.toString();
+  } catch (e) {
+    Log.error("Failed to get WebSocket URL: $e");
+    return "";
+  }
+}
+
+Future<String> _getAppFlowyCloudGotrueUrl(String baseURL) async {
+  return "$baseURL/gotrue";
+}
+
+Future<void> setSupbaseServer(
+  Option<String> url,
+  Option<String> anonKey,
+) async {
+  assert(
+    (url.isSome() && anonKey.isSome()) || (url.isNone() && anonKey.isNone()),
+    "Either both Supabase URL and anon key must be set, or both should be unset",
+  );
+
+  await url.fold(
+    () => getIt<KeyValueStorage>().remove(KVKeys.kSupabaseURL),
+    (s) => getIt<KeyValueStorage>().set(KVKeys.kSupabaseURL, s),
+  );
+  await anonKey.fold(
+    () => getIt<KeyValueStorage>().remove(KVKeys.kSupabaseAnonKey),
+    (s) => getIt<KeyValueStorage>().set(KVKeys.kSupabaseAnonKey, s),
+  );
+}
+
+Future<SupabaseConfiguration> getSupabaseCloudConfig() async {
+  final url = await _getSupbaseUrl();
+  final anonKey = await _getSupabaseAnonKey();
+  return SupabaseConfiguration(
+    url: url,
+    anon_key: anonKey,
+  );
+}
+
+Future<String> _getSupbaseUrl() async {
+  final result = await getIt<KeyValueStorage>().get(KVKeys.kSupabaseURL);
+  return result.fold(
+    () => "",
+    (url) => url,
+  );
+}
+
+Future<String> _getSupabaseAnonKey() async {
+  final result = await getIt<KeyValueStorage>().get(KVKeys.kSupabaseAnonKey);
+  return result.fold(
+    () => "",
+    (url) => url,
+  );
+}

frontend/appflowy_flutter/lib/env/cloud_env_test.dart

@@ -0,0 +1,31 @@
+// lib/env/env.dart
+import 'package:envied/envied.dart';
+
+part 'cloud_env_test.g.dart';
+
+/// Follow the guide on https://supabase.com/docs/guides/auth/social-login/auth-google to setup the auth provider.
+///
+@Envied(path: '.env.cloud.test')
+abstract class TestEnv {
+  /// AppFlowy Cloud Configuration
+  @EnviedField(
+    obfuscate: true,
+    varName: 'APPFLOWY_CLOUD_URL',
+    defaultValue: '',
+  )
+  static final String afCloudUrl = _TestEnv.afCloudUrl;
+
+  // Supabase Configuration:
+  @EnviedField(
+    obfuscate: true,
+    varName: 'SUPABASE_URL',
+    defaultValue: '',
+  )
+  static final String supabaseUrl = _TestEnv.supabaseUrl;
+  @EnviedField(
+    obfuscate: true,
+    varName: 'SUPABASE_ANON_KEY',
+    defaultValue: '',
+  )
+  static final String supabaseAnonKey = _TestEnv.supabaseAnonKey;
+}

frontend/appflowy_flutter/lib/env/env.dart

@@ -1,121 +1,29 @@
 // lib/env/env.dart
-import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy_backend/log.dart';
+import 'package:appflowy/env/cloud_env.dart';
 import 'package:envied/envied.dart';
 
 part 'env.g.dart';
 
-/// The environment variables are defined in `.env` file that is located in the
-/// appflowy_flutter.
-///   Run `dart run build_runner build --delete-conflicting-outputs`
-///   to generate the keys from the env file.
-///
-///   If you want to regenerate the keys, you need to run `dart run
-///   build_runner clean` before running `dart run build_runner build
-///    --delete-conflicting-outputs`.
-
-/// Follow the guide on https://supabase.com/docs/guides/auth/social-login/auth-google to setup the auth provider.
-///
 @Envied(path: '.env')
 abstract class Env {
+  // This flag is used to decide if users can dynamically configure cloud settings. It turns true when a .env file exists containing the APPFLOWY_CLOUD_URL variable. By default, this is set to false.
+  static bool get enableCustomCloud {
+    return Env.authenticatorType == AuthenticatorType.appflowyCloud.value &&
+        _Env.afCloudUrl.isEmpty;
+  }
+
   @EnviedField(
-    obfuscate: true,
-    varName: 'CLOUD_TYPE',
-    defaultValue: '0',
+    obfuscate: false,
+    varName: 'AUTHENTICATOR_TYPE',
+    defaultValue: 2,
   )
-  static final int cloudType = _Env.cloudType;
+  static const int authenticatorType = _Env.authenticatorType;
 
   /// AppFlowy Cloud Configuration
   @EnviedField(
-    obfuscate: true,
-    varName: 'APPFLOWY_CLOUD_BASE_URL',
+    obfuscate: false,
+    varName: 'APPFLOWY_CLOUD_URL',
     defaultValue: '',
   )
-  static final String afCloudBaseUrl = _Env.afCloudBaseUrl;
-
-  @EnviedField(
-    obfuscate: true,
-    varName: 'APPFLOWY_CLOUD_WS_BASE_URL',
-    defaultValue: '',
-  )
-  static final String afCloudWSBaseUrl = _Env.afCloudWSBaseUrl;
-
-  @EnviedField(
-    obfuscate: true,
-    varName: 'APPFLOWY_CLOUD_GOTRUE_URL',
-    defaultValue: '',
-  )
-  static final String afCloudGoTrueUrl = _Env.afCloudGoTrueUrl;
-
-  // Supabase Configuration:
-  @EnviedField(
-    obfuscate: true,
-    varName: 'SUPABASE_URL',
-    defaultValue: '',
-  )
-  static final String supabaseUrl = _Env.supabaseUrl;
-  @EnviedField(
-    obfuscate: true,
-    varName: 'SUPABASE_ANON_KEY',
-    defaultValue: '',
-  )
-  static final String supabaseAnonKey = _Env.supabaseAnonKey;
-}
-
-bool get isCloudEnabled {
-  // Only enable supabase in release and develop mode.
-  if (integrationMode().isRelease || integrationMode().isDevelop) {
-    return currentCloudType().isEnabled;
-  } else {
-    return false;
-  }
-}
-
-bool get isSupabaseEnabled {
-  // Only enable supabase in release and develop mode.
-  if (integrationMode().isRelease || integrationMode().isDevelop) {
-    return currentCloudType() == CloudType.supabase;
-  } else {
-    return false;
-  }
-}
-
-bool get isAppFlowyCloudEnabled {
-  // Only enable appflowy cloud in release and develop mode.
-  if (integrationMode().isRelease || integrationMode().isDevelop) {
-    return currentCloudType() == CloudType.appflowyCloud;
-  } else {
-    return false;
-  }
-}
-
-enum CloudType {
-  unknown,
-  supabase,
-  appflowyCloud;
-
-  bool get isEnabled => this != CloudType.unknown;
-}
-
-CloudType currentCloudType() {
-  final value = Env.cloudType;
-  if (value == 1) {
-    if (Env.supabaseUrl.isEmpty || Env.supabaseAnonKey.isEmpty) {
-      Log.error("Supabase is not configured");
-      return CloudType.unknown;
-    } else {
-      return CloudType.supabase;
-    }
-  }
-
-  if (value == 2) {
-    if (Env.afCloudBaseUrl.isEmpty || Env.afCloudWSBaseUrl.isEmpty) {
-      Log.error("AppFlowy cloud is not configured");
-      return CloudType.unknown;
-    } else {
-      return CloudType.appflowyCloud;
-    }
-  }
-
-  return CloudType.unknown;
+  static const String afCloudUrl = _Env.afCloudUrl;
 }

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

@@ -1,7 +1,8 @@
-import 'package:appflowy/mobile/presentation/database/mobile_board_screen.dart';
+import 'package:appflowy/mobile/presentation/database/board/mobile_board_screen.dart';
 import 'package:appflowy/mobile/presentation/database/mobile_calendar_screen.dart';
 import 'package:appflowy/mobile/presentation/database/mobile_grid_screen.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
+import 'package:appflowy/workspace/application/recent/recent_service.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
@@ -13,7 +14,9 @@ extension MobileRouter on BuildContext {
         path: view.routeName,
         queryParameters: view.queryParameters,
       ).toString(),
-    );
+    ).then((value) {
+      RecentService().updateRecentViews([view.id], true);
+    });
   }
 }
 

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

@@ -1,269 +0,0 @@
-// ThemeData in mobile
-import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
-import 'package:flowy_infra/colorscheme/colorscheme.dart';
-import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/theme_extension.dart';
-import 'package:flutter/material.dart';
-
-const _primaryColor = Color(0xFF2DA2F6); //primary 100
-const _onBackgroundColor = Color(0xff2F3030); // text/title color
-const _onSurfaceColor = Color(0xff676666); // text/body color
-const _onSecondaryColor = Color(0xFFC5C7CB); // text/body2 color
-
-// TODO(yijing): improve theme color before release
-ThemeData getMobileThemeData(
-  Brightness brightness,
-  FlowyColorScheme theme,
-  String fontFamily,
-  String monospaceFontFamily,
-) {
-  final mobileColorTheme = (brightness == Brightness.light)
-      ? ColorScheme(
-          brightness: brightness,
-          primary: _primaryColor,
-          onPrimary: Colors.white,
-          // TODO(yijing): add color later
-          secondary: Colors.white,
-          onSecondary: _onSecondaryColor,
-          error: const Color(0xffFB006D),
-          onError: const Color(0xffFB006D),
-          background: Colors.white,
-          onBackground: _onBackgroundColor,
-          outline: const Color(0xffBDC0C5), //caption
-          outlineVariant: const Color(0xffCBD5E0).withOpacity(0.24),
-          //Snack bar
-          surface: Colors.white,
-          onSurface: _onSurfaceColor, // text/body color
-        )
-      : ColorScheme(
-          brightness: brightness,
-          primary: _primaryColor,
-          onPrimary: Colors.white,
-          // TODO(yijing): add color later
-          secondary: Colors.black,
-          onSecondary: Colors.white,
-          error: const Color(0xffFB006D),
-          onError: const Color(0xffFB006D),
-          background: const Color(0xff1C1C1E), // BG/Secondary color
-          onBackground: Colors.white,
-          outline: const Color(0xff96989C), //caption
-          outlineVariant: Colors.black,
-          //Snack bar
-          surface: const Color(0xff2F3030),
-          onSurface: const Color(0xffC5C6C7), // text/body color
-        );
-
-  return ThemeData(
-    // color
-    primaryColor: mobileColorTheme.primary, //primary 100
-    primaryColorLight: const Color(0xFF57B5F8), //primary 80
-    dividerColor: mobileColorTheme.outline, //caption
-    hintColor: mobileColorTheme.outline,
-    disabledColor: mobileColorTheme.outline,
-    scaffoldBackgroundColor: mobileColorTheme.background,
-    appBarTheme: AppBarTheme(
-      foregroundColor: mobileColorTheme.onBackground,
-      backgroundColor: mobileColorTheme.background,
-      elevation: 80,
-      centerTitle: false,
-      titleTextStyle: TextStyle(
-        color: mobileColorTheme.onBackground,
-        fontSize: 18,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.05,
-      ),
-      shadowColor: mobileColorTheme.outlineVariant,
-    ),
-    radioTheme: RadioThemeData(
-      fillColor: MaterialStateProperty.resolveWith((states) {
-        if (states.contains(MaterialState.selected)) {
-          return mobileColorTheme.primary;
-        }
-        return mobileColorTheme.outline;
-      }),
-    ),
-    // button
-    elevatedButtonTheme: ElevatedButtonThemeData(
-      style: ButtonStyle(
-        fixedSize: MaterialStateProperty.all(const Size.fromHeight(48)),
-        elevation: MaterialStateProperty.all(0),
-        textStyle: MaterialStateProperty.all(
-          const TextStyle(
-            fontSize: 14,
-            fontWeight: FontWeight.w600,
-          ),
-        ),
-        shadowColor: MaterialStateProperty.all(null),
-        backgroundColor: MaterialStateProperty.resolveWith<Color>(
-          (Set<MaterialState> states) {
-            if (states.contains(MaterialState.disabled)) {
-              return const Color(0xFF57B5F8);
-            }
-            return mobileColorTheme.primary;
-          },
-        ),
-        foregroundColor: MaterialStateProperty.all(Colors.white),
-      ),
-    ),
-    outlinedButtonTheme: OutlinedButtonThemeData(
-      style: ButtonStyle(
-        textStyle: MaterialStateProperty.all(
-          const TextStyle(
-            fontSize: 14,
-            fontWeight: FontWeight.w500,
-          ),
-        ),
-        foregroundColor: MaterialStateProperty.all(
-          mobileColorTheme.onBackground,
-        ),
-        backgroundColor: MaterialStateProperty.all(Colors.white),
-        shape: MaterialStateProperty.all(
-          RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(6),
-          ),
-        ),
-        side: MaterialStateProperty.all(
-          BorderSide(
-            color: mobileColorTheme.outline,
-            width: 0.5,
-          ),
-        ),
-        padding: MaterialStateProperty.all(
-          const EdgeInsets.symmetric(horizontal: 16),
-        ),
-        // splash color
-        overlayColor: MaterialStateProperty.all(
-          Colors.grey[100],
-        ),
-      ),
-    ),
-    textButtonTheme: TextButtonThemeData(
-      style: ButtonStyle(
-        textStyle: MaterialStateProperty.all(
-          const TextStyle(
-            fontFamily: 'Poppins',
-          ),
-        ),
-      ),
-    ),
-    // text
-    fontFamily: 'Poppins',
-    textTheme: TextTheme(
-      displayLarge: const TextStyle(
-        color: Color(0xFF57B5F8),
-        fontSize: 32,
-        fontWeight: FontWeight.w700,
-        height: 1.20,
-        letterSpacing: 0.16,
-      ),
-      displayMedium: TextStyle(
-        color: mobileColorTheme.onBackground,
-        fontSize: 32,
-        fontWeight: FontWeight.w600,
-        height: 1.20,
-        letterSpacing: 0.16,
-      ),
-      // H1 Semi 26
-      displaySmall: TextStyle(
-        color: mobileColorTheme.onBackground,
-        fontWeight: FontWeight.w600,
-        height: 1.10,
-        letterSpacing: 0.13,
-      ),
-      // body2 14 Regular
-      bodyMedium: TextStyle(
-        color: mobileColorTheme.onBackground,
-        fontSize: 14,
-        fontWeight: FontWeight.w400,
-        height: 1.20,
-        letterSpacing: 0.07,
-      ),
-      // Trash empty title
-      labelLarge: TextStyle(
-        color: mobileColorTheme.onBackground,
-        fontSize: 22,
-        fontWeight: FontWeight.w600,
-        letterSpacing: -0.3,
-      ),
-      // setting item title
-      labelMedium: TextStyle(
-        color: mobileColorTheme.onSurface,
-        fontSize: 18,
-        fontWeight: FontWeight.w500,
-      ),
-      // setting group title
-      labelSmall: TextStyle(
-        color: mobileColorTheme.onBackground,
-        fontSize: 16,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.05,
-      ),
-    ),
-    inputDecorationTheme: InputDecorationTheme(
-      contentPadding: const EdgeInsets.all(8),
-      focusedBorder: const OutlineInputBorder(
-        borderSide: BorderSide(
-          width: 2,
-          color: _primaryColor,
-        ),
-        borderRadius: BorderRadius.all(Radius.circular(6)),
-      ),
-      focusedErrorBorder: OutlineInputBorder(
-        borderSide: BorderSide(color: mobileColorTheme.error),
-        borderRadius: const BorderRadius.all(Radius.circular(6)),
-      ),
-      errorBorder: OutlineInputBorder(
-        borderSide: BorderSide(color: mobileColorTheme.error),
-        borderRadius: const BorderRadius.all(Radius.circular(6)),
-      ),
-      enabledBorder: OutlineInputBorder(
-        borderSide: BorderSide(
-          color: mobileColorTheme.outline,
-        ),
-        borderRadius: const BorderRadius.all(Radius.circular(6)),
-      ),
-    ),
-    colorScheme: mobileColorTheme,
-    extensions: [
-      AFThemeExtension(
-        warning: theme.yellow,
-        success: theme.green,
-        tint1: theme.tint1,
-        tint2: theme.tint2,
-        tint3: theme.tint3,
-        tint4: theme.tint4,
-        tint5: theme.tint5,
-        tint6: theme.tint6,
-        tint7: theme.tint7,
-        tint8: theme.tint8,
-        tint9: theme.tint9,
-        textColor: theme.text,
-        greyHover: theme.hoverBG1,
-        greySelect: theme.bg3,
-        lightGreyHover: theme.hoverBG3,
-        toggleOffFill: theme.shader5,
-        progressBarBGColor: theme.progressBarBGColor,
-        toggleButtonBGColor: theme.toggleButtonBGColor,
-        calendarWeekendBGColor: theme.calendarWeekendBGColor,
-        gridRowCountColor: theme.gridRowCountColor,
-        code: getFontStyle(
-          fontFamily: monospaceFontFamily,
-          fontColor: theme.shader3,
-        ),
-        callout: getFontStyle(
-          fontFamily: fontFamily,
-          fontSize: FontSizes.s11,
-          fontColor: theme.shader3,
-        ),
-        calloutBGColor: theme.hoverBG3,
-        tableCellBGColor: theme.surface,
-        caption: getFontStyle(
-          fontFamily: fontFamily,
-          fontSize: FontSizes.s11,
-          fontWeight: FontWeight.w400,
-          fontColor: theme.hint,
-        ),
-      ),
-    ],
-  );
-}

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

@@ -1,7 +1,54 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 
 class AppBarBackButton extends StatelessWidget {
   const AppBarBackButton({
+    super.key,
+    this.onTap,
+  });
+
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBarButton(
+      onTap: onTap ?? () => context.pop(),
+      child: const Icon(Icons.arrow_back_ios_new),
+    );
+  }
+}
+
+class AppBarCloseButton extends StatelessWidget {
+  const AppBarCloseButton({
+    super.key,
+    this.onTap,
+    this.margin = const EdgeInsets.symmetric(
+      horizontal: 16.0,
+      vertical: 12.0,
+    ),
+  });
+
+  final VoidCallback? onTap;
+  final EdgeInsets margin;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyButton(
+      useIntrinsicWidth: true,
+      text: const Icon(
+        Icons.close,
+      ),
+      margin: margin,
+      onTap: onTap ?? () => context.pop(),
+    );
+  }
+}
+
+class AppBarCancelButton extends StatelessWidget {
+  const AppBarCancelButton({
     super.key,
     required this.onTap,
   });
@@ -12,7 +59,9 @@ class AppBarBackButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return AppBarButton(
       onTap: onTap,
-      child: const Icon(Icons.arrow_back_ios_new),
+      child: FlowyText(
+        LocaleKeys.button_cancel.tr(),
+      ),
     );
   }
 }
@@ -56,6 +105,9 @@ class AppBarButton extends StatelessWidget {
     return InkWell(
       enableFeedback: true,
       borderRadius: BorderRadius.circular(28),
+      splashColor: Colors.transparent,
+      focusColor: Colors.transparent,
+      highlightColor: Colors.transparent,
       onTap: onTap,
       child: Padding(
         padding: EdgeInsets.all(extent),

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

@@ -1,8 +1,9 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart';
-import 'package:appflowy/mobile/presentation/error/error_page.dart';
+import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_state_container.dart';
+import 'package:appflowy/plugins/base/emoji/emoji_text.dart';
+import 'package:appflowy/plugins/document/document_page.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
@@ -56,8 +57,11 @@ class _MobileViewPageState extends State<MobileViewPage> {
             child: CircularProgressIndicator(),
           );
         } else if (!state.hasData) {
-          body = MobileErrorPage(
-            message: LocaleKeys.error_loadingViewError.tr(),
+          body = FlowyMobileStateContainer.error(
+            emoji: '😔',
+            title: LocaleKeys.error_weAreSorry.tr(),
+            description: LocaleKeys.error_loadingViewError.tr(),
+            errorMsg: state.error.toString(),
           );
         } else {
           body = state.data!.fold((view) {
@@ -65,8 +69,11 @@ class _MobileViewPageState extends State<MobileViewPage> {
             actions.add(_buildAppBarMoreButton(view));
             return view.plugin().widgetBuilder.buildWidget(shrinkWrap: false);
           }, (error) {
-            return MobileErrorPage(
-              message: error.toString(),
+            return FlowyMobileStateContainer.error(
+              emoji: '😔',
+              title: LocaleKeys.error_weAreSorry.tr(),
+              description: LocaleKeys.error_loadingViewError.tr(),
+              errorMsg: error.toString(),
             );
           });
         }
@@ -86,36 +93,40 @@ class _MobileViewPageState extends State<MobileViewPage> {
             child: Builder(
               builder: (context) {
                 final view = context.watch<ViewBloc>().state.view;
-                return _buildApp(
-                  view,
-                  actions,
-                  body,
-                );
+                return _buildApp(view, actions, body);
               },
             ),
           );
         } else {
-          return _buildApp(
-            null,
-            [],
-            body,
-          );
+          return _buildApp(null, [], body);
         }
       },
     );
   }
 
   Widget _buildApp(ViewPB? view, List<Widget> actions, Widget child) {
+    final icon = view?.icon.value;
     return Scaffold(
       appBar: AppBar(
         titleSpacing: 0,
-        title: FlowyText.semibold(
-          view?.name ?? widget.title ?? '',
-          fontSize: 14.0,
-        ),
-        leading: AppBarBackButton(
-          onTap: () => context.pop(),
+        title: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (icon != null)
+              EmojiText(
+                emoji: '$icon ',
+                fontSize: 22.0,
+              ),
+            Expanded(
+              child: FlowyText.regular(
+                view?.name ?? widget.title ?? '',
+                fontSize: 14.0,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ],
         ),
+        leading: const AppBarBackButton(),
         actions: actions,
       ),
       body: SafeArea(
@@ -128,7 +139,7 @@ class _MobileViewPageState extends State<MobileViewPage> {
     return AppBarMoreButton(
       onTap: (context) {
         showMobileBottomSheet(
-          context: context,
+          context,
           builder: (_) => _buildViewPageBottomSheet(context),
         );
       },
@@ -163,12 +174,21 @@ class _MobileViewPageState extends State<MobileViewPage> {
             context.read<FavoriteBloc>().add(FavoriteEvent.toggle(view));
             break;
           case MobileViewBottomSheetBodyAction.undo:
+            context.dispatchNotification(
+              const EditorNotification(type: EditorNotificationType.redo),
+            );
+            context.pop();
+            break;
           case MobileViewBottomSheetBodyAction.redo:
+            context.pop();
+            context.dispatchNotification(EditorNotification.redo());
+            break;
           case MobileViewBottomSheetBodyAction.helpCenter:
             // unimplemented
             context.pop();
             break;
           case MobileViewBottomSheetBodyAction.rename:
+            // no need to implement, rename is handled by the onRename callback.
             throw UnimplementedError();
         }
       },

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

@@ -0,0 +1,56 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flutter/material.dart';
+
+class OptionColorList extends StatelessWidget {
+  const OptionColorList({
+    super.key,
+    this.selectedColor,
+    required this.onSelectedColor,
+  });
+
+  final SelectOptionColorPB? selectedColor;
+  final void Function(SelectOptionColorPB color) onSelectedColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.count(
+      crossAxisCount: 6,
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      children: SelectOptionColorPB.values.map(
+        (colorPB) {
+          final color = colorPB.toColor(context);
+          final isSelected = selectedColor?.value == colorPB.value;
+          return GestureDetector(
+            onTap: () => onSelectedColor(colorPB),
+            child: Container(
+              margin: const EdgeInsets.all(
+                8.0,
+              ),
+              decoration: BoxDecoration(
+                color: color,
+                borderRadius: Corners.s12Border,
+                border: Border.all(
+                  color: isSelected
+                      ? const Color(0xff00C6F1)
+                      : Theme.of(context).dividerColor,
+                ),
+              ),
+              alignment: Alignment.center,
+              child: isSelected
+                  ? const FlowySvg(
+                      FlowySvgs.blue_check_s,
+                      size: Size.square(28.0),
+                      blendMode: null,
+                    )
+                  : null,
+            ),
+          );
+        },
+      ).toList(),
+    );
+  }
+}

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

@@ -1,146 +1,10 @@
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_drag_handler.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_rename_widget.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_view_item_body.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_view_item_header.dart';
-import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
-import 'package:appflowy/workspace/application/view/view_bloc.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart' hide WidgetBuilder;
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:go_router/go_router.dart';
-
-Future<void> showMobileBottomSheet({
-  required BuildContext context,
-  required WidgetBuilder builder,
-}) async {
-  showModalBottomSheet(
-    context: context,
-    isScrollControlled: true,
-    enableDrag: true,
-    useSafeArea: true,
-    shape: const RoundedRectangleBorder(
-      borderRadius: BorderRadius.only(
-        topLeft: Radius.circular(8.0),
-        topRight: Radius.circular(8.0),
-      ),
-    ),
-    builder: builder,
-  );
-}
-
-enum MobileBottomSheetType {
-  view,
-  rename,
-}
-
-class MobileViewItemBottomSheet extends StatefulWidget {
-  const MobileViewItemBottomSheet({
-    super.key,
-    required this.view,
-    this.defaultType = MobileBottomSheetType.view,
-  });
-
-  final ViewPB view;
-  final MobileBottomSheetType defaultType;
-
-  @override
-  State<MobileViewItemBottomSheet> createState() =>
-      _MobileViewItemBottomSheetState();
-}
-
-class _MobileViewItemBottomSheetState extends State<MobileViewItemBottomSheet> {
-  MobileBottomSheetType type = MobileBottomSheetType.view;
-
-  @override
-  initState() {
-    super.initState();
-
-    type = widget.defaultType;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        // drag handler
-        const MobileBottomSheetDragHandler(),
-
-        // header
-        _buildHeader(),
-        const VSpace(8.0),
-        const Divider(),
-
-        // body
-        _buildBody(),
-        const VSpace(12.0),
-      ],
-    );
-  }
-
-  Widget _buildHeader() {
-    switch (type) {
-      case MobileBottomSheetType.view:
-      case MobileBottomSheetType.rename:
-        // header
-        return MobileViewItemBottomSheetHeader(
-          showBackButton: type != MobileBottomSheetType.view,
-          view: widget.view,
-          onBack: () {
-            setState(() {
-              type = MobileBottomSheetType.view;
-            });
-          },
-        );
-    }
-  }
-
-  Widget _buildBody() {
-    switch (type) {
-      case MobileBottomSheetType.view:
-        return MobileViewItemBottomSheetBody(
-          isFavorite: widget.view.isFavorite,
-          onAction: (action) {
-            switch (action) {
-              case MobileViewItemBottomSheetBodyAction.rename:
-                setState(() {
-                  type = MobileBottomSheetType.rename;
-                });
-                break;
-              case MobileViewItemBottomSheetBodyAction.duplicate:
-                context.pop();
-                context.read<ViewBloc>().add(const ViewEvent.duplicate());
-                break;
-              case MobileViewItemBottomSheetBodyAction.share:
-                // unimplemented
-                context.pop();
-                break;
-              case MobileViewItemBottomSheetBodyAction.delete:
-                context.pop();
-                context.read<ViewBloc>().add(const ViewEvent.delete());
-
-                break;
-              case MobileViewItemBottomSheetBodyAction.addToFavorites:
-              case MobileViewItemBottomSheetBodyAction.removeFromFavorites:
-                context.pop();
-                context
-                    .read<FavoriteBloc>()
-                    .add(FavoriteEvent.toggle(widget.view));
-                break;
-            }
-          },
-        );
-      case MobileBottomSheetType.rename:
-        return MobileBottomSheetRenameWidget(
-          name: widget.view.name,
-          onRename: (name) {
-            if (name != widget.view.name) {
-              context.read<ViewBloc>().add(ViewEvent.rename(name));
-            }
-            context.pop();
-          },
-        );
-    }
-  }
-}
+export 'bottom_sheet_action_widget.dart';
+export 'bottom_sheet_add_new_page.dart';
+export 'bottom_sheet_drag_handler.dart';
+export 'bottom_sheet_rename_widget.dart';
+export 'bottom_sheet_view_item.dart';
+export 'bottom_sheet_view_item_body.dart';
+export 'bottom_sheet_view_item_header.dart';
+export 'bottom_sheet_view_page.dart';
+export 'default_mobile_action_pane.dart';
+export 'show_mobile_bottom_sheet.dart';

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

@@ -1,51 +1,55 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:appflowy/mobile/presentation/base/box_container.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 
 class BottomSheetActionWidget extends StatelessWidget {
   const BottomSheetActionWidget({
     super.key,
-    required this.svg,
+    this.svg,
     required this.text,
     required this.onTap,
+    this.iconColor,
   });
 
-  final FlowySvgData svg;
+  final FlowySvgData? svg;
   final String text;
   final VoidCallback onTap;
+  final Color? iconColor;
 
   @override
   Widget build(BuildContext context) {
-    return FlowyBoxContainer(
-      child: InkWell(
-        onTap: () {
-          HapticFeedback.mediumImpact();
-          onTap();
-        },
-        enableFeedback: true,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(
-            vertical: 10.0,
-            horizontal: 12.0,
-          ),
-          child: Row(
-            mainAxisSize: MainAxisSize.min,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              FlowySvg(
-                svg,
-                size: const Size.square(24.0),
-                blendMode: BlendMode.dst,
-              ),
-              const HSpace(6.0),
-              FlowyText(text),
-              const Spacer(),
-            ],
-          ),
+    final iconColor =
+        this.iconColor ?? Theme.of(context).colorScheme.onBackground;
+
+    if (svg == null) {
+      return OutlinedButton(
+        style: Theme.of(context)
+            .outlinedButtonTheme
+            .style
+            ?.copyWith(alignment: Alignment.center),
+        onPressed: onTap,
+        child: FlowyText(
+          text,
+          textAlign: TextAlign.center,
         ),
+      );
+    }
+
+    return OutlinedButton.icon(
+      icon: FlowySvg(
+        svg!,
+        size: const Size.square(22.0),
+        color: iconColor,
       ),
+      label: FlowyText(
+        text,
+        overflow: TextOverflow.ellipsis,
+      ),
+      style: Theme.of(context)
+          .outlinedButtonTheme
+          .style
+          ?.copyWith(alignment: Alignment.centerLeft),
+      onPressed: onTap,
     );
   }
 }

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

@@ -1,8 +1,6 @@
 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_action_widget.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_drag_handler.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_view_item_header.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -21,54 +19,18 @@ class AddNewPageWidgetBottomSheet extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Column(
-      mainAxisSize: MainAxisSize.min,
       children: [
-        // drag handler
-        const MobileBottomSheetDragHandler(),
-
-        // header
-        MobileViewItemBottomSheetHeader(
-          showBackButton: false,
-          view: view,
-          onBack: () {},
-        ),
-        const VSpace(8.0),
-        const Divider(),
-
-        // body
-        _AddNewPageBody(
-          onAction: onAction,
-        ),
-        const VSpace(24.0),
-      ],
-    );
-  }
-}
-
-class _AddNewPageBody extends StatelessWidget {
-  const _AddNewPageBody({
-    required this.onAction,
-  });
-
-  final void Function(ViewLayoutPB layout) onAction;
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-      children: [
-        // rename, duplicate
+        // new document, new grid
         Row(
-          mainAxisSize: MainAxisSize.min,
           children: [
             Expanded(
               child: BottomSheetActionWidget(
-                svg: FlowySvgs.documents_s,
+                svg: FlowySvgs.document_s,
                 text: LocaleKeys.document_menuName.tr(),
                 onTap: () => onAction(ViewLayoutPB.Document),
               ),
             ),
+            const HSpace(8),
             Expanded(
               child: BottomSheetActionWidget(
                 svg: FlowySvgs.grid_s,
@@ -78,10 +40,10 @@ class _AddNewPageBody extends StatelessWidget {
             ),
           ],
         ),
+        const VSpace(8),
 
-        // share, delete
+        // new board, new calendar
         Row(
-          mainAxisSize: MainAxisSize.min,
           children: [
             Expanded(
               child: BottomSheetActionWidget(
@@ -90,6 +52,7 @@ class _AddNewPageBody extends StatelessWidget {
                 onTap: () => onAction(ViewLayoutPB.Board),
               ),
             ),
+            const HSpace(8),
             Expanded(
               child: BottomSheetActionWidget(
                 svg: FlowySvgs.date_s,

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

@@ -0,0 +1,78 @@
+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_action_widget.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+enum BlockActionBottomSheetType {
+  delete,
+  duplicate,
+  insertAbove,
+  insertBelow,
+}
+
+// Only works on mobile.
+class BlockActionBottomSheet extends StatelessWidget {
+  const BlockActionBottomSheet({
+    super.key,
+    required this.onAction,
+    this.extendActionWidgets = const [],
+  });
+
+  final void Function(BlockActionBottomSheetType layout) onAction;
+  final List<Widget> extendActionWidgets;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        // insert above, insert below
+        Row(
+          children: [
+            Expanded(
+              child: BottomSheetActionWidget(
+                svg: FlowySvgs.arrow_up_s,
+                text: LocaleKeys.button_insertAbove.tr(),
+                onTap: () => onAction(BlockActionBottomSheetType.insertAbove),
+              ),
+            ),
+            const HSpace(8),
+            Expanded(
+              child: BottomSheetActionWidget(
+                svg: FlowySvgs.arrow_down_s,
+                text: LocaleKeys.button_insertBelow.tr(),
+                onTap: () => onAction(BlockActionBottomSheetType.insertBelow),
+              ),
+            ),
+          ],
+        ),
+        const VSpace(8),
+
+        // duplicate, delete
+        Row(
+          children: [
+            Expanded(
+              child: BottomSheetActionWidget(
+                svg: FlowySvgs.m_duplicate_m,
+                text: LocaleKeys.button_duplicate.tr(),
+                onTap: () => onAction(BlockActionBottomSheetType.duplicate),
+              ),
+            ),
+            const HSpace(8),
+            Expanded(
+              child: BottomSheetActionWidget(
+                svg: FlowySvgs.m_delete_m,
+                text: LocaleKeys.button_delete.tr(),
+                onTap: () => onAction(BlockActionBottomSheetType.delete),
+              ),
+            ),
+          ],
+        ),
+        const VSpace(8),
+
+        ...extendActionWidgets,
+      ],
+    );
+  }
+}

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

@@ -12,7 +12,7 @@ class MobileBottomSheetDragHandler extends StatelessWidget {
         height: 4,
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(2.0),
-          color: Theme.of(context).colorScheme.onSecondary,
+          color: Theme.of(context).hintColor,
         ),
       ),
     );

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

@@ -0,0 +1,121 @@
+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_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:go_router/go_router.dart';
+import 'package:string_validator/string_validator.dart';
+
+class MobileBottomSheetEditLinkWidget extends StatefulWidget {
+  const MobileBottomSheetEditLinkWidget({
+    super.key,
+    required this.text,
+    required this.href,
+    required this.onEdit,
+  });
+
+  final String text;
+  final String? href;
+  final void Function(String text, String href) onEdit;
+
+  @override
+  State<MobileBottomSheetEditLinkWidget> createState() =>
+      _MobileBottomSheetEditLinkWidgetState();
+}
+
+class _MobileBottomSheetEditLinkWidgetState
+    extends State<MobileBottomSheetEditLinkWidget> {
+  late final TextEditingController textController;
+  late final TextEditingController hrefController;
+
+  @override
+  void initState() {
+    super.initState();
+
+    textController = TextEditingController(
+      text: widget.text,
+    );
+    hrefController = TextEditingController(
+      text: widget.href,
+    );
+  }
+
+  @override
+  void dispose() {
+    textController.dispose();
+    hrefController.dispose();
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        _buildTextField(textController, null),
+        const VSpace(12.0),
+        _buildTextField(hrefController, LocaleKeys.editor_linkTextHint.tr()),
+        const VSpace(12.0),
+        Row(
+          children: [
+            Expanded(
+              child: BottomSheetActionWidget(
+                text: LocaleKeys.button_cancel.tr(),
+                onTap: () => context.pop(),
+              ),
+            ),
+            const HSpace(8),
+            Expanded(
+              child: BottomSheetActionWidget(
+                text: LocaleKeys.button_done.tr(),
+                onTap: () {
+                  widget.onEdit(textController.text, hrefController.text);
+                },
+              ),
+            ),
+            if (widget.href != null && isURL(widget.href)) ...[
+              const HSpace(8),
+              Expanded(
+                child: BottomSheetActionWidget(
+                  text: LocaleKeys.editor_openLink.tr(),
+                  onTap: () {
+                    safeLaunchUrl(widget.href!);
+                  },
+                ),
+              ),
+            ],
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _buildTextField(
+    TextEditingController controller,
+    String? hintText,
+  ) {
+    return SizedBox(
+      height: 44.0,
+      child: FlowyTextField(
+        controller: controller,
+        hintText: hintText,
+        suffixIcon: Padding(
+          padding: const EdgeInsets.all(4.0),
+          child: FlowyButton(
+            text: const FlowySvg(
+              FlowySvgs.close_lg,
+            ),
+            margin: EdgeInsets.zero,
+            useIntrinsicWidth: true,
+            onTap: () {
+              controller.clear();
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}