feat: implement section breadcrumb and new share menu design (#8012)

* feat: support secion breadcrumb

* chore: update layout

* feat: observe space permission change

* feat: new share menu design

* fix: widget test

Author: LucasXu0

frontend/appflowy_flutter/lib/features/page_access_level/data/repositories/page_access_level_repository.dart

@@ -1,4 +1,4 @@
-import 'package:appflowy/features/share_tab/data/models/share_access_level.dart';
+import 'package:appflowy/features/share_tab/data/models/models.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_result/appflowy_result.dart';
@@ -21,4 +21,9 @@ abstract class PageAccessLevelRepository {
   Future<FlowyResult<ShareAccessLevel, FlowyError>> getAccessLevel(
     String pageId,
   );
+
+  /// Gets the section type of the shared section.
+  Future<FlowyResult<SharedSectionType, FlowyError>> getSectionType(
+    String pageId,
+  );
 }

frontend/appflowy_flutter/lib/features/page_access_level/data/repositories/rust_page_access_level_repository_impl.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/features/page_access_level/data/repositories/page_access_level_repository.dart';
-import 'package:appflowy/features/share_tab/data/models/share_access_level.dart';
+import 'package:appflowy/features/share_tab/data/models/models.dart';
 import 'package:appflowy/features/util/extensions.dart';
 import 'package:appflowy/user/application/user_service.dart';
 import 'package:appflowy/workspace/application/view/view_service.dart';
@@ -102,16 +102,40 @@ class RustPageAccessLevelRepositoryImpl implements PageAccessLevelRepository {
                 .shareAccessLevel ??
             ShareAccessLevel.readAndWrite;
 
-        Log.debug('current user access level: $accessLevel');
+        Log.debug('current user access level: $accessLevel, in page: $pageId');
 
         return FlowyResult.success(accessLevel);
       },
       (failure) {
-        Log.error('failed to get user access level: $failure');
+        Log.error(
+          'failed to get user access level: $failure, in page: $pageId',
+        );
 
         // return the read and write access level if the user is not found
         return FlowyResult.success(ShareAccessLevel.readAndWrite);
       },
     );
   }
+
+  @override
+  Future<FlowyResult<SharedSectionType, FlowyError>> getSectionType(
+    String pageId,
+  ) async {
+    final request = ViewIdPB(value: pageId);
+    final result = await FolderEventGetSharedViewSection(request).send();
+    return result.fold(
+      (success) {
+        final sectionType = success.section.sharedSectionType;
+        Log.debug('shared section type: $sectionType, in page: $pageId');
+        return FlowyResult.success(sectionType);
+      },
+      (failure) {
+        Log.error(
+          'failed to get shared section type: $failure, in page: $pageId',
+        );
+
+        return FlowyResult.failure(failure);
+      },
+    );
+  }
 }

frontend/appflowy_flutter/lib/features/page_access_level/logic/page_access_level_bloc.dart

@@ -4,7 +4,7 @@ import 'package:appflowy/features/page_access_level/data/repositories/page_acces
 import 'package:appflowy/features/page_access_level/data/repositories/rust_page_access_level_repository_impl.dart';
 import 'package:appflowy/features/page_access_level/logic/page_access_level_event.dart';
 import 'package:appflowy/features/page_access_level/logic/page_access_level_state.dart';
-import 'package:appflowy/features/share_tab/data/models/share_access_level.dart';
+import 'package:appflowy/features/share_tab/data/models/models.dart';
 import 'package:appflowy/shared/feature_flags.dart';
 import 'package:appflowy/workspace/application/view/view_listener.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
@@ -18,6 +18,7 @@ class PageAccessLevelBloc
     extends Bloc<PageAccessLevelEvent, PageAccessLevelState> {
   PageAccessLevelBloc({
     required this.view,
+    this.ignorePageAccessLevel = false,
     PageAccessLevelRepository? repository,
   })  : repository = repository ?? RustPageAccessLevelRepositoryImpl(),
         listener = ViewListener(viewId: view.id),
@@ -26,6 +27,7 @@ class PageAccessLevelBloc
     on<PageAccessLevelLockEvent>(_onLock);
     on<PageAccessLevelUnlockEvent>(_onUnlock);
     on<PageAccessLevelUpdateLockStatusEvent>(_onUpdateLockStatus);
+    on<PageAccessLevelUpdateSectionTypeEvent>(_onUpdateSectionType);
   }
 
   final ViewPB view;
@@ -37,6 +39,10 @@ class PageAccessLevelBloc
   // Used to listen for view updates.
   late final ViewListener listener;
 
+  // should ignore the page access level
+  // in the row details page, we don't need to check the page access level
+  final bool ignorePageAccessLevel;
+
   @override
   Future<void> close() async {
     await listener.stop();
@@ -47,19 +53,28 @@ class PageAccessLevelBloc
     PageAccessLevelInitialEvent event,
     Emitter<PageAccessLevelState> emit,
   ) async {
+    // lock status
     listener.start(
       onViewUpdated: (view) async {
         add(PageAccessLevelEvent.updateLockStatus(view.isLocked));
       },
     );
 
-    if (!FeatureFlag.sharedSection.isOn) {
+    // section type
+    final sectionTypeResult = await repository.getSectionType(view.id);
+    final sectionType = sectionTypeResult.fold(
+      (sectionType) => sectionType,
+      (_) => SharedSectionType.public,
+    );
+
+    if (!FeatureFlag.sharedSection.isOn || ignorePageAccessLevel) {
       emit(
         state.copyWith(
           view: view,
           isLocked: view.isLocked,
           isLoadingLockStatus: false,
           accessLevel: ShareAccessLevel.fullAccess,
+          sectionType: sectionType,
         ),
       );
       return;
@@ -80,6 +95,7 @@ class PageAccessLevelBloc
           (accessLevel) => accessLevel,
           (_) => ShareAccessLevel.readOnly,
         ),
+        sectionType: sectionType,
       ),
     );
   }
@@ -133,4 +149,15 @@ class PageAccessLevelBloc
       ),
     );
   }
+
+  void _onUpdateSectionType(
+    PageAccessLevelUpdateSectionTypeEvent event,
+    Emitter<PageAccessLevelState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        sectionType: event.sectionType,
+      ),
+    );
+  }
 }

frontend/appflowy_flutter/lib/features/page_access_level/logic/page_access_level_event.dart

@@ -1,3 +1,5 @@
+import 'package:appflowy/features/share_tab/data/models/models.dart';
+
 /// Base class for all PageAccessLevel events
 sealed class PageAccessLevelEvent {
   const PageAccessLevelEvent();
@@ -17,6 +19,11 @@ sealed class PageAccessLevelEvent {
     bool isLocked, {
     int? lockCounter,
   }) = PageAccessLevelUpdateLockStatusEvent;
+
+  /// Update the section type in the state.
+  const factory PageAccessLevelEvent.updateSectionType(
+    SharedSectionType sectionType,
+  ) = PageAccessLevelUpdateSectionTypeEvent;
 }
 
 class PageAccessLevelInitialEvent extends PageAccessLevelEvent {
@@ -40,3 +47,9 @@ class PageAccessLevelUpdateLockStatusEvent extends PageAccessLevelEvent {
   final bool isLocked;
   final int? lockCounter;
 }
+
+class PageAccessLevelUpdateSectionTypeEvent extends PageAccessLevelEvent {
+  const PageAccessLevelUpdateSectionTypeEvent(this.sectionType);
+
+  final SharedSectionType sectionType;
+}

frontend/appflowy_flutter/lib/features/page_access_level/logic/page_access_level_state.dart

@@ -1,4 +1,4 @@
-import 'package:appflowy/features/share_tab/data/models/share_access_level.dart';
+import 'package:appflowy/features/share_tab/data/models/models.dart';
 import 'package:appflowy/shared/feature_flags.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 
@@ -7,6 +7,7 @@ class PageAccessLevelState {
         view: view,
         isLocked: false,
         lockCounter: 0,
+        sectionType: SharedSectionType.public,
         accessLevel: ShareAccessLevel
             .readAndWrite, // replace it with readOnly if we support offline.
       );
@@ -16,6 +17,8 @@ class PageAccessLevelState {
     required this.isLocked,
     required this.lockCounter,
     required this.accessLevel,
+    required this.sectionType,
+    this.myRole,
     this.isLoadingLockStatus = true,
   });
 
@@ -24,6 +27,13 @@ class PageAccessLevelState {
   final int lockCounter;
   final bool isLoadingLockStatus;
   final ShareAccessLevel accessLevel;
+  final SharedSectionType sectionType;
+  final ShareRole? myRole;
+
+  bool get isPublic => sectionType == SharedSectionType.public;
+  bool get isPrivate => sectionType == SharedSectionType.private;
+  bool get isShared => sectionType == SharedSectionType.shared;
+  bool get shouldHideSpace => myRole == ShareRole.guest;
 
   bool get isEditable {
     if (!FeatureFlag.sharedSection.isOn) {
@@ -41,13 +51,17 @@ class PageAccessLevelState {
     int? lockCounter,
     bool? isLoadingLockStatus,
     ShareAccessLevel? accessLevel,
+    SharedSectionType? sectionType,
+    ShareRole? myRole,
   }) {
     return PageAccessLevelState(
       view: view ?? this.view,
       isLocked: isLocked ?? this.isLocked,
       lockCounter: lockCounter ?? this.lockCounter,
       isLoadingLockStatus: isLoadingLockStatus ?? this.isLoadingLockStatus,
       accessLevel: accessLevel ?? this.accessLevel,
+      sectionType: sectionType ?? this.sectionType,
+      myRole: myRole ?? this.myRole,
     );
   }
 
@@ -59,7 +73,9 @@ class PageAccessLevelState {
         other.isLocked == isLocked &&
         other.lockCounter == lockCounter &&
         other.isLoadingLockStatus == isLoadingLockStatus &&
-        other.accessLevel == accessLevel;
+        other.accessLevel == accessLevel &&
+        other.sectionType == sectionType &&
+        other.myRole == myRole;
   }
 
   @override
@@ -70,11 +86,13 @@ class PageAccessLevelState {
       lockCounter,
       isLoadingLockStatus,
       accessLevel,
+      sectionType,
+      myRole,
     );
   }
 
   @override
   String toString() {
-    return 'PageAccessLevelState(view: $view, isLocked: $isLocked, lockCounter: $lockCounter, isLoadingLockStatus: $isLoadingLockStatus, accessLevel: $accessLevel)';
+    return 'PageAccessLevelState(view: $view, isLocked: $isLocked, lockCounter: $lockCounter, isLoadingLockStatus: $isLoadingLockStatus, accessLevel: $accessLevel, sectionType: $sectionType, myRole: $myRole)';
   }
 }

frontend/appflowy_flutter/lib/features/share_tab/data/models/models.dart

@@ -2,3 +2,4 @@ export 'share_access_level.dart';
 export 'share_popover_group_id.dart';
 export 'share_role.dart';
 export 'shared_user.dart';
+export 'share_section_type.dart';

frontend/appflowy_flutter/lib/features/share_tab/data/models/share_access_level.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
 
@@ -15,7 +16,7 @@ enum ShareAccessLevel {
   /// Full access (edit, share, remove, etc.) and can add new users.
   fullAccess;
 
-  String get i18n {
+  String get title {
     switch (this) {
       case ShareAccessLevel.readOnly:
         return LocaleKeys.shareTab_accessLevel_view.tr();
@@ -27,5 +28,30 @@ enum ShareAccessLevel {
         return LocaleKeys.shareTab_accessLevel_fullAccess.tr();
     }
   }
-}
 
+  String get subtitle {
+    switch (this) {
+      case ShareAccessLevel.readOnly:
+        return 'Can\'t make changes';
+      case ShareAccessLevel.readAndComment:
+        return 'Can make any changes';
+      case ShareAccessLevel.readAndWrite:
+        return 'Can make any changes';
+      case ShareAccessLevel.fullAccess:
+        return 'Can make any changes';
+    }
+  }
+
+  FlowySvgData get icon {
+    switch (this) {
+      case ShareAccessLevel.readOnly:
+        return FlowySvgs.access_level_view_m;
+      case ShareAccessLevel.readAndComment:
+        return FlowySvgs.access_level_edit_m;
+      case ShareAccessLevel.readAndWrite:
+        return FlowySvgs.access_level_edit_m;
+      case ShareAccessLevel.fullAccess:
+        return FlowySvgs.access_level_edit_m;
+    }
+  }
+}

frontend/appflowy_flutter/lib/features/share_tab/data/models/share_section_type.dart

@@ -0,0 +1,10 @@
+/// The type of the shared section.
+///
+/// - public: the shared section is public, anyone in the workspace can view/edit it.
+/// - shared: the shared section is shared, anyone in the shared section can view/edit it.
+/// - private: the shared section is private, only the users in the shared section can view/edit it.
+enum SharedSectionType {
+  public,
+  shared,
+  private;
+}

frontend/appflowy_flutter/lib/features/share_tab/data/repositories/local_share_with_user_repository_impl.dart

@@ -13,16 +13,16 @@ class LocalShareWithUserRepositoryImpl extends ShareWithUserRepository {
   final SharedUsers _sharedUsers = [
     SharedUser(
       email: 'lucas.xu@appflowy.io',
-      name: 'Lucas Xu',
-      accessLevel: ShareAccessLevel.readOnly,
+      name: 'Lucas Xu - Long long long long long name',
+      accessLevel: ShareAccessLevel.fullAccess,
       role: ShareRole.guest,
       avatarUrl: 'https://avatar.iran.liara.run/public',
     ),
     SharedUser(
       email: 'vivian@appflowy.io',
       name: 'Vivian Wang',
       accessLevel: ShareAccessLevel.readAndWrite,
-      role: ShareRole.member,
+      role: ShareRole.guest,
       avatarUrl: 'https://avatar.iran.liara.run/public/girl',
     ),
     SharedUser(
@@ -34,7 +34,7 @@ class LocalShareWithUserRepositoryImpl extends ShareWithUserRepository {
     ),
     SharedUser(
       email: 'guest_user_1@appflowy.io',
-      name: 'Guest User 1',
+      name: 'Guest User 1 - Long long long long long name',
       accessLevel: ShareAccessLevel.readOnly,
       role: ShareRole.guest,
       avatarUrl: 'https://avatar.iran.liara.run/public/boy/10',

frontend/appflowy_flutter/lib/features/share_tab/data/repositories/rust_share_with_user_repository_impl.dart

@@ -23,12 +23,12 @@ class RustShareWithUserRepositoryImpl extends ShareWithUserRepository {
 
     return result.fold(
       (success) {
-        Log.debug('get shared users: $success');
+        Log.debug('get shared users success: $success');
 
         return FlowySuccess(success.sharedUsers);
       },
       (failure) {
-        Log.error('getUsersInSharedPage: $failure');
+        Log.error('get shared users failed: $failure');
 
         return FlowyFailure(failure);
       },