fix: 0.3.8 known issues (#3912)

* fix: add a left padding to align the document and grid field

* fix: emoji picker in the slash menu is too small

* fix: replace the delete icon color with black

* fix: improve snackbar background color

* fix: cannot add new line after toggle list

* feat: set ⭐ as the default icon of getting started

* fix: the titlebar overflows when the title level is too deep

* fix: integration test

* fix: openAI hint text overflow

* fix: integration tests

frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_skin_tone.dart

@@ -1,5 +1,4 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:emoji_mart/emoji_mart.dart';
@@ -10,6 +9,11 @@ import 'package:flutter/material.dart';
 // use a temporary global value to store last selected skin tone
 EmojiSkinTone? lastSelectedEmojiSkinTone;
 
+@visibleForTesting
+ValueKey emojiSkinToneKey(String icon) {
+  return ValueKey('emoji_skin_tone_$icon');
+}
+
 class FlowyEmojiSkinToneSelector extends StatefulWidget {
   const FlowyEmojiSkinToneSelector({
     super.key,
@@ -26,73 +30,59 @@ class FlowyEmojiSkinToneSelector extends StatefulWidget {
 class _FlowyEmojiSkinToneSelectorState
     extends State<FlowyEmojiSkinToneSelector> {
   EmojiSkinTone skinTone = EmojiSkinTone.none;
+  final controller = PopoverController();
 
   @override
   Widget build(BuildContext context) {
-    return PopoverActionList<EmojiSkinToneWrapper>(
+    return AppFlowyPopover(
       direction: PopoverDirection.bottomWithCenterAligned,
-      offset: const Offset(0, 8),
-      actions: EmojiSkinTone.values
-          .map((action) => EmojiSkinToneWrapper(action))
-          .toList(),
-      buildChild: (controller) {
-        return FlowyTooltip(
-          message: LocaleKeys.emoji_selectSkinTone.tr(),
-          child: FlowyIconButton(
-            icon: Padding(
-              // add a left padding to align the emoji center
-              padding: const EdgeInsets.only(
-                left: 3.0,
-              ),
-              child: FlowyText(
-                lastSelectedEmojiSkinTone?.icon ?? '✋',
-                fontSize: 22.0,
-              ),
-            ),
-            onPressed: () => controller.show(),
-          ),
+      controller: controller,
+      popupBuilder: (context) {
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: EmojiSkinTone.values
+              .map(
+                (e) => _buildIconButton(
+                  e.icon,
+                  () {
+                    setState(() => lastSelectedEmojiSkinTone = e);
+                    widget.onEmojiSkinToneChanged(e);
+                    controller.close();
+                  },
+                ),
+              )
+              .toList(),
         );
       },
-      onSelected: (action, controller) async {
-        widget.onEmojiSkinToneChanged(action.inner);
-        setState(() {
-          lastSelectedEmojiSkinTone = action.inner;
-        });
-        controller.close();
-      },
+      child: FlowyTooltip(
+        message: LocaleKeys.emoji_selectSkinTone.tr(),
+        child: _buildIconButton(
+          lastSelectedEmojiSkinTone?.icon ?? '✋',
+          () => controller.show(),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildIconButton(String icon, VoidCallback onPressed) {
+    return FlowyIconButton(
+      key: emojiSkinToneKey(icon),
+      icon: Padding(
+        // add a left padding to align the emoji center
+        padding: const EdgeInsets.only(
+          left: 3.0,
+        ),
+        child: FlowyText(
+          icon,
+          fontSize: 22.0,
+        ),
+      ),
+      onPressed: onPressed,
     );
   }
 }
 
-class EmojiSkinToneWrapper extends ActionCell {
-  EmojiSkinToneWrapper(this.inner);
-
-  final EmojiSkinTone inner;
-
-  Widget? icon(Color iconColor) => null;
-
-  @override
-  String get name {
-    final String i18n;
-    switch (inner) {
-      case EmojiSkinTone.none:
-        i18n = LocaleKeys.emoji_skinTone_default.tr();
-      case EmojiSkinTone.light:
-        i18n = LocaleKeys.emoji_skinTone_light.tr();
-      case EmojiSkinTone.mediumLight:
-        i18n = LocaleKeys.emoji_skinTone_mediumLight.tr();
-      case EmojiSkinTone.medium:
-        i18n = LocaleKeys.emoji_skinTone_medium.tr();
-      case EmojiSkinTone.mediumDark:
-        i18n = LocaleKeys.emoji_skinTone_mediumDark.tr();
-      case EmojiSkinTone.dark:
-        i18n = LocaleKeys.emoji_skinTone_dark.tr();
-    }
-    return '${inner.icon} $i18n';
-  }
-}
-
-extension on EmojiSkinTone {
+extension EmojiSkinToneIcon on EmojiSkinTone {
   String get icon {
     switch (this) {
       case EmojiSkinTone.none:

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_document.dart

@@ -123,7 +123,7 @@ class _RowEditorState extends State<RowEditor> {
                           scrollController: widget.scrollController,
                           styleCustomizer: EditorStyleCustomizer(
                             context: context,
-                            padding: const EdgeInsets.symmetric(horizontal: 10),
+                            padding: const EdgeInsets.only(left: 16, right: 54),
                           ),
                           showParagraphPlaceholder: (editorState, node) =>
                               editorState.document.isEmpty,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/auto_completion_node_widget.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/build_context_extension.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/text_robot.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/service/openai_client.dart';
@@ -7,6 +8,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/wid
 import 'package:appflowy/user/application/user_service.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/style_widget/text_field.dart';
@@ -15,8 +17,6 @@ import 'package:flowy_infra_ui/widget/buttons/secondary_button.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:http/http.dart' as http;
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:provider/provider.dart';
 
 class AutoCompletionBlockKeys {
@@ -169,9 +169,12 @@ class _AutoCompletionBlockComponentState
     return FlowyTextField(
       hintText: LocaleKeys.document_plugins_autoGeneratorHintText.tr(),
       controller: controller,
-      maxLines: 3,
+      maxLines: 5,
       focusNode: textFieldFocusNode,
       autoFocus: false,
+      hintTextConstraints: const BoxConstraints(
+        maxHeight: double.infinity,
+      ),
     );
   }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_shortcut_event.dart

@@ -70,9 +70,12 @@ CharacterShortcutEvent insertChildNodeInsideToggleList = CharacterShortcutEvent(
         // insert a toggle list block below the current toggle list block
         transaction
           ..deleteText(node, selection.startIndex, slicedDelta.length)
-          ..insertNode(
+          ..insertNodes(
             selection.start.path.next,
-            toggleListBlockNode(collapsed: true, delta: slicedDelta),
+            [
+              toggleListBlockNode(collapsed: true, delta: slicedDelta),
+              paragraphNode(),
+            ],
           )
           ..afterSelection = Selection.collapsed(
             Position(path: selection.start.path.next, offset: 0),