feat: add hover effect when trash icon is selected or hovered. (#1513)

Author: rasyidmi

frontend/app_flowy/lib/plugins/trash/menu.dart

@@ -3,7 +3,11 @@ import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
 import 'package:app_flowy/workspace/presentation/home/menu/menu.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/color_extension.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/style_widget/extension.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
@@ -14,16 +18,27 @@ class MenuTrash extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      height: 26,
-      child: InkWell(
-        onTap: () {
-          getIt<MenuSharedState>().latestOpenView = null;
-          getIt<HomeStackManager>()
-              .setPlugin(makePlugin(pluginType: PluginType.trash));
-        },
-        child: _render(context),
-      ),
+    return ValueListenableBuilder(
+      valueListenable: getIt<MenuSharedState>().notifier,
+      builder: (context, value, child) {
+        return FlowyHover(
+          style: HoverStyle(
+            hoverColor: AFThemeExtension.of(context).greySelect,
+          ),
+          isSelected: () => getIt<MenuSharedState>().latestOpenView == null,
+          child: SizedBox(
+            height: 26,
+            child: InkWell(
+              onTap: () {
+                getIt<MenuSharedState>().latestOpenView = null;
+                getIt<HomeStackManager>()
+                    .setPlugin(makePlugin(pluginType: PluginType.trash));
+              },
+              child: _render(context),
+            ),
+          ).padding(horizontal: Insets.l),
+        ).padding(horizontal: 8);
+      },
     );
   }
 
@@ -43,4 +58,4 @@ class MenuTrash extends StatelessWidget {
       ],
     );
   }
-}
+}

frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart

@@ -104,7 +104,7 @@ class HomeMenu extends StatelessWidget {
             ).padding(horizontal: Insets.l),
           ),
           const VSpace(20),
-          const MenuTrash().padding(horizontal: Insets.l),
+          const MenuTrash(),
           const VSpace(20),
           _renderNewAppButton(context),
         ],
@@ -178,6 +178,7 @@ class MenuSharedState {
   }
 
   ViewPB? get latestOpenView => _latestOpenView.value;
+  ValueNotifier<ViewPB?> get notifier => _latestOpenView;
 
   set latestOpenView(ViewPB? view) {
     if (_latestOpenView.value != view) {