perf: added right click context menu functionality

frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart

@@ -3,6 +3,7 @@ import 'package:dartz/dartz.dart' as dartz;
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:provider/provider.dart';
@@ -11,10 +12,13 @@ import 'item.dart';
 
 // [[Widget: LifeCycle]]
 // https://flutterbyexample.com/lesson/stateful-widget-lifecycle
-class ViewDisclosureButton extends StatelessWidget with ActionList<ViewDisclosureActionWrapper>, FlowyOverlayDelegate {
+class ViewDisclosureButton extends StatelessWidget
+    with ActionList<ViewDisclosureActionWrapper>, FlowyOverlayDelegate {
   final Function() onTap;
   final Function(dartz.Option<ViewDisclosureAction>) onSelected;
-  final _items = ViewDisclosureAction.values.map((action) => ViewDisclosureActionWrapper(action)).toList();
+  final _items = ViewDisclosureAction.values
+      .map((action) => ViewDisclosureActionWrapper(action))
+      .toList();
 
   ViewDisclosureButton({
     Key? key,
@@ -40,12 +44,13 @@ class ViewDisclosureButton extends StatelessWidget with ActionList<ViewDisclosur
   List<ViewDisclosureActionWrapper> get items => _items;
 
   @override
-  void Function(dartz.Option<ViewDisclosureActionWrapper> p1) get selectCallback => (result) {
+  void Function(dartz.Option<ViewDisclosureActionWrapper> p1)
-        result.fold(
+      get selectCallback => (result) {
-          () => onSelected(dartz.none()),
+            result.fold(
-          (wrapper) => onSelected(dartz.some(wrapper.inner)),
+              () => onSelected(dartz.none()),
-        );
+              (wrapper) => onSelected(dartz.some(wrapper.inner)),
-      };
+            );
+          };
 
   @override
   FlowyOverlayDelegate? get delegate => this;
@@ -56,6 +61,49 @@ class ViewDisclosureButton extends StatelessWidget with ActionList<ViewDisclosur
   }
 }
 
+class ViewDisclosureRegion extends StatelessWidget
+    with ActionList<ViewDisclosureActionWrapper>, FlowyOverlayDelegate {
+  final Widget child;
+  final Function(dartz.Option<ViewDisclosureAction>) onSelected;
+  final _items = ViewDisclosureAction.values
+      .map((action) => ViewDisclosureActionWrapper(action))
+      .toList();
+
+  ViewDisclosureRegion(
+      {Key? key, required this.onSelected, required this.child})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Listener(
+      onPointerDown: (event) => {
+        if (event.kind == PointerDeviceKind.mouse &&
+            event.buttons == kSecondaryMouseButton)
+          {
+            print("IN LISTENER RN"),
+            show(context),
+          }
+      },
+      child: child,
+    );
+  }
+
+  @override
+  FlowyOverlayDelegate? get delegate => this;
+
+  @override
+  List<ViewDisclosureActionWrapper> get items => _items;
+
+  @override
+  void Function(dartz.Option<ViewDisclosureActionWrapper> p1)
+      get selectCallback => (result) {
+            result.fold(
+              () => onSelected(dartz.none()),
+              (wrapper) => onSelected(dartz.some(wrapper.inner)),
+            );
+          };
+}
+
 class ViewDisclosureActionWrapper extends ActionItem {
   final ViewDisclosureAction inner;
 

frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart

@@ -36,7 +36,9 @@ class ViewSectionItem extends StatelessWidget {
     final theme = context.watch<AppTheme>();
     return MultiBlocProvider(
       providers: [
-        BlocProvider(create: (ctx) => getIt<ViewBloc>(param1: view)..add(const ViewEvent.initial())),
+        BlocProvider(
+            create: (ctx) =>
+                getIt<ViewBloc>(param1: view)..add(const ViewEvent.initial())),
       ],
       child: BlocBuilder<ViewBloc, ViewState>(
         builder: (context, state) {
@@ -46,7 +48,8 @@ class ViewSectionItem extends StatelessWidget {
               onTap: () => onSelected(context.read<ViewBloc>().state.view),
               child: FlowyHover(
                 style: HoverStyle(hoverColor: theme.bg3),
-                builder: (_, onHover) => _render(context, onHover, state, theme.iconColor),
+                builder: (_, onHover) =>
+                    _render(context, onHover, state, theme.iconColor),
                 setSelected: () => state.isEditing || isSelected,
               ),
             ),
@@ -56,17 +59,24 @@ class ViewSectionItem extends StatelessWidget {
     );
   }
 
-  Widget _render(BuildContext context, bool onHover, ViewState state, Color iconColor) {
+  Widget _render(
+      BuildContext context, bool onHover, ViewState state, Color iconColor) {
     List<Widget> children = [
-      SizedBox(width: 16, height: 16, child: state.view.renderThumbnail(iconColor: iconColor)),
+      SizedBox(
+          width: 16,
+          height: 16,
+          child: state.view.renderThumbnail(iconColor: iconColor)),
       const HSpace(2),
-      Expanded(child: FlowyText.regular(state.view.name, fontSize: 12, overflow: TextOverflow.clip)),
+      Expanded(
+          child: FlowyText.regular(state.view.name,
+              fontSize: 12, overflow: TextOverflow.clip)),
     ];
 
     if (onHover || state.isEditing) {
       children.add(
         ViewDisclosureButton(
-          onTap: () => context.read<ViewBloc>().add(const ViewEvent.setIsEditing(true)),
+          onTap: () =>
+              context.read<ViewBloc>().add(const ViewEvent.setIsEditing(true)),
           onSelected: (action) {
             context.read<ViewBloc>().add(const ViewEvent.setIsEditing(false));
             _handleAction(context, action);
@@ -75,16 +85,23 @@ class ViewSectionItem extends StatelessWidget {
       );
     }
 
-    return SizedBox(
+    return ViewDisclosureRegion(
-      height: 26,
+        // context.read<ViewBloc>().add(const ViewEvent.setIsEditing(true)),
-      child: Row(children: children).padding(
+        onSelected: (action) {
-        left: MenuAppSizes.expandedPadding,
+          context.read<ViewBloc>().add(const ViewEvent.setIsEditing(false));
-        right: MenuAppSizes.headerPadding,
+          _handleAction(context, action);
-      ),
+        },
-    );
+        child: SizedBox(
+          height: 26,
+          child: Row(children: children).padding(
+            left: MenuAppSizes.expandedPadding,
+            right: MenuAppSizes.headerPadding,
+          ),
+        ));
   }
 
-  void _handleAction(BuildContext context, dartz.Option<ViewDisclosureAction> action) {
+  void _handleAction(
+      BuildContext context, dartz.Option<ViewDisclosureAction> action) {
     action.foldRight({}, (action, previous) {
       switch (action) {
         case ViewDisclosureAction.rename: