Customization options for asset grid (#498)

* Add settings options for number of assets per row and storage indicator

* Add attributes to enum to avoid duplicate code

* Also apply customizations to albums

* Minor Refactorings

* Three stage loading i18n fix

mobile/lib/modules/home/ui/image_grid.dart

@@ -7,11 +7,15 @@ import 'package:openapi/api.dart';
 class ImageGrid extends ConsumerWidget {
   final List<AssetResponseDto> assetGroup;
   final List<AssetResponseDto> sortedAssetGroup;
+  final int tilesPerRow;
+  final bool showStorageIndicator;
 
   ImageGrid({
     Key? key,
     required this.assetGroup,
     required this.sortedAssetGroup,
+    this.tilesPerRow = 4,
+    this.showStorageIndicator = true,
   }) : super(key: key);
 
   List<AssetResponseDto> imageSortedList = [];
@@ -19,8 +23,8 @@ class ImageGrid extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return SliverGrid(
-      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-        crossAxisCount: 4,
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: tilesPerRow,
         crossAxisSpacing: 5.0,
         mainAxisSpacing: 5,
       ),
@@ -34,6 +38,7 @@ class ImageGrid extends ConsumerWidget {
                 ThumbnailImage(
                   asset: assetGroup[index],
                   assetList: sortedAssetGroup,
+                  showStorageIndicator: showStorageIndicator,
                 ),
                 if (assetType != AssetTypeEnum.IMAGE)
                   Positioned(

mobile/lib/modules/home/ui/thumbnail_image.dart

@@ -15,8 +15,13 @@ import 'package:openapi/api.dart';
 class ThumbnailImage extends HookConsumerWidget {
   final AssetResponseDto asset;
   final List<AssetResponseDto> assetList;
+  final bool showStorageIndicator;
 
-  const ThumbnailImage({Key? key, required this.asset, required this.assetList})
+  const ThumbnailImage(
+      {Key? key,
+      required this.asset,
+      required this.assetList,
+      this.showStorageIndicator = true})
       : super(key: key);
 
   @override
@@ -123,7 +128,7 @@ class ThumbnailImage extends HookConsumerWidget {
                   child: _buildSelectionIcon(asset),
                 ),
               ),
-            Positioned(
+            if (showStorageIndicator) Positioned(
               right: 10,
               bottom: 5,
               child: Icon(

mobile/lib/modules/home/views/home_page.dart

@@ -10,6 +10,8 @@ import 'package:immich_mobile/modules/home/ui/image_grid.dart';
 import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
 import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
 import 'package:immich_mobile/modules/home/ui/profile_drawer/profile_drawer.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:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
@@ -21,6 +23,8 @@ class HomePage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final appSettingService = ref.watch(appSettingsServiceProvider);
+
     ScrollController scrollController = useScrollController();
     var assetGroupByDateTime = ref.watch(assetGroupByDateTimeProvider);
     List<Widget> imageGridGroup = [];
@@ -86,6 +90,8 @@ class HomePage extends HookConsumerWidget {
             ImageGrid(
               assetGroup: immichAssetList,
               sortedAssetGroup: sortedAssetList,
+              tilesPerRow: appSettingService.getSetting(AppSettingsEnum.tilesPerRow),
+              showStorageIndicator: appSettingService.getSetting(AppSettingsEnum.storageIndicator),
             ),
           );