0.3.8 launch review

frontend/appflowy_flutter/integration_test/document/document_with_cover_image_test.dart

@@ -22,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();
@@ -58,14 +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.editor.tapGettingStartedIcon();
       await tester.tapEmoji('😀');
       tester.expectToSeeDocumentIcon('😀');
 
@@ -95,18 +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.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
@@ -122,8 +114,7 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      await tester.editor.hoverOnCoverToolbar();
-      await tester.editor.tapAddIconButton();
+      await tester.editor.tapGettingStartedIcon();
 
       // click the shuffle button
       await tester.tapButton(
@@ -136,8 +127,7 @@ void main() {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
 
-      await tester.editor.hoverOnCoverToolbar();
-      await tester.editor.tapAddIconButton();
+      await tester.editor.tapGettingStartedIcon();
 
       final searchEmojiTextField = find.byWidgetPredicate(
         (widget) =>

frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart

@@ -60,14 +60,23 @@ class EditorOperations {
     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.text(EmojiSkinToneWrapper(skinTone).name);
+    final skinToneButton = find.byKey(emojiSkinToneKey(skinTone.icon));
     await tester.tapButton(skinToneButton);
   }
 

frontend/appflowy_flutter/integration_test/util/expectation.dart

@@ -12,7 +12,7 @@ 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.

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

@@ -24,7 +24,6 @@ class BottomSheetActionWidget extends StatelessWidget {
       icon: FlowySvg(
         svg,
         size: const Size.square(22.0),
-        blendMode: BlendMode.dst,
         color: iconColor,
       ),
       label: Text(text),

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(),
+        ),
+      ),
     );
   }
-}
 
-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';
+  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,
+    );
   }
 }
 
-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),

frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart

@@ -106,16 +106,20 @@ extension ViewExtension on ViewPB {
 
   FlowySvgData get iconData => layout.icon;
 
-  Future<List<ViewPB>> getAncestors({bool includeSelf = false}) async {
+  Future<List<ViewPB>> getAncestors({
+    bool includeSelf = false,
+    bool includeRoot = false,
+  }) async {
     final ancestors = <ViewPB>[];
     if (includeSelf) {
-      ancestors.add(this);
+      final self = await ViewBackendService.getView(id);
+      ancestors.add(self.getLeftOrNull<ViewPB>() ?? this);
     }
     var parent = await ViewBackendService.getView(parentViewId);
     while (parent.isLeft()) {
       // parent is not null
       final view = parent.getLeftOrNull<ViewPB>();
-      if (view == null) {
+      if (view == null || (!includeRoot && view.parentViewId.isEmpty)) {
         break;
       }
       ancestors.add(view);

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_folder.dart

@@ -18,6 +18,12 @@ class SidebarFolder extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // check if there is any duplicate views
+    final views = this.views.toSet().toList();
+    final favoriteViews = this.favoriteViews.toSet().toList();
+    assert(views.length == this.views.length);
+    assert(favoriteViews.length == favoriteViews.length);
+
     return ValueListenableBuilder(
       valueListenable: getIt<MenuSharedState>().notifier,
       builder: (context, value, child) {
@@ -27,6 +33,7 @@ class SidebarFolder extends StatelessWidget {
             // favorite
             if (favoriteViews.isNotEmpty) ...[
               FavoriteFolder(
+                // remove the duplicate views
                 views: favoriteViews,
               ),
               const VSpace(10),

frontend/appflowy_flutter/lib/workspace/presentation/home/toast.dart

@@ -55,6 +55,7 @@ void showSnackBarMessage(
 }) {
   ScaffoldMessenger.of(context).showSnackBar(
     SnackBar(
+      backgroundColor: Theme.of(context).colorScheme.onSecondary,
       action: !showCancel
           ? null
           : SnackBarAction(
@@ -66,7 +67,6 @@ void showSnackBarMessage(
             ),
       content: FlowyText(
         message,
-        color: Theme.of(context).colorScheme.onSurface,
       ),
     ),
   );

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart

@@ -44,8 +44,8 @@ void showEmojiPickerMenu(
     builder: (context) => Material(
       type: MaterialType.transparency,
       child: Container(
-        width: 300,
-        height: 250,
+        width: 360,
+        height: 380,
         padding: const EdgeInsets.all(4.0),
         decoration: FlowyDecoration.decoration(
           Theme.of(context).cardColor,