fix: update database layout in document (#2757)

* fix: update database layout in document

* feat: create or ref calendar

* Update frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/calendar/calendar_menu_item.dart

Co-authored-by: Mathias Mogensen <[email protected]>

* fix: stop listen

* feat: remove the redundant database view files

* chore: rename the grid state

---------

Co-authored-by: Mathias Mogensen <[email protected]>
Co-authored-by: Lucas.Xu <[email protected]>

frontend/appflowy_flutter/assets/images/editor/calendar.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Calendar / Calendar_Days">
+<path id="Vector" d="M8 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002V8M8 4H16M8 4V2M16 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V8M16 4V2M4 8V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V8M4 8H20M16 16H16.002L16.002 16.002L16 16.002V16ZM12 16H12.002L12.002 16.002L12 16.002V16ZM8 16H8.002L8.00195 16.002L8 16.002V16ZM16.002 12V12.002L16 12.002V12H16.002ZM12 12H12.002L12.002 12.002L12 12.002V12ZM8 12H8.002L8.00195 12.002L8 12.002V12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

frontend/appflowy_flutter/assets/translations/en.json

@@ -368,11 +368,16 @@
       "grid": {
         "selectAGridToLinkTo": "Select a Grid to link to",
         "createANewGrid": "Create a new Grid"
+      },
+      "calendar": {
+        "selectACalendarToLinkTo": "Select a Calendar to link to",
+        "createANewCalendar": "Create a new Calendar"
       }
     },
     "plugins": {
       "referencedBoard": "Referenced Board",
       "referencedGrid": "Referenced Grid",
+      "referencedCalendar": "Referenced Calendar",
       "autoGeneratorMenuItemName": "OpenAI Writer",
       "autoGeneratorTitleName": "OpenAI: Ask AI to write anything...",
       "autoGeneratorLearnMore": "Learn more",
@@ -461,6 +466,7 @@
       "noDateHint": "Unscheduled events will show up here",
       "clickToAdd": "Click to add to the calendar",
       "name": "Calendar layout"
-    }
+    },
+    "referencedCalendarPrefix": "View of"
   }
 }

frontend/appflowy_flutter/lib/plugins/blank/blank.dart

@@ -43,7 +43,7 @@ class BlankPagePluginWidgetBuilder extends PluginWidgetBuilder
   Widget get leftBarItem => FlowyText.medium(LocaleKeys.blankPageTitle.tr());
 
   @override
-  Widget buildWidget(PluginContext context) => const BlankPage();
+  Widget buildWidget({PluginContext? context}) => const BlankPage();
 
   @override
   List<NavigationItem> get navigationItems => [this];

frontend/appflowy_flutter/lib/plugins/database_view/board/board.dart

