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,6 +2537,7 @@ fun ManageColumnsDialog(
                         key = { _, field -> field.id },
                     ) { index, field ->
                         ReorderableItem(reorderState, key = field.id) { _ ->
+                            Box(modifier = Modifier.animateItemPlacement()) {
                                 ColumnItem(
                                 field = field,
                                 onEdit = { fieldToEdit = field },
@@ -2566,6 +2568,7 @@ fun ManageColumnsDialog(
                             }
                         }
                     }
+                }
 
                 Divider()
 
@@ -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,7 +198,8 @@ fun ListsScreen(
                     verticalArrangement = Arrangement.spacedBy(8.dp),
                 ) {
                     itemsIndexed(working, key = { _, it -> it.id }) { index, list ->
-                        ReorderableItem(reorderState, key = list.id) { isDragging ->
+                        ReorderableItem(reorderState, key = list.id) { _ ->
+                            Box(modifier = Modifier.animateItemPlacement()) {
                                 ListItem(
                                 list = list,
                                 onListClick = { onNavigateToList(list.id) },
@@ -216,6 +220,7 @@ fun ListsScreen(
                 }
             }
         }
+    }
 
     if (showCreateDialog) {
         CreateListDialog(
@@ -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,