feat: people page/sheet/detail (#20309)

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -218,7 +218,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _onPageBuild(PhotoViewControllerBase controller) {
     viewController ??= controller;
-    if (showingBottomSheet) {
+    if (showingBottomSheet && bottomSheetController.isAttached) {
       final verticalOffset =
           (context.height * bottomSheetController.size) - (context.height * _kBottomSheetMinimumExtent);
       controller.position = Offset(0, -verticalOffset);
@@ -463,7 +463,9 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   }
 
   void _snapBottomSheet() {
-    if (bottomSheetController.size > _kBottomSheetSnapExtent || bottomSheetController.size < 0.4) {
+    if (!bottomSheetController.isAttached ||
+        bottomSheetController.size > _kBottomSheetSnapExtent ||
+        bottomSheetController.size < 0.4) {
       return;
     }
     isSnapping = true;

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart

@@ -16,7 +16,8 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_b
 import 'package:immich_mobile/presentation/widgets/action_buttons/share_link_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/bottom_sheet/location_details.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/bottom_sheet/sheet_location_details.widget.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/bottom_sheet/sheet_people_details.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
@@ -150,6 +151,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
           titleStyle: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
         ),
         if (exifInfo != null) _SheetAssetDescription(exif: exifInfo),
+        const SheetPeopleDetails(),
         const SheetLocationDetails(),
         // Details header
         _SheetTile(

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/sheet_people_details.widget.dart

@@ -0,0 +1,175 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/person.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/people/person_edit_name_modal.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
+import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/utils/people.utils.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
+
+class SheetPeopleDetails extends ConsumerStatefulWidget {
+  const SheetPeopleDetails({super.key});
+
+  @override
+  ConsumerState createState() => _SheetPeopleDetailsState();
+}
+
+class _SheetPeopleDetailsState extends ConsumerState<SheetPeopleDetails> {
+  @override
+  Widget build(BuildContext context) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset is! RemoteAsset) {
+      return const SizedBox.shrink();
+    }
+
+    final peopleFuture = ref.watch(driftPeopleAssetProvider(asset.id));
+
+    Future<void> showNameEditModal(DriftPerson person) async {
+      await showDialog(
+        context: context,
+        useRootNavigator: false,
+        builder: (BuildContext context) {
+          return DriftPersonNameEditForm(person: person);
+        },
+      );
+
+      ref.invalidate(driftPeopleAssetProvider(asset.id));
+    }
+
+    return peopleFuture.when(
+      data: (people) {
+        return AnimatedCrossFade(
+          firstChild: const SizedBox.shrink(),
+          secondChild: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(left: 16, top: 16, bottom: 16),
+                child: Text(
+                  "people".t(context: context).toUpperCase(),
+                  style: context.textTheme.labelMedium?.copyWith(
+                    color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+              ),
+              SizedBox(
+                height: 150,
+                child: ListView(
+                  padding: const EdgeInsets.only(left: 16.0),
+                  scrollDirection: Axis.horizontal,
+                  children: [
+                    for (final person in people)
+                      _PeopleAvatar(
+                        person: person,
+                        assetFileCreatedAt: asset.createdAt,
+                        onTap: () {
+                          final previousRouteData = ref.read(previousRouteDataProvider);
+                          final previousRouteArgs = previousRouteData?.arguments;
+
+                          // Prevent circular navigation
+                          if (previousRouteArgs is DriftPersonRouteArgs && previousRouteArgs.person.id == person.id) {
+                            context.back();
+                            return;
+                          }
+                          context.back();
+                          context.pushRoute(DriftPersonRoute(person: person));
+                        },
+                        onNameTap: () => showNameEditModal(person),
+                      ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          crossFadeState: people.isEmpty ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+          duration: Durations.short4,
+        );
+      },
+      error: (error, stack) => Text("error_loading_people".t(context: context), style: context.textTheme.bodyMedium),
+      loading: () => const SizedBox.shrink(),
+    );
+  }
+}
+
+class _PeopleAvatar extends StatelessWidget {
+  final DriftPerson person;
+  final DateTime assetFileCreatedAt;
+  final VoidCallback? onTap;
+  final VoidCallback? onNameTap;
+  final double imageSize = 96;
+
+  const _PeopleAvatar({required this.person, required this.assetFileCreatedAt, this.onTap, this.onNameTap});
+
+  @override
+  Widget build(BuildContext context) {
+    final headers = ApiService.getRequestHeaders();
+
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxWidth: 96),
+      child: Padding(
+        padding: const EdgeInsets.only(right: 16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            GestureDetector(
+              onTap: onTap,
+              child: SizedBox(
+                height: imageSize,
+                child: Material(
+                  shape: CircleBorder(side: BorderSide(color: context.primaryColor.withAlpha(50), width: 1.0)),
+                  shadowColor: context.colorScheme.shadow,
+                  elevation: 3,
+                  child: CircleAvatar(
+                    maxRadius: imageSize / 2,
+                    backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(height: 4),
+            if (person.name.isEmpty)
+              GestureDetector(
+                onTap: () => onNameTap?.call(),
+                child: Text(
+                  "add_a_name".t(context: context),
+                  style: context.textTheme.labelLarge?.copyWith(color: context.primaryColor),
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                  textAlign: TextAlign.center,
+                ),
+              )
+            else
+              Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    person.name,
+                    textAlign: TextAlign.center,
+                    overflow: TextOverflow.ellipsis,
+                    style: context.textTheme.labelLarge,
+                    maxLines: 1,
+                  ),
+                  if (person.birthDate != null)
+                    Text(
+                      formatAge(person.birthDate!, assetFileCreatedAt),
+                      textAlign: TextAlign.center,
+                      style: context.textTheme.bodyMedium?.copyWith(
+                        color: context.textTheme.bodyMedium?.color?.withAlpha(175),
+                      ),
+                    ),
+                ],
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/people/person_edit_birthday_modal.widget.dart

@@ -0,0 +1,116 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/person.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:scroll_date_picker/scroll_date_picker.dart';
+
+class DriftPersonBirthdayEditForm extends ConsumerStatefulWidget {
+  final DriftPerson person;
+
+  const DriftPersonBirthdayEditForm({super.key, required this.person});
+
+  @override
+  ConsumerState<DriftPersonBirthdayEditForm> createState() => _DriftPersonNameEditFormState();
+}
+
+class _DriftPersonNameEditFormState extends ConsumerState<DriftPersonBirthdayEditForm> {
+  late DateTime _selectedDate;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedDate = widget.person.birthDate ?? DateTime.now();
+  }
+
+  void saveBirthday() async {
+    try {
+      final result = await ref.read(driftPeopleServiceProvider).updateBrithday(widget.person.id, _selectedDate);
+
+      if (result != 0) {
+        ref.invalidate(driftGetAllPeopleProvider);
+        context.pop<DateTime>(_selectedDate);
+      }
+    } catch (error) {
+      debugPrint('Error updating birthday: $error');
+
+      if (!context.mounted) {
+        return;
+      }
+
+      ImmichToast.show(
+        context: context,
+        msg: 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text(
+        "edit_birthday".t(context: context),
+        style: const TextStyle(fontWeight: FontWeight.bold),
+      ),
+      content: SizedBox(
+        width: double.maxFinite,
+        height: 300,
+        child: ClipRRect(
+          borderRadius: const BorderRadius.all(Radius.circular(16.0)),
+
+          child: ScrollDatePicker(
+            options: DatePickerOptions(
+              backgroundColor: context.colorScheme.surfaceContainerHigh,
+              itemExtent: 50,
+              diameterRatio: 5,
+            ),
+            scrollViewOptions: DatePickerScrollViewOptions(
+              day: ScrollViewDetailOptions(
+                margin: const EdgeInsets.all(12),
+                selectedTextStyle: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+              ),
+              month: ScrollViewDetailOptions(
+                margin: const EdgeInsets.all(12),
+                selectedTextStyle: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+              ),
+              year: ScrollViewDetailOptions(
+                margin: const EdgeInsets.all(12),
+                selectedTextStyle: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+              ),
+            ),
+            selectedDate: _selectedDate,
+            locale: context.locale,
+            minimumDate: DateTime(1800, 1, 1),
+            onDateTimeChanged: (DateTime value) {
+              setState(() {
+                _selectedDate = value;
+              });
+            },
+          ),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => context.pop(null),
+          child: Text(
+            "cancel",
+            style: TextStyle(color: Colors.red[300], fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+        TextButton(
+          onPressed: () => saveBirthday(),
+          child: Text(
+            "save",
+            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/people/person_edit_name_modal.widget.dart

@@ -0,0 +1,82 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/person.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+
+class DriftPersonNameEditForm extends ConsumerStatefulWidget {
+  final DriftPerson person;
+
+  const DriftPersonNameEditForm({super.key, required this.person});
+
+  @override
+  ConsumerState<DriftPersonNameEditForm> createState() => _DriftPersonNameEditFormState();
+}
+
+class _DriftPersonNameEditFormState extends ConsumerState<DriftPersonNameEditForm> {
+  late TextEditingController _formController;
+
+  @override
+  void initState() {
+    super.initState();
+    _formController = TextEditingController(text: widget.person.name);
+  }
+
+  void onEdit(String personId, String newName) async {
+    try {
+      final result = await ref.read(driftPeopleServiceProvider).updateName(personId, newName);
+      if (result != 0) {
+        ref.invalidate(driftGetAllPeopleProvider);
+        context.pop<String>(newName);
+      }
+    } catch (error) {
+      debugPrint('Error updating name: $error');
+
+      if (!context.mounted) {
+        return;
+      }
+
+      ImmichToast.show(
+        context: context,
+        msg: 'scaffold_body_error_occurred'.t(context: context),
+        gravity: ToastGravity.BOTTOM,
+        toastType: ToastType.error,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: const Text("edit_name", style: TextStyle(fontWeight: FontWeight.bold)).tr(),
+      content: SingleChildScrollView(
+        child: TextFormField(
+          controller: _formController,
+          textCapitalization: TextCapitalization.words,
+          autofocus: true,
+          decoration: InputDecoration(hintText: 'name'.tr(), border: const OutlineInputBorder()),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => context.pop(null),
+          child: Text(
+            "cancel",
+            style: TextStyle(color: Colors.red[300], fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+        TextButton(
+          onPressed: () => onEdit(widget.person.id, _formController.text),
+          child: Text(
+            "save",
+            style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold),
+          ).tr(),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/presentation/widgets/people/person_option_sheet.widget.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+
+class PersonOptionSheet extends ConsumerWidget {
+  const PersonOptionSheet({super.key, this.onEditName, this.onEditBirthday});
+
+  final VoidCallback? onEditName;
+  final VoidCallback? onEditBirthday;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    TextStyle textStyle = Theme.of(context).textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w600);
+
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 24.0),
+        child: ListView(
+          shrinkWrap: true,
+          children: [
+            ListTile(
+              leading: const Icon(Icons.edit),
+              title: Text('edit_name'.t(context: context), style: textStyle),
+              onTap: onEditName,
+            ),
+            ListTile(
+              leading: const Icon(Icons.cake),
+              title: Text('edit_birthday'.t(context: context), style: textStyle),
+              onTap: onEditBirthday,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart

@@ -4,6 +4,7 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail_tile.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/fixed/row.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/header.widget.dart';
@@ -99,7 +100,7 @@ class _FixedSegmentRow extends ConsumerWidget {
     }
 
     if (timelineService.hasRange(assetIndex, assetCount)) {
-      return _buildAssetRow(context, timelineService.getAssets(assetIndex, assetCount));
+      return _buildAssetRow(context, timelineService.getAssets(assetIndex, assetCount), timelineService);
     }
 
     return FutureBuilder<List<BaseAsset>>(
@@ -108,7 +109,7 @@ class _FixedSegmentRow extends ConsumerWidget {
         if (snapshot.connectionState != ConnectionState.done) {
           return _buildPlaceholder(context);
         }
-        return _buildAssetRow(context, snapshot.requireData);
+        return _buildAssetRow(context, snapshot.requireData, timelineService);
       },
     );
   }
@@ -117,14 +118,18 @@ class _FixedSegmentRow extends ConsumerWidget {
     return SegmentBuilder.buildPlaceholder(context, assetCount, size: Size.square(tileHeight), spacing: spacing);
   }
 
-  Widget _buildAssetRow(BuildContext context, List<BaseAsset> assets) {
+  Widget _buildAssetRow(BuildContext context, List<BaseAsset> assets, TimelineService timelineService) {
     return FixedTimelineRow(
       dimension: tileHeight,
       spacing: spacing,
       textDirection: Directionality.of(context),
       children: [
         for (int i = 0; i < assets.length; i++)
-          _AssetTileWidget(key: ValueKey(assets[i].heroTag), asset: assets[i], assetIndex: assetIndex + i),
+          _AssetTileWidget(
+            key: ValueKey(Object.hash(assets[i].heroTag, assetIndex + i, timelineService.hashCode)),
+            asset: assets[i],
+            assetIndex: assetIndex + i,
+          ),
       ],
     );
   }