feat: mobile database settings rework (#4016)

* feat: mobile database settings rework

* chore: clean

frontend/appflowy_flutter/integration_test/util/database_test_op.dart

@@ -33,7 +33,7 @@ import 'package:appflowy/plugins/database_view/grid/presentation/widgets/sort/or
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/toolbar/filter_button.dart';
-import 'package:appflowy/plugins/database_view/grid/presentation/widgets/toolbar/grid_layout.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/database_layout_selector.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart';
 import 'package:appflowy/plugins/database_view/tab_bar/desktop/tab_bar_add_button.dart';
 import 'package:appflowy/plugins/database_view/tab_bar/desktop/tab_bar_header.dart';
@@ -51,6 +51,8 @@ import 'package:appflowy/plugins/database_view/widgets/row/row_banner.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_detail.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_document.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_property.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/database_setting_action.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/database_settings_list.dart';
 import 'package:appflowy/plugins/database_view/widgets/setting/setting_button.dart';
 import 'package:appflowy/plugins/database_view/widgets/setting/setting_property_list.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
@@ -1138,7 +1140,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
   /// Should call [tapDatabaseSettingButton] first.
   Future<void> tapViewPropertiesButton() async {
-    final findSettingItem = find.byType(DatabaseSettingListPopover);
+    final findSettingItem = find.byType(DatabaseSettingsList);
     final findLayoutButton = find.byWidgetPredicate(
       (widget) =>
           widget is FlowyText &&
@@ -1155,7 +1157,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
 
   /// Should call [tapDatabaseSettingButton] first.
   Future<void> tapDatabaseLayoutButton() async {
-    final findSettingItem = find.byType(DatabaseSettingListPopover);
+    final findSettingItem = find.byType(DatabaseSettingsList);
     final findLayoutButton = find.byWidgetPredicate(
       (widget) =>
           widget is FlowyText &&
@@ -1171,7 +1173,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   Future<void> tapCalendarLayoutSettingButton() async {
-    final findSettingItem = find.byType(DatabaseSettingListPopover);
+    final findSettingItem = find.byType(DatabaseSettingsList);
     final findLayoutButton = find.byWidgetPredicate(
       (widget) =>
           widget is FlowyText &&
@@ -1593,7 +1595,8 @@ extension AppFlowyDatabaseTest on WidgetTester {
   ) async {
     final field = find.byWidgetPredicate(
       (widget) =>
-          widget is DatabasePropertyCell && widget.fieldInfo.name == fieldName,
+          widget is DesktopDatabasePropertyCell &&
+          widget.fieldInfo.name == fieldName,
     );
     final toggleVisibilityButton =
         find.descendant(of: field, matching: find.byType(FlowyIconButton));

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_database_field_editor.dart

@@ -158,9 +158,7 @@ class MobileDBFieldBottomSheetBody extends StatelessWidget {
         BottomSheetActionWidget(
           svg: FlowySvgs.date_s,
           text: LocaleKeys.grid_field_editProperty.tr(),
-          onTap: () {
-            onAction(MobileDBBottomSheetGeneralAction.typeOption);
-          },
+          onTap: () => onAction(MobileDBBottomSheetGeneralAction.typeOption),
         ),
         const VSpace(8),
         Row(
@@ -170,9 +168,8 @@ class MobileDBFieldBottomSheetBody extends StatelessWidget {
               child: BottomSheetActionWidget(
                 svg: FlowySvgs.hide_m,
                 text: LocaleKeys.grid_field_hide.tr(),
-                onTap: () {
-                  onAction(MobileDBBottomSheetGeneralAction.toggleVisibility);
-                },
+                onTap: () =>
+                    onAction(MobileDBBottomSheetGeneralAction.toggleVisibility),
               ),
             ),
             const HSpace(8),

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart

@@ -10,11 +10,12 @@ import 'package:go_router/go_router.dart';
 Future<void> showMobileBottomSheet({
   required BuildContext context,
   required WidgetBuilder builder,
+  bool isDragEnabled = true,
 }) async {
   showModalBottomSheet(
     context: context,
     isScrollControlled: true,
-    enableDrag: true,
+    enableDrag: isDragEnabled,
     useSafeArea: true,
     builder: builder,
   );

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_create_row_field_screen.dart

@@ -1,7 +1,6 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart';
 import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
-import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -53,10 +52,6 @@ class _MobileCreateRowFieldScreenState
       ),
       body: MobileFieldEditor(
         viewId: widget.viewId,
-        typeOptionLoader: FieldTypeOptionLoader(
-          viewId: widget.viewId,
-          field: widget.typeOption.field_2,
-        ),
         fieldController: widget.fieldController,
         field: widget.typeOption.field_2,
       ),

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/card_property_edit_screen.dart

@@ -4,7 +4,6 @@ import 'package:appflowy/mobile/presentation/database/card/card_property_edit/mo
 import 'package:appflowy/mobile/presentation/widgets/show_flowy_mobile_confirm_dialog.dart';
 import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
 import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
-import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy/plugins/database_view/grid/application/row/row_detail_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -57,10 +56,6 @@ class CardPropertyEditScreen extends StatelessWidget {
       ),
       body: MobileFieldEditor(
         viewId: cellContext.viewId,
-        typeOptionLoader: FieldTypeOptionLoader(
-          viewId: cellContext.viewId,
-          field: cellContext.fieldInfo.field,
-        ),
         fieldController: fieldController,
         field: cellContext.fieldInfo.field,
       ),

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart

@@ -6,6 +6,9 @@ import 'package:appflowy/plugins/database_view/application/field/field_controlle
 import 'package:appflowy/plugins/database_view/application/field/field_editor_bloc.dart';
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy/plugins/database_view/grid/application/row/row_detail_bloc.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/field_visibility_extension.dart';
+import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
+import 'package:appflowy/workspace/presentation/widgets/toggle/toggle_style.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -17,18 +20,21 @@ class MobileFieldEditor extends StatelessWidget {
   const MobileFieldEditor({
     super.key,
     required this.viewId,
-    required this.typeOptionLoader,
     required this.field,
     required this.fieldController,
   });
 
   final String viewId;
   final FieldController fieldController;
-  final FieldTypeOptionLoader typeOptionLoader;
   final FieldPB field;
 
   @override
   Widget build(BuildContext context) {
+    final typeOptionLoader = FieldTypeOptionLoader(
+      viewId: viewId,
+      field: field,
+    );
+
     return BlocProvider(
       create: (context) {
         return FieldEditorBloc(
@@ -49,42 +55,35 @@ class MobileFieldEditor extends StatelessWidget {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                // field name
                 // TODO(yijing): improve hint text
                 PropertyTitle(LocaleKeys.settings_user_name.tr()),
                 BlocSelector<FieldEditorBloc, FieldEditorState, String>(
                   selector: (state) => state.field.name,
-                  builder: (context, fieldName) {
-                    return MobileFieldNameTextField(
-                      text: fieldName,
-                    );
-                  },
+                  builder: (context, fieldName) =>
+                      MobileFieldNameTextField(text: fieldName),
                 ),
                 Row(
                   children: [
                     Expanded(
-                      child:
-                          PropertyTitle(LocaleKeys.grid_field_visibility.tr()),
+                      child: PropertyTitle(
+                        LocaleKeys.grid_field_visibility.tr(),
+                      ),
                     ),
                     VisibilitySwitch(
-                      isFieldHidden: state.field.visibility ==
-                          FieldVisibility.AlwaysHidden,
-                      onChanged: () {
-                        context.read<RowDetailBloc>().add(
-                              RowDetailEvent.toggleFieldVisibility(
-                                state.field.id,
-                              ),
-                            );
-                      },
+                      isVisible:
+                          state.field.visibility?.isVisibleState() ?? false,
+                      onChanged: () => context.read<RowDetailBloc>().add(
+                            RowDetailEvent.toggleFieldVisibility(
+                              state.field.id,
+                            ),
+                          ),
                     ),
                   ],
                 ),
                 const VSpace(8),
                 // edit property type and settings
                 if (!typeOptionLoader.field.isPrimary)
-                  MobileFieldTypeOptionEditor(
-                    dataController: dataController,
-                  ),
+                  MobileFieldTypeOptionEditor(dataController: dataController),
               ],
             ),
           );
@@ -97,30 +96,29 @@ class MobileFieldEditor extends StatelessWidget {
 class VisibilitySwitch extends StatefulWidget {
   const VisibilitySwitch({
     super.key,
-    required this.isFieldHidden,
+    required this.isVisible,
     this.onChanged,
   });
 
-  final bool isFieldHidden;
+  final bool isVisible;
   final Function? onChanged;
 
   @override
   State<VisibilitySwitch> createState() => _VisibilitySwitchState();
 }
 
 class _VisibilitySwitchState extends State<VisibilitySwitch> {
-  late bool _isFieldHidden = widget.isFieldHidden;
+  late bool _isVisible = widget.isVisible;
 
   @override
   Widget build(BuildContext context) {
-    return Switch.adaptive(
-      activeColor: Theme.of(context).colorScheme.primary,
-      value: !_isFieldHidden,
-      onChanged: (bool value) {
-        setState(() {
-          _isFieldHidden = !_isFieldHidden;
-          widget.onChanged?.call();
-        });
+    return Toggle(
+      padding: EdgeInsets.zero,
+      value: _isVisible,
+      style: ToggleStyle.mobile,
+      onChanged: (newValue) {
+        widget.onChanged?.call();
+        setState(() => _isVisible = newValue);
       },
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/setting/widgets/mobile_setting_item_widget.dart

@@ -5,23 +5,36 @@ class MobileSettingItem extends StatelessWidget {
   const MobileSettingItem({
     super.key,
     required this.name,
+    this.padding = const EdgeInsets.only(bottom: 4),
+    this.trailing,
+    this.leadingIcon,
     this.subtitle,
-    required this.trailing,
     this.onTap,
   });
+
   final String name;
+  final EdgeInsets padding;
+  final Widget? trailing;
+  final Widget? leadingIcon;
   final Widget? subtitle;
-  final Widget trailing;
   final VoidCallback? onTap;
 
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(bottom: 4),
+      padding: padding,
       child: ListTile(
-        title: FlowyText.medium(
-          name,
-          fontSize: 14.0,
+        title: Row(
+          children: [
+            if (leadingIcon != null) ...[
+              leadingIcon!,
+              const HSpace(8),
+            ],
+            FlowyText.medium(
+              name,
+              fontSize: 14.0,
+            ),
+          ],
         ),
         subtitle: subtitle,
         trailing: trailing,