feat(ui): Display staff in single card with aligned columns

Replace per-staff cards with a single card listing all staff. Each
line shows the name on the left and role in muted color on the right,
matching the players section style.

AGENTS.md

@@ -3,7 +3,6 @@
 ## Project
 
 MyIce — Kotlin Multiplatform ice hockey schedule/convocation viewer (Android, iOS, Desktop).
-Port of the Flutter app at `~/work/gitea.parano.ch/herel/myice/myice_mobile/`.
 
 ## Build Commands
 

Makefile

@@ -0,0 +1,7 @@
+.PHONY: android desktop
+
+android:
+	./gradlew composeApp:assembleDebug
+
+desktop:
+	./gradlew composeApp:run

README.md

@@ -1,7 +1,7 @@
 # MyIce Kotlin Multiplatform
 
 Ice hockey schedule and convocation viewer for Android, iOS, and Desktop (macOS/Windows/Linux).
-Port of the [Flutter app](https://gitea.parano.ch/herel/myice/myice_mobile) to Kotlin Multiplatform with Compose Multiplatform.
+Kotlin Multiplatform with Compose Multiplatform.
 
 ## Features
 

composeApp/src/androidMain/AndroidManifest.xml

@@ -7,6 +7,7 @@
         android:label="MyIce"
         android:icon="@mipmap/ic_launcher"
         android:supportsRtl="true"
+        android:enableOnBackInvokedCallback="true"
         android:theme="@android:style/Theme.Material.Light.NoActionBar">
         <activity
             android:name=".MainActivity"

composeApp/src/androidMain/kotlin/ch/parano/myice/ui/PlatformBackHandler.android.kt

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+// MyIce Kotlin Multiplatform — schedule/convocation viewer
+// Copyright (C) 2026  parano.ch
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+package ch.parano.myice.ui
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun PlatformBackHandler(enabled: Boolean, onBack: () -> Unit) {
+    BackHandler(enabled = enabled, onBack = onBack)
+}

composeApp/src/commonMain/kotlin/ch/parano/myice/App.kt

@@ -42,7 +42,13 @@ import com.russhwolf.settings.Settings
 sealed class Screen {
     data object Login : Screen()
     data object Schedule : Screen()
-    data class EventDetail(val gameId: String, val account: String, val eventTitle: String) : Screen()
+    data class EventDetail(
+        val gameId: String,
+        val account: String,
+        val eventTitle: String,
+        val eventStart: String,
+        val eventEnd: String,
+    ) : Screen()
 }
 
 @Composable
@@ -82,14 +88,16 @@ fun App(
             Screen.Schedule -> ScheduleScreen(
                 scheduleViewModel = scheduleViewModel,
                 authViewModel = authViewModel,
-                onEventClick = { gameId, account, eventTitle ->
-                    currentScreen = Screen.EventDetail(gameId, account, eventTitle)
+                onEventClick = { gameId, account, eventTitle, eventStart, eventEnd ->
+                    currentScreen = Screen.EventDetail(gameId, account, eventTitle, eventStart, eventEnd)
                 },
             )
             is Screen.EventDetail -> EventDetailScreen(
                 gameId = screen.gameId,
                 account = screen.account,
                 eventTitle = screen.eventTitle,
+                eventStart = screen.eventStart,
+                eventEnd = screen.eventEnd,
                 viewModel = eventDetailViewModel,
                 onBack = { currentScreen = Screen.Schedule },
             )

composeApp/src/commonMain/kotlin/ch/parano/myice/ui/PlatformBackHandler.kt

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+// MyIce Kotlin Multiplatform — schedule/convocation viewer
+// Copyright (C) 2026  parano.ch
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+package ch.parano.myice.ui
+
+import androidx.compose.runtime.Composable
+
+@Composable
+expect fun PlatformBackHandler(enabled: Boolean = true, onBack: () -> Unit)

composeApp/src/commonMain/kotlin/ch/parano/myice/ui/components/EventCard.kt

@@ -80,7 +80,7 @@ fun EventCard(
                     style = MaterialTheme.typography.bodySmall,
                 )
                 Text(
-                    text = formatEventDateTime(event.start, event.end),
+                    text = "Date: ${formatEventDateTime(event.start, event.end)}",
                     style = MaterialTheme.typography.bodySmall,
                 )
             }

composeApp/src/commonMain/kotlin/ch/parano/myice/ui/screens/EventDetailScreen.kt

@@ -19,11 +19,13 @@ package ch.parano.myice.ui.screens
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Card
@@ -43,7 +45,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import ch.parano.myice.ui.PlatformBackHandler
 import ch.parano.myice.ui.components.LoadingIndicator
+import ch.parano.myice.util.formatEventDate
+import ch.parano.myice.util.formatEventTimeRange
 import ch.parano.myice.viewmodel.EventDetailViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -52,10 +57,14 @@ fun EventDetailScreen(
     gameId: String,
     account: String,
     eventTitle: String,
+    eventStart: String,
+    eventEnd: String,
     viewModel: EventDetailViewModel,
     onBack: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    PlatformBackHandler { onBack() }
+
     LaunchedEffect(gameId, account) {
         viewModel.loadEventDetail(gameId, account)
     }
@@ -113,7 +122,8 @@ fun EventDetailScreen(
                             ) {
                                 Text("Type: ${detail.type}")
                                 Text("Lieu: ${detail.place}")
-                                Text("Heure: ${detail.timeStart} - ${detail.timeEnd}")
+                                Text("Date: ${formatEventDate(eventStart)}")
+                                Text("Heure: ${formatEventTimeRange(eventStart, eventEnd)}")
                             }
                         }
                     }
@@ -142,18 +152,31 @@ fun EventDetailScreen(
                                 style = MaterialTheme.typography.titleLarge,
                             )
                         }
