fix: revamp desktop notification center

frontend/appflowy_flutter/lib/mobile/application/notification/notification_reminder_bloc.dart

@@ -43,6 +43,7 @@ class NotificationReminderBloc
                 createdAt: createdAt,
                 pageTitle: '',
                 reminderContent: '',
+                isLocked: false,
                 status: NotificationReminderStatus.error,
               ),
             );
@@ -57,6 +58,7 @@ class NotificationReminderBloc
                 NotificationReminderState(
                   createdAt: createdAt,
                   pageTitle: view.nameOrDefault,
+                  isLocked: view.isLocked,
                   view: view,
                   reminderContent: node.delta?.toPlainText() ?? '',
                   nodes: [node],
@@ -70,6 +72,7 @@ class NotificationReminderBloc
               NotificationReminderState(
                 createdAt: createdAt,
                 pageTitle: view.nameOrDefault,
+                isLocked: view.isLocked,
                 view: view,
                 reminderContent: reminder.message,
                 status: NotificationReminderStatus.loaded,
@@ -203,6 +206,7 @@ class NotificationReminderState with _$NotificationReminderState {
     required String createdAt,
     required String pageTitle,
     required String reminderContent,
+    required bool isLocked,
     @Default(NotificationReminderStatus.initial)
     NotificationReminderStatus status,
     @Default([]) List<Node> nodes,
@@ -215,5 +219,6 @@ class NotificationReminderState with _$NotificationReminderState {
         createdAt: '',
         pageTitle: '',
         reminderContent: '',
+        isLocked: false,
       );
 }

frontend/appflowy_flutter/lib/mobile/presentation/notifications/mobile_notifications_screen.dart

@@ -3,11 +3,14 @@ import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart'
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:appflowy/workspace/presentation/notifications/widgets/notification_tab_bar.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import 'widgets/tab_bar.dart';
+
 final PropertyValueNotifier<List<String>> mSelectedNotificationIds =
     PropertyValueNotifier([]);
 
@@ -76,9 +79,9 @@ class _MobileNotificationsTabState extends State<MobileNotificationsTab>
   late TabController tabController;
 
   final tabs = [
-    MobileNotificationTabType.inbox,
-    MobileNotificationTabType.unread,
-    MobileNotificationTabType.archive,
+    NotificationTabType.inbox,
+    NotificationTabType.unread,
+    NotificationTabType.archive,
   ];
 
   @override

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/empty.dart

@@ -1,6 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
+import 'package:appflowy/workspace/presentation/notifications/widgets/notification_tab_bar.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
@@ -11,24 +11,24 @@ class EmptyNotification extends StatelessWidget {
     required this.type,
   });
 
-  final MobileNotificationTabType type;
+  final NotificationTabType type;
 
   @override
   Widget build(BuildContext context) {
     final title = switch (type) {
-      MobileNotificationTabType.inbox =>
+      NotificationTabType.inbox =>
         LocaleKeys.settings_notifications_emptyInbox_title.tr(),
-      MobileNotificationTabType.archive =>
+      NotificationTabType.archive =>
         LocaleKeys.settings_notifications_emptyArchived_title.tr(),
-      MobileNotificationTabType.unread =>
+      NotificationTabType.unread =>
         LocaleKeys.settings_notifications_emptyUnread_title.tr(),
     };
     final desc = switch (type) {
-      MobileNotificationTabType.inbox =>
+      NotificationTabType.inbox =>
         LocaleKeys.settings_notifications_emptyInbox_description.tr(),
-      MobileNotificationTabType.archive =>
+      NotificationTabType.archive =>
         LocaleKeys.settings_notifications_emptyArchived_description.tr(),
-      MobileNotificationTabType.unread =>
+      NotificationTabType.unread =>
         LocaleKeys.settings_notifications_emptyUnread_description.tr(),
     };
     return Column(

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/notification_item.dart

@@ -4,6 +4,7 @@ import 'package:appflowy/mobile/presentation/base/animated_gesture.dart';
 import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
+import 'package:appflowy/workspace/presentation/notifications/widgets/notification_tab_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/foundation.dart';
@@ -18,7 +19,7 @@ class NotificationItem extends StatelessWidget {
     required this.reminder,
   });
 
-  final MobileNotificationTabType tabType;
+  final NotificationTabType tabType;
   final ReminderPB reminder;
 
   @override
@@ -93,7 +94,7 @@ class _InnerNotificationItem extends StatelessWidget {
     required this.tabType,
   });
 
-  final MobileNotificationTabType tabType;
+  final NotificationTabType tabType;
   final ReminderPB reminder;
 
   @override
@@ -121,22 +122,22 @@ class _SlidableNotificationItem extends StatelessWidget {
     required this.child,
   });
 
-  final MobileNotificationTabType tabType;
+  final NotificationTabType tabType;
   final ReminderPB reminder;
   final Widget child;
 
   @override
   Widget build(BuildContext context) {
     final List<NotificationPaneActionType> actions = switch (tabType) {
-      MobileNotificationTabType.inbox => [
+      NotificationTabType.inbox => [
           NotificationPaneActionType.more,
           if (!reminder.isRead) NotificationPaneActionType.markAsRead,
         ],
-      MobileNotificationTabType.unread => [
+      NotificationTabType.unread => [
           NotificationPaneActionType.more,
           NotificationPaneActionType.markAsRead,
         ],
-      MobileNotificationTabType.archive => [
+      NotificationTabType.archive => [
           if (kDebugMode) NotificationPaneActionType.unArchive,
         ],
     };

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/shared.dart

@@ -28,10 +28,36 @@ class NotificationIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const FlowySvg(
-      FlowySvgs.m_notification_reminder_s,
-      size: Size.square(_kNotificationIconHeight),
-      blendMode: null,
+    return SizedBox(
+      width: 42,
+      height: 36,
+      child: Stack(
+        children: [
+          const FlowySvg(
+            FlowySvgs.m_notification_reminder_s,
+            size: Size.square(32),
+            blendMode: null,
+          ),
+          Align(
+            alignment: Alignment.bottomRight,
+            child: Container(
+              width: 20,
+              height: 20,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: Theme.of(context).cardColor,
+              ),
+              child: Center(
+                child: FlowyText(
+                  '@',
+                  fontSize: 12,
+                  figmaLineHeight: 14,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
     );
   }
 }
@@ -114,16 +140,10 @@ class _NotificationContentState extends State<NotificationContent> {
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisSize: MainAxisSize.min,
           children: [
-            // title
-            _buildHeader(),
-
-            // time & page name
-            _buildTimeAndPageName(
-              context,
-              state.createdAt,
-              state.pageTitle,
-            ),
-
+            // title & time
+            _buildHeader(state.createdAt, !widget.reminder.isRead),
+            // page name
+            _buildPageName(context, state.isLocked, state.pageTitle),
             // content
             Padding(
               padding: const EdgeInsets.only(right: 16.0),
@@ -162,40 +182,65 @@ class _NotificationContentState extends State<NotificationContent> {
     return const SizedBox.shrink();
   }
 
-  Widget _buildHeader() {
-    return FlowyText.semibold(
-      LocaleKeys.settings_notifications_titles_reminder.tr(),
-      fontSize: 14,
-      figmaLineHeight: 20,
+  Widget _buildHeader(String createAt, bool unread) {
+    return SizedBox(
+      height: 22,
+      child: Row(
+        children: [
+          FlowyText.semibold(
+            LocaleKeys.settings_notifications_titles_reminder.tr(),
+            fontSize: 14,
+            figmaLineHeight: 20,
+          ),
+          Spacer(),
+          if (createAt.isNotEmpty)
+            FlowyText.regular(
+              createAt,
+              fontSize: 12,
+              figmaLineHeight: 18,
+              color: context.notificationItemTextColor,
+            ),
+          if (unread) ...[
+            HSpace(4),
+            const UnreadRedDot(),
+          ],
+        ],
+      ),
     );
   }
 
-  Widget _buildTimeAndPageName(
+  Widget _buildPageName(
     BuildContext context,
-    String createdAt,
+    bool isLocked,
     String pageTitle,
   ) {
     return Opacity(
       opacity: 0.5,
-      child: Row(
-        children: [
-          // the legacy reminder doesn't contain the timestamp, so we don't show it
-          if (createdAt.isNotEmpty) ...[
+      child: SizedBox(
+        height: 18,
+        child: Row(
+          children: [
+            /// TODO: need to be replaced after reminder support more types
             FlowyText.regular(
-              createdAt,
+              LocaleKeys.notificationHub_mentionedYou.tr(),
               fontSize: 12,
               figmaLineHeight: 18,
               color: context.notificationItemTextColor,
             ),
             const NotificationEllipse(),
+            if (isLocked)
+              Padding(
+                padding: EdgeInsets.only(right: 5),
+                child: FlowySvg(FlowySvgs.notification_lock_s),
+              ),
+            FlowyText.regular(
+              pageTitle,
+              fontSize: 12,
+              figmaLineHeight: 18,
+              color: context.notificationItemTextColor,
+            ),
           ],
-          FlowyText.regular(
-            pageTitle,
-            fontSize: 12,
-            figmaLineHeight: 18,
-            color: context.notificationItemTextColor,
-          ),
-        ],
+        ),
       ),
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/slide_actions.dart

@@ -2,12 +2,12 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/application/notification/notification_reminder_bloc.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
-import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_slide_action_button.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/user/application/reminder/reminder_extension.dart';
+import 'package:appflowy/workspace/presentation/notifications/widgets/notification_tab_bar.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -21,7 +21,7 @@ enum NotificationPaneActionType {
 
   MobileSlideActionButton actionButton(
     BuildContext context, {
-    required MobileNotificationTabType tabType,
+    required NotificationTabType tabType,
   }) {
     switch (this) {
       case NotificationPaneActionType.markAsRead:

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/tab.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/mobile/presentation/notifications/widgets/widgets.dart'
 import 'package:appflowy/shared/list_extension.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/user/application/reminder/reminder_extension.dart';
+import 'package:appflowy/workspace/presentation/notifications/widgets/notification_tab_bar.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/appflowy_backend.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
@@ -17,7 +18,7 @@ class NotificationTab extends StatefulWidget {
     required this.tabType,
   });
 
-  final MobileNotificationTabType tabType;
+  final NotificationTabType tabType;
 
   @override
   State<NotificationTab> createState() => _NotificationTabState();
@@ -81,17 +82,17 @@ class _NotificationTabState extends State<NotificationTab>
 
   List<ReminderPB> _filterReminders(List<ReminderPB> reminders) {
     switch (widget.tabType) {
-      case MobileNotificationTabType.inbox:
+      case NotificationTabType.inbox:
         return reminders.reversed
             .where((reminder) => !reminder.isArchived)
             .toList()
             .unique((reminder) => reminder.id);
-      case MobileNotificationTabType.archive:
+      case NotificationTabType.archive:
         return reminders.reversed
             .where((reminder) => reminder.isArchived)
             .toList()
             .unique((reminder) => reminder.id);
-      case MobileNotificationTabType.unread:
+      case NotificationTabType.unread:
         return reminders.reversed
             .where((reminder) => !reminder.isRead)
             .toList()