Fix grid board plugin issues (#1809)

* fix: #1799 Click : to view the original database UI text

* fix: #1798 Referenced icon is missing

frontend/app_flowy/assets/images/common/information.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 14.0039C11.3137 14.0039 14 11.3176 14 8.00391C14 4.6902 11.3137 2.00391 8 2.00391C4.68629 2.00391 2 4.6902 2 8.00391C2 11.3176 4.68629 14.0039 8 14.0039Z" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="7.5" y="7.00391" width="1" height="4" rx="0.5" fill="#333333"/>
+<rect x="7.5" y="5.00391" width="1" height="1" rx="0.5" fill="#333333"/>
+</svg>

frontend/app_flowy/assets/images/common/settings.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.01471 2.15012C7.62441 1.7981 8.37559 1.7981 8.98529 2.15012L12.5769 4.22372C13.1866 4.57573 13.5622 5.22628 13.5622 5.9303V10.0775C13.5622 10.7815 13.1866 11.4321 12.5769 11.7841L8.98529 13.8577C8.37559 14.2097 7.62441 14.2097 7.01471 13.8577L3.42312 11.7841C2.81341 11.4321 2.43782 10.7815 2.43782 10.0775V5.9303C2.43782 5.22628 2.81341 4.57573 3.42312 4.22372L7.01471 2.15012Z" stroke="#333333"/>
+<circle cx="8" cy="8.00391" r="2.5" stroke="#333333"/>
+</svg>

frontend/app_flowy/assets/translations/en.json

@@ -104,7 +104,9 @@
     "darkMode": "Switch to Dark mode",
     "openAsPage": "Open as a Page",
     "addNewRow": "Add a new row",
-    "openMenu": "Click to open menu"
+    "openMenu": "Click to open menu",
+    "viewDataBase": "View database",
+    "referencePage": "This {name} is referenced"
   },
   "sideBar": {
     "closeSidebar": "Close side bar",
@@ -322,6 +324,10 @@
       "grid": {
         "selectAGridToLinkTo": "Select a Grid to link to"
       }
+    },
+    "plugins": {
+      "referencedBoard": "Referenced Board",
+      "referencedGrid": "Referenced Grid"
     }
   },
   "board": {

frontend/app_flowy/lib/plugins/document/presentation/plugins/base/built_in_page_widget.dart

@@ -1,20 +1,22 @@
 import 'package:app_flowy/plugins/document/presentation/plugins/base/insert_page_command.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/app/app_service.dart';
-import 'package:app_flowy/workspace/application/view/view_ext.dart';
-import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
-import 'package:app_flowy/workspace/presentation/home/menu/menu.dart';
 import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pbserver.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' as dartz;
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:app_flowy/workspace/application/view/view_ext.dart';
+import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
+import 'package:app_flowy/workspace/presentation/home/menu/menu.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 
 class BuiltInPageWidget extends StatefulWidget {
   const BuiltInPageWidget({
@@ -103,41 +105,66 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
     return Positioned(
       top: 5,
       left: 5,
-      child: PopoverActionList<_ActionWrapper>(
-        direction: PopoverDirection.bottomWithCenterAligned,
-        actions:
-            _ActionType.values.map((action) => _ActionWrapper(action)).toList(),
-        buildChild: (controller) {
-          return FlowyIconButton(
-            tooltipText: LocaleKeys.tooltip_openMenu.tr(),
-            width: 25,
-            height: 30,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          // information
+          FlowyIconButton(
+            tooltipText: LocaleKeys.tooltip_referencePage.tr(namedArgs: {
+              'name': viewPB.layout.name,
+            }),
+            width: 24,
+            height: 24,
             iconPadding: const EdgeInsets.all(3),
-            icon: svgWidget('editor/details'),
-            onPressed: () => controller.show(),
-          );
-        },
-        onSelected: (action, controller) async {
-          switch (action.inner) {
-            case _ActionType.openAsPage:
-              getIt<MenuSharedState>().latestOpenView = viewPB;
-              getIt<HomeStackManager>().setPlugin(viewPB.plugin());
-              break;
-            case _ActionType.delete:
-              final transaction = widget.editorState.transaction;
-              transaction.deleteNode(widget.node);
-              widget.editorState.apply(transaction);
-              break;
-          }
-          controller.close();
-        },
+            icon: svgWidget('common/information'),
+          ),
+          // Name
+          const Space(7, 0),
+          FlowyText.medium(
+            viewPB.name,
+            fontSize: 16.0,
+          ),
+          // setting
+          const Space(7, 0),
+          PopoverActionList<_ActionWrapper>(
+            direction: PopoverDirection.bottomWithCenterAligned,
+            actions: _ActionType.values
+                .map((action) => _ActionWrapper(action))
+                .toList(),
+            buildChild: (controller) {
+              return FlowyIconButton(
+                tooltipText: LocaleKeys.tooltip_openMenu.tr(),
+                width: 24,
+                height: 24,
+                iconPadding: const EdgeInsets.all(3),
+                icon: svgWidget('common/settings'),
+                onPressed: () => controller.show(),
+              );
+            },
+            onSelected: (action, controller) async {
+              switch (action.inner) {
+                case _ActionType.viewDatabase:
+                  getIt<MenuSharedState>().latestOpenView = viewPB;
+                  getIt<HomeStackManager>().setPlugin(viewPB.plugin());
+                  break;
+                case _ActionType.delete:
+                  final transaction = widget.editorState.transaction;
+                  transaction.deleteNode(widget.node);
+                  widget.editorState.apply(transaction);
+                  break;
+              }
+              controller.close();
+            },
+          )
+        ],
       ),
     );
   }
 }
 
 enum _ActionType {
-  openAsPage,
+  viewDatabase,
   delete,
 }
 
@@ -151,8 +178,8 @@ class _ActionWrapper extends ActionCell {
   @override
   String get name {
     switch (inner) {
-      case _ActionType.openAsPage:
-        return LocaleKeys.tooltip_openAsPage.tr();
+      case _ActionType.viewDatabase:
+        return LocaleKeys.tooltip_viewDataBase.tr();
       case _ActionType.delete:
         return LocaleKeys.disclosureAction_delete.tr();
     }

frontend/app_flowy/lib/plugins/document/presentation/plugins/board/board_menu_item.dart

@@ -7,7 +7,7 @@ import 'package:flowy_infra/image.dart';
 import 'package:flutter/material.dart';
 
 SelectionMenuItem boardMenuItem = SelectionMenuItem(
-  name: () => LocaleKeys.board_menuName.tr(),
+  name: () => LocaleKeys.document_plugins_referencedBoard.tr(),
   icon: (editorState, onSelected) {
     return svgWidget(
       'editor/board',

frontend/app_flowy/lib/plugins/document/presentation/plugins/grid/grid_menu_item.dart

@@ -7,7 +7,7 @@ import 'package:flowy_infra/image.dart';
 import 'package:flutter/material.dart';
 
 SelectionMenuItem gridMenuItem = SelectionMenuItem(
-  name: () => LocaleKeys.grid_menuName.tr(),
+  name: () => LocaleKeys.document_plugins_referencedGrid.tr(),
   icon: (editorState, onSelected) {
     return svgWidget(
       'editor/grid',

frontend/app_flowy/packages/flowy_infra_ui/example/pubspec.lock

@@ -338,4 +338,4 @@ packages:
     version: "6.1.0"
 sdks:
   dart: ">=2.18.0 <3.0.0"
-  flutter: ">=3.0.0"
+  flutter: ">=3.3.0"

frontend/app_flowy/packages/flowy_infra_ui/pubspec.lock

@@ -324,4 +324,4 @@ packages:
     version: "6.1.0"
 sdks:
   dart: ">=2.18.0 <3.0.0"
-  flutter: ">=3.0.0"
+  flutter: ">=3.3.0"

frontend/app_flowy/pubspec.yaml

@@ -136,19 +136,19 @@ flutter:
         - asset: assets/google_fonts/Poppins/Poppins-Thin.ttf
           weight: 200
         - asset: assets/google_fonts/Poppins/Poppins-Light.ttf
-          weight: 300          
-        - asset: assets/google_fonts/Poppins/Poppins-Regular.ttf          
+          weight: 300
+        - asset: assets/google_fonts/Poppins/Poppins-Regular.ttf
           weight: 400
-        - asset: assets/google_fonts/Poppins/Poppins-Medium.ttf          
+        - asset: assets/google_fonts/Poppins/Poppins-Medium.ttf
           weight: 500
-        - asset: assets/google_fonts/Poppins/Poppins-SemiBold.ttf          
+        - asset: assets/google_fonts/Poppins/Poppins-SemiBold.ttf
           weight: 600
         - asset: assets/google_fonts/Poppins/Poppins-Bold.ttf
           weight: 700
         - asset: assets/google_fonts/Poppins/Poppins-Black.ttf
           weight: 800
         - asset: assets/google_fonts/Poppins/Poppins-ExtraBold.ttf
-          weight: 900     
+          weight: 900
 
   # To add assets to your application, add an assets section, like this:
   assets:
@@ -158,6 +158,7 @@ flutter:
     - assets/images/grid/
     - assets/images/emoji/
     - assets/images/grid/field/
+    - assets/images/common/
     - assets/images/grid/setting/
     - assets/translations/
   #   - images/a_dot_ham.jpeg