fix: grid property list bugs

frontend/app_flowy/lib/startup/deps_resolver.dart

@@ -17,7 +17,6 @@ import 'package:app_flowy/user/presentation/router.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder-data-model/app.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder-data-model/view.pb.dart';
-import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/number_type_option.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
@@ -223,7 +222,7 @@ void _resolveGridDeps(GetIt getIt) {
     (typeOption, _) => NumberTypeOptionBloc(typeOption: typeOption),
   );
 
-  getIt.registerFactoryParam<GridPropertyBloc, String, List<Field>>(
+  getIt.registerFactoryParam<GridPropertyBloc, String, GridFieldCache>(
-    (gridId, fields) => GridPropertyBloc(gridId: gridId, fields: fields),
+    (gridId, cache) => GridPropertyBloc(gridId: gridId, fieldCache: cache),
   );
 }

frontend/app_flowy/lib/workspace/application/grid/setting/property_bloc.dart

@@ -11,11 +11,12 @@ part 'property_bloc.freezed.dart';
 class GridPropertyBloc extends Bloc<GridPropertyEvent, GridPropertyState> {
   final FieldService _service;
   final GridFieldCache _fieldCache;
+  Function()? _listenFieldCallback;
 
-  GridPropertyBloc({required String gridId, required List<Field> fields})
+  GridPropertyBloc({required String gridId, required GridFieldCache fieldCache})
       : _service = FieldService(gridId: gridId),
-        _fieldCache = GridFieldCache(gridId: gridId),
+        _fieldCache = fieldCache,
-        super(GridPropertyState.initial(gridId, fields)) {
+        super(GridPropertyState.initial(gridId, fieldCache.clonedFields)) {
     on<GridPropertyEvent>(
       (event, emit) async {
         await event.map(
@@ -42,13 +43,15 @@ class GridPropertyBloc extends Bloc<GridPropertyEvent, GridPropertyState> {
 
   @override
   Future<void> close() async {
-    await _fieldCache.dispose();
+    if (_listenFieldCallback != null) {
+      _fieldCache.removeListener(_listenFieldCallback!);
+    }
     return super.close();
   }
 
   void _startListening() {
-    _fieldCache.addListener(
+    _listenFieldCallback = _fieldCache.addListener(
-      onChanged: (fields) => add(GridPropertyEvent.didReceiveFieldUpdate(_fieldCache.clonedFields)),
+      onChanged: (fields) => add(GridPropertyEvent.didReceiveFieldUpdate(fields)),
       listenWhen: () => !isClosed,
     );
   }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart

@@ -164,9 +164,10 @@ class _GridToolbarAdaptor extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocSelector<GridBloc, GridState, GridToolbarContext>(
       selector: (state) {
+        final fieldCache = context.read<GridBloc>().fieldCache;
         return GridToolbarContext(
           gridId: state.gridId,
-          fields: state.fields,
+          fieldCache: fieldCache,
         );
       },
       builder: (context, toolbarContext) {

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_property.dart

@@ -1,5 +1,6 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/grid/field/field_service.dart';
+import 'package:app_flowy/workspace/application/grid/grid_service.dart';
 import 'package:app_flowy/workspace/application/grid/setting/property_bloc.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_editor.dart';
@@ -18,10 +19,10 @@ import 'package:styled_widget/styled_widget.dart';
 
 class GridPropertyList extends StatelessWidget with FlowyOverlayDelegate {
   final String gridId;
-  final List<Field> fields;
+  final GridFieldCache fieldCache;
   const GridPropertyList({
     required this.gridId,
-    required this.fields,
+    required this.fieldCache,
     Key? key,
   }) : super(key: key);
 
@@ -43,7 +44,7 @@ class GridPropertyList extends StatelessWidget with FlowyOverlayDelegate {
   Widget build(BuildContext context) {
     return BlocProvider(
       create: (context) =>
-          getIt<GridPropertyBloc>(param1: gridId, param2: fields)..add(const GridPropertyEvent.initial()),
+          getIt<GridPropertyBloc>(param1: gridId, param2: fieldCache)..add(const GridPropertyEvent.initial()),
       child: BlocBuilder<GridPropertyBloc, GridPropertyState>(
         builder: (context, state) {
           final cells = state.fields.map((field) {
@@ -91,17 +92,7 @@ class _GridPropertyCell extends StatelessWidget {
         Expanded(
           child: SizedBox(
             height: GridSize.typeOptionItemHeight,
-            child: FlowyButton(
+            child: _editFieldButton(theme, context),
-              text: FlowyText.medium(field.name, fontSize: 12),
-              hoverColor: theme.hover,
-              leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
-              onTap: () {
-                FieldEditor(
-                  gridId: gridId,
-                  fieldContextLoader: FieldContextLoaderAdaptor(gridId: gridId, field: field),
-                ).show(context, anchorDirection: AnchorDirection.bottomRight);
-              },
-            ),
           ),
         ),
         FlowyIconButton(
@@ -115,4 +106,18 @@ class _GridPropertyCell extends StatelessWidget {
       ],
     );
   }
+
+  FlowyButton _editFieldButton(AppTheme theme, BuildContext context) {
+    return FlowyButton(
+      text: FlowyText.medium(field.name, fontSize: 12),
+      hoverColor: theme.hover,
+      leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
+      onTap: () {
+        FieldEditor(
+          gridId: gridId,
+          fieldContextLoader: FieldContextLoaderAdaptor(gridId: gridId, field: field),
+        ).show(context, anchorDirection: AnchorDirection.bottomRight);
+      },
+    );
+  }
 }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_setting.dart

@@ -1,3 +1,4 @@
+import 'package:app_flowy/workspace/application/grid/grid_service.dart';
 import 'package:app_flowy/workspace/application/grid/setting/setting_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
@@ -18,11 +19,11 @@ import 'grid_property.dart';
 
 class GridSettingContext {
   final String gridId;
-  final List<Field> fields;
+  final GridFieldCache fieldCache;
 
   GridSettingContext({
     required this.gridId,
-    required this.fields,
+    required this.fieldCache,
   });
 }
 
@@ -41,7 +42,7 @@ class GridSettingList extends StatelessWidget {
           case GridSettingAction.sortBy:
             break;
           case GridSettingAction.properties:
-            GridPropertyList(gridId: settingContext.gridId, fields: settingContext.fields).show(context);
+            GridPropertyList(gridId: settingContext.gridId, fieldCache: settingContext.fieldCache).show(context);
             break;
         }
       },

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_toolbar.dart

@@ -1,3 +1,4 @@
+import 'package:app_flowy/workspace/application/grid/grid_service.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/extension.dart';
@@ -12,10 +13,10 @@ import 'grid_setting.dart';
 
 class GridToolbarContext {
   final String gridId;
-  final List<Field> fields;
+  final GridFieldCache fieldCache;
   GridToolbarContext({
     required this.gridId,
-    required this.fields,
+    required this.fieldCache,
   });
 }
 
@@ -27,7 +28,7 @@ class GridToolbar extends StatelessWidget {
   Widget build(BuildContext context) {
     final settingContext = GridSettingContext(
       gridId: toolbarContext.gridId,
-      fields: toolbarContext.fields,
+      fieldCache: toolbarContext.fieldCache,
     );
     return SizedBox(
       height: 40,