Redesign workout list with interval details and time chips

composeApp/src/commonMain/composeResources/values-es/strings.xml

@@ -1,32 +1,61 @@
 <resources>
     <!--region Add Workout -->
-    <string name="add_workout_add_interval_title">Agregar intervalo</string>
-    <string name="add_workout_add_interval_interval_name_label">Nombre del intervalo</string>
-    <string name="add_workout_add_interval_duration_label">Duración</string>
-    <string name="add_workout_add_interval_rest_label">Descanso</string>
     <string name="add_workout_add_interval_button_label_add_interval">Agregar intervalo al entrenamiento</string>
     <string name="add_workout_add_interval_button_label_advance">Siguiente</string>
+    <string name="add_workout_add_interval_duration_label">Duración</string>
+    <string name="add_workout_add_interval_interval_name_label">Nombre del intervalo</string>
+    <string name="add_workout_add_interval_rest_label">Descanso</string>
+    <string name="add_workout_add_interval_title">Agregar intervalo</string>
     <string name="add_workout_add_interval_workout_preview_title">Intervalos en el entrenamiento</string>
     <string name="add_workout_create_reps_button_label_advance">Crear y agregar entrenamiento</string>
     <string name="add_workout_create_reps_content_description_decrease_repetitions">Disminuir repeticiones</string>
     <string name="add_workout_create_reps_content_description_increase_repetitions">Aumentar repeticiones</string>
     <string name="add_workout_create_reps_title">Escoge el número de repeticiones</string>
     <string name="add_workout_name_workout_button_label_advance">Siguiente</string>
-    <string name="add_workout_name_workout_title">Nombre del entrenamiento</string>
     <string name="add_workout_name_workout_label">Nombre del entrenamiento</string>
+    <string name="add_workout_name_workout_title">Nombre del entrenamiento</string>
     <string name="add_workout_toolbar_title">Agregar entrenamiento</string>
     <!--endregion Add Workout -->
 
+    <!--region Build Workouts -->
+    <string name="build_workouts_button_label_add_workout">[Add Workout]</string>
+    <string name="build_workouts_button_label_go">[Go]</string>
+    <string name="build_workouts_card_header_workouts">[Workouts]</string>
+    <string name="build_workouts_content_description_remove_workout">[Remove workout]</string>
+    <string name="build_workouts_interval_chip_duration">%1$ds</string>
+    <string name="build_workouts_interval_chip_rest">%1$ds descanso</string>
+    <string name="build_workouts_workout_total_duration">%1$s total</string>
+    <plurals name="build_workouts_workout_repetitions">
+        <item quantity="one">%1$d rep</item>
+        <item quantity="other">%1$d reps</item>
+    </plurals>
+    <!--endregion Build Workouts -->
+
+    <!--region Confirmation Dialog -->
+    <string name="confirmation_dialog_button_label_cancel">[Cancel]</string>
+    <string name="confirmation_dialog_button_label_confirm">[Confirm]</string>
+    <!--endregion Confirmation Dialog -->
+
+    <!--region Home -->
+    <string name="home_button_label_connect_with_strava">[Connect with Strava]</string>
+    <string name="home_button_label_launch_build_workouts">[Launch BuildWorkoutsScreen]</string>
+    <!--endregion Home -->
+
+    <!--region Play Workout -->
+    <string name="play_workout_button_label_start">[Start]</string>
+    <string name="play_workout_button_label_stop">[Stop]</string>
+    <string name="play_workout_confirmation_stop">[Are you sure you want to stop your workout?]</string>
+    <!--endregion Play Workout -->
+
     <!--region Shared -->
     <string name="content_description_navigate_up">Regresar</string>
+    <string name="content_description_remove">[Remove]</string>
+    <string name="interval_duration_label">Duración %1$s</string>
+    <string name="interval_rest_label">Descanso %s</string>
     <plurals name="seconds_long">
         <item quantity="one">%1$d segundo</item>
         <item quantity="other">%1$d segundos</item>
     </plurals>
