fix: built in database height issue (#6866)

* fix: built in database height issue

* fix: use shrinkWrap to decide height

* fix: pageview for lazy rendering

frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/shared/share/share_button.dart';
 import 'package:appflowy/plugins/util.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy/workspace/application/view_info/view_info_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:appflowy/workspace/presentation/widgets/favorite_button.dart';
@@ -88,11 +89,11 @@ class _DatabaseTabBarViewState extends State<DatabaseTabBarView> {
     return MultiBlocProvider(
       providers: [
         BlocProvider<DatabaseTabBarBloc>(
-          create: (context) => DatabaseTabBarBloc(view: widget.view)
+          create: (_) => DatabaseTabBarBloc(view: widget.view)
             ..add(const DatabaseTabBarEvent.initial()),
         ),
         BlocProvider<ViewBloc>(
-          create: (context) =>
+          create: (_) =>
               ViewBloc(view: widget.view)..add(const ViewEvent.initial()),
         ),
       ],
@@ -100,7 +101,7 @@ class _DatabaseTabBarViewState extends State<DatabaseTabBarView> {
         listeners: [
           BlocListener<DatabaseTabBarBloc, DatabaseTabBarState>(
             listenWhen: (p, c) => p.selectedIndex != c.selectedIndex,
-            listener: (context, state) {
+            listener: (_, state) {
               _initialRowId = null;
               _pageController.jumpToPage(state.selectedIndex);
             },
@@ -132,15 +133,22 @@ class _DatabaseTabBarViewState extends State<DatabaseTabBarView> {
               builder: (context, state) =>
                   pageSettingBarExtensionFromState(state),
             ),
-            Expanded(
+            BlocBuilder<DatabaseTabBarBloc, DatabaseTabBarState>(
-              child: BlocBuilder<DatabaseTabBarBloc, DatabaseTabBarState>(
+              builder: (context, state) {
-                builder: (context, state) => PageView(
+                final content = PageView(
+                  controller: _pageController,
                   pageSnapping: false,
                   physics: const NeverScrollableScrollPhysics(),
-                  controller: _pageController,
                   children: pageContentFromState(state),
-                ),
+                );
-              ),
+
+                if (widget.shrinkWrap) {
+                  final layout = state.tabBars[state.selectedIndex].layout;
+                  return SizedBox(height: layout.pluginHeight, child: content);
+                }
+
+                return Expanded(child: content);
+              },
             ),
           ],
         ),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/built_in_page_widget.dart

@@ -1,7 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
-import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/tabs/tabs_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
@@ -62,41 +61,35 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
         if (snapshot.hasData && page != null) {
           return _build(context, page);
         }
+
         if (snapshot.connectionState == ConnectionState.done) {
-          WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+          // Delete the page if not found
-            // just delete the page if it is not found
+          WidgetsBinding.instance.addPostFrameCallback((_) => _deletePage());
-            _deletePage();
+
-          });
+          return const Center(child: FlowyText('Cannot load the page'));
-          return const Center(
-            child: FlowyText('Cannot load the page'),
-          );
         }
-        return const Center(
+
-          child: CircularProgressIndicator(),
+        return const Center(child: CircularProgressIndicator());
-        );
       },
       future: future,
     );
   }
 
-  Widget _build(BuildContext context, ViewPB viewPB) {
+  Widget _build(BuildContext context, ViewPB view) {
     return MouseRegion(
       onEnter: (_) => widget.editorState.service.scrollService?.disable(),
       onExit: (_) => widget.editorState.service.scrollService?.enable(),
-      child: SizedBox(
-        height: viewPB.pluginType == PluginType.calendar ? 700 : 400,
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-            _buildMenu(context, viewPB),
+          _buildMenu(context, view),
-            Expanded(child: _buildPage(context, viewPB)),
+          _buildPage(context, view),
         ],
       ),
-      ),
     );
   }
 
-  Widget _buildPage(BuildContext context, ViewPB viewPB) {
+  Widget _buildPage(BuildContext context, ViewPB view) {
     return Focus(
       focusNode: focusNode,
       onFocusChange: (value) {
@@ -104,11 +97,11 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
           widget.editorState.service.selectionService.clearSelection();
         }
       },
-      child: widget.builder(viewPB),
+      child: widget.builder(view),
     );
   }
 
-  Widget _buildMenu(BuildContext context, ViewPB viewPB) {
+  Widget _buildMenu(BuildContext context, ViewPB view) {
     return Row(
       mainAxisSize: MainAxisSize.min,
       mainAxisAlignment: MainAxisAlignment.center,
@@ -116,7 +109,7 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
         // information
         FlowyIconButton(
           tooltipText: LocaleKeys.tooltip_referencePage.tr(
-            namedArgs: {'name': viewPB.layout.name},
+            namedArgs: {'name': view.layout.name},
           ),
           width: 24,
           height: 24,
@@ -147,8 +140,8 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
               case _ActionType.viewDatabase:
                 getIt<TabsBloc>().add(
                   TabsEvent.openPlugin(
-                    plugin: viewPB.plugin(),
+                    plugin: view.plugin(),
-                    view: viewPB,
+                    view: view,
                   ),
                 );
                 break;
@@ -172,10 +165,7 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
   }
 }
 
-enum _ActionType {
+enum _ActionType { viewDatabase, delete }
-  viewDatabase,
-  delete,
-}
 
 class _ActionWrapper extends ActionCell {
   _ActionWrapper(this.inner);

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

@@ -324,6 +324,16 @@ extension ViewLayoutExtension on ViewLayoutPB {
         ViewLayoutPB.Document => '',
         _ => LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
       };
+
+  double get pluginHeight => switch (this) {
+        ViewLayoutPB.Grid ||
+        ViewLayoutPB.Board ||
+        ViewLayoutPB.Document ||
+        ViewLayoutPB.Chat =>
+          450,
+        ViewLayoutPB.Calendar => 650,
+        _ => throw UnimplementedError(),
+      };
 }
 
 extension ViewFinder on List<ViewPB> {