Use new asset grid for search result page

mobile/lib/modules/home/providers/home_page_render_list_provider.dart

@@ -8,52 +8,9 @@ import 'package:immich_mobile/shared/providers/asset.provider.dart';
 
 final renderListProvider = StateProvider((ref) {
   var assetGroups = ref.watch(assetGroupByDateTimeProvider);
-  var settings = ref.watch(appSettingsServiceProvider);
 
+  var settings = ref.watch(appSettingsServiceProvider);
   final assetsPerRow = settings.getSetting(AppSettingsEnum.tilesPerRow);
 
-  List<RenderAssetGridElement> elements = [];
+  return assetGroupsToRenderList(assetGroups, assetsPerRow);
-  DateTime? lastDate;
-
-  assetGroups.forEach((groupName, assets) {
-    final date = DateTime.parse(groupName);
-
-    if (lastDate == null || lastDate!.month != date.month) {
-      elements.add(
-        RenderAssetGridElement(RenderAssetGridElementType.monthTitle,
-            title: groupName, date: date),
-      );
-    }
-
-    // Add group title
-    elements.add(
-      RenderAssetGridElement(
-        RenderAssetGridElementType.dayTitle,
-        title: groupName,
-        date: date,
-        relatedAssetList: assets,
-      ),
-    );
-
-    // Add rows
-    int cursor = 0;
-    while (cursor < assets.length) {
-      int rowElements = min(assets.length - cursor, assetsPerRow);
-
-      final rowElement = RenderAssetGridElement(
-        RenderAssetGridElementType.assetRow,
-        date: date,
-        assetRow: RenderAssetGridRow(
-          assets.sublist(cursor, cursor + rowElements),
-        ),
-      );
-
-      elements.add(rowElement);
-      cursor += rowElements;
-    }
-
-    lastDate = date;
-  });
-
-  return elements;
 });

mobile/lib/modules/home/ui/asset_list_v2/asset_grid_data_structure.dart

@@ -53,3 +53,51 @@ List<RenderAssetGridElement> assetsToRenderList(
 
   return elements;
 }
+
+List<RenderAssetGridElement> assetGroupsToRenderList(
+    Map<String, List<AssetResponseDto>> assetGroups, int assetsPerRow) {
+  List<RenderAssetGridElement> elements = [];
+  DateTime? lastDate;
+
+  assetGroups.forEach((groupName, assets) {
+    final date = DateTime.parse(groupName);
+
+    if (lastDate == null || lastDate!.month != date.month) {
+      elements.add(
+        RenderAssetGridElement(RenderAssetGridElementType.monthTitle,
+            title: groupName, date: date),
+      );
+    }
+
+    // Add group title
+    elements.add(
+      RenderAssetGridElement(
+        RenderAssetGridElementType.dayTitle,
+        title: groupName,
+        date: date,
+        relatedAssetList: assets,
+      ),
+    );
+
+    // Add rows
+    int cursor = 0;
+    while (cursor < assets.length) {
+      int rowElements = min(assets.length - cursor, assetsPerRow);
+
+      final rowElement = RenderAssetGridElement(
+        RenderAssetGridElementType.assetRow,
+        date: date,
+        assetRow: RenderAssetGridRow(
+          assets.sublist(cursor, cursor + rowElements),
+        ),
+      );
+
+      elements.add(rowElement);
+      cursor += rowElements;
+    }
+
+    lastDate = date;
+  });
+
+  return elements;
+}

mobile/lib/modules/search/providers/search_result_page.provider.dart

@@ -1,8 +1,11 @@
 import 'package:collection/collection.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/ui/asset_list_v2/asset_grid_data_structure.dart';
 import 'package:immich_mobile/modules/search/models/search_result_page_state.model.dart';
 
 import 'package:immich_mobile/modules/search/services/search.service.dart';
+import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
+import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
 import 'package:intl/intl.dart';
 import 'package:openapi/api.dart';
 
@@ -66,3 +69,12 @@ final searchResultGroupByDateTimeProvider = StateProvider((ref) {
         .format(DateTime.parse(element.createdAt).toLocal()),
   );
 });
