chore: delete the windows_release.yml

fix: listen on the scroll position changed after widget was  dpated

.github/workflows/release.yml

@@ -129,3 +129,54 @@ jobs:
           asset_path: ${{ env.MACOS_APP_RELEASE_PATH }}/${{ env.MACOS_X86_ZIP_NAME }}
           asset_name: ${{ env.MACOS_X86_ZIP_NAME }}
           asset_content_type: application/octet-stream
+
+  build-windows-x86_64:
+    runs-on: windows-latest
+    needs: create-release
+    env:
+      WINDOWS_APP_RELEASE_PATH: frontend\app_flowy\product\${{ github.ref_name }}\windows
+      WINDOWS_ZIP_NAME: AppFlowy-windows-x86_64.zip
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup environment - Rust and Cargo
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: 'stable-2022-01-20'
+
+      - name: Setup environment - Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          channel: 'stable'
+          flutter-version: '3.0.5'
+
+      - name: Pre build
+        working-directory: frontend
+        run: |
+          vcpkg integrate install
+          cargo install --force cargo-make
+          cargo install --force duckscript_cli
+          cargo make flowy_dev
+
+      - name: Build Windows app
+        working-directory: frontend
+        run: |
+          flutter config --enable-windows-desktop
+          cargo make --env APP_VERSION=${{ github.ref_name }} --profile production-windows-x86 appflowy
+
+      - uses: vimtor/action-zip@v1
+        with:
+          files: ${{ env.WINDOWS_APP_RELEASE_PATH }}\
+          dest: ${{ env.WINDOWS_APP_RELEASE_PATH }}\${{ env.WINDOWS_ZIP_NAME }}
+
+      - name: Upload Release Asset
+        id: upload-release-asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ needs.create-release.outputs.upload_url }}
+          asset_path: ${{ env.WINDOWS_APP_RELEASE_PATH }}\${{ env.WINDOWS_ZIP_NAME }}
+          asset_name: ${{ env.WINDOWS_ZIP_NAME }}
+          asset_content_type: application/octet-stream

frontend/app_flowy/assets/translations/en.json

@@ -197,7 +197,8 @@
       "duplicate": "Duplicate",
       "delete": "Delete",
       "textPlaceholder": "Empty",
-      "copyProperty": "Copied property to clipboard"
+      "copyProperty": "Copied property to clipboard",
+      "count": "Count"
     },
     "selectOption": {
       "create": "Create",

frontend/app_flowy/lib/plugins/board/application/card/board_checkbox_cell_bloc.dart

@@ -21,6 +21,9 @@ class BoardCheckboxCellBloc
           didReceiveCellUpdate: (cellData) {
             emit(state.copyWith(isSelected: _isSelected(cellData)));
           },
+          select: () async {
+            cellController.saveCellData(!state.isSelected ? "Yes" : "No");
+          },
         );
       },
     );
@@ -50,6 +53,7 @@ class BoardCheckboxCellBloc
 @freezed
 class BoardCheckboxCellEvent with _$BoardCheckboxCellEvent {
   const factory BoardCheckboxCellEvent.initial() = _InitialCell;
+  const factory BoardCheckboxCellEvent.select() = _Selected;
   const factory BoardCheckboxCellEvent.didReceiveCellUpdate(
       String cellContent) = _DidReceiveCellUpdate;
 }

frontend/app_flowy/lib/plugins/board/presentation/board_page.dart

@@ -9,6 +9,7 @@ import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
 import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_detail.dart';
+import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
@@ -20,6 +21,7 @@ import 'package:flowy_sdk/protobuf/flowy-grid/block_entities.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:provider/provider.dart';
 import '../../grid/application/row/row_cache.dart';
 import '../application/board_bloc.dart';
 import 'card/card.dart';
@@ -87,34 +89,37 @@ class _BoardContentState extends State<BoardContent> {
             children: [const _ToolbarBlocAdaptor(), _buildBoard(context)],
           );
 
-          return Container(
-            color: context.read<AppTheme>().surface,
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 20),
-              child: column,
-            ),
+          return Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 20),
+            child: column,
           );
         },
       ),
     );
   }
 
