chore(mobile): refactor detail panel (#11662)

* date time component

* rename to info_sheet

* simplify map info

* Edit datetime sheet

* fix janking when scroll on info sheet

* Location refactor

* refactor name

* Update date time after editing

* localize rebuild to smaller component

* restore advanced bottom sheet

* reassign EXIF back to local database

* remove print statements

mobile/lib/widgets/asset_viewer/description_input.dart

@@ -6,6 +6,7 @@ import 'package:immich_mobile/entities/exif_info.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/services/asset_description.service.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
@@ -29,17 +30,16 @@ class DescriptionInput extends HookConsumerWidget {
     final isFocus = useState(false);
     final isTextEmpty = useState(controller.text.isEmpty);
     final descriptionProvider = ref.watch(assetDescriptionServiceProvider);
-
     final owner = ref.watch(currentUserProvider);
     final hasError = useState(false);
+    final assetWithExif = ref.watch(assetDetailProvider(asset));
 
     useEffect(
       () {
-        controller.text = exifInfo?.description ?? '';
-        isTextEmpty.value = exifInfo?.description?.isEmpty ?? true;
+        controller.text = descriptionProvider.getAssetDescription(asset);
         return null;
       },
-      [exifInfo?.description],
+      [assetWithExif.value],
     );
 
     submitDescription(String description) async {
@@ -49,6 +49,7 @@ class DescriptionInput extends HookConsumerWidget {
           asset,
           description,
         );
+        controller.text = description;
       } catch (error, stack) {
         hasError.value = true;
         _log.severe("Error updating description", error, stack);
@@ -101,6 +102,11 @@ class DescriptionInput extends HookConsumerWidget {
         hintText: 'description_input_hint_text'.tr(),
         border: InputBorder.none,
         suffixIcon: suffixIcon,
+        enabledBorder: InputBorder.none,
+        focusedBorder: InputBorder.none,
+        disabledBorder: InputBorder.none,
+        errorBorder: InputBorder.none,
+        focusedErrorBorder: InputBorder.none,
       ),
     );
   }

mobile/lib/widgets/asset_viewer/detail_panel/asset_date_time.dart

@@ -0,0 +1,54 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/asset_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/providers/asset.provider.dart';
+import 'package:immich_mobile/utils/selection_handlers.dart';
+
+class AssetDateTime extends ConsumerWidget {
+  final Asset asset;
+
+  const AssetDateTime({super.key, required this.asset});
+
+  String getDateTimeString(Asset a) {
+    final (deltaTime, timeZone) = a.getTZAdjustedTimeAndOffset();
+    final date = DateFormat.yMMMEd().format(deltaTime);
+    final time = DateFormat.jm().format(deltaTime);
+    return '$date • $time GMT${timeZone.formatAsOffset()}';
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final watchedAsset = ref.watch(assetDetailProvider(asset));
+    String formattedDateTime = getDateTimeString(asset);
+
+    void editDateTime() async {
+      await handleEditDateTime(ref, context, [asset]);
+
+      if (watchedAsset.value != null) {
+        formattedDateTime = getDateTimeString(watchedAsset.value!);
+      }
+    }
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(
+          formattedDateTime,
+          style: context.textTheme.bodyMedium?.copyWith(
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+        if (asset.isRemote)
+          IconButton(
+            onPressed: editDateTime,
+            icon: const Icon(Icons.edit_outlined),
+            iconSize: 20,
+          ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/asset_details.dart

@@ -0,0 +1,44 @@
+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/asset.provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/file_info.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/entities/exif_info.entity.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/camera_info.dart';
+
+class AssetDetails extends ConsumerWidget {
+  final Asset asset;
+  final ExifInfo? exifInfo;
+
+  const AssetDetails({
+    super.key,
+    required this.asset,
+    this.exifInfo,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final assetWithExif = ref.watch(assetDetailProvider(asset));
+    final ExifInfo? exifInfo = (assetWithExif.value ?? asset).exifInfo;
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 24.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            "exif_bottom_sheet_details",
+            style: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(200),
+              fontWeight: FontWeight.w600,
+            ),
+          ).tr(),
+          FileInfo(asset: asset),
+          if (exifInfo?.make != null) CameraInfo(exifInfo: exifInfo!),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/asset_location.dart

@@ -0,0 +1,106 @@
+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/asset.provider.dart';
+import 'package:immich_mobile/utils/selection_handlers.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/exif_map.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/entities/exif_info.entity.dart';
+
+class AssetLocation extends HookConsumerWidget {
+  final Asset asset;
+
+  const AssetLocation({
+    super.key,
+    required this.asset,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final assetWithExif = ref.watch(assetDetailProvider(asset));
+    final ExifInfo? exifInfo = (assetWithExif.value ?? asset).exifInfo;
+    final hasCoordinates = exifInfo?.hasCoordinates ?? false;
+
+    void editLocation() {
+      handleEditLocation(ref, context, [assetWithExif.value ?? asset]);
+    }
+
+    // Guard no lat/lng
+    if (!hasCoordinates) {
+      return asset.isRemote
+          ? ListTile(
+              minLeadingWidth: 0,
+              contentPadding: const EdgeInsets.all(0),
+              leading: const Icon(Icons.location_on),
+              title: Text(
+                "exif_bottom_sheet_location_add",
+                style: context.textTheme.bodyMedium?.copyWith(
+                  fontWeight: FontWeight.w600,
+                  color: context.primaryColor,
+                ),
+              ).tr(),
+              onTap: editLocation,
+            )
+          : const SizedBox.shrink();
+    }
+
+    Widget getLocationName() {
+      if (exifInfo == null) {
+        return const SizedBox.shrink();
+      }
+
+      final cityName = exifInfo.city;
+      final stateName = exifInfo.state;
+
+      bool hasLocationName = (cityName != null && stateName != null);
+
+      return hasLocationName
+          ? Text(
+              "$cityName, $stateName",
+              style: context.textTheme.labelLarge,
+            )
+          : const SizedBox.shrink();
+    }
+
+    return Padding(
+      padding: EdgeInsets.only(top: asset.isRemote ? 0 : 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                "exif_bottom_sheet_location",
+                style: context.textTheme.labelMedium?.copyWith(
+                  color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                  fontWeight: FontWeight.w600,
+                ),
+              ).tr(),
+              if (asset.isRemote)
+                IconButton(
+                  onPressed: editLocation,
+                  icon: const Icon(Icons.edit_outlined),
+                  iconSize: 20,
+                ),
+            ],
+          ),
+          asset.isRemote ? const SizedBox.shrink() : const SizedBox(height: 16),
+          ExifMap(
+            exifInfo: exifInfo!,
+            markerId: asset.remoteId,
+          ),
+          const SizedBox(height: 16),
+          getLocationName(),
+          Text(
+            "${exifInfo.latitude!.toStringAsFixed(4)}, ${exifInfo.longitude!.toStringAsFixed(4)}",
+            style: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(150),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/camera_info.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/entities/exif_info.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class CameraInfo extends StatelessWidget {
+  final ExifInfo exifInfo;
+
+  const CameraInfo({
+    super.key,
+    required this.exifInfo,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final textColor = context.isDarkTheme ? Colors.white : Colors.black;
+    return ListTile(
+      contentPadding: const EdgeInsets.all(0),
+      dense: true,
+      leading: Icon(
+        Icons.camera,
+        color: textColor.withAlpha(200),
+      ),
+      title: Text(
+        "${exifInfo.make} ${exifInfo.model}",
+        style: context.textTheme.labelLarge,
+      ),
+      subtitle: exifInfo.f != null ||
+              exifInfo.exposureSeconds != null ||
+              exifInfo.mm != null ||
+              exifInfo.iso != null
+          ? Text(
+              "ƒ/${exifInfo.fNumber}   ${exifInfo.exposureTime}   ${exifInfo.focalLength} mm   ISO ${exifInfo.iso ?? ''} ",
+              style: context.textTheme.bodySmall,
+            )
+          : null,
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/detail_panel.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/widgets/asset_viewer/description_input.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_date_time.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_details.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/asset_location.dart';
+import 'package:immich_mobile/widgets/asset_viewer/detail_panel/people_info.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+
+class DetailPanel extends HookConsumerWidget {
+  final Asset asset;
+
+  const DetailPanel({super.key, required this.asset});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return ListView(
+      shrinkWrap: true,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: Column(
+            children: [
+              AssetDateTime(asset: asset),
+              asset.isRemote
+                  ? DescriptionInput(asset: asset)
+                  : const SizedBox.shrink(),
+              PeopleInfo(asset: asset),
+              AssetLocation(asset: asset),
+              AssetDetails(asset: asset),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/detail_panel/exif_map.dart

@@ -8,13 +8,11 @@ import 'package:url_launcher/url_launcher.dart';
 
 class ExifMap extends StatelessWidget {
   final ExifInfo exifInfo;
-  final String formattedDateTime;
   final String? markerId;
 
   const ExifMap({
     super.key,
     required this.exifInfo,
-    required this.formattedDateTime,
     this.markerId = 'marker',
   });
 
@@ -37,7 +35,7 @@ class ExifMap extends StatelessWidget {
           host: '$latitude,$longitude',
           queryParameters: {
             'z': '$zoomLevel',
-            'q': '$latitude,$longitude($formattedDateTime)',
+            'q': '$latitude,$longitude',
           },
         );
         if (await canLaunchUrl(uri)) {
@@ -46,7 +44,7 @@ class ExifMap extends StatelessWidget {
       } else if (Platform.isIOS) {
         var params = {
           'll': '$latitude,$longitude',
-          'q': formattedDateTime,
+          'q': '$latitude,$longitude',
           'z': '$zoomLevel',
         };
         Uri uri = Uri.https('maps.apple.com', '/', params);
@@ -63,32 +61,29 @@ class ExifMap extends StatelessWidget {
       );
     }
 
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 16.0),
-      child: LayoutBuilder(
-        builder: (context, constraints) {
-          return MapThumbnail(
-            centre: LatLng(
-              exifInfo.latitude ?? 0,
-              exifInfo.longitude ?? 0,
-            ),
-            height: 150,
-            width: constraints.maxWidth,
-            zoom: 12.0,
-            assetMarkerRemoteId: markerId,
-            onTap: (tapPosition, latLong) async {
-              Uri? uri = await createCoordinatesUri();
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return MapThumbnail(
+          centre: LatLng(
+            exifInfo.latitude ?? 0,
+            exifInfo.longitude ?? 0,
+          ),
+          height: 150,
+          width: constraints.maxWidth,
+          zoom: 12.0,
+          assetMarkerRemoteId: markerId,
+          onTap: (tapPosition, latLong) async {
+            Uri? uri = await createCoordinatesUri();
 
-              if (uri == null) {
-                return;
-              }
+            if (uri == null) {
+              return;
+            }
 
-              debugPrint('Opening Map Uri: $uri');
-              launchUrl(uri);
-            },
-          );
-        },
-      ),
+            debugPrint('Opening Map Uri: $uri');
+            launchUrl(uri);
+          },
+        );
+      },
     );
   }
 }

mobile/lib/widgets/asset_viewer/detail_panel/file_info.dart

@@ -3,10 +3,10 @@ import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/utils/bytes_units.dart';
 
-class ExifImageProperties extends StatelessWidget {
+class FileInfo extends StatelessWidget {
   final Asset asset;
 
-  const ExifImageProperties({
+  const FileInfo({
     super.key,
     required this.asset,
   });

mobile/lib/widgets/asset_viewer/detail_panel/people_info.dart

@@ -0,0 +1,102 @@
+import 'dart:math' as math;
+
+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/asset_viewer/asset_people.provider.dart';
+import 'package:immich_mobile/models/search/search_curated_content.model.dart';
+import 'package:immich_mobile/widgets/search/curated_people_row.dart';
+import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+
+class PeopleInfo extends ConsumerWidget {
+  final Asset asset;
+  final EdgeInsets? padding;
+
+  const PeopleInfo({super.key, required this.asset, this.padding});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final peopleProvider =
+        ref.watch(assetPeopleNotifierProvider(asset).notifier);
+    final people = ref
+        .watch(assetPeopleNotifierProvider(asset))
+        .value
+        ?.where((p) => !p.isHidden);
+    final double imageSize = math.min(context.width / 3, 150);
+
+    showPersonNameEditModel(
+      String personId,
+      String personName,
+    ) {
+      return showDialog(
+        context: context,
+        builder: (BuildContext context) {
+          return PersonNameEditForm(personId: personId, personName: personName);
+        },
+      ).then((_) {
+        // ensure the people list is up-to-date.
+        peopleProvider.refresh();
+      });
+    }
+
+    final curatedPeople = people
+            ?.map((p) => SearchCuratedContent(id: p.id, label: p.name))
+            .toList() ??
+        [];
+
+    return AnimatedCrossFade(
+      crossFadeState: (people?.isEmpty ?? true)
+          ? CrossFadeState.showFirst
+          : CrossFadeState.showSecond,
+      duration: const Duration(milliseconds: 200),
+      firstChild: Container(),
+      secondChild: Padding(
+        padding: const EdgeInsets.only(top: 8.0),
+        child: Column(
+          children: [
+            Padding(
+              padding: padding ?? EdgeInsets.zero,
+              child: Align(
+                alignment: Alignment.topLeft,
+                child: Text(
+                  "exif_bottom_sheet_people",
+                  style: context.textTheme.labelMedium?.copyWith(
+                    color: context.textTheme.labelMedium?.color?.withAlpha(200),
+                    fontWeight: FontWeight.w600,
+                  ),
+                ).tr(),
+              ),
+            ),
+            SizedBox(
+              height: imageSize,
+              child: Padding(
+                padding: const EdgeInsets.only(top: 16.0),
+                child: CuratedPeopleRow(
+                  padding: padding,
+                  content: curatedPeople,
+                  onTap: (content, index) {
+                    context
+                        .pushRoute(
+                          PersonResultRoute(
+                            personId: content.id,
+                            personName: content.label,
+                          ),
+                        )
+                        .then((_) => peopleProvider.refresh());
+                  },
+                  onNameTap: (person, index) => {
+                    showPersonNameEditModel(person.id, person.label),
+                  },
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/widgets/asset_viewer/exif_sheet/exif_bottom_sheet.dart

@@ -1,212 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/extensions/asset_extensions.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/extensions/duration_extensions.dart';
-import 'package:immich_mobile/widgets/asset_viewer/description_input.dart';
-import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_detail.dart';
-import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_image_properties.dart';
-import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_location.dart';
-import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_people.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/entities/exif_info.entity.dart';
-import 'package:immich_mobile/providers/asset.provider.dart';
-import 'package:immich_mobile/utils/selection_handlers.dart';
-
-class ExifBottomSheet extends HookConsumerWidget {
-  final Asset asset;
-
-  const ExifBottomSheet({super.key, required this.asset});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final assetWithExif = ref.watch(assetDetailProvider(asset));
-    var textColor = context.colorScheme.onSurface;
-    final ExifInfo? exifInfo = (assetWithExif.value ?? asset).exifInfo;
-    // Format the date time with the timezone
-    final (dt, timeZone) =
-        (assetWithExif.value ?? asset).getTZAdjustedTimeAndOffset();
-    final date = DateFormat.yMMMEd().format(dt);
-    final time = DateFormat.jm().format(dt);
-
-    String formattedDateTime = '$date • $time GMT${timeZone.formatAsOffset()}';
-
-    final dateWidget = Row(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      children: [
-        Text(
-          formattedDateTime,
-          style: const TextStyle(
-            fontWeight: FontWeight.bold,
-            fontSize: 14,
-          ),
-        ),
-        if (asset.isRemote)
-          IconButton(
-            onPressed: () => handleEditDateTime(
-              ref,
-              context,
-              [assetWithExif.value ?? asset],
-            ),
-            icon: const Icon(Icons.edit_outlined),
-            iconSize: 20,
-          ),
-      ],
-    );
-
-    return SingleChildScrollView(
-      padding: const EdgeInsets.only(
-        bottom: 50,
-      ),
-      child: LayoutBuilder(
-        builder: (context, constraints) {
-          final horizontalPadding = constraints.maxWidth > 600 ? 24.0 : 16.0;
-          if (constraints.maxWidth > 600) {
-            // Two column
-            return Column(
-              mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                Padding(
-                  padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
-                  child: Column(
-                    children: [
-                      dateWidget,
-                      if (asset.isRemote)
-                        DescriptionInput(asset: asset, exifInfo: exifInfo),
-                    ],
-                  ),
-                ),
-                ExifPeople(
-                  asset: asset,
-                  padding: EdgeInsets.symmetric(
-                    horizontal: horizontalPadding,
-                  ),
-                ),
-                Padding(
-                  padding: EdgeInsets.symmetric(
-                    horizontal: horizontalPadding,
-                  ),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.start,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Expanded(
-                        child: Padding(
-                          padding: const EdgeInsets.only(right: 8.0),
-                          child: ExifLocation(
-                            asset: asset,
-                            exifInfo: exifInfo,
-                            editLocation: () => handleEditLocation(
-                              ref,
-                              context,
-                              [assetWithExif.value ?? asset],
-                            ),
-                            formattedDateTime: formattedDateTime,
-                          ),
-                        ),
-                      ),
-                      ConstrainedBox(
-                        constraints: const BoxConstraints(maxWidth: 300),
-                        child: Padding(
-                          padding: const EdgeInsets.only(left: 8.0),
-                          child: ExifDetail(asset: asset, exifInfo: exifInfo),
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              ],
-            );
-          }
-
-          // One column
-          return Column(
-            mainAxisSize: MainAxisSize.min,
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              Padding(
-                padding: EdgeInsets.symmetric(
-                  horizontal: horizontalPadding,
-                ),
-                child: Column(
-                  children: [
-                    dateWidget,
-                    if (asset.isRemote)
-                      DescriptionInput(asset: asset, exifInfo: exifInfo),
-                    Padding(
-                      padding: EdgeInsets.only(top: asset.isRemote ? 0 : 16.0),
-                      child: ExifLocation(
-                        asset: asset,
-                        exifInfo: exifInfo,
-                        editLocation: () => handleEditLocation(
-                          ref,
-                          context,
-                          [assetWithExif.value ?? asset],
-                        ),
-                        formattedDateTime: formattedDateTime,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              Padding(
-                padding: const EdgeInsets.symmetric(vertical: 16.0),
-                child: ExifPeople(
-                  asset: asset,
-                  padding: EdgeInsets.symmetric(
-                    horizontal: horizontalPadding,
-                  ),
-                ),
-              ),
-              Padding(
-                padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Padding(
-                      padding: const EdgeInsets.only(bottom: 8.0),
-                      child: Text(
-                        "exif_bottom_sheet_details",
-                        style: context.textTheme.labelMedium?.copyWith(
-                          color: context.textTheme.labelMedium?.color
-                              ?.withAlpha(200),
-                          fontWeight: FontWeight.w600,
-                        ),
-                      ).tr(),
-                    ),
-                    ExifImageProperties(asset: asset),
-                    if (exifInfo?.make != null)
-                      ListTile(
-                        contentPadding: const EdgeInsets.all(0),
-                        dense: true,
-                        leading: Icon(
-                          Icons.camera,
-                          color: textColor.withAlpha(200),
-                        ),
-                        title: Text(
-                          "${exifInfo!.make} ${exifInfo.model}",
-                          style: context.textTheme.labelLarge,
-                        ),
-                        subtitle: exifInfo.f != null ||
-                                exifInfo.exposureSeconds != null ||
-                                exifInfo.mm != null ||
-                                exifInfo.iso != null
-                            ? Text(
-                                "ƒ/${exifInfo.fNumber}   ${exifInfo.exposureTime}   ${exifInfo.focalLength} mm   ISO ${exifInfo.iso ?? ''} ",
-                                style: context.textTheme.bodySmall,
-                              )
-                            : null,
-                      ),
-                  ],
-                ),
-              ),
-              const SizedBox(height: 50),
-            ],
-          );
-        },
-      ),
-    );
-  }
-}

mobile/lib/widgets/asset_viewer/exif_sheet/exif_detail.dart

@@ -1,60 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_image_properties.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/entities/exif_info.entity.dart';
-
-class ExifDetail extends StatelessWidget {
-  final Asset asset;
-  final ExifInfo? exifInfo;
-
-  const ExifDetail({
-    super.key,
-    required this.asset,
-    this.exifInfo,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final textColor = context.isDarkTheme ? Colors.white : Colors.black;
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Padding(
-          padding: const EdgeInsets.only(bottom: 8.0),
-          child: Text(
-            "exif_bottom_sheet_details",
-            style: context.textTheme.labelMedium?.copyWith(
-              color: context.textTheme.labelMedium?.color?.withAlpha(200),
-              fontWeight: FontWeight.w600,
-            ),
-          ).tr(),
-        ),
-        ExifImageProperties(asset: asset),
-        if (exifInfo?.make != null)
-          ListTile(
-            contentPadding: const EdgeInsets.all(0),
-            dense: true,
-            leading: Icon(
-              Icons.camera,
-              color: textColor.withAlpha(200),
-            ),
-            title: Text(
-              "${exifInfo?.make} ${exifInfo?.model}",
-              style: context.textTheme.labelLarge,
-            ),
-            subtitle: exifInfo?.f != null ||
-                    exifInfo?.exposureSeconds != null ||
-                    exifInfo?.mm != null ||
-                    exifInfo?.iso != null
-                ? Text(
-                    "ƒ/${exifInfo?.fNumber}   ${exifInfo?.exposureTime}   ${exifInfo?.focalLength} mm   ISO ${exifInfo?.iso ?? ''} ",
-                    style: context.textTheme.bodySmall,
-                  )
-                : null,
-          ),
-      ],
-    );
-  }
-}

mobile/lib/widgets/asset_viewer/exif_sheet/exif_location.dart

@@ -1,105 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/widgets/asset_viewer/exif_sheet/exif_map.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/entities/exif_info.entity.dart';
-
-class ExifLocation extends StatelessWidget {
-  final Asset asset;
-  final ExifInfo? exifInfo;
-  final void Function() editLocation;
-  final String formattedDateTime;
-
-  const ExifLocation({
-    super.key,
-    required this.asset,
-    required this.exifInfo,
-    required this.editLocation,
-    required this.formattedDateTime,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final hasCoordinates = exifInfo?.hasCoordinates ?? false;
-    // Guard no lat/lng
-    if (!hasCoordinates) {
-      return asset.isRemote
-          ? ListTile(
-              minLeadingWidth: 0,
-              contentPadding: const EdgeInsets.all(0),
-              leading: const Icon(Icons.location_on),
-              title: Text(
-                "exif_bottom_sheet_location_add",
-                style: context.textTheme.bodyMedium?.copyWith(
-                  fontWeight: FontWeight.w600,
-                  color: context.primaryColor,
-                ),
-              ).tr(),
-              onTap: editLocation,
-            )
-          : const SizedBox.shrink();
-    }
-
-    return Column(
-      children: [
-        // Location
-        Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Text(
-                  "exif_bottom_sheet_location",
-                  style: context.textTheme.labelMedium?.copyWith(
-                    color: context.textTheme.labelMedium?.color?.withAlpha(200),
-                    fontWeight: FontWeight.w600,
-                  ),
-                ).tr(),
-                if (asset.isRemote)
-                  IconButton(
-                    onPressed: editLocation,
-                    icon: const Icon(Icons.edit_outlined),
-                    iconSize: 20,
-                  ),
-              ],
-            ),
-            ExifMap(
-              exifInfo: exifInfo!,
-              formattedDateTime: formattedDateTime,
-              markerId: asset.remoteId,
-            ),
-            RichText(
-              text: TextSpan(
-                style: context.textTheme.labelLarge,
-                children: [
-                  if (exifInfo != null && exifInfo?.city != null)
-                    TextSpan(
-                      text: exifInfo!.city,
-                    ),
-                  if (exifInfo != null &&
-                      exifInfo?.city != null &&
-                      exifInfo?.state != null)
-                    const TextSpan(
-                      text: ", ",
-                    ),
-                  if (exifInfo != null && exifInfo?.state != null)
-                    TextSpan(
-                      text: exifInfo!.state,
-                    ),
-                ],
-              ),
-            ),
-            Text(
-              "${exifInfo!.latitude!.toStringAsFixed(4)}, ${exifInfo!.longitude!.toStringAsFixed(4)}",
-              style: context.textTheme.labelMedium?.copyWith(
-                color: context.textTheme.labelMedium?.color?.withAlpha(150),
-              ),
-            ),
-          ],
-        ),
-      ],
-    );
-  }
-}

mobile/lib/widgets/asset_viewer/exif_sheet/exif_people.dart

@@ -1,97 +0,0 @@
-import 'dart:math' as math;
-
-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/asset_viewer/asset_people.provider.dart';
-import 'package:immich_mobile/models/search/search_curated_content.model.dart';
-import 'package:immich_mobile/widgets/search/curated_people_row.dart';
-import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-
-class ExifPeople extends ConsumerWidget {
-  final Asset asset;
-  final EdgeInsets? padding;
-
-  const ExifPeople({super.key, required this.asset, this.padding});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final peopleProvider =
-        ref.watch(assetPeopleNotifierProvider(asset).notifier);
-    final people = ref
-        .watch(assetPeopleNotifierProvider(asset))
-        .value
-        ?.where((p) => !p.isHidden);
-    final double imageSize = math.min(context.width / 3, 150);
-
-    showPersonNameEditModel(
-      String personId,
-      String personName,
-    ) {
-      return showDialog(
-        context: context,
-        builder: (BuildContext context) {
-          return PersonNameEditForm(personId: personId, personName: personName);
-        },
-      ).then((_) {
-        // ensure the people list is up-to-date.
-        peopleProvider.refresh();
-      });
-    }
-
-    if (people?.isEmpty ?? true) {
-      // Empty list or loading
-      return Container();
-    }
-
-    final curatedPeople = people
-            ?.map((p) => SearchCuratedContent(id: p.id, label: p.name))
-            .toList() ??
-        [];
-
-    return Column(
-      children: [
-        Padding(
-          padding: padding ?? EdgeInsets.zero,
-          child: Align(
-            alignment: Alignment.topLeft,
-            child: Text(
-              "exif_bottom_sheet_people",
-              style: context.textTheme.labelMedium?.copyWith(
-                color: context.textTheme.labelMedium?.color?.withAlpha(200),
-                fontWeight: FontWeight.w600,
-              ),
-            ).tr(),
-          ),
-        ),
-        SizedBox(
-          height: imageSize,
-          child: Padding(
-            padding: const EdgeInsets.only(top: 8.0),
-            child: CuratedPeopleRow(
-              padding: padding,
-              content: curatedPeople,
-              onTap: (content, index) {
-                context
-                    .pushRoute(
-                      PersonResultRoute(
-                        personId: content.id,
-                        personName: content.label,
-                      ),
-                    )
-                    .then((_) => peopleProvider.refresh());
-              },
-              onNameTap: (person, index) => {
-                showPersonNameEditModel(person.id, person.label),
-              },
-            ),
-          ),
-        ),
-      ],
-    );
-  }
-}