+
+final searchRenderListProvider = StateProvider((ref) {
+  var assetGroups = ref.watch(searchResultGroupByDateTimeProvider);
+
+  var settings = ref.watch(appSettingsServiceProvider);
+  final assetsPerRow = settings.getSetting(AppSettingsEnum.tilesPerRow);
+
+  return assetGroupsToRenderList(assetGroups, assetsPerRow);
+});

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

@@ -4,13 +4,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/modules/home/ui/daily_title_text.dart';
+import 'package:immich_mobile/modules/home/ui/asset_list_v2/immich_asset_grid.dart';
-import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
-import 'package:immich_mobile/modules/home/ui/image_grid.dart';
-import 'package:immich_mobile/modules/home/ui/monthly_title_text.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_suggestion_list.dart';
+import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
+import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
 import 'package:openapi/api.dart';
 
 class SearchResultPage extends HookConsumerWidget {
@@ -21,17 +20,12 @@ class SearchResultPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    ScrollController scrollController = useScrollController();
     final searchTermController = useTextEditingController(text: "");
     final isNewSearch = useState(false);
     final currentSearchTerm = useState(searchTerm);
 
-    final List<Widget> imageGridGroup = [];
-
     FocusNode? searchFocusNode;
 
-    List<AssetResponseDto> sortedAssetList = [];
-
     useEffect(
       () {
         searchFocusNode = FocusNode();
@@ -117,7 +111,12 @@ class SearchResultPage extends HookConsumerWidget {
 
     _buildSearchResult() {
       var searchResultPageState = ref.watch(searchResultPageProvider);
-      var assetGroupByDateTime = ref.watch(searchResultGroupByDateTimeProvider);
+      var searchResultRenderList = ref.watch(searchRenderListProvider);
+
+      var settings = ref.watch(appSettingsServiceProvider);
+      final assetsPerRow = settings.getSetting(AppSettingsEnum.tilesPerRow);
+      final showStorageIndicator =
+          settings.getSetting(AppSettingsEnum.storageIndicator);
 
       if (searchResultPageState.isError) {
         return const Text("Error");
@@ -132,58 +131,12 @@ class SearchResultPage extends HookConsumerWidget {
       }
 
       if (searchResultPageState.isSuccess) {
-        if (searchResultPageState.searchResult.isNotEmpty) {
+        return ImmichAssetGrid(
-          int? lastMonth;
+          renderList: searchResultRenderList,
-          // set sorted List
+          assetsPerRow: assetsPerRow,
-          for (var group in assetGroupByDateTime.values) {
+          showStorageIndicator: showStorageIndicator,
-            for (var value in group) {
-              sortedAssetList.add(value);
-            }
-          }
-          assetGroupByDateTime.forEach((dateGroup, immichAssetList) {
-            DateTime parseDateGroup = DateTime.parse(dateGroup);
-            int currentMonth = parseDateGroup.month;
-
-            if (lastMonth != null) {
-              if (currentMonth - lastMonth! != 0) {
-                imageGridGroup.add(
-                  MonthlyTitleText(
-                    isoDate: dateGroup,
-                  ),
         );
       }
-            }
-
-            imageGridGroup.add(
-              DailyTitleText(
-                isoDate: dateGroup,
-                assetGroup: immichAssetList,
-              ),
-            );
-
-            imageGridGroup.add(
-              ImageGrid(
-                assetGroup: immichAssetList,
-                sortedAssetGroup: sortedAssetList,
-              ),
-            );
-
-            lastMonth = currentMonth;
-          });
-
-          return DraggableScrollbar.semicircle(
-            backgroundColor: Theme.of(context).hintColor,
-            controller: scrollController,
-            heightScrollThumb: 48.0,
-            child: CustomScrollView(
-              controller: scrollController,
-              slivers: [...imageGridGroup],
-            ),
-          );
-        } else {
-          return const Text("No assets found");
-        }
-      }
 
       return const SizedBox();
     }