Make unread badge size consistent regardless of size (#4669)

Co-authored-by: ggurdin <ggurdin@gmail.com>

lib/l10n/intl_en.arb

@@ -4950,6 +4950,7 @@
   "zhCNDisplayName": "Chinese (Simplified)",
   "zhTWDisplayName": "Chinese (Traditional)",
   "zuDisplayName": "Zulu",
+  "unreadPlus": "99+",
   "highlightVocabTooltip": "Highlight target vocab words below by sending them or practicing with them in the chat",
   "teacherModeTitle": "Teacher Mode",
   "teacherModeDesc": "Toggle to unlock all topics and activities. Course admin only."

lib/pages/chat/chat_view.dart

@@ -266,7 +266,7 @@ class ChatView extends StatelessWidget {
                                   filter: (r) => r.id != controller.roomId,
                                   badgePosition: BadgePosition.topEnd(
                                     end: 8,
-                                    top: 4,
+                                    top: 9,
                                   ),
                                   child: const Center(child: BackButton()),
                                 ),

lib/pages/chat_list/navi_rail_item.dart

@@ -94,7 +94,7 @@ class NaviRailItem extends StatelessWidget {
                   child: UnreadRoomsBadge(
                     filter: unreadBadgeFilter ?? (_) => false,
                     badgePosition: BadgePosition.topEnd(
-                      top: -4,
+                      top: 1,
                       end: isColumnMode ? 8 : 4,
                     ),
                     child: Container(

lib/widgets/unread_rooms_badge.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:badges/badges.dart' as b;
 import 'package:matrix/matrix.dart';
 
+import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/pangea/extensions/pangea_room_extension.dart';
 import 'matrix.dart';
 
@@ -33,6 +34,9 @@ class UnreadRoomsBadge extends StatelessWidget {
         .length;
     return b.Badge(
       badgeStyle: b.BadgeStyle(
+        // #Pangea
+        padding: const EdgeInsetsGeometry.all(1),
+        // Pangea#
         badgeColor: theme.colorScheme.primary,
         elevation: 4,
         borderSide: BorderSide(
@@ -40,13 +44,31 @@ class UnreadRoomsBadge extends StatelessWidget {
           width: 2,
         ),
       ),
-      badgeContent: Text(
-        unreadCount.toString(),
-        style: TextStyle(
-          color: theme.colorScheme.onPrimary,
-          fontSize: 12,
+      // #Pangea
+      // badgeContent: Text(
+      //   unreadCount.toString(),
+      //   style: TextStyle(
+      //     color: theme.colorScheme.onPrimary,
+      //     fontSize: 12,
+      //   ),
+      // ),
+      badgeContent: SizedBox(
+        width: 15,
+        height: 15,
+        child: FittedBox(
+          fit: BoxFit.scaleDown,
+          child: Text(
+            unreadCount < 100
+                ? unreadCount.toString()
+                : L10n.of(context).unreadPlus,
+            style: TextStyle(
+              color: theme.colorScheme.onPrimary,
+              fontSize: 12,
+            ),
+          ),
         ),
       ),
+      // Pangea#
       showBadge: unreadCount != 0,
       badgeAnimation: const b.BadgeAnimation.scale(),
       position: badgePosition ?? b.BadgePosition.bottomEnd(),