feat(headlines-feed): add scrollable fade effect to saved filters bar on web

- Implement scroll detection and conditional fade rendering
- Use ShaderMask with LinearGradient to create fade effect
- Add ScrollController and listen for scroll events to trigger updates
- Optimize for web platform by checking kIsWeb

Author: fulleni

lib/headlines-feed/widgets/saved_filters_bar.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/ads/models/ad_theme_style.dart';
@@ -13,11 +14,29 @@ import 'package:ui_kit/ui_kit.dart';
 /// This widget allows users to quickly switch between their saved filters,
 /// an "All" filter, and a "Custom" filter state. It also provides an entry
 /// point to the main filter page.
+///
+/// On the web, it includes a fade effect at the edges to indicate that the
+/// list is scrollable.
 /// {@endtemplate}
-class SavedFiltersBar extends StatelessWidget {
+class SavedFiltersBar extends StatefulWidget {
   /// {@macro saved_filters_bar}
   const SavedFiltersBar({super.key});
 
+  @override
+  State<SavedFiltersBar> createState() => _SavedFiltersBarState();
+}
+
+class _SavedFiltersBarState extends State<SavedFiltersBar> {
+  final _scrollController = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    // Add a listener to rebuild the widget when scrolling occurs,
+    // which is necessary to update the ShaderMask's gradient.
+    _scrollController.addListener(() => setState(() {}));
+  }
+
   static const _allFilterId = 'all';
   static const _customFilterId = 'custom';
 
@@ -32,14 +51,11 @@ class SavedFiltersBar extends StatelessWidget {
         builder: (context, state) {
           final savedFilters = state.savedFilters;
           final activeFilterId = state.activeFilterId;
-
-          return ListView(
+          final listView = ListView(
+            controller: _scrollController,
             scrollDirection: Axis.horizontal,
-            // Padding is now handled by the parent widget in the page view
-            // to ensure consistent layout constraints.
             padding: EdgeInsets.zero,
             children: [
-              // Button to open the filter page
               IconButton(
                 icon: const Icon(Icons.filter_list),
                 tooltip: l10n.savedFiltersBarOpenTooltip,
@@ -50,8 +66,6 @@ class SavedFiltersBar extends StatelessWidget {
                 indent: AppSpacing.md,
                 endIndent: AppSpacing.md,
               ),
-
-              // "All" filter chip
               Padding(
                 padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
                 child: ChoiceChip(
@@ -67,8 +81,6 @@ class SavedFiltersBar extends StatelessWidget {
                   },
                 ),
               ),
-
-              // Saved filter chips
               ...savedFilters.map(
                 (filter) => Padding(
                   padding: const EdgeInsets.symmetric(
@@ -89,17 +101,13 @@ class SavedFiltersBar extends StatelessWidget {
                   ),
                 ),
               ),
-
-              // "Custom" filter chip (conditionally rendered)
               if (activeFilterId == _customFilterId)
                 Padding(
                   padding: const EdgeInsets.symmetric(
                     horizontal: AppSpacing.xs,
                   ),
                   child: ChoiceChip(
                     label: Text(l10n.savedFiltersBarCustomLabel),
-                    // Always selected when visible, but disabled to prevent
-                    // user interaction. It's a status indicator.
                     showCheckmark: false,
                     selected: true,
                     onSelected: null,
@@ -111,8 +119,61 @@ class SavedFiltersBar extends StatelessWidget {
                 ),
             ],
           );
+
+          // Determine if the fade should be shown based on scroll position.
+          var showStartFade = false;
+          var showEndFade = false;
+          if (_scrollController.hasClients &&
+              _scrollController.position.maxScrollExtent > 0) {
+            final pixels = _scrollController.position.pixels;
+            final minScroll = _scrollController.position.minScrollExtent;
+            final maxScroll = _scrollController.position.maxScrollExtent;
+
+            // Show start fade if not at the beginning.
+            if (pixels > minScroll) {
+              showStartFade = true;
+            }
+            // Show end fade if not at the end.
+            if (pixels < maxScroll) {
+              showEndFade = true;
+            }
+          }
+
+          // Define the gradient colors and stops based on fade visibility.
+          final colors = <Color>[
+            if (showStartFade) Colors.transparent,
+            Colors.black,
+            Colors.black,
+            if (showEndFade) Colors.transparent,
+          ];
+
+          final stops = <double>[
+            if (showStartFade) 0.0,
+            if (showStartFade) 0.05 else 0.0,
+            if (showEndFade) 0.95 else 1.0,
+            if (showEndFade) 1.0,
+          ];
+
+          return ShaderMask(
+            shaderCallback: (bounds) {
+              return LinearGradient(
+                begin: Alignment.centerLeft,
+                end: Alignment.centerRight,
+                colors: colors,
+                stops: stops,
+              ).createShader(bounds);
+            },
+            blendMode: BlendMode.dstIn,
+            child: listView,
+          );
         },
       ),
     );
   }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
 }