feat: media type option (#6090)

* feat: media type option

* feat: rename files + more media types

* feat: add basic style for cards on desktop

* test: add media

* chore: clippy

* feat: row detail ux improvement

* feat: show all media attachments as one count on card

* chore: localization

* fix: overlay issue + disable filter for option

* test: add base integration test

* test: add pumpAndSettle

* chore: update collab revision

* feat: mobile grid & board styling

* fix: clippy

* fix: grid reorder rows bug

* fix: style discrepancy

* chore: clippy

* chore: code cleanup

frontend/appflowy_flutter/integration_test/desktop/database/database_media_test.dart

@@ -0,0 +1,96 @@
+import 'dart:io';
+
+import 'package:flutter/services.dart';
+
+import 'package:appflowy/core/config/kv.dart';
+import 'package:appflowy/core/config/kv_keys.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/database/widgets/cell_editor/media_cell_editor.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:path/path.dart' as p;
+import 'package:path_provider/path_provider.dart';
+
+import '../../shared/database_test_op.dart';
+import '../../shared/mock/mock_file_picker.dart';
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('media type option in database', () {
+    testWidgets('add media field and add files', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Grid);
+
+      // Invoke the field editor
+      await tester.tapGridFieldWithName('Type');
+      await tester.tapEditFieldButton();
+
+      // Change to media type
+      await tester.tapSwitchFieldTypeButton();
+      await tester.selectFieldType(FieldType.Media);
+      await tester.dismissFieldEditor();
+
+      // Open media cell editor
+      await tester.tapCellInGrid(rowIndex: 0, fieldType: FieldType.Media);
+      await tester.findMediaCellEditor(findsOneWidget);
+
+      // Prepare files for upload from local
+      final firstImage =
+          await rootBundle.load('assets/test/images/sample.jpeg');
+      final secondImage =
+          await rootBundle.load('assets/test/images/sample.gif');
+      final tempDirectory = await getTemporaryDirectory();
+
+      final firstImagePath = p.join(tempDirectory.path, 'sample.jpeg');
+      final firstFile = File(firstImagePath)
+        ..writeAsBytesSync(firstImage.buffer.asUint8List());
+
+      final secondImagePath = p.join(tempDirectory.path, 'sample.gif');
+      final secondFile = File(secondImagePath)
+        ..writeAsBytesSync(secondImage.buffer.asUint8List());
+
+      mockPickFilePaths(paths: [firstImagePath]);
+      await getIt<KeyValueStorage>().set(KVKeys.kCloudType, '0');
+
+      // Click on add file button in the Media Cell Editor
+      await tester.tap(find.text(LocaleKeys.grid_media_addFileOrImage.tr()));
+      await tester.pumpAndSettle();
+
+      // Tap on the upload interaction
+      await tester.tapButtonWithName(
+        LocaleKeys.document_plugins_file_fileUploadHint.tr(),
+      );
+      await tester.pumpAndSettle();
+
+      // Expect one file
+      expect(find.byType(RenderMedia), findsOneWidget);
+
+      // Mock second file
+      mockPickFilePaths(paths: [secondImagePath]);
+
+      // Click on add file button in the Media Cell Editor
+      await tester.tap(find.text(LocaleKeys.grid_media_addFileOrImage.tr()));
+      await tester.pumpAndSettle();
+
+      // Tap on the upload interaction
+      await tester.tapButtonWithName(
+        LocaleKeys.document_plugins_file_fileUploadHint.tr(),
+      );
+      await tester.pumpAndSettle();
+
+      // Expect two files
+      expect(find.byType(RenderMedia), findsNWidgets(2));
+
+      // Remove the temp files
+      await Future.wait([firstFile.delete(), secondFile.delete()]);
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/shared/database_test_op.dart

@@ -41,6 +41,7 @@ import 'package:appflowy/plugins/database/tab_bar/desktop/tab_bar_header.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/checkbox.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/checklist.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/date.dart';
+import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/media.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/number.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/select_option.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/text.dart';
@@ -50,6 +51,7 @@ import 'package:appflowy/plugins/database/widgets/cell_editor/checklist_cell_edi
 import 'package:appflowy/plugins/database/widgets/cell_editor/checklist_progress_bar.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/date_editor.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart';
+import 'package:appflowy/plugins/database/widgets/cell_editor/media_cell_editor.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/select_option_cell_editor.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/select_option_text_field.dart';
 import 'package:appflowy/plugins/database/widgets/database_layout_ext.dart';
@@ -857,6 +859,11 @@ extension AppFlowyDatabaseTest on WidgetTester {
     expect(finder, matcher);
   }
 
+  Future<void> findMediaCellEditor(dynamic matcher) async {
+    final finder = find.byType(MediaCellEditor);
+    expect(finder, matcher);
+  }
+
   Future<void> findSelectOptionEditor(dynamic matcher) async {
     final finder = find.byType(SelectOptionCellEditor);
     expect(finder, matcher);
@@ -1580,6 +1587,8 @@ Finder finderForFieldType(FieldType fieldType) {
       return find.byType(EditableTextCell, skipOffstage: false);
     case FieldType.URL:
       return find.byType(EditableURLCell, skipOffstage: false);
+    case FieldType.Media:
+      return find.byType(EditableMediaCell, skipOffstage: false);
     default:
       throw Exception('Unknown field type: $fieldType');
   }

frontend/appflowy_flutter/ios/Runner/Info.plist

@@ -67,5 +67,7 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UISupportsDocumentBrowser</key>
+	<true/>
 </dict>
 </plist>

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

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar/app_bar.dart';
@@ -23,7 +25,6 @@ import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:go_router/go_router.dart';

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_row_property_list.dart

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
@@ -6,7 +8,6 @@ import 'package:appflowy/plugins/database/grid/application/row/row_detail_bloc.d
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class MobileRowPropertyList extends StatelessWidget {

frontend/appflowy_flutter/lib/mobile/presentation/database/card/mobile_card_content.dart

@@ -1,9 +1,16 @@
+import 'package:flutter/material.dart';
+
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/widgets/card/card.dart';
 import 'package:appflowy/plugins/database/widgets/card/card_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/card_cell_style_maps/mobile_board_card_cell_style.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
-import 'package:flutter/material.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 
 class MobileCardContent extends StatelessWidget {
   const MobileCardContent({
@@ -21,19 +28,47 @@ class MobileCardContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final attachmentCount = rowMeta.attachmentCount.toInt();
+
     return Padding(
       padding: styleConfiguration.cardPadding,
       child: Column(
         mainAxisSize: MainAxisSize.min,
-        children: cells.map(
-          (cellMeta) {
-            return cellBuilder.build(
-              cellContext: cellMeta.cellContext(),
-              styleMap: mobileBoardCardCellStyleMap(context),
-              hasNotes: !rowMeta.isDocumentEmpty,
-            );
-          },
-        ).toList(),
+        children: [
+          ...cells.map(
+            (cellMeta) {
+              return cellBuilder.build(
+                cellContext: cellMeta.cellContext(),
+                styleMap: mobileBoardCardCellStyleMap(context),
+                hasNotes: !rowMeta.isDocumentEmpty,
+              );
+            },
+          ),
+          if (attachmentCount > 0) ...[
+            const VSpace(4),
+            Padding(
+              padding: const EdgeInsets.only(left: 8),
+              child: Row(
+                children: [
+                  const FlowySvg(
+                    FlowySvgs.media_s,
+                    size: Size.square(12),
+                  ),
+                  const HSpace(6),
+                  Flexible(
+                    child: FlowyText.regular(
+                      LocaleKeys.grid_media_attachmentsHint
+                          .tr(args: ['$attachmentCount']),
+                      fontSize: 12,
+                      color: AFThemeExtension.of(context).secondaryTextColor,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ],
       ),
     );
   }

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

@@ -1,12 +1,13 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/field/mobile_full_field_editor.dart';
-import 'package:appflowy/plugins/database/domain/field_backend_service.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
+import 'package:appflowy/plugins/database/domain/field_backend_service.dart';
 import 'package:appflowy/plugins/database/domain/field_service.dart';
 import 'package:appflowy/plugins/database/widgets/setting/field_visibility_extension.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 class MobileEditPropertyScreen extends StatefulWidget {
@@ -49,7 +50,7 @@ class _MobileEditPropertyScreenState extends State<MobileEditPropertyScreen> {
 
     return PopScope(
       onPopInvoked: (didPop) {
-        if (didPop) {
+        if (!didPop) {
           context.pop(_fieldOptionValues);
         }
       },

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

@@ -29,6 +29,7 @@ const mobileSupportedFieldTypes = [
   FieldType.CreatedTime,
   FieldType.Checkbox,
   FieldType.Checklist,
+  FieldType.Media,
   // FieldType.Time,
 ];
 

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

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart';
@@ -11,7 +13,6 @@ import 'package:appflowy/plugins/database/widgets/setting/field_visibility_exten
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
@@ -100,7 +101,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
                   context.pop();
                 },
               ),
-              if (!widget.fieldInfo.isPrimary)
+              if (!widget.fieldInfo.isPrimary) ...[
                 FlowyOptionTile.text(
                   showTopBorder: false,
                   text: fieldVisibility.isVisibleState()
@@ -116,7 +117,6 @@ class _QuickEditFieldState extends State<QuickEditField> {
                     }
                   },
                 ),
-              if (!widget.fieldInfo.isPrimary)
                 FlowyOptionTile.text(
                   showTopBorder: false,
                   text: LocaleKeys.grid_field_insertLeft.tr(),
@@ -133,6 +133,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
                     );
                   },
                 ),
+              ],
               FlowyOptionTile.text(
                 showTopBorder: false,
                 text: LocaleKeys.grid_field_insertRight.tr(),