feat: mobile no date optimization (#4038)

* feat: mobile no date optimization

* fix: code review

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_page.dart

@@ -1,5 +1,8 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/database/card/card.dart';
+import 'package:appflowy/mobile/presentation/presentation.dart';
+import 'package:appflowy/mobile/presentation/widgets/flowy_paginated_bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart';
 import 'package:appflowy/plugins/database_view/application/database_controller.dart';
 import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
@@ -367,10 +370,10 @@ void showEventDetails({
 }
 
 class UnscheduledEventsButton extends StatefulWidget {
-  final DatabaseController databaseController;
-
   const UnscheduledEventsButton({super.key, required this.databaseController});
 
+  final DatabaseController databaseController;
+
   @override
   State<UnscheduledEventsButton> createState() =>
       _UnscheduledEventsButtonState();
@@ -402,20 +405,20 @@ class _UnscheduledEventsButtonState extends State<UnscheduledEventsButton> {
             child: OutlinedButton(
               style: OutlinedButton.styleFrom(
                 shape: RoundedRectangleBorder(
-                  side: BorderSide(
+                  side: BorderSide(color: Theme.of(context).dividerColor),
-                    color: Theme.of(context).dividerColor,
-                    width: 1,
-                  ),
                   borderRadius: Corners.s6Border,
                 ),
-                side:
+                side: BorderSide(color: Theme.of(context).dividerColor),
-                    BorderSide(color: Theme.of(context).dividerColor, width: 1),
                 padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                 visualDensity: VisualDensity.compact,
               ),
               onPressed: () {
                 if (state.unscheduleEvents.isNotEmpty) {
-                  _popoverController.show();
+                  if (PlatformExtension.isMobile) {
+                    _showUnscheduledEventsMobile(state.unscheduleEvents);
+                  } else {
+                    _popoverController.show();
+                  }
                 }
               },
               child: FlowyTooltip(
@@ -438,64 +441,119 @@ class _UnscheduledEventsButtonState extends State<UnscheduledEventsButton> {
       ),
     );
   }
+
+  void _showUnscheduledEventsMobile(List<CalendarEventPB> events) =>
+      showPaginatedBottomSheet(
+        context,
+        page: SheetPage(
+          title: LocaleKeys.calendar_settings_unscheduledEventsTitle.tr(),
+          body: UnscheduleEventsList(
+            databaseController: widget.databaseController,
+            unscheduleEvents: events,
+          ),
+        ),
+      );
 }
 
 class UnscheduleEventsList extends StatelessWidget {
-  final DatabaseController databaseController;
-  final List<CalendarEventPB> unscheduleEvents;
   const UnscheduleEventsList({
     super.key,
     required this.unscheduleEvents,
     required this.databaseController,
   });
 
+  final List<CalendarEventPB> unscheduleEvents;
+  final DatabaseController databaseController;
+
   @override
   Widget build(BuildContext context) {
-    final cells = <Widget>[
+    final cells = [
-      Padding(
+      if (!PlatformExtension.isMobile)
-        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+        Padding(
-        child: FlowyText.medium(
+          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
-          LocaleKeys.calendar_settings_clickToAdd.tr(),
+          child: FlowyText.medium(
-          fontSize: 10,
+            LocaleKeys.calendar_settings_clickToAdd.tr(),
-          color: Theme.of(context).hintColor,
+            fontSize: 10,
-          overflow: TextOverflow.ellipsis,
+            color: Theme.of(context).hintColor,
+            overflow: TextOverflow.ellipsis,
+          ),
         ),
-      ),
       ...unscheduleEvents.map(
-        (e) => UnscheduledEventCell(
+        (event) => UnscheduledEventCell(
-          event: e,
+          event: event,
           onPressed: () {
-            showEventDetails(
+            if (PlatformExtension.isMobile) {
-              context: context,
+              context.push(
-              event: e,
+                MobileCardDetailScreen.routeName,
-              viewId: databaseController.viewId,
+                extra: {
-              rowCache: databaseController.rowCache,
+                  MobileCardDetailScreen.argRowController: RowController(
-              fieldController: databaseController.fieldController,
+                    rowMeta: event.rowMeta,
-            );
+                    viewId: databaseController.viewId,
-            PopoverContainer.of(context).close();
+                    rowCache: databaseController.rowCache,
+                  ),
+                  MobileCardDetailScreen.argFieldController:
+                      databaseController.fieldController,
+                },
+              );
+              context.pop();
+            } else {
+              showEventDetails(
+                context: context,
+                event: event,
+                viewId: databaseController.viewId,
+                rowCache: databaseController.rowCache,
+                fieldController: databaseController.fieldController,
+              );
+              PopoverContainer.of(context).close();
+            }
           },
         ),
       ),
     ];
 
-    return ListView.separated(
+    final child = ListView.separated(
       itemBuilder: (context, index) => cells[index],
       itemCount: cells.length,
       separatorBuilder: (context, index) =>
           VSpace(GridSize.typeOptionSeparatorHeight),
       shrinkWrap: true,
     );
+
+    if (PlatformExtension.isMobile) {
+      return Flexible(child: child);
+    }
+
+    return child;
   }
 }
 
 class UnscheduledEventCell extends StatelessWidget {
-  final CalendarEventPB event;
-  final VoidCallback onPressed;
   const UnscheduledEventCell({
+    super.key,
     required this.event,
     required this.onPressed,
-    Key? key,
+  });
-  }) : super(key: key);
+
+  final CalendarEventPB event;
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return PlatformExtension.isMobile
+        ? MobileUnscheduledEventTile(event: event, onPressed: onPressed)
+        : DesktopUnscheduledEventTile(event: event, onPressed: onPressed);
+  }
+}
+
+class DesktopUnscheduledEventTile extends StatelessWidget {
+  const DesktopUnscheduledEventTile({
+    super.key,
+    required this.event,
+    required this.onPressed,
+  });
+
+  final CalendarEventPB event;
+  final VoidCallback onPressed;
 
   @override
   Widget build(BuildContext context) {
@@ -514,3 +572,24 @@ class UnscheduledEventCell extends StatelessWidget {
     );
   }
 }
+
+class MobileUnscheduledEventTile extends StatelessWidget {
+  const MobileUnscheduledEventTile({
+    super.key,
+    required this.event,
+    required this.onPressed,
+  });
+
+  final CalendarEventPB event;
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return MobileSettingItem(
+      name: event.title.isEmpty
+          ? LocaleKeys.calendar_defaultNewCalendarTitle.tr()
+          : event.title,
+      onTap: onPressed,
+    );
+  }
+}

frontend/resources/translations/en.json

@@ -857,6 +857,7 @@
         "one": "{} unscheduled event",
         "other": "{} unscheduled events"
       },
+      "unscheduledEventsTitle": "Unscheduled events",
       "clickToAdd": "Click to add to the calendar",
       "name": "Calendar settings"
     },
@@ -1122,4 +1123,4 @@
     "font": "Font",
     "actions": "Actions"
   }
-}
+}