feat(mobile): unify asset grid multiselect actions (#5407)

* feat(mobile): unify asset grid multiselect actions * add favorite & archive page * show edit date&place on main photos screen * Reposition exit button * Sort favorite with the same order as other view --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-11-07 17:27:20 +00:00 · 2023-12-07 16:38:22 +01:00 · 2023-12-07 16:38:22 +01:00 · c25556bb08
commit c25556bb08
parent b9a9a3956c
26 changed files with 768 additions and 968 deletions
--- a/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart
@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';

 class DisableMultiSelectButton extends ConsumerWidget {
  const DisableMultiSelectButton({
@ -13,24 +14,25 @@ class DisableMultiSelectButton extends ConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    return Padding(
+    return Align(
+      alignment: Alignment.topLeft,
+      child: Padding(
        padding: const EdgeInsets.only(left: 16.0, top: 16.0),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 4.0),
          child: ElevatedButton.icon(
-            onPressed: () {
-              onPressed();
-            },
+            onPressed: () => onPressed(),
            icon: const Icon(Icons.close_rounded),
            label: Text(
              '$selectedItemCount',
-              style: const TextStyle(
-                fontWeight: FontWeight.w600,
-                fontSize: 18,
+              style: context.textTheme.titleMedium?.copyWith(
+                height: 2.5,
+                color: context.isDarkTheme ? Colors.black : Colors.white,
              ),
            ),
          ),
        ),
+      ),
    );
  }
 }
--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid.dart
@ -33,8 +33,6 @@ class ImmichAssetGrid extends HookConsumerWidget {
  final bool shrinkWrap;
  final bool showDragScroll;
  final bool showStack;
-  final bool isOwner;
-  final String? sharedAlbumId;

  const ImmichAssetGrid({
    super.key,
@ -55,8 +53,6 @@ class ImmichAssetGrid extends HookConsumerWidget {
    this.shrinkWrap = false,
    this.showDragScroll = true,
    this.showStack = false,
-    this.isOwner = true,
-    this.sharedAlbumId,
  });

  @override
@ -121,8 +117,6 @@ class ImmichAssetGrid extends HookConsumerWidget {
          shrinkWrap: shrinkWrap,
          showDragScroll: showDragScroll,
          showStack: showStack,
-          isOwner: isOwner,
-          sharedAlbumId: sharedAlbumId,
        ),
      );
    }
--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
@ -39,8 +39,6 @@ class ImmichAssetGridView extends StatefulWidget {
  final bool shrinkWrap;
  final bool showDragScroll;
  final bool showStack;
-  final bool isOwner;
-  final String? sharedAlbumId;

  const ImmichAssetGridView({
    super.key,
@ -61,8 +59,6 @@ class ImmichAssetGridView extends StatefulWidget {
    this.shrinkWrap = false,
    this.showDragScroll = true,
    this.showStack = false,
-    this.isOwner = true,
-    this.sharedAlbumId,
  });

  @override
@ -143,8 +139,6 @@ class ImmichAssetGridViewState extends State<ImmichAssetGridView> {
      showStorageIndicator: widget.showStorageIndicator,
      heroOffset: widget.heroOffset,
      showStack: widget.showStack,
-      isOwner: widget.isOwner,
-      sharedAlbumId: widget.sharedAlbumId,
    );
  }

--- a/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
@ -14,14 +14,12 @@ class ThumbnailImage extends StatelessWidget {
  final int totalAssets;
  final bool showStorageIndicator;
  final bool showStack;
-  final bool isOwner;
  final bool useGrayBoxPlaceholder;
  final bool isSelected;
  final bool multiselectEnabled;
  final Function? onSelect;
  final Function? onDeselect;
  final int heroOffset;
-  final String? sharedAlbumId;

  const ThumbnailImage({
    Key? key,
@ -31,8 +29,6 @@ class ThumbnailImage extends StatelessWidget {
    required this.totalAssets,
    this.showStorageIndicator = true,
    this.showStack = false,
-    this.isOwner = true,
-    this.sharedAlbumId,
    this.useGrayBoxPlaceholder = false,
    this.isSelected = false,
    this.multiselectEnabled = false,
@ -185,8 +181,6 @@ class ThumbnailImage extends StatelessWidget {
              totalAssets: totalAssets,
              heroOffset: heroOffset,
              showStack: showStack,
-              isOwner: isOwner,
-              sharedAlbumId: sharedAlbumId,
            ),
          );
        }
--- a/mobile/lib/modules/home/ui/control_bottom_app_bar.dart
+++ b/mobile/lib/modules/home/ui/control_bottom_app_bar.dart
@ -2,6 +2,8 @@ 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/modules/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
 import 'package:immich_mobile/modules/album/ui/add_to_album_sliverlist.dart';
 import 'package:immich_mobile/modules/home/models/selection_state.dart';
 import 'package:immich_mobile/modules/home/ui/delete_dialog.dart';
@ -12,37 +14,39 @@ import 'package:immich_mobile/shared/models/album.dart';

 class ControlBottomAppBar extends ConsumerWidget {
  final void Function(bool shareLocal) onShare;
-  final void Function() onFavorite;
-  final void Function() onArchive;
-  final void Function() onDelete;
+  final void Function()? onFavorite;
+  final void Function()? onArchive;
+  final void Function()? onDelete;
  final Function(Album album) onAddToAlbum;
  final void Function() onCreateNewAlbum;
  final void Function() onUpload;
-  final void Function() onStack;
-  final void Function() onEditTime;
-  final void Function() onEditLocation;
+  final void Function()? onStack;
+  final void Function()? onEditTime;
+  final void Function()? onEditLocation;
+  final void Function()? onRemoveFromAlbum;

-  final List<Album> albums;
-  final List<Album> sharedAlbums;
  final bool enabled;
+  final bool unfavorite;
+  final bool unarchive;
  final SelectionAssetState selectionAssetState;

  const ControlBottomAppBar({
    Key? key,
    required this.onShare,
-    required this.onFavorite,
-    required this.onArchive,
-    required this.onDelete,
-    required this.sharedAlbums,
-    required this.albums,
+    this.onFavorite,
+    this.onArchive,
+    this.onDelete,
    required this.onAddToAlbum,
    required this.onCreateNewAlbum,
    required this.onUpload,
-    required this.onStack,
-    required this.onEditTime,
-    required this.onEditLocation,
+    this.onStack,
+    this.onEditTime,
+    this.onEditLocation,
+    this.onRemoveFromAlbum,
    this.selectionAssetState = const SelectionAssetState(),
    this.enabled = true,
+    this.unarchive = false,
+    this.unfavorite = false,
  }) : super(key: key);

  @override
@ -52,6 +56,8 @@ class ControlBottomAppBar extends ConsumerWidget {
    var hasLocal = selectionAssetState.hasLocal;
    final trashEnabled =
        ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
+    final albums = ref.watch(albumProvider).where((a) => a.isRemote).toList();
+    final sharedAlbums = ref.watch(sharedAlbumProvider);

    List<Widget> renderActionButtons() {
      return [
@ -66,56 +72,73 @@ class ControlBottomAppBar extends ConsumerWidget {
          label: "control_bottom_app_bar_share_to".tr(),
          onPressed: enabled ? () => onShare(true) : null,
        ),
-        if (hasRemote)
+        if (hasRemote && onArchive != null)
          ControlBoxButton(
-            iconData: Icons.archive,
-            label: "control_bottom_app_bar_archive".tr(),
+            iconData: unarchive ? Icons.unarchive : Icons.archive,
+            label: (unarchive
+                    ? "control_bottom_app_bar_unarchive"
+                    : "control_bottom_app_bar_archive")
+                .tr(),
            onPressed: enabled ? onArchive : null,
          ),
-        if (hasRemote)
+        if (hasRemote && onFavorite != null)
          ControlBoxButton(
-            iconData: Icons.favorite_border_rounded,
-            label: "control_bottom_app_bar_favorite".tr(),
+            iconData: unfavorite
+                ? Icons.favorite_border_rounded
+                : Icons.favorite_rounded,
+            label: (unfavorite
+                    ? "control_bottom_app_bar_unfavorite"
+                    : "control_bottom_app_bar_favorite")
+                .tr(),
            onPressed: enabled ? onFavorite : null,
          ),
-        if (hasRemote)
+        if (hasRemote && onEditTime != null)
          ControlBoxButton(
            iconData: Icons.edit_calendar_outlined,
            label: "control_bottom_app_bar_edit_time".tr(),
            onPressed: enabled ? onEditTime : null,
          ),
-        if (hasRemote)
+        if (hasRemote && onEditLocation != null)
          ControlBoxButton(
            iconData: Icons.edit_location_alt_outlined,
            label: "control_bottom_app_bar_edit_location".tr(),
            onPressed: enabled ? onEditLocation : null,
          ),
-        ControlBoxButton(
-          iconData: Icons.delete_outline_rounded,
-          label: "control_bottom_app_bar_delete".tr(),
-          onPressed: enabled
-              ? () {
-                  if (!trashEnabled) {
-                    showDialog(
-                      context: context,
-                      builder: (BuildContext context) {
-                        return DeleteDialog(
-                          onDelete: onDelete,
-                        );
-                      },
-                    );
-                  } else {
-                    onDelete();
+        if (onDelete != null)
+          ControlBoxButton(
+            iconData: Icons.delete_outline_rounded,
+            label: "control_bottom_app_bar_delete".tr(),
+            onPressed: enabled
+                ? () {
+                    if (!trashEnabled) {
+                      showDialog(
+                        context: context,
+                        builder: (BuildContext context) {
+                          return DeleteDialog(
+                            onDelete: onDelete!,
+                          );
+                        },
+                      );
+                    } else {
+                      onDelete!();
+                    }
                  }
-                }
-              : null,
-        ),
-        if (!hasLocal && selectionAssetState.selectedCount > 1)
+                : null,
+          ),
+        if (!hasLocal &&
+            selectionAssetState.selectedCount > 1 &&
+            onStack != null)
          ControlBoxButton(
            iconData: Icons.filter_none_rounded,
            label: "control_bottom_app_bar_stack".tr(),
            onPressed: enabled ? onStack : null,
          ),
+        if (onRemoveFromAlbum != null)
+          ControlBoxButton(
+            iconData: Icons.delete_sweep_rounded,
+            label: 'album_viewer_appbar_share_remove'.tr(),
+            onPressed: enabled ? onRemoveFromAlbum : null,
+          ),
        if (hasLocal)
          ControlBoxButton(
            iconData: Icons.backup_outlined,