new: display record indices in RecordView and update layout styling

shared/src/commonMain/kotlin/fr/ajaury/gwenedeg/records/ui/RecordView.kt

@@ -1,23 +1,48 @@
 package fr.ajaury.gwenedeg.records.ui
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import fr.ajaury.gwenedeg.records.domain.Record
 
 @Composable
 fun RecordView(
+    index: Int,
     record: Record,
-    onClick: () -> Unit,
+    onClick: () -> Unit = {},
 ) {
-    Text(
+    Row(
-        text = record.title,
         modifier =
             Modifier
+                .fillMaxWidth()
                 .clickable { onClick() }
                 .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        Text(
+            text = index.toString().padStart(2),
+            fontFamily = FontFamily.Monospace,
+        )
+        Text(text = record.title)
+    }
+}
+
+@Preview
+@Composable
+private fun RecordViewPreview() {
+    RecordView(
+        index = 1,
+        record = Record(title = "Sample Record"),
+        onClick = {},
     )
 }

shared/src/commonMain/kotlin/fr/ajaury/gwenedeg/records/ui/RecordsScreen.kt

@@ -46,6 +46,7 @@ fun RecordsScreen(
         ) {
             itemsIndexed(records) { index, item ->
                 RecordView(
+                    index = index + 1,
                     record = item,
                     onClick = { onRecordClick(item) },
                 )