Merge branch 'development' into feature/202-live-edit-modus

# Conflicts:
#	lib/l10n/generated/app_localizations.dart
#	pubspec.yaml

lib/presentation/widgets/tiles/choose_tile.dart

@@ -4,12 +4,12 @@ import 'package:tallee/core/custom_theme.dart';
 class ChooseTile extends StatefulWidget {
   /// A tile widget that allows users to choose an option by tapping on it.
   /// - [title]: The title text displayed on the tile.
-  /// - [trailingText]: Optional trailing text displayed on the tile.
+  /// - [trailing]: Optional trailing text displayed on the tile.
   /// - [onPressed]: The callback invoked when the tile is tapped.
   const ChooseTile({
     super.key,
     required this.title,
-    this.trailingText,
+    this.trailing,
     this.onPressed,
   });
 
@@ -20,7 +20,7 @@ class ChooseTile extends StatefulWidget {
   final VoidCallback? onPressed;
 
   /// Optional trailing text displayed on the tile.
-  final String? trailingText;
+  final Widget? trailing;
 
   @override
   State<ChooseTile> createState() => _ChooseTileState();
@@ -42,9 +42,11 @@ class _ChooseTileState extends State<ChooseTile> {
               style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
             ),
             const Spacer(),
-            if (widget.trailingText != null) Text(widget.trailingText!),
-            const SizedBox(width: 10),
-            const Icon(Icons.arrow_forward_ios, size: 16),
+            if (widget.trailing != null) widget.trailing!,
+            if (widget.onPressed != null) ...[
+              const SizedBox(width: 10),
+              const Icon(Icons.arrow_forward_ios, size: 16),
+            ],
           ],
         ),
       ),

lib/presentation/widgets/tiles/game_tile.dart

