feat(mobile): shared album activities (#20714)

* feat(mobile): shared album activities

* add like buttons and fix behavior of unliking

* fix: conditionally show activity button and fix title truncations

* fix(mobile): newest/oldest album sort (#20743)

* fix(mobile): newest/oldest album sort

* chore: use sqlite to determine album asset timestamps

* Fix missing future

Co-authored-by: Alex <alex.tran1502@gmail.com>

* fix: async handling of sort

* chore: tests

* chore: code review changes

* fix: use created at for newest asset

* fix: use localDateTime for sorting

* chore: cleanup

* chore: use final

* feat: loading indicator

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

mobile/lib/presentation/widgets/action_buttons/like_activity_action_button.widget.dart

@@ -0,0 +1,63 @@
+import 'package:collection/collection.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/extensions/translate_extensions.dart';
+import 'package:immich_mobile/models/activities/activity.model.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.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';
+
+class LikeActivityActionButton extends ConsumerWidget {
+  const LikeActivityActionButton({super.key, this.menuItem = false});
+
+  final bool menuItem;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final album = ref.watch(currentRemoteAlbumProvider);
+    final asset = ref.watch(currentAssetNotifier) as RemoteAsset?;
+    final user = ref.watch(currentUserProvider);
+
+    final activities = ref.watch(albumActivityProvider(album?.id ?? "", asset?.id));
+
+    onTap(Activity? liked) async {
+      if (user == null) {
+        return;
+      }
+
+      if (liked != null) {
+        await ref.read(albumActivityProvider(album?.id ?? "", asset?.id).notifier).removeActivity(liked.id);
+      } else {
+        await ref.read(albumActivityProvider(album?.id ?? "", asset?.id).notifier).addLike();
+      }
+
+      ref.invalidate(albumActivityProvider(album?.id ?? "", asset?.id));
+    }
+
+    return activities.when(
+      data: (data) {
+        final liked = data.firstWhereOrNull(
+          (a) => a.type == ActivityType.like && a.user.id == user?.id && a.assetId == asset?.id,
+        );
+
+        return BaseActionButton(
+          iconData: liked != null ? Icons.favorite : Icons.favorite_border,
+          label: "like".t(context: context),
+          onPressed: () => onTap(liked),
+          menuItem: menuItem,
+        );
+      },
+
+      // default to empty heart during loading
+      loading: () => BaseActionButton(
+        iconData: Icons.favorite_border,
+        label: "like".t(context: context),
+        menuItem: menuItem,
+      ),
+      error: (error, stack) => Text("Error: $error"),
+    );
+  }
+}

mobile/lib/presentation/widgets/album/drift_activity_text_field.dart

@@ -0,0 +1,109 @@
+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/user.provider.dart';
+import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
+
+class DriftActivityTextField extends ConsumerStatefulWidget {
+  final bool isEnabled;
+  final String? likeId;
+  final Function(String) onSubmit;
+  final Function()? onKeyboardFocus;
+
+  const DriftActivityTextField({
+    required this.onSubmit,
+    this.isEnabled = true,
+    this.likeId,
+    this.onKeyboardFocus,
+    super.key,
+  });
+
+  @override
+  ConsumerState<DriftActivityTextField> createState() => _DriftActivityTextFieldState();
+}
+
+class _DriftActivityTextFieldState extends ConsumerState<DriftActivityTextField> {
+  late FocusNode inputFocusNode;
+  late TextEditingController inputController;
+  bool sendEnabled = false;
+
+  @override
+  void initState() {
+    super.initState();
+    inputController = TextEditingController();
+    inputFocusNode = FocusNode();
+
+    inputFocusNode.requestFocus();
+
+    inputFocusNode.addListener(() {
+      if (inputFocusNode.hasFocus) {
+        widget.onKeyboardFocus?.call();
+      }
+    });
+
+    inputController.addListener(() {
+      setState(() {
+        sendEnabled = inputController.text.trim().isNotEmpty;
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    inputController.dispose();
+    inputFocusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final user = ref.watch(currentUserProvider);
+
+    // Pass text to callback and reset controller
+    void onEditingComplete() {
+      if (inputController.text.trim().isEmpty) {
+        return;
+      }
+
+      widget.onSubmit(inputController.text);
+      inputController.clear();
+      inputFocusNode.unfocus();
+    }
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 10),
+      child: TextField(
+        controller: inputController,
+        enabled: widget.isEnabled,
+        focusNode: inputFocusNode,
+        textInputAction: TextInputAction.send,
+        autofocus: false,
+        decoration: InputDecoration(
+          isDense: true,
+          contentPadding: const EdgeInsets.symmetric(vertical: 12), // Adjust as needed
+          border: InputBorder.none,
+          focusedBorder: InputBorder.none,
+          enabledBorder: InputBorder.none,
+          prefixIcon: user != null
+              ? Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 15),
+                  child: UserCircleAvatar(user: user, size: 30, radius: 15),
+                )
+              : null,
+          suffixIcon: IconButton(
+            onPressed: sendEnabled ? onEditingComplete : null,
+            icon: const Icon(Icons.send),
+            iconSize: 24,
+            color: context.primaryColor,
+            disabledColor: context.colorScheme.secondaryContainer,
+          ),
+          hintText: !widget.isEnabled ? 'shared_album_activities_input_disable'.tr() : 'say_something'.tr(),
+          hintStyle: TextStyle(fontWeight: FontWeight.normal, fontSize: 14, color: Colors.grey[600]),
+        ),
+        onEditingComplete: onEditingComplete,
+        onTapOutside: (_) => inputFocusNode.unfocus(),
+      ),
+    );
+  }
+}

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

@@ -8,9 +8,10 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/like_activity_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
@@ -49,6 +50,8 @@ class AssetDetailBottomSheet extends ConsumerWidget {
 
     final actions = <Widget>[
       const ShareActionButton(source: ActionSource.viewer),
+      if (currentAlbum != null && currentAlbum.isActivityEnabled && currentAlbum.isShared)
+        const LikeActivityActionButton(),
       if (asset.hasRemote) ...[
         const ShareLinkActionButton(source: ActionSource.viewer),
         const ArchiveActionButton(source: ActionSource.viewer),

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

@@ -13,6 +13,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_act
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/providers/cast.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/routes.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -27,6 +28,8 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
       return const SizedBox.shrink();
     }
 
+    final album = ref.watch(currentRemoteAlbumProvider);
+
     final user = ref.watch(currentUserProvider);
     final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
     final isInLockedView = ref.watch(inLockedViewProvider);
@@ -49,6 +52,13 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
 
     final actions = <Widget>[
       if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
+      if (album != null && album.isActivityEnabled && album.isShared)
+        IconButton(
+          icon: const Icon(Icons.chat_outlined),
+          onPressed: () {
+            context.navigateTo(const DriftActivitiesRoute());
+          },
+        ),
       if (showViewInTimelineButton)
         IconButton(
           onPressed: () async {