Reorganize special buttons in album page

lib/l10n/app_en.arb

@@ -195,7 +195,7 @@
 			}
 		}
 	},
-	"createAlbumTooltip": "Create new album",
+	"createAlbumTooltip": "New album",
 	"@createAlbumTooltip": {
 		"description": "Tooltip of the button that creates a new album"
 	},

lib/widget/home_albums.dart

@@ -19,7 +19,6 @@ import 'package:nc_photos/snack_bar_manager.dart';
 import 'package:nc_photos/theme.dart';
 import 'package:nc_photos/use_case/remove.dart';
 import 'package:nc_photos/widget/album_browser.dart';
-import 'package:nc_photos/widget/album_grid_item.dart';
 import 'package:nc_photos/widget/album_importer.dart';
 import 'package:nc_photos/widget/album_search_delegate.dart';
 import 'package:nc_photos/widget/archive_browser.dart';
@@ -108,10 +107,17 @@ class _HomeAlbumsState extends State<HomeAlbums>
                 sliver: SliverStaggeredGrid.extentBuilder(
                   maxCrossAxisExtent: 256,
                   mainAxisSpacing: 8,
-                  itemCount: _items.length + (_isSelectionMode ? 0 : 3),
+                  itemCount: _items.length + _extraGridItemCount + 1,
                   itemBuilder: _buildItem,
                   staggeredTileBuilder: (index) {
-                    return const StaggeredTile.count(1, 1);
+                    if (index < _extraGridItemCount) {
+                      return const StaggeredTile.fit(1);
+                    } else if (index == _extraGridItemCount) {
+                      // separation
+                      return const StaggeredTile.extent(99, 1);
+                    } else {
+                      return const StaggeredTile.count(1, 1);
+                    }
                   },
                 ),
               ),
@@ -182,14 +188,16 @@ class _HomeAlbumsState extends State<HomeAlbums>
   }
 
   Widget _buildItem(BuildContext context, int index) {
-    if (index < _items.length) {
+    if (index == 0) {
-      return _buildAlbumItem(context, index);
-    } else if (index == _items.length) {
       return _buildArchiveItem(context);
-    } else if (index == _items.length + 1) {
+    } else if (index == 1) {
       return _buildTrashbinItem(context);
-    } else {
+    } else if (index == 2) {
       return _buildNewAlbumItem(context);
+    } else if (index == _extraGridItemCount) {
+      return Container();
+    } else {
+      return _buildAlbumItem(context, index - _extraGridItemCount - 1);
     }
   }
 
@@ -205,65 +213,36 @@ class _HomeAlbumsState extends State<HomeAlbums>
   }
 
   Widget _buildArchiveItem(BuildContext context) {
-    return AlbumGridItem(
+    return _NonAlbumGridItem(
-      cover: ClipRRect(
+      icon: Icons.archive_outlined,
-        borderRadius: BorderRadius.circular(8),
+      label: L10n.of(context).albumArchiveLabel,
-        child: Container(
+      onTap: _isSelectionMode
-          color: AppTheme.getListItemBackgroundColor(context),
+          ? null
-          constraints: const BoxConstraints.expand(),
+          : () {
-          child: Icon(
+              Navigator.of(context).pushNamed(ArchiveBrowser.routeName,
-            Icons.archive,
+                  arguments: ArchiveBrowserArguments(widget.account));
-            color: Colors.white.withOpacity(.8),
+            },
-            size: 88,
-          ),
-        ),
-      ),
-      title: L10n.of(context).albumArchiveLabel,
-      onTap: () {
-        Navigator.of(context).pushNamed(ArchiveBrowser.routeName,
-            arguments: ArchiveBrowserArguments(widget.account));
-      },
     );
   }
 
   Widget _buildTrashbinItem(BuildContext context) {
-    return AlbumGridItem(
+    return _NonAlbumGridItem(
-      cover: ClipRRect(
+      icon: Icons.delete_outlined,
-        borderRadius: BorderRadius.circular(8),
+      label: L10n.of(context).albumTrashLabel,
-        child: Container(
+      onTap: _isSelectionMode
-          color: AppTheme.getListItemBackgroundColor(context),
+          ? null
-          constraints: const BoxConstraints.expand(),
+          : () {
-          child: Icon(
+              Navigator.of(context).pushNamed(TrashbinBrowser.routeName,
-            Icons.delete,
+                  arguments: TrashbinBrowserArguments(widget.account));
-            color: Colors.white.withOpacity(.8),
+            },
-            size: 88,
-          ),
-        ),
-      ),
-      title: L10n.of(context).albumTrashLabel,
-      onTap: () {
-        Navigator.of(context).pushNamed(TrashbinBrowser.routeName,
-            arguments: TrashbinBrowserArguments(widget.account));
-      },
     );
   }
 
   Widget _buildNewAlbumItem(BuildContext context) {
-    return AlbumGridItem(
+    return _NonAlbumGridItem(
-      cover: ClipRRect(
+      icon: Icons.add,
-        borderRadius: BorderRadius.circular(8),
+      label: L10n.of(context).createAlbumTooltip,
-        child: Container(
+      onTap: _isSelectionMode ? null : () => _onNewAlbumItemTap(context),
-          color: AppTheme.getListItemBackgroundColor(context),
-          constraints: const BoxConstraints.expand(),
-          child: Icon(
-            Icons.add,
-            color: Colors.white.withOpacity(.8),
-            size: 88,
-          ),
-        ),
-      ),
-      title: L10n.of(context).createAlbumTooltip,
-      onTap: () => _onNewAlbumItemTap(context),
     );
   }
 
@@ -460,6 +439,8 @@ class _HomeAlbumsState extends State<HomeAlbums>
 
   static final _log = Logger("widget.home_albums._HomeAlbumsState");
   static const _menuValueImport = 0;
+
+  static const _extraGridItemCount = 3;
 }
 
 class _GridItem {
@@ -467,3 +448,55 @@ class _GridItem {
 
   Album album;
 }
+
+class _NonAlbumGridItem extends StatelessWidget {
+  _NonAlbumGridItem({
+    Key? key,
+    required this.icon,
+    required this.label,
+    this.onTap,
+  }) : super(key: key);
+
+  @override
+  build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(8),
+        child: Material(
+          type: MaterialType.transparency,
+          child: InkWell(
+            onTap: onTap,
+            child: Container(
+              decoration: BoxDecoration(
+                border: Border.all(
+                  color: AppTheme.getListItemBackgroundColor(context),
+                  width: 1,
+                ),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              padding: const EdgeInsets.all(8),
+              child: Row(
+                children: [
+                  Icon(
+                    icon,
+                    color: AppTheme.getPrimaryTextColor(context),
+                    size: 24,
+                  ),
+                  const SizedBox(width: 8),
+                  Expanded(
+                    child: Text(label),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  final IconData icon;
+  final String label;
+  final VoidCallback? onTap;
+}