feat(app_configuration): implement role-based in-article ad slot visibility

- Add TabBar for selecting user roles
- Implement role-specific configuration fields for in-article ad slots
- Use CheckboxListTile to enable/disable ad slots per role
- Update state management with TabController
- Refactor UI layout for better readability

Author: fulleni

lib/app_configuration/widgets/article_ad_settings_form.dart

@@ -1,8 +1,10 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_news_app_web_dashboard_full_source_code/l10n/app_localizations.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/l10n/l10n.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/shared/extensions/banner_ad_shape_l10n.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/shared/extensions/in_article_ad_slot_type_l10n.dart';
+import 'package:flutter_news_app_web_dashboard_full_source_code/shared/extensions/app_user_role_l10n.dart';
 import 'package:ui_kit/ui_kit.dart';
 
 /// {@template article_ad_settings_form}
@@ -28,14 +30,28 @@ class ArticleAdSettingsForm extends StatefulWidget {
 
 class _ArticleAdSettingsFormState extends State<ArticleAdSettingsForm>
     with SingleTickerProviderStateMixin {
+  late TabController _tabController;
+
   @override
   void initState() {
     super.initState();
+    _tabController = TabController(
+      length: AppUserRole.values.length,
+      vsync: this,
+    );
   }
 
   @override
   void didUpdateWidget(covariant ArticleAdSettingsForm oldWidget) {
     super.didUpdateWidget(oldWidget);
+    // No specific controller updates needed here as the UI rebuilds based on
+    // the remoteConfig directly.
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
   }
 
   @override
@@ -134,34 +150,92 @@ class _ArticleAdSettingsFormState extends State<ArticleAdSettingsForm>
               textAlign: TextAlign.start,
             ),
             const SizedBox(height: AppSpacing.lg),
-            ...articleAdConfig.inArticleAdSlotConfigurations.map(
-              (slotConfig) => SwitchListTile(
-                title: Text(slotConfig.slotType.l10n(context)),
-                value: slotConfig.enabled,
-                onChanged: (value) {
-                  final updatedSlots = articleAdConfig
-                      .inArticleAdSlotConfigurations
-                      .map(
-                        (e) => e.slotType == slotConfig.slotType
-                            ? e.copyWith(enabled: value)
-                            : e,
-                      )
-                      .toList();
-                  widget.onConfigChanged(
-                    widget.remoteConfig.copyWith(
-                      adConfig: adConfig.copyWith(
-                        articleAdConfiguration: articleAdConfig.copyWith(
-                          inArticleAdSlotConfigurations: updatedSlots,
-                        ),
+            Align(
+              alignment: AlignmentDirectional.centerStart,
+              child: SizedBox(
+                height: kTextTabBarHeight,
+                child: TabBar(
+                  controller: _tabController,
+                  tabAlignment: TabAlignment.start,
+                  isScrollable: true,
+                  tabs: AppUserRole.values
+                      .map((role) => Tab(text: role.l10n(context)))
+                      .toList(),
+                ),
+              ),
+            ),
+            const SizedBox(height: AppSpacing.lg),
+            SizedBox(
+              height: 250,
+              child: TabBarView(
+                controller: _tabController,
+                children: AppUserRole.values
+                    .map(
+                      (role) => _buildRoleSpecificFields(
+                        context,
+                        l10n,
+                        role,
+                        articleAdConfig,
                       ),
-                    ),
-                  );
-                },
+                    )
+                    .toList(),
               ),
             ),
           ],
         ),
       ],
     );
   }
+
+  /// Builds role-specific configuration fields for in-article ad slots.
+  ///
+  /// This widget displays checkboxes for each [InArticleAdSlotType] for a
+  /// given [AppUserRole], allowing to enable/disable specific ad slots.
+  Widget _buildRoleSpecificFields(
+    BuildContext context,
+    AppLocalizations l10n,
+    AppUserRole role,
+    ArticleAdConfiguration config,
+  ) {
+    final roleSlots = config.visibleTo[role];
+    final isEnabled = role != AppUserRole.premiumUser;
+
+    return Column(
+      children: [
+        // Checkbox for each InArticleAdSlotType
+        for (final slotType in InArticleAdSlotType.values)
+          CheckboxListTile(
+            title: Text(slotType.l10n(context)),
+            value: (roleSlots != null && roleSlots[slotType] == true) &&
+                isEnabled,
+            onChanged: isEnabled
+                ? (value) {
+                    final newRoleSlots =
+                        Map<InArticleAdSlotType, bool>.from(roleSlots ?? {});
+                    if (value ?? false) {
+                      newRoleSlots[slotType] = true;
+                    } else {
+                      newRoleSlots.remove(slotType);
+                    }
+
+                    final newVisibleTo =
+                        Map<AppUserRole, Map<InArticleAdSlotType, bool>>.from(
+                      config.visibleTo,
+                    )..[role] = newRoleSlots;
+
+                    widget.onConfigChanged(
+                      widget.remoteConfig.copyWith(
+                        adConfig: widget.remoteConfig.adConfig.copyWith(
+                          articleAdConfiguration: config.copyWith(
+                            visibleTo: newVisibleTo,
+                          ),
+                        ),
+                      ),
+                    );
+                  }
+                : null,
+          ),
+      ],
+    );
+  }
 }