-
     <string name="seconds_short_label">s</string>
-
-    <string name="interval_duration_label">Duración %1$s</string>
-    <string name="interval_rest_label">Descanso %s</string>
     <!--endregion Shared -->
-</resources>
+</resources>

composeApp/src/commonMain/composeResources/values/strings.xml

@@ -1,32 +1,61 @@
 <resources>
     <!--region Add Workout -->
-    <string name="add_workout_add_interval_title">Add Interval</string>
-    <string name="add_workout_add_interval_interval_name_label">Interval Name</string>
-    <string name="add_workout_add_interval_duration_label">Duration</string>
-    <string name="add_workout_add_interval_rest_label">Rest</string>
     <string name="add_workout_add_interval_button_label_add_interval">Add Interval to Workout</string>
     <string name="add_workout_add_interval_button_label_advance">Next</string>
+    <string name="add_workout_add_interval_duration_label">Duration</string>
+    <string name="add_workout_add_interval_interval_name_label">Interval Name</string>
+    <string name="add_workout_add_interval_rest_label">Rest</string>
+    <string name="add_workout_add_interval_title">Add Interval</string>
     <string name="add_workout_add_interval_workout_preview_title">Intervals in Workout</string>
     <string name="add_workout_create_reps_button_label_advance">Create and Add Workout</string>
     <string name="add_workout_create_reps_content_description_decrease_repetitions">Decrease repetitions</string>
     <string name="add_workout_create_reps_content_description_increase_repetitions">Increase repetitions</string>
     <string name="add_workout_create_reps_title">Choose Number of Repetitions</string>
     <string name="add_workout_name_workout_button_label_advance">Next</string>
-    <string name="add_workout_name_workout_title">Name Workout</string>
     <string name="add_workout_name_workout_label">Workout Name</string>
+    <string name="add_workout_name_workout_title">Name Workout</string>
     <string name="add_workout_toolbar_title">Add Workout</string>
     <!--endregion Add Workout -->
 
+    <!--region Build Workouts -->
+    <string name="build_workouts_button_label_add_workout">Add Workout</string>
+    <string name="build_workouts_button_label_go">Go</string>
+    <string name="build_workouts_card_header_workouts">Workouts</string>
+    <string name="build_workouts_content_description_remove_workout">Remove workout</string>
+    <string name="build_workouts_interval_chip_duration">%1$ds</string>
+    <string name="build_workouts_interval_chip_rest">%1$ds rest</string>
+    <string name="build_workouts_workout_total_duration">%1$s total</string>
+    <plurals name="build_workouts_workout_repetitions">
+        <item quantity="one">%1$d rep</item>
+        <item quantity="other">%1$d reps</item>
+    </plurals>
+    <!--endregion Build Workouts -->
+
+    <!--region Confirmation Dialog -->
+    <string name="confirmation_dialog_button_label_cancel">Cancel</string>
+    <string name="confirmation_dialog_button_label_confirm">Confirm</string>
+    <!--endregion Confirmation Dialog -->
+
+    <!--region Home -->
+    <string name="home_button_label_connect_with_strava">Connect with Strava</string>
+    <string name="home_button_label_launch_build_workouts">Launch BuildWorkoutsScreen</string>
+    <!--endregion Home -->
+
+    <!--region Play Workout -->
+    <string name="play_workout_button_label_start">Start</string>
+    <string name="play_workout_button_label_stop">Stop</string>
+    <string name="play_workout_confirmation_stop">Are you sure you want to stop your workout?</string>
+    <!--endregion Play Workout -->
+
     <!--region Shared -->
     <string name="content_description_navigate_up">Go back</string>
+    <string name="content_description_remove">Remove</string>
+    <string name="interval_duration_label">Duration %1$s</string>
+    <string name="interval_rest_label">Rest %s</string>
     <plurals name="seconds_long">
         <item quantity="one">%1$d second</item>
         <item quantity="other">%1$d seconds</item>
     </plurals>
-
     <string name="seconds_short_label">s</string>
-
-    <string name="interval_duration_label">Duration %1$s</string>
-    <string name="interval_rest_label">Rest %s</string>
     <!--endregion Shared -->
-</resources>
+</resources>

composeApp/src/commonMain/kotlin/com/majotyler/hiittimer/presentation/buildWorkouts/BuildWorkoutsScreen.kt

@@ -17,10 +17,13 @@ import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.Button
-import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
@@ -32,9 +35,20 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.majotyler.hiittimer.domain.model.Interval
 import com.majotyler.hiittimer.domain.model.Workout
-import com.majotyler.hiittimer.presentation.common.RowClickable
 import com.majotyler.hiittimer.presentation.common.TableCard
+import com.majotyler.hiittimer.presentation.common.composables.DurationLabel
+import com.majotyler.hiittimer.presentation.common.composables.RestLabel
+import hiittimer.composeapp.generated.resources.Res
+import hiittimer.composeapp.generated.resources.build_workouts_button_label_add_workout
+import hiittimer.composeapp.generated.resources.build_workouts_button_label_go
+import hiittimer.composeapp.generated.resources.build_workouts_card_header_workouts
+import hiittimer.composeapp.generated.resources.build_workouts_content_description_remove_workout
+import hiittimer.composeapp.generated.resources.build_workouts_workout_repetitions
+import hiittimer.composeapp.generated.resources.build_workouts_workout_total_duration
+import org.jetbrains.compose.resources.pluralStringResource
+import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 
@@ -97,7 +111,7 @@ fun StartButton(
         onClick = { onClickedGo() },
     ) {
         Text(
-            text = "Go",
+            text = stringResource(resource = Res.string.build_workouts_button_label_go),
             fontSize = 30.sp,
         )
     }
@@ -114,28 +128,23 @@ fun Workouts(
         modifier = modifier,
     ) {
         TableCard(
-            header = "Workouts",
+            header = stringResource(resource = Res.string.build_workouts_card_header_workouts),
             content = {
                 Column(
                     horizontalAlignment = Alignment.CenterHorizontally,
-                    modifier = Modifier
+                    modifier = Modifier.fillMaxWidth(),
                 ) {
                     LazyColumn(
                         modifier = Modifier
                             .fillMaxWidth()
                             .weight(weight = 1F),
+                        verticalArrangement = Arrangement.spacedBy(8.dp),
+                        contentPadding = androidx.compose.foundation.layout.PaddingValues(8.dp),
                     ) {
-                        itemsIndexed(list) { index, item ->
-                            RowClickable(
-                                entryNo = index + 1,
-                                text = item.name,
-                                lines = listOf(
-                                    item.intervals.joinToString { "$it " },
-                                    item.repetitions.toString(),
-                                ),
-                                onClickedRow = null,
-                                onClickedRemove = { onDelete(index) },
-                                showDivider = index != list.lastIndex,
+                        itemsIndexed(list) { index, workout ->
+                            WorkoutCard(
+                                workout = workout,
+                                onDelete = { onDelete(index) },
                             )
                         }
                     }
@@ -151,7 +160,7 @@ fun Workouts(
                             modifier = Modifier.width(width = 2.dp),
                         )
                         Text(
-                            text = "Add Workout",
+                            text = stringResource(resource = Res.string.build_workouts_button_label_add_workout),
                             fontWeight = FontWeight.SemiBold,
                             style = MaterialTheme.typography.titleLarge,
                         )
@@ -162,5 +171,98 @@ fun Workouts(
     }
 }
 
+@Composable
+private fun WorkoutCard(
+    workout: Workout,
+    onDelete: () -> Unit,
+) {
+    val totalSeconds = workout.intervals.sumOf { it.duration + it.rest } * workout.repetitions
+    val totalDisplay = formatSeconds(totalSeconds)
+    val repsLabel = pluralStringResource(
+        resource = Res.plurals.build_workouts_workout_repetitions,
+        quantity = workout.repetitions,
+        formatArgs = arrayOf(workout.repetitions),
+    )
+    val totalLabel = stringResource(
+        resource = Res.string.build_workouts_workout_total_duration,
+        formatArgs = arrayOf(totalDisplay),
+    )
 
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant,
+        ),
+        shape = RoundedCornerShape(12.dp),
+    ) {
+        Column(modifier = Modifier.padding(start = 12.dp, top = 12.dp, bottom = 12.dp, end = 0.dp)) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Column(modifier = Modifier.weight(1f)) {
+                    Text(
+                        text = workout.name,
+                        style = MaterialTheme.typography.titleMedium,
+                        fontWeight = FontWeight.Bold,
+                    )
+                    Text(
+                        text = "$repsLabel  ·  $totalLabel",
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.7f),
+                    )
+                }
+                IconButton(onClick = onDelete) {
+                    Icon(
+                        imageVector = Icons.Default.Close,
+                        contentDescription = stringResource(resource = Res.string.build_workouts_content_description_remove_workout),
+                    )
+                }
+            }
 
+            if (workout.intervals.isNotEmpty()) {
+                HorizontalDivider(
+                    modifier = Modifier.padding(vertical = 8.dp),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.2f),
+                )
+                Column(verticalArrangement = Arrangement.spacedBy(6.dp)) {
+                    workout.intervals.forEach { interval ->
+                        IntervalRow(interval = interval)
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun IntervalRow(interval: Interval) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(end = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        Text(
+            text = interval.name,
+            style = MaterialTheme.typography.bodyMedium,
+            fontWeight = FontWeight.Medium,
+            modifier = Modifier.weight(1f),
+        )
+        Row(horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+            DurationLabel(seconds = interval.duration)
+            RestLabel(seconds = interval.rest)
+        }
+    }
+}
+
+private fun formatSeconds(totalSeconds: Int): String {
+    val minutes = totalSeconds / 60
+    val seconds = totalSeconds % 60
+    return when {
+        minutes == 0 -> "${seconds}s"
+        seconds == 0 -> "${minutes}m"
+        else -> "${minutes}m ${seconds}s"
+    }
+}

composeApp/src/commonMain/kotlin/com/majotyler/hiittimer/presentation/common/RowClickable.kt

@@ -29,6 +29,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import hiittimer.composeapp.generated.resources.Res
+import hiittimer.composeapp.generated.resources.content_description_remove
+import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
@@ -103,7 +106,7 @@ fun RowClickable(
             ) {
                 Icon(
                     imageVector = Icons.Default.Close,
-                    contentDescription = "Remove",
+                    contentDescription = stringResource(resource = Res.string.content_description_remove),
                 )
             }
         }

composeApp/src/commonMain/kotlin/com/majotyler/hiittimer/presentation/common/composables/ConfirmationDialog.kt

@@ -5,6 +5,10 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import com.majotyler.hiittimer.presentation.common.ui.HiitAppTheme
+import hiittimer.composeapp.generated.resources.Res
+import hiittimer.composeapp.generated.resources.confirmation_dialog_button_label_cancel
+import hiittimer.composeapp.generated.resources.confirmation_dialog_button_label_confirm
+import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
@@ -21,7 +25,7 @@ fun ConfirmationDialog(
                 onClick = onClickPositive,
             ) {
                 Text(
-                    text = "Confirm",
+                    text = stringResource(resource = Res.string.confirmation_dialog_button_label_confirm),
                 )
             }
         },
@@ -30,7 +34,7 @@ fun ConfirmationDialog(
                 onClick = onClickNegative,
             ) {
                 Text(
-                    text = "Cancel",
+                    text = stringResource(resource = Res.string.confirmation_dialog_button_label_cancel),
                 )
             }
         },