From 3d510d5b3d5ea1efccdc40030da73a839adeeb67 Mon Sep 17 00:00:00 2001
From: Felix Kirchner <felix.kirchner.fk@gmail.com>
Date: Fri, 9 Jan 2026 20:04:10 +0100
Subject: [PATCH] Implemented compact mode for match tiles

---
 .../views/main_menu/home_view.dart            |  2 +
 .../widgets/tiles/match_tile.dart             | 63 ++++++++++++++++++-
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/lib/presentation/views/main_menu/home_view.dart b/lib/presentation/views/main_menu/home_view.dart
index 0761f08..6599b98 100644
--- a/lib/presentation/views/main_menu/home_view.dart
+++ b/lib/presentation/views/main_menu/home_view.dart
@@ -89,6 +89,7 @@ class _HomeViewState extends State<HomeView> {
                 Padding(
                   padding: const EdgeInsets.only(top: 8.0),
                   child: MatchTile(
+                    compact: true,
                     width: constraints.maxWidth * 0.95,
                     match: recentMatches[0],
                     onTap: () {
@@ -105,6 +106,7 @@ class _HomeViewState extends State<HomeView> {
                 Padding(
                   padding: const EdgeInsets.only(top: 8.0),
                   child: MatchTile(
+                    compact: true,
                     width: constraints.maxWidth * 0.95,
                     match: recentMatches[1],
                     onTap: () {
diff --git a/lib/presentation/widgets/tiles/match_tile.dart b/lib/presentation/widgets/tiles/match_tile.dart
index 21e24c0..59ee0b9 100644
--- a/lib/presentation/widgets/tiles/match_tile.dart
+++ b/lib/presentation/widgets/tiles/match_tile.dart
@@ -10,12 +10,15 @@ import 'package:intl/intl.dart';
 /// creation date, associated group, winner, and players.
 /// - [match]: The match data to be displayed.
 /// - [onTap]: The callback invoked when the tile is tapped.
+/// - [width]: Optional width for the tile.
+/// - [compact]: Whether to display the tile in a compact mode
 class MatchTile extends StatefulWidget {
   const MatchTile({
     super.key,
     required this.match,
     required this.onTap,
     this.width,
+    this.compact = false,
   });
 
   /// The match data to be displayed.
@@ -24,8 +27,12 @@ class MatchTile extends StatefulWidget {
   /// The callback invoked when the tile is tapped.
   final VoidCallback onTap;
 
+  /// Optional width for the tile.
   final double? width;
 
+  /// Whether to display the tile in a compact mode
+  final bool compact;
+
   @override
   State<MatchTile> createState() => _MatchTileState();
 }
@@ -88,7 +95,22 @@ class _MatchTileState extends State<MatchTile> {
                   const SizedBox(width: 6),
                   Expanded(
                     child: Text(
-                      group.name,
+                      '${group.name}${widget.match.players != null ? ' + ${widget.match.players?.length}' : ''}',
+                      style: const TextStyle(fontSize: 14, color: Colors.grey),
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 12),
+            ] else if (widget.compact) ...[
+              Row(
+                children: [
+                  const Icon(Icons.person, size: 16, color: Colors.grey),
+                  const SizedBox(width: 6),
+                  Expanded(
+                    child: Text(
+                      '${widget.match.players!.length} ${loc.players}',
                       style: const TextStyle(fontSize: 14, color: Colors.grey),
                       overflow: TextOverflow.ellipsis,
                     ),
@@ -135,9 +157,46 @@ class _MatchTileState extends State<MatchTile> {
                 ),
               ),
               const SizedBox(height: 12),
+            ] else ...[
+              Container(
+                padding: const EdgeInsets.symmetric(
+                  vertical: 8,
+                  horizontal: 12,
+                ),
+                decoration: BoxDecoration(
+                  color: Colors.amber.withValues(alpha: 0.1),
+                  borderRadius: BorderRadius.circular(8),
+                  border: Border.all(
+                    color: Colors.amber.withValues(alpha: 0.3),
+                    width: 1,
+                  ),
+                ),
+                child: Row(
+                  children: [
+                    const Icon(
+                      Icons.watch_later,
+                      size: 20,
+                      color: Colors.amber,
+                    ),
+                    const SizedBox(width: 8),
+                    Expanded(
+                      child: Text(
+                        loc.match_in_progress,
+                        style: const TextStyle(
+                          fontSize: 14,
+                          fontWeight: FontWeight.w600,
+                          color: CustomTheme.textColor,
+                        ),
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 12),
             ],
 
-            if (_allPlayers.isNotEmpty) ...[
+            if (_allPlayers.isNotEmpty && widget.compact == false) ...[
               Text(
                 loc.players,
                 style: const TextStyle(