people collection page

mobile/assets/i18n/en-US.json

@@ -1,6 +1,7 @@
 {
   "collections": "Collections",
   "on_this_device": "On this device",
+  "add_a_name": "Add a name",
   "places": "Places",
   "albums": "Albums",
   "people": "People",

mobile/lib/pages/collections/albums/people_collection.page.dart

@@ -1,19 +0,0 @@
-import 'package:auto_route/auto_route.dart';
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-
-@RoutePage()
-class PeopleCollectionPage extends HookConsumerWidget {
-  const PeopleCollectionPage({super.key});
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('people'),
-      ),
-      body: const Center(
-        child: Text('people'),
-      ),
-    );
-  }
-}

mobile/lib/pages/collections/people/people_collection.page.dart

@@ -0,0 +1,104 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/search/people.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
+
+@RoutePage()
+class PeopleCollectionPage extends HookConsumerWidget {
+  const PeopleCollectionPage({super.key});
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final people = ref.watch(getAllPeopleProvider);
+    final headers = ApiService.getRequestHeaders();
+
+    showNameEditModel(
+      String personId,
+      String personName,
+    ) {
+      return showDialog(
+        context: context,
+        builder: (BuildContext context) {
+          return PersonNameEditForm(personId: personId, personName: personName);
+        },
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('people'.tr()),
+      ),
+      body: people.when(
+        data: (people) {
+          return GridView.builder(
+            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 3,
+              childAspectRatio: 0.85,
+            ),
+            padding: const EdgeInsets.symmetric(vertical: 32),
+            itemCount: people.length,
+            itemBuilder: (context, index) {
+              final person = people[index];
+
+              return Column(
+                children: [
+                  GestureDetector(
+                    onTap: () {
+                      context.pushRoute(
+                        PersonResultRoute(
+                          personId: person.id,
+                          personName: person.name,
+                        ),
+                      );
+                    },
+                    child: Material(
+                      shape: const CircleBorder(side: BorderSide.none),
+                      elevation: 3,
+                      child: CircleAvatar(
+                        maxRadius: 96 / 2,
+                        backgroundImage: NetworkImage(
+                          getFaceThumbnailUrl(person.id),
+                          headers: headers,
+                        ),
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 12),
+                  GestureDetector(
+                    onTap: () => showNameEditModel(person.id, person.name),
+                    child: person.name.isEmpty
+                        ? Text(
+                            'add_a_name'.tr(),
+                            style: context.textTheme.titleSmall?.copyWith(
+                              fontWeight: FontWeight.w500,
+                              color: context.colorScheme.primary,
+                            ),
+                          )
+                        : Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 16.0),
+                            child: Text(
+                              person.name,
+                              overflow: TextOverflow.ellipsis,
+                              style: context.textTheme.titleSmall?.copyWith(
+                                fontWeight: FontWeight.w500,
+                              ),
+                            ),
+                          ),
+                  ),
+                ],
+              );
+            },
+          );
+        },
+        error: (error, stack) => const Text("error"),
+        loading: () => const CircularProgressIndicator(),
+      ),
+    );
+  }
+}

mobile/lib/pages/search/person_result.page.dart

@@ -92,6 +92,7 @@ class PersonResultPage extends HookConsumerWidget {
                   Text(
                     name.value,
                     style: context.textTheme.titleLarge,
+                    overflow: TextOverflow.ellipsis,
                   ),
                 ],
               ),
@@ -125,9 +126,11 @@ class PersonResultPage extends HookConsumerWidget {
                   headers: ApiService.getRequestHeaders(),
                 ),
               ),
-              Padding(
+              Expanded(
-                padding: const EdgeInsets.only(left: 16.0),
+                child: Padding(
-                child: buildTitleBlock(),
+                  padding: const EdgeInsets.only(left: 16.0, right: 16.0),
+                  child: buildTitleBlock(),
+                ),
               ),
             ],
           ),

mobile/lib/routing/router.dart

@@ -15,8 +15,8 @@ import 'package:immich_mobile/pages/backup/backup_options.page.dart';
 import 'package:immich_mobile/pages/backup/failed_backup_status.page.dart';
 import 'package:immich_mobile/pages/collections/albums/albums_collection.page.dart';
 import 'package:immich_mobile/pages/collections/albums/local_albums_collection.page.dart';
-import 'package:immich_mobile/pages/collections/albums/people_collection.page.dart';
+import 'package:immich_mobile/pages/collections/people/people_collection.page.dart';
-import 'package:immich_mobile/pages/collections/albums/places_collection.part.dart';
+import 'package:immich_mobile/pages/collections/places/places_collection.part.dart';
 import 'package:immich_mobile/pages/collections/collections.page.dart';
 import 'package:immich_mobile/pages/common/activities.page.dart';
 import 'package:immich_mobile/pages/common/album_additional_shared_user_selection.page.dart';