feat: request permission again if the user denied the photo permission (#5251)

* fix: clear the email field after sending email

* fix: ask permission before picking image

* feat: improve photo permission UI design

* chore: update translations

* fix: android photo permission

* chore: update translations

* fix: awareness meta data decode error

frontend/appflowy_flutter/lib/plugins/document/application/document_collab_adapter.dart

@@ -182,14 +182,21 @@ class DocumentCollabAdapter {
         );
     for (final state in values) {
       // the following code is only for version 1
-      if (state.version != 1) {
+      if (state.version != 1 || state.metadata.isEmpty) {
         return;
       }
       final uid = state.user.uid.toString();
       final did = state.user.deviceId;
-      final metadata = DocumentAwarenessMetadata.fromJson(
-        jsonDecode(state.metadata),
-      );
+      debugPrint('metadata: ${state.metadata}');
+      DocumentAwarenessMetadata metadata;
+      try {
+        metadata = DocumentAwarenessMetadata.fromJson(
+          jsonDecode(state.metadata),
+        );
+      } catch (e) {
+        Log.error('Failed to parse metadata: $e, ${state.metadata}');
+        continue;
+      }
       final selectionColor = metadata.selectionColor.tryToColor();
       final cursorColor = metadata.cursorColor.tryToColor();
       if ((uid == userId && did == deviceId) ||

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/page_style/_page_style_cover_image.dart

@@ -1,21 +1,28 @@
+import 'dart:async';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/mobile/presentation/widgets/show_flowy_mobile_confirm_dialog.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_util.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_cover_bottom_sheet.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_style_util.dart';
 import 'package:appflowy/shared/feedback_gesture_detector.dart';
+import 'package:appflowy/startup/tasks/device_info_task.dart';
 import 'package:appflowy/user/application/user_service.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_result/appflowy_result.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/snap_bar.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:image_picker/image_picker.dart';
+import 'package:permission_handler/permission_handler.dart';
 
 class PageStyleCoverImage extends StatelessWidget {
   PageStyleCoverImage({
@@ -114,9 +121,22 @@ class PageStyleCoverImage extends StatelessWidget {
   }
 
   Future<void> _pickImage(BuildContext context) async {
-    final result = await _imagePicker.pickImage(
-      source: ImageSource.gallery,
-    );
+    final photoPermission = await _checkPhotoPermission(context);
+    if (!photoPermission) {
+      Log.error('Has no permission to access the photo library');
+      return;
+    }
+
+    XFile? result;
+    try {
+      result = await _imagePicker.pickImage(
+        source: ImageSource.gallery,
+      );
+    } catch (e) {
+      Log.error('Error while picking image: $e');
+      return;
+    }
+
     final path = result?.path;
     if (path != null && context.mounted) {
       final String? result;
@@ -204,6 +224,54 @@ class PageStyleCoverImage extends StatelessWidget {
       },
     );
   }
+
+  Future<bool> _checkPhotoPermission(BuildContext context) async {
+    // check the permission first
+    final status = await Permission.photos.status;
+    // if the permission is permanently denied, we should open the app settings
+    if (status.isPermanentlyDenied && context.mounted) {
+      unawaited(
+        showFlowyMobileConfirmDialog(
+          context,
+          title: FlowyText.semibold(
+            LocaleKeys.pageStyle_photoPermissionTitle.tr(),
+            maxLines: 3,
+            textAlign: TextAlign.center,
+          ),
+          content: FlowyText(
+            LocaleKeys.pageStyle_photoPermissionDescription.tr(),
+            maxLines: 5,
+            textAlign: TextAlign.center,
+            fontSize: 12.0,
+          ),
+          actionAlignment: ConfirmDialogActionAlignment.vertical,
+          actionButtonTitle: LocaleKeys.pageStyle_openSettings.tr(),
+          actionButtonColor: Colors.blue,
+          cancelButtonTitle: LocaleKeys.pageStyle_doNotAllow.tr(),
+          cancelButtonColor: Colors.blue,
+          onActionButtonPressed: () {
+            openAppSettings();
+          },
+        ),
+      );
+
+      return false;
+    } else if (status.isDenied) {
+      // https://github.com/Baseflow/flutter-permission-handler/issues/1262#issuecomment-2006340937
+      Permission permission = Permission.photos;
+      if (defaultTargetPlatform == TargetPlatform.android &&
+          ApplicationInfo.androidSDKVersion <= 32) {
+        permission = Permission.storage;
+      }
+      // if the permission is denied, we should request the permission
+      final newStatus = await permission.request();
+      if (newStatus.isDenied) {
+        return false;
+      }
+    }
+
+    return true;
+  }
 }
 
 class _UnsplashCover extends StatelessWidget {