feat: support system default font family on desktop (#5279)

* fix: add permission check before selecting image in image block

* feat: use system default font on desktop

* fix: set appbar icon size to 30

* feat: add default font family on desktop

Author: LucasXu0

frontend/appflowy_flutter/integration_test/desktop/uncategorized/appearance_settings_test.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy/util/font_family_extension.dart';
 import 'package:appflowy/workspace/application/appearance_defaults.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_appearance/settings_appearance.dart';
@@ -82,8 +83,10 @@ void main() {
       await tester.openSettingsPage(SettingsPage.appearance);
 
       expect(
-        find.textContaining(DefaultAppearanceSettings.kDefaultFontFamily),
-        findsOneWidget,
+        find.textContaining(
+          DefaultAppearanceSettings.kDefaultFontFamily.fontFamilyDisplayName,
+        ),
+        findsNWidgets(2),
       );
     });
   });

frontend/appflowy_flutter/lib/mobile/application/page_style/document_page_style_bloc.dart

@@ -2,7 +2,6 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:math';
 
-import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy/workspace/application/view/view_service.dart';
 import 'package:appflowy_backend/log.dart';
@@ -179,8 +178,8 @@ class DocumentPageStyleBloc
     );
   }
 
-  String _getSelectedFontFamily(Map layoutObject) {
-    return layoutObject[ViewExtKeys.fontKey] ?? builtInFontFamily();
+  String? _getSelectedFontFamily(Map layoutObject) {
+    return layoutObject[ViewExtKeys.fontKey];
   }
 
   (PageStyleCoverImageType, String colorValue) _getSelectedCover(

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

@@ -216,7 +216,11 @@ class _MobileViewPageState extends State<MobileViewPage> {
                 child: AppBarButton(
                   padding: EdgeInsets.zero,
                   onTap: (context) => context.pop(),
-                  child: _buildImmersiveAppBarIcon(FlowySvgs.m_app_bar_back_s),
+                  child: _buildImmersiveAppBarIcon(
+                    FlowySvgs.m_app_bar_back_s,
+                    30.0,
+                    iconPadding: 6.0,
+                  ),
                 ),
               ),
               actions: actions,
@@ -274,13 +278,13 @@ class _MobileViewPageState extends State<MobileViewPage> {
           ),
         );
       },
-      child: _buildImmersiveAppBarIcon(FlowySvgs.m_layout_s),
+      child: _buildImmersiveAppBarIcon(FlowySvgs.m_layout_s, 30.0),
     );
   }
 
   Widget _buildAppBarMoreButton(ViewPB view) {
     return AppBarButton(
-      padding: const EdgeInsets.only(left: 8, right: 16, top: 2, bottom: 2),
+      padding: const EdgeInsets.only(left: 8, right: 16),
       onTap: (context) {
         EditorNotification.exitEditing().post();
 
@@ -292,49 +296,62 @@ class _MobileViewPageState extends State<MobileViewPage> {
           builder: (_) => _buildAppBarMoreBottomSheet(context),
         );
       },
-      child: _buildImmersiveAppBarIcon(FlowySvgs.m_app_bar_more_s),
+      child: _buildImmersiveAppBarIcon(FlowySvgs.m_app_bar_more_s, 30.0),
     );
   }
 
