Android: split large UI files into per-component files

android/app/src/main/java/com/dkhalife/tasks/ui/components/DateTimePickerRow.kt

@@ -0,0 +1,123 @@
+package com.dkhalife.tasks.ui.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CalendarMonth
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TimePicker
+import androidx.compose.material3.rememberDatePickerState
+import androidx.compose.material3.rememberTimePickerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.dkhalife.tasks.ui.utils.toDisplayString
+import java.time.Instant
+import java.time.ZoneId
+import java.time.ZoneOffset
+import java.time.ZonedDateTime
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DateTimePickerRow(
+    label: String,
+    value: ZonedDateTime?,
+    onValueSelected: (ZonedDateTime) -> Unit
+) {
+    var showDatePicker by remember { mutableStateOf(false) }
+    var showTimePicker by remember { mutableStateOf(false) }
+    var pendingDate by remember { mutableStateOf<ZonedDateTime?>(null) }
+
+    val datePickerState = rememberDatePickerState(
+        initialSelectedDateMillis = (value ?: ZonedDateTime.now(ZoneId.systemDefault()))
+            .toInstant().toEpochMilli()
+    )
+    val timePickerState = rememberTimePickerState(
+        initialHour = value?.hour ?: ZonedDateTime.now(ZoneId.systemDefault()).hour,
+        initialMinute = value?.minute ?: 0,
+        is24Hour = false
+    )
+
+    OutlinedButton(
+        onClick = { showDatePicker = true },
+        modifier = Modifier.fillMaxWidth(),
+        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
+    ) {
+        Icon(Icons.Default.CalendarMonth, contentDescription = null)
+        Spacer(Modifier.width(8.dp))
+        Text(
+            text = value?.toDisplayString() ?: label,
+            modifier = Modifier.weight(1f)
+        )
+    }
+
+    if (showDatePicker) {
+        DatePickerDialog(
+            onDismissRequest = { showDatePicker = false },
+            confirmButton = {
+                TextButton(onClick = {
+                    showDatePicker = false
+                    val millis = datePickerState.selectedDateMillis
+                    if (millis != null) {
+                        // selectedDateMillis is UTC midnight for the picked day.
+                        // Extract the LocalDate in UTC, then build a ZonedDateTime
+                        // at midnight in the system timezone to avoid day-offset issues.
+                        val localDate = Instant.ofEpochMilli(millis)
+                            .atZone(ZoneOffset.UTC)
+                            .toLocalDate()
+                        pendingDate = localDate.atStartOfDay(ZoneId.systemDefault())
+                        showTimePicker = true
+                    }
+                }) { Text("Next") }
+            },
+            dismissButton = {
+                TextButton(onClick = { showDatePicker = false }) { Text("Cancel") }
+            }
+        ) {
+            DatePicker(state = datePickerState)
+        }
+    }
+
+    if (showTimePicker) {
+        AlertDialog(
+            onDismissRequest = { showTimePicker = false },
+            title = { Text("Select time") },
+            text = {
+                Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+                    TimePicker(state = timePickerState)
+                }
+            },
+            confirmButton = {
+                TextButton(onClick = {
+                    showTimePicker = false
+                    pendingDate?.let { date ->
+                        val result = date
+                            .withHour(timePickerState.hour)
+                            .withMinute(timePickerState.minute)
+                            .withSecond(0)
+                            .withNano(0)
+                        onValueSelected(result)
+                    }
+                }) { Text("OK") }
+            },
+            dismissButton = {
+                TextButton(onClick = { showTimePicker = false }) { Text("Cancel") }
+            }
+        )
+    }
+}

android/app/src/main/java/com/dkhalife/tasks/ui/components/GroupHeader.kt

