💄 Optimize style of online count

lib/screens/chat/room.dart

@@ -409,38 +409,20 @@ class ChatRoomScreen extends HookConsumerWidget {
 
     final compactHeader = isWideScreen(context);
 
-    Widget onlineIndicator() => Row(
-      spacing: 8,
-      mainAxisSize: MainAxisSize.min,
-      mainAxisAlignment: MainAxisAlignment.start,
-      children: [
-        Container(
-          width: 8,
-          height: 8,
-          decoration: BoxDecoration(
-            shape: BoxShape.circle,
-            color: (onlineCount as AsyncData).value > 1 ? Colors.green : null,
-            border:
-                (onlineCount as AsyncData).value <= 1
-                    ? Border.all(color: Colors.grey)
-                    : null,
-          ),
-        ),
-        Text(
-          '${(onlineCount as AsyncData).value} online',
-          style: Theme.of(context).textTheme.bodySmall!.copyWith(
-            color: Theme.of(context).appBarTheme.foregroundColor!,
-          ),
-        ),
-      ],
-    );
-
     Widget comfortHeaderWidget(SnChatRoom? room) => Column(
       spacing: 4,
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        SizedBox(
+        Badge(
+          isLabelVisible: hasOnlineCount,
+          label: Text('${(onlineCount as AsyncData?)?.value}'),
+          backgroundColor:
+              (onlineCount as AsyncData?)?.value != null &&
+                      (onlineCount as AsyncData).value > 1
+                  ? Colors.green
+                  : Colors.grey,
+          child: SizedBox(
             height: 26,
             width: 26,
             child:
@@ -463,12 +445,12 @@ class ChatRoomScreen extends HookConsumerWidget {
                       ),
                     ),
           ),
+        ),
         Text(
           (room.type == 1 && room.name == null)
               ? room.members!.map((e) => e.account.nick).join(', ')
               : room.name!,
         ).fontSize(15),
-        if (hasOnlineCount) onlineIndicator(),
       ],
     );
 
@@ -477,7 +459,16 @@ class ChatRoomScreen extends HookConsumerWidget {
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisAlignment: MainAxisAlignment.start,
       children: [
-        SizedBox(
+        Badge(
+          isLabelVisible: (onlineCount.value ?? 0) > 1,
+          label: Text('${(onlineCount as AsyncData?)?.value}'),
+          backgroundColor:
+              onlineCount.value != null && (onlineCount.value ?? 0) > 1
+                  ? Colors.green
+                  : Colors.grey,
+          textColor: Colors.white,
+          offset: Offset(6, 14),
+          child: SizedBox(
             height: 28,
             width: 28,
             child:
@@ -500,12 +491,12 @@ class ChatRoomScreen extends HookConsumerWidget {
                       ),
                     ),
           ),
+        ),
         Text(
           (room.type == 1 && room.name == null)
               ? room.members!.map((e) => e.account.nick).join(', ')
               : room.name!,
         ).fontSize(19),
-        if (hasOnlineCount) onlineIndicator().padding(left: 4, top: 6),
       ],
     );