-  Widget _buildImmersiveAppBarIcon(FlowySvgData icon) {
-    return ValueListenableBuilder(
-      valueListenable: _isImmersiveMode,
-      builder: (context, isImmersiveMode, child) {
-        return ValueListenableBuilder(
-          valueListenable: _appBarOpacity,
-          builder: (context, appBarOpacity, child) {
-            Color? color;
+  Widget _buildImmersiveAppBarIcon(
+    FlowySvgData icon,
+    double dimension, {
+    double iconPadding = 5.0,
+  }) {
+    assert(
+      dimension > 0.0 && dimension <= kToolbarHeight,
+      'dimension must be greater than 0, and less than or equal to kToolbarHeight',
+    );
+    return UnconstrainedBox(
+      child: SizedBox.square(
+        dimension: dimension,
+        child: ValueListenableBuilder(
+          valueListenable: _isImmersiveMode,
+          builder: (context, isImmersiveMode, child) {
+            return ValueListenableBuilder(
+              valueListenable: _appBarOpacity,
+              builder: (context, appBarOpacity, child) {
+                Color? color;
 
-            // if there's no cover or the cover is not immersive,
-            //  make sure the app bar is always visible
-            if (!isImmersiveMode) {
-              color = null;
-            } else if (appBarOpacity < 0.99) {
-              color = Colors.white;
-            }
+                // if there's no cover or the cover is not immersive,
+                //  make sure the app bar is always visible
+                if (!isImmersiveMode) {
+                  color = null;
+                } else if (appBarOpacity < 0.99) {
+                  color = Colors.white;
+                }
 
-            Widget child = Container(
-              margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
-              child: FlowySvg(
-                icon,
-                color: color,
-              ),
-            );
+                Widget child = Container(
+                  margin: EdgeInsets.all(iconPadding),
+                  child: FlowySvg(
+                    icon,
+                    color: color,
+                  ),
+                );
 
-            if (isImmersiveMode && appBarOpacity <= 0.99) {
-              child = DecoratedBox(
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(22),
-                  color: Colors.black.withOpacity(0.2),
-                ),
-                child: child,
-              );
-            }
+                if (isImmersiveMode && appBarOpacity <= 0.99) {
+                  child = DecoratedBox(
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(dimension / 2.0),
+                      color: Colors.black.withOpacity(0.2),
+                    ),
+                    child: child,
+                  );
+                }
 
-            return child;
+                return child;
+              },
+            );
           },
-        );
-      },
+        ),
+      ),
     );
   }
 

frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart

@@ -3,7 +3,7 @@ import 'package:appflowy/mobile/presentation/base/app_bar/app_bar.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/shared/google_fonts_extension.dart';
-import 'package:appflowy/util/google_font_family_extension.dart';
+import 'package:appflowy/util/font_family_extension.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -13,7 +13,7 @@ import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
 
 final List<String> _availableFonts = [
-  builtInFontFamily(),
+  defaultFontFamily,
   ...GoogleFonts.asMap().keys,
 ];
 
@@ -106,16 +106,12 @@ class _FontSelectorState extends State<FontSelector> {
         }
 
         final fontFamilyName = availableFonts[index - 1];
-        final usingDefaultFontFamily = fontFamilyName == builtInFontFamily();
+        final usingDefaultFontFamily = fontFamilyName == defaultFontFamily;
         final fontFamily = !usingDefaultFontFamily
             ? getGoogleFontSafely(fontFamilyName).fontFamily
-            : TextStyle(fontFamily: builtInFontFamily()).fontFamily;
+            : defaultFontFamily;
         return FlowyOptionTile.checkbox(
-          // display the default font name if the font family name is empty
-          //  or using the default font family
-          text: fontFamilyName.isNotEmpty && !usingDefaultFontFamily
-              ? fontFamilyName.parseFontFamilyName()
-              : LocaleKeys.settings_appearance_fontFamily_defaultFont.tr(),
+          text: fontFamilyName.fontFamilyDisplayName,
           isSelected: widget.selectedFontFamilyName == fontFamilyName,
           showTopBorder: false,
           onTap: () => widget.onFontFamilySelected(fontFamilyName),

frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_setting.dart

@@ -3,8 +3,8 @@ import 'dart:async';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/setting/font/font_picker_screen.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
+import 'package:appflowy/util/font_family_extension.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
-import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
@@ -22,9 +22,7 @@ class FontSetting extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final selectedFont = context.watch<AppearanceSettingsCubit>().state.font;
-    final name = selectedFont == builtInFontFamily()
-        ? LocaleKeys.settings_appearance_fontFamily_defaultFont.tr()
-        : selectedFont;
+    final name = selectedFont.fontFamilyDisplayName;
     return MobileSettingItem(
       name: LocaleKeys.settings_appearance_fontFamily_label.tr(),
       trailing: Row(

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

@@ -57,9 +57,9 @@ class DocumentAppearance {
 class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
   DocumentAppearanceCubit()
       : super(
-          DocumentAppearance(
+          const DocumentAppearance(
             fontSize: 16.0,
-            fontFamily: builtInFontFamily(),
+            fontFamily: defaultFontFamily,
             codeFontFamily: builtInCodeFontFamily,
           ),
         );
@@ -69,7 +69,7 @@ class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
     final fontSize =
         prefs.getDouble(KVKeys.kDocumentAppearanceFontSize) ?? 16.0;
     final fontFamily = prefs.getString(KVKeys.kDocumentAppearanceFontFamily) ??
-        builtInFontFamily();
+        defaultFontFamily;
     final defaultTextDirection =
         prefs.getString(KVKeys.kDocumentAppearanceDefaultTextDirection);
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart

@@ -127,7 +127,7 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
     BuildContext context,
     DocumentImmersiveCoverState state,
   ) {
-    String? fontFamily = builtInFontFamily();
+    String? fontFamily = defaultFontFamily;
     final documentFontFamily =
         context.read<DocumentPageStyleBloc>().state.fontFamily;
     if (documentFontFamily != null && fontFamily != documentFontFamily) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_file_widget.dart

@@ -1,6 +1,8 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/shared/permission/permission_checker.dart';
 import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -20,22 +22,28 @@ class UploadImageFileWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return FlowyHover(
-      child: FlowyButton(
-        showDefaultBoxDecorationOnMobile: true,
-        text: Container(
-          margin: const EdgeInsets.all(4.0),
-          alignment: Alignment.center,
-          child: FlowyText(
-            LocaleKeys.document_imageBlock_upload_placeholder.tr(),
-          ),
+    final child = FlowyButton(
+      showDefaultBoxDecorationOnMobile: true,
+      text: Container(
+        margin: const EdgeInsets.all(4.0),
+        alignment: Alignment.center,
+        child: FlowyText(
+          LocaleKeys.document_imageBlock_upload_placeholder.tr(),
         ),
-        onTap: _uploadImage,
       ),
+      onTap: () => _uploadImage(context),
     );
+
+    if (PlatformExtension.isDesktopOrWeb) {
+      return FlowyHover(
+        child: child,
+      );
+    }
+
+    return child;
   }
 
-  Future<void> _uploadImage() async {
+  Future<void> _uploadImage(BuildContext context) async {
     if (PlatformExtension.isDesktopOrWeb) {
       // on desktop, the users can pick a image file from folder
       final result = await getIt<FilePickerService>().pickFiles(
@@ -45,6 +53,12 @@ class UploadImageFileWidget extends StatelessWidget {
       );
       onPickFile(result?.files.firstOrNull?.path);
     } else {
+      final photoPermission =
+          await PermissionChecker.checkPhotoPermission(context);
+      if (!photoPermission) {
+        Log.error('Has no permission to access the photo library');
+        return;
+      }
       // on mobile, the users can pick a image file from camera or image library
       final result = await ImagePicker().pickImage(source: ImageSource.gallery);
       onPickFile(result?.path);

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_font_item.dart

@@ -5,7 +5,7 @@ import 'package:appflowy/plugins/document/application/document_appearance_cubit.
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/shared/google_fonts_extension.dart';
-import 'package:appflowy/util/google_font_family_extension.dart';
+import 'package:appflowy/util/font_family_extension.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';