feat(mobile): multiselect for search & person page (#6016)

* feat(mobile): multiselect for search & person page

* merge main

---------

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

mobile/lib/modules/search/views/all_videos_page.dart

@@ -2,17 +2,14 @@ import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
-import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/all_video_assets.provider.dart';
+import 'package:immich_mobile/shared/ui/asset_grid/multiselect_grid.dart';
 
 class AllVideosPage extends HookConsumerWidget {
   const AllVideosPage({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final videos = ref.watch(allVideoAssetsProvider);
-
     return Scaffold(
       appBar: AppBar(
         title: const Text('all_videos_page_title').tr(),
@@ -21,11 +18,7 @@ class AllVideosPage extends HookConsumerWidget {
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
       ),
-      body: videos.widgetWhen(
-        onData: (assets) => ImmichAssetGrid(
-          assets: assets,
-        ),
-      ),
+      body: MultiselectGrid(renderListProvider: allVideoAssetsProvider),
     );
   }
 }

mobile/lib/modules/search/views/person_result_page.dart

@@ -1,14 +1,13 @@
 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:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/people.provider.dart';
 import 'package:immich_mobile/modules/search/ui/person_name_edit_form.dart';
-import 'package:immich_mobile/shared/models/store.dart' as isar_store;
+import 'package:immich_mobile/shared/models/store.dart';
+import 'package:immich_mobile/shared/ui/asset_grid/multiselect_grid.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
 class PersonResultPage extends HookConsumerWidget {
@@ -112,32 +111,30 @@ class PersonResultPage extends HookConsumerWidget {
           ),
         ],
       ),
-      body: ref.watch(personAssetsProvider(personId)).widgetWhen(
-            onData: (renderList) => ImmichAssetGrid(
-              renderList: renderList,
-              topWidget: Padding(
-                padding: const EdgeInsets.only(left: 8.0, top: 24),
-                child: Row(
-                  children: [
-                    CircleAvatar(
-                      radius: 36,
-                      backgroundImage: NetworkImage(
-                        getFaceThumbnailUrl(personId),
-                        headers: {
-                          "Authorization":
-                              "Bearer ${isar_store.Store.get(isar_store.StoreKey.accessToken)}",
-                        },
-                      ),
-                    ),
-                    Padding(
-                      padding: const EdgeInsets.only(left: 16.0),
-                      child: buildTitleBlock(),
-                    ),
-                  ],
+      body: MultiselectGrid(
+        renderListProvider: personAssetsProvider(personId),
+        topWidget: Padding(
+          padding: const EdgeInsets.only(left: 8.0, top: 24),
+          child: Row(
+            children: [
+              CircleAvatar(
+                radius: 36,
+                backgroundImage: NetworkImage(
+                  getFaceThumbnailUrl(personId),
+                  headers: {
+                    "Authorization":
+                        "Bearer ${Store.get(StoreKey.accessToken)}",
+                  },
                 ),
               ),
-            ),
+              Padding(
+                padding: const EdgeInsets.only(left: 16.0),
+                child: buildTitleBlock(),
+              ),
+            ],
           ),
+        ),
+      ),
     );
   }
 }

mobile/lib/modules/search/views/search_result_page.dart

@@ -4,11 +4,10 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/modules/home/ui/asset_grid/immich_asset_grid.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
 import 'package:immich_mobile/modules/search/providers/search_result_page.provider.dart';
-import 'package:immich_mobile/modules/search/ui/search_result_grid.dart';
 import 'package:immich_mobile/modules/search/ui/search_suggestion_list.dart';
+import 'package:immich_mobile/shared/ui/asset_grid/multiselect_grid.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 
 class SearchType {
@@ -39,7 +38,6 @@ class SearchResultPage extends HookConsumerWidget {
     final searchTermController = useTextEditingController(text: "");
     final isNewSearch = useState(false);
     final currentSearchTerm = useState(searchTerm);
-    final isDisplayDateGroup = useState(true);
 
     FocusNode? searchFocusNode;
 
@@ -48,9 +46,6 @@ class SearchResultPage extends HookConsumerWidget {
         searchFocusNode = FocusNode();
 
         var searchType = _getSearchType(searchTerm);
-        searchType.isClip
-            ? isDisplayDateGroup.value = false
-            : isDisplayDateGroup.value = true;
 
         Future.delayed(
           Duration.zero,
@@ -63,18 +58,13 @@ class SearchResultPage extends HookConsumerWidget {
       [],
     );
 
-    onSearchSubmitted(String newSearchTerm) {
+    Future<void> onSearchSubmitted(String newSearchTerm) {
       debugPrint("Re-Search with $newSearchTerm");
       searchFocusNode?.unfocus();
       isNewSearch.value = false;
       currentSearchTerm.value = newSearchTerm;
-
       var searchType = _getSearchType(newSearchTerm);
-      searchType.isClip
-          ? isDisplayDateGroup.value = false
-          : isDisplayDateGroup.value = true;
-
-      ref
+      return ref
           .watch(searchResultPageProvider.notifier)
           .search(searchType.searchTerm, clipEnable: searchType.isClip);
     }
@@ -148,9 +138,10 @@ class SearchResultPage extends HookConsumerWidget {
       );
     }
 
+    Future<void> refresh() async => onSearchSubmitted(currentSearchTerm.value);
+
     buildSearchResult() {
-      var searchResultPageState = ref.watch(searchResultPageProvider);
-      var allSearchAssets = ref.watch(searchResultPageProvider).searchResult;
+      final searchResultPageState = ref.watch(searchResultPageProvider);
 
       if (searchResultPageState.isError) {
         return Padding(
@@ -164,15 +155,15 @@ class SearchResultPage extends HookConsumerWidget {
       }
 
       if (searchResultPageState.isSuccess) {
-        if (isDisplayDateGroup.value) {
-          return ImmichAssetGrid(
-            assets: allSearchAssets,
-          );
-        } else {
-          return SearchResultGrid(
-            assets: allSearchAssets,
-          );
-        }
+        return MultiselectGrid(
+          renderListProvider: searchRenderListProvider,
+          archiveEnabled: true,
+          deleteEnabled: true,
+          editEnabled: true,
+          favoriteEnabled: true,
+          stackEnabled: false,
+          onRefresh: refresh,
+        );
       }
 
       return const SizedBox();