chore: reset focus upon card drag start

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

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

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

@@ -61,7 +61,7 @@ void main() {
             expect(find.byType(GridPage), findsOneWidget);
             break;
           case ViewLayoutPB.Board:
-            expect(find.byType(BoardPage), findsOneWidget);
+            expect(find.byType(DesktopBoardPage), findsOneWidget);
             break;
           case ViewLayoutPB.Calendar:
             expect(find.byType(CalendarPage), findsOneWidget);

frontend/appflowy_flutter/integration_test/shared/database_test_op.dart

@@ -1463,7 +1463,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
   void assertCurrentDatabaseTagIs(DatabaseLayoutPB layout) => switch (layout) {
         DatabaseLayoutPB.Board =>
-          expect(find.byType(BoardPage), findsOneWidget),
+          expect(find.byType(DesktopBoardPage), findsOneWidget),
         DatabaseLayoutPB.Calendar =>
           expect(find.byType(CalendarPage), findsOneWidget),
         DatabaseLayoutPB.Grid => expect(find.byType(GridPage), findsOneWidget),
@@ -1521,7 +1521,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 }
 
 Finder finderForDatabaseLayoutType(DatabaseLayoutPB layout) => switch (layout) {
-      DatabaseLayoutPB.Board => find.byType(BoardPage),
+      DatabaseLayoutPB.Board => find.byType(DesktopBoardPage),
       DatabaseLayoutPB.Calendar => find.byType(CalendarPage),
       DatabaseLayoutPB.Grid => find.byType(GridPage),
       _ => throw Exception('Unknown database layout type: $layout'),

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

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

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

@@ -3,38 +3,81 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/board/board.dart';
 import 'package:appflowy/mobile/presentation/database/board/widgets/group_card_header.dart';
 import 'package:appflowy/mobile/presentation/database/card/card.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
+import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/board/application/board_bloc.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:appflowy/plugins/database/widgets/card/card.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_style_maps/mobile_board_card_cell_style.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
-class MobileBoardContent extends StatefulWidget {
-  const MobileBoardContent({
+class MobileBoardPage extends StatefulWidget {
+  const MobileBoardPage({
     super.key,
+    required this.view,
+    required this.databaseController,
+    this.onEditStateChanged,
   });
 
+  final ViewPB view;
+
+  final DatabaseController databaseController;
+
+  /// Called when edit state changed
+  final VoidCallback? onEditStateChanged;
+
+  @override
+  State<MobileBoardPage> createState() => _MobileBoardPageState();
+}
+
+class _MobileBoardPageState extends State<MobileBoardPage> {
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<BoardBloc>(
+      create: (_) => BoardBloc(
+        databaseController: widget.databaseController,
+      )..add(const BoardEvent.initial()),
+      child: BlocBuilder<BoardBloc, BoardState>(
+        buildWhen: (p, c) => c.isReady,
+        builder: (context, state) => state.maybeMap(
+          loading: (_) => const Center(
+            child: CircularProgressIndicator.adaptive(),
+          ),
+          error: (err) => FlowyMobileStateContainer.error(
+            emoji: '🛸',
+            title: LocaleKeys.board_mobile_failedToLoad.tr(),
+            errorMsg: err.toString(),
+          ),
+          ready: (data) => const _BoardContent(),
+          orElse: () => const SizedBox.shrink(),
+        ),
+      ),
+    );
+  }
+}
+
+class _BoardContent extends StatefulWidget {
+  const _BoardContent();
+
   @override
-  State<MobileBoardContent> createState() => _MobileBoardContentState();
+  State<_BoardContent> createState() => _BoardContentState();
 }
 
-class _MobileBoardContentState extends State<MobileBoardContent> {
+class _BoardContentState extends State<_BoardContent> {
   late final ScrollController scrollController;
   late final AppFlowyBoardScrollController scrollManager;
 
   @override
   void initState() {
     super.initState();
-    // mobile may not need this
-    // scroll to bottom when add a new card
-    scrollManager = AppFlowyBoardScrollController();
     scrollController = ScrollController();
   }
 

frontend/appflowy_flutter/lib/plugins/database/board/application/board_bloc.dart

@@ -31,54 +31,60 @@ const bool _kOpenRowsAfterCreation = false;
 class BoardBloc extends Bloc<BoardEvent, BoardState> {
   BoardBloc({
     required this.databaseController,
+    AppFlowyBoardController? boardController,
   }) : super(const BoardState.loading()) {
     groupBackendSvc = GroupBackendService(viewId);
-    boardController = AppFlowyBoardController(
-      onMoveGroup: (fromGroupId, fromIndex, toGroupId, toIndex) =>
-          databaseController.moveGroup(
-        fromGroupId: fromGroupId,
-        toGroupId: toGroupId,
-      ),
-      onMoveGroupItem: (groupId, fromIndex, toIndex) {
-        final fromRow = groupControllers[groupId]?.rowAtIndex(fromIndex);
-        final toRow = groupControllers[groupId]?.rowAtIndex(toIndex);
-        if (fromRow != null) {
-          databaseController.moveGroupRow(
-            fromRow: fromRow,
-            toRow: toRow,
-            fromGroupId: groupId,
-            toGroupId: groupId,
-          );
-        }
-      },
-      onMoveGroupItemToGroup: (fromGroupId, fromIndex, toGroupId, toIndex) {
-        final fromRow = groupControllers[fromGroupId]?.rowAtIndex(fromIndex);
-        final toRow = groupControllers[toGroupId]?.rowAtIndex(toIndex);
-        if (fromRow != null) {
-          databaseController.moveGroupRow(
-            fromRow: fromRow,
-            toRow: toRow,
-            fromGroupId: fromGroupId,
-            toGroupId: toGroupId,
-          );
-        }
-      },
-    );
-
+    _initBoardController(boardController);
     _dispatch();
   }
 
   final DatabaseController databaseController;
+  late final AppFlowyBoardController boardController;
   final LinkedHashMap<String, GroupController> groupControllers =
       LinkedHashMap();
   final List<GroupPB> groupList = [];
 
-  late final AppFlowyBoardController boardController;
   late final GroupBackendService groupBackendSvc;
 
   FieldController get fieldController => databaseController.fieldController;
   String get viewId => databaseController.viewId;
 
+  void _initBoardController(AppFlowyBoardController? controller) {
+    boardController = controller ??
+        AppFlowyBoardController(
+          onMoveGroup: (fromGroupId, fromIndex, toGroupId, toIndex) =>
+              databaseController.moveGroup(
+            fromGroupId: fromGroupId,
+            toGroupId: toGroupId,
+          ),
+          onMoveGroupItem: (groupId, fromIndex, toIndex) {
+            final fromRow = groupControllers[groupId]?.rowAtIndex(fromIndex);
+            final toRow = groupControllers[groupId]?.rowAtIndex(toIndex);
+            if (fromRow != null) {
+              databaseController.moveGroupRow(
+                fromRow: fromRow,
+                toRow: toRow,
+                fromGroupId: groupId,
+                toGroupId: groupId,
+              );
+            }
+          },
+          onMoveGroupItemToGroup: (fromGroupId, fromIndex, toGroupId, toIndex) {
+            final fromRow =
+                groupControllers[fromGroupId]?.rowAtIndex(fromIndex);
+            final toRow = groupControllers[toGroupId]?.rowAtIndex(toIndex);
+            if (fromRow != null) {
+              databaseController.moveGroupRow(
+                fromRow: fromRow,
+                toRow: toRow,
+                fromGroupId: fromGroupId,
+                toGroupId: toGroupId,
+              );
+            }
+          },
+        );
+  }
+
   void _dispatch() {
     on<BoardEvent>(
       (event, emit) async {
@@ -367,6 +373,7 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
     for (final controller in groupControllers.values) {
       await controller.dispose();
     }
+    boardController.dispose();
     return super.close();
   }