refactor(app_configuration): replace SegmentedButton with TabBar for role selection

- Add TabController and TabBar to replace SegmentedButton for selecting user roles
- Implement TabBarView to display role-specific fields
- Adjust layout and spacing for improved usability
- Update dispose method to include TabController disposal

Author: fulleni

lib/app_configuration/widgets/feed_decorator_form.dart

@@ -31,14 +31,16 @@ class FeedDecoratorForm extends StatefulWidget {
   State<FeedDecoratorForm> createState() => _FeedDecoratorFormState();
 }
 
-class _FeedDecoratorFormState extends State<FeedDecoratorForm> {
-  AppUserRole _selectedUserRole = AppUserRole.guestUser;
+class _FeedDecoratorFormState extends State<FeedDecoratorForm>
+    with SingleTickerProviderStateMixin {
+  late TabController _tabController;
   late final TextEditingController _itemsToDisplayController;
   late final Map<AppUserRole, TextEditingController> _roleControllers;
 
   @override
   void initState() {
     super.initState();
+    _tabController = TabController(length: AppUserRole.values.length, vsync: this);
     _initializeControllers();
   }
 
@@ -54,30 +56,23 @@ class _FeedDecoratorFormState extends State<FeedDecoratorForm> {
   void _initializeControllers() {
     final decoratorConfig =
         widget.remoteConfig.feedDecoratorConfig[widget.decoratorType]!;
-    _itemsToDisplayController =
-        TextEditingController(
-            text: decoratorConfig.itemsToDisplay?.toString() ?? '',
-          )
-          ..selection = TextSelection.collapsed(
-            offset: decoratorConfig.itemsToDisplay?.toString().length ?? 0,
-          );
+    _itemsToDisplayController = TextEditingController(
+      text: decoratorConfig.itemsToDisplay?.toString() ?? '',
+    )..selection = TextSelection.collapsed(
+        offset: decoratorConfig.itemsToDisplay?.toString().length ?? 0,
+      );
 
     _roleControllers = {
       for (final role in AppUserRole.values)
-        role:
-            TextEditingController(
-                text:
-                    decoratorConfig.visibleTo[role]?.daysBetweenViews
-                        .toString() ??
-                    '',
-              )
-              ..selection = TextSelection.collapsed(
-                offset:
-                    decoratorConfig.visibleTo[role]?.daysBetweenViews
-                        .toString()
-                        .length ??
-                    0,
-              ),
+        role: TextEditingController(
+          text: decoratorConfig.visibleTo[role]?.daysBetweenViews.toString() ??
+              '',
+        )..selection = TextSelection.collapsed(
+            offset: decoratorConfig.visibleTo[role]?.daysBetweenViews
+                    .toString()
+                    .length ??
+                0,
+          ),
     };
   }
 
@@ -106,6 +101,7 @@ class _FeedDecoratorFormState extends State<FeedDecoratorForm> {
 
   @override
   void dispose() {
+    _tabController.dispose();
     _itemsToDisplayController.dispose();
     for (final controller in _roleControllers.values) {
       controller.dispose();
@@ -120,6 +116,7 @@ class _FeedDecoratorFormState extends State<FeedDecoratorForm> {
         widget.remoteConfig.feedDecoratorConfig[widget.decoratorType]!;
 
     return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         SwitchListTile(
           title: Text(l10n.enabledLabel),
@@ -159,37 +156,39 @@ class _FeedDecoratorFormState extends State<FeedDecoratorForm> {
             controller: _itemsToDisplayController,
           ),
         const SizedBox(height: AppSpacing.lg),
+        // Replaced SegmentedButton with TabBar for role selection
         Align(
           alignment: AlignmentDirectional.centerStart,
-          child: SegmentedButton<AppUserRole>(
-            style: SegmentedButton.styleFrom(
-              shape: const RoundedRectangleBorder(
-                borderRadius: BorderRadius.zero,
-              ),
+          child: SizedBox(
+            height: kTextTabBarHeight,
+            child: TabBar(
+              controller: _tabController,
+              tabAlignment: TabAlignment.start,
+              isScrollable: true,
+              tabs: AppUserRole.values
+                  .map((role) => Tab(text: role.l10n(context)))
+                  .toList(),
             ),
-            segments: AppUserRole.values
+          ),
+        ),
+        const SizedBox(height: AppSpacing.lg),
+        // TabBarView to display role-specific fields
+        SizedBox(
+          height: 250, // Fixed height for TabBarView within a ListView
+          child: TabBarView(
+            controller: _tabController,
+            children: AppUserRole.values
                 .map(
-                  (role) => ButtonSegment<AppUserRole>(
-                    value: role,
-                    label: Text(role.l10n(context)),
+                  (role) => _buildRoleSpecificFields(
+                    context,
+                    l10n,
+                    role,
+                    decoratorConfig,
                   ),
                 )
                 .toList(),
-            selected: {_selectedUserRole},
-            onSelectionChanged: (newSelection) {
-              setState(() {
-                _selectedUserRole = newSelection.first;
-              });
-            },
           ),
         ),
-        const SizedBox(height: AppSpacing.lg),
-        _buildRoleSpecificFields(
-          context,
-          l10n,
-          _selectedUserRole,
-          decoratorConfig,
-        ),
       ],
     );
   }