chore(mobile): thumbnail image ui improvements (#13655)

improve ui for thumbnail image

Co-authored-by: dvbthien <dvbthien@gmail.com>

mobile/lib/widgets/asset_grid/thumbnail_image.dart

@@ -138,11 +138,32 @@ class ThumbnailImage extends ConsumerWidget {
           tag: isFromDto
               ? '${asset.remoteId}-$heroOffset'
               : asset.id + heroOffset,
-          child: ImmichThumbnail(
+          child: Stack(
+            children: [
+              ImmichThumbnail(
                 asset: asset,
                 height: 250,
                 width: 250,
               ),
+              Container(
+                height: 250,
+                width: 250,
+                decoration: const BoxDecoration(
+                  gradient: LinearGradient(
+                    colors: [
+                      Color.fromRGBO(0, 0, 0, 0.1),
+                      Colors.transparent,
+                      Colors.transparent,
+                      Color.fromRGBO(0, 0, 0, 0.1),
+                    ],
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    stops: [0, 0.3, 0.6, 1],
+                  ),
+                ),
+              ),
+            ],
+          ),
         ),
       );
       if (!multiselectEnabled || !isSelected) {
@@ -153,11 +174,8 @@ class ThumbnailImage extends ConsumerWidget {
           color: canDeselect ? assetContainerColor : Colors.grey,
         ),
         child: ClipRRect(
-          borderRadius: const BorderRadius.only(
+          borderRadius: const BorderRadius.all(
-            topRight: Radius.circular(15.0),
+            Radius.circular(15.0),
-            bottomRight: Radius.circular(15.0),
-            bottomLeft: Radius.circular(15.0),
-            topLeft: Radius.zero,
           ),
           child: image,
         ),
@@ -177,16 +195,9 @@ class ThumbnailImage extends ConsumerWidget {
                   )
                 : const Border(),
           ),
-          child: buildImage(),
+          child: Stack(
-        ),
+            children: [
-        if (multiselectEnabled)
+              buildImage(),
-          Padding(
-            padding: const EdgeInsets.all(3.0),
-            child: Align(
-              alignment: Alignment.topLeft,
-              child: buildSelectionIcon(asset),
-            ),
-          ),
               if (showStorageIndicator)
                 Positioned(
                   right: 8,
@@ -204,12 +215,23 @@ class ThumbnailImage extends ConsumerWidget {
                   child: Icon(
                     Icons.favorite,
                     color: Colors.white,
-              size: 18,
+                    size: 16,
                   ),
                 ),
               if (!asset.isImage) buildVideoIcon(),
               if (asset.stackCount > 0) buildStackIcon(),
             ],
+          ),
+        ),
+        if (multiselectEnabled)
+          Padding(
+            padding: const EdgeInsets.all(3.0),
+            child: Align(
+              alignment: Alignment.topLeft,
+              child: buildSelectionIcon(asset),
+            ),
+          ),
+      ],
     );
   }
 }