[mob][photos] Show face thumbnail and name of face if available in FaceFilterChip

mobile/lib/ui/viewer/hierarchicial_search/applied_filters.dart

@@ -56,6 +56,7 @@ class _AppliedFiltersState extends State<AppliedFilters> {
                   personId: filter.personId,
                   clusterId: filter.clusterId,
                   faceThumbnailFile: EnteFile(),
+                  name: filter.name(),
                 )
               : GenericFilterChip(
                   label: filter.name(),

mobile/lib/ui/viewer/hierarchicial_search/filter_chip.dart

@@ -1,6 +1,7 @@
 import "package:flutter/widgets.dart";
 import "package:photos/models/file/file.dart";
 import "package:photos/theme/ente_theme.dart";
+import "package:photos/ui/viewer/search/result/person_face_widget.dart";
 
 class GenericFilterChip extends StatelessWidget {
   final String label;
@@ -54,16 +55,52 @@ class FaceFilterChip extends StatelessWidget {
   final String? personId;
   final String? clusterId;
   final EnteFile faceThumbnailFile;
+  final String name;
 
   const FaceFilterChip({
     required this.personId,
     required this.clusterId,
     required this.faceThumbnailFile,
+    required this.name,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return Container(
+      decoration: BoxDecoration(
+        color: getEnteColorScheme(context).fillFaint,
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 8.0),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            ClipOval(
+              child: SizedBox(
+                width: 32,
+                height: 32,
+                child: PersonFaceWidget(
+                  faceThumbnailFile,
+                  personId: personId,
+                  clusterID: clusterId,
+                ),
+              ),
+            ),
+            name.isNotEmpty
+                ? Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 4),
+                    child: Text(
+                      name,
+                      style: getEnteTextTheme(context).miniBold,
+                    ),
+                  )
+                : const SizedBox.shrink(),
+          ],
+        ),
+      ),
+    );
   }
 }

mobile/lib/ui/viewer/hierarchicial_search/recommended_filters.dart

@@ -55,6 +55,7 @@ class _RecommendedFiltersState extends State<RecommendedFilters> {
                   personId: filter.personId,
                   clusterId: filter.clusterId,
                   faceThumbnailFile: filter.faceFile,
+                  name: filter.name(),
                 )
               : GenericFilterChip(
                   label: filter.name(),