albums lay out with gridview builder and will better fit large screens

mobile/lib/modules/album/ui/album_thumbnail_card.dart

@@ -10,9 +10,12 @@ import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';
 
 class AlbumThumbnailCard extends StatelessWidget {
+  final Function()? onTap;
+
   const AlbumThumbnailCard({
     Key? key,
     required this.album,
+    this.onTap,
   }) : super(key: key);
 
   final Album album;
@@ -23,18 +26,19 @@ class AlbumThumbnailCard extends StatelessWidget {
     var isDarkMode = Theme.of(context).brightness == Brightness.dark;
     return LayoutBuilder(
       builder: (context, constraints) {
-      var cardSize = constraints.maxWidth / 2 - 18;
+      var cardSize = constraints.maxWidth;
 
       buildEmptyThumbnail() {
         return Container(
+          height: cardSize,
+          width: cardSize,
           decoration: BoxDecoration(
             color: isDarkMode ? Colors.grey[800] : Colors.grey[200],
           ),
-          child: SizedBox(
-            height: cardSize,
-            width: cardSize,
-            child: const Center(
-              child: Icon(Icons.no_photography),
+          child: Center(
+            child: Icon(
+              Icons.no_photography,
+              size: cardSize * .15,
             ),
           ),
         );
@@ -56,19 +60,19 @@ class AlbumThumbnailCard extends StatelessWidget {
       }
 
       return GestureDetector(
-        onTap: () {
-          AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
-        },
+        onTap: onTap,
         child: Padding(
           padding: const EdgeInsets.only(bottom: 32.0),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              ClipRRect(
-                borderRadius: BorderRadius.circular(8),
-                child: album.albumThumbnailAssetId == null
+              Expanded(
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(8),
+                  child: album.albumThumbnailAssetId == null
                     ? buildEmptyThumbnail()
                     : buildAlbumThumbnail(),
+                ),
               ),
               Padding(
                 padding: const EdgeInsets.only(top: 8.0),

mobile/lib/modules/album/views/library_page.dart

@@ -112,15 +112,14 @@ class LibraryPage extends HookConsumerWidget {
         onTap: () {
           AutoRouter.of(context).push(CreateAlbumRoute(isSharedAlbum: false));
         },
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.start,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            LayoutBuilder(
-              builder: (context, constraints) {
-                return Container(
-                  width: constraints.maxWidth / 2 - 18,
-                  height: constraints.maxWidth / 2 - 18,
+        child: Padding(
+          padding: const EdgeInsets.only(bottom: 32),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                child: Container(
                   decoration: BoxDecoration(
                     border: Border.all(
                       color: Colors.grey,
@@ -134,19 +133,22 @@ class LibraryPage extends HookConsumerWidget {
                       color: Theme.of(context).primaryColor,
                     ),
                   ),
-                );
-              }
-            ),
-            Padding(
-              padding: const EdgeInsets.only(top: 8.0),
-              child: const Text(
-                'library_page_new_album',
-                style: TextStyle(
-                  fontWeight: FontWeight.bold,
                 ),
-              ).tr(),
-            )
-          ],
+              ),
+              Padding(
+                padding: const EdgeInsets.only(
+                  top: 8.0,
+                  bottom: 16,
+                ),
+                child: const Text(
+                  'library_page_new_album',
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                  ),
+                ).tr(),
+              ),
+            ],
+          ),
         ),
       );
     }
@@ -189,6 +191,8 @@ class LibraryPage extends HookConsumerWidget {
       );
     }
 
+    final sorted = sortedAlbums();
+
     return Scaffold(
       appBar: buildAppBar(),
       body: CustomScrollView(
@@ -238,20 +242,33 @@ class LibraryPage extends HookConsumerWidget {
             ),
           ),
           SliverPadding(
-            padding: const EdgeInsets.only(left: 12.0, right: 12, bottom: 50),
-            sliver: SliverToBoxAdapter(
-              child: Wrap(
-                spacing: 12,
-                children: [
-                  buildCreateAlbumButton(),
-                  for (var album in sortedAlbums())
-                    AlbumThumbnailCard(
-                      album: album,
+            padding: const EdgeInsets.all(12.0),
+            sliver: SliverGrid(
+              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+                maxCrossAxisExtent: 250,
+                mainAxisSpacing: 12,
+                crossAxisSpacing: 12,
+                childAspectRatio: .7,
+              ),
+              delegate: SliverChildBuilderDelegate(
+                childCount: sorted.length + 1,
+                (context, index) {
+                  if (index  == 0) {
+                    return buildCreateAlbumButton();
+                  }
+
+                  return AlbumThumbnailCard(
+                    album: sorted[index - 1],
+                    onTap: () => AutoRouter.of(context).push(
+                      AlbumViewerRoute(
+                        albumId: sorted[index - 1].id,
+                      ),
                     ),
-                ],
+                  );
+                },
               ),
             ),
-          )
+          ),
         ],
       ),
     );