@@ -0,0 +1,151 @@
+import 'package:flutter/material.dart';
+import 'package:tallee/core/common.dart';
+import 'package:tallee/core/custom_theme.dart';
+import 'package:tallee/core/enums.dart';
+
+class GameTile extends StatelessWidget {
+  /// A list tile widget that displays a title and description, with optional highlighting and badge.
+  /// - [title]: The title text displayed on the tile.
+  /// - [description]: The description text displayed below the title.
+  /// - [onTap]: The callback invoked when the tile is tapped.
+  /// - [onLongPress]: The callback invoked when the tile is tapped.
+  /// - [isHighlighted]: A boolean to determine if the tile should be highlighted.
+  /// - [badgeText]: Optional text to display in a badge on the right side of the title.
+  /// - [badgeColor]: Optional color for the badge background.
+  const GameTile({
+    super.key,
+    required this.title,
+    required this.description,
+    this.onTap,
+    this.onLongPress,
+    this.isHighlighted = false,
+    this.badgeText,
+    this.badgeColor,
+  });
+
+  /// The title text displayed on the tile.
+  final String title;
+
+  /// The description text displayed below the title.
+  final String description;
+
+  /// The callback invoked when the tile is tapped.
+  final VoidCallback? onTap;
+
+  /// The callback invoked when the tile is long-pressed.
+  final VoidCallback? onLongPress;
+
+  /// A boolean to determine if the tile should be highlighted.
+  final bool isHighlighted;
+
+  /// Optional text to display in a badge on the right side of the title.
+  final String? badgeText;
+
+  /// Optional color for the badge background.
+  final Color? badgeColor;
+
+  @override
+  Widget build(BuildContext context) {
+    final badgeTextColor = badgeColor != null
+        ? (badgeColor!.computeLuminance() > 0.5 ? Colors.black : Colors.white)
+        : Colors.white;
+
+    final gameColor = badgeColor ?? getColorFromGameColor(GameColor.orange);
+
+    return GestureDetector(
+      onTap: onTap,
+      onLongPress: onLongPress,
+      child: AnimatedContainer(
+        margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
+        decoration: !isHighlighted
+            ? CustomTheme.standardBoxDecoration
+            : CustomTheme.highlightedBoxDecoration.copyWith(
+                border: Border.all(
+                  color: gameColor.withValues(alpha: 0.9),
+                  width: 2,
+                ),
+              ),
+        duration: const Duration(milliseconds: 200),
+        child: Stack(
+          children: [
+            // Gradient overlay
+            Positioned.fill(
+              child: Container(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(8),
+                  gradient: LinearGradient(
+                    begin: Alignment.topLeft,
+                    end: Alignment.bottomRight,
+                    colors: [
+                      gameColor.withValues(alpha: 0.08),
+                      gameColor.withValues(alpha: 0.02),
+                      Colors.transparent,
+                    ],
+                    stops: const [0.0, 0.5, 1.0],
+                  ),
+                ),
+              ),
+            ),
+
+            // Content
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  // Title
+                  Text(
+                    title,
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 1,
+                    softWrap: false,
+                    style: const TextStyle(
+                      fontWeight: FontWeight.bold,
+                      fontSize: 18,
+                    ),
+                  ),
+
+                  // Badge
+                  if (badgeText != null) ...[
+                    const SizedBox(height: 5),
+                    Container(
+                      constraints: const BoxConstraints(maxWidth: 250),
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 2,
+                        horizontal: 6,
+                      ),
+                      decoration: BoxDecoration(
+                        color: gameColor,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                      child: Text(
+                        badgeText!,
+                        overflow: TextOverflow.ellipsis,
+                        maxLines: 1,
+                        softWrap: false,
+                        style: TextStyle(
+                          color: badgeTextColor,
+                          fontSize: 12,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                  ],
+
+                  // Description
+                  if (description.isNotEmpty) ...[
+                    const SizedBox(height: 10),
+                    Text(description, style: const TextStyle(fontSize: 14)),
+                    const SizedBox(height: 2.5),
+                  ],
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/match_tile.dart

@@ -7,6 +7,7 @@ import 'package:tallee/core/custom_theme.dart';
 import 'package:tallee/core/enums.dart';
 import 'package:tallee/data/models/match.dart';
 import 'package:tallee/l10n/generated/app_localizations.dart';
+import 'package:tallee/presentation/widgets/game_label.dart';
 import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart';
 
 class MatchTile extends StatefulWidget {
@@ -116,56 +117,13 @@ class _MatchTileState extends State<MatchTile> {
 
             // Game + Ruleset Badge
             if (!widget.compact)
-              IntrinsicHeight(
-                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    // Game
-                    Container(
-                      decoration: BoxDecoration(
-                        color: CustomTheme.primaryColor.withAlpha(230),
-                        borderRadius: const BorderRadius.only(
-                          topLeft: Radius.circular(8),
-                          bottomLeft: Radius.circular(8),
-                        ),
-                      ),
-                      padding: const EdgeInsets.symmetric(
-                        vertical: 4,
-                        horizontal: 8,
-                      ),
-                      child: Text(
-                        match.game.name,
-                        style: const TextStyle(
-                          fontSize: 12,
-                          color: Colors.white,
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
-                    ),
-                    // Ruleset
-                    Container(
-                      decoration: BoxDecoration(
-                        color: CustomTheme.primaryColor.withAlpha(140),
-                        borderRadius: const BorderRadius.only(
-                          topRight: Radius.circular(8),
-                          bottomRight: Radius.circular(8),
-                        ),
-                      ),
-                      padding: const EdgeInsets.symmetric(
-                        vertical: 4,
-                        horizontal: 8,
-                      ),
-                      child: Text(
-                        translateRulesetToString(match.game.ruleset, context),
-                        style: const TextStyle(
-                          fontSize: 12,
-                          color: Colors.white,
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
-                    ),
-                  ],
+              GameLabel(
+                title: match.game.name,
+                description: translateRulesetToString(
+                  match.game.ruleset,
+                  context,
                 ),
+                color: match.game.color,
               ),
 
             const SizedBox(height: 12),

lib/presentation/widgets/tiles/title_description_list_tile.dart

@@ -2,21 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:tallee/core/custom_theme.dart';
 
 class TitleDescriptionListTile extends StatelessWidget {
-  /// A list tile widget that displays a title and description, with optional highlighting and badge.
+  /// A list tile widget that displays a title and description
   /// - [title]: The title text displayed on the tile.
   /// - [description]: The description text displayed below the title.
-  /// - [onPressed]: The callback invoked when the tile is tapped.
+  /// - [onTap]: The callback invoked when the tile is tapped.
   /// - [isHighlighted]: A boolean to determine if the tile should be highlighted.
-  /// - [badgeText]: Optional text to display in a badge on the right side of the title.
-  /// - [badgeColor]: Optional color for the badge background.
   const TitleDescriptionListTile({
     super.key,
     required this.title,
     required this.description,
-    this.onPressed,
+    this.onTap,
     this.isHighlighted = false,
-    this.badgeText,
-    this.badgeColor,
   });
 
   /// The title text displayed on the tile.
@@ -26,21 +22,15 @@ class TitleDescriptionListTile extends StatelessWidget {
   final String description;
 
   /// The callback invoked when the tile is tapped.
-  final VoidCallback? onPressed;
+  final VoidCallback? onTap;
 
   /// A boolean to determine if the tile should be highlighted.
   final bool isHighlighted;
 
-  /// Optional text to display in a badge on the right side of the title.
-  final String? badgeText;
-
-  /// Optional color for the badge background.
-  final Color? badgeColor;
-
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: onPressed,
+      onTap: onTap,
       child: AnimatedContainer(
         margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
         padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
@@ -51,53 +41,26 @@ class TitleDescriptionListTile extends StatelessWidget {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
           children: [
-            Row(
-              mainAxisAlignment: MainAxisAlignment.start,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                SizedBox(
-                  width: 230,
-                  child: Text(
-                    title,
-                    overflow: TextOverflow.ellipsis,
-                    maxLines: 1,
-                    softWrap: false,
-                    style: const TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 18,
-                    ),
-                  ),
+            // Title
+            SizedBox(
+              width: 230,
+              child: Text(
+                title,
+                overflow: TextOverflow.ellipsis,
+                maxLines: 1,
+                softWrap: false,
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 18,
                 ),
-                if (badgeText != null) ...[
-                  const Spacer(),
-                  Container(
-                    constraints: const BoxConstraints(maxWidth: 115),
-                    padding: const EdgeInsets.symmetric(
-                      vertical: 2,
-                      horizontal: 6,
-                    ),
-                    decoration: BoxDecoration(
-                      color: badgeColor ?? CustomTheme.primaryColor,
-                      borderRadius: BorderRadius.circular(4),
-                    ),
-                    child: Text(
-                      badgeText!,
-                      overflow: TextOverflow.ellipsis,
-                      maxLines: 1,
-                      softWrap: false,
-                      style: const TextStyle(
-                        color: Colors.white,
-                        fontSize: 12,
-                        fontWeight: FontWeight.bold,
-                      ),
-                    ),
-                  ),
-                ],
-              ],
+              ),
             ),
+
+            // Description
             if (description.isNotEmpty) ...[
-              const SizedBox(height: 5),
+              const SizedBox(height: 10),
               Text(description, style: const TextStyle(fontSize: 14)),
               const SizedBox(height: 2.5),
             ],