@@ -69,11 +69,11 @@ class BoardPluginWidgetBuilder extends PluginWidgetBuilder {
   Widget get leftBarItem => ViewLeftBarItem(view: view);
 
   @override
-  Widget buildWidget(PluginContext context) {
+  Widget buildWidget({PluginContext? context}) {
     notifier.isDeleted.addListener(() {
       notifier.isDeleted.value.fold(() => null, (deletedView) {
         if (deletedView.hasIndex()) {
-          context.onDeleted(view, deletedView.index);
+          context?.onDeleted(view, deletedView.index);
         }
       });
     });

frontend/appflowy_flutter/lib/plugins/database_view/calendar/calendar.dart

@@ -69,11 +69,11 @@ class CalendarPluginWidgetBuilder extends PluginWidgetBuilder {
   Widget get leftBarItem => ViewLeftBarItem(view: view);
 
   @override
-  Widget buildWidget(PluginContext context) {
+  Widget buildWidget({PluginContext? context}) {
     notifier.isDeleted.addListener(() {
       notifier.isDeleted.value.fold(() => null, (deletedView) {
         if (deletedView.hasIndex()) {
-          context.onDeleted(view, deletedView.index);
+          context?.onDeleted(view, deletedView.index);
         }
       });
     });

frontend/appflowy_flutter/lib/plugins/database_view/database_view.dart

@@ -31,6 +31,12 @@ class DatabaseViewPlugin extends Plugin {
   @override
   PluginWidgetBuilder get widgetBuilder => _innerPlugin.widgetBuilder;
 
+  @override
+  void dispose() {
+    _viewListener.stop();
+    super.dispose();
+  }
+
   void _listenOnLayoutChanged() {
     _viewListener.start(
       onViewUpdated: (result) {

frontend/appflowy_flutter/lib/plugins/database_view/grid/grid.dart

@@ -69,11 +69,11 @@ class GridPluginWidgetBuilder extends PluginWidgetBuilder {
   Widget get leftBarItem => ViewLeftBarItem(view: view);
 
   @override
-  Widget buildWidget(PluginContext context) {
+  Widget buildWidget({PluginContext? context}) {
     notifier.isDeleted.addListener(() {
       notifier.isDeleted.value.fold(() => null, (deletedView) {
         if (deletedView.hasIndex()) {
-          context.onDeleted(view, deletedView.index);
+          context?.onDeleted(view, deletedView.index);
         }
       });
     });

frontend/appflowy_flutter/lib/plugins/database_view/widgets/database_view_widget.dart

@@ -0,0 +1,75 @@
+import 'package:appflowy/startup/plugin/plugin.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/application/view/view_listener.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:flutter/material.dart';
+
+class DatabaseViewWidget extends StatefulWidget {
+  const DatabaseViewWidget({
+    super.key,
+    required this.view,
+  });
+
+  final ViewPB view;
+
+  @override
+  State<DatabaseViewWidget> createState() => _DatabaseViewWidgetState();
+}
+
+class _DatabaseViewWidgetState extends State<DatabaseViewWidget> {
+  /// Listens to the view updates.
+  late final ViewListener _listener;
+
+  /// Notifies the view layout type changes. When the layout type changes,
+  /// the widget of the view will be updated.
+  late final ValueNotifier<ViewLayoutPB> _layoutTypeChangeNotifier;
+
+  /// The view will be updated by the [ViewListener].
+  late ViewPB view;
+
+  @override
+  void initState() {
+    super.initState();
+
+    view = widget.view;
+    _listenOnViewUpdated();
+  }
+
+  @override
+  void dispose() {
+    _layoutTypeChangeNotifier.dispose();
+    _listener.stop();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<ViewLayoutPB>(
+      valueListenable: _layoutTypeChangeNotifier,
+      builder: (_, __, ___) {
+        return makePlugin(pluginType: view.pluginType, data: view)
+            .widgetBuilder
+            .buildWidget();
+      },
+    );
+  }
+
+  void _listenOnViewUpdated() {
+    _listener = ViewListener(view: widget.view)
+      ..start(
+        onViewUpdated: (result) {
+          result.fold(
+            (updatedView) {
+              if (mounted) {
+                view = updatedView;
+                _layoutTypeChangeNotifier.value = view.layout;
+              }
+            },
+            (r) => null,
+          );
+        },
+      );
+
+    _layoutTypeChangeNotifier = ValueNotifier(widget.view.layout);
+  }
+}

frontend/appflowy_flutter/lib/plugins/document/document.dart

@@ -92,7 +92,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
   EdgeInsets get contentPadding => EdgeInsets.zero;
 
   @override
-  Widget buildWidget(PluginContext context) {
+  Widget buildWidget({PluginContext? context}) {
     notifier.isDeleted.addListener(() {
       notifier.isDeleted.value.fold(() => null, (deletedView) {
         if (deletedView.hasIndex()) {
@@ -107,7 +107,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
         builder: (_, state) {
           return DocumentPage(
             view: view,
-            onDeleted: () => context.onDeleted(view, deletedViewIndex),
+            onDeleted: () => context?.onDeleted(view, deletedViewIndex),
             key: ValueKey(view.id),
           );
         },

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/plugins/document/application/doc_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/option_action.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/block_action_list.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/database/referenced_database_menu_tem.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -45,9 +46,11 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
 
   late final slashMenuItems = [
     inlineGridMenuItem(documentBloc),
-    referenceGridMenuItem,
+    referencedGridMenuItem,
     inlineBoardMenuItem(documentBloc),
-    boardMenuItem,
+    referencedBoardMenuItem,
+    inlineCalendarMenuItem(documentBloc),
+    referencedCalendarMenuItem,
     calloutItem,
     mathEquationItem,
     codeBlockItem,
@@ -174,10 +177,13 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       ImageBlockKeys.type: ImageBlockComponentBuilder(
         configuration: configuration,
       ),
-      BoardBlockKeys.type: BoardBlockComponentBuilder(
+      DatabaseBlockKeys.gridType: DatabaseViewBlockComponentBuilder(
         configuration: configuration,
       ),
-      GridBlockKeys.type: GridBlockComponentBuilder(
+      DatabaseBlockKeys.boardType: DatabaseViewBlockComponentBuilder(
+        configuration: configuration,
+      ),
+      DatabaseBlockKeys.calendarType: DatabaseViewBlockComponentBuilder(
         configuration: configuration,
       ),
       CalloutBlockKeys.type: CalloutBlockComponentBuilder(

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

@@ -1,4 +1,4 @@
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/insert_page_command.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/view/view_service.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';

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

@@ -1,19 +1,11 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/application/database_view_service.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/board/board_node_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/grid/grid_node_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/workspace/application/view/view_service.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 
-class DatabaseBlockKeys {
-  const DatabaseBlockKeys._();
-
-  static const String parentID = 'parent_id';
-  static const String viewID = 'view_id';
-}
-
 extension InsertDatabase on EditorState {
   Future<void> insertInlinePage(String parentViewId, ViewPB childView) async {
     final selection = this.selection;
@@ -93,6 +85,8 @@ extension InsertDatabase on EditorState {
         return LocaleKeys.grid_referencedGridPrefix.tr();
       case ViewLayoutPB.Board:
         return LocaleKeys.board_referencedBoardPrefix.tr();
+      case ViewLayoutPB.Calendar:
+        return LocaleKeys.calendar_referencedCalendarPrefix.tr();
       default:
         throw UnimplementedError();
     }
@@ -101,9 +95,11 @@ extension InsertDatabase on EditorState {
   String _convertPageType(ViewPB viewPB) {
     switch (viewPB.layout) {
       case ViewLayoutPB.Grid:
-        return GridBlockKeys.type;
+        return DatabaseBlockKeys.gridType;
       case ViewLayoutPB.Board:
-        return BoardBlockKeys.type;
+        return DatabaseBlockKeys.boardType;
+      case ViewLayoutPB.Calendar:
+        return DatabaseBlockKeys.calendarType;
       default:
         throw Exception('Unknown layout type');
     }

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

@@ -243,6 +243,8 @@ class _LinkToPageMenuState extends State<LinkToPageMenu> {
         return 'editor/grid';
       case ViewLayoutPB.Board:
         return 'editor/board';
+      case ViewLayoutPB.Calendar:
+        return 'editor/calendar';
       default:
         throw Exception('Unknown layout type');
     }
@@ -258,6 +260,10 @@ extension on ViewLayoutPB {
       case ViewLayoutPB.Board:
         return LocaleKeys.document_slashMenu_board_selectABoardToLinkTo.tr();
 
+      case ViewLayoutPB.Calendar:
+        return LocaleKeys.document_slashMenu_calendar_selectACalendarToLinkTo
+            .tr();
+
       default:
         throw Exception('Unknown layout type');
     }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_menu_item.dart

@@ -1,26 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-
-SelectionMenuItem boardMenuItem = SelectionMenuItem(
-  name: LocaleKeys.document_plugins_referencedBoard.tr(),
-  icon: (editorState, onSelected, style) => SelectableSvgWidget(
-    name: 'editor/board',
-    isSelected: onSelected,
-    style: style,
-  ),
-  keywords: ['referenced', 'board', 'kanban'],
-  handler: (editorState, menuService, context) {
-    final container = Overlay.of(context);
-    showLinkToPageMenu(
-      container,
-      editorState,
-      menuService,
-      ViewLayoutPB.Board,
-    );
-  },
-);

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_view_menu_item.dart

@@ -1,35 +0,0 @@
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
-import 'package:appflowy/workspace/application/view/view_service.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/application/prelude.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/insert_page_command.dart';
-import 'package:easy_localization/easy_localization.dart';
-
-SelectionMenuItem inlineBoardMenuItem(DocumentBloc documentBloc) =>
-    SelectionMenuItem(
-      name: LocaleKeys.document_slashMenu_board_createANewBoard.tr(),
-      icon: (editorState, onSelected, style) => SelectableSvgWidget(
-        name: 'editor/board',
-        isSelected: onSelected,
-        style: style,
-      ),
-      keywords: ['board', 'kanban', 'database'],
-      handler: (editorState, menuService, context) async {
-        if (!documentBloc.view.hasParentViewId()) {
-          return;
-        }
-
-        final parentViewId = documentBloc.view.parentViewId;
-        ViewBackendService.createView(
-          parentViewId: parentViewId,
-          name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-          layoutType: ViewLayoutPB.Board,
-        ).then(
-          (value) => value
-              .swap()
-              .map((r) => editorState.insertInlinePage(parentViewId, r)),
-        );
-      },
-    );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_node_widget.dart → frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/database/database_view_block_component.dart

@@ -1,18 +1,22 @@
-import 'package:appflowy/plugins/database_view/board/presentation/board_page.dart';
+import 'package:appflowy/plugins/database_view/widgets/database_view_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/built_in_page_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/insert_page_command.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
-class BoardBlockKeys {
-  const BoardBlockKeys._();
+class DatabaseBlockKeys {
+  const DatabaseBlockKeys._();
 
-  static const String type = 'board';
+  static const String gridType = 'grid';
+  static const String boardType = 'board';
+  static const String calendarType = 'calendar';
+
+  static const String parentID = 'parent_id';
+  static const String viewID = 'view_id';
 }
 
-class BoardBlockComponentBuilder extends BlockComponentBuilder {
-  BoardBlockComponentBuilder({
+class DatabaseViewBlockComponentBuilder extends BlockComponentBuilder {
+  DatabaseViewBlockComponentBuilder({
     this.configuration = const BlockComponentConfiguration(),
   });
 
@@ -22,7 +26,7 @@ class BoardBlockComponentBuilder extends BlockComponentBuilder {
   @override
   BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
-    return BoardBlockComponentWidget(
+    return DatabaseBlockComponentWidget(
       key: node.key,
       node: node,
       configuration: configuration,
@@ -41,8 +45,8 @@ class BoardBlockComponentBuilder extends BlockComponentBuilder {
       node.attributes[DatabaseBlockKeys.viewID] is String;
 }
 
-class BoardBlockComponentWidget extends BlockComponentStatefulWidget {
-  const BoardBlockComponentWidget({
+class DatabaseBlockComponentWidget extends BlockComponentStatefulWidget {
+  const DatabaseBlockComponentWidget({
     super.key,
     required super.node,
     super.showActions,
@@ -51,11 +55,12 @@ class BoardBlockComponentWidget extends BlockComponentStatefulWidget {
   });
 
   @override
-  State<BoardBlockComponentWidget> createState() =>
-      _BoardBlockComponentWidgetState();
+  State<DatabaseBlockComponentWidget> createState() =>
+      _DatabaseBlockComponentWidgetState();
 }
 
-class _BoardBlockComponentWidgetState extends State<BoardBlockComponentWidget>
+class _DatabaseBlockComponentWidgetState
+    extends State<DatabaseBlockComponentWidget>
     with BlockComponentConfigurable {
   @override
   Node get node => widget.node;
@@ -70,7 +75,7 @@ class _BoardBlockComponentWidgetState extends State<BoardBlockComponentWidget>
       node: widget.node,
       editorState: editorState,
       builder: (viewPB) {
-        return BoardPage(
+        return DatabaseViewWidget(
           key: ValueKey(viewPB.id),
           view: viewPB,
         );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/database/inline_database_menu_item.dart

@@ -0,0 +1,90 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/application/doc_bloc.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/insert_page_command.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+
+SelectionMenuItem inlineGridMenuItem(DocumentBloc documentBloc) =>
+    SelectionMenuItem(
+      name: LocaleKeys.document_slashMenu_grid_createANewGrid.tr(),
+      icon: (editorState, onSelected, style) => SelectableSvgWidget(
+        name: 'editor/grid',
+        isSelected: onSelected,
+        style: style,
+      ),
+      keywords: ['grid', 'database'],
+      handler: (editorState, menuService, context) async {
+        if (!documentBloc.view.hasParentViewId()) {
+          return;
+        }
+
+        final parentViewId = documentBloc.view.parentViewId;
+        ViewBackendService.createView(
+          parentViewId: parentViewId,
+          openAfterCreate: false,
+          name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+          layoutType: ViewLayoutPB.Grid,
+        ).then(
+          (value) => value
+              .swap()
+              .map((r) => editorState.insertInlinePage(parentViewId, r)),
+        );
+      },
+    );
+
+SelectionMenuItem inlineBoardMenuItem(DocumentBloc documentBloc) =>
+    SelectionMenuItem(
+      name: LocaleKeys.document_slashMenu_board_createANewBoard.tr(),
+      icon: (editorState, onSelected, style) => SelectableSvgWidget(
+        name: 'editor/board',
+        isSelected: onSelected,
+        style: style,
+      ),
+      keywords: ['board', 'kanban', 'database'],
+      handler: (editorState, menuService, context) async {
+        if (!documentBloc.view.hasParentViewId()) {
+          return;
+        }
+
+        final parentViewId = documentBloc.view.parentViewId;
+        ViewBackendService.createView(
+          parentViewId: parentViewId,
+          name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+          layoutType: ViewLayoutPB.Board,
+        ).then(
+          (value) => value
+              .swap()
+              .map((r) => editorState.insertInlinePage(parentViewId, r)),
+        );
+      },
+    );
+
+SelectionMenuItem inlineCalendarMenuItem(DocumentBloc documentBloc) =>
+    SelectionMenuItem(
+      name: LocaleKeys.document_slashMenu_calendar_createANewCalendar.tr(),
+      icon: (editorState, onSelected, style) => SelectableSvgWidget(
+        name: 'editor/calendar',
+        isSelected: onSelected,
+        style: style,
+      ),
+      keywords: ['calendar', 'database'],
+      handler: (editorState, menuService, context) async {
+        if (!documentBloc.view.hasParentViewId()) {
+          return;
+        }
+
+        final parentViewId = documentBloc.view.parentViewId;
+        ViewBackendService.createView(
+          parentViewId: parentViewId,
+          name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+          layoutType: ViewLayoutPB.Calendar,
+        ).then(
+          (value) => value
+              .swap()
+              .map((r) => editorState.insertInlinePage(parentViewId, r)),
+        );
+      },
+    );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/database/referenced_database_menu_tem.dart

@@ -0,0 +1,63 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+SelectionMenuItem referencedGridMenuItem = SelectionMenuItem(
+  name: LocaleKeys.document_plugins_referencedGrid.tr(),
+  icon: (editorState, onSelected, style) => SelectableSvgWidget(
+    name: 'editor/grid',
+    isSelected: onSelected,
+    style: style,
+  ),
+  keywords: ['referenced', 'grid', 'database'],
+  handler: (editorState, menuService, context) {
+    final container = Overlay.of(context);
+    showLinkToPageMenu(
+      container,
+      editorState,
+      menuService,
+      ViewLayoutPB.Grid,
+    );
+  },
+);
+
+SelectionMenuItem referencedBoardMenuItem = SelectionMenuItem(
+  name: LocaleKeys.document_plugins_referencedBoard.tr(),
+  icon: (editorState, onSelected, style) => SelectableSvgWidget(
+    name: 'editor/board',
+    isSelected: onSelected,
+    style: style,
+  ),
+  keywords: ['referenced', 'board', 'kanban'],
+  handler: (editorState, menuService, context) {
+    final container = Overlay.of(context);
+    showLinkToPageMenu(
+      container,
+      editorState,
+      menuService,
+      ViewLayoutPB.Board,
+    );
+  },
+);
+
+SelectionMenuItem referencedCalendarMenuItem = SelectionMenuItem(
+  name: LocaleKeys.document_plugins_referencedCalendar.tr(),
+  icon: (editorState, onSelected, style) => SelectableSvgWidget(
+    name: 'editor/calendar',
+    isSelected: onSelected,
+    style: style,
+  ),
+  keywords: ['referenced', 'calendar', 'database'],
+  handler: (editorState, menuService, context) {
+    showLinkToPageMenu(
+      Overlay.of(context),
+      editorState,
+      menuService,
+      ViewLayoutPB.Calendar,
+    );
+  },
+);

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_menu_item.dart

@@ -1,26 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-
-SelectionMenuItem referenceGridMenuItem = SelectionMenuItem(
-  name: LocaleKeys.document_plugins_referencedGrid.tr(),
-  icon: (editorState, onSelected, style) => SelectableSvgWidget(
-    name: 'editor/grid',
-    isSelected: onSelected,
-    style: style,
-  ),
-  keywords: ['referenced', 'grid', 'database'],
-  handler: (editorState, menuService, context) {
-    final container = Overlay.of(context);
-    showLinkToPageMenu(
-      container,
-      editorState,
-      menuService,
-      ViewLayoutPB.Grid,
-    );
-  },
-);

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_node_widget.dart

@@ -1,90 +0,0 @@
-import 'package:appflowy/plugins/database_view/grid/presentation/grid_page.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/built_in_page_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/insert_page_command.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-
-class GridBlockKeys {
-  const GridBlockKeys._();
-
-  static const String type = 'grid';
-}
-
-class GridBlockComponentBuilder extends BlockComponentBuilder {
-  GridBlockComponentBuilder({
-    this.configuration = const BlockComponentConfiguration(),
-  });
-
-  @override
-  final BlockComponentConfiguration configuration;
-
-  @override
-  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
-    final node = blockComponentContext.node;
-    return GridBlockComponentWidget(
-      key: node.key,
-      node: node,
-      configuration: configuration,
-      showActions: showActions(node),
-      actionBuilder: (context, state) => actionBuilder(
-        blockComponentContext,
-        state,
-      ),
-    );
-  }
-
-  @override
-  bool validate(Node node) =>
-      node.children.isEmpty &&
-      node.attributes[DatabaseBlockKeys.parentID] is String &&
-      node.attributes[DatabaseBlockKeys.viewID] is String;
-}
-
-class GridBlockComponentWidget extends BlockComponentStatefulWidget {
-  const GridBlockComponentWidget({
-    super.key,
-    required super.node,
-    super.showActions,
-    super.actionBuilder,
-    super.configuration = const BlockComponentConfiguration(),
-  });
-
-  @override
-  State<GridBlockComponentWidget> createState() =>
-      _GridBlockComponentWidgetState();
-}
-
-class _GridBlockComponentWidgetState extends State<GridBlockComponentWidget>
-    with BlockComponentConfigurable {
-  @override
-  Node get node => widget.node;
-
-  @override
-  BlockComponentConfiguration get configuration => widget.configuration;
-
-  @override
-  Widget build(BuildContext context) {
-    final editorState = Provider.of<EditorState>(context, listen: false);
-    Widget child = BuiltInPageWidget(
-      node: widget.node,
-      editorState: editorState,
-      builder: (viewPB) {
-        return GridPage(
-          key: ValueKey(viewPB.id),
-          view: viewPB,
-        );
-      },
-    );
-
-    if (widget.actionBuilder != null) {
-      child = BlockComponentActionWrapper(
-        node: widget.node,
-        actionBuilder: widget.actionBuilder!,
-        child: child,
-      );
-    }
-
-    return child;
-  }
-}

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_view_menu_item.dart

@@ -1,36 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/application/doc_bloc.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/insert_page_command.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
-import 'package:appflowy/workspace/application/view/view_service.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:easy_localization/easy_localization.dart';
-
-SelectionMenuItem inlineGridMenuItem(DocumentBloc documentBloc) =>
-    SelectionMenuItem(
-      name: LocaleKeys.document_slashMenu_grid_createANewGrid.tr(),
-      icon: (editorState, onSelected, style) => SelectableSvgWidget(
-        name: 'editor/grid',
-        isSelected: onSelected,
-        style: style,
-      ),
-      keywords: ['grid', 'database'],
-      handler: (editorState, menuService, context) async {
-        if (!documentBloc.view.hasParentViewId()) {
-          return;
-        }
-
-        final parentViewId = documentBloc.view.parentViewId;
-        ViewBackendService.createView(
-          parentViewId: parentViewId,
-          openAfterCreate: false,
-          name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-          layoutType: ViewLayoutPB.Grid,
-        ).then(
-          (value) => value
-              .swap()
-              .map((r) => editorState.insertInlinePage(parentViewId, r)),
-        );
-      },
-    );

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

@@ -1,6 +1,3 @@
-export 'board/board_node_widget.dart';
-export 'board/board_menu_item.dart';
-export 'board/board_view_menu_item.dart';
 export 'callout/callout_block_component.dart';
 export 'code_block/code_block_component.dart';
 export 'code_block/code_block_shortcut_event.dart';
@@ -9,9 +6,8 @@ export 'cover/cover_node_widget.dart';
 export 'cover/cover_image_picker.dart';
 export 'emoji_picker/emoji_menu_item.dart';
 export 'extensions/flowy_tint_extension.dart';
-export 'grid/grid_menu_item.dart';
-export 'grid/grid_node_widget.dart';
-export 'grid/grid_view_menu_item.dart';
+export 'database/inline_database_menu_item.dart';
+export 'database/database_view_block_component.dart';
 export 'math_equation/math_equation_block_component.dart';
 export 'openai/widgets/auto_completion_node_widget.dart';
 export 'openai/widgets/smart_edit_node_widget.dart';

frontend/appflowy_flutter/lib/plugins/trash/trash.dart

@@ -55,7 +55,7 @@ class TrashPluginDisplay extends PluginWidgetBuilder {
   Widget? get rightBarItem => null;
 
   @override
-  Widget buildWidget(PluginContext context) => const TrashPage(
+  Widget buildWidget({PluginContext? context}) => const TrashPage(
         key: ValueKey('TrashPage'),
       );
 

frontend/appflowy_flutter/lib/startup/plugin/plugin.dart

@@ -69,7 +69,7 @@ abstract class PluginWidgetBuilder with NavigationItem {
   EdgeInsets get contentPadding =>
       const EdgeInsets.symmetric(horizontal: 40, vertical: 28);
 
-  Widget buildWidget(PluginContext context);
+  Widget buildWidget({PluginContext? context});
 }
 
 class PluginContext {

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

@@ -180,7 +180,7 @@ class HomeStackManager {
                 if (pluginType == notifier.plugin.pluginType) {
                   final builder = notifier.plugin.widgetBuilder;
                   final pluginWidget = builder.buildWidget(
-                    PluginContext(onDeleted: onDeleted),
+                    context: PluginContext(onDeleted: onDeleted),
                   );
 
                   return Padding(

frontend/rust-lib/flowy-database2/src/services/database/database_editor.rs

@@ -16,11 +16,11 @@ use lib_infra::future::{to_fut, Fut};
 
 use crate::entities::{
   CalendarEventPB, CellChangesetNotifyPB, CellPB, ChecklistCellDataPB, DatabaseFieldChangesetPB,
-  DatabaseLayoutSettingPB, DatabasePB, DatabaseViewSettingPB, DeleteFilterParams,
-  DeleteGroupParams, DeleteSortParams, FieldChangesetParams, FieldIdPB, FieldPB, FieldType,
-  GroupPB, IndexFieldPB, InsertedRowPB, LayoutSettingParams, NoDateCalendarEventPB,
-  RepeatedFilterPB, RepeatedGroupPB, RepeatedSortPB, RowPB, RowsChangePB, SelectOptionCellDataPB,
-  SelectOptionPB, UpdateFilterParams, UpdateSortParams, UpdatedRowPB,
+  DatabasePB, DatabaseViewSettingPB, DeleteFilterParams, DeleteGroupParams, DeleteSortParams,
+  FieldChangesetParams, FieldIdPB, FieldPB, FieldType, GroupPB, IndexFieldPB, InsertedRowPB,
+  LayoutSettingParams, NoDateCalendarEventPB, RepeatedFilterPB, RepeatedGroupPB, RepeatedSortPB,
+  RowPB, RowsChangePB, SelectOptionCellDataPB, SelectOptionPB, UpdateFilterParams,
+  UpdateSortParams, UpdatedRowPB,
 };
 use crate::notification::{send_notification, DatabaseNotification};
 use crate::services::cell::{