From 9983689c74aed86ae824f695d9d4cc61ba4a4360 Mon Sep 17 00:00:00 2001
From: ashilkn <ashilkn99@gmail.com>
Date: Wed, 23 Oct 2024 18:06:09 +0530
Subject: [PATCH] [mob][photos] Fade the left edge of applied filters in appbar
 so that the filters fade away to the left when scrolling

---
 .../hierarchicial_search/applied_filters.dart | 89 ++++++++++++-------
 1 file changed, 55 insertions(+), 34 deletions(-)

diff --git a/mobile/lib/ui/viewer/hierarchicial_search/applied_filters.dart b/mobile/lib/ui/viewer/hierarchicial_search/applied_filters.dart
index 9f17d9de3f..cf5036037e 100644
--- a/mobile/lib/ui/viewer/hierarchicial_search/applied_filters.dart
+++ b/mobile/lib/ui/viewer/hierarchicial_search/applied_filters.dart
@@ -1,6 +1,7 @@
 import "package:flutter/material.dart";
 import "package:photos/models/search/hierarchical/face_filter.dart";
 import "package:photos/models/search/hierarchical/hierarchical_search_filter.dart";
+import "package:photos/theme/ente_theme.dart";
 import "package:photos/ui/viewer/gallery/state/inherited_search_filter_data.dart";
 import "package:photos/ui/viewer/gallery/state/search_filter_data_provider.dart";
 import "package:photos/ui/viewer/hierarchicial_search/filter_chip.dart";
@@ -49,41 +50,61 @@ class _AppliedFiltersState extends State<AppliedFilters> {
 
   @override
   Widget build(BuildContext context) {
-    return ListView.builder(
-      itemBuilder: (context, index) {
-        final filter = _appliedFilters[index];
-        return Padding(
+    return Stack(
+      alignment: Alignment.centerLeft,
+      children: [
+        ListView.builder(
+          itemBuilder: (context, index) {
+            final filter = _appliedFilters[index];
+            return Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 4),
+              child: filter is FaceFilter
+                  ? FaceFilterChip(
+                      personId: filter.personId,
+                      clusterId: filter.clusterId,
+                      faceThumbnailFile: filter.faceFile,
+                      name: filter.name(),
+                      apply: () {
+                        _searchFilterDataProvider.applyFilters([filter]);
+                      },
+                      remove: () {
+                        _searchFilterDataProvider
+                            .removeAppliedFilters([filter]);
+                      },
+                      isApplied: filter.isApplied,
+                    )
+                  : GenericFilterChip(
+                      label: filter.name(),
+                      apply: () {
+                        _searchFilterDataProvider.applyFilters([filter]);
+                      },
+                      remove: () {
+                        _searchFilterDataProvider
+                            .removeAppliedFilters([filter]);
+                      },
+                      leadingIcon: filter.icon(),
+                      isApplied: filter.isApplied,
+                    ),
+            );
+          },
+          scrollDirection: Axis.horizontal,
+          itemCount: _appliedFilters.length,
           padding: const EdgeInsets.symmetric(horizontal: 4),
-          child: filter is FaceFilter
-              ? FaceFilterChip(
-                  personId: filter.personId,
-                  clusterId: filter.clusterId,
-                  faceThumbnailFile: filter.faceFile,
-                  name: filter.name(),
-                  apply: () {
-                    _searchFilterDataProvider.applyFilters([filter]);
-                  },
-                  remove: () {
-                    _searchFilterDataProvider.removeAppliedFilters([filter]);
-                  },
-                  isApplied: filter.isApplied,
-                )
-              : GenericFilterChip(
-                  label: filter.name(),
-                  apply: () {
-                    _searchFilterDataProvider.applyFilters([filter]);
-                  },
-                  remove: () {
-                    _searchFilterDataProvider.removeAppliedFilters([filter]);
-                  },
-                  leadingIcon: filter.icon(),
-                  isApplied: filter.isApplied,
-                ),
-        );
-      },
-      scrollDirection: Axis.horizontal,
-      itemCount: _appliedFilters.length,
-      padding: const EdgeInsets.symmetric(horizontal: 4),
+        ),
+        Container(
+          width: 12,
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              colors: [
+                getEnteColorScheme(context).backdropBase,
+                getEnteColorScheme(context).backdropBase.withOpacity(0),
+              ],
+              begin: Alignment.centerLeft,
+              end: Alignment.centerRight,
+            ),
+          ),
+        ),
+      ],
     );
   }