moved input widgets to new folder

lib/presentation/views/main_menu/create_game/choose_ruleset_view.dart

@@ -27,18 +27,61 @@ class _ChooseRulesetViewState extends State<ChooseRulesetView> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return DefaultTabController(
+      length: 2,
+      initialIndex: 0,
+      child: Scaffold(
         backgroundColor: CustomTheme.backgroundColor,
         appBar: AppBar(
           backgroundColor: CustomTheme.backgroundColor,
           scrolledUnderElevation: 0,
           title: const Text(
-          'Choose Group',
+            'Choose Gametype',
             style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
           ),
           centerTitle: true,
         ),
-      body: ListView.builder(
+        body: Column(
+          children: [
+            Container(
+              color: CustomTheme.backgroundColor,
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+              child: TabBar(
+                padding: const EdgeInsets.symmetric(horizontal: 5),
+                // Label Settings
+                labelStyle: const TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                ),
+                labelColor: Colors.white,
+                unselectedLabelStyle: const TextStyle(fontSize: 14),
+                unselectedLabelColor: Colors.white70,
+                // Indicator Settings
+                indicator: CustomTheme.standardBoxDecoration,
+                indicatorSize: TabBarIndicatorSize.tab,
+                indicatorWeight: 1,
+                indicatorPadding: const EdgeInsets.symmetric(
+                  horizontal: 20,
+                  vertical: 0,
+                ),
+                // Divider Settings
+                dividerHeight: 0,
+                tabs: const [
+                  Tab(text: 'Rulesets'),
+                  Tab(text: 'Gametypes'),
+                ],
+              ),
+            ),
+            const Divider(
+              indent: 30,
+              endIndent: 30,
+              thickness: 3,
+              radius: BorderRadius.all(Radius.circular(12)),
+            ),
+            Expanded(
+              child: TabBarView(
+                children: [
+                  ListView.builder(
                     padding: const EdgeInsets.only(bottom: 85),
                     itemCount: widget.rulesets.length,
                     itemBuilder: (BuildContext context, int index) {
@@ -47,10 +90,11 @@ class _ChooseRulesetViewState extends State<ChooseRulesetView> {
                           setState(() {
                             selectedRulesetIndex = index;
                           });
-
                           Future.delayed(const Duration(milliseconds: 500), () {
                             if (!context.mounted) return;
-                Navigator.of(context).pop(widget.rulesets[index].$1);
+                            Navigator.of(
+                              context,
+                            ).pop(widget.rulesets[index].$1);
                           });
                         },
                         title: widget.rulesets[index].$2,
@@ -59,6 +103,18 @@ class _ChooseRulesetViewState extends State<ChooseRulesetView> {
                       );
                     },
                   ),
+                  const Center(
+                    child: Text(
+                      'No gametypes available',
+                      style: TextStyle(color: Colors.white70),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
     );
   }
 }

lib/presentation/views/main_menu/create_game/create_game_view.dart

@@ -4,12 +4,12 @@ import 'package:game_tracker/core/enums.dart';
 import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/dto/game.dart';
 import 'package:game_tracker/data/dto/group.dart';
-import 'package:game_tracker/data/dto/player.dart';
 import 'package:game_tracker/presentation/views/main_menu/create_game/choose_group_view.dart';
 import 'package:game_tracker/presentation/views/main_menu/create_game/choose_ruleset_view.dart';
 import 'package:game_tracker/presentation/widgets/buttons/custom_width_button.dart';
-import 'package:game_tracker/presentation/widgets/text_input_field.dart';
+import 'package:game_tracker/presentation/widgets/text_input/text_input_field.dart';
 import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class CreateGameView extends StatefulWidget {
   const CreateGameView({super.key});
@@ -19,19 +19,31 @@ class CreateGameView extends StatefulWidget {
 }
 
 class _CreateGameViewState extends State<CreateGameView> {
-  final TextEditingController _gameNameController = TextEditingController();
   late final AppDatabase db;
   late Future<List<Group>> _allGroupsFuture;
+  final TextEditingController _gameNameController = TextEditingController();
 
+  /// List of all groups from the database
   late final List<Group> groupsList;
 
+  /// The currently selected group
   Group? selectedGroup;
+
+  /// The index of the currently selected group in [groupsList] to mark it in
+  /// the [ChooseGroupView]
   int selectedGroupIndex = -1;
+
+  /// The currently selected ruleset
   Ruleset? selectedRuleset;
+
+  /// The index of the currently selected ruleset in [rulesets] to mark it in
+  /// the [ChooseRulesetView]
   int selectedRulesetIndex = -1;
 
   bool isLoading = true;
 
+  /// List of available rulesets with their display names and descriptions
+  /// as tuples of (Ruleset, String, String)
   List<(Ruleset, String, String)> rulesets = [
     (
       Ruleset.singleWinner,
@@ -55,24 +67,15 @@ class _CreateGameViewState extends State<CreateGameView> {
     ),
   ];
 
-  late final List<Player> skeletonData = List.filled(
-    7,
-    Player(name: 'Player 0'),
-  );
-
   @override
   void initState() {
     super.initState();
     db = Provider.of<AppDatabase>(context, listen: false);
 
-    _gameNameController.addListener(() {
-      setState(() {});
-    });
-
     _allGroupsFuture = db.groupDao.getAllGroups();
 
     Future.wait([_allGroupsFuture]).then((result) async {
-      await Future.delayed(const Duration(milliseconds: 1000));
+      await Future.delayed(const Duration(milliseconds: 250));
       groupsList = result[0];
 
       if (mounted) {
@@ -97,11 +100,29 @@ class _CreateGameViewState extends State<CreateGameView> {
         centerTitle: true,
       ),
       body: SafeArea(
+        child: Skeletonizer(
+          effect: PulseEffect(
+            from: Colors.grey[800]!,
+            to: Colors.grey[600]!,
+            duration: const Duration(milliseconds: 800),
+          ),
+          enabled: isLoading,
+          enableSwitchAnimation: true,
+          switchAnimationConfig: const SwitchAnimationConfig(
+            duration: Duration(milliseconds: 200),
+            switchInCurve: Curves.linear,
+            switchOutCurve: Curves.linear,
+            transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
+            layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
+          ),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.start,
             children: [
               Container(
-              margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+                margin: const EdgeInsets.symmetric(
+                  horizontal: 12,
+                  vertical: 10,
+                ),
                 child: TextInputField(
                   controller: _gameNameController,
                   hintText: 'Game name',
@@ -110,6 +131,7 @@ class _CreateGameViewState extends State<CreateGameView> {
                   },
                 ),
               ),
+
               GestureDetector(
                 onTap: () async {
                   selectedRuleset = await Navigator.of(context).push(
@@ -128,7 +150,7 @@ class _CreateGameViewState extends State<CreateGameView> {
                 child: Container(
                   margin: const EdgeInsets.symmetric(
                     horizontal: 12,
-                  vertical: 10,
+                    vertical: 5,
                   ),
                   padding: const EdgeInsets.symmetric(
                     vertical: 10,
@@ -145,7 +167,11 @@ class _CreateGameViewState extends State<CreateGameView> {
                         ),
                       ),
                       const Spacer(),
-                    Text(selectedRuleset == null ? 'None' : 'Single Winner'),
+                      Text(
+                        selectedRuleset == null
+                            ? 'None'
+                            : translateRulesetToString(selectedRuleset!),
+                      ),
                       const SizedBox(width: 10),
                       const Icon(Icons.arrow_forward_ios, size: 16),
                     ],
@@ -170,7 +196,7 @@ class _CreateGameViewState extends State<CreateGameView> {
                 child: Container(
                   margin: const EdgeInsets.symmetric(
                     horizontal: 12,
-                  vertical: 10,
+                    vertical: 5,
                   ),
                   padding: const EdgeInsets.symmetric(
                     vertical: 10,
@@ -187,13 +213,23 @@ class _CreateGameViewState extends State<CreateGameView> {
                         ),
                       ),
                       const Spacer(),
-                    Text(selectedGroup == null ? 'None' : selectedGroup!.name),
+                      Text(
+                        selectedGroup == null ? 'None' : selectedGroup!.name,
+                      ),
                       const SizedBox(width: 10),
                       const Icon(Icons.arrow_forward_ios, size: 16),
                     ],
                   ),
                 ),
               ),
+              Container(
+                decoration: CustomTheme.standardBoxDecoration,
+                width: MediaQuery.of(context).size.width * 0.95,
+                height: 400,
+                padding: const EdgeInsets.all(12),
+                margin: const EdgeInsets.symmetric(vertical: 10),
+                child: const Center(child: Text('PlayerComponent')),
+              ),
               const Spacer(),
               CustomWidthButton(
                 text: 'Create game',
@@ -210,13 +246,30 @@ class _CreateGameViewState extends State<CreateGameView> {
                           createdAt: DateTime.now(),
                           group: selectedGroup!,
                         );
-                      print('Creating game: ${game.name}');
+                        // TODO: Replace with navigation to GameResultView()
+                        print('Created game: $game');
+                        Navigator.pop(context);
                       },
               ),
               const SizedBox(height: 20),
             ],
           ),
         ),
+      ),
     );
   }
+
+  /// Translates a [Ruleset] enum value to its corresponding string representation.
+  String translateRulesetToString(Ruleset ruleset) {
+    switch (ruleset) {
+      case Ruleset.singleWinner:
+        return 'Single Winner';
+      case Ruleset.singleLoser:
+        return 'Single Loser';
+      case Ruleset.mostPoints:
+        return 'Most Points';
+      case Ruleset.lastPoints:
+        return 'Least Points';
+    }
+  }
 }

lib/presentation/views/main_menu/create_group_view.dart

@@ -5,8 +5,8 @@ import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/dto/group.dart';
 import 'package:game_tracker/data/dto/player.dart';
 import 'package:game_tracker/presentation/widgets/buttons/custom_width_button.dart';
-import 'package:game_tracker/presentation/widgets/custom_search_bar.dart';
+import 'package:game_tracker/presentation/widgets/text_input/custom_search_bar.dart';
-import 'package:game_tracker/presentation/widgets/text_input_field.dart';
+import 'package:game_tracker/presentation/widgets/text_input/text_input_field.dart';
 import 'package:game_tracker/presentation/widgets/tiles/text_icon_list_tile.dart';
 import 'package:game_tracker/presentation/widgets/tiles/text_icon_tile.dart';
 import 'package:game_tracker/presentation/widgets/top_centered_message.dart';

lib/presentation/widgets/tiles/ruleset_list_tile.dart

@@ -17,7 +17,6 @@ class RulesetListTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // Use the callback directly so a null onPressed disables taps
     return GestureDetector(
       onTap: onPressed,
       child: AnimatedContainer(