-                        items(detail.convocation.available) { player ->
-                            val position = player.position ?: "N/A"
-                            val number = player.number ?: "N/A"
+                        item {
                             Card(modifier = Modifier.fillMaxWidth()) {
-                                Column(
-                                    modifier = Modifier.padding(16.dp),
-                                ) {
-                                    Text("[$position] #$number - ${player.fname} ${player.lname}")
-                                    Text(
-                                        text = "DOB: ${player.dob}",
-                                        style = MaterialTheme.typography.bodySmall,
-                                    )
+                                Column(modifier = Modifier.padding(16.dp)) {
+                                    detail.convocation.available.forEach { player ->
+                                        val position = player.position ?: ""
+                                        val number = player.number ?: ""
+                                        val muted = MaterialTheme.colorScheme.onSurfaceVariant
+                                        Row(
+                                            verticalAlignment = Alignment.CenterVertically,
+                                            horizontalArrangement = Arrangement.spacedBy(6.dp),
+                                            modifier = Modifier.fillMaxWidth(),
+                                        ) {
+                                            Text(
+                                                if (number.isNotEmpty()) "#$number" else "",
+                                                color = muted,
+                                                modifier = Modifier.width(40.dp),
+                                            )
+                                            Text("${player.fname} ${player.lname}")
+                                            Spacer(Modifier.weight(1f))
+                                            if (position.isNotEmpty()) {
+                                                Text(position, color = muted)
+                                            }
+                                            Text("(${player.dob.take(4)})", color = muted)
+                                        }
+                                    }
                                 }
                             }
                         }
@@ -166,12 +189,22 @@ fun EventDetailScreen(
                                 style = MaterialTheme.typography.titleLarge,
                             )
                         }
-                        items(detail.convocation.staff) { staff ->
+                        item {
                             Card(modifier = Modifier.fillMaxWidth()) {
-                                Text(
-                                    text = "${staff.role}: ${staff.fname} ${staff.lname}",
-                                    modifier = Modifier.padding(16.dp),
-                                )
+                                Column(modifier = Modifier.padding(16.dp)) {
+                                    detail.convocation.staff.forEach { staff ->
+                                        val muted = MaterialTheme.colorScheme.onSurfaceVariant
+                                        Row(
+                                            verticalAlignment = Alignment.CenterVertically,
+                                            horizontalArrangement = Arrangement.spacedBy(6.dp),
+                                            modifier = Modifier.fillMaxWidth(),
+                                        ) {
+                                            Text("${staff.fname} ${staff.lname}")
+                                            Spacer(Modifier.weight(1f))
+                                            Text(staff.role, color = muted)
+                                        }
+                                    }
+                                }
                             }
                         }
                     }

composeApp/src/commonMain/kotlin/ch/parano/myice/ui/screens/ScheduleScreen.kt

@@ -65,7 +65,7 @@ import ch.parano.myice.viewmodel.ScheduleViewModel
 fun ScheduleScreen(
     scheduleViewModel: ScheduleViewModel,
     authViewModel: AuthViewModel,
-    onEventClick: (gameId: String, account: String, eventTitle: String) -> Unit,
+    onEventClick: (gameId: String, account: String, eventTitle: String, eventStart: String, eventEnd: String) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     val scheduleState by scheduleViewModel.state.collectAsState()
@@ -250,6 +250,8 @@ fun ScheduleScreen(
                                             event.idEvent,
                                             scheduleState.selectedAccount!!,
                                             event.title,
+                                            event.start,
+                                            event.end,
                                         )
                                     },
                                 )

composeApp/src/commonMain/kotlin/ch/parano/myice/util/EventDateTimeFormatter.kt

@@ -19,23 +19,43 @@ package ch.parano.myice.util
 
 import kotlinx.datetime.LocalDateTime
 
+private val FRENCH_MONTHS = listOf(
+    "janvier", "février", "mars", "avril", "mai", "juin",
+    "juillet", "août", "septembre", "octobre", "novembre", "décembre",
+)
+
 private fun parseOrNull(iso: String): LocalDateTime? = runCatching {
-    LocalDateTime.parse(iso)
+    LocalDateTime.parse(iso.replace(' ', 'T'))
 }.getOrNull()
 
 private fun LocalDateTime.dateStr(): String =
