chore: update _OptionList cell UI

Author: appflowy

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/extension.dart

@@ -1,5 +1,8 @@
+import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.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:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -106,3 +109,39 @@ class SelectOptionTag extends StatelessWidget {
     // );
   }
 }
+
+class SelectOptionTagCell extends StatelessWidget {
+  final List<Widget> children;
+  final void Function(SelectOption) onSelected;
+  final SelectOption option;
+  const SelectOptionTagCell({
+    required this.option,
+    required this.onSelected,
+    this.children = const [],
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+    return Stack(
+      fit: StackFit.expand,
+      children: [
+        FlowyHover(
+          style: HoverStyle(hoverColor: theme.hover),
+          child: InkWell(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 3),
+              child: Row(children: [
+                SelectOptionTag.fromSelectOption(context: context, option: option),
+                const Spacer(),
+                ...children,
+              ]),
+            ),
+            onTap: () => onSelected(option),
+          ),
+        ),
+      ],
+    );
+  }
+}

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/select_option_editor.dart

@@ -239,30 +239,13 @@ class _SelectOptionCell extends StatelessWidget {
   }
 
   Widget _body(AppTheme theme, BuildContext context) {
-    return Stack(
-      fit: StackFit.expand,
+    return SelectOptionTagCell(
+      option: option,
+      onSelected: (option) {
+        context.read<SelectOptionCellEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
+      },
       children: [
-        FlowyHover(
-          style: HoverStyle(hoverColor: theme.hover),
-          builder: (_, onHover) {
-            return InkWell(
-              child: Row(children: [
-                const HSpace(6),
-                SelectOptionTag(
-                  name: option.name,
-                  color: option.color.make(context),
-                  isSelected: isSelected,
-                ),
-                const Spacer(),
-                if (isSelected) svgWidget("grid/checkmark"),
-                const HSpace(6),
-              ]),
-              onTap: () {
-                context.read<SelectOptionCellEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
-              },
-            );
-          },
-        ),
+        if (isSelected) svgWidget("grid/checkmark"),
       ],
     );
   }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/select_option.dart

@@ -1,10 +1,12 @@
 import 'package:app_flowy/workspace/application/grid/field/type_option/select_option_type_option_bloc.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/extension.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/common/text_field.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_editor_pannel.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.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:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
@@ -183,13 +185,18 @@ class _OptionCell extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
+
     return SizedBox(
       height: GridSize.typeOptionItemHeight,
-      child: FlowyButton(
-        text: FlowyText.medium(option.name, fontSize: 12),
-        hoverColor: theme.hover,
-        onTap: () => onSelected(option),
-        rightIcon: svgWidget("grid/details", color: theme.iconColor),
+      child: SelectOptionTagCell(
+        option: option,
+        onSelected: onSelected,
+        children: [
+          svgWidget(
+            "grid/details",
+            color: theme.iconColor,
+          ),
+        ],
       ),
     );
   }