💄 Optimize style of online count

lib/screens/chat/room.dart

@@ -409,66 +409,48 @@ 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(
-          height: 26,
+          isLabelVisible: hasOnlineCount,
-          width: 26,
+          label: Text('${(onlineCount as AsyncData?)?.value}'),
-          child:
+          backgroundColor:
-              (room!.type == 1 && room.picture?.id == null)
+              (onlineCount as AsyncData?)?.value != null &&
-                  ? SplitAvatarWidget(
+                      (onlineCount as AsyncData).value > 1
-                    filesId:
+                  ? Colors.green
-                        room.members!
+                  : Colors.grey,
-                            .map((e) => e.account.profile.picture?.id)
+          child: SizedBox(
-                            .toList(),
+            height: 26,
-                  )
+            width: 26,
-                  : room.picture?.id != null
+            child:
-                  ? ProfilePictureWidget(
+                (room!.type == 1 && room.picture?.id == null)
-                    fileId: room.picture?.id,
+                    ? SplitAvatarWidget(
-                    fallbackIcon: Symbols.chat,
+                      filesId:
-                  )
+                          room.members!
-                  : CircleAvatar(
+                              .map((e) => e.account.profile.picture?.id)
-                    child: Text(
+                              .toList(),
-                      room.name![0].toUpperCase(),
+                    )
-                      style: const TextStyle(fontSize: 12),
+                    : room.picture?.id != null
+                    ? ProfilePictureWidget(
+                      fileId: room.picture?.id,
+                      fallbackIcon: Symbols.chat,
+                    )
+                    : CircleAvatar(
+                      child: Text(
+                        room.name![0].toUpperCase(),
+                        style: const TextStyle(fontSize: 12),
+                      ),
                     ),
-                  ),
+          ),
         ),
         Text(
           (room.type == 1 && room.name == null)
               ? room.members!.map((e) => e.account.nick).join(', ')
               : room.name!,
         ).fontSize(15),
-        if (hasOnlineCount) onlineIndicator(),
       ],
     );
 
@@ -477,35 +459,44 @@ class ChatRoomScreen extends HookConsumerWidget {
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisAlignment: MainAxisAlignment.start,
       children: [
-        SizedBox(
+        Badge(
-          height: 28,
+          isLabelVisible: (onlineCount.value ?? 0) > 1,
-          width: 28,
+          label: Text('${(onlineCount as AsyncData?)?.value}'),
-          child:
+          backgroundColor:
-              (room!.type == 1 && room.picture?.id == null)
+              onlineCount.value != null && (onlineCount.value ?? 0) > 1
-                  ? SplitAvatarWidget(
+                  ? Colors.green
-                    filesId:
+                  : Colors.grey,
-                        room.members!
+          textColor: Colors.white,
-                            .map((e) => e.account.profile.picture?.id)
+          offset: Offset(6, 14),
-                            .toList(),
+          child: SizedBox(
-                  )
+            height: 28,
-                  : room.picture?.id != null
+            width: 28,
-                  ? ProfilePictureWidget(
+            child:
-                    fileId: room.picture?.id,
+                (room!.type == 1 && room.picture?.id == null)
-                    fallbackIcon: Symbols.chat,
+                    ? SplitAvatarWidget(
-                  )
+                      filesId:
-                  : CircleAvatar(
+                          room.members!
-                    child: Text(
+                              .map((e) => e.account.profile.picture?.id)
-                      room.name![0].toUpperCase(),
+                              .toList(),
-                      style: const TextStyle(fontSize: 12),
+                    )
+                    : room.picture?.id != null
+                    ? ProfilePictureWidget(
+                      fileId: room.picture?.id,
+                      fallbackIcon: Symbols.chat,
+                    )
+                    : CircleAvatar(
+                      child: Text(
+                        room.name![0].toUpperCase(),
+                        style: const TextStyle(fontSize: 12),
+                      ),
                     ),
-                  ),
+          ),
         ),
         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),
       ],
     );