diff --git a/mobile/lib/presentation/pages/drift_activities.page.dart b/mobile/lib/presentation/pages/drift_activities.page.dart index 30e7dd497a..b92d429aa1 100644 --- a/mobile/lib/presentation/pages/drift_activities.page.dart +++ b/mobile/lib/presentation/pages/drift_activities.page.dart @@ -3,21 +3,13 @@ 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/domain/models/album/album.model.dart'; -import 'package:immich_mobile/domain/models/asset/base_asset.model.dart'; import 'package:immich_mobile/extensions/asyncvalue_extensions.dart'; import 'package:immich_mobile/extensions/build_context_extensions.dart'; -import 'package:immich_mobile/extensions/datetime_extensions.dart'; -import 'package:immich_mobile/models/activities/activity.model.dart'; +import 'package:immich_mobile/widgets/activities/comment_bubble.dart'; import 'package:immich_mobile/presentation/widgets/action_buttons/like_activity_action_button.widget.dart'; import 'package:immich_mobile/presentation/widgets/album/drift_activity_text_field.dart'; import 'package:immich_mobile/providers/activity.provider.dart'; -import 'package:immich_mobile/providers/activity_service.provider.dart'; -import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart'; -import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart'; import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart'; -import 'package:immich_mobile/providers/user.provider.dart'; -import 'package:immich_mobile/widgets/activities/dismissible_activity.dart'; -import 'package:immich_mobile/widgets/common/user_circle_avatar.dart'; @RoutePage() class DriftActivitiesPage extends HookConsumerWidget { @@ -27,10 +19,8 @@ class DriftActivitiesPage extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { - final asset = ref.read(currentAssetNotifier) as RemoteAsset?; - - final activityNotifier = ref.read(albumActivityProvider(album.id, asset?.id).notifier); - final activities = ref.watch(albumActivityProvider(album.id, asset?.id)); + final activityNotifier = ref.read(albumActivityProvider(album.id).notifier); + final activities = ref.watch(albumActivityProvider(album.id)); final listViewScrollController = useScrollController(); void scrollToBottom() { @@ -46,7 +36,7 @@ class DriftActivitiesPage extends HookConsumerWidget { overrides: [currentRemoteAlbumScopedProvider.overrideWithValue(album)], child: Scaffold( appBar: AppBar( - title: asset == null ? Text(album.name) : null, + title: Text(album.name), actions: [const LikeActivityActionButton(menuItem: true)], actionsPadding: const EdgeInsets.only(right: 8), ), @@ -57,7 +47,7 @@ class DriftActivitiesPage extends HookConsumerWidget { activityWidgets.add( Padding( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6), - child: _CommentBubble(activity: activity), + child: CommentBubble(activity: activity), ), ); } @@ -91,139 +81,3 @@ class DriftActivitiesPage extends HookConsumerWidget { ); } } - -class _CommentBubble extends ConsumerWidget { - final Activity activity; - - const _CommentBubble({required this.activity}); - - @override - Widget build(BuildContext context, WidgetRef ref) { - final user = ref.watch(currentUserProvider); - final album = ref.watch(currentRemoteAlbumProvider)!; - final isOwn = activity.user.id == user?.id; - final canDelete = isOwn || album.ownerId == user?.id; - final hasAsset = activity.assetId != null && activity.assetId!.isNotEmpty; - final isLike = activity.type == ActivityType.like; - final bgColor = isOwn ? context.colorScheme.primaryContainer : context.colorScheme.surfaceContainer; - - final activityNotifier = ref.read(albumActivityProvider(album.id, activity.assetId).notifier); - - Future openAssetViewer() async { - final activityService = ref.read(activityServiceProvider); - final route = await activityService.buildAssetViewerRoute(activity.assetId!, ref); - if (route != null) await context.pushRoute(route); - } - - Widget avatar() { - if (isOwn) { - return const SizedBox.shrink(); - } - - return UserCircleAvatar(user: activity.user, size: 28, radius: 14); - } - - Widget? thumbnail() { - if (!hasAsset) { - return null; - } - - return ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 150, maxHeight: 150), - child: Stack( - children: [ - GestureDetector( - onTap: openAssetViewer, - child: ClipRRect( - borderRadius: const BorderRadius.all(Radius.circular(10)), - child: Image( - image: ImmichRemoteThumbnailProvider(assetId: activity.assetId!), - fit: BoxFit.cover, - ), - ), - ), - if (isLike) - Positioned( - right: 6, - bottom: 6, - child: Container( - padding: const EdgeInsets.all(4), - decoration: BoxDecoration(color: Colors.white.withValues(alpha: 0.7), shape: BoxShape.circle), - child: Icon(Icons.favorite, color: Colors.red[600], size: 18), - ), - ), - ], - ), - ); - } - - // Likes Album widget (for likes without asset) - Widget? likesToAlbum() { - if (!isLike || hasAsset) { - return null; - } - - return Container( - padding: const EdgeInsets.all(8), - decoration: BoxDecoration(color: Colors.white.withValues(alpha: 0.7), shape: BoxShape.circle), - child: Icon(Icons.favorite, color: Colors.red[600], size: 18), - ); - } - - Widget? commentBubble() { - if (activity.comment == null || activity.comment!.isEmpty) { - return null; - } - - return ConstrainedBox( - constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.5), - child: Container( - padding: const EdgeInsets.all(10), - decoration: BoxDecoration(color: bgColor, borderRadius: const BorderRadius.all(Radius.circular(12))), - child: Text( - activity.comment ?? '', - style: context.textTheme.bodyLarge?.copyWith(color: context.colorScheme.onSurface), - ), - ), - ); - } - - // Combined content widgets - final List contentChildren = [thumbnail(), likesToAlbum(), commentBubble()].whereType().toList(); - - return DismissibleActivity( - onDismiss: canDelete ? (id) async => await activityNotifier.removeActivity(id) : null, - activity.id, - Align( - alignment: isOwn ? Alignment.centerRight : Alignment.centerLeft, - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.86), - child: Container( - margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 10), - child: Row( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (!isOwn) ...[avatar(), const SizedBox(width: 8)], - // Content column - Column( - crossAxisAlignment: isOwn ? CrossAxisAlignment.end : CrossAxisAlignment.start, - children: [ - ...contentChildren.map((w) => Padding(padding: const EdgeInsets.only(bottom: 8.0), child: w)), - Text( - '${activity.user.name} • ${activity.createdAt.timeAgo()}', - style: context.textTheme.labelMedium?.copyWith( - color: context.colorScheme.onSurface.withValues(alpha: 0.6), - ), - ), - ], - ), - if (isOwn) const SizedBox(width: 8), - ], - ), - ), - ), - ), - ); - } -} diff --git a/mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart index 81e64bed89..63669495b9 100644 --- a/mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart +++ b/mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart @@ -3,14 +3,12 @@ import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:immich_mobile/domain/models/asset/base_asset.model.dart'; import 'package:immich_mobile/extensions/asyncvalue_extensions.dart'; import 'package:immich_mobile/extensions/build_context_extensions.dart'; +import 'package:immich_mobile/widgets/activities/comment_bubble.dart'; import 'package:immich_mobile/presentation/widgets/album/drift_activity_text_field.dart'; import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart'; import 'package:immich_mobile/providers/activity.provider.dart'; import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart'; import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart'; -import 'package:immich_mobile/providers/user.provider.dart'; -import 'package:immich_mobile/widgets/activities/activity_tile.dart'; -import 'package:immich_mobile/widgets/activities/dismissible_activity.dart'; class ActivitiesBottomSheet extends HookConsumerWidget { final DraggableScrollableController controller; @@ -28,7 +26,6 @@ class ActivitiesBottomSheet extends HookConsumerWidget { Widget build(BuildContext context, WidgetRef ref) { final album = ref.watch(currentRemoteAlbumProvider)!; final asset = ref.watch(currentAssetNotifier) as RemoteAsset?; - final user = ref.watch(currentUserProvider); final activityNotifier = ref.read(albumActivityProvider(album.id, asset?.id).notifier); final activities = ref.watch(albumActivityProvider(album.id, asset?.id)); @@ -47,16 +44,9 @@ class ActivitiesBottomSheet extends HookConsumerWidget { return const SizedBox.shrink(); } final activity = data[data.length - 1 - index]; - final canDelete = activity.user.id == user?.id || album.ownerId == user?.id; return Padding( - padding: const EdgeInsets.symmetric(vertical: 1), - child: DismissibleActivity( - activity.id, - ActivityTile(activity, isBottomSheet: true), - onDismiss: canDelete - ? (activityId) async => await activityNotifier.removeActivity(activity.id) - : null, - ), + padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), + child: CommentBubble(activity: activity, isAssetActivity: true), ); }, childCount: data.length + 1), ); diff --git a/mobile/lib/widgets/activities/comment_bubble.dart b/mobile/lib/widgets/activities/comment_bubble.dart new file mode 100644 index 0000000000..11d5c21cec --- /dev/null +++ b/mobile/lib/widgets/activities/comment_bubble.dart @@ -0,0 +1,143 @@ +import 'package:auto_route/auto_route.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/extensions/datetime_extensions.dart'; +import 'package:immich_mobile/models/activities/activity.model.dart'; +import 'package:immich_mobile/providers/activity.provider.dart'; +import 'package:immich_mobile/providers/activity_service.provider.dart'; +import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart'; +import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart'; +import 'package:immich_mobile/providers/user.provider.dart'; +import 'package:immich_mobile/widgets/activities/dismissible_activity.dart'; +import 'package:immich_mobile/widgets/common/user_circle_avatar.dart'; + +class CommentBubble extends ConsumerWidget { + final Activity activity; + final bool isAssetActivity; + + const CommentBubble({super.key, required this.activity, this.isAssetActivity = false}); + + @override + Widget build(BuildContext context, WidgetRef ref) { + final user = ref.watch(currentUserProvider); + final album = ref.watch(currentRemoteAlbumProvider)!; + final isOwn = activity.user.id == user?.id; + final canDelete = isOwn || album.ownerId == user?.id; + final showThumbnail = !isAssetActivity && activity.assetId != null && activity.assetId!.isNotEmpty; + final isLike = activity.type == ActivityType.like; + final bgColor = isOwn ? context.colorScheme.primaryContainer : context.colorScheme.surfaceContainer; + + final activityNotifier = ref.read( + albumActivityProvider(album.id, isAssetActivity ? activity.assetId : null).notifier, + ); + + Future openAssetViewer() async { + final activityService = ref.read(activityServiceProvider); + final route = await activityService.buildAssetViewerRoute(activity.assetId!, ref); + if (route != null) await context.pushRoute(route); + } + + // avatar (hidden for own messages) + Widget avatar = const SizedBox.shrink(); + if (!isOwn) { + avatar = UserCircleAvatar(user: activity.user, size: 28, radius: 14); + } + + // Thumbnail with tappable behavior and optional heart overlay + Widget? thumbnail; + if (showThumbnail) { + thumbnail = ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 150, maxHeight: 150), + child: Stack( + children: [ + GestureDetector( + onTap: openAssetViewer, + child: ClipRRect( + borderRadius: const BorderRadius.all(Radius.circular(10)), + child: Image( + image: ImmichRemoteThumbnailProvider(assetId: activity.assetId!), + fit: BoxFit.cover, + ), + ), + ), + if (isLike) + Positioned( + right: 6, + bottom: 6, + child: Container( + padding: const EdgeInsets.all(4), + decoration: BoxDecoration(color: Colors.white.withValues(alpha: 0.7), shape: BoxShape.circle), + child: Icon(Icons.favorite, color: Colors.red[600], size: 18), + ), + ), + ], + ), + ); + } + + // Likes widget + Widget? likes; + if (isLike && !showThumbnail) { + likes = Container( + padding: const EdgeInsets.all(8), + decoration: BoxDecoration(color: Colors.white.withValues(alpha: 0.7), shape: BoxShape.circle), + child: Icon(Icons.favorite, color: Colors.red[600], size: 18), + ); + } + + // Comment bubble, comment-only + Widget? commentBubble; + if (activity.comment != null && activity.comment!.isNotEmpty) { + commentBubble = ConstrainedBox( + constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.5), + child: Container( + padding: const EdgeInsets.all(10), + decoration: BoxDecoration(color: bgColor, borderRadius: const BorderRadius.all(Radius.circular(12))), + child: Text( + activity.comment ?? '', + style: context.textTheme.bodyLarge?.copyWith(color: context.colorScheme.onSurface), + ), + ), + ); + } + + // Combined content widgets + final List contentChildren = [thumbnail, likes, commentBubble].whereType().toList(); + + return DismissibleActivity( + onDismiss: canDelete ? (id) async => await activityNotifier.removeActivity(id) : null, + activity.id, + Align( + alignment: isOwn ? Alignment.centerRight : Alignment.centerLeft, + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.86), + child: Container( + margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 10), + child: Row( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (!isOwn) ...[avatar, const SizedBox(width: 8)], + // Content column + Column( + crossAxisAlignment: isOwn ? CrossAxisAlignment.end : CrossAxisAlignment.start, + children: [ + ...contentChildren.map((w) => Padding(padding: const EdgeInsets.only(bottom: 8.0), child: w)), + Text( + '${activity.user.name} • ${activity.createdAt.timeAgo()}', + style: context.textTheme.labelMedium?.copyWith( + color: context.colorScheme.onSurface.withValues(alpha: 0.6), + ), + ), + ], + ), + if (isOwn) const SizedBox(width: 8), + ], + ), + ), + ), + ), + ); + } +}