feat(mobile): Facial recognition (#2507)

* Add API service * Added service, provider * merge main * update pubspec * styling * dev: add person search result page * dev: display person asset on page * dev: add rename form * style form * dev: mechanism to add name to faces * styling * fix bad merge * update api * test * revert * Add header widget * change name * show all people page * fix test * pr feedback * Add name to app bar * feedback * styling
2025-10-29 17:40:28 +00:00 · 2023-06-23 10:44:02 -05:00
parent 00f65a53dd
commit 0d0866d5d9
20 changed files with 964 additions and 231 deletions
--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
@@ -28,6 +28,7 @@ class ImmichAssetGrid extends HookConsumerWidget {
  final bool showMultiSelectIndicator;
  final void Function(ItemPosition start, ItemPosition end)?
      visibleItemsListener;
+  final Widget? topWidget;

  const ImmichAssetGrid({
    super.key,
@@ -44,6 +45,7 @@ class ImmichAssetGrid extends HookConsumerWidget {
    this.dynamicLayout,
    this.showMultiSelectIndicator = true,
    this.visibleItemsListener,
+    this.topWidget,
  });

  @override
@@ -125,6 +127,7 @@ class ImmichAssetGrid extends HookConsumerWidget {
                  settings.getSetting(AppSettingsEnum.dynamicLayout),
              showMultiSelectIndicator: showMultiSelectIndicator,
              visibleItemsListener: visibleItemsListener,
+              topWidget: topWidget,
            ),
          ),
        ),
--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
@@ -206,6 +206,8 @@ class ImmichAssetGridViewState extends State<ImmichAssetGridView> {
          key: ValueKey(section.offset),
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
+            if (section.offset == 0 && widget.topWidget != null)
+              widget.topWidget!,
            if (section.type == RenderAssetGridElementType.monthTitle)
              _buildMonthTitle(context, section.date),
            if (section.type == RenderAssetGridElementType.groupDividerTitle ||
@@ -401,6 +403,7 @@ class ImmichAssetGridView extends StatefulWidget {
  final bool showMultiSelectIndicator;
  final void Function(ItemPosition start, ItemPosition end)?
      visibleItemsListener;
+  final Widget? topWidget;

  const ImmichAssetGridView({
    super.key,
@@ -416,6 +419,7 @@ class ImmichAssetGridView extends StatefulWidget {
    this.dynamicLayout = true,
    this.showMultiSelectIndicator = true,
    this.visibleItemsListener,
+    this.topWidget,
  });

  @override
--- a/mobile/lib/modules/search/providers/people.provider.dart
+++ b/mobile/lib/modules/search/providers/people.provider.dart
@@ -0,0 +1,44 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/ui/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/modules/search/services/person.service.dart';
+import 'package:openapi/api.dart';
+
+final personAssetsProvider = FutureProvider.family
+    .autoDispose<RenderList, String>((ref, personId) async {
+  final PersonService personService = ref.watch(personServiceProvider);
+
+  final assets = await personService.getPersonAssets(personId);
+
+  if (assets == null) {
+    return RenderList.empty();
+  }
+
+  return RenderList.fromAssets(assets, GroupAssetsBy.auto);
+});
+
+final getCuratedPeopleProvider =
+    FutureProvider.autoDispose<List<PersonResponseDto>>((ref) async {
+  final PersonService personService = ref.watch(personServiceProvider);
+
+  final curatedPeople = await personService.getCuratedPeople();
+
+  return curatedPeople ?? [];
+});
+
+class UpdatePersonName {
+  final String id;
+  final String name;
+
+  UpdatePersonName(this.id, this.name);
+}
+
+final updatePersonNameProvider =
+    StateProvider.family<void, UpdatePersonName>((ref, dto) async {
+  final PersonService personService = ref.watch(personServiceProvider);
+
+  final person = await personService.updateName(dto.id, dto.name);
+
+  if (person != null && person.name == dto.name) {
+    ref.invalidate(getCuratedPeopleProvider);
+  }
+});
--- a/mobile/lib/modules/search/services/person.service.dart
+++ b/mobile/lib/modules/search/services/person.service.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/providers/api.provider.dart';
+import 'package:immich_mobile/shared/services/api.service.dart';
+import 'package:openapi/api.dart';
+
+final personServiceProvider = Provider(
+  (ref) => PersonService(
+    ref.watch(apiServiceProvider),
+  ),
+);
+
+class PersonService {
+  final ApiService _apiService;
+
+  PersonService(this._apiService);
+
+  Future<List<PersonResponseDto>?> getCuratedPeople() async {
+    try {
+      return await _apiService.personApi.getAllPeople();
+    } catch (e) {
+      debugPrint("Error [getCuratedPeople] ${e.toString()}");
+      return null;
+    }
+  }
+
+  Future<List<Asset>?> getPersonAssets(String id) async {
+    try {
+      final assets = await _apiService.personApi.getPersonAssets(id);
+
+      if (assets == null) {
+        return null;
+      }
+
+      return assets.map((e) => Asset.remote(e)).toList();
+    } catch (e) {
+      debugPrint("Error [getPersonAssets] ${e.toString()}");
+      return null;
+    }
+  }
+
+  Future<PersonResponseDto?> updateName(String id, String name) async {
+    try {
+      return await _apiService.personApi.updatePerson(
+        id,
+        PersonUpdateDto(
+          name: name,
+        ),
+      );
+    } catch (e) {
+      debugPrint("Error [updateName] ${e.toString()}");
+      return null;
+    }
+  }
+}
--- a/mobile/lib/modules/search/ui/curated_people_row.dart
+++ b/mobile/lib/modules/search/ui/curated_people_row.dart
@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/modules/search/models/curated_content.dart';
+import 'package:immich_mobile/modules/search/ui/thumbnail_with_info.dart';
+import 'package:immich_mobile/shared/models/store.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+
+class CuratedPeopleRow extends StatelessWidget {
+  final List<CuratedContent> content;
+
+  /// Callback with the content and the index when tapped
+  final Function(CuratedContent, int)? onTap;
+  final Function(CuratedContent, int)? onNameTap;
+
+  const CuratedPeopleRow({
+    super.key,
+    required this.content,
+    this.onTap,
+    required this.onNameTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    const imageSize = 85.0;
+
+    // Guard empty [content]
+    if (content.isEmpty) {
+      // Return empty thumbnail
+      return Align(
+        alignment: Alignment.centerLeft,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: SizedBox(
+            width: imageSize,
+            height: imageSize,
+            child: ThumbnailWithInfo(
+              textInfo: '',
+              onTap: () {},
+            ),
+          ),
+        ),
+      );
+    }
+
+    return ListView.builder(
+      scrollDirection: Axis.horizontal,
+      padding: const EdgeInsets.only(
+        left: 16,
+        top: 8,
+      ),
+      itemBuilder: (context, index) {
+        final person = content[index];
+        final headers = {
+          "Authorization": "Bearer ${Store.get(StoreKey.accessToken)}"
+        };
+        return Padding(
+          padding: const EdgeInsets.only(right: 18.0),
+          child: SizedBox(
+            width: imageSize,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                GestureDetector(
+                  onTap: () => onTap?.call(person, index),
+                  child: SizedBox(
+                    height: imageSize,
+                    child: Material(
+                      shape: const CircleBorder(side: BorderSide.none),
+                      elevation: 3,
+                      child: CircleAvatar(
+                        maxRadius: imageSize / 2,
+                        backgroundImage: NetworkImage(
+                          getFaceThumbnailUrl(person.id),
+                          headers: headers,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+                if (person.label == "")
+                  GestureDetector(
+                    onTap: () => onNameTap?.call(person, index),
+                    child: Padding(
+                      padding: const EdgeInsets.only(top: 8.0),
+                      child: Text(
+                        "Add name",
+                        style: TextStyle(
+                          fontWeight: FontWeight.bold,
+                          color: Theme.of(context).primaryColor,
+                        ),
+                      ),
+                    ),
+                  )
+                else
+                  Padding(
+                    padding: const EdgeInsets.only(top: 8.0),
+                    child: Text(
+                      person.label,
+                      textAlign: TextAlign.center,
+                      overflow: TextOverflow.ellipsis,
+                      style: const TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 13.0,
+                      ),
+                    ),
+                  )
+              ],
+            ),
+          ),
+        );
+      },
+      itemCount: content.length,
+    );
+  }
+}
--- a/mobile/lib/modules/search/ui/explore_grid.dart
+++ b/mobile/lib/modules/search/ui/explore_grid.dart
@@ -4,12 +4,16 @@ import 'package:immich_mobile/modules/search/models/curated_content.dart';
 import 'package:immich_mobile/modules/search/ui/thumbnail_with_info.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/models/store.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';

 class ExploreGrid extends StatelessWidget {
  final List<CuratedContent> curatedContent;
+  final bool isPeople;
+
  const ExploreGrid({
    super.key,
    required this.curatedContent,
+    this.isPeople = false,
  });

  @override
@@ -36,16 +40,25 @@ class ExploreGrid extends StatelessWidget {
      ),
      itemBuilder: (context, index) {
        final content = curatedContent[index];
-        final thumbnailRequestUrl =
-            '${Store.get(StoreKey.serverEndpoint)}/asset/thumbnail/${content.id}';
+        final thumbnailRequestUrl = isPeople
+            ? getFaceThumbnailUrl(content.id)
+            : '${Store.get(StoreKey.serverEndpoint)}/asset/thumbnail/${content.id}';
+
        return ThumbnailWithInfo(
          imageUrl: thumbnailRequestUrl,
          textInfo: content.label,
          borderRadius: 0,
          onTap: () {
-            AutoRouter.of(context).push(
-              SearchResultRoute(searchTerm: 'm:${content.label}'),
-            );
+            isPeople
+                ? AutoRouter.of(context).push(
+                    PersonResultRoute(
+                      personId: content.id,
+                      personName: content.label,
+                    ),
+                  )
+                : AutoRouter.of(context).push(
+                    SearchResultRoute(searchTerm: 'm:${content.label}'),
+                  );
          },
        );
      },
--- a/mobile/lib/modules/search/ui/person_name_edit_form.dart
+++ b/mobile/lib/modules/search/ui/person_name_edit_form.dart
@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/search/providers/people.provider.dart';
+
+class PersonNameEditFormResult {
+  final bool success;
+  final String updatedName;
+
+  PersonNameEditFormResult(this.success, this.updatedName);
+}
+
+class PersonNameEditForm extends HookConsumerWidget {
+  final String personId;
+  final String personName;
+
+  const PersonNameEditForm({
+    super.key,
+    required this.personId,
+    required this.personName,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final controller = useTextEditingController(text: personName);
+
+    return AlertDialog(
+      title: const Text(
+        "Add a name",
+        style: TextStyle(fontWeight: FontWeight.bold),
+      ),
+      content: SingleChildScrollView(
+        child: TextFormField(
+          controller: controller,
+          autofocus: true,
+          decoration: const InputDecoration(
+            hintText: 'Name',
+          ),
+        ),
+      ),
+      actions: [
+        TextButton(
+          style: TextButton.styleFrom(),
+          onPressed: () {
+            Navigator.of(context, rootNavigator: true)
+                .pop<PersonNameEditFormResult>(
+              PersonNameEditFormResult(false, ''),
+            );
+          },
+          child: Text(
+            "Cancel",
+            style: TextStyle(
+              color: Colors.red[300],
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+        TextButton(
+          onPressed: () {
+            ref.read(
+              updatePersonNameProvider(
+                UpdatePersonName(personId, controller.text),
+              ),
+            );
+
+            Navigator.of(context, rootNavigator: true)
+                .pop<PersonNameEditFormResult>(
+              PersonNameEditFormResult(true, controller.text),
+            );
+          },
+          child: Text(
+            "Save",
+            style: TextStyle(
+              color: Theme.of(context).primaryColor,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
--- a/mobile/lib/modules/search/ui/search_row_title.dart
+++ b/mobile/lib/modules/search/ui/search_row_title.dart
@@ -0,0 +1,46 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+class SearchRowTitle extends StatelessWidget {
+  final Function() onViewAllPressed;
+  final String title;
+  final double top;
+
+  const SearchRowTitle({
+    super.key,
+    required this.onViewAllPressed,
+    required this.title,
+    this.top = 12,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(
+        left: 16.0,
+        right: 16.0,
+        top: top,
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            title,
+            style: Theme.of(context).textTheme.titleSmall,
+          ),
+          TextButton(
+            onPressed: onViewAllPressed,
+            child: Text(
+              'search_page_view_all_button',
+              style: TextStyle(
+                color: Theme.of(context).primaryColor,
+                fontWeight: FontWeight.bold,
+                fontSize: 14.0,
+              ),
+            ).tr(),
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/search/views/all_people_page.dart
+++ b/mobile/lib/modules/search/views/all_people_page.dart
@@ -0,0 +1,51 @@
+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/modules/search/models/curated_content.dart';
+import 'package:immich_mobile/modules/search/providers/people.provider.dart';
+import 'package:immich_mobile/modules/search/ui/explore_grid.dart';
+import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+
+class AllPeoplePage extends HookConsumerWidget {
+  const AllPeoplePage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final curatedPeople = ref.watch(getCuratedPeopleProvider);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(
+          'all_people_page_title',
+          style: TextStyle(
+            color: Theme.of(context).primaryColor,
+            fontWeight: FontWeight.bold,
+            fontSize: 16.0,
+          ),
+        ).tr(),
+        leading: IconButton(
+          onPressed: () => AutoRouter.of(context).pop(),
+          icon: const Icon(Icons.arrow_back_ios_rounded),
+        ),
+      ),
+      body: curatedPeople.when(
+        loading: () => const Center(child: ImmichLoadingIndicator()),
+        error: (err, stack) => Center(
+          child: Text('Error: $err'),
+        ),
+        data: (people) => ExploreGrid(
+          isPeople: true,
+          curatedContent: people
+              .map(
+                (person) => CuratedContent(
+                  label: person.name,
+                  id: person.id,
+                ),
+              )
+              .toList(),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/search/views/person_result_page.dart
+++ b/mobile/lib/modules/search/views/person_result_page.dart
@@ -0,0 +1,152 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
+import 'package:immich_mobile/modules/search/providers/people.provider.dart';
+import 'package:immich_mobile/modules/search/ui/person_name_edit_form.dart';
+import 'package:immich_mobile/shared/models/store.dart' as isar_store;
+import 'package:immich_mobile/utils/image_url_builder.dart';
+
+class PersonResultPage extends HookConsumerWidget {
+  final String personId;
+  final String personName;
+
+  const PersonResultPage({
+    super.key,
+    required this.personId,
+    required this.personName,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final name = useState(personName);
+
+    showEditNameDialog() {
+      showDialog<PersonNameEditFormResult>(
+        context: context,
+        builder: (BuildContext context) {
+          return PersonNameEditForm(
+            personId: personId,
+            personName: personName,
+          );
+        },
+      ).then((result) {
+        if (result != null && result.success) {
+          name.value = result.updatedName;
+        }
+      });
+    }
+
+    void buildBottomSheet() {
+      showModalBottomSheet(
+        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+        isScrollControlled: false,
+        context: context,
+        useSafeArea: true,
+        builder: (context) {
+          return SafeArea(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                ListTile(
+                  leading: const Icon(Icons.edit_outlined),
+                  title: const Text(
+                    'Edit name',
+                    style: TextStyle(fontWeight: FontWeight.bold),
+                  ),
+                  onTap: showEditNameDialog,
+                )
+              ],
+            ),
+          );
+        },
+      );
+    }
+
+    buildTitleBlock() {
+      if (name.value == "") {
+        return GestureDetector(
+          onTap: showEditNameDialog,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                'Add a name',
+                style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                      color: Theme.of(context).colorScheme.secondary,
+                    ),
+              ),
+              Text(
+                'Find them fast by name with search',
+                style: Theme.of(context).textTheme.labelSmall,
+              ),
+            ],
+          ),
+        );
+      }
+
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            name.value,
+            style: Theme.of(context).textTheme.titleLarge,
+          ),
+        ],
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(name.value),
+        leading: IconButton(
+          onPressed: () => AutoRouter.of(context).pop(),
+          icon: const Icon(Icons.arrow_back_ios_rounded),
+        ),
+        actions: [
+          IconButton(
+            onPressed: buildBottomSheet,
+            icon: const Icon(Icons.more_vert_rounded),
+          ),
+        ],
+      ),
+      body: ref.watch(personAssetsProvider(personId)).when(
+            loading: () => const Center(child: CircularProgressIndicator()),
+            error: (error, stackTrace) => Center(
+              child: Text(
+                error.toString(),
+              ),
+            ),
+            data: (data) => data.isEmpty
+                ? const Center(
+                    child: Text('Opps'),
+                  )
+                : ImmichAssetGrid(
+                    renderList: data,
+                    topWidget: Padding(
+                      padding: const EdgeInsets.only(left: 8.0, top: 24),
+                      child: Row(
+                        children: [
+                          CircleAvatar(
+                            radius: 36,
+                            backgroundImage: NetworkImage(
+                              getFaceThumbnailUrl(personId),
+                              headers: {
+                                "Authorization":
+                                    "Bearer ${isar_store.Store.get(isar_store.StoreKey.accessToken)}"
+                              },
+                            ),
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(left: 16.0),
+                            child: buildTitleBlock(),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+          ),
+    );
+  }
+}
--- a/mobile/lib/modules/search/views/search_page.dart
+++ b/mobile/lib/modules/search/views/search_page.dart
@@ -4,13 +4,16 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/search/models/curated_content.dart';
+import 'package:immich_mobile/modules/search/providers/people.provider.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
+import 'package:immich_mobile/modules/search/ui/curated_people_row.dart';
 import 'package:immich_mobile/modules/search/ui/curated_row.dart';
 import 'package:immich_mobile/modules/search/ui/immich_search_bar.dart';
+import 'package:immich_mobile/modules/search/ui/person_name_edit_form.dart';
+import 'package:immich_mobile/modules/search/ui/search_row_title.dart';
 import 'package:immich_mobile/modules/search/ui/search_suggestion_list.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
-import 'package:openapi/api.dart';

 // ignore: must_be_immutable
 class SearchPage extends HookConsumerWidget {
@@ -21,10 +24,9 @@ class SearchPage extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isSearchEnabled = ref.watch(searchPageStateProvider).isSearchEnabled;
-    AsyncValue<List<CuratedLocationsResponseDto>> curatedLocation =
-        ref.watch(getCuratedLocationProvider);
-    AsyncValue<List<CuratedObjectsResponseDto>> curatedObjects =
-        ref.watch(getCuratedObjectProvider);
+    final curatedLocation = ref.watch(getCuratedLocationProvider);
+    final curatedObjects = ref.watch(getCuratedObjectProvider);
+    final curatedPeople = ref.watch(getCuratedPeopleProvider);
    var isDarkTheme = Theme.of(context).brightness == Brightness.dark;
    double imageSize = MediaQuery.of(context).size.width / 3;

@@ -54,6 +56,50 @@ class SearchPage extends HookConsumerWidget {
      );
    }

+    showNameEditModel(
+      String personId,
+      String personName,
+    ) {
+      return showDialog(
+        context: context,
+        builder: (BuildContext context) {
+          return PersonNameEditForm(personId: personId, personName: personName);
+        },
+      );
+    }
+
+    buildPeople() {
+      return SizedBox(
+        height: MediaQuery.of(context).size.width / 3,
+        child: curatedPeople.when(
+          loading: () => const Center(child: ImmichLoadingIndicator()),
+          error: (err, stack) => Center(child: Text('Error: $err')),
+          data: (people) => CuratedPeopleRow(
+            content: people
+                .map(
+                  (person) => CuratedContent(
+                    id: person.id,
+                    label: person.name,
+                  ),
+                )
+                .take(12)
+                .toList(),
+            onTap: (content, index) {
+              AutoRouter.of(context).push(
+                PersonResultRoute(
+                  personId: content.id,
+                  personName: content.label,
+                ),
+              );
+            },
+            onNameTap: (person, index) => {
+              showNameEditModel(person.id, person.label),
+            },
+          ),
+        ),
+      );
+    }
+
    buildPlaces() {
      return SizedBox(
        height: imageSize,
@@ -130,63 +176,25 @@ class SearchPage extends HookConsumerWidget {
          children: [
            ListView(
              children: [
-                Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 16.0,
-                    vertical: 4.0,
-                  ),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      Text(
-                        "search_page_places",
-                        style: Theme.of(context).textTheme.titleSmall,
-                      ).tr(),
-                      TextButton(
-                        child: Text(
-                          'search_page_view_all_button',
-                          style: TextStyle(
-                            color: Theme.of(context).primaryColor,
-                            fontWeight: FontWeight.bold,
-                            fontSize: 14.0,
-                          ),
-                        ).tr(),
-                        onPressed: () => AutoRouter.of(context).push(
-                          const CuratedLocationRoute(),
-                        ),
-                      ),
-                    ],
+                SearchRowTitle(
+                  title: "search_page_people".tr(),
+                  onViewAllPressed: () => AutoRouter.of(context).push(
+                    const AllPeopleRoute(),
                  ),
                ),
-                buildPlaces(),
-                Padding(
-                  padding: const EdgeInsets.only(
-                    top: 24.0,
-                    bottom: 4.0,
-                    left: 16.0,
-                    right: 16.0,
+                buildPeople(),
+                SearchRowTitle(
+                  title: "search_page_places".tr(),
+                  onViewAllPressed: () => AutoRouter.of(context).push(
+                    const CuratedLocationRoute(),
                  ),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      Text(
-                        "search_page_things",
-                        style: Theme.of(context).textTheme.titleSmall,
-                      ).tr(),
-                      TextButton(
-                        child: Text(
-                          'search_page_view_all_button',
-                          style: TextStyle(
-                            color: Theme.of(context).primaryColor,
-                            fontWeight: FontWeight.bold,
-                            fontSize: 14.0,
-                          ),
-                        ).tr(),
-                        onPressed: () => AutoRouter.of(context).push(
-                          const CuratedObjectRoute(),
-                        ),
-                      ),
-                    ],
+                  top: 0,
+                ),
+                buildPlaces(),
+                SearchRowTitle(
+                  title: "search_page_things".tr(),
+                  onViewAllPressed: () => AutoRouter.of(context).push(
+                    const CuratedObjectRoute(),
                  ),
                ),
                buildThings(),
@@ -200,7 +208,7 @@ class SearchPage extends HookConsumerWidget {
                ),
                ListTile(
                  leading: Icon(
-                    Icons.favorite_border,
+                    Icons.star_outline,
                    color: categoryIconColor,
                  ),
                  title:
--- a/mobile/lib/routing/router.dart
+++ b/mobile/lib/routing/router.dart
@@ -25,9 +25,11 @@ import 'package:immich_mobile/modules/login/views/login_page.dart';
 import 'package:immich_mobile/modules/onboarding/providers/gallery_permission.provider.dart';
 import 'package:immich_mobile/modules/onboarding/views/permission_onboarding_page.dart';
 import 'package:immich_mobile/modules/search/views/all_motion_videos_page.dart';
+import 'package:immich_mobile/modules/search/views/all_people_page.dart';
 import 'package:immich_mobile/modules/search/views/all_videos_page.dart';
 import 'package:immich_mobile/modules/search/views/curated_location_page.dart';
 import 'package:immich_mobile/modules/search/views/curated_object_page.dart';
+import 'package:immich_mobile/modules/search/views/person_result_page.dart';
 import 'package:immich_mobile/modules/search/views/recently_added_page.dart';
 import 'package:immich_mobile/modules/search/views/search_page.dart';
 import 'package:immich_mobile/modules/search/views/search_result_page.dart';
@@ -37,8 +39,8 @@ import 'package:immich_mobile/routing/duplicate_guard.dart';
 import 'package:immich_mobile/routing/gallery_permission_guard.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/models/album.dart';
-import 'package:immich_mobile/shared/models/user.dart';
 import 'package:immich_mobile/shared/models/logger_message.model.dart';
+import 'package:immich_mobile/shared/models/user.dart';
 import 'package:immich_mobile/shared/providers/api.provider.dart';
 import 'package:immich_mobile/shared/services/api.service.dart';
 import 'package:immich_mobile/shared/views/app_log_detail_page.dart';
@@ -140,7 +142,15 @@ part 'router.gr.dart';
      ],
    ),
    AutoRoute(page: PartnerPage, guards: [AuthGuard, DuplicateGuard]),
-    AutoRoute(page: PartnerDetailPage, guards: [AuthGuard, DuplicateGuard])
+    AutoRoute(page: PartnerDetailPage, guards: [AuthGuard, DuplicateGuard]),
+    AutoRoute(
+      page: PersonResultPage,
+      guards: [
+        AuthGuard,
+        DuplicateGuard,
+      ],
+    ),
+    AutoRoute(page: AllPeoplePage, guards: [AuthGuard, DuplicateGuard]),
  ],
 )
 class AppRouter extends _$AppRouter {
--- a/mobile/lib/routing/router.gr.dart
+++ b/mobile/lib/routing/router.gr.dart
@@ -84,6 +84,7 @@ class _$AppRouter extends RootStackRouter {
          onVideoEnded: args.onVideoEnded,
          onPlaying: args.onPlaying,
          onPaused: args.onPaused,
+          placeholder: args.placeholder,
        ),
      );
    },
@@ -272,6 +273,23 @@ class _$AppRouter extends RootStackRouter {
        ),
      );
    },
+    PersonResultRoute.name: (routeData) {
+      final args = routeData.argsAs<PersonResultRouteArgs>();
+      return MaterialPageX<dynamic>(
+        routeData: routeData,
+        child: PersonResultPage(
+          key: args.key,
+          personId: args.personId,
+          personName: args.personName,
+        ),
+      );
+    },
+    AllPeopleRoute.name: (routeData) {
+      return MaterialPageX<dynamic>(
+        routeData: routeData,
+        child: const AllPeoplePage(),
+      );
+    },
    HomeRoute.name: (routeData) {
      return MaterialPageX<dynamic>(
        routeData: routeData,
@@ -555,6 +573,22 @@ class _$AppRouter extends RootStackRouter {
            duplicateGuard,
          ],
        ),
+        RouteConfig(
+          PersonResultRoute.name,
+          path: '/person-result-page',
+          guards: [
+            authGuard,
+            duplicateGuard,
+          ],
+        ),
+        RouteConfig(
+          AllPeopleRoute.name,
+          path: '/all-people-page',
+          guards: [
+            authGuard,
+            duplicateGuard,
+          ],
+        ),
      ];
 }

@@ -670,9 +704,10 @@ class VideoViewerRoute extends PageRouteInfo<VideoViewerRouteArgs> {
    Key? key,
    required Asset asset,
    required bool isMotionVideo,
-    required dynamic onVideoEnded,
-    dynamic onPlaying,
-    dynamic onPaused,
+    required void Function() onVideoEnded,
+    void Function()? onPlaying,
+    void Function()? onPaused,
+    Widget? placeholder,
  }) : super(
          VideoViewerRoute.name,
          path: '/video-viewer-page',
@@ -683,6 +718,7 @@ class VideoViewerRoute extends PageRouteInfo<VideoViewerRouteArgs> {
            onVideoEnded: onVideoEnded,
            onPlaying: onPlaying,
            onPaused: onPaused,
+            placeholder: placeholder,
          ),
        );

@@ -697,6 +733,7 @@ class VideoViewerRouteArgs {
    required this.onVideoEnded,
    this.onPlaying,
    this.onPaused,
+    this.placeholder,
  });

  final Key? key;
@@ -705,15 +742,17 @@ class VideoViewerRouteArgs {

  final bool isMotionVideo;

-  final dynamic onVideoEnded;
+  final void Function() onVideoEnded;

-  final dynamic onPlaying;
+  final void Function()? onPlaying;

-  final dynamic onPaused;
+  final void Function()? onPaused;
+
+  final Widget? placeholder;

  @override
  String toString() {
-    return 'VideoViewerRouteArgs{key: $key, asset: $asset, isMotionVideo: $isMotionVideo, onVideoEnded: $onVideoEnded, onPlaying: $onPlaying, onPaused: $onPaused}';
+    return 'VideoViewerRouteArgs{key: $key, asset: $asset, isMotionVideo: $isMotionVideo, onVideoEnded: $onVideoEnded, onPlaying: $onPlaying, onPaused: $onPaused, placeholder: $placeholder}';
  }
 }

@@ -1191,6 +1230,57 @@ class PartnerDetailRouteArgs {
  }
 }

+/// generated route for
+/// [PersonResultPage]
+class PersonResultRoute extends PageRouteInfo<PersonResultRouteArgs> {
+  PersonResultRoute({
+    Key? key,
+    required String personId,
+    required String personName,
+  }) : super(
+          PersonResultRoute.name,
+          path: '/person-result-page',
+          args: PersonResultRouteArgs(
+            key: key,
+            personId: personId,
+            personName: personName,
+          ),
+        );
+
+  static const String name = 'PersonResultRoute';
+}
+
+class PersonResultRouteArgs {
+  const PersonResultRouteArgs({
+    this.key,
+    required this.personId,
+    required this.personName,
+  });
+
+  final Key? key;
+
+  final String personId;
+
+  final String personName;
+
+  @override
+  String toString() {
+    return 'PersonResultRouteArgs{key: $key, personId: $personId, personName: $personName}';
+  }
+}
+
+/// generated route for
+/// [AllPeoplePage]
+class AllPeopleRoute extends PageRouteInfo<void> {
+  const AllPeopleRoute()
+      : super(
+          AllPeopleRoute.name,
+          path: '/all-people-page',
+        );
+
+  static const String name = 'AllPeopleRoute';
+}
+
 /// generated route for
 /// [HomePage]
 class HomeRoute extends PageRouteInfo<void> {
--- a/mobile/lib/routing/tab_navigation_observer.dart
+++ b/mobile/lib/routing/tab_navigation_observer.dart
@@ -1,6 +1,7 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/search/providers/people.provider.dart';

 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
 import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
@@ -32,6 +33,7 @@ class TabNavigationObserver extends AutoRouterObserver {
      // Refresh Location State
      ref.invalidate(getCuratedLocationProvider);
      ref.invalidate(getCuratedObjectProvider);
+      ref.invalidate(getCuratedPeopleProvider);
    }

    if (route.name == 'SharingRoute') {
--- a/mobile/lib/shared/services/api.service.dart
+++ b/mobile/lib/shared/services/api.service.dart
@@ -17,6 +17,7 @@ class ApiService {
  late SearchApi searchApi;
  late ServerInfoApi serverInfoApi;
  late PartnerApi partnerApi;
+  late PersonApi personApi;

  ApiService() {
    final endpoint = Store.tryGet(StoreKey.serverEndpoint);
@@ -39,6 +40,7 @@ class ApiService {
    serverInfoApi = ServerInfoApi(_apiClient);
    searchApi = SearchApi(_apiClient);
    partnerApi = PartnerApi(_apiClient);
+    personApi = PersonApi(_apiClient);
  }

  Future<String> resolveAndSetEndpoint(String serverUrl) async {
--- a/mobile/lib/utils/image_url_builder.dart
+++ b/mobile/lib/utils/image_url_builder.dart
@@ -59,3 +59,7 @@ String _getThumbnailUrl(
 }) {
  return '${Store.get(StoreKey.serverEndpoint)}/asset/thumbnail/$id?format=${type.value}';
 }
+
+String getFaceThumbnailUrl(final String personId) {
+  return '${Store.get(StoreKey.serverEndpoint)}/person/$personId/thumbnail';
+}
--- a/mobile/lib/utils/immich_app_theme.dart
+++ b/mobile/lib/utils/immich_app_theme.dart
@@ -32,6 +32,8 @@ ThemeData immichLightTheme = ThemeData(
  primarySwatch: Colors.indigo,
  primaryColor: Colors.indigo,
  hintColor: Colors.indigo,
+  focusColor: Colors.indigo,
+  splashColor: Colors.indigo.withOpacity(0.15),
  fontFamily: 'WorkSans',
  scaffoldBackgroundColor: immichBackgroundColor,
  snackBarTheme: const SnackBarThemeData(
@@ -119,6 +121,26 @@ ThemeData immichLightTheme = ThemeData(
      ),
    ),
  ),
+  dialogTheme: const DialogTheme(
+    surfaceTintColor: Colors.transparent,
+  ),
+  inputDecorationTheme: const InputDecorationTheme(
+    focusedBorder: OutlineInputBorder(
+      borderSide: BorderSide(
+        color: Colors.indigo,
+      ),
+    ),
+    labelStyle: TextStyle(
+      color: Colors.indigo,
+    ),
+    hintStyle: TextStyle(
+      fontSize: 14.0,
+      fontWeight: FontWeight.normal,
+    ),
+  ),
+  textSelectionTheme: const TextSelectionThemeData(
+    cursorColor: Colors.indigo,
+  ),
 );

 ThemeData immichDarkTheme = ThemeData(
@@ -217,4 +239,24 @@ ThemeData immichDarkTheme = ThemeData(
      ),
    ),
  ),
+  dialogTheme: const DialogTheme(
+    surfaceTintColor: Colors.transparent,
+  ),
+  inputDecorationTheme: InputDecorationTheme(
+    focusedBorder: OutlineInputBorder(
+      borderSide: BorderSide(
+        color: immichDarkThemePrimaryColor,
+      ),
+    ),
+    labelStyle: TextStyle(
+      color: immichDarkThemePrimaryColor,
+    ),
+    hintStyle: const TextStyle(
+      fontSize: 14.0,
+      fontWeight: FontWeight.normal,
+    ),
+  ),
+  textSelectionTheme: TextSelectionThemeData(
+    cursorColor: immichDarkThemePrimaryColor,
+  ),
 );