Details

DetailsScreen muestra una única carta en grande junto a su panel de estadísticas, con acceso a editar (ícono de lápiz en la barra superior) o eliminar (botón + diálogo de confirmación).

Props

@Composable
fun DetailsScreen(
    modifier: Modifier = Modifier,
    card: RacingCard?,
    onBack: () -> Unit = {},
    onEdit: () -> Unit = {},
    onDelete: () -> Unit = {},
)

card es nullable a propósito: Destination.Details es una tab de la barra inferior navegable directamente (no sólo llegando desde Gallery), así que puede visitarse sin que haya ninguna carta seleccionada todavía.

if (card == null) {
    EmptyState(
        icon = Icons.Filled.TouchApp,
        title = "No card selected",
        subtitle = "Select a car from the Gallery to see its details.",
    )
} else {
    // CardWithQuickInfo + botón eliminar
}

El ícono de editar en la actions de la top bar sólo se renderiza if (card != null).

Contenido cuando hay una carta

CenterAlignedTopAppBar("CARD DETAILS", back, [editar si card != null])
└── (scrollable, sólo si card != null)
    ├── CardWithQuickInfo   — carta + panel "Performance" en un mismo marco
    └── OutlinedButton "Eliminar tarjeta" (borde y texto BrandRed)

CardWithQuickInfo (compartido con la propia lógica de armado del reveal) junta en una sola tarjeta la cara del auto y, debajo, el título “Performance” + chip de rareza + las 4 estadísticas en fila — es la vista “definitiva” de una carta, la más completa de las tres representaciones (grid, lista y details).

Eliminar con confirmación

A diferencia del swipe-to-delete de la Gallery (que borra sin preguntar), Details sí confirma:

if (showDeleteConfirm && card != null) {
    AlertDialog(
        title = { Text("Eliminar tarjeta") },
        text = { Text("¿Seguro que quieres eliminar la tarjeta de \"${card.name}\"? Esta acción no se puede deshacer.") },
        confirmButton = { TextButton(onClick = { showDeleteConfirm = false; onDelete() }) { Text("Eliminar") } },
        dismissButton = { TextButton(onClick = { showDeleteConfirm = false }) { Text("Cancelar") } },
    )
}

Es también el único punto de la UI con texto en español (“Eliminar tarjeta”, “Cancelar”) — el resto de la app está en inglés ("My Cards", "Card Details", "New Card"…), una inconsistencia menor a tener presente si el proyecto se localiza formalmente en el futuro.

Flujo de eliminación desde Details

Expandir

flowchart TD
  A["tap en 'Eliminar tarjeta' (OutlinedButton, BrandRed)"] --> B["showDeleteConfirm = true"]
  B --> C{AlertDialog}
  C -->|Cancelar| D[showDeleteConfirm = false]
  C -->|Eliminar| E["onDelete(): cards.remove + selectedCard = null"]
  E --> F["current = Destination.Gallery"]