@@ -0,0 +1,76 @@
+package com.dkhalife.tasks.ui.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ExpandLess
+import androidx.compose.material.icons.filled.ExpandMore
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.dkhalife.tasks.data.TaskGroup
+
+@Composable
+fun GroupHeader(group: TaskGroup, isExpanded: Boolean, onToggle: () -> Unit) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable(onClick = onToggle)
+            .padding(vertical = 4.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        val headerColor = if (group.color == Color.Unspecified) {
+            MaterialTheme.colorScheme.onSurface
+        } else {
+            group.color
+        }
+
+        val indicatorColor = if (group.color == Color.Unspecified) {
+            MaterialTheme.colorScheme.onSurfaceVariant
+        } else {
+            group.color
+        }
+
+        Surface(
+            shape = MaterialTheme.shapes.extraSmall,
+            color = indicatorColor.copy(alpha = 0.2f),
+            modifier = Modifier.size(12.dp)
+        ) {}
+
+        Spacer(modifier = Modifier.width(8.dp))
+
+        Text(
+            text = group.name,
+            style = MaterialTheme.typography.titleSmall,
+            color = headerColor
+        )
+
+        Spacer(modifier = Modifier.width(8.dp))
+
+        Text(
+            text = "(${group.tasks.size})",
+            style = MaterialTheme.typography.labelSmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        Icon(
+            imageVector = if (isExpanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
+            contentDescription = if (isExpanded) "Collapse" else "Expand",
+            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.size(20.dp)
+        )
+    }
+}

android/app/src/main/java/com/dkhalife/tasks/ui/components/LabelDialog.kt

@@ -0,0 +1,103 @@
+package com.dkhalife.tasks.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.dkhalife.tasks.model.Label
+
+@Composable
+fun LabelDialog(
+    existingLabel: Label?,
+    onDismiss: () -> Unit,
+    onSave: (name: String, color: String) -> Unit
+) {
+    var name by remember { mutableStateOf(existingLabel?.name ?: "") }
+    var color by remember { mutableStateOf(existingLabel?.color ?: "#6650a4") }
+
+    val presetColors = listOf("#6650a4", "#625b71", "#7D5260", "#B3261E", "#006D3B", "#0061A4", "#984061", "#7D5700")
+
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text(if (existingLabel != null) "Edit Label" else "New Label") },
+        text = {
+            Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+                OutlinedTextField(
+                    value = name,
+                    onValueChange = { name = it },
+                    label = { Text("Name") },
+                    singleLine = true,
+                    modifier = Modifier.fillMaxWidth()
+                )
+
+                Text("Color", style = MaterialTheme.typography.titleSmall)
+
+                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                    presetColors.forEach { preset ->
+                        val presetColor = try {
+                            Color(android.graphics.Color.parseColor(preset))
+                        } catch (_: Exception) {
+                            MaterialTheme.colorScheme.primary
+                        }
+
+                        Surface(
+                            onClick = { color = preset },
+                            shape = CircleShape,
+                            color = presetColor,
+                            modifier = Modifier.size(32.dp),
+                        ) {
+                            if (color.equals(preset, ignoreCase = true)) {
+                                Box(
+                                    modifier = Modifier.fillMaxSize(),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    Icon(
+                                        Icons.Default.Check,
+                                        contentDescription = "Selected",
+                                        tint = Color.White,
+                                        modifier = Modifier.size(18.dp)
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        confirmButton = {
+            TextButton(
+                onClick = { onSave(name, color) },
+                enabled = name.isNotBlank()
+            ) {
+                Text("Save")
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Cancel")
+            }
+        }
+    )
+}

android/app/src/main/java/com/dkhalife/tasks/ui/components/LabelItem.kt

@@ -0,0 +1,75 @@
+package com.dkhalife.tasks.ui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Delete
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.dkhalife.tasks.model.Label
+
+@Composable
+fun LabelItem(
+    label: Label,
+    onEdit: () -> Unit,
+    onDelete: () -> Unit
+) {
+    Card(modifier = Modifier.fillMaxWidth()) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            val color = try {
+                Color(android.graphics.Color.parseColor(label.color))
+            } catch (_: Exception) {
+                MaterialTheme.colorScheme.primary
+            }
+
+            Box(
+                modifier = Modifier
+                    .size(24.dp)
+                    .clip(CircleShape)
+                    .background(color)
+            )
+
+            Spacer(modifier = Modifier.width(16.dp))
+
+            Text(
+                text = label.name,
+                style = MaterialTheme.typography.bodyLarge,
+                modifier = Modifier.weight(1f)
+            )
+
+            IconButton(onClick = onEdit) {
+                Icon(Icons.Default.Edit, contentDescription = "Edit")
+            }
+
+            IconButton(onClick = onDelete) {
+                Icon(
+                    Icons.Default.Delete,
+                    contentDescription = "Delete",
+                    tint = MaterialTheme.colorScheme.error
+                )
+            }
+        }
+    }
+}