feat: add animation to item placement in ListsScreen and ManageColumnsDialog for smoother reordering experience

CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/screens/ListDetailScreen.kt

@@ -1,4 +1,5 @@
 @file:Suppress("ktlint:standard:no-wildcard-imports")
+@file:OptIn(androidx.compose.foundation.ExperimentalFoundationApi::class)
 
 package com.collabtable.app.ui.screens
 import androidx.compose.foundation.ExperimentalFoundationApi
@@ -2536,7 +2537,8 @@ fun ManageColumnsDialog(
                         key = { _, field -> field.id },
                     ) { index, field ->
                         ReorderableItem(reorderState, key = field.id) { _ ->
-                            ColumnItem(
+                            Box(modifier = Modifier.animateItemPlacement()) {
+                                ColumnItem(
                                 field = field,
                                 onEdit = { fieldToEdit = field },
                                 onDelete = { fieldToDelete = field },
@@ -2562,7 +2564,8 @@ fun ManageColumnsDialog(
                                         tint = MaterialTheme.colorScheme.onSurfaceVariant,
                                     )
                                 },
-                            )
+                                )
+                            }
                         }
                     }
                 }
@@ -2658,7 +2661,8 @@ fun ColumnItem(
     dragHandle: (@Composable () -> Unit)? = null,
 ) {
     Card(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth(),
         colors =
             CardDefaults.cardColors(
                 containerColor = MaterialTheme.colorScheme.surfaceVariant,

CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/screens/ListsScreen.kt

@@ -1,6 +1,9 @@
+@file:OptIn(androidx.compose.foundation.ExperimentalFoundationApi::class)
+
 package com.collabtable.app.ui.screens
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -195,8 +198,9 @@ fun ListsScreen(
                     verticalArrangement = Arrangement.spacedBy(8.dp),
                 ) {
                     itemsIndexed(working, key = { _, it -> it.id }) { index, list ->
-                        ReorderableItem(reorderState, key = list.id) { isDragging ->
-                            ListItem(
+                        ReorderableItem(reorderState, key = list.id) { _ ->
+                            Box(modifier = Modifier.animateItemPlacement()) {
+                                ListItem(
                                 list = list,
                                 onListClick = { onNavigateToList(list.id) },
                                 onEditClick = { listToEdit = list },
@@ -209,7 +213,8 @@ fun ListsScreen(
                                         tint = MaterialTheme.colorScheme.onSurfaceVariant,
                                     )
                                 },
-                            )
+                                )
+                            }
                         }
                     }
                 }
@@ -283,6 +288,13 @@ fun ListItem(
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically,
         ) {
+            // Drag handle on the far left
+            if (dragHandle != null) {
+                dragHandle()
+                Spacer(modifier = Modifier.padding(start = 8.dp))
+            }
+
+            // Table name centered/left and clickable
             Column(
                 modifier =
                     Modifier
@@ -292,11 +304,9 @@ fun ListItem(
                 Text(text = list.name, style = MaterialTheme.typography.titleMedium)
                 Spacer(modifier = Modifier.height(2.dp))
             }
+
+            // Actions on the right
             Row(verticalAlignment = Alignment.CenterVertically) {
-                if (dragHandle != null) {
-                    dragHandle()
-                    Spacer(modifier = Modifier.height(0.dp).padding(end = 4.dp))
-                }
                 IconButton(onClick = onEditClick) {
                     Icon(
                         Icons.Default.Edit,