fix: set minimum width for grid fields to 50px (#3397)

* fix: set minimum width for grid field to 100px

* test: add grid field width test

* fix: field width should not be less then 50px

* test: grid field width should not be less then 50px

* fix: cursor-based resizing issue

* test: updated tests

frontend/appflowy_flutter/lib/plugins/database_view/application/field/field_cell_bloc.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -29,8 +31,11 @@ class FieldCellBloc extends Bloc<FieldCellEvent, FieldCellState> {
           didReceiveFieldUpdate: (field) {
             emit(state.copyWith(field: cellContext.field));
           },
+          onResizeStart: () {
+            emit(state.copyWith(resizeStart: state.width));
+          },
           startUpdateWidth: (offset) {
-            final width = state.width + offset;
+            final width = max(offset + state.resizeStart, 50).toDouble();
             emit(state.copyWith(width: width));
           },
           endUpdateWidth: () {
@@ -66,6 +71,7 @@ class FieldCellEvent with _$FieldCellEvent {
   const factory FieldCellEvent.initial() = _InitialCell;
   const factory FieldCellEvent.didReceiveFieldUpdate(FieldPB field) =
       _DidReceiveFieldUpdate;
+  const factory FieldCellEvent.onResizeStart() = _OnResizeStart;
   const factory FieldCellEvent.startUpdateWidth(double offset) =
       _StartUpdateWidth;
   const factory FieldCellEvent.endUpdateWidth() = _EndUpdateWidth;
@@ -77,11 +83,13 @@ class FieldCellState with _$FieldCellState {
     required String viewId,
     required FieldPB field,
     required double width,
+    required double resizeStart,
   }) = _FieldCellState;
 
   factory FieldCellState.initial(FieldContext cellContext) => FieldCellState(
         viewId: cellContext.viewId,
         field: cellContext.field,
         width: cellContext.field.width.toDouble(),
+        resizeStart: 0,
       );
 }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart

@@ -125,10 +125,15 @@ class _DragToExpandLine extends StatelessWidget {
       onTap: () {},
       child: GestureDetector(
         behavior: HitTestBehavior.opaque,
+        onHorizontalDragStart: (details) {
+          context
+              .read<FieldCellBloc>()
+              .add(const FieldCellEvent.onResizeStart());
+        },
         onHorizontalDragUpdate: (value) {
           context
               .read<FieldCellBloc>()
-              .add(FieldCellEvent.startUpdateWidth(value.delta.dx));
+              .add(FieldCellEvent.startUpdateWidth(value.localPosition.dx));
         },
         onHorizontalDragEnd: (end) {
           context

frontend/appflowy_flutter/test/bloc_test/grid_test/field/field_cell_bloc_test.dart

@@ -0,0 +1,60 @@
+import 'package:appflowy/plugins/database_view/application/field/field_cell_bloc.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_service.dart';
+import 'package:bloc_test/bloc_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import '../util.dart';
+
+void main() {
+  late AppFlowyGridTest gridTest;
+
+  setUpAll(() async {
+    gridTest = await AppFlowyGridTest.ensureInitialized();
+  });
+
+  group('$FieldCellBloc', () {
+    late GridTestContext context;
+    late double width;
+
+    setUp(() async {
+      context = await gridTest.createTestGrid();
+    });
+
+    blocTest(
+      'update field width',
+      build: () => FieldCellBloc(
+        cellContext: FieldContext(
+          field: context.fieldContexts[0].field,
+          viewId: context.gridView.id,
+        ),
+      )..add(const FieldCellEvent.initial()),
+      act: (bloc) {
+        width = bloc.state.width;
+        bloc.add(const FieldCellEvent.onResizeStart());
+        bloc.add(const FieldCellEvent.startUpdateWidth(100));
+        bloc.add(const FieldCellEvent.endUpdateWidth());
+      },
+      verify: (bloc) {
+        expect(bloc.state.width, width + 100);
+      },
+    );
+
+    blocTest(
+      'field width should not be lesser than 50px',
+      build: () => FieldCellBloc(
+        cellContext: FieldContext(
+          field: context.fieldContexts[0].field,
+          viewId: context.gridView.id,
+        ),
+      )..add(const FieldCellEvent.initial()),
+      act: (bloc) {
+        bloc.add(const FieldCellEvent.onResizeStart());
+        bloc.add(const FieldCellEvent.startUpdateWidth(-110));
+        bloc.add(const FieldCellEvent.endUpdateWidth());
+      },
+      verify: (bloc) {
+        expect(bloc.state.width, 50);
+      },
+    );
+  });
+}