-    "${day.toString().padStart(2, '0')}.${monthNumber.toString().padStart(2, '0')}.${year.toString().padStart(4, '0')}"
+    "${year.toString().padStart(4, '0')}-${monthNumber.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}"
+
+private fun LocalDateTime.dateStrLong(): String =
+    "$day ${FRENCH_MONTHS[monthNumber - 1]} $year"
 
 private fun LocalDateTime.timeStr(): String =
-    "${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}"
+    if (minute == 0) "${hour}h" else "${hour}h${minute.toString().padStart(2, '0')}"
 
 fun formatEventDateTime(start: String, end: String): String {
     val startDt = parseOrNull(start)
     val endDt = parseOrNull(end)
     if (startDt == null || endDt == null) return "$start - $end"
     return if (startDt.date == endDt.date) {
-        "${startDt.dateStr()} ${startDt.timeStr()} - ${endDt.timeStr()}"
+        "${startDt.dateStrLong()} de ${startDt.timeStr()} à ${endDt.timeStr()}"
     } else {
-        "${startDt.dateStr()} ${startDt.timeStr()} - ${endDt.timeStr()} (${endDt.dateStr()})"
+        "${startDt.dateStrLong()} de ${startDt.timeStr()} à ${endDt.timeStr()} (${endDt.dateStrLong()})"
     }
 }
+
+fun formatEventDate(start: String): String {
+    val dt = parseOrNull(start)
+    return dt?.dateStrLong() ?: start
+}
+
+fun formatEventTimeRange(start: String, end: String): String {
+    val startDt = parseOrNull(start)
+    val endDt = parseOrNull(end)
+    if (startDt == null || endDt == null) return "$start - $end"
+    return "${startDt.timeStr()} - ${endDt.timeStr()}"
+}

composeApp/src/commonTest/kotlin/ch/parano/myice/util/EventDateTimeFormatterTest.kt

@@ -28,7 +28,16 @@ class EventDateTimeFormatterTest {
             start = "2024-11-10T14:00:00",
             end = "2024-11-10T16:15:00",
         )
-        assertEquals("10.11.2024 14:00 - 16:15", formatted)
+        assertEquals("10 novembre 2024 de 14h à 16h15", formatted)
+    }
+
+    @Test
+    fun formatsSameDayEventWithSpaceSeparator() {
+        val formatted = formatEventDateTime(
+            start = "2026-08-09 10:00:00",
+            end = "2026-08-09 12:00:00",
+        )
+        assertEquals("9 août 2026 de 10h à 12h", formatted)
     }
 
     @Test
@@ -37,7 +46,7 @@ class EventDateTimeFormatterTest {
             start = "2024-11-10T20:00:00",
             end = "2024-11-11T01:30:00",
         )
-        assertEquals("10.11.2024 20:00 - 01:30 (11.11.2024)", formatted)
+        assertEquals("10 novembre 2024 de 20h à 1h30 (11 novembre 2024)", formatted)
     }
 
     @Test

composeApp/src/desktopMain/kotlin/ch/parano/myice/ui/PlatformBackHandler.desktop.kt

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+// MyIce Kotlin Multiplatform — schedule/convocation viewer
+// Copyright (C) 2026  parano.ch
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+package ch.parano.myice.ui
+
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun PlatformBackHandler(enabled: Boolean, onBack: () -> Unit) {
+}

composeApp/src/iosMain/kotlin/ch/parano/myice/ui/PlatformBackHandler.ios.kt

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+// MyIce Kotlin Multiplatform — schedule/convocation viewer
+// Copyright (C) 2026  parano.ch
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+package ch.parano.myice.ui
+
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun PlatformBackHandler(enabled: Boolean, onBack: () -> Unit) {
+}

docs/superpowers/specs/2026-07-08-myice-kotlin-app-design.md

@@ -6,7 +6,7 @@
 
 ## Context
 
-The existing [MyIce webapp](https://gitea.parano.ch/herel/myice) is a FastAPI backend at `https://myice.parano.ch` that proxies the upstream MyIce Hockey API (`app.myice.hockey`). It serves a single-page web frontend (`index.html`) and a JSON API consumed by a Flutter mobile app (`myice_mobile/`).
+The existing [MyIce webapp](https://gitea.parano.ch/herel/myice) is a FastAPI backend at `https://myice.parano.ch` that proxies the upstream MyIce Hockey API (`app.myice.hockey`). It serves a single-page web frontend (`index.html`) and a JSON API.
 
 This spec describes a **Kotlin Multiplatform (KMP) port** of the Flutter app, targeting **Android, iOS, and Desktop** (macOS/Linux/Windows JVM). It mirrors the Flutter app's clean, simple architecture while using idiomatic KMP tooling, and adds one small feature improvement: showing **practices** alongside games (the Flutter app fetches but discards them).