Fix file result alignment

app/ui/src/main/java/de/mm20/launcher2/ui/launcher/search/files/FileItem.kt

@@ -1,10 +1,10 @@
 package de.mm20.launcher2.ui.launcher.search.files
 
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.SharedTransitionLayout
 import androidx.compose.animation.core.MutableTransitionState
-import androidx.compose.animation.core.animateDp
 import androidx.compose.animation.core.tween
-import androidx.compose.animation.core.updateTransition
 import androidx.compose.animation.expandIn
 import androidx.compose.animation.shrinkOut
 import androidx.compose.foundation.layout.Column
@@ -40,17 +40,16 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.roundToIntRect
+import androidx.lifecycle.compose.LocalLifecycleOwner
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.lifecycleScope
 import de.mm20.launcher2.search.File
 import de.mm20.launcher2.search.FileMetaType
 import de.mm20.launcher2.ui.R
-import de.mm20.launcher2.ui.animation.animateTextStyleAsState
 import de.mm20.launcher2.ui.component.DefaultToolbarAction
 import de.mm20.launcher2.ui.component.ShapedLauncherIcon
 import de.mm20.launcher2.ui.component.Toolbar
@@ -85,50 +84,49 @@ fun FileItem(
     val lifecycleOwner = LocalLifecycleOwner.current
     val snackbarHostState = LocalSnackbarHostState.current
 
-    val transition = updateTransition(showDetails, label = "ContactItem")
+    val icon by viewModel.icon.collectAsStateWithLifecycle()
+    val badge by viewModel.badge.collectAsState(null)
 
+    SharedTransitionLayout(
+        modifier = modifier,
+    ) {
+        AnimatedContent(showDetails) { showDetails ->
+            if (showDetails) {
                 Column(
-        modifier = modifier
                 ) {
                     Row(
-            verticalAlignment = Alignment.Top
+                        modifier = Modifier
+                            .padding(
+                                top = 16.dp,
+                                start = 16.dp,
+                                end = 16.dp,
+                                bottom = 8.dp
+                            )
                     ) {
                         Column(
-                modifier = Modifier
+                            modifier = Modifier.weight(1f)
-                    .weight(1f)
-                    .padding(16.dp)
                         ) {
-                val textStyle by animateTextStyleAsState(
-                    if (showDetails) MaterialTheme.typography.titleMedium
-                    else MaterialTheme.typography.titleSmall
-                )
                             Text(
+                                modifier = Modifier.sharedBounds(
+                                    rememberSharedContentState("label"),
+                                    this@AnimatedContent,
+                                ),
                                 text = file.labelOverride ?: file.label,
-                    style = textStyle,
+                                style = MaterialTheme.typography.titleMedium,
                                 maxLines = 1,
                                 overflow = TextOverflow.Ellipsis
                             )
-                AnimatedVisibility(!showDetails) {
-                    Text(
-                        file.getFileType(context),
-                        style = MaterialTheme.typography.bodySmall,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis,
-                        modifier = Modifier.padding(top = 2.dp)
-                    )
-                }
-                AnimatedVisibility(showDetails) {
-                    Column {
                             val tags by viewModel.tags.collectAsState(emptyList())
                             if (tags.isNotEmpty()) {
                                 Text(
-                                modifier = Modifier.padding(top = 1.dp, bottom = 4.dp),
+                                    modifier = Modifier.padding(top = 1.dp),
                                     text = tags.joinToString(separator = " #", prefix = "#"),
                                     color = MaterialTheme.colorScheme.secondary,
                                     style = MaterialTheme.typography.labelSmall
                                 )
                             }
                             Text(
+                                modifier = Modifier.padding(top = 8.dp),
                                 text = stringResource(
                                     R.string.file_meta_type,
                                     file.mimeType
@@ -158,28 +156,17 @@ fun FileItem(
                                 )
                             }
                         }
-
-                }
-            }
-
-            val icon by viewModel.icon.collectAsStateWithLifecycle()
-            val badge by viewModel.badge.collectAsState(null)
-            val padding by transition.animateDp(label = "iconPadding") {
-                if (it) 16.dp else 8.dp
-            }
                         ShapedLauncherIcon(
-                size = 48.dp,
                             modifier = Modifier
-                    .padding(end = padding, top = padding, bottom = padding),
+                                .sharedElement(
+                                    rememberSharedContentState("icon"),
+                                    this@AnimatedContent,
+                                ),
+                            size = 48.dp,
                             icon = { icon },
                             badge = { badge }
                         )
-
                     }
-
-        AnimatedVisibility(showDetails) {
-            Column {
-
                     val toolbarActions = mutableListOf<ToolbarAction>()
 
                     if (LocalFavoritesEnabled.current) {
@@ -317,6 +304,53 @@ fun FileItem(
                         rightActions = toolbarActions
                     )
                 }
+            } else {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(
+                            start = 16.dp,
+                            top = 8.dp,
+                            bottom = 8.dp,
+                            end = 8.dp
+                        ),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Column(
+                        modifier = Modifier.weight(1f)
+                    ) {
+                        Text(
+                            modifier = Modifier.sharedBounds(
+                                rememberSharedContentState("label"),
+                                this@AnimatedContent,
+                            ),
+                            text = file.labelOverride ?: file.label,
+                            style = MaterialTheme.typography.titleSmall,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis
+                        )
+                        Text(
+                            file.getFileType(context),
+                            style = MaterialTheme.typography.bodySmall,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            modifier = Modifier.padding(top = 2.dp)
+                        )
+                    }
+
+                    ShapedLauncherIcon(
+                        size = 48.dp,
+                        modifier = Modifier
+                            .padding(8.dp)
+                            .sharedElement(
+                                rememberSharedContentState("icon"),
+                                this@AnimatedContent,
+                            ),
+                        icon = { icon },
+                        badge = { badge }
+                    )
+                }
+            }
         }
     }
 }