feat: integrate add new page button on mobile (#5450)

* chore: replace home icon

* feat: implement add new page button

* chore: refactor navigation bottom items

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

@@ -1,7 +1,37 @@
 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/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/workspace/application/workspace/workspace_service.dart';
+import 'package:appflowy_backend/dispatch/dispatch.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
+const _homeLabel = 'home';
+const _addLabel = 'add';
+const _notificationLabel = 'notification';
+final _items = <BottomNavigationBarItem>[
+  const BottomNavigationBarItem(
+    label: _homeLabel,
+    icon: FlowySvg(FlowySvgs.m_home_unselected_m),
+    activeIcon: FlowySvg(FlowySvgs.m_home_selected_m, blendMode: null),
+  ),
+  const BottomNavigationBarItem(
+    label: _addLabel,
+    icon: FlowySvg(FlowySvgs.m_home_add_m),
+  ),
+  const BottomNavigationBarItem(
+    label: _notificationLabel,
+    icon: FlowySvg(FlowySvgs.m_home_notification_m),
+    activeIcon: FlowySvg(
+      FlowySvgs.m_home_notification_m,
+    ),
+  ),
+];
+
 /// Builds the "shell" for the app by building a Scaffold with a
 /// BottomNavigationBar, where [child] is placed in the body of the Scaffold.
 class MobileBottomNavigationBar extends StatelessWidget {
@@ -16,8 +46,6 @@ class MobileBottomNavigationBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final style = Theme.of(context);
-
     return Scaffold(
       body: navigationShell,
       bottomNavigationBar: Theme(
@@ -31,26 +59,7 @@ class MobileBottomNavigationBar extends StatelessWidget {
           enableFeedback: false,
           type: BottomNavigationBarType.fixed,
           elevation: 0,
-          items: <BottomNavigationBarItem>[
-            const BottomNavigationBarItem(
-              label: 'home',
-              icon: FlowySvg(FlowySvgs.m_home_unselected_m),
-              activeIcon:
-                  FlowySvg(FlowySvgs.m_home_selected_m, blendMode: null),
-            ),
-            const BottomNavigationBarItem(
-              label: 'add',
-              icon: FlowySvg(FlowySvgs.m_home_add_m),
-            ),
-            BottomNavigationBarItem(
-              label: 'notification',
-              icon: const FlowySvg(FlowySvgs.m_home_notification_m),
-              activeIcon: FlowySvg(
-                FlowySvgs.m_home_notification_m,
-                color: style.colorScheme.primary,
-              ),
-            ),
-          ],
+          items: _items,
           currentIndex: navigationShell.currentIndex,
           onTap: (int bottomBarIndex) => _onTap(context, bottomBarIndex),
         ),
@@ -61,6 +70,11 @@ class MobileBottomNavigationBar extends StatelessWidget {
   /// Navigate to the current location of the branch at the provided index when
   /// tapping an item in the BottomNavigationBar.
   void _onTap(BuildContext context, int bottomBarIndex) {
+    if (_items[bottomBarIndex].label == _addLabel) {
+      // show an add dialog
+      _showCreatePageBottomSheet(context);
+      return;
+    }
     // When navigating to a new branch, it's recommended to use the goBranch
     // method, as doing so makes sure the last navigation state of the
     // Navigator for the branch is restored.
@@ -73,4 +87,40 @@ class MobileBottomNavigationBar extends StatelessWidget {
       initialLocation: bottomBarIndex == navigationShell.currentIndex,
     );
   }
+
+  void _showCreatePageBottomSheet(BuildContext context) {
+    showMobileBottomSheet(
+      context,
+      showHeader: true,
+      title: LocaleKeys.sideBar_addAPage.tr(),
+      showDragHandle: true,
+      showCloseButton: true,
+      useRootNavigator: true,
+      builder: (sheetContext) {
+        return AddNewPageWidgetBottomSheet(
+          view: ViewPB(),
+          onAction: (layout) async {
+            Navigator.of(sheetContext).pop();
+            final currentWorkspaceId =
+                await FolderEventReadCurrentWorkspace().send();
+            await currentWorkspaceId.fold((s) async {
+              final workspaceService = WorkspaceService(workspaceId: s.id);
+              final result = await workspaceService.createView(
+                name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+                viewSection: ViewSectionPB.Private,
+                layout: layout,
+              );
+              result.fold((s) {
+                context.pushView(s);
+              }, (e) {
+                Log.error('Failed to create new page: $e');
+              });
+            }, (e) {
+              Log.error('Failed to read current workspace: $e');
+            });
+          },
+        );
+      },
+    );
+  }
 }

frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart

@@ -334,11 +334,9 @@ class _SingleMobileInnerViewItemState extends State<SingleMobileInnerViewItem> {
       child: Padding(
         padding: const EdgeInsets.only(right: 6.0, top: 6.0, bottom: 6.0),
         child: FlowySvg(
-                 widget.isExpanded 
-                   ? FlowySvgs.m_expand_s
-                   : FlowySvgs.m_collapse_s,
-                blendMode: null,
-              ),
+          widget.isExpanded ? FlowySvgs.m_expand_s : FlowySvgs.m_collapse_s,
+          blendMode: null,
+        ),
       ),
       onTap: () {
         context

frontend/appflowy_flutter/lib/workspace/application/workspace/workspace_service.dart

@@ -15,12 +15,12 @@ class WorkspaceService {
     required ViewSectionPB viewSection,
     String? desc,
     int? index,
+    ViewLayoutPB? layout,
   }) {
     final payload = CreateViewPayloadPB.create()
       ..parentViewId = workspaceId
       ..name = name
-      // only allow document layout for the top-level views
-      ..layout = ViewLayoutPB.Document
+      ..layout = layout ?? ViewLayoutPB.Document
       ..section = viewSection;
 
     if (desc != null) {

frontend/resources/flowy_icons/24x/m_home_unselected.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.06 5.32771V5.33V7.23C10.06 8.23613 9.79557 8.92232 9.35895 9.35895C8.92232 9.79557 8.23613 10.06 7.23 10.06H5.33C4.32387 10.06 3.63768 9.79557 3.20105 9.35895C2.76443 8.92232 2.5 8.23613 2.5 7.23V5.33C2.5 4.32387 2.76441 3.63797 3.20191 3.20145C3.63959 2.76474 4.32828 2.5 5.34 2.5H7.24C8.24631 2.5 8.93213 2.76451 9.3673 3.20066C9.80228 3.63661 10.0646 4.322 10.06 5.32771Z" stroke="#191919"/>
-<path d="M18.6704 2H16.7704C14.5904 2 13.4404 3.15 13.4404 5.33V7.23C13.4404 9.41 14.5904 10.56 16.7704 10.56H18.6704C20.8504 10.56 22.0004 9.41 22.0004 7.23V5.33C22.0004 3.15 20.8504 2 18.6704 2Z" fill="#191919"/>
-<path d="M18.6704 13.4302H16.7704C14.5904 13.4302 13.4404 14.5802 13.4404 16.7602V18.6602C13.4404 20.8402 14.5904 21.9902 16.7704 21.9902H18.6704C20.8504 21.9902 22.0004 20.8402 22.0004 18.6602V16.7602C22.0004 14.5802 20.8504 13.4302 18.6704 13.4302Z" fill="#191919"/>
-<path d="M7.24 13.4302H5.34C3.15 13.4302 2 14.5802 2 16.7602V18.6602C2 20.8502 3.15 22.0002 5.33 22.0002H7.23C9.41 22.0002 10.56 20.8502 10.56 18.6702V16.7702C10.57 14.5802 9.42 13.4302 7.24 13.4302Z" fill="#191919"/>
+<path d="M5.7 10.2H7.5C9.3 10.2 10.2 9.3 10.2 7.5V5.7C10.2 3.9 9.3 3 7.5 3H5.7C3.9 3 3 3.9 3 5.7V7.5C3 9.3 3.9 10.2 5.7 10.2Z" stroke="#171717" stroke-width="1.35" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5008 10.2H18.3008C20.1008 10.2 21.0008 9.3 21.0008 7.5V5.7C21.0008 3.9 20.1008 3 18.3008 3H16.5008C14.7008 3 13.8008 3.9 13.8008 5.7V7.5C13.8008 9.3 14.7008 10.2 16.5008 10.2Z" stroke="#171717" stroke-width="1.35" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5008 20.9998H18.3008C20.1008 20.9998 21.0008 20.0998 21.0008 18.2998V16.4998C21.0008 14.6998 20.1008 13.7998 18.3008 13.7998H16.5008C14.7008 13.7998 13.8008 14.6998 13.8008 16.4998V18.2998C13.8008 20.0998 14.7008 20.9998 16.5008 20.9998Z" stroke="#171717" stroke-width="1.35" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.7 20.9998H7.5C9.3 20.9998 10.2 20.0998 10.2 18.2998V16.4998C10.2 14.6998 9.3 13.7998 7.5 13.7998H5.7C3.9 13.7998 3 14.6998 3 16.4998V18.2998C3 20.0998 3.9 20.9998 5.7 20.9998Z" stroke="#171717" stroke-width="1.35" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>