-  Expanded _buildBoard(BuildContext context) {
-    return Expanded(
-      child: AppFlowyBoard(
-        boardScrollController: scrollManager,
-        scrollController: ScrollController(),
-        controller: context.read<BoardBloc>().boardController,
-        headerBuilder: _buildHeader,
-        footerBuilder: _buildFooter,
-        cardBuilder: (_, column, columnItem) => _buildCard(
-          context,
-          column,
-          columnItem,
-        ),
-        groupConstraints: const BoxConstraints.tightFor(width: 300),
-        config: AppFlowyBoardConfig(
-          groupBackgroundColor: HexColor.fromHex('#F7F8FC'),
+  Widget _buildBoard(BuildContext context) {
+    return ChangeNotifierProvider.value(
+      value: Provider.of<AppearanceSettingModel>(context, listen: true),
+      child: Selector<AppearanceSettingModel, AppTheme>(
+        selector: (ctx, notifier) => notifier.theme,
+        builder: (ctx, theme, child) => Expanded(
+          child: AppFlowyBoard(
+            boardScrollController: scrollManager,
+            scrollController: ScrollController(),
+            controller: context.read<BoardBloc>().boardController,
+            headerBuilder: _buildHeader,
+            footerBuilder: _buildFooter,
+            cardBuilder: (_, column, columnItem) => _buildCard(
+              context,
+              column,
+              columnItem,
+            ),
+            groupConstraints: const BoxConstraints.tightFor(width: 300),
+            config: AppFlowyBoardConfig(
+              groupBackgroundColor: theme.bg1,
+            ),
+          ),
         ),
       ),
     );
@@ -214,7 +219,7 @@ class _BoardContentState extends State<BoardContent> {
 
   Widget _buildCard(
     BuildContext context,
-    AppFlowyGroupData column,
+    AppFlowyGroupData group,
     AppFlowyGroupItem columnItem,
   ) {
     final boardColumnItem = columnItem as BoardColumnItem;
@@ -241,10 +246,11 @@ class _BoardContentState extends State<BoardContent> {
       },
     );
 
-    ValueKey? key = cardKeysCache[columnItem.id];
+    final groupItemId = columnItem.id + group.id;
+    ValueKey? key = cardKeysCache[groupItemId];
     if (key == null) {
-      final newKey = ValueKey(columnItem.id);
-      cardKeysCache[columnItem.id] = newKey;
+      final newKey = ValueKey(groupItemId);
+      cardKeysCache[groupItemId] = newKey;
       key = newKey;
     }
 
@@ -254,7 +260,7 @@ class _BoardContentState extends State<BoardContent> {
       decoration: _makeBoxDecoration(context),
       child: BoardCard(
         gridId: gridId,
-        groupId: column.id,
+        groupId: group.id,
         fieldId: boardColumnItem.fieldContext.id,
         isEditing: isEditing,
         cellBuilder: cellBuilder,
@@ -314,7 +320,15 @@ class _ToolbarBlocAdaptor extends StatelessWidget {
           fieldController: bloc.fieldController,
         );
 
-        return BoardToolbar(toolbarContext: toolbarContext);
+        return ChangeNotifierProvider.value(
+          value: Provider.of<AppearanceSettingModel>(context, listen: true),
+          child: Selector<AppearanceSettingModel, AppTheme>(
+            selector: (ctx, notifier) => notifier.theme,
+            builder: (ctx, theme, child) {
+              return BoardToolbar(toolbarContext: toolbarContext);
+            },
+          ),
+        );
       },
     );
   }

frontend/app_flowy/lib/plugins/board/presentation/card/board_checkbox_cell.dart

@@ -48,6 +48,9 @@ class _BoardCheckboxCellState extends State<BoardCheckboxCell> {
               iconPadding: EdgeInsets.zero,
               icon: icon,
               width: 20,
+              onPressed: () => context
+                  .read<BoardCheckboxCellBloc>()
+                  .add(const BoardCheckboxCellEvent.select()),
             ),
           );
         },

frontend/app_flowy/lib/plugins/board/presentation/card/board_select_option_cell.dart

@@ -87,24 +87,3 @@ class _BoardSelectOptionCellState extends State<BoardSelectOptionCell> {
     super.dispose();
   }
 }
-
-class _SelectOptionDialog extends StatelessWidget {
-  final GridSelectOptionCellController _controller;
-  const _SelectOptionDialog({
-    Key? key,
-    required IGridCellController controller,
-  })  : _controller = controller as GridSelectOptionCellController,
-        super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      child: InkWell(onTap: () {
-        SelectOptionCellEditor.show(
-          context: context,
-          cellController: _controller,
-        );
-      }),
-    );
-  }
-}

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

