fix: bottom sheet color and sort ui imrprovement (#4849)

frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart

@@ -148,7 +148,7 @@ class _MobileViewPageState extends State<MobileViewPage> {
           context,
           showDragHandle: true,
           showDivider: false,
-          backgroundColor: Theme.of(context).colorScheme.surface,
+          backgroundColor: Theme.of(context).colorScheme.background,
           builder: (_) => _buildViewPageBottomSheet(context),
         );
       },

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

@@ -2,7 +2,6 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/widget/separated_flex.dart';
 import 'package:flutter/material.dart';
 
 enum MobileViewItemBottomSheetBodyAction {
@@ -26,12 +25,8 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SeparatedColumn(
+    return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
-      separatorBuilder: () => const Divider(
-        height: 8.5,
-        thickness: 0.5,
-      ),
       children: [
         MobileQuickActionButton(
           text: LocaleKeys.button_rename.tr(),
@@ -40,6 +35,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
             MobileViewItemBottomSheetBodyAction.rename,
           ),
         ),
+        _divider(),
         MobileQuickActionButton(
           text: isFavorite
               ? LocaleKeys.button_removeFromFavorites.tr()
@@ -54,6 +50,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
                 : MobileViewItemBottomSheetBodyAction.addToFavorites,
           ),
         ),
+        _divider(),
         MobileQuickActionButton(
           text: LocaleKeys.button_duplicate.tr(),
           icon: FlowySvgs.m_duplicate_s,
@@ -61,6 +58,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
             MobileViewItemBottomSheetBodyAction.duplicate,
           ),
         ),
+        _divider(),
         MobileQuickActionButton(
           text: LocaleKeys.button_delete.tr(),
           textColor: Theme.of(context).colorScheme.error,
@@ -70,7 +68,13 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
             MobileViewItemBottomSheetBodyAction.delete,
           ),
         ),
+        _divider(),
       ],
     );
   }
+
+  Widget _divider() => const Divider(
+        height: 8.5,
+        thickness: 0.5,
+      );
 }

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

@@ -4,7 +4,6 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 enum MobileViewBottomSheetBodyAction {
@@ -85,12 +84,8 @@ class MobileViewBottomSheetBody extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final isFavorite = view.isFavorite;
-    return SeparatedColumn(
+    return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
-      separatorBuilder: () => const Divider(
-        height: 8.5,
-        thickness: 0.5,
-      ),
       children: [
         MobileQuickActionButton(
           text: LocaleKeys.button_rename.tr(),
@@ -99,6 +94,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
             MobileViewBottomSheetBodyAction.rename,
           ),
         ),
+        _divider(),
         MobileQuickActionButton(
           text: isFavorite
               ? LocaleKeys.button_removeFromFavorites.tr()
@@ -113,6 +109,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
                 : MobileViewBottomSheetBodyAction.addToFavorites,
           ),
         ),
+        _divider(),
         MobileQuickActionButton(
           text: LocaleKeys.button_duplicate.tr(),
           icon: FlowySvgs.m_duplicate_s,
@@ -120,6 +117,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
             MobileViewBottomSheetBodyAction.duplicate,
           ),
         ),
+        _divider(),
         MobileQuickActionButton(
           text: LocaleKeys.button_delete.tr(),
           textColor: Theme.of(context).colorScheme.error,
@@ -129,7 +127,13 @@ class MobileViewBottomSheetBody extends StatelessWidget {
             MobileViewBottomSheetBodyAction.delete,
           ),
         ),
+        _divider(),
       ],
     );
   }
+
+  Widget _divider() => const Divider(
+        height: 8.5,
+        thickness: 0.5,
+      );
 }

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

@@ -54,7 +54,7 @@ enum MobilePaneActionType {
               context,
               showDragHandle: true,
               showDivider: false,
-              backgroundColor: Theme.of(context).colorScheme.surface,
+              backgroundColor: Theme.of(context).colorScheme.background,
               useRootNavigator: true,
               builder: (context) {
                 return MultiBlocProvider(

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

@@ -150,6 +150,7 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
             icon: FlowySvgs.m_delete_m,
             iconColor: Theme.of(context).colorScheme.error,
           ),
+          const Divider(height: 8.5, thickness: 0.5),
         ],
       ),
     );

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart

@@ -40,7 +40,7 @@ Future<FieldType?> showFieldTypeGridBottomSheet(
     showCloseButton: true,
     elevation: 20,
     title: title,
-    backgroundColor: Theme.of(context).colorScheme.surface,
+    backgroundColor: Theme.of(context).colorScheme.background,
     enableDraggableScrollable: true,
     builder: (context) {
       final typeOptionMenuItemValue = mobileSupportedFieldTypes

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_sort_bottom_sheet.dart

@@ -405,6 +405,8 @@ class _SortDetailContent extends StatelessWidget {
 
   final SortInfo? sortInfo;
 
+  bool get isCreatingNewSort => sortInfo == null;
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -415,7 +417,7 @@ class _SortDetailContent extends StatelessWidget {
           padding: const EdgeInsets.symmetric(horizontal: 16),
           child: DefaultTabController(
             length: 2,
-            initialIndex: sortInfo == null
+            initialIndex: isCreatingNewSort
                 ? 0
                 : sortInfo!.sortPB.condition == SortConditionPB.Ascending
                     ? 0
@@ -487,30 +489,40 @@ class _SortDetailContent extends StatelessWidget {
           child: BlocBuilder<SortEditorBloc, SortEditorState>(
             builder: (context, state) {
               final fields = state.allFields
-                  .where(
+                  .where((field) => field.canCreateSort || field.hasSort)
-                    (field) =>
-                        field.canCreateSort ||
-                        sortInfo != null && sortInfo!.fieldId == field.id,
-                  )
                   .toList();
               return ListView.builder(
                 itemCount: fields.length,
                 itemBuilder: (context, index) {
                   final fieldInfo = fields[index];
-                  final isSelected = sortInfo == null
+                  final isSelected = isCreatingNewSort
                       ? context
                               .watch<MobileSortEditorCubit>()
                               .state
                               .newSortFieldId ==
                           fieldInfo.id
                       : sortInfo!.fieldId == fieldInfo.id;
+
+                  final enabled = fieldInfo.canCreateSort ||
+                      isCreatingNewSort && !fieldInfo.hasSort ||
+                      !isCreatingNewSort && sortInfo!.fieldId == fieldInfo.id;
+
                   return FlowyOptionTile.checkbox(
                     text: fieldInfo.field.name,
                     isSelected: isSelected,
+                    textColor: enabled ? null : Theme.of(context).disabledColor,
                     showTopBorder: false,
                     onTap: () {
-                      if (!isSelected) {
+                      if (isSelected) {
+                        return;
+                      }
+                      if (enabled) {
                         _changeFieldId(context, fieldInfo.id);
+                      } else {
+                        Fluttertoast.showToast(
+                          msg: LocaleKeys.grid_sort_fieldInUse.tr(),
+                          gravity: ToastGravity.BOTTOM,
+                        );
                       }
                     },
                   );
@@ -524,7 +536,7 @@ class _SortDetailContent extends StatelessWidget {
   }
 
   void _changeCondition(BuildContext context, SortConditionPB newCondition) {
-    if (sortInfo == null) {
+    if (isCreatingNewSort) {
       context.read<MobileSortEditorCubit>().changeSortCondition(newCondition);
     } else {
       context.read<SortEditorBloc>().add(
@@ -537,7 +549,7 @@ class _SortDetailContent extends StatelessWidget {
   }
 
   void _changeFieldId(BuildContext context, String newFieldId) {
-    if (sortInfo == null) {
+    if (isCreatingNewSort) {
       context.read<MobileSortEditorCubit>().changeFieldId(newFieldId);
     } else {
       context.read<SortEditorBloc>().add(

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart

@@ -183,6 +183,7 @@ class MobileDatabaseViewListButton extends StatelessWidget {
         showMobileBottomSheet(
           context,
           showDragHandle: true,
+          backgroundColor: Theme.of(context).colorScheme.background,
           builder: (_) {
             return BlocProvider<ViewBloc>(
               create: (_) =>

frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_option_tile.dart

@@ -13,6 +13,7 @@ enum FlowyOptionTileType {
 
 class FlowyOptionTile extends StatelessWidget {
   const FlowyOptionTile._({
+    super.key,
     required this.type,
     this.showTopBorder = true,
     this.showBottomBorder = true,
@@ -88,9 +89,11 @@ class FlowyOptionTile extends StatelessWidget {
   }
 
   factory FlowyOptionTile.checkbox({
+    Key? key,
     required String text,
     required bool isSelected,
     required VoidCallback? onTap,
+    Color? textColor,
     Widget? leftIcon,
     Widget? content,
     bool showTopBorder = true,
@@ -99,9 +102,11 @@ class FlowyOptionTile extends StatelessWidget {
     Color? backgroundColor,
   }) {
     return FlowyOptionTile._(
+      key: key,
       type: FlowyOptionTileType.checkbox,
       isSelected: isSelected,
       text: text,
+      textColor: textColor,
       content: content,
       onTap: onTap,
       fontFamily: fontFamily,

frontend/appflowy_flutter/lib/plugins/database/application/field/field_controller.dart

@@ -337,6 +337,7 @@ class FieldController {
         ...changeset.insertSorts.map((sort) => sort.sort.fieldId),
         ...changeset.updateSorts.map((sort) => sort.fieldId),
         ...changeset.deleteSorts.map((sort) => sort.fieldId),
+        ...?_sortNotifier?.sorts.map((sort) => sort.fieldId),
       ]);
 
       final newFieldInfos = [...fieldInfos];
@@ -367,8 +368,8 @@ class FieldController {
             insertSortFromChangeset(newSortInfos, changeset);
             updateSortFromChangeset(newSortInfos, changeset);
 
-            _sortNotifier?.sorts = newSortInfos;
             updateFieldInfos(newSortInfos, changeset);
+            _sortNotifier?.sorts = newSortInfos;
           },
           (err) => Log.error(err),
         );

frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart

@@ -150,6 +150,7 @@ void _showEditSortPanelFromToolbar(
     showDragHandle: true,
     showDivider: false,
     useSafeArea: false,
+    backgroundColor: Theme.of(context).colorScheme.background,
     builder: (_) {
       return BlocProvider.value(
         value: context.read<SortEditorBloc>(),

frontend/resources/translations/en.json

@@ -679,7 +679,8 @@
       "cannotFindCreatableField": "Cannot find a suitable field to sort by",
       "deleteAllSorts": "Delete all sorts",
       "addSort": "Add new sort",
-      "removeSorting": "Would you like to remove sorting?"
+      "removeSorting": "Would you like to remove sorting?",
+      "fieldInUse": "You are already sorting by this field"
     },
     "row": {
       "duplicate": "Duplicate",