Added ui implementation

lib/presentation/widgets/tiles/group_tile.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:tallee/core/common.dart';
 import 'package:tallee/core/custom_theme.dart';
 import 'package:tallee/data/models/group.dart';
 import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart';
@@ -81,7 +82,11 @@ class _GroupTileState extends State<GroupTile> {
                 for (var member in [
                   ...widget.group.members,
                 ]..sort((a, b) => a.name.compareTo(b.name)))
-                  TextIconTile(text: member.name, iconEnabled: false),
+                  TextIconTile(
+                    text: member.name,
+                    suffixText: getNameCountText(member),
+                    iconEnabled: false,
+                  ),
               ],
             ),
             const SizedBox(height: 2.5),

lib/presentation/widgets/tiles/match_tile.dart

@@ -203,7 +203,11 @@ class _MatchTileState extends State<MatchTile> {
                 spacing: 6,
                 runSpacing: 6,
                 children: players.map((player) {
-                  return TextIconTile(text: player.name, iconEnabled: false);
+                  return TextIconTile(
+                    text: player.name,
+                    suffixText: getNameCountText(player),
+                    iconEnabled: false,
+                  );
                 }).toList(),
               ),
             ],

lib/presentation/widgets/tiles/text_icon_list_tile.dart

@@ -9,6 +9,7 @@ class TextIconListTile extends StatelessWidget {
   const TextIconListTile({
     super.key,
     required this.text,
+    this.suffixText = '',
     this.iconEnabled = true,
     this.onPressed,
   });
@@ -16,6 +17,9 @@ class TextIconListTile extends StatelessWidget {
   /// The text to display in the tile.
   final String text;
 
+  /// An optional suffix text to display after the main text.
+  final String suffixText;
+
   /// A boolean to determine if the icon should be displayed.
   final bool iconEnabled;
 
@@ -35,12 +39,27 @@ class TextIconListTile extends StatelessWidget {
           Flexible(
             child: Container(
               padding: const EdgeInsets.symmetric(vertical: 12.5),
-              child: Text(
-                text,
+              child: RichText(
                 overflow: TextOverflow.ellipsis,
-                style: const TextStyle(
-                  fontSize: 16,
-                  fontWeight: FontWeight.w500,
+                text: TextSpan(
+                  style: DefaultTextStyle.of(context).style,
+                  children: [
+                    TextSpan(
+                      text: text,
+                      style: const TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.w500,
+                      ),
+                    ),
+                    TextSpan(
+                      text: suffixText,
+                      style: TextStyle(
+                        fontSize: 14,
+                        fontWeight: FontWeight.w500,
+                        color: CustomTheme.textColor.withAlpha(100),
+                      ),
+                    ),
+                  ],
                 ),
               ),
             ),

lib/presentation/widgets/tiles/text_icon_tile.dart

@@ -9,6 +9,7 @@ class TextIconTile extends StatelessWidget {
   const TextIconTile({
     super.key,
     required this.text,
+    this.suffixText = '',
     this.iconEnabled = true,
     this.onIconTap,
   });
@@ -16,6 +17,8 @@ class TextIconTile extends StatelessWidget {
   /// The text to display in the tile.
   final String text;
 
+  final String suffixText;
+
   /// A boolean to determine if the icon should be displayed.
   final bool iconEnabled;
 
@@ -36,10 +39,28 @@ class TextIconTile extends StatelessWidget {
         children: [
           if (iconEnabled) const SizedBox(width: 3),
           Flexible(
-            child: Text(
-              text,
+            child: RichText(
               overflow: TextOverflow.ellipsis,
-              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+              text: TextSpan(
+                style: DefaultTextStyle.of(context).style,
+                children: [
+                  TextSpan(
+                    text: text,
+                    style: const TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                  TextSpan(
+                    text: suffixText,
+                    style: TextStyle(
+                      fontSize: 13,
+                      fontWeight: FontWeight.w500,
+                      color: CustomTheme.textColor.withAlpha(120),
+                    ),
+                  ),
+                ],
+              ),
             ),
           ),
           if (iconEnabled) ...<Widget>[