@@ -53,7 +53,7 @@ class _SettingButton extends StatelessWidget {
       onPressed: () => BoardSettingList.show(context, settingContext),
       icon: Padding(
         padding: const EdgeInsets.symmetric(vertical: 3.0, horizontal: 3.0),
-        child: svgWidget("grid/setting/setting"),
+        child: svgWidget("grid/setting/setting", color: theme.iconColor),
       ),
     );
   }

frontend/app_flowy/lib/plugins/grid/application/cell/checkbox_cell_bloc.dart

@@ -20,7 +20,7 @@ class CheckboxCellBloc extends Bloc<CheckboxCellEvent, CheckboxCellState> {
             _startListening();
           },
           select: () async {
-            _updateCellData();
+            cellController.saveCellData(!state.isSelected ? "Yes" : "No");
           },
           didReceiveCellUpdate: (cellData) {
             emit(state.copyWith(isSelected: _isSelected(cellData)));
@@ -49,10 +49,6 @@ class CheckboxCellBloc extends Bloc<CheckboxCellEvent, CheckboxCellState> {
       }
     }));
   }
-
-  void _updateCellData() {
-    cellController.saveCellData(!state.isSelected ? "Yes" : "No");
-  }
 }
 
 @freezed

frontend/app_flowy/lib/plugins/grid/application/cell/select_option_editor_bloc.dart

@@ -103,11 +103,19 @@ class SelectOptionCellEditorBloc
   void _filterOption(String optionName, Emitter<SelectOptionEditorState> emit) {
     final _MakeOptionResult result =
         _makeOptions(Some(optionName), state.allOptions);
-    emit(state.copyWith(
-      filter: Some(optionName),
-      options: result.options,
-      createOption: result.createOption,
-    ));
+    if (optionName.isEmpty) {
+      emit(state.copyWith(
+        filter: Some(optionName),
+        options: result.options,
+        createOption: none(),
+      ));
+    } else {
+      emit(state.copyWith(
+        filter: Some(optionName),
+        options: result.options,
+        createOption: result.createOption,
+      ));
+    }
   }
 
   void _loadOptions() {

frontend/app_flowy/lib/plugins/grid/application/field/field_editor_bloc.dart

@@ -35,7 +35,7 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
             emit(state.copyWith(name: name));
           },
           didReceiveFieldChanged: (FieldPB field) {
-            emit(state.copyWith(field: Some(field)));
+            emit(state.copyWith(field: Some(field), name: field.name));
           },
         );
       },

frontend/app_flowy/lib/plugins/grid/application/grid_bloc.dart

@@ -41,6 +41,7 @@ class GridBloc extends Bloc<GridEvent, GridState> {
           didReceiveRowUpdate: (newRowInfos, reason) {
             emit(state.copyWith(
               rowInfos: newRowInfos,
+              rowCount: newRowInfos.length,
               reason: reason,
             ));
           },
@@ -117,6 +118,7 @@ class GridState with _$GridState {
     required Option<GridPB> grid,
     required GridFieldEquatable fields,
     required List<RowInfo> rowInfos,
+    required int rowCount,
     required GridLoadingState loadingState,
     required RowsChangedReason reason,
   }) = _GridState;
@@ -124,6 +126,7 @@ class GridState with _$GridState {
   factory GridState.initial(String gridId) => GridState(
         fields: GridFieldEquatable(UnmodifiableListView([])),
         rowInfos: [],
+        rowCount: 0,
         grid: none(),
         gridId: gridId,
         loadingState: const _Loading(),

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

@@ -1,7 +1,9 @@
+import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
 import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/grid_bloc.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
@@ -118,6 +120,7 @@ class _FlowyGridState extends State<FlowyGrid> {
             const _GridToolbarAdaptor(),
             _gridHeader(context, state.gridId),
             Flexible(child: child),
+            const RowCountBadge(),
           ],
         );
       },
@@ -302,48 +305,48 @@ class _GridFooter extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final rowCount = context.watch<GridBloc>().state.rowInfos.length;
-    final theme = context.watch<AppTheme>();
     return SliverPadding(
       padding: const EdgeInsets.only(bottom: 200),
       sliver: SliverToBoxAdapter(
         child: SizedBox(
           height: GridSize.footerHeight,
           child: Padding(
-            padding: GridSize.headerContentInsets,
-            child: Row(
-              children: [
-                SizedBox(width: GridSize.leadingHeaderPadding),
-                Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    const SizedBox(width: 120, child: GridAddRowButton()),
-                    const SizedBox(height: 30),
-                    _rowCountTextWidget(theme: theme, count: rowCount)
-                  ],
-                ),
-              ],
+            padding: GridSize.footerContentInsets,
+            child: const Expanded(
+              child: SizedBox(height: 40, child: GridAddRowButton()),
             ),
           ),
         ),
       ),
     );
   }
+}
 
-  Widget _rowCountTextWidget({required AppTheme theme, required int count}) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.start,
-      children: [
-        FlowyText.regular(
-          'Count : ',
-          fontSize: 13,
-          color: theme.shader3,
-        ),
-        FlowyText.regular(
-          count.toString(),
-          fontSize: 13,
-        ),
-      ],
+class RowCountBadge extends StatelessWidget {
+  const RowCountBadge({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+
+    return BlocSelector<GridBloc, GridState, int>(
+      selector: (state) => state.rowCount,
+      builder: (context, rowCount) {
+        return Padding(
+          padding: GridSize.footerContentInsets,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              FlowyText.regular(
+                '${LocaleKeys.grid_row_count.tr()} : ',
+                fontSize: 13,
+                color: theme.shader3,
+              ),
+              FlowyText.regular(rowCount.toString(), fontSize: 13),
+            ],
+          ),
+        );
+      },
     );
   }
 }

frontend/app_flowy/lib/plugins/grid/presentation/layout/sizes.dart

@@ -5,7 +5,7 @@ class GridSize {
 
   static double get scrollBarSize => 12 * scale;
   static double get headerHeight => 40 * scale;
-  static double get footerHeight => 100 * scale;
+  static double get footerHeight => 40 * scale;
   static double get leadingHeaderPadding => 50 * scale;
   static double get trailHeaderPadding => 140 * scale;
   static double get headerContainerPadding => 0 * scale;
@@ -35,7 +35,7 @@ class GridSize {
       );
 
   static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
-        0,
+        GridSize.leadingHeaderPadding,
         GridSize.headerContainerPadding,
         GridSize.headerContainerPadding,
         GridSize.headerContainerPadding,

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

@@ -100,11 +100,7 @@ class SelectOptionTag extends StatelessWidget {
       backgroundColor: color,
       labelPadding: const EdgeInsets.symmetric(horizontal: 6),
       selected: true,
-      onSelected: (_) {
-        if (onSelected != null) {
-          onSelected!();
-        }
-      },
+      onSelected: (_) => onSelected?.call(),
     );
   }
 }

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

@@ -22,7 +22,7 @@ import '../../header/type_option/select_option_editor.dart';
 import 'extension.dart';
 import 'text_field.dart';
 
-const double _editorPannelWidth = 300;
+const double _editorPanelWidth = 300;
 
 class SelectOptionCellEditor extends StatelessWidget with FlowyOverlayDelegate {
   final GridSelectOptionCellController cellController;
@@ -72,8 +72,8 @@ class SelectOptionCellEditor extends StatelessWidget with FlowyOverlayDelegate {
     //
     FlowyOverlay.of(context).insertWithAnchor(
       widget: OverlayContainer(
-        constraints: BoxConstraints.loose(const Size(_editorPannelWidth, 300)),
-        child: SizedBox(width: _editorPannelWidth, child: editor),
+        constraints: BoxConstraints.loose(const Size(_editorPanelWidth, 300)),
+        child: SizedBox(width: _editorPanelWidth, child: editor),
       ),
       identifier: SelectOptionCellEditor.identifier(),
       anchorContext: context,
@@ -158,7 +158,7 @@ class _TextField extends StatelessWidget {
           child: SelectOptionTextField(
             options: state.options,
             selectedOptionMap: optionMap,
-            distanceToText: _editorPannelWidth * 0.7,
+            distanceToText: _editorPanelWidth * 0.7,
             tagController: _tagController,
             onClick: () => FlowyOverlay.of(context)
                 .remove(SelectOptionTypeOptionEditor.identifier),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart

@@ -32,10 +32,10 @@ class SelectOptionTextField extends StatelessWidget {
     required this.onNewTag,
     required this.newText,
     this.onClick,
-    TextEditingController? controller,
+    TextEditingController? textController,
     FocusNode? focusNode,
     Key? key,
-  })  : _controller = controller ?? TextEditingController(),
+  })  : _controller = textController ?? TextEditingController(),
         _focusNode = focusNode ?? FocusNode(),
         super(key: key);
 
@@ -48,7 +48,7 @@ class SelectOptionTextField extends StatelessWidget {
       textfieldTagsController: tagController,
       initialTags: selectedOptionMap.keys.toList(),
       focusNode: _focusNode,
-      textSeparators: const [' ', ','],
+      textSeparators: const [','],
       inputfieldBuilder: (BuildContext context, editController, focusNode,
           error, onChanged, onSubmitted) {
         return ((context, sc, tags, onTagDelegate) {
@@ -70,6 +70,7 @@ class SelectOptionTextField extends StatelessWidget {
 
               if (text.isNotEmpty) {
                 onNewTag(text);
+                focusNode.requestFocus();
               }
             },
             maxLines: 1,

frontend/app_flowy/lib/plugins/grid/presentation/widgets/footer/grid_footer.dart

@@ -16,7 +16,7 @@ class GridAddRowButton extends StatelessWidget {
       text: const FlowyText.medium('New row', fontSize: 12),
       hoverColor: theme.shader6,
       onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
-      leftIcon: svgWidget("home/add"),
+      leftIcon: svgWidget("home/add", color: theme.iconColor),
     );
   }
 }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart

@@ -13,12 +13,14 @@ import 'field_type_option_editor.dart';
 class FieldEditor extends StatelessWidget with FlowyOverlayDelegate {
   final String gridId;
   final String fieldName;
+  final VoidCallback? onRemoved;
 
   final IFieldTypeOptionLoader typeOptionLoader;
   const FieldEditor({
     required this.gridId,
-    required this.fieldName,
+    this.fieldName = "",
     required this.typeOptionLoader,
+    this.onRemoved,
     Key? key,
   }) : super(key: key);
 
@@ -73,6 +75,9 @@ class FieldEditor extends StatelessWidget with FlowyOverlayDelegate {
 
   @override
   bool asBarrier() => true;
+
+  @override
+  void didRemove() => onRemoved?.call();
 }
 
 class _FieldTypeOptionCell extends StatelessWidget {

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_name_input.dart

@@ -33,6 +33,7 @@ class _FieldNameTextFieldState extends State<FieldNameTextField> {
     final theme = context.watch<AppTheme>();
     return RoundedInputField(
       height: 36,
+      autoFocus: true,
       style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
       controller: controller,
       normalBorderColor: theme.shader4,
@@ -47,7 +48,8 @@ class _FieldNameTextFieldState extends State<FieldNameTextField> {
   @override
   void didUpdateWidget(covariant FieldNameTextField oldWidget) {
     controller.text = widget.name;
-    controller.selection = TextSelection.fromPosition(TextPosition(offset: controller.text.length));
+    controller.selection = TextSelection.fromPosition(
+        TextPosition(offset: controller.text.length));
 
     super.didUpdateWidget(oldWidget);
   }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart

@@ -130,6 +130,7 @@ class _PropertyList extends StatelessWidget {
                 axis: Axis.vertical,
                 controller: _scrollController,
                 barSize: GridSize.scrollBarSize,
+                autoHideScrollbar: false,
                 child: ListView.separated(
                   controller: _scrollController,
                   itemCount: state.gridCells.length,
@@ -145,7 +146,25 @@ class _PropertyList extends StatelessWidget {
                 ),
               ),
             ),
-            _CreateFieldButton(viewId: viewId),
+            _CreateFieldButton(
+              viewId: viewId,
+              onCreated: () {
+                // _scrollController.
+                FieldEditor(
+                  gridId: viewId,
+                  typeOptionLoader: NewFieldTypeOptionLoader(gridId: viewId),
+                  onRemoved: () {
+                    WidgetsBinding.instance.addPostFrameCallback((_) {
+                      _scrollController.animateTo(
+                        _scrollController.position.maxScrollExtent,
+                        duration: const Duration(milliseconds: 250),
+                        curve: Curves.ease,
+                      );
+                    });
+                  },
+                ).show(context);
+              },
+            ),
           ],
         );
       },
@@ -155,7 +174,12 @@ class _PropertyList extends StatelessWidget {
 
 class _CreateFieldButton extends StatelessWidget {
   final String viewId;
-  const _CreateFieldButton({required this.viewId, Key? key}) : super(key: key);
+  final VoidCallback onCreated;
+  const _CreateFieldButton({
+    required this.viewId,
+    required this.onCreated,
+    Key? key,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -169,11 +193,7 @@ class _CreateFieldButton extends StatelessWidget {
           fontSize: 12,
         ),
         hoverColor: theme.shader6,
-        onTap: () => FieldEditor(
-          gridId: viewId,
-          fieldName: "",
-          typeOptionLoader: NewFieldTypeOptionLoader(gridId: viewId),
-        ).show(context),
+        onTap: () => onCreated(),
         leftIcon: svgWidget("home/add"),
       ),
     );

frontend/app_flowy/lib/startup/tasks/app_widget.dart

@@ -46,6 +46,7 @@ class InitAppWidgetTask extends LaunchTask {
         ],
         path: 'assets/translations',
         fallbackLocale: const Locale('en'),
+        useFallbackTranslations: true,
         saveLocale: false,
         child: app,
       ),

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart

@@ -14,12 +14,9 @@ class StyledScrollbar extends StatefulWidget {
   final ScrollController controller;
   final Function(double)? onDrag;
   final bool showTrack;
+  final bool autoHideScrollbar;
   final Color? handleColor;
   final Color? trackColor;
-
-  // ignore: todo
-  // TODO: Remove contentHeight if we can fix this issue
-  // https://stackoverflow.com/questions/60855712/flutter-how-to-force-scrollcontroller-to-recalculate-position-maxextents
   final double? contentSize;
 
   const StyledScrollbar(
@@ -30,6 +27,7 @@ class StyledScrollbar extends StatefulWidget {
       this.onDrag,
       this.contentSize,
       this.showTrack = false,
+      this.autoHideScrollbar = true,
       this.handleColor,
       this.trackColor})
       : super(key: key);
@@ -46,28 +44,7 @@ class ScrollbarState extends State<StyledScrollbar> {
   @override
   void initState() {
     widget.controller.addListener(() => setState(() {}));
-    widget.controller.position.isScrollingNotifier.addListener(
-      () {
-        if (!mounted) {
-          return;
-        }
-        _hideScrollbarOperation?.cancel();
-        if (!widget.controller.position.isScrollingNotifier.value) {
-          // scroll is stopped
-          _hideScrollbarOperation = CancelableOperation.fromFuture(
-            Future.delayed(const Duration(seconds: 2), () {}),
-          ).then((_) {
-            // Opti: hide with animation
-            hideHandler = true;
-            if (mounted) {
-              setState(() {});
-            }
-          });
-        } else {
-          hideHandler = false;
-        }
-      },
-    );
+    _listenOnScrollPositionChanged();
     super.initState();
   }
 
@@ -78,6 +55,7 @@ class ScrollbarState extends State<StyledScrollbar> {
 
   @override
   void didUpdateWidget(StyledScrollbar oldWidget) {
+    _listenOnScrollPositionChanged();
     if (oldWidget.contentSize != widget.contentSize) setState(() {});
     super.didUpdateWidget(oldWidget);
   }
@@ -103,7 +81,6 @@ class ScrollbarState extends State<StyledScrollbar> {
             break;
           case Axis.horizontal:
             // Use supplied contentSize if we have it, otherwise just fallback to maxScrollExtents
-
             if (contentSize != null && contentSize > 0) {
               maxExtent = contentSize - constraints.maxWidth;
             } else {
@@ -118,7 +95,8 @@ class ScrollbarState extends State<StyledScrollbar> {
         // Calculate the alignment for the handle, this is a value between 0 and 1,
         // it automatically takes the handle size into acct
         // ignore: omit_local_variable_types
-        double handleAlignment = maxExtent == 0 ? 0 : widget.controller.offset / maxExtent;
+        double handleAlignment =
+            maxExtent == 0 ? 0 : widget.controller.offset / maxExtent;
 
         // Convert handle alignment from [0, 1] to [-1, 1]
         handleAlignment *= 2.0;
@@ -127,19 +105,25 @@ class ScrollbarState extends State<StyledScrollbar> {
         // Calculate handleSize by comparing the total content size to our viewport
         var handleExtent = _viewExtent;
         if (contentExtent > _viewExtent) {
-          //Make sure handle is never small than the minSize
+          // Make sure handle is never small than the minSize
           handleExtent = max(60, _viewExtent * _viewExtent / contentExtent);
         }
+
         // Hide the handle if content is < the viewExtent
         var showHandle = contentExtent > _viewExtent && contentExtent > 0;
+
         if (hideHandler) {
           showHandle = false;
         }
 
         // Handle color
-        var handleColor = widget.handleColor ?? (theme.isDark ? theme.bg2.withOpacity(.2) : theme.bg2);
+        var handleColor = widget.handleColor ??
+            (theme.isDark ? theme.bg2.withOpacity(.2) : theme.bg2);
         // Track color
-        var trackColor = widget.trackColor ?? (theme.isDark ? theme.bg2.withOpacity(.1) : theme.bg2.withOpacity(.3));
+        var trackColor = widget.trackColor ??
+            (theme.isDark
+                ? theme.bg2.withOpacity(.1)
+                : theme.bg2.withOpacity(.3));
 
         //Layout the stack, it just contains a child, and
         return Stack(children: <Widget>[
@@ -149,8 +133,12 @@ class ScrollbarState extends State<StyledScrollbar> {
               alignment: const Alignment(1, 1),
               child: Container(
                 color: trackColor,
-                width: widget.axis == Axis.vertical ? widget.size : double.infinity,
-                height: widget.axis == Axis.horizontal ? widget.size : double.infinity,
+                width: widget.axis == Axis.vertical
+                    ? widget.size
+                    : double.infinity,
+                height: widget.axis == Axis.horizontal
+                    ? widget.size
+                    : double.infinity,
               ),
             ),
 
@@ -167,10 +155,14 @@ class ScrollbarState extends State<StyledScrollbar> {
               // HANDLE SHAPE
               child: MouseHoverBuilder(
                 builder: (_, isHovered) => Container(
-                  width: widget.axis == Axis.vertical ? widget.size : handleExtent,
-                  height: widget.axis == Axis.horizontal ? widget.size : handleExtent,
+                  width:
+                      widget.axis == Axis.vertical ? widget.size : handleExtent,
+                  height: widget.axis == Axis.horizontal
+                      ? widget.size
+                      : handleExtent,
                   decoration: BoxDecoration(
-                      color: handleColor.withOpacity(isHovered ? 1 : .85), borderRadius: Corners.s3Border),
+                      color: handleColor.withOpacity(isHovered ? 1 : .85),
+                      borderRadius: Corners.s3Border),
                 ),
               ),
             ),
@@ -182,17 +174,42 @@ class ScrollbarState extends State<StyledScrollbar> {
 
   void _handleHorizontalDrag(DragUpdateDetails details) {
     var pos = widget.controller.offset;
-    var pxRatio = (widget.controller.position.maxScrollExtent + _viewExtent) / _viewExtent;
-    widget.controller.jumpTo((pos + details.delta.dx * pxRatio).clamp(0.0, widget.controller.position.maxScrollExtent));
+    var pxRatio = (widget.controller.position.maxScrollExtent + _viewExtent) /
+        _viewExtent;
+    widget.controller.jumpTo((pos + details.delta.dx * pxRatio)
+        .clamp(0.0, widget.controller.position.maxScrollExtent));
     widget.onDrag?.call(details.delta.dx);
   }
 
   void _handleVerticalDrag(DragUpdateDetails details) {
     var pos = widget.controller.offset;
-    var pxRatio = (widget.controller.position.maxScrollExtent + _viewExtent) / _viewExtent;
-    widget.controller.jumpTo((pos + details.delta.dy * pxRatio).clamp(0.0, widget.controller.position.maxScrollExtent));
+    var pxRatio = (widget.controller.position.maxScrollExtent + _viewExtent) /
+        _viewExtent;
+    widget.controller.jumpTo((pos + details.delta.dy * pxRatio)
+        .clamp(0.0, widget.controller.position.maxScrollExtent));
     widget.onDrag?.call(details.delta.dy);
   }
+
+  void _listenOnScrollPositionChanged() {
+    widget.controller.position.isScrollingNotifier.addListener(
+      () {
+        if (!mounted) return;
+        if (!widget.autoHideScrollbar) return;
+
+        _hideScrollbarOperation?.cancel();
+        if (!widget.controller.position.isScrollingNotifier.value) {
+          _hideScrollbarOperation = CancelableOperation.fromFuture(
+            Future.delayed(const Duration(seconds: 2), () {}),
+          ).then((_) {
+            hideHandler = true;
+            if (mounted) setState(() {});
+          });
+        } else {
+          hideHandler = false;
+        }
+      },
+    );
+  }
 }
 
 class ScrollbarListStack extends StatelessWidget {
@@ -204,6 +221,7 @@ class ScrollbarListStack extends StatelessWidget {
   final EdgeInsets? scrollbarPadding;
   final Color? handleColor;
   final Color? trackColor;
+  final bool autoHideScrollbar;
 
   const ScrollbarListStack(
       {Key? key,
@@ -214,6 +232,7 @@ class ScrollbarListStack extends StatelessWidget {
       this.contentSize,
       this.scrollbarPadding,
       this.handleColor,
+      this.autoHideScrollbar = true,
       this.trackColor})
       : super(key: key);
 
@@ -238,6 +257,7 @@ class ScrollbarListStack extends StatelessWidget {
             contentSize: contentSize,
             trackColor: trackColor,
             handleColor: handleColor,
+            autoHideScrollbar: autoHideScrollbar,
           ),
         )
             // The animate will be used by the children that using styled_widget.

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scrollview.dart

@@ -43,7 +43,9 @@ class StyledSingleChildScrollViewState
 
   @override
   void dispose() {
-    // scrollController.dispose();
+    if (widget.controller == null) {
+      scrollController.dispose();
+    }
     super.dispose();
   }
 
@@ -109,6 +111,9 @@ class StyledCustomScrollViewState extends State<StyledCustomScrollView> {
 
   @override
   void dispose() {
+    if (widget.verticalController == null) {
+      controller.dispose();
+    }
     super.dispose();
   }
 

frontend/scripts/makefile/flutter.toml

@@ -186,7 +186,7 @@ script = [
   """
   cd ./app_flowy/
   exec cmd.exe /c flutter clean
-  exec cmd.exe /c flutter pub get
+  exec cmd.exe /c flutter packages pub get
   exec cmd.exe /c flutter packages pub run easy_localization:generate -S assets/translations/ -f keys -o locale_keys.g.dart -S assets/translations -s en.json
   exec cmd.exe /c flutter packages pub run build_runner build --delete-conflicting-outputs
   """

frontend/scripts/makefile/protobuf.toml

@@ -29,6 +29,9 @@ end
 ret = which protoc-gen-dart
 if is_empty ${ret}
     exec cmd.exe /c dart pub global activate protoc_plugin
+end
+ret = which protoc-gen-dart
+if is_empty ${ret}
     home_dir = get_home_dir
     echo Please add '${home_dir}\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\bin' into PATH env var
     exit -1