fix: + button in the navigation bar doesn't work when the space is not initialized (#5862)

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_folders.dart

@@ -1,10 +1,8 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/application/mobile_router.dart';
-import 'package:appflowy/mobile/presentation/home/home.dart';
 import 'package:appflowy/mobile/presentation/home/section_folder/mobile_home_section_folder.dart';
 import 'package:appflowy/mobile/presentation/home/space/mobile_space.dart';
-import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
@@ -33,21 +31,10 @@ class MobileFolders extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MultiBlocProvider(
+    final workspaceId =
-      providers: [
+        context.read<UserWorkspaceBloc>().state.currentWorkspace?.workspaceId ??
-        BlocProvider(
+            '';
-          create: (_) => SidebarSectionsBloc()
+    return BlocListener<UserWorkspaceBloc, UserWorkspaceState>(
-            ..add(SidebarSectionsEvent.initial(user, workspaceId)),
-        ),
-        BlocProvider(
-          create: (_) => FavoriteBloc()..add(const FavoriteEvent.initial()),
-        ),
-        BlocProvider(
-          create: (_) => SpaceBloc()
-            ..add(SpaceEvent.initial(user, workspaceId, openFirstPage: false)),
-        ),
-      ],
-      child: BlocListener<UserWorkspaceBloc, UserWorkspaceState>(
       listener: (context, state) {
         context.read<SidebarSectionsBloc>().add(
               SidebarSectionsEvent.initial(
@@ -62,30 +49,22 @@ class MobileFolders extends StatelessWidget {
               ),
             );
       },
-        child: MultiBlocListener(
+      child: const _MobileFolder(),
-          listeners: [
+    );
-            BlocListener<SpaceBloc, SpaceState>(
-              listenWhen: (p, c) =>
-                  p.lastCreatedPage?.id != c.lastCreatedPage?.id,
-              listener: (context, state) {
-                final lastCreatedPage = state.lastCreatedPage;
-                if (lastCreatedPage != null) {
-                  context.pushView(lastCreatedPage);
   }
-              },
-            ),
-            BlocListener<SidebarSectionsBloc, SidebarSectionsState>(
-              listenWhen: (p, c) =>
-                  p.lastCreatedRootView?.id != c.lastCreatedRootView?.id,
-              listener: (context, state) {
-                final lastCreatedPage = state.lastCreatedRootView;
-                if (lastCreatedPage != null) {
-                  context.pushView(lastCreatedPage);
 }
-              },
+
-            ),
+class _MobileFolder extends StatefulWidget {
-          ],
+  const _MobileFolder();
-          child: BlocBuilder<SidebarSectionsBloc, SidebarSectionsState>(
+
+  @override
+  State<_MobileFolder> createState() => _MobileFolderState();
+}
+
+class _MobileFolderState extends State<_MobileFolder> {
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<SidebarSectionsBloc, SidebarSectionsState>(
       builder: (context, state) {
         return SlidableAutoCloseBehavior(
           child: Column(
@@ -102,9 +81,6 @@ class MobileFolders extends StatelessWidget {
           ),
         );
       },
-          ),
-        ),
-      ),
     );
   }
 

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page.dart

@@ -7,7 +7,9 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/auth/auth_service.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
 import 'package:appflowy/workspace/application/recent/cached_recent_service.dart';
+import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/errors/workspace_failed_screen.dart';
 import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
@@ -102,6 +104,7 @@ class _MobileHomePageState extends State<MobileHomePage> {
   @override
   void dispose() {
     getIt<MenuSharedState>().removeLatestViewListener(_onLatestViewChange);
+
     super.dispose();
   }
 
@@ -134,6 +137,8 @@ class _MobileHomePageState extends State<MobileHomePage> {
             return const SizedBox.shrink();
           }
 
+          final workspaceId = state.currentWorkspace!.workspaceId;
+
           return Column(
             children: [
               // Header
@@ -149,9 +154,36 @@ class _MobileHomePageState extends State<MobileHomePage> {
               ),
 
               Expanded(
-                child: BlocProvider(
+                child: MultiBlocProvider(
-                  create: (context) =>
+                  providers: [
-                      SpaceOrderBloc()..add(const SpaceOrderEvent.initial()),
+                    BlocProvider(
+                      create: (_) => SpaceOrderBloc()
+                        ..add(const SpaceOrderEvent.initial()),
+                    ),
+                    BlocProvider(
+                      create: (_) => SidebarSectionsBloc()
+                        ..add(
+                          SidebarSectionsEvent.initial(
+                            widget.userProfile,
+                            workspaceId,
+                          ),
+                        ),
+                    ),
+                    BlocProvider(
+                      create: (_) =>
+                          FavoriteBloc()..add(const FavoriteEvent.initial()),
+                    ),
+                    BlocProvider(
+                      create: (_) => SpaceBloc()
+                        ..add(
+                          SpaceEvent.initial(
+                            widget.userProfile,
+                            workspaceId,
+                            openFirstPage: false,
+                          ),
+                        ),
+                    ),
+                  ],
                   child: MobileSpaceTab(
                     userProfile: widget.userProfile,
                   ),

frontend/appflowy_flutter/lib/mobile/presentation/home/section_folder/mobile_home_section_folder.dart

@@ -1,6 +1,6 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/application/mobile_router.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/home/section_folder/mobile_home_section_folder_header.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_view_item.dart';
 import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
@@ -43,11 +43,30 @@ class MobileSectionFolder extends StatelessWidget {
                   onPressed: () => context
                       .read<FolderBloc>()
                       .add(const FolderEvent.expandOrUnExpand()),
-                  onAdded: () {
+                  onAdded: () => _createNewPage(context),
+                ),
+              ),
+              if (state.isExpanded)
+                Padding(
+                  padding: const EdgeInsets.only(
+                    left: HomeSpaceViewSizes.leftPadding,
+                  ),
+                  child: _Pages(
+                    views: views,
+                    spaceType: spaceType,
+                  ),
+                ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+
+  void _createNewPage(BuildContext context) {
     context.read<SidebarSectionsBloc>().add(
           SidebarSectionsEvent.createRootViewInSection(
-                            name: LocaleKeys.menuAppHeader_defaultNewPageName
+            name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-                                .tr(),
             index: 0,
             viewSection: spaceType.toViewSectionPB,
           ),
@@ -55,11 +74,23 @@ class MobileSectionFolder extends StatelessWidget {
     context.read<FolderBloc>().add(
           const FolderEvent.expandOrUnExpand(isExpanded: true),
         );
-                  },
+  }
-                ),
+}
-              ),
+
-              if (state.isExpanded)
+class _Pages extends StatelessWidget {
-                ...views.map(
+  const _Pages({
+    required this.views,
+    required this.spaceType,
+  });
+
+  final List<ViewPB> views;
+  final FolderSpaceType spaceType;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: views
+          .map(
             (view) => MobileViewItem(
               key: ValueKey(
                 '${FolderSpaceType.private.name} ${view.id}',
@@ -86,11 +117,8 @@ class MobileSectionFolder extends StatelessWidget {
                 );
               },
             ),
-                ),
+          )
-            ],
+          .toList(),
-          );
-        },
-      ),
     );
   }
 }

frontend/appflowy_flutter/lib/mobile/presentation/home/section_folder/mobile_home_section_folder_header.dart

@@ -32,6 +32,7 @@ class _MobileSectionFolderHeaderState extends State<MobileSectionFolderHeader> {
   Widget build(BuildContext context) {
     return Row(
       children: [
+        const HSpace(HomeSpaceViewSizes.mHorizontalPadding),
         Expanded(
           child: FlowyButton(
             text: FlowyText.medium(
@@ -57,15 +58,19 @@ class _MobileSectionFolderHeaderState extends State<MobileSectionFolderHeader> {
             },
           ),
         ),
-        FlowyIconButton(
+        GestureDetector(
-          key: mobileCreateNewPageButtonKey,
+          behavior: HitTestBehavior.translucent,
-          hoverColor: Theme.of(context).colorScheme.secondaryContainer,
+          onTap: widget.onAdded,
-          height: HomeSpaceViewSizes.mViewButtonDimension,
+          child: Container(
-          width: HomeSpaceViewSizes.mViewButtonDimension,
+            // expand the touch area
-          icon: const FlowySvg(
+            margin: const EdgeInsets.symmetric(
+              horizontal: HomeSpaceViewSizes.mHorizontalPadding,
+              vertical: 8.0,
+            ),
+            child: const FlowySvg(
               FlowySvgs.m_space_add_s,
             ),
-          onPressed: widget.onAdded,
+          ),
         ),
       ],
     );

frontend/appflowy_flutter/lib/mobile/presentation/home/space/mobile_space.dart

@@ -4,7 +4,6 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/home/space/mobile_space_header.dart';
 import 'package:appflowy/mobile/presentation/home/space/mobile_space_menu.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_view_item.dart';
-import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
@@ -15,26 +14,9 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
-class MobileSpace extends StatefulWidget {
+class MobileSpace extends StatelessWidget {
   const MobileSpace({super.key});
 
-  @override
-  State<MobileSpace> createState() => _MobileSpaceState();
-}
-
-class _MobileSpaceState extends State<MobileSpace> {
-  @override
-  void initState() {
-    super.initState();
-    createNewPageNotifier.addListener(_createNewPage);
-  }
-
-  @override
-  void dispose() {
-    createNewPageNotifier.removeListener(_createNewPage);
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<SpaceBloc, SpaceState>(
@@ -50,7 +32,7 @@ class _MobileSpaceState extends State<MobileSpace> {
             MobileSpaceHeader(
               isExpanded: state.isExpanded,
               space: currentSpace,
-              onAdded: () => _showCreatePageMenu(currentSpace),
+              onAdded: () => _showCreatePageMenu(context, currentSpace),
               onPressed: () => _showSpaceMenu(context),
             ),
             Padding(
@@ -91,16 +73,7 @@ class _MobileSpaceState extends State<MobileSpace> {
     );
   }
 
-  void _createNewPage() {
+  void _showCreatePageMenu(BuildContext context, ViewPB space) {
-    context.read<SpaceBloc>().add(
-          SpaceEvent.createPage(
-            name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-            layout: ViewLayoutPB.Document,
-          ),
-        );
-  }
-
-  void _showCreatePageMenu(ViewPB space) {
     final title = space.name;
     showMobileBottomSheet(
       context,

frontend/appflowy_flutter/lib/mobile/presentation/home/tab/mobile_space_tab.dart

@@ -1,16 +1,27 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/application/mobile_router.dart';
 import 'package:appflowy/mobile/presentation/home/favorite_folder/favorite_space.dart';
 import 'package:appflowy/mobile/presentation/home/home_space/home_space.dart';
 import 'package:appflowy/mobile/presentation/home/recent_folder/recent_space.dart';
 import 'package:appflowy/mobile/presentation/home/tab/_tab_bar.dart';
 import 'package:appflowy/mobile/presentation/home/tab/space_order_bloc.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
+import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
+import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
+import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.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:provider/provider.dart';
 
 class MobileSpaceTab extends StatefulWidget {
-  const MobileSpaceTab({super.key, required this.userProfile});
+  const MobileSpaceTab({
+    super.key,
+    required this.userProfile,
+  });
 
   final UserProfilePB userProfile;
 
@@ -22,10 +33,19 @@ class _MobileSpaceTabState extends State<MobileSpaceTab>
     with SingleTickerProviderStateMixin {
   TabController? tabController;
 
+  @override
+  void initState() {
+    super.initState();
+
+    mobileCreateNewPageNotifier.addListener(_createNewPage);
+  }
+
   @override
   void dispose() {
     tabController?.removeListener(_onTabChange);
     tabController?.dispose();
+    mobileCreateNewPageNotifier.removeListener(_createNewPage);
+
     super.dispose();
   }
 
@@ -33,6 +53,29 @@ class _MobileSpaceTabState extends State<MobileSpaceTab>
   Widget build(BuildContext context) {
     return Provider.value(
       value: widget.userProfile,
+      child: MultiBlocListener(
+        listeners: [
+          BlocListener<SpaceBloc, SpaceState>(
+            listenWhen: (p, c) =>
+                p.lastCreatedPage?.id != c.lastCreatedPage?.id,
+            listener: (context, state) {
+              final lastCreatedPage = state.lastCreatedPage;
+              if (lastCreatedPage != null) {
+                context.pushView(lastCreatedPage);
+              }
+            },
+          ),
+          BlocListener<SidebarSectionsBloc, SidebarSectionsState>(
+            listenWhen: (p, c) =>
+                p.lastCreatedRootView?.id != c.lastCreatedRootView?.id,
+            listener: (context, state) {
+              final lastCreatedPage = state.lastCreatedRootView;
+              if (lastCreatedPage != null) {
+                context.pushView(lastCreatedPage);
+              }
+            },
+          ),
+        ],
         child: BlocBuilder<SpaceOrderBloc, SpaceOrderState>(
           builder: (context, state) {
             if (state.isLoading) {
@@ -64,6 +107,7 @@ class _MobileSpaceTabState extends State<MobileSpaceTab>
             );
           },
         ),
+      ),
     );
   }
 
@@ -104,4 +148,27 @@ class _MobileSpaceTabState extends State<MobileSpaceTab>
       }
     }).toList();
   }
+
+  // quick create new page when clicking the add button in navigation bar
+  void _createNewPage() {
+    if (context.read<SpaceBloc>().state.spaces.isNotEmpty) {
+      context.read<SpaceBloc>().add(
+            SpaceEvent.createPage(
+              name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+              layout: ViewLayoutPB.Document,
+            ),
+          );
+    } else {
+      context.read<SidebarSectionsBloc>().add(
+            SidebarSectionsEvent.createRootViewInSection(
+              name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+              index: 0,
+              viewSection: FolderSpaceType.public.toViewSectionPB,
+            ),
+          );
+      context.read<FolderBloc>().add(
+            const FolderEvent.expandOrUnExpand(isExpanded: true),
+          );
+    }
+  }
 }

frontend/appflowy_flutter/lib/mobile/presentation/mobile_bottom_navigation_bar.dart

@@ -21,7 +21,7 @@ enum BottomNavigationBarActionType {
   notificationMultiSelect,
 }
 
-final PropertyValueNotifier<ViewLayoutPB?> createNewPageNotifier =
+final PropertyValueNotifier<ViewLayoutPB?> mobileCreateNewPageNotifier =
     PropertyValueNotifier(null);
 final ValueNotifier<BottomNavigationBarActionType> bottomNavigationBarType =
     ValueNotifier(BottomNavigationBarActionType.home);
@@ -232,7 +232,8 @@ class _HomePageNavigationBar extends StatelessWidget {
   void _onTap(BuildContext context, int bottomBarIndex) {
     if (_items[bottomBarIndex].label == _addLabel) {
       // show an add dialog
-      createNewPageNotifier.value = ViewLayoutPB.Document;
+      mobileCreateNewPageNotifier.value = ViewLayoutPB.Document;
+
       return;
     }
     // When navigating to a new branch, it's recommended to use the goBranch