From 6e86c7dff0d37fb68811f524fc0fa1bc755be871 Mon Sep 17 00:00:00 2001
From: Neeraj Gupta <254676+ua741@users.noreply.github.com>
Date: Wed, 6 Nov 2024 14:25:42 +0530
Subject: [PATCH] [mob] Show people in grid view

---
 .../search/result/search_people_all_page.dart | 19 +++++-------
 .../ui/viewer/search_tab/people_section.dart  | 31 ++++++++++---------
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/mobile/lib/ui/viewer/search/result/search_people_all_page.dart b/mobile/lib/ui/viewer/search/result/search_people_all_page.dart
index 000c696117..cf1ded9212 100644
--- a/mobile/lib/ui/viewer/search/result/search_people_all_page.dart
+++ b/mobile/lib/ui/viewer/search/result/search_people_all_page.dart
@@ -9,6 +9,7 @@ import "package:photos/models/search/search_result.dart";
 import "package:photos/models/search/search_types.dart";
 import "package:photos/ui/common/loading_widget.dart";
 import "package:photos/ui/viewer/search/result/searchable_item.dart";
+import "package:photos/ui/viewer/search_tab/people_section.dart";
 
 class PeopleAllPage extends StatefulWidget {
   final SectionType sectionType;
@@ -61,6 +62,7 @@ class _PeopleAllPageState extends State<PeopleAllPage> {
           ),
         ),
         title: Text(widget.sectionType.sectionTitle(context)),
+        centerTitle: false,
       ),
       body: Expanded(
         child: Padding(
@@ -76,15 +78,15 @@ class _PeopleAllPageState extends State<PeopleAllPage> {
                   );
                 }
                 return GridView.builder(
-                  padding: const EdgeInsets.all(8),
+                  padding: const EdgeInsets.all(0),
                   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                     crossAxisCount: MediaQuery.of(context).size.width > 600
                         ? 4
                         : 3, // Dynamically adjust columns based on screen width
-                    crossAxisSpacing: 10,
-                    mainAxisSpacing: 10,
+                    crossAxisSpacing: 8,
+                    mainAxisSpacing: 0,
                     childAspectRatio:
-                        0.85, // Adjust this value to control item height ratio
+                        0.78, // Adjust this value to control item height ratio
                   ),
                   itemCount: sectionResults.length,
                   physics: const BouncingScrollPhysics(),
@@ -93,13 +95,8 @@ class _PeopleAllPageState extends State<PeopleAllPage> {
                   itemBuilder: (context, index) {
                     Widget resultWidget;
                     if (sectionResults[index] is GenericSearchResult) {
-                      final result =
-                          sectionResults[index] as GenericSearchResult;
-                      resultWidget = SearchableItemWidget(
-                        sectionResults[index],
-                        onResultTap: result.onResultTap != null
-                            ? () => result.onResultTap!(context)
-                            : null,
+                      resultWidget = PeopleRowItem(
+                        searchResult: sectionResults[index],
                       );
                     } else {
                       resultWidget = SearchableItemWidget(
diff --git a/mobile/lib/ui/viewer/search_tab/people_section.dart b/mobile/lib/ui/viewer/search_tab/people_section.dart
index 081673a76a..947cef124e 100644
--- a/mobile/lib/ui/viewer/search_tab/people_section.dart
+++ b/mobile/lib/ui/viewer/search_tab/people_section.dart
@@ -119,7 +119,7 @@ class _PeopleSectionState extends State<PeopleSection> {
                   ],
                 ),
                 const SizedBox(height: 2),
-                SearchExampleRow(_examples, widget.sectionType),
+                PeopleRow(_examples, widget.sectionType),
               ],
             ),
           )
@@ -163,11 +163,11 @@ class _PeopleSectionState extends State<PeopleSection> {
   }
 }
 
-class SearchExampleRow extends StatelessWidget {
+class PeopleRow extends StatelessWidget {
   final SectionType sectionType;
   final List<SearchResult> examples;
 
-  const SearchExampleRow(this.examples, this.sectionType, {super.key});
+  const PeopleRow(this.examples, this.sectionType, {super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -175,7 +175,7 @@ class SearchExampleRow extends StatelessWidget {
     final scrollableExamples = <Widget>[];
     examples.forEachIndexed((index, element) {
       scrollableExamples.add(
-        SearchExample(
+        PeopleRowItem(
           searchResult: examples.elementAt(index),
         ),
       );
@@ -193,9 +193,9 @@ class SearchExampleRow extends StatelessWidget {
   }
 }
 
-class SearchExample extends StatelessWidget {
+class PeopleRowItem extends StatelessWidget {
   final SearchResult searchResult;
-  const SearchExample({required this.searchResult, super.key});
+  const PeopleRowItem({required this.searchResult, super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -204,9 +204,9 @@ class SearchExample extends StatelessWidget {
         int.tryParse(searchResult.name()) != null);
     late final double width;
     if (textScaleFactor <= 1.0) {
-      width = 85.0;
+      width = 120.0;
     } else {
-      width = 85.0 + ((textScaleFactor - 1.0) * 64);
+      width = 120.0 + ((textScaleFactor - 1.0) * 64);
     }
     final heroTag =
         searchResult.heroTag() + (searchResult.previewThumbnail()?.tag ?? "");
@@ -238,19 +238,20 @@ class SearchExample extends StatelessWidget {
       child: SizedBox(
         width: width,
         child: Padding(
-          padding: const EdgeInsets.only(left: 6, right: 6, top: 8),
+          padding: const EdgeInsets.only(left: 4, right: 4, top: 8),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: [
               SizedBox(
-                width: 64,
-                height: 64,
+                width: 100,
+                height: 100,
                 child: searchResult.previewThumbnail() != null
                     ? Hero(
                         tag: heroTag,
                         child: ClipRRect(
-                          borderRadius:
-                              const BorderRadius.all(Radius.elliptical(16, 12)),
+                          borderRadius: const BorderRadius.all(
+                            Radius.elliptical(16, 12),
+                          ),
                           child: searchResult.type() != ResultType.faces
                               ? ThumbnailWidget(
                                   searchResult.previewThumbnail()!,
@@ -285,7 +286,7 @@ class SearchExample extends StatelessWidget {
                         }
                       },
                       child: Padding(
-                        padding: const EdgeInsets.only(top: 10, bottom: 16),
+                        padding: const EdgeInsets.only(top: 10, bottom: 10),
                         child: Text(
                           "Add name",
                           maxLines: 1,
@@ -296,7 +297,7 @@ class SearchExample extends StatelessWidget {
                       ),
                     )
                   : Padding(
-                      padding: const EdgeInsets.only(top: 10, bottom: 16),
+                      padding: const EdgeInsets.only(top: 10, bottom: 10),
                       child: Text(
                         searchResult.name(),
                         maxLines: 2,