fix: complete the red dot

Author: asjqkkkk

frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart

@@ -15,6 +15,8 @@ import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:universal_platform/universal_platform.dart';
 
+import '../notifications/number_red_dot.dart';
+
 class NavigationNotifier with ChangeNotifier {
   NavigationNotifier({required this.navigationItems});
 
@@ -81,20 +83,40 @@ class FlowyNavigation extends StatelessWidget {
           );
           return Padding(
             padding: const EdgeInsets.only(right: 8.0),
-            child: RotationTransition(
-              turns: const AlwaysStoppedAnimation(180 / 360),
-              child: FlowyTooltip(
-                richMessage: textSpan,
-                child: Listener(
-                  onPointerDown: (event) =>
-                      context.read<HomeSettingBloc>().collapseMenu(),
-                  child: FlowyIconButton(
-                    width: 24,
-                    onPressed: () {},
-                    iconPadding: const EdgeInsets.all(4),
-                    icon: const FlowySvg(FlowySvgs.hide_menu_s),
+            child: SizedBox(
+              width: 24,
+              height: 24,
+              child: Stack(
+                children: [
+                  RotationTransition(
+                    turns: const AlwaysStoppedAnimation(180 / 360),
+                    child: FlowyTooltip(
+                      richMessage: textSpan,
+                      child: Listener(
+                        onPointerDown: (event) =>
+                            context.read<HomeSettingBloc>().collapseMenu(),
+                        child: SizedBox(
+                          width: 24,
+                          height: 24,
+                          child: FlowyIconButton(
+                            width: 24,
+                            onPressed: () {},
+                            iconPadding: const EdgeInsets.all(4),
+                            icon: const FlowySvg(FlowySvgs.hide_menu_s),
+                          ),
+                        ),
+                      ),
+                    ),
                   ),
-                ),
+                  Align(
+                    alignment: Alignment.topRight,
+                    child: NumberedRedDot(
+                      size: 14,
+                      fontSize: 8,
+                      figmaLineHeight: 10,
+                    ),
+                  ),
+                ],
               ),
             ),
           );

frontend/appflowy_flutter/lib/workspace/presentation/notifications/number_red_dot.dart

@@ -0,0 +1,45 @@
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class NumberedRedDot extends StatelessWidget {
+  const NumberedRedDot({
+    super.key,
+    this.size = 18,
+    this.fontSize = 12,
+    this.figmaLineHeight = 14,
+  });
+  final double size;
+  final double fontSize;
+  final double figmaLineHeight;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<ReminderBloc, ReminderState>(
+      builder: (context, state) {
+        int unreadReminder = 0;
+        for (final reminder in state.reminders) {
+          if (!reminder.isRead) unreadReminder++;
+        }
+        if (unreadReminder == 0) return SizedBox.shrink();
+        return Container(
+          width: size,
+          height: size,
+          decoration: BoxDecoration(
+            color: Colors.red,
+            borderRadius: BorderRadius.all(Radius.circular(16)),
+          ),
+          child: Center(
+            child: FlowyText.medium(
+              '$unreadReminder',
+              color: Colors.white,
+              fontSize: fontSize,
+              figmaLineHeight: figmaLineHeight,
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/home/home_setting_bloc.dart';
 import 'package:appflowy/workspace/application/settings/notifications/notification_settings_cubit.dart';
+import 'package:appflowy/workspace/presentation/notifications/number_red_dot.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/reminder.pb.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
@@ -83,22 +84,7 @@ class _NotificationButtonState extends State<NotificationButton> {
           child: Container(
             height: 24,
             padding: EdgeInsets.all(3),
-            child: Container(
-              height: 18,
-              padding: EdgeInsets.symmetric(horizontal: 6),
-              decoration: BoxDecoration(
-                color: Colors.red,
-                borderRadius: BorderRadius.all(Radius.circular(16)),
-              ),
-              child: Center(
-                child: FlowyText.medium(
-                  '$unreadReminder',
-                  color: Colors.white,
-                  fontSize: 12,
-                  figmaLineHeight: 14,
-                ),
-              ),
-            ),
+            child: NumberedRedDot(),
           ),
         ),
       );