feat(mobile): separate delete buttons (#4505)

* feat(mobile): delete assets from device only

* mobile: add backed up only toggle for delete device only

* remove toggle inside alert and show different content

* mobile: change content color for local only

* mobile: delete local only button to dialog

* style: display bottom action in two lines

* feat: separate delete buttons

* fix: incorrect error message for ownedRemoteSelection

* fix: handle remoteOnly from delete everywhere

* request confirmation for local only only when non-backed assets are in selection

---------

Co-authored-by: shalong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

mobile/lib/shared/providers/asset.provider.dart

@@ -91,6 +91,90 @@ class AssetNotifier extends StateNotifier<bool> {
     await _syncService.syncNewAssetToDb(newAsset);
   }
 
+  Future<bool> deleteLocalOnlyAssets(
+    Iterable<Asset> deleteAssets, {
+    bool onlyBackedUp = false,
+  }) async {
+    _deleteInProgress = true;
+    state = true;
+    try {
+      final assets = onlyBackedUp
+          ? deleteAssets.where((e) => e.storage == AssetState.merged)
+          : deleteAssets;
+      final localDeleted = await _deleteLocalAssets(assets);
+      if (localDeleted.isNotEmpty) {
+        final localOnlyIds = deleteAssets
+            .where((e) => e.storage == AssetState.local)
+            .map((e) => e.id)
+            .toList();
+        // Update merged assets to remote only
+        final mergedAssets =
+            deleteAssets.where((e) => e.storage == AssetState.merged).map((e) {
+          e.localId = null;
+          return e;
+        }).toList();
+        await _db.writeTxn(() async {
+          if (mergedAssets.isNotEmpty) {
+            await _db.assets.putAll(mergedAssets);
+          }
+          await _db.exifInfos.deleteAll(localOnlyIds);
+          await _db.assets.deleteAll(localOnlyIds);
+        });
+        return true;
+      }
+    } finally {
+      _deleteInProgress = false;
+      state = false;
+    }
+    return false;
+  }
+
+  Future<bool> deleteRemoteOnlyAssets(
+    Iterable<Asset> deleteAssets, {
+    bool force = false,
+  }) async {
+    _deleteInProgress = true;
+    state = true;
+    try {
+      final remoteDeleted = await _deleteRemoteAssets(deleteAssets, force);
+      if (remoteDeleted.isNotEmpty) {
+        final assetsToUpdate = force
+
+            /// If force, only update merged only assets and remove remote assets
+            ? remoteDeleted
+                .where((e) => e.storage == AssetState.merged)
+                .map((e) {
+                e.remoteId = null;
+                return e;
+              })
+            // If not force, trash everything
+            : remoteDeleted.where((e) => e.isRemote).map((e) {
+                e.isTrashed = true;
+                return e;
+              });
+
+        await _db.writeTxn(() async {
+          if (assetsToUpdate.isNotEmpty) {
+            await _db.assets.putAll(assetsToUpdate.toList());
+          }
+          if (force) {
+            final remoteOnly = remoteDeleted
+                .where((e) => e.storage == AssetState.remote)
+                .map((e) => e.id)
+                .toList();
+            await _db.exifInfos.deleteAll(remoteOnly);
+            await _db.assets.deleteAll(remoteOnly);
+          }
+        });
+        return true;
+      }
+    } finally {
+      _deleteInProgress = false;
+      state = false;
+    }
+    return false;
+  }
+
   Future<bool> deleteAssets(
     Iterable<Asset> deleteAssets, {
     bool force = false,
@@ -98,8 +182,11 @@ class AssetNotifier extends StateNotifier<bool> {
     _deleteInProgress = true;
     state = true;
     try {
+      final hasLocal = deleteAssets.any((a) => a.storage != AssetState.remote);
       final localDeleted = await _deleteLocalAssets(deleteAssets);
-      final remoteDeleted = await _deleteRemoteAssets(deleteAssets, force);
+      final remoteDeleted = (hasLocal && localDeleted.isNotEmpty) || !hasLocal
+          ? await _deleteRemoteAssets(deleteAssets, force)
+          : [];
       if (localDeleted.isNotEmpty || remoteDeleted.isNotEmpty) {
         final dbIds = <int>[];
         final dbUpdates = <Asset>[];
@@ -192,14 +279,14 @@ class AssetNotifier extends StateNotifier<bool> {
     return [];
   }
 
-  Future<Iterable<Asset>> _deleteRemoteAssets(
+  Future<List<Asset>> _deleteRemoteAssets(
     Iterable<Asset> assetsToDelete,
     bool? force,
   ) async {
     final Iterable<Asset> remote = assetsToDelete.where((e) => e.isRemote);
 
     final isSuccess = await _assetService.deleteAssets(remote, force: force);
-    return isSuccess ? remote : [];
+    return isSuccess ? remote.toList() : [];
   }
 
   Future<void> toggleFavorite(List<Asset> assets, [bool? status]) async {

mobile/lib/shared/ui/asset_grid/multiselect_grid.dart

@@ -22,7 +22,6 @@ 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/providers/asset.provider.dart';
-import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/providers/user.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 import 'package:immich_mobile/shared/ui/immich_toast.dart';
@@ -115,10 +114,10 @@ class MultiselectGrid extends HookConsumerWidget {
     }) {
       final assets = selection.value;
       return assets
-          .remoteOnly(errorCallback: errorBuilder(ownerErrorMessage))
+          .remoteOnly(errorCallback: errorBuilder(localErrorMessage))
           .ownedOnly(
             currentUser,
-            errorCallback: errorBuilder(localErrorMessage),
+            errorCallback: errorBuilder(ownerErrorMessage),
           );
     }
 
@@ -176,11 +175,9 @@ class MultiselectGrid extends HookConsumerWidget {
       }
     }
 
-    void onDelete() async {
+    void onDelete([bool force = false]) async {
       processing.value = true;
       try {
-        final trashEnabled =
-            ref.read(serverInfoProvider.select((v) => v.serverFeatures.trash));
         final toDelete = selection.value
             .ownedOnly(
               currentUser,
@@ -192,23 +189,77 @@ class MultiselectGrid extends HookConsumerWidget {
                   errorBuilder('asset_action_delete_err_read_only'.tr()),
             )
             .toList();
-        await ref
+        final isDeleted = await ref
             .read(assetProvider.notifier)
-            .deleteAssets(toDelete, force: !trashEnabled);
+            .deleteAssets(toDelete, force: force);
 
-        final hasRemote = toDelete.any((a) => a.isRemote);
-        final assetOrAssets = toDelete.length > 1 ? 'assets' : 'asset';
-        final trashOrRemoved =
-            !trashEnabled ? 'deleted permanently' : 'trashed';
-        if (hasRemote) {
+        if (isDeleted) {
+          final assetOrAssets = toDelete.length > 1 ? 'assets' : 'asset';
+          final trashOrRemoved = force ? 'deleted permanently' : 'trashed';
           ImmichToast.show(
             context: context,
             msg: '${selection.value.length} $assetOrAssets $trashOrRemoved',
             gravity: ToastGravity.BOTTOM,
           );
         }
-        selectionEnabledHook.value = false;
       } finally {
+        selectionEnabledHook.value = false;
+        processing.value = false;
+      }
+    }
+
+    void onDeleteLocal(bool onlyBackedUp) async {
+      processing.value = true;
+      try {
+        final localIds = selection.value.where((a) => a.isLocal).toList();
+
+        final isDeleted = await ref
+            .read(assetProvider.notifier)
+            .deleteLocalOnlyAssets(localIds, onlyBackedUp: onlyBackedUp);
+        if (isDeleted) {
+          final assetOrAssets = localIds.length > 1 ? 'assets' : 'asset';
+          ImmichToast.show(
+            context: context,
+            msg:
+                '${localIds.length} $assetOrAssets removed permanently from your device',
+            gravity: ToastGravity.BOTTOM,
+          );
+        }
+      } finally {
+        selectionEnabledHook.value = false;
+        processing.value = false;
+      }
+    }
+
+    void onDeleteRemote([bool force = false]) async {
+      processing.value = true;
+      try {
+        final toDelete = ownedRemoteSelection(
+          localErrorMessage: 'home_page_delete_remote_err_local'.tr(),
+          ownerErrorMessage: 'home_page_delete_err_partner'.tr(),
+        )
+            // Cannot delete readOnly / external assets. They are handled through library offline jobs
+            .writableOnly(
+              errorCallback:
+                  errorBuilder('asset_action_delete_err_read_only'.tr()),
+            )
+            .toList();
+
+        final isDeleted = await ref
+            .read(assetProvider.notifier)
+            .deleteRemoteOnlyAssets(toDelete, force: force);
+        if (isDeleted) {
+          final assetOrAssets = toDelete.length > 1 ? 'assets' : 'asset';
+          final trashOrRemoved = force ? 'deleted permanently' : 'trashed';
+          ImmichToast.show(
+            context: context,
+            msg:
+                '${toDelete.length} $assetOrAssets $trashOrRemoved from the Immich server',
+            gravity: ToastGravity.BOTTOM,
+          );
+        }
+      } finally {
+        selectionEnabledHook.value = false;
         processing.value = false;
       }
     }
@@ -401,6 +452,11 @@ class MultiselectGrid extends HookConsumerWidget {
               onFavorite: favoriteEnabled ? onFavoriteAssets : null,
               onArchive: archiveEnabled ? onArchiveAsset : null,
               onDelete: deleteEnabled ? onDelete : null,
+              onDeleteServer: deleteEnabled ? onDeleteRemote : null,
+
+              /// local file deletion is allowed irrespective of [deleteEnabled] since it has
+              /// nothing to do with the state of the asset in the Immich server
+              onDeleteLocal: onDeleteLocal,
               onAddToAlbum: onAddToAlbum,
               onCreateNewAlbum: onCreateNewAlbum,
               onUpload: onUpload,

mobile/lib/shared/ui/confirm_dialog.dart

@@ -1,9 +1,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';
 
-class ConfirmDialog extends ConsumerWidget {
+class ConfirmDialog extends StatelessWidget {
   final Function onOk;
   final String title;
   final String content;
@@ -20,9 +19,16 @@ class ConfirmDialog extends ConsumerWidget {
   }) : super(key: key);
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
+    void onOkPressed() {
+      onOk();
+      context.pop(true);
+    }
+
     return AlertDialog(
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+      ),
       title: Text(title).tr(),
       content: Text(content).tr(),
       actions: [
@@ -37,10 +43,7 @@ class ConfirmDialog extends ConsumerWidget {
           ).tr(),
         ),
         TextButton(
-          onPressed: () {
-            onOk();
-            context.pop(true);
-          },
+          onPressed: onOkPressed,
           child: Text(
             ok,
             style: TextStyle(

mobile/lib/shared/ui/drag_sheet.dart

@@ -37,14 +37,16 @@ class ControlBoxButton extends StatelessWidget {
       onPressed: onPressed,
       minWidth: 75.0,
       child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           Icon(iconData, size: 24),
-          const SizedBox(height: 4),
+          const SizedBox(height: 8),
           Text(
             label,
             style: const TextStyle(fontSize: 12.0),
+            maxLines: 2,
+            textAlign: TextAlign.center,
           ),
         ],
       ),