refactor(mobile): enhance thumbnail layout and owner name display

mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart

@@ -55,6 +55,9 @@ class ThumbnailTile extends ConsumerWidget {
         Container(color: lockSelection ? context.colorScheme.surfaceContainerHighest : assetContainerColor),
         LayoutBuilder(
           builder: (context, constraints) {
+            final horizontalPadding = constraints.maxWidth * 0.02;
+            final verticalPadding = constraints.maxHeight * 0.02;
+
             return AnimatedContainer(
               duration: Durations.short4,
               curve: Curves.decelerate,
@@ -77,50 +80,51 @@ class ThumbnailTile extends ConsumerWidget {
                     if (asset != null)
                       Align(
                         alignment: Alignment.topRight,
-                        child: _AssetTypeIcons(asset: asset),
+                        child: Padding(
+                          padding: EdgeInsets.symmetric(horizontal: horizontalPadding * 0.5, vertical: verticalPadding),
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.end,
+                            crossAxisAlignment: CrossAxisAlignment.center,
+                            children: [_AssetTypeIcons(asset: asset)],
+                          ),
+                        ),
                       ),
-                    if (shouldShowOwnerName)
+                    if (shouldShowOwnerName ||
+                        (storageIndicator && asset != null) ||
+                        (asset != null && asset.isFavorite))
                       Align(
-                        alignment: Alignment.bottomRight,
+                        alignment: Alignment.bottomCenter,
                         child: Padding(
-                          padding: EdgeInsets.only(
+                          padding: EdgeInsets.symmetric(horizontal: horizontalPadding, vertical: verticalPadding * 0.1),
-                            right: constraints.maxWidth * 0.03,
+                          child: Row(
-                            left: constraints.maxWidth * 0.3,
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                            bottom: constraints.maxWidth * 0.01,
+                            crossAxisAlignment: CrossAxisAlignment.center,
+                            children: [
+                              if (asset != null && asset.isFavorite)
+                                const Padding(
+                                  padding: EdgeInsets.only(right: 1.0),
+                                  child: _TileOverlayIcon(Icons.favorite_rounded),
+                                )
+                              else
+                                const SizedBox.shrink(),
+                              if (shouldShowOwnerName)
+                                Flexible(
+                                  child: Padding(
+                                    padding: const EdgeInsets.symmetric(horizontal: 1.0),
+                                    child: _OwnerNameLabel(ownerName: ownerName!),
+                                  ),
+                                ),
+                              if (storageIndicator && asset != null)
+                                Padding(
+                                  padding: const EdgeInsets.only(right: 2.0),
+                                  child: _TileOverlayIcon(switch (asset.storage) {
+                                    AssetState.local => Icons.cloud_off_outlined,
+                                    AssetState.remote => Icons.cloud_outlined,
+                                    AssetState.merged => Icons.cloud_done_outlined,
+                                  }),
+                                ),
+                            ],
                           ),
-                          child: _OwnerNameLabel(ownerName: ownerName!),
-                        ),
-                      ),
-                    if (storageIndicator && asset != null)
-                      switch (asset.storage) {
-                        AssetState.local => const Align(
-                          alignment: Alignment.bottomRight,
-                          child: Padding(
-                            padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
-                            child: _TileOverlayIcon(Icons.cloud_off_outlined),
-                          ),
-                        ),
-                        AssetState.remote => const Align(
-                          alignment: Alignment.bottomRight,
-                          child: Padding(
-                            padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
-                            child: _TileOverlayIcon(Icons.cloud_outlined),
-                          ),
-                        ),
-                        AssetState.merged => const Align(
-                          alignment: Alignment.bottomRight,
-                          child: Padding(
-                            padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
-                            child: _TileOverlayIcon(Icons.cloud_done_outlined),
-                          ),
-                        ),
-                      },
-                    if (asset != null && asset.isFavorite)
-                      const Align(
-                        alignment: Alignment.bottomLeft,
-                        child: Padding(
-                          padding: EdgeInsets.only(left: 10.0, bottom: 6.0),
-                          child: _TileOverlayIcon(Icons.favorite_rounded),
                         ),
                       ),
                   ],
@@ -183,7 +187,6 @@ class _VideoIndicator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Row(
-      spacing: 3,
       mainAxisSize: MainAxisSize.min,
       mainAxisAlignment: MainAxisAlignment.end,
       // CrossAxisAlignment.start looks more centered vertically than CrossAxisAlignment.center
@@ -198,6 +201,7 @@ class _VideoIndicator extends StatelessWidget {
             shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6))],
           ),
         ),
+        const SizedBox(width: 2),
         const _TileOverlayIcon(Icons.play_circle_outline_rounded),
       ],
     );
@@ -230,22 +234,14 @@ class _AssetTypeIcons extends StatelessWidget {
     final hasStack = asset is RemoteAsset && (asset as RemoteAsset).stackId != null;
     final isLivePhoto = asset is RemoteAsset && asset.livePhotoVideoId != null;
 
-    return Column(
+    return Row(
       mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.end,
       children: [
-        if (asset.isVideo)
+        if (asset.isVideo) Padding(padding: const EdgeInsets.only(right: 2.0), child: _VideoIndicator(asset.duration)),
-          Padding(padding: const EdgeInsets.only(right: 10.0, top: 6.0), child: _VideoIndicator(asset.duration)),
         if (hasStack)
-          const Padding(
+          const Padding(padding: EdgeInsets.only(right: 2.0), child: _TileOverlayIcon(Icons.burst_mode_rounded)),
-            padding: EdgeInsets.only(right: 10.0, top: 6.0),
-            child: _TileOverlayIcon(Icons.burst_mode_rounded),
-          ),
         if (isLivePhoto)
-          const Padding(
+          const Padding(padding: EdgeInsets.only(right: 2.0), child: _TileOverlayIcon(Icons.motion_photos_on_rounded)),
-            padding: EdgeInsets.only(right: 10.0, top: 6.0),
-            child: _TileOverlayIcon(Icons.motion_photos_on_rounded),
-          ),
       ],
     );
   }
@@ -258,20 +254,17 @@ class _OwnerNameLabel extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Text(
-      constraints: const BoxConstraints(maxWidth: 120),
+      ownerName,
-      child: Text(
+      style: const TextStyle(
-        ownerName,
+        color: Colors.white,
-        style: const TextStyle(
+        fontSize: 12,
-          color: Colors.white,
+        fontWeight: FontWeight.bold,
-          fontSize: 14,
+        shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0))],
-          fontWeight: FontWeight.w600,
-          shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0))],
-        ),
-        overflow: TextOverflow.fade,
-        softWrap: false,
-        maxLines: 1,
       ),
+      overflow: TextOverflow.fade,
+      softWrap: false,
+      maxLines: 1,
     );
   }
 }