Added ui implementation

lib/core/common.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/cupertino.dart';
 import 'package:tallee/core/enums.dart';
 import 'package:tallee/data/models/match.dart';
+import 'package:tallee/data/models/player.dart';
 import 'package:tallee/l10n/generated/app_localizations.dart';
 
 /// Translates a [Ruleset] enum value to its corresponding localized string.
@@ -43,3 +44,10 @@ String getExtraPlayerCount(Match match) {
   }
   return ' + ${count.toString()}';
 }
+
+String getNameCountText(Player player) {
+  if (player.nameCount >= 1) {
+    return ' #${player.nameCount}';
+  }
+  return '';
+}

lib/presentation/views/main_menu/group_view/group_detail_view.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
 import 'package:tallee/core/adaptive_page_route.dart';
+import 'package:tallee/core/common.dart';
 import 'package:tallee/core/custom_theme.dart';
 import 'package:tallee/data/db/database.dart';
 import 'package:tallee/data/models/group.dart';
@@ -153,6 +154,7 @@ class _GroupDetailViewState extends State<GroupDetailView> {
                     children: _group.members.map((member) {
                       return TextIconTile(
                         text: member.name,
+                        suffixText: getNameCountText(member),
                         iconEnabled: false,
                       );
                     }).toList(),

lib/presentation/views/main_menu/match_view/match_detail_view.dart

@@ -161,6 +161,7 @@ class _MatchDetailViewState extends State<MatchDetailView> {
                     children: match.players.map((player) {
                       return TextIconTile(
                         text: player.name,
+                        suffixText: getNameCountText(player),
                         iconEnabled: false,
                       );
                     }).toList(),

lib/presentation/widgets/player_selection.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:tallee/core/common.dart';
 import 'package:tallee/core/constants.dart';
 import 'package:tallee/core/custom_theme.dart';
 import 'package:tallee/data/db/database.dart';
@@ -140,6 +141,7 @@ class _PlayerSelectionState extends State<PlayerSelection> {
                               padding: const EdgeInsets.only(right: 8.0),
                               child: TextIconTile(
                                 text: player.name,
+                                suffixText: getNameCountText(player),
                                 onIconTap: () {
                                   setState(() {
                                     // Removes the player from the selection and notifies the parent.
@@ -193,6 +195,7 @@ class _PlayerSelectionState extends State<PlayerSelection> {
                   itemBuilder: (BuildContext context, int index) {
                     return TextIconListTile(
                       text: suggestedPlayers[index].name,
+                      suffixText: getNameCountText(suggestedPlayers[index]),
                       onPressed: () {
                         setState(() {
                           // If the player is not already selected

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,14 +39,29 @@ class TextIconListTile extends StatelessWidget {
           Flexible(
             child: Container(
               padding: const EdgeInsets.symmetric(vertical: 12.5),
-              child: Text(
+              child: RichText(
-                text,
                 overflow: TextOverflow.ellipsis,
+                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),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
             ),
           ),
           if (iconEnabled)

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(
+            child: RichText(
-              text,
               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>[