chore: config switch group field UI

Author: appflowy

frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart

@@ -2,6 +2,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/board/application/toolbar/board_setting_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/field/field_cache.dart';
 import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_group.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_property.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
@@ -96,8 +97,8 @@ class BoardSettingList extends StatelessWidget {
                 .show(context);
             break;
           case BoardSettingAction.groups:
-            GridPropertyList(
-                    gridId: settingContext.viewId,
+            GridGroupList(
+                    viewId: settingContext.viewId,
                     fieldCache: settingContext.fieldCache)
                 .show(context);
             break;

frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_group.dart

@@ -1,18 +1,33 @@
+import 'package:app_flowy/plugins/grid/application/field/field_cache.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_type_extension.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/text.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 class GridGroupList extends StatelessWidget {
-  const GridGroupList({Key? key}) : super(key: key);
+  final String viewId;
+  final GridFieldCache fieldCache;
+  const GridGroupList({
+    required this.viewId,
+    required this.fieldCache,
+    Key? key,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Container();
   }
+
+  void show(BuildContext context) {}
 }
 
 class _GridGroupCell extends StatelessWidget {
-  const _GridGroupCell({Key? key}) : super(key: key);
+  final FieldPB field;
+  const _GridGroupCell({required this.field, Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -22,6 +37,16 @@ class _GridGroupCell extends StatelessWidget {
     //     ? svgWidget('home/show', color: theme.iconColor)
     //     : svgWidget('home/hide', color: theme.iconColor);
 
-    return Container();
+    // Padding(
+    //                   padding: const EdgeInsets.only(right: 6),
+    //                   child: svgWidget("grid/checkmark"),
+    //                 ),
+
+    return FlowyButton(
+      text: FlowyText.medium(field.name, fontSize: 12),
+      hoverColor: theme.hover,
+      leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
+      onTap: () {},
+    );
   }
 }