fix: minor UI issues (#5253)

* fix: the desktop cover didn't sync with the mobile cover

* fix: remove unnecessary space when editing the title

* fix: recent view border issue

* fix: double focus on the title and doc

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

@@ -50,56 +50,14 @@ class MobileRecentView extends StatelessWidget {
                     mainAxisSize: MainAxisSize.min,
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
-                      Expanded(
-                        child: ClipRRect(
-                          borderRadius: const BorderRadius.only(
-                            topLeft: Radius.circular(8),
-                            topRight: Radius.circular(8),
-                          ),
-                          child: _RecentCover(
-                            coverTypeV1: state.coverTypeV1,
-                            coverTypeV2: state.coverTypeV2,
-                            value: state.coverValue,
-                          ),
-                        ),
-                      ),
-                      Expanded(
-                        child: Padding(
-                          padding: const EdgeInsets.fromLTRB(8, 18, 8, 2),
-                          // hack: minLines currently not supported in Text widget.
-                          // https://github.com/flutter/flutter/issues/31134
-                          child: Stack(
-                            children: [
-                              FlowyText.medium(
-                                view.name,
-                                maxLines: 2,
-                                overflow: TextOverflow.ellipsis,
-                              ),
-                              const FlowyText(
-                                "\n\n",
-                                maxLines: 2,
-                              ),
-                            ],
-                          ),
-                        ),
-                      ),
+                      Expanded(child: _buildCover(context, state)),
+                      Expanded(child: _buildTitle(context, state)),
                     ],
                   ),
                 ),
                 Align(
                   alignment: Alignment.centerLeft,
-                  child: Padding(
-                    padding: const EdgeInsets.only(left: 8.0),
-                    child: state.icon.isNotEmpty
-                        ? EmojiText(
-                            emoji: state.icon,
-                            fontSize: 30.0,
-                          )
-                        : SizedBox.square(
-                            dimension: 32.0,
-                            child: view.defaultIcon(),
-                          ),
-                  ),
+                  child: _buildIcon(context, state),
                 ),
               ],
             ),
@@ -108,6 +66,60 @@ class MobileRecentView extends StatelessWidget {
       ),
     );
   }
+
+  Widget _buildCover(BuildContext context, RecentViewState state) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 1.0, left: 1.0, right: 1.0),
+      child: ClipRRect(
+        borderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(8),
+          topRight: Radius.circular(8),
+        ),
+        child: _RecentCover(
+          coverTypeV1: state.coverTypeV1,
+          coverTypeV2: state.coverTypeV2,
+          value: state.coverValue,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildTitle(BuildContext context, RecentViewState state) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(8, 18, 8, 2),
+      // hack: minLines currently not supported in Text widget.
+      // https://github.com/flutter/flutter/issues/31134
+      child: Stack(
+        children: [
+          FlowyText.medium(
+            view.name,
+            fontSize: 16.0,
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+          ),
+          const FlowyText(
+            "\n\n",
+            maxLines: 2,
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildIcon(BuildContext context, RecentViewState state) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 8.0),
+      child: state.icon.isNotEmpty
+          ? EmojiText(
+              emoji: state.icon,
+              fontSize: 30.0,
+            )
+          : SizedBox.square(
+              dimension: 32.0,
+              child: view.defaultIcon(),
+            ),
+    );
+  }
 }
 
 class _RecentCover extends StatelessWidget {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_picker_screen.dart';
 import 'package:appflowy/plugins/base/icon/icon_picker.dart';
+import 'package:appflowy/plugins/document/application/prelude.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/build_context_extension.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/document_immersive_cover_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
@@ -12,6 +13,7 @@ import 'package:appflowy/workspace/application/settings/appearance/base_appearan
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
@@ -40,11 +42,23 @@ class DocumentImmersiveCover extends StatefulWidget {
 class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
   final textEditingController = TextEditingController();
   final scrollController = ScrollController();
+  final focusNode = FocusNode();
+
+  late PropertyValueNotifier<Selection?>? selectionNotifier =
+      context.read<DocumentBloc>().state.editorState?.selectionNotifier;
+
+  @override
+  void initState() {
+    super.initState();
+    selectionNotifier?.addListener(_unfocus);
+  }
 
   @override
   void dispose() {
     textEditingController.dispose();
     scrollController.dispose();
+    selectionNotifier?.removeListener(_unfocus);
+    focusNode.dispose();
     super.dispose();
   }
 
@@ -121,6 +135,7 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
     }
     return TextField(
       controller: textEditingController,
+      focusNode: focusNode,
       decoration: const InputDecoration(
         border: InputBorder.none,
         enabledBorder: InputBorder.none,
@@ -225,4 +240,11 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
       width: double.infinity,
     );
   }
+
+  void _unfocus() {
+    final selection = selectionNotifier?.value;
+    if (selection != null) {
+      focusNode.unfocus(disposition: UnfocusDisposition.previouslyFocusedChild);
+    }
+  }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart

@@ -1,9 +1,6 @@
 import 'dart:async';
 import 'dart:io';
 
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/plugins/document/application/document_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_close_keyboard_or_menu_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
@@ -12,6 +9,8 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_too
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:collection/collection.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
@@ -76,7 +75,10 @@ class _AppFlowyMobileToolbarState extends State<AppFlowyMobileToolbar> {
           builder: (context, isKeyboardShow, __) {
             return AnimatedContainer(
               duration: const Duration(milliseconds: 110),
-              height: isKeyboardShow ? widget.toolbarHeight : 0,
+              // only adding padding when the keyboard is triggered by editor
+              height: isKeyboardShow && widget.editorState.selection != null
+                  ? widget.toolbarHeight
+                  : 0,
             );
           },
         ),