feat: mobile toolbar revamp (#4194)

* feat: toolbar ui revamp

* feat: implement bius and blocks

* feat: implement converting heading block

* feat: implement bius logic

* feat: implement numbered/bulleted/quote list logic

* feat: indent/outdent logic

* feat: implement link logic

* feat: toolbar ui improvement

* feat: implement toolbar biu logic

* feat: focus on biu if the selection is not collapsed

* feat: implement changing font logic'

* feat: implement color picker logic

* feat: support customzing text and background color

* fix: draghandler padding

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

@@ -2,7 +2,6 @@ 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({
@@ -15,7 +14,7 @@ class AppBarBackButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AppBarButton(
-      onTap: onTap ?? () => context.pop(),
+      onTap: onTap ?? () => Navigator.pop(context),
       child: const Icon(Icons.arrow_back_ios_new),
     );
   }
@@ -42,7 +41,7 @@ class AppBarCloseButton extends StatelessWidget {
         Icons.close,
       ),
       margin: margin,
-      onTap: onTap ?? () => context.pop(),
+      onTap: onTap ?? () => Navigator.pop(context),
     );
   }
 }

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

@@ -1,12 +1,10 @@
 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:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_header.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({
@@ -55,40 +53,24 @@ class _MobileBottomSheetEditLinkWidgetState
     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!);
-                  },
-                ),
-              ),
-            ],
-          ],
+        BottomSheetHeader(
+          title: LocaleKeys.editor_editLink.tr(),
+          onClose: () => context.pop(),
+          onDone: () {
+            widget.onEdit(textController.text, hrefController.text);
+          },
         ),
+        const VSpace(20.0),
+        _buildTextField(
+          textController,
+          LocaleKeys.document_inlineLink_title_placeholder.tr(),
+        ),
+        const VSpace(12.0),
+        _buildTextField(
+          hrefController,
+          LocaleKeys.document_inlineLink_url_placeholder.tr(),
+        ),
+        const VSpace(12.0),
       ],
     );
   }
@@ -97,11 +79,14 @@ class _MobileBottomSheetEditLinkWidgetState
     TextEditingController controller,
     String? hintText,
   ) {
-    return SizedBox(
-      height: 44.0,
+    return Container(
+      color: Colors.white,
+      height: 48.0,
       child: FlowyTextField(
         controller: controller,
         hintText: hintText,
+        textStyle: const TextStyle(fontSize: 16.0),
+        hintStyle: const TextStyle(fontSize: 16.0),
         suffixIcon: Padding(
           padding: const EdgeInsets.all(4.0),
           child: FlowyButton(

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

@@ -0,0 +1,64 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+class BottomSheetHeader extends StatelessWidget {
+  const BottomSheetHeader({
+    super.key,
+    this.title,
+    this.onClose,
+    this.onDone,
+  });
+
+  final String? title;
+  final VoidCallback? onClose;
+  final VoidCallback? onDone;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        if (onClose != null)
+          Positioned(
+            left: 0,
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: AppBarCloseButton(
+                margin: EdgeInsets.zero,
+                onTap: onClose,
+              ),
+            ),
+          ),
+        if (title != null)
+          Align(
+            alignment: Alignment.center,
+            child: FlowyText.medium(
+              title!,
+              fontSize: 16,
+            ),
+          ),
+        if (onDone != null)
+          Align(
+            alignment: Alignment.centerRight,
+            child: FlowyButton(
+              useIntrinsicWidth: true,
+              margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
+              decoration: const BoxDecoration(
+                borderRadius: BorderRadius.all(Radius.circular(10)),
+                color: Color(0xFF00BCF0),
+              ),
+              text: FlowyText.medium(
+                LocaleKeys.button_Done.tr(),
+                color: Colors.white,
+                fontSize: 16.0,
+              ),
+              onTap: onDone,
+            ),
+          ),
+      ],
+    );
+  }
+}

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

@@ -18,6 +18,9 @@ Future<T?> showMobileBottomSheet<T>(
   Color? backgroundColor,
   bool isScrollControlled = true,
   BoxConstraints? constraints,
+  bool showDivider = true,
+  Color? barrierColor,
+  double? elevation,
 }) async {
   assert(() {
     if (showCloseButton || title.isNotEmpty) assert(showHeader);
@@ -32,6 +35,8 @@ Future<T?> showMobileBottomSheet<T>(
     clipBehavior: Clip.antiAlias,
     backgroundColor: backgroundColor,
     constraints: constraints,
+    barrierColor: barrierColor,
+    elevation: elevation,
     shape: shape ??
         const RoundedRectangleBorder(
           borderRadius: BorderRadius.vertical(
@@ -43,7 +48,6 @@ Future<T?> showMobileBottomSheet<T>(
 
       if (showDragHandle) {
         children.addAll([
-          const VSpace(4),
           const DragHandler(),
         ]);
       }
@@ -64,6 +68,8 @@ Future<T?> showMobileBottomSheet<T>(
                   : const SizedBox.shrink(),
               FlowyText(
                 title,
+                fontSize: 16.0,
+                fontWeight: FontWeight.w500,
               ),
               showCloseButton
                   ? HSpace(padding.right + 24)
@@ -71,7 +77,7 @@ Future<T?> showMobileBottomSheet<T>(
             ],
           ),
           const VSpace(4),
-          const Divider(),
+          if (showDivider) const Divider(),
         ]);
       }