Merge branch 'immich-app:main' into fix/hide-thumbnail-placeholder-during-hero

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

@@ -7,7 +7,7 @@ import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
 import 'package:immich_mobile/domain/services/timeline.service.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';

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

@@ -1,17 +1,7 @@
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
-class ViewerOpenBottomSheetEvent extends Event {
-  final bool activitiesMode;
-  const ViewerOpenBottomSheetEvent({this.activitiesMode = false});
-}
-
-class ViewerReloadAssetEvent extends Event {
-  const ViewerReloadAssetEvent();
-}
-
 class AssetViewerState {
   final int backgroundOpacity;
   final bool showingBottomSheet;

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

@@ -38,11 +38,13 @@ class ViewerBottomBar extends ConsumerWidget {
       opacity = 0;
     }
 
+    final originalTheme = context.themeData;
+
     final actions = <Widget>[
       const ShareActionButton(source: ActionSource.viewer),
       if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
       if (asset.type == AssetType.image) const EditImageActionButton(),
-      if (asset.hasRemote) const AddActionButton(),
+      if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
 
       if (isOwner) ...[
         asset.isLocalOnly

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

@@ -10,6 +10,7 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_tile.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
@@ -29,6 +30,7 @@ import 'package:immich_mobile/repositories/asset_media.repository.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/action_button.utils.dart';
 import 'package:immich_mobile/utils/bytes_units.dart';
+import 'package:immich_mobile/utils/timezone.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 const _kSeparator = '  •  ';
@@ -85,13 +87,21 @@ class AssetDetailBottomSheet extends ConsumerWidget {
 class _AssetDetailBottomSheet extends ConsumerWidget {
   const _AssetDetailBottomSheet();
 
-  String _getDateTime(BuildContext ctx, BaseAsset asset) {
-    final dateTime = asset.createdAt.toLocal();
+  String _getDateTime(BuildContext ctx, BaseAsset asset, ExifInfo? exifInfo) {
+    DateTime dateTime = asset.createdAt.toLocal();
+    Duration timeZoneOffset = dateTime.timeZoneOffset;
+
+    // Use EXIF timezone information if available (matching web app behavior)
+    if (exifInfo?.dateTimeOriginal != null) {
+      (dateTime, timeZoneOffset) = applyTimezoneOffset(
+        dateTime: exifInfo!.dateTimeOriginal!,
+        timeZone: exifInfo.timeZone,
+      );
+    }
+
     final date = DateFormat.yMMMEd(ctx.locale.toLanguageTag()).format(dateTime);
     final time = DateFormat.jm(ctx.locale.toLanguageTag()).format(dateTime);
-    final timezone = dateTime.timeZoneOffset.isNegative
-        ? 'UTC-${dateTime.timeZoneOffset.inHours.abs().toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}'
-        : 'UTC+${dateTime.timeZoneOffset.inHours.toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}';
+    final timezone = 'GMT${timeZoneOffset.formatAsOffset()}';
     return '$date$_kSeparator$time $timezone';
   }
 
@@ -241,8 +251,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
                 color: context.textTheme.labelLarge?.color,
               ),
               subtitle: _getFileInfo(asset, exifInfo),
-              subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-                color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+              subtitleStyle: context.textTheme.labelMedium?.copyWith(
+                color: context.textTheme.labelMedium?.color?.withAlpha(200),
               ),
             );
           },
@@ -258,8 +268,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
             color: context.textTheme.labelLarge?.color,
           ),
           subtitle: _getFileInfo(asset, exifInfo),
-          subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-            color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+          subtitleStyle: context.textTheme.labelMedium?.copyWith(
+            color: context.textTheme.labelMedium?.color?.withAlpha(200),
           ),
         );
       }
@@ -269,8 +279,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
       children: [
         // Asset Date and Time
         SheetTile(
-          title: _getDateTime(context, asset),
-          titleStyle: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
+          title: _getDateTime(context, asset, exifInfo),
+          titleStyle: context.textTheme.labelLarge,
           trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
           onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,
         ),
@@ -279,7 +289,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         const SheetLocationDetails(),
         // Details header
         SheetTile(
-          title: 'exif_bottom_sheet_details'.t(context: context),
+          title: 'details'.t(context: context).toUpperCase(),
           titleStyle: context.textTheme.labelMedium?.copyWith(
             color: context.textTheme.labelMedium?.color?.withAlpha(200),
             fontWeight: FontWeight.w600,
@@ -288,29 +298,33 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         // File info
         buildFileInfoTile(),
         // Camera info
-        if (cameraTitle != null)
+        if (cameraTitle != null) ...[
+          const SizedBox(height: 16),
           SheetTile(
             title: cameraTitle,
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_alt_outlined, size: 24, color: context.textTheme.labelLarge?.color),
             subtitle: _getCameraInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-              color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+            subtitleStyle: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(200),
             ),
           ),
+        ],
         // Lens info
-        if (lensTitle != null)
+        if (lensTitle != null) ...[
+          const SizedBox(height: 16),
           SheetTile(
             title: lensTitle,
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
             subtitle: _getLensInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.bodyMedium?.copyWith(
-              color: context.textTheme.bodyMedium?.color?.withAlpha(155),
+            subtitleStyle: context.textTheme.labelMedium?.copyWith(
+              color: context.textTheme.labelMedium?.color?.withAlpha(200),
             ),
           ),
+        ],
         // Appears in (Albums)
-        _buildAppearsInList(ref, context),
+        Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
         // padding at the bottom to avoid cut-off
         const SizedBox(height: 100),
       ],

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

@@ -78,7 +78,7 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           SheetTile(
-            title: 'exif_bottom_sheet_location'.t(context: context),
+            title: 'location'.t(context: context).toUpperCase(),
             titleStyle: context.textTheme.labelMedium?.copyWith(
               color: context.textTheme.labelMedium?.color?.withAlpha(200),
               fontWeight: FontWeight.w600,
@@ -102,7 +102,7 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
                   Text(
                     coordinates,
                     style: context.textTheme.labelMedium?.copyWith(
-                      color: context.textTheme.labelMedium?.color?.withAlpha(150),
+                      color: context.textTheme.labelMedium?.color?.withAlpha(200),
                     ),
                   ),
                 ],

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

@@ -46,7 +46,7 @@ class SheetTile extends ConsumerWidget {
     } else {
       titleWidget = Container(
         width: double.infinity,
-        padding: const EdgeInsets.only(left: 15),
+        padding: const EdgeInsets.only(left: 15, right: 15),
         child: Text(title, style: titleStyle),
       );
     }

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

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/timeline.model.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
 import 'package:immich_mobile/domain/services/timeline.service.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
@@ -14,6 +14,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_actio
 import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
 import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
@@ -65,8 +66,8 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
 
     final actions = <Widget>[
-      if (asset.isRemoteOnly) const DownloadActionButton(source: ActionSource.viewer, menuItem: true),
-      if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
+      if (asset.isRemoteOnly) const DownloadActionButton(source: ActionSource.viewer, iconOnly: true),
+      if (isCasting || (asset.hasRemote)) const CastActionButton(iconOnly: true),
       if (album != null && album.isActivityEnabled && album.isShared)
         IconButton(
           icon: const Icon(Icons.chat_outlined),
@@ -85,16 +86,16 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
           tooltip: 'view_in_timeline'.t(context: context),
         ),
       if (asset.hasRemote && isOwner && !asset.isFavorite)
-        const FavoriteActionButton(source: ActionSource.viewer, menuItem: true),
+        const FavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
       if (asset.hasRemote && isOwner && asset.isFavorite)
-        const UnFavoriteActionButton(source: ActionSource.viewer, menuItem: true),
-      if (asset.isMotionPhoto) const MotionPhotoActionButton(menuItem: true),
-      const _KebabMenu(),
+        const UnFavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
+      if (asset.isMotionPhoto) const MotionPhotoActionButton(iconOnly: true),
+      const ViewerKebabMenu(),
     ];
 
     final lockedViewActions = <Widget>[
-      if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
-      const _KebabMenu(),
+      if (isCasting || (asset.hasRemote)) const CastActionButton(iconOnly: true),
+      const ViewerKebabMenu(),
     ];
 
     return IgnorePointer(
@@ -122,20 +123,6 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
   Size get preferredSize => const Size.fromHeight(60.0);
 }
 
-class _KebabMenu extends ConsumerWidget {
-  const _KebabMenu();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return IconButton(
-      onPressed: () {
-        EventStream.shared.emit(const ViewerOpenBottomSheetEvent());
-      },
-      icon: const Icon(Icons.more_vert_rounded),
-    );
-  }
-}
-
 class _AppBarBackButton extends ConsumerWidget {
   const _AppBarBackButton();
 

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

@@ -0,0 +1,47 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+
+class ViewerKebabMenu extends ConsumerWidget {
+  const ViewerKebabMenu({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final menuChildren = <Widget>[
+      BaseActionButton(
+        label: 'about'.tr(),
+        iconData: Icons.info_outline,
+        menuItem: true,
+        onPressed: () => EventStream.shared.emit(const ViewerOpenBottomSheetEvent()),
+      ),
+    ];
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(context.themeData.scaffoldBackgroundColor),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+      ),
+      menuChildren: menuChildren,
+      builder: (context, controller, child) {
+        return IconButton(
+          icon: const Icon(Icons.more_vert_rounded),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
+        );
+      },
+    );
+  }
+}