feat: update field editing functionality to include name parameter and improve UI layout in ListDetailScreen and ListsScreen

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

@@ -6,6 +6,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectDragGestures
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -485,8 +486,8 @@ fun ListDetailScreen(
             onAddField = { name, fieldType, fieldOptions ->
                 viewModel.addField(name, fieldType, fieldOptions)
             },
-            onUpdateField = { fieldId, fieldType, fieldOptions ->
+            onUpdateField = { fieldId, name, fieldType, fieldOptions ->
-                viewModel.updateField(fieldId, fieldType, fieldOptions)
+                viewModel.updateField(fieldId, name, fieldType, fieldOptions)
             },
             onDeleteField = { fieldId ->
                 viewModel.deleteField(fieldId)
@@ -1461,8 +1462,9 @@ fun AddFieldDialog(
 fun EditFieldDialog(
     field: Field,
     onDismiss: () -> Unit,
-    onUpdate: (String, String) -> Unit,
+    onUpdate: (String, String, String) -> Unit,
 ) {
+    var name by remember { mutableStateOf(field.name) }
     var selectedFieldType by remember { mutableStateOf(field.fieldType ?: "TEXT") }
     var dropdownOptions by remember { mutableStateOf(field.getDropdownOptions().joinToString(", ")) }
     var currency by remember { mutableStateOf(field.getCurrency()) }
@@ -1470,11 +1472,20 @@ fun EditFieldDialog(
 
     AlertDialog(
         onDismissRequest = onDismiss,
-        title = { Text("Edit Field: ${field.name}") },
+        title = { Text("Edit Column") },
         text = {
             Column(
                 verticalArrangement = Arrangement.spacedBy(12.dp),
             ) {
+                // Name
+                OutlinedTextField(
+                    value = name,
+                    onValueChange = { name = it },
+                    label = { Text("Column Name") },
+                    singleLine = true,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+
                 // Field Type Selector
                 ExposedDropdownMenuBox(
                     expanded = expanded,
@@ -1758,9 +1769,9 @@ fun EditFieldDialog(
                             "RATING" -> currency.trim().ifBlank { "5" }
                             else -> ""
                         }
-                    onUpdate(selectedFieldType, options)
+                    onUpdate(name.trim(), selectedFieldType, options)
                 },
-                enabled = selectedFieldType !in listOf("DROPDOWN", "AUTOCOMPLETE") || dropdownOptions.isNotBlank(),
+                enabled = name.isNotBlank() && (selectedFieldType !in listOf("DROPDOWN", "AUTOCOMPLETE") || dropdownOptions.isNotBlank()),
             ) {
                 Text("Update")
             }
@@ -2425,7 +2436,7 @@ fun ManageColumnsDialog(
     fields: List<Field>,
     onDismiss: () -> Unit,
     onAddField: (String, String, String) -> Unit,
-    onUpdateField: (String, String, String) -> Unit,
+    onUpdateField: (String, String, String, String) -> Unit,
     onDeleteField: (String) -> Unit,
     onReorderFields: (List<Field>) -> Unit,
 ) {
@@ -2543,6 +2554,7 @@ fun ManageColumnsDialog(
                             Box(
                                 modifier = Modifier.animateItemPlacement(),
                             ) {
+                                if (index > 0) Divider()
                                 ColumnItem(
                                     field = field,
                                     onEdit = { fieldToEdit = field },
@@ -2623,8 +2635,8 @@ fun ManageColumnsDialog(
         EditFieldDialog(
             field = field,
             onDismiss = { fieldToEdit = null },
-            onUpdate = { fieldType, fieldOptions ->
+            onUpdate = { name, fieldType, fieldOptions ->
-                onUpdateField(field.id, fieldType, fieldOptions)
+                onUpdateField(field.id, name, fieldType, fieldOptions)
                 fieldToEdit = null
             },
         )
@@ -2664,26 +2676,16 @@ fun ColumnItem(
     canMoveUp: Boolean,
     canMoveDown: Boolean,
     dragHandle: (@Composable () -> Unit)? = null,
-) {
-    Card(
-        modifier =
-            Modifier
-                .fillMaxWidth(),
-        colors =
-            CardDefaults.cardColors(
-                containerColor = MaterialTheme.colorScheme.surfaceVariant,
-            ),
-        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
 ) {
     Row(
         modifier =
             Modifier
                 .fillMaxWidth()
-                    .padding(12.dp),
+                .padding(horizontal = 16.dp, vertical = 12.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically,
     ) {
-            // Drag handle and optional move buttons
+        // Drag handle
         Column(horizontalAlignment = Alignment.CenterHorizontally) {
             if (dragHandle != null) {
                 dragHandle()
@@ -2763,7 +2765,6 @@ fun ColumnItem(
         }
     }
 }
-}
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable

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

@@ -149,6 +149,7 @@ class ListDetailViewModel(
 
     fun updateField(
         fieldId: String,
+        name: String,
         fieldType: String,
         fieldOptions: String,
     ) {
@@ -157,6 +158,7 @@ class ListDetailViewModel(
             if (field != null) {
                 database.fieldDao().updateField(
                     field.copy(
+                        name = name,
                         fieldType = fieldType,
                         fieldOptions = fieldOptions,
                         updatedAt = System.currentTimeMillis(),

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

@@ -26,8 +26,8 @@ import androidx.compose.material.icons.filled.Refresh
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material.icons.filled.Sort
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Card
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
@@ -200,6 +200,7 @@ fun ListsScreen(
                     itemsIndexed(working, key = { _, it -> it.id }) { index, list ->
                         ReorderableItem(reorderState, key = list.id) { _ ->
                             Box(modifier = Modifier.animateItemPlacement()) {
+                                if (index > 0) Divider()
                                 ListItem(
                                     list = list,
                                     onListClick = { onNavigateToList(list.id) },
@@ -274,17 +275,12 @@ fun ListItem(
     onEditClick: () -> Unit,
     onDeleteClick: () -> Unit,
     dragHandle: (@Composable () -> Unit)? = null,
-) {
-    Card(
-        modifier =
-            Modifier
-                .fillMaxWidth(),
 ) {
     Row(
         modifier =
             Modifier
                 .fillMaxWidth()
-                    .padding(16.dp),
+                .padding(horizontal = 16.dp, vertical = 12.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically,
     ) {
@@ -324,7 +320,6 @@ fun ListItem(
         }
     }
 }
-}
 
 @Composable
 fun CreateListDialog(