feat(mobile): Improve album UI and Interactions (#3754)

* fix: outlick editable field does not change edit icon * fix: unfocus on submit change album name * styling * styling * confirm dialog * Confirm deletion * render user * user avatar with image * use UserCircleAvatar * rights * stlying * remove/leave options * styling * state management --------- Co-authored-by: Alex Tran <Alex.Tran@conductix.com>
2025-10-29 17:40:28 +00:00 · 2023-08-17 23:26:12 -05:00
parent 2ff71b0d27
commit 2de30e34f4
18 changed files with 532 additions and 126 deletions
--- a/mobile/lib/modules/album/views/album_options_part.dart
+++ b/mobile/lib/modules/album/views/album_options_part.dart
@@ -0,0 +1,205 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/models/album.dart';
+import 'package:immich_mobile/shared/models/user.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
+import 'package:immich_mobile/shared/ui/user_circle_avatar.dart';
+import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
+
+class AlbumOptionsPage extends HookConsumerWidget {
+  final Album album;
+
+  const AlbumOptionsPage({super.key, required this.album});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final sharedUsers = useState(album.sharedUsers.toList());
+    final owner = album.owner.value;
+    final userId = ref.watch(authenticationProvider).userId;
+    final isOwner = owner?.id == userId;
+
+    void showErrorMessage() {
+      Navigator.pop(context);
+      ImmichToast.show(
+        context: context,
+        msg: "Error leaving/removing from album",
+        toastType: ToastType.error,
+        gravity: ToastGravity.BOTTOM,
+      );
+    }
+
+    void leaveAlbum() async {
+      ImmichLoadingOverlayController.appLoader.show();
+
+      try {
+        final isSuccess =
+            await ref.read(sharedAlbumProvider.notifier).leaveAlbum(album);
+
+        if (isSuccess) {
+          AutoRouter.of(context)
+              .navigate(const TabControllerRoute(children: [SharingRoute()]));
+        } else {
+          showErrorMessage();
+        }
+      } catch (_) {
+        showErrorMessage();
+      }
+
+      ImmichLoadingOverlayController.appLoader.hide();
+    }
+
+    void removeUserFromAlbum(User user) async {
+      ImmichLoadingOverlayController.appLoader.show();
+
+      try {
+        await ref
+            .read(sharedAlbumProvider.notifier)
+            .removeUserFromAlbum(album, user);
+        album.sharedUsers.remove(user);
+        sharedUsers.value = album.sharedUsers.toList();
+      } catch (error) {
+        showErrorMessage();
+      }
+
+      Navigator.pop(context);
+      ImmichLoadingOverlayController.appLoader.hide();
+    }
+
+    void handleUserClick(User user) {
+      var actions = [];
+
+      if (user.id == userId) {
+        actions = [
+          ListTile(
+            leading: const Icon(Icons.exit_to_app_rounded),
+            title: const Text("Leave album"),
+            onTap: leaveAlbum,
+          ),
+        ];
+      }
+
+      if (isOwner) {
+        actions = [
+          ListTile(
+            leading: const Icon(Icons.person_remove_rounded),
+            title: const Text("Remove user from album"),
+            onTap: () => removeUserFromAlbum(user),
+          ),
+        ];
+      }
+
+      showModalBottomSheet(
+        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+        isScrollControlled: false,
+        context: context,
+        builder: (context) {
+          return SafeArea(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 24.0),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [...actions],
+              ),
+            ),
+          );
+        },
+      );
+    }
+
+    buildOwnerInfo() {
+      return ListTile(
+        leading: owner != null
+            ? UserCircleAvatar(
+                user: owner,
+                useRandomBackgroundColor: true,
+              )
+            : const SizedBox(),
+        title: Text(
+          album.owner.value?.firstName ?? "",
+          style: const TextStyle(
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        subtitle: Text(
+          album.owner.value?.email ?? "",
+          style: TextStyle(color: Colors.grey[500]),
+        ),
+        trailing: const Text(
+          "Owner",
+          style: TextStyle(
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+      );
+    }
+
+    buildSharedUsersList() {
+      return ListView.builder(
+        shrinkWrap: true,
+        itemCount: sharedUsers.value.length,
+        itemBuilder: (context, index) {
+          final user = sharedUsers.value[index];
+          return ListTile(
+            leading: UserCircleAvatar(
+              user: user,
+              useRandomBackgroundColor: true,
+              radius: 22,
+            ),
+            title: Text(
+              user.firstName,
+              style: const TextStyle(
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            subtitle: Text(
+              user.email,
+              style: TextStyle(color: Colors.grey[500]),
+            ),
+            trailing: userId == user.id || isOwner
+                ? const Icon(Icons.more_horiz_rounded)
+                : const SizedBox(),
+            onTap: userId == user.id || isOwner
+                ? () => handleUserClick(user)
+                : null,
+          );
+        },
+      );
+    }
+
+    buildSectionTitle(String text) {
+      return Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Text(text, style: Theme.of(context).textTheme.bodySmall),
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back_ios_new_rounded),
+          onPressed: () {
+            AutoRouter.of(context).pop(null);
+          },
+        ),
+        centerTitle: true,
+        title: Text("translated_text_options".tr()),
+      ),
+      body: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          buildSectionTitle("PEOPLE"),
+          buildOwnerInfo(),
+          buildSharedUsersList(),
+        ],
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/views/album_viewer_page.dart
+++ b/mobile/lib/modules/album/views/album_viewer_page.dart
@@ -17,6 +17,7 @@ import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/models/album.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:immich_mobile/shared/ui/user_circle_avatar.dart';
 import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';

 class AlbumViewerPage extends HookConsumerWidget {
@@ -116,7 +117,7 @@ class AlbumViewerPage extends HookConsumerWidget {

    Widget buildControlButton(Album album) {
      return Padding(
-        padding: const EdgeInsets.only(left: 16.0, top: 8, bottom: 8),
+        padding: const EdgeInsets.only(left: 16.0, top: 8, bottom: 16),
        child: SizedBox(
          height: 40,
          child: ListView(
@@ -141,7 +142,7 @@ class AlbumViewerPage extends HookConsumerWidget {

    Widget buildTitle(Album album) {
      return Padding(
-        padding: const EdgeInsets.only(left: 8, right: 8, top: 16),
+        padding: const EdgeInsets.only(left: 8, right: 8, top: 24),
        child: userId == album.ownerId && album.isRemote
            ? AlbumViewerEditableTitle(
                album: album,
@@ -172,7 +173,6 @@ class AlbumViewerPage extends HookConsumerWidget {
      return Padding(
        padding: EdgeInsets.only(
          left: 16.0,
-          top: 8.0,
          bottom: album.shared ? 0.0 : 8.0,
        ),
        child: Text(
@@ -180,7 +180,34 @@ class AlbumViewerPage extends HookConsumerWidget {
          style: const TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.bold,
-            color: Colors.grey,
+          ),
+        ),
+      );
+    }
+
+    Widget buildSharedUserIconsRow(Album album) {
+      return GestureDetector(
+        onTap: () async {
+          await AutoRouter.of(context).push(AlbumOptionsRoute(album: album));
+          ref.invalidate(albumDetailProvider(album.id));
+        },
+        child: SizedBox(
+          height: 50,
+          child: ListView.builder(
+            padding: const EdgeInsets.only(left: 16),
+            scrollDirection: Axis.horizontal,
+            itemBuilder: ((context, index) {
+              return Padding(
+                padding: const EdgeInsets.only(right: 8.0),
+                child: UserCircleAvatar(
+                  user: album.sharedUsers.toList()[index],
+                  radius: 18,
+                  size: 36,
+                  useRandomBackgroundColor: true,
+                ),
+              );
+            }),
+            itemCount: album.sharedUsers.length,
          ),
        ),
      );
@@ -193,33 +220,7 @@ class AlbumViewerPage extends HookConsumerWidget {
        children: [
          buildTitle(album),
          if (album.assets.isNotEmpty == true) buildAlbumDateRange(album),
-          if (album.shared)
-            SizedBox(
-              height: 50,
-              child: ListView.builder(
-                padding: const EdgeInsets.only(left: 16),
-                scrollDirection: Axis.horizontal,
-                itemBuilder: ((context, index) {
-                  return Padding(
-                    padding: const EdgeInsets.only(right: 8.0),
-                    child: CircleAvatar(
-                      backgroundColor: Colors.grey[300],
-                      radius: 18,
-                      child: Padding(
-                        padding: const EdgeInsets.all(2.0),
-                        child: ClipRRect(
-                          borderRadius: BorderRadius.circular(50.0),
-                          child: Image.asset(
-                            'assets/immich-logo-no-outline.png',
-                          ),
-                        ),
-                      ),
-                    ),
-                  );
-                }),
-                itemCount: album.sharedUsers.length,
-              ),
-            ),
+          if (album.shared) buildSharedUserIconsRow(album),
        ],
      );
    }
--- a/mobile/lib/modules/album/views/asset_selection_page.dart
+++ b/mobile/lib/modules/album/views/asset_selection_page.dart
@@ -73,9 +73,12 @@ class AssetSelectionPage extends HookConsumerWidget {
                AutoRouter.of(context)
                    .popForced<AssetSelectionPageResult>(payload);
              },
-              child: const Text(
+              child: Text(
                "share_add",
-                style: TextStyle(fontWeight: FontWeight.bold),
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  color: Theme.of(context).primaryColor,
+                ),
              ).tr(),
            ),
        ],
--- a/mobile/lib/modules/album/views/create_album_page.dart
+++ b/mobile/lib/modules/album/views/create_album_page.dart
@@ -30,7 +30,8 @@ class CreateAlbumPage extends HookConsumerWidget {
    final albumTitleTextFieldFocusNode = useFocusNode();
    final isAlbumTitleTextFieldFocus = useState(false);
    final isAlbumTitleEmpty = useState(true);
-    final selectedAssets = useState<Set<Asset>>(initialAssets != null ? Set.from(initialAssets!) : const {});
+    final selectedAssets = useState<Set<Asset>>(
+        initialAssets != null ? Set.from(initialAssets!) : const {},);
    final isDarkTheme = Theme.of(context).brightness == Brightness.dark;

    showSelectUserPage() async {
@@ -248,8 +249,9 @@ class CreateAlbumPage extends HookConsumerWidget {
                  : null,
              child: Text(
                'create_shared_album_page_create'.tr(),
-                style: const TextStyle(
+                style: TextStyle(
                  fontWeight: FontWeight.bold,
+                  color: Theme.of(context).primaryColor,
                ),
              ),
            ),
--- a/mobile/lib/modules/album/views/select_additional_user_for_sharing_page.dart
+++ b/mobile/lib/modules/album/views/select_additional_user_for_sharing_page.dart
@@ -7,6 +7,7 @@ import 'package:immich_mobile/modules/album/providers/suggested_shared_users.pro
 import 'package:immich_mobile/shared/models/album.dart';
 import 'package:immich_mobile/shared/models/user.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:immich_mobile/shared/ui/user_circle_avatar.dart';

 class SelectAdditionalUserForSharingPage extends HookConsumerWidget {
  final Album album;
@@ -35,10 +36,8 @@ class SelectAdditionalUserForSharingPage extends HookConsumerWidget {
          ),
        );
      } else {
-        return CircleAvatar(
-          backgroundImage:
-              const AssetImage('assets/immich-logo-no-outline.png'),
-          backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
+        return UserCircleAvatar(
+          user: user,
        );
      }
    }
--- a/mobile/lib/modules/album/views/select_user_for_sharing_page.dart
+++ b/mobile/lib/modules/album/views/select_user_for_sharing_page.dart
@@ -10,6 +10,7 @@ import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/models/user.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:immich_mobile/shared/ui/user_circle_avatar.dart';

 class SelectUserForSharingPage extends HookConsumerWidget {
  const SelectUserForSharingPage({Key? key, required this.assets})
@@ -56,10 +57,8 @@ class SelectUserForSharingPage extends HookConsumerWidget {
          ),
        );
      } else {
-        return CircleAvatar(
-          backgroundImage:
-              const AssetImage('assets/immich-logo-no-outline.png'),
-          backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
+        return UserCircleAvatar(
+          user: user,
        );
      }
    }