Merge pull request 'fix(desktop): Persist window size and position across restarts' (#2) from desktop-window-size into main

Reviewed-on: #2

Makefile

@@ -1,6 +1,8 @@
-.PHONY: android desktop android-usb android-emulator
+.PHONY: android desktop desktop-install android-usb android-emulator
 
 ADB := $(shell command -v adb 2>/dev/null || echo "$(HOME)/Library/Android/sdk/platform-tools/adb")
+EMULATOR := $(shell command -v emulator 2>/dev/null || echo "$(HOME)/Library/Android/sdk/emulator/emulator")
+AVD := $(firstword $(shell $(EMULATOR) -list-avds 2>/dev/null))
 APK := composeApp/build/outputs/apk/debug/composeApp-debug.apk
 
 android:
@@ -9,8 +11,24 @@ android:
 desktop:
 	./gradlew composeApp:run
 
+desktop-install:
+	./gradlew composeApp:packageDistributionForCurrentOS
+	cp -R composeApp/build/compose/binaries/main/app/myicek.app /Applications/myicek.app
+
 android-usb: android
 	$(ADB) -d install -r $(APK)
+	$(ADB) -d shell am start -n ch.parano.myicek/.MainActivity
 
 android-emulator: android
+	@if ! $(ADB) devices | grep -q '^emulator'; then \
+		echo "Aucun émulateur en cours — lancement de $(AVD)…"; \
+		$(EMULATOR) -avd $(AVD) -no-snapshot-load >/dev/null 2>&1 & \
+		echo "En attente du démarrage…"; \
+		$(ADB) -e wait-for-device; \
+		while [ "$$($(ADB) -e shell getprop sys.boot_completed 2>/dev/null | tr -d '\r')" != "1" ]; do \
+			sleep 2; \
+		done; \
+		echo "Émulateur prêt."; \
+	fi
 	$(ADB) -e install -r $(APK)
+	$(ADB) -e shell am start -n ch.parano.myicek/.MainActivity

composeApp/build.gradle.kts

@@ -37,6 +37,7 @@ kotlin {
                 implementation(compose.runtime)
                 implementation(compose.foundation)
                 implementation(compose.material3)
+                implementation(compose.materialIconsExtended)
                 implementation(compose.components.uiToolingPreview)
                 implementation(libs.ktor.client.core)
                 implementation(libs.ktor.client.content.negotiation)

composeApp/src/androidMain/AndroidManifest.xml

@@ -4,7 +4,7 @@
     <uses-permission android:name="android.permission.INTERNET" />
 
     <application
-        android:label="MyIceK"
+        android:label="MyIce"
         android:icon="@mipmap/ic_launcher"
         android:supportsRtl="true"
         android:enableOnBackInvokedCallback="true"

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

@@ -17,6 +17,11 @@
 
 package ch.parano.myicek
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.togetherWith
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -83,7 +88,14 @@ fun App(
     }
 
     MyIceTheme {
-        when (val screen = currentScreen) {
+        AnimatedContent(
+            targetState = currentScreen,
+            transitionSpec = {
+                fadeIn(tween(300)) togetherWith fadeOut(tween(300))
+            },
+            label = "screenTransition",
+        ) { screen ->
+            when (screen) {
                 Screen.Login -> LoginScreen(viewModel = authViewModel)
                 Screen.Schedule -> ScheduleScreen(
                     scheduleViewModel = scheduleViewModel,
@@ -103,4 +115,5 @@ fun App(
                 )
             }
         }
+    }
 }

composeApp/src/commonMain/kotlin/ch/parano/myicek/WindowStateStorage.kt

@@ -0,0 +1,52 @@
+// 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.myicek
+
+import com.russhwolf.settings.Settings
+
+data class SavedWindowState(
+    val width: Int,
+    val height: Int,
+    val x: Int,
+    val y: Int,
+)
+
+class WindowStateStorage(private val settings: Settings) {
+
+    companion object {
+        private const val WIDTH_KEY = "window_width"
+        private const val HEIGHT_KEY = "window_height"
+        private const val X_KEY = "window_x"
+        private const val Y_KEY = "window_y"
+    }
+
+    fun save(width: Int, height: Int, x: Int, y: Int) {
+        settings.putInt(WIDTH_KEY, width)
+        settings.putInt(HEIGHT_KEY, height)
+        settings.putInt(X_KEY, x)
+        settings.putInt(Y_KEY, y)
+    }
+
+    fun load(): SavedWindowState? {
+        val width = settings.getIntOrNull(WIDTH_KEY) ?: return null
+        val height = settings.getIntOrNull(HEIGHT_KEY) ?: return null
+        val x = settings.getIntOrNull(X_KEY) ?: return null
+        val y = settings.getIntOrNull(Y_KEY) ?: return null
+        return SavedWindowState(width, height, x, y)
+    }
+}

composeApp/src/commonMain/kotlin/ch/parano/myicek/filter/EventFilter.kt

@@ -52,3 +52,9 @@ fun List<Event>.distinctAgegroups(): List<String> =
 
 fun List<Event>.distinctSubgroups(): List<String> =
     map { extractSubgroup(it.name) }.toSet().sorted()
+
+fun groupEventsByDate(events: List<Event>): List<Pair<String, List<Event>>> =
+    events
+        .sortedBy { it.start }
+        .groupBy { it.start.take(10) }
+        .toList()

composeApp/src/commonMain/kotlin/ch/parano/myicek/ui/components/EmptyState.kt

@@ -0,0 +1,67 @@
+// 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.myicek.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+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.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+import ch.parano.myicek.ui.theme.Dimens
+
+@Composable
+fun EmptyState(
+    icon: ImageVector,
+    title: String,
+    message: String,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            modifier = Modifier.size(48.dp),
+            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+        Spacer(Modifier.height(Dimens.md))
+        Text(
+            text = title,
+            style = MaterialTheme.typography.titleMedium,
+            color = MaterialTheme.colorScheme.onSurface,
+        )
+        Spacer(Modifier.height(Dimens.sm))
+        Text(
+            text = message,
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+    }
+}

composeApp/src/commonMain/kotlin/ch/parano/myicek/ui/components/ErrorState.kt

@@ -0,0 +1,73 @@
+// 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.myicek.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+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.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+import ch.parano.myicek.ui.theme.Dimens
+
+@Composable
+fun ErrorState(
+    icon: ImageVector,
+    title: String,
+    message: String,
+    onRetry: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            modifier = Modifier.size(48.dp),
+            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+        Spacer(Modifier.height(Dimens.md))
+        Text(
+            text = title,
+            style = MaterialTheme.typography.titleMedium,
+            color = MaterialTheme.colorScheme.onSurface,
+        )
+        Spacer(Modifier.height(Dimens.sm))
+        Text(
+            text = message,
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+        Spacer(Modifier.height(Dimens.lg))
+        Button(onClick = onRetry) {
+            Text("Réessayer")
+        }
+    }
+}

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

@@ -22,19 +22,30 @@ 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.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 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.material.icons.Icons
+import androidx.compose.material.icons.filled.Place
+import androidx.compose.material.icons.filled.Schedule
+import androidx.compose.material3.AssistChip
+import androidx.compose.material3.AssistChipDefaults
 import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
 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.graphics.Color
 import androidx.compose.ui.unit.dp
 import ch.parano.myicek.models.Event
-import ch.parano.myicek.util.formatEventDateTime
+import ch.parano.myicek.ui.theme.Dimens
+import ch.parano.myicek.util.formatEventTimeRange
 
 @Composable
 fun EventCard(
@@ -42,6 +53,7 @@ fun EventCard(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val isGame = event.eventType == "Jeu"
     val stripeColor = event.color?.let { parseHexColor(it) }
         ?: MaterialTheme.colorScheme.primary
 
@@ -49,9 +61,12 @@ fun EventCard(
         onClick = onClick,
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 16.dp, vertical = 8.dp),
+            .padding(horizontal = Dimens.lg, vertical = Dimens.sm),
+        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
         ) {
-        Row {
             Box(
                 modifier = Modifier
                     .width(4.dp)
@@ -60,32 +75,82 @@ fun EventCard(
             )
             Column(
                 modifier = Modifier
-                    .padding(16.dp),
-                verticalArrangement = Arrangement.spacedBy(4.dp),
+                    .fillMaxWidth()
+                    .padding(Dimens.lg),
+                verticalArrangement = Arrangement.spacedBy(Dimens.xs),
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically,
                 ) {
                     Text(
                         text = "${event.agegroup} - ${event.name}",
                         style = MaterialTheme.typography.titleMedium,
+                        modifier = Modifier.weight(1f),
                     )
+                    AssistChip(
+                        onClick = {},
+                        label = {
                             Text(
-                    text = event.title,
+                                if (isGame) "Match" else "Entraînement",
+                                style = MaterialTheme.typography.labelMedium,
+                            )
+                        },
+                        colors = if (isGame) {
+                            AssistChipDefaults.assistChipColors(
+                                containerColor = MaterialTheme.colorScheme.primaryContainer,
+                                labelColor = MaterialTheme.colorScheme.onPrimaryContainer,
+                            )
+                        } else {
+                            AssistChipDefaults.assistChipColors(
+                                containerColor = MaterialTheme.colorScheme.secondaryContainer,
+                                labelColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                            )
+                        },
+                    )
+                }
+                Text(
+                    text = if (isGame) "Match vs ${event.opponent}" else "Entraînement",
                     style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+                Spacer(Modifier.height(Dimens.xs))
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(Dimens.xs),
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Place,
+                        contentDescription = null,
+                        modifier = Modifier.width(18.dp).height(18.dp),
+                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
                     )
                     Text(
-                    text = "Adversaire: ${event.opponent}",
-                    style = MaterialTheme.typography.bodySmall,
+                        text = event.place,
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                }
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(Dimens.xs),
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Schedule,
+                        contentDescription = null,
+                        modifier = Modifier.width(18.dp).height(18.dp),
+                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
                     )
                     Text(
-                    text = "Lieu: ${event.place}",
-                    style = MaterialTheme.typography.bodySmall,
-                )
-                Text(
-                    text = "Date: ${formatEventDateTime(event.start, event.end)}",
+                        text = formatEventTimeRange(event.start, event.end),
                         style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                     )
                 }
             }
         }
+    }
 }
 
 private fun parseHexColor(hex: String): Color? {

composeApp/src/commonMain/kotlin/ch/parano/myicek/ui/components/FilterChips.kt

@@ -0,0 +1,124 @@
+// 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.myicek.ui.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDropDown
+import androidx.compose.material3.AssistChip
+import androidx.compose.material3.AssistChipDefaults
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SegmentedButton
+import androidx.compose.material3.SegmentedButtonDefaults
+import androidx.compose.material3.SingleChoiceSegmentedButtonRow
+import androidx.compose.material3.Text
+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.Modifier
+import ch.parano.myicek.filter.TypeFilter
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TypeFilterSegmented(
+    selected: TypeFilter,
+    onSelect: (TypeFilter) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    SingleChoiceSegmentedButtonRow(modifier = modifier.fillMaxWidth()) {
+        val options = listOf(
+            TypeFilter.ALL to "Tous",
+            TypeFilter.GAMES to "Matchs",
+            TypeFilter.PRACTICES to "Entraînements",
+        )
+        options.forEachIndexed { index, (filter, label) ->
+            SegmentedButton(
+                selected = selected == filter,
+                onClick = { onSelect(filter) },
+                shape = SegmentedButtonDefaults.itemShape(index, options.size),
+            ) {
+                Text(label)
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FilterAssistChip(
+    label: String,
+    selectedValue: String?,
+    options: List<String>,
+    onSelect: (String?) -> Unit,
+    modifier: Modifier = Modifier,
+    showAllOption: Boolean = true,
+) {
+    var expanded by remember { mutableStateOf(false) }
+    val displayValue = selectedValue ?: "Tous"
+
+    Box(modifier = modifier) {
+        AssistChip(
+            onClick = { expanded = true },
+            label = { Text("$label: $displayValue") },
+            trailingIcon = {
+                Icon(
+                    imageVector = Icons.Filled.ArrowDropDown,
+                    contentDescription = null,
+                )
+            },
+            colors = if (selectedValue != null) {
+                AssistChipDefaults.assistChipColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer,
+                    labelColor = MaterialTheme.colorScheme.onPrimaryContainer,
+                )
+            } else {
+                AssistChipDefaults.assistChipColors()
+            },
+        )
+        DropdownMenu(
+            expanded = expanded,
+            onDismissRequest = { expanded = false },
+        ) {
+            if (showAllOption) {
+                DropdownMenuItem(
+                    text = { Text("Tous") },
+                    onClick = {
+                        onSelect(null)
+                        expanded = false
+                    },
+                )
+            }
+            options.forEach { option ->
+                DropdownMenuItem(
+                    text = { Text(option) },
+                    onClick = {
+                        onSelect(option)
+                        expanded = false
+                    },
+                )
+            }
+        }
+    }
+}

composeApp/src/commonMain/kotlin/ch/parano/myicek/ui/components/FilterDropdown.kt

@@ -1,73 +0,0 @@
-// 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.myicek.ui.components
-
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material3.DropdownMenuItem
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ExposedDropdownMenuBox
-import androidx.compose.material3.ExposedDropdownMenuDefaults
-import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Text
-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.Modifier
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun FilterDropdown(
-    label: String,
-    selectedValue: String?,
-    options: List<String>,
-    onSelect: (String?) -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    var expanded by remember { mutableStateOf(false) }
-
-    ExposedDropdownMenuBox(
-        expanded = expanded,
-        onExpandedChange = { expanded = it },
-        modifier = modifier,
-    ) {
-        OutlinedTextField(
-            value = selectedValue ?: "",
-            onValueChange = {},
-            readOnly = true,
-            label = { Text(label) },
-            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded) },
-            modifier = Modifier.menuAnchor().fillMaxWidth(),
-        )
-        ExposedDropdownMenu(
-            expanded = expanded,
-            onDismissRequest = { expanded = false },
-        ) {
-            options.forEach { option ->
-                DropdownMenuItem(
-                    text = { Text(option) },
-                    onClick = {
-                        onSelect(option)
-                        expanded = false
-                    },
-                )
-            }
-        }
-    }
-}

composeApp/src/commonMain/kotlin/ch/parano/myicek/ui/components/SkeletonCard.kt

@@ -0,0 +1,96 @@
+// 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.myicek.ui.components
+
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+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.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import ch.parano.myicek.ui.theme.Dimens
+
+@Composable
+fun SkeletonCard(modifier: Modifier = Modifier) {
+    val transition = rememberInfiniteTransition(label = "shimmer")
+    val alpha by transition.animateFloat(
+        initialValue = 0.3f,
+        targetValue = 0.6f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(800),
+            repeatMode = RepeatMode.Reverse,
+        ),
+        label = "shimmerAlpha",
+    )
+
+    val skeletonColor = MaterialTheme.colorScheme.surfaceVariant
+    val skeletonModifier = Modifier
+        .alpha(alpha)
+        .background(skeletonColor, RoundedCornerShape(4.dp))
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = Dimens.lg, vertical = Dimens.sm)
+            .clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surface)
+            .padding(Dimens.lg),
+    ) {
+        Column(verticalArrangement = Arrangement.spacedBy(Dimens.sm)) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+            ) {
+                Box(modifier = Modifier
+                    .height(20.dp)
+                    .width(160.dp)
+                    .then(skeletonModifier))
+                Box(modifier = Modifier
+                    .size(28.dp)
+                    .clip(CircleShape)
+                    .then(skeletonModifier))
+            }
+            Box(modifier = Modifier
+                .height(16.dp)
+                .width(200.dp)
+                .then(skeletonModifier))
+            Box(modifier = Modifier
+                .height(16.dp)
+                .width(180.dp)
+                .then(skeletonModifier))
+        }
+    }
+}

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

@@ -17,24 +17,39 @@
 
 package ch.parano.myicek.ui.screens
 
+import androidx.compose.foundation.background
 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.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.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.CalendarMonth
+import androidx.compose.material.icons.filled.ErrorOutline
+import androidx.compose.material.icons.filled.Event
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.Place
+import androidx.compose.material.icons.filled.Schedule
+import androidx.compose.material.icons.filled.Warning
+import androidx.compose.material3.AssistChip
+import androidx.compose.material3.AssistChipDefaults
+import androidx.compose.material3.Badge
+import androidx.compose.material3.BadgedBox
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -42,11 +57,12 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
 import ch.parano.myicek.ui.PlatformBackHandler
+import ch.parano.myicek.ui.components.ErrorState
 import ch.parano.myicek.ui.components.LoadingIndicator
+import ch.parano.myicek.ui.theme.Dimens
 import ch.parano.myicek.util.formatEventDate
 import ch.parano.myicek.util.formatEventTimeRange
 import ch.parano.myicek.viewmodel.EventDetailViewModel
@@ -76,8 +92,11 @@ fun EventDetailScreen(
             TopAppBar(
                 title = { Text(eventTitle) },
                 navigationIcon = {
-                    androidx.compose.material3.TextButton(onClick = onBack) {
-                        Text("Retour")
+                    IconButton(onClick = onBack) {
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                            contentDescription = "Retour",
+                        )
                     }
                 },
             )
@@ -89,41 +108,39 @@ fun EventDetailScreen(
                 LoadingIndicator(modifier = Modifier.padding(padding))
             }
             state.error != null -> {
-                Column(
-                    modifier = Modifier.fillMaxSize().padding(padding),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center,
-                ) {
-                    Text(
-                        text = state.error!!,
-                        color = MaterialTheme.colorScheme.error,
+                ErrorState(
+                    icon = Icons.Filled.ErrorOutline,
+                    title = "Erreur",
+                    message = state.error!!,
+                    onRetry = { viewModel.loadEventDetail(gameId, account) },
+                    modifier = Modifier.padding(padding),
                 )
-                    Spacer(modifier = Modifier.height(8.dp))
-                    TextButton(onClick = { viewModel.loadEventDetail(gameId, account) }) {
-                        Text("Reessayer")
-                    }
-                }
             }
             state.eventDetail != null -> {
                 val detail = state.eventDetail!!
-                val hasPlayers = detail.convocation.available.isNotEmpty()
-                val hasStaff = detail.convocation.staff.isNotEmpty()
+                val players = detail.convocation.available.sortedBy { it.number?.toIntOrNull() ?: Int.MAX_VALUE }
+                val staff = detail.convocation.staff
+                val hasPlayers = players.isNotEmpty()
+                val hasStaff = staff.isNotEmpty()
 
                 LazyColumn(
                     modifier = Modifier.fillMaxSize().padding(padding),
-                    contentPadding = androidx.compose.foundation.layout.PaddingValues(16.dp),
-                    verticalArrangement = Arrangement.spacedBy(16.dp),
+                    contentPadding = androidx.compose.foundation.layout.PaddingValues(Dimens.lg),
+                    verticalArrangement = Arrangement.spacedBy(Dimens.lg),
                 ) {
                     item {
-                        Card(modifier = Modifier.fillMaxWidth()) {
-                            Column(
-                                modifier = Modifier.padding(16.dp),
-                                verticalArrangement = Arrangement.spacedBy(4.dp),
+                        Card(
+                            modifier = Modifier.fillMaxWidth(),
+                            elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
                         ) {
-                                Text("Type: ${detail.type}")
-                                Text("Lieu: ${detail.place}")
-                                Text("Date: ${formatEventDate(eventStart)}")
-                                Text("Heure: ${formatEventTimeRange(eventStart, eventEnd)}")
+                            Column(
+                                modifier = Modifier.padding(Dimens.lg),
+                                verticalArrangement = Arrangement.spacedBy(Dimens.md),
+                            ) {
+                                InfoRow(Icons.Filled.Event, "Type", detail.type)
+                                InfoRow(Icons.Filled.Place, "Lieu", detail.place)
+                                InfoRow(Icons.Filled.CalendarMonth, "Date", formatEventDate(eventStart))
+                                InfoRow(Icons.Filled.Schedule, "Heure", formatEventTimeRange(eventStart, eventEnd))
                             }
                         }
                     }
@@ -133,49 +150,86 @@ fun EventDetailScreen(
                             Card(
                                 modifier = Modifier.fillMaxWidth(),
                                 colors = CardDefaults.cardColors(
-                                    containerColor = Color(0xFFFFC107),
+                                    containerColor = MaterialTheme.colorScheme.errorContainer,
                                 ),
                             ) {
-                                Text(
-                                    text = "Aucun joueur ni personnel convoque",
-                                    fontWeight = FontWeight.Bold,
-                                    modifier = Modifier.padding(16.dp),
+                                Row(
+                                    modifier = Modifier.padding(Dimens.lg),
+                                    verticalAlignment = Alignment.CenterVertically,
+                                    horizontalArrangement = Arrangement.spacedBy(Dimens.sm),
+                                ) {
+                                    Icon(
+                                        imageVector = Icons.Filled.Warning,
+                                        contentDescription = null,
+                                        tint = MaterialTheme.colorScheme.onErrorContainer,
                                     )
+                                    Text(
+                                        text = "Aucun joueur ni personnel convoqué",
+                                        color = MaterialTheme.colorScheme.onErrorContainer,
+                                    )
+                                }
                             }
                         }
                     }
 
                     if (hasPlayers) {
                         item {
+                            BadgedBox(badge = { Badge { Text("${players.size}") } }) {
                                 Text(
-                                text = "Joueurs (${detail.convocation.available.size})",
-                                style = MaterialTheme.typography.titleLarge,
+                                    text = "Joueurs",
+                                    style = MaterialTheme.typography.titleMedium,
                                 )
                             }
+                        }
                         item {
-                            Card(modifier = Modifier.fillMaxWidth()) {
-                                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),
+                            Card(
                                 modifier = Modifier.fillMaxWidth(),
+                                elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
+                            ) {
+                                Column {
+                                    players.forEach { player ->
+                                        ListItem(
+                                            leadingContent = {
+                                                Box(
+                                                    modifier = Modifier
+                                                        .size(40.dp)
+                                                        .clip(CircleShape)
+                                                        .background(MaterialTheme.colorScheme.primaryContainer),
+                                                    contentAlignment = Alignment.Center,
                                                 ) {
                                                     Text(
-                                                if (number.isNotEmpty()) "#$number" else "",
-                                                color = muted,
-                                                modifier = Modifier.width(40.dp),
+                                                        text = player.number?.let { "#$it" } ?: "",
+                                                        style = MaterialTheme.typography.labelMedium,
+                                                        color = MaterialTheme.colorScheme.onPrimaryContainer,
                                                     )
+                                                }
+                                            },
+                                            headlineContent = {
                                                 Text("${player.fname} ${player.lname}")
-                                            Spacer(Modifier.weight(1f))
-                                            if (position.isNotEmpty()) {
-                                                Text(position, color = muted)
+                                            },
+                                            supportingContent = {
+                                                if (player.dob.isNotBlank()) {
+                                                    Text(player.dob)
                                                 }
-                                            Text("(${player.dob.take(4)})", color = muted)
+                                            },
+                                            trailingContent = {
+                                                if (!player.position.isNullOrBlank()) {
+                                                    AssistChip(
+                                                        onClick = {},
+                                                        label = {
+                                                            Text(
+                                                                player.position,
+                                                                style = MaterialTheme.typography.labelMedium,
+                                                            )
+                                                        },
+                                                        colors = AssistChipDefaults.assistChipColors(
+                                                            containerColor = MaterialTheme.colorScheme.secondaryContainer,
+                                                            labelColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                                                        ),
+                                                    )
                                                 }
+                                            },
+                                        )
                                     }
                                 }
                             }
@@ -186,23 +240,38 @@ fun EventDetailScreen(
                         item {
                             Text(
                                 text = "Personnel",
-                                style = MaterialTheme.typography.titleLarge,
+                                style = MaterialTheme.typography.titleMedium,
                             )
                         }
                         item {
-                            Card(modifier = Modifier.fillMaxWidth()) {
-                                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),
+                            Card(
                                 modifier = Modifier.fillMaxWidth(),
+                                elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
                             ) {
-                                            Text("${staff.fname} ${staff.lname}")
-                                            Spacer(Modifier.weight(1f))
-                                            Text(staff.role, color = muted)
-                                        }
+                                Column {
+                                    staff.forEach { member ->
+                                        ListItem(
+                                            leadingContent = {
+                                                Icon(
+                                                    imageVector = Icons.Filled.Person,
+                                                    contentDescription = null,
+                                                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                                                )
+                                            },
+                                            headlineContent = {
+                                                Text("${member.fname} ${member.lname}")
+                                            },
+                                            trailingContent = {
+                                                AssistChip(
+                                                    onClick = {},
+                                                    label = { Text(member.role) },
+                                                    colors = AssistChipDefaults.assistChipColors(
+                                                        containerColor = MaterialTheme.colorScheme.secondaryContainer,
+                                                        labelColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                                                    ),
+                                                )
+                                            },
+                                        )
                                     }
                                 }
                             }
@@ -216,9 +285,40 @@ fun EventDetailScreen(
                     horizontalAlignment = Alignment.CenterHorizontally,
                     verticalArrangement = Arrangement.Center,
                 ) {
-                    Text("Aucune donnee disponible")
+                    Text("Aucune donnée disponible")
                 }
             }
         }
     }
 }
+
+@Composable
+private fun InfoRow(
+    icon: androidx.compose.ui.graphics.vector.ImageVector,
+    label: String,
+    value: String,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(Dimens.sm),
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            modifier = Modifier.size(18.dp),
+            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+        Column {
+            Text(
+                text = label.uppercase(),
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+            Text(
+                text = value,
+                style = MaterialTheme.typography.bodyLarge,
+                color = MaterialTheme.colorScheme.onSurface,
+            )
+        }
+    }
+}

composeApp/src/commonMain/kotlin/ch/parano/myicek/ui/screens/LoginScreen.kt

@@ -17,14 +17,22 @@
 
 package ch.parano.myicek.ui.screens
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Login
+import androidx.compose.material.icons.filled.SportsHockey
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
@@ -37,10 +45,12 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 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 ch.parano.myicek.viewmodel.AuthViewModel
+import ch.parano.myicek.ui.theme.Dimens
 import ch.parano.myicek.viewmodel.AuthState
+import ch.parano.myicek.viewmodel.AuthViewModel
 
 @Composable
 fun LoginScreen(
@@ -65,22 +75,44 @@ fun LoginScreen(
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center,
         ) {
+            Box(
+                modifier = Modifier
+                    .size(80.dp)
+                    .clip(CircleShape)
+                    .background(MaterialTheme.colorScheme.primaryContainer),
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.SportsHockey,
+                    contentDescription = null,
+                    modifier = Modifier.size(48.dp),
+                    tint = MaterialTheme.colorScheme.onPrimaryContainer,
+                )
+            }
+            Spacer(Modifier.height(Dimens.lg))
             Text(
-                text = "MyIceK",
+                text = "MyIce",
                 style = MaterialTheme.typography.headlineLarge,
                 fontWeight = FontWeight.Bold,
             )
             Text(
-                text = "Games",
+                text = "Votre calendrier hockey",
                 style = MaterialTheme.typography.titleMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
             )
-            Spacer(modifier = Modifier.height(32.dp))
+            Spacer(Modifier.height(Dimens.xxl))
             if (state is AuthState.Loading) {
                 CircularProgressIndicator()
             } else {
                 Button(
                     onClick = { viewModel.login() },
+                    modifier = Modifier.height(48.dp),
                 ) {
+                    Icon(
+                        imageVector = Icons.AutoMirrored.Filled.Login,
+                        contentDescription = null,
+                    )
+                    Spacer(Modifier.size(Dimens.sm))
                     Text("Se connecter avec Infomaniak")
                 }
             }

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

@@ -17,12 +17,9 @@
 
 package ch.parano.myicek.ui.screens
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.expandVertically
-import androidx.compose.animation.shrinkVertically
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 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
@@ -30,37 +27,46 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Logout
+import androidx.compose.material.icons.filled.CalendarMonth
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.CloudOff
+import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.material3.AssistChip
 import androidx.compose.material3.Card
-import androidx.compose.material3.pulltorefresh.PullToRefreshBox
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 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.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
 import ch.parano.myicek.filter.TypeFilter
+import ch.parano.myicek.filter.groupEventsByDate
+import ch.parano.myicek.ui.components.EmptyState
+import ch.parano.myicek.ui.components.ErrorState
 import ch.parano.myicek.ui.components.EventCard
-import ch.parano.myicek.ui.components.FilterDropdown
-import ch.parano.myicek.ui.components.LoadingIndicator
+import ch.parano.myicek.ui.components.FilterAssistChip
+import ch.parano.myicek.ui.components.SkeletonCard
+import ch.parano.myicek.ui.components.TypeFilterSegmented
+import ch.parano.myicek.ui.theme.Dimens
+import ch.parano.myicek.util.formatEventDate
 import ch.parano.myicek.viewmodel.AuthViewModel
 import ch.parano.myicek.viewmodel.ScheduleViewModel
+import kotlinx.datetime.Instant
+import kotlinx.datetime.TimeZone
+import kotlinx.datetime.toLocalDateTime
 
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 @Composable
 fun ScheduleScreen(
     scheduleViewModel: ScheduleViewModel,
@@ -69,7 +75,6 @@ fun ScheduleScreen(
     modifier: Modifier = Modifier,
 ) {
     val scheduleState by scheduleViewModel.state.collectAsState()
-    val authState by authViewModel.state.collectAsState()
 
     LaunchedEffect(scheduleState.selectedAccount) {
         if (scheduleState.selectedAccount != null && scheduleState.events.isEmpty()) {
@@ -77,27 +82,29 @@ fun ScheduleScreen(
         }
     }
 
+    val hasActiveFilters = scheduleState.selectedAgegroup != null ||
+        scheduleState.selectedSubgroup != null ||
+        scheduleState.typeFilter != TypeFilter.DEFAULT
+
     Scaffold(
         topBar = {
             TopAppBar(
-                title = { Text("MyIceK") },
+                title = { Text("Calendrier") },
                 actions = {
-                    val email = (authState as? ch.parano.myicek.viewmodel.AuthState.Authenticated)?.email
-                    if (email != null) {
-                        Text(
-                            text = email,
-                            style = MaterialTheme.typography.bodySmall,
-                            modifier = Modifier.padding(horizontal = 8.dp),
+                    IconButton(onClick = { scheduleViewModel.refreshSchedule() }) {
+                        Icon(
+                            imageVector = Icons.Filled.Refresh,
+                            contentDescription = "Rafraîchir",
                         )
                     }
-                    TextButton(onClick = { scheduleViewModel.refreshSchedule() }) {
-                        Text("Rafraichir")
-                    }
-                    TextButton(onClick = {
+                    IconButton(onClick = {
                         scheduleViewModel.clearCache()
                         authViewModel.logout()
                     }) {
-                        Text("Deconnexion")
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Filled.Logout,
+                            contentDescription = "Déconnexion",
+                        )
                     }
                 },
             )
@@ -107,144 +114,119 @@ fun ScheduleScreen(
         Column(
             modifier = Modifier.fillMaxSize().padding(padding),
         ) {
-            var filtersExpanded by remember { mutableStateOf(false) }
-
-            val activeFilterCount = listOf(
-                scheduleState.selectedAccount,
-                scheduleState.selectedAgegroup,
-                scheduleState.selectedSubgroup,
-            ).count { it != null } + if (scheduleState.typeFilter != TypeFilter.GAMES) 1 else 0
-
             Card(
-                modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 8.dp),
-            ) {
-                Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                        .clickable { filtersExpanded = !filtersExpanded }
-                        .padding(horizontal = 16.dp, vertical = 12.dp),
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    Text(
-                        text = "Filtres",
-                        style = MaterialTheme.typography.titleSmall,
-                        fontWeight = FontWeight.Medium,
-                    )
-                    if (activeFilterCount > 0) {
-                        Spacer(Modifier.height(0.dp))
-                        Text(
-                            text = "($activeFilterCount actif${if (activeFilterCount > 1) "s" else ""})",
-                            style = MaterialTheme.typography.bodySmall,
-                            color = MaterialTheme.colorScheme.primary,
-                            modifier = Modifier.padding(start = 8.dp),
-                        )
-                    }
-                    Spacer(Modifier.weight(1f))
-                    Text(
-                        text = if (filtersExpanded) "▲" else "▼",
-                        style = MaterialTheme.typography.bodySmall,
-                    )
-                }
-                AnimatedVisibility(
-                    visible = filtersExpanded,
-                    enter = expandVertically(),
-                    exit = shrinkVertically(),
+                    .padding(horizontal = Dimens.lg, vertical = Dimens.sm),
+                colors = CardDefaults.cardColors(
+                    containerColor = MaterialTheme.colorScheme.surfaceVariant,
+                ),
             ) {
                 Column(
-                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
-                        verticalArrangement = Arrangement.spacedBy(8.dp),
+                    modifier = Modifier.padding(Dimens.lg),
+                    verticalArrangement = Arrangement.spacedBy(Dimens.sm),
                 ) {
-                        Row(
-                            horizontalArrangement = Arrangement.spacedBy(8.dp),
-                        ) {
-                            FilterDropdown(
-                                label = "Compte",
-                                selectedValue = scheduleState.selectedAccount,
-                                options = scheduleState.accounts.map { it.name },
-                                onSelect = { it?.let { acc -> scheduleViewModel.setAccount(acc) } },
-                                modifier = Modifier.weight(1f),
+                    TypeFilterSegmented(
+                        selected = scheduleState.typeFilter,
+                        onSelect = { scheduleViewModel.setTypeFilter(it) },
                     )
-                            FilterDropdown(
-                                label = "Type",
-                                selectedValue = typeFilterLabel(scheduleState.typeFilter),
-                                options = listOf("Tous", "Matchs", "Entrainements"),
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(Dimens.sm),
+                        modifier = Modifier.fillMaxWidth(),
+                    ) {
+                        FilterAssistChip(
+                            label = "Compte",
+                            selectedValue = scheduleState.accounts.find { it.name == scheduleState.selectedAccount }?.label,
+                            options = scheduleState.accounts.map { it.label },
                             onSelect = { label ->
-                                    val filter = when (label) {
-                                        "Tous" -> TypeFilter.ALL
-                                        "Matchs" -> TypeFilter.GAMES
-                                        "Entrainements" -> TypeFilter.PRACTICES
-                                        else -> TypeFilter.DEFAULT
-                                    }
-                                    scheduleViewModel.setTypeFilter(filter)
+                                val account = scheduleState.accounts.find { it.label == label }
+                                if (account != null) scheduleViewModel.setAccount(account.name)
                             },
                             modifier = Modifier.weight(1f),
+                            showAllOption = false,
                         )
-                        }
-                        Row(
-                            horizontalArrangement = Arrangement.spacedBy(8.dp),
-                        ) {
-                            FilterDropdown(
-                                label = "Age",
+                        FilterAssistChip(
+                            label = "Âge",
                             selectedValue = scheduleState.selectedAgegroup,
                             options = scheduleState.agegroups,
                             onSelect = { scheduleViewModel.setAgegroup(it) },
                             modifier = Modifier.weight(1f),
                         )
-                            FilterDropdown(
+                    }
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(Dimens.sm),
+                        modifier = Modifier.fillMaxWidth(),
+                    ) {
+                        FilterAssistChip(
                             label = "Sous-groupe",
                             selectedValue = scheduleState.selectedSubgroup,
                             options = scheduleState.subgroups,
                             onSelect = { scheduleViewModel.setSubgroup(it) },
                             modifier = Modifier.weight(1f),
                         )
+                        if (hasActiveFilters) {
+                            AssistChipClear(
+                                onClear = {
+                                    scheduleViewModel.setAgegroup(null)
+                                    scheduleViewModel.setSubgroup(null)
+                                    scheduleViewModel.setTypeFilter(TypeFilter.DEFAULT)
+                                },
+                                modifier = Modifier.weight(1f),
+                            )
                         }
                     }
                 }
             }
+
             PullToRefreshBox(
                 isRefreshing = scheduleState.isRefreshing,
                 onRefresh = { scheduleViewModel.refreshSchedule() },
                 modifier = Modifier.fillMaxSize(),
-                contentAlignment = Alignment.Center,
             ) {
                 when {
                     scheduleState.isLoading && scheduleState.events.isEmpty() -> {
-                        LoadingIndicator()
+                        LazyColumn {
+                            items(4) { SkeletonCard() }
+                        }
                     }
                     scheduleState.error != null && scheduleState.events.isEmpty() -> {
-                        Column(
-                            horizontalAlignment = Alignment.CenterHorizontally,
-                        ) {
-                            Text(
-                                text = scheduleState.error!!,
-                                color = MaterialTheme.colorScheme.error,
+                        ErrorState(
+                            icon = Icons.Filled.CloudOff,
+                            title = "Erreur de chargement",
+                            message = scheduleState.error!!,
+                            onRetry = { scheduleViewModel.refreshSchedule() },
                         )
-                            Spacer(modifier = Modifier.height(8.dp))
-                            TextButton(onClick = { scheduleViewModel.refreshSchedule() }) {
-                                Text("Reessayer")
-                            }
-                        }
                     }
                     scheduleState.filteredEvents.isEmpty() -> {
-                        Column(
-                            horizontalAlignment = Alignment.CenterHorizontally,
-                        ) {
-                            Text("Aucun evenement disponible")
-                            if (scheduleState.events.isEmpty()) {
-                                Spacer(modifier = Modifier.height(8.dp))
-                                Text(
-                                    text = "Appuyez sur le bouton de rafraichissement pour charger les evenements",
-                                    style = MaterialTheme.typography.bodySmall,
-                                    color = Color.Gray,
+                        EmptyState(
+                            icon = Icons.Filled.CalendarMonth,
+                            title = "Aucun événement disponible",
+                            message = "Tirez vers le bas pour rafraîchir le calendrier",
                         )
                     }
-                        }
-                    }
                     else -> {
+                        val grouped = groupEventsByDate(scheduleState.filteredEvents)
                         LazyColumn(
                             modifier = Modifier.fillMaxSize(),
                         ) {
-                            items(scheduleState.filteredEvents) { event ->
+                            grouped.forEach { (dateKey, dayEvents) ->
+                                stickyHeader {
+                                    Column(
+                                        modifier = Modifier
+                                            .fillMaxWidth()
+                                            .background(MaterialTheme.colorScheme.surface)
+                                            .padding(horizontal = Dimens.lg, vertical = Dimens.sm),
+                                    ) {
+                                        Text(
+                                            text = formatEventDate(dateKey + "T00:00:00")
+                                                .replaceFirstChar { it.uppercase() },
+                                            style = MaterialTheme.typography.labelMedium,
+                                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                                        )
+                                        HorizontalDivider()
+                                    }
+                                }
+                                items(dayEvents) { event ->
                                     EventCard(
                                         event = event,
                                         onClick = {
@@ -259,6 +241,19 @@ fun ScheduleScreen(
                                     )
                                 }
                             }
+                            if (scheduleState.lastUpdated != null) {
+                                item {
+                                    Text(
+                                        text = "Dernière mise à jour: ${formatLastUpdated(scheduleState.lastUpdated!!)}",
+                                        style = MaterialTheme.typography.bodySmall,
+                                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                                        modifier = Modifier
+                                            .fillMaxWidth()
+                                            .padding(Dimens.lg),
+                                    )
+                                }
+                            }
+                        }
                     }
                 }
             }
@@ -266,8 +261,27 @@ fun ScheduleScreen(
     }
 }
 
-private fun typeFilterLabel(filter: TypeFilter): String = when (filter) {
-    TypeFilter.ALL -> "Tous"
-    TypeFilter.GAMES -> "Matchs"
-    TypeFilter.PRACTICES -> "Entrainements"
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun AssistChipClear(
+    onClear: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    AssistChip(
+        onClick = onClear,
+        label = { Text("Effacer") },
+        trailingIcon = {
+            Icon(
+                imageVector = Icons.Filled.Close,
+                contentDescription = "Effacer les filtres",
+            )
+        },
+        modifier = modifier,
+    )
+}
+
+private fun formatLastUpdated(timestamp: Long): String {
+    val instant = Instant.fromEpochMilliseconds(timestamp)
+    val local = instant.toLocalDateTime(TimeZone.currentSystemDefault())
+    return "${local.date} ${local.time}"
 }

composeApp/src/commonMain/kotlin/ch/parano/myicek/ui/theme/Dimens.kt

@@ -0,0 +1,29 @@
+// 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.myicek.ui.theme
+
+import androidx.compose.ui.unit.dp
+
+object Dimens {
+    val xs = 4.dp
+    val sm = 8.dp
+    val md = 12.dp
+    val lg = 16.dp
+    val xl = 24.dp
+    val xxl = 32.dp
+}

composeApp/src/commonMain/kotlin/ch/parano/myicek/ui/theme/Theme.kt

@@ -18,28 +18,83 @@
 package ch.parano.myicek.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Shapes
+import androidx.compose.material3.Typography
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
-
-private val Indigo = Color(0xFF3F51B5)
-private val IndigoLight = Color(0xFF7986CB)
-private val IndigoDark = Color(0xFF303F9F)
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 
 private val LightColors = lightColorScheme(
-    primary = Indigo,
-    onPrimary = Color.White,
-    primaryContainer = IndigoDark,
-    secondary = IndigoLight,
+    primary = Color(0xFF0D9488),
+    onPrimary = Color(0xFFFFFFFF),
+    primaryContainer = Color(0xFF99F6E4),
+    onPrimaryContainer = Color(0xFF134E4A),
+    secondary = Color(0xFF475569),
+    onSecondary = Color(0xFFFFFFFF),
+    secondaryContainer = Color(0xFFE2E8F0),
+    onSecondaryContainer = Color(0xFF1E293B),
+    tertiary = Color(0xFF0EA5E9),
+    onTertiary = Color(0xFFFFFFFF),
+    tertiaryContainer = Color(0xFFE0F2FE),
+    onTertiaryContainer = Color(0xFF075985),
+    error = Color(0xFFDC2626),
+    onError = Color(0xFFFFFFFF),
+    errorContainer = Color(0xFFFEE2E2),
+    onErrorContainer = Color(0xFF7F1D1D),
+    background = Color(0xFFFAFAFA),
+    onBackground = Color(0xFF1C1917),
+    surface = Color(0xFFFFFFFF),
+    onSurface = Color(0xFF1C1917),
+    surfaceVariant = Color(0xFFF1F5F9),
+    onSurfaceVariant = Color(0xFF475569),
+    outline = Color(0xFFCBD5E1),
 )
 
 private val DarkColors = darkColorScheme(
-    primary = IndigoLight,
-    onPrimary = Color.Black,
-    primaryContainer = Indigo,
-    secondary = Indigo,
+    primary = Color(0xFF2DD4BF),
+    onPrimary = Color(0xFF003833),
+    primaryContainer = Color(0xFF0D9488),
+    onPrimaryContainer = Color(0xFF99F6E4),
+    secondary = Color(0xFF94A3B8),
+    onSecondary = Color(0xFF1E293B),
+    secondaryContainer = Color(0xFF334155),
+    onSecondaryContainer = Color(0xFFE2E8F0),
+    tertiary = Color(0xFF0EA5E9),
+    onTertiary = Color(0xFF003547),
+    background = Color(0xFF0F172A),
+    onBackground = Color(0xFFF1F5F9),
+    surface = Color(0xFF1E293B),
+    onSurface = Color(0xFFF1F5F9),
+    surfaceVariant = Color(0xFF334155),
+    onSurfaceVariant = Color(0xFF94A3B8),
+    outline = Color(0xFF475569),
+    error = Color(0xFFF87171),
+    onError = Color(0xFF7F1D1D),
+    errorContainer = Color(0xFF7F1D1D),
+    onErrorContainer = Color(0xFFFECACA),
+)
+
+private val AppTypography = Typography(
+    headlineLarge = TextStyle(fontSize = 28.sp, fontWeight = FontWeight.Bold),
+    titleLarge = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.SemiBold),
+    titleMedium = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.SemiBold),
+    bodyLarge = TextStyle(fontSize = 15.sp, fontWeight = FontWeight.Normal),
+    bodyMedium = TextStyle(fontSize = 14.sp, fontWeight = FontWeight.Normal),
+    bodySmall = TextStyle(fontSize = 13.sp, fontWeight = FontWeight.Normal),
+    labelMedium = TextStyle(fontSize = 12.sp, fontWeight = FontWeight.Medium),
+)
+
+private val AppShapes = Shapes(
+    small = RoundedCornerShape(8.dp),
+    medium = RoundedCornerShape(12.dp),
+    large = RoundedCornerShape(16.dp),
 )
 
 @Composable
@@ -49,6 +104,8 @@ fun MyIceTheme(
 ) {
     MaterialTheme(
         colorScheme = if (darkTheme) DarkColors else LightColors,
+        typography = AppTypography,
+        shapes = AppShapes,
         content = content,
     )
 }

composeApp/src/commonTest/kotlin/ch/parano/myicek/WindowStateStorageTest.kt

@@ -0,0 +1,63 @@
+// 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.myicek
+
+import com.russhwolf.settings.MapSettings
+import kotlin.test.Test
+import kotlin.test.assertEquals
+import kotlin.test.assertNull
+
+class WindowStateStorageTest {
+
+    @Test
+    fun saveAndLoadWindowState() {
+        val settings = MapSettings()
+        val storage = WindowStateStorage(settings)
+
+        storage.save(width = 1200, height = 800, x = 100, y = 50)
+
+        val state = storage.load()
+        assertEquals(1200, state?.width)
+        assertEquals(800, state?.height)
+        assertEquals(100, state?.x)
+        assertEquals(50, state?.y)
+    }
+
+    @Test
+    fun loadReturnsNullWhenNothingSaved() {
+        val settings = MapSettings()
+        val storage = WindowStateStorage(settings)
+
+        assertNull(storage.load())
+    }
+
+    @Test
+    fun saveOverwritesPreviousState() {
+        val settings = MapSettings()
+        val storage = WindowStateStorage(settings)
+
+        storage.save(width = 1200, height = 800, x = 100, y = 50)
+        storage.save(width = 1024, height = 768, x = 200, y = 75)
+
+        val state = storage.load()
+        assertEquals(1024, state?.width)
+        assertEquals(768, state?.height)
+        assertEquals(200, state?.x)
+        assertEquals(75, state?.y)
+    }
+}

composeApp/src/commonTest/kotlin/ch/parano/myicek/filter/EventFilterTest.kt

@@ -20,6 +20,7 @@ package ch.parano.myicek.filter
 import ch.parano.myicek.models.Event
 import kotlin.test.Test
 import kotlin.test.assertEquals
+import kotlin.test.assertTrue
 
 class EventFilterTest {
 
@@ -28,6 +29,7 @@ class EventFilterTest {
         agegroup: String = "U13 (Elite)",
         name: String = "U13 Elite - HC Ajoie",
         eventType: String = "Jeu",
+        start: String = "2024-11-10T14:00:00",
     ) = Event(
         idEvent = id,
         agegroup = agegroup,
@@ -35,7 +37,7 @@ class EventFilterTest {
         title = "Title",
         opponent = "Opp",
         place = "Place",
-        start = "2024-11-10T14:00:00",
+        start = start,
         end = "2024-11-10T16:15:00",
         color = "#e4222e",
         eventType = eventType,
@@ -171,4 +173,47 @@ class EventFilterTest {
         assertEquals("U13 Elite", result[0])
         assertEquals("U13 Top", result[1])
     }
+
+    @Test
+    fun testGroupEventsByDateSingleDay() {
+        val events = listOf(
+            event(id = "1", start = "2024-11-10T14:00:00"),
+            event(id = "2", start = "2024-11-10T16:00:00"),
+        )
+        val grouped = groupEventsByDate(events)
+        assertEquals(1, grouped.size)
+        assertEquals("2024-11-10", grouped[0].first)
+        assertEquals(2, grouped[0].second.size)
+    }
+
+    @Test
+    fun testGroupEventsByDateMultipleDays() {
+        val events = listOf(
+            event(id = "1", start = "2024-11-11T10:00:00"),
+            event(id = "2", start = "2024-11-10T14:00:00"),
+            event(id = "3", start = "2024-11-10T16:00:00"),
+        )
+        val grouped = groupEventsByDate(events)
+        assertEquals(2, grouped.size)
+        assertEquals("2024-11-10", grouped[0].first)
+        assertEquals(2, grouped[0].second.size)
+        assertEquals("2024-11-11", grouped[1].first)
+        assertEquals(1, grouped[1].second.size)
+    }
+
+    @Test
+    fun testGroupEventsByDateWithSpaceSeparator() {
+        val events = listOf(
+            event(id = "1", start = "2024-11-10 14:00:00"),
+        )
+        val grouped = groupEventsByDate(events)
+        assertEquals(1, grouped.size)
+        assertEquals("2024-11-10", grouped[0].first)
+    }
+
+    @Test
+    fun testGroupEventsByDateEmpty() {
+        val grouped = groupEventsByDate(emptyList())
+        assertTrue(grouped.isEmpty())
+    }
 }

composeApp/src/desktopMain/kotlin/ch/parano/myicek/Main.kt

@@ -17,12 +17,43 @@
 
 package ch.parano.myicek
 
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.application
+import androidx.compose.ui.window.rememberWindowState
 import ch.parano.myicek.auth.DesktopOAuthClient
+import com.russhwolf.settings.Settings
+import java.util.prefs.Preferences
 
 fun main() = application {
-    Window(onCloseRequest = ::exitApplication, title = "MyIceK") {
+    val storage = WindowStateStorage(Settings())
+    val saved = storage.load()
+    val windowState = rememberWindowState(
+        width = saved?.width?.dp ?: 1024.dp,
+        height = saved?.height?.dp ?: 768.dp,
+        position = if (saved != null) WindowPosition(saved.x.dp, saved.y.dp) else WindowPosition(0.dp, 0.dp),
+    )
+
+    Window(
+        onCloseRequest = ::exitApplication,
+        title = "MyIce",
+        state = windowState,
+    ) {
+        LaunchedEffect(Unit) {
+            snapshotFlow { windowState.size to windowState.position }
+                .collect { (size, position) ->
+                    storage.save(
+                        width = size.width.value.toInt(),
+                        height = size.height.value.toInt(),
+                        x = position.x.value.toInt(),
+                        y = position.y.value.toInt(),
+                    )
+                    Preferences.userRoot().flush()
+                }
+        }
         App(oauthClient = DesktopOAuthClient())
     }
 }

docs/superpowers/specs/2026-08-06-ui-redesign-design.md

@@ -0,0 +1,277 @@
+# MyIce UI Redesign — Design Spec
+
+**Date:** 2026-08-06
+**Status:** Approved (pending review)
+**Scope:** Refonte visuelle complète — thème, 4 écrans, composants
+
+## Contexte
+
+L'app MyIce (KMP, Compose Multiplatform) est fonctionnellement complète mais visuellement squelettique: thème à 4 slots Material 3, zéro icônerie, listes plates, couleurs hardcodées, accents français manquants, pas de regroupement par date, pas de typographie dédiée.
+
+Ce spec décrit une refonte visuelle complète dans une direction **moderne & épurée** avec un accent **teal arctique**.
+
+## Direction visuelle
+
+- **Style:** Moderne & épuré — beaucoup d'air, surfaces propres, typo hiérarchisée, accents subtils
+- **Accent:** Teal arctique (`#0D9488` light / `#2DD4BF` dark) — évoque la glace et le hockey
+- **Philosophie:** Le chrome disparaît, les données sont les vedettes
+
+## 1. Thème & Design Tokens
+
+### 1.1 Palette (Material 3 complet)
+
+**Light scheme:**
+
+| Slot | Valeur | Note |
+|------|--------|------|
+| primary | `#0D9488` (teal-600) | |
+| onPrimary | `#FFFFFF` | |
+| primaryContainer | `#99F6E4` (teal-100) | |
+| onPrimaryContainer | `#134E4A` (teal-900) | |
+| secondary | `#475569` (slate-600) | |
+| secondaryContainer | `#E2E8F0` (slate-200) | |
+| onSecondaryContainer | `#1E293B` | |
+| tertiary | `#0EA5E9` (sky-500) | états interactifs secondaires |
+| tertiaryContainer | `#E0F2FE` | |
+| error | `#DC2626` | |
+| onError | `#FFFFFF` | |
+| errorContainer | `#FEE2E2` | |
+| onErrorContainer | `#7F1D1D` | |
+| background | `#FAFAFA` (warm white) | |
+| onBackground | `#1C1917` | |
+| surface | `#FFFFFF` | |
+| onSurface | `#1C1917` (warm dark) | |
+| surfaceVariant | `#F1F5F9` (slate-100) | |
+| onSurfaceVariant | `#475569` | |
+| outline | `#CBD5E1` (slate-300) | |
+
+**Dark scheme:**
+
+| Slot | Valeur | Note |
+|------|--------|------|
+| primary | `#2DD4BF` (teal-400) | |
+| onPrimary | `#003833` | |
+| primaryContainer | `#0D9488` | |
+| onPrimaryContainer | `#99F6E4` | |
+| secondary | `#94A3B8` (slate-400) | |
+| secondaryContainer | `#334155` (slate-700) | |
+| tertiary | `#0EA5E9` | |
+| background | `#0F172A` (slate-900) | |
+| onBackground | `#F1F5F9` | |
+| surface | `#1E293B` (slate-800) | |
+| onSurface | `#F1F5F9` | |
+| surfaceVariant | `#334155` | |
+| onSurfaceVariant | `#94A3B8` | |
+| outline | `#475569` | |
+| error | `#F87171` | |
+| onError | `#7F1D1D` | |
+| errorContainer | `#7F1D1D` | |
+| onErrorContainer | `#FECACA` | |
+
+### 1.2 Typographie
+
+Échelle système (pas de custom font — trop complexe en KMP), mais poids et tailles définis explicitement via `Typography()`:
+
+| Style | Taille | Poids | Usage |
+|-------|--------|-------|-------|
+| headlineLarge | 28sp | Bold | App name (login) |
+| titleLarge | 22sp | SemiBold | Screen titles (TopAppBar) |
+| titleMedium | 16sp | SemiBold | Card titles |
+| bodyLarge | 15sp | Regular | Main content |
+| bodyMedium | 14sp | Regular | Secondary info |
+| bodySmall | 13sp | Regular | Metadata, labels |
+| labelMedium | 12sp | Medium | Chips, badges, section headers |
+
+### 1.3 Shapes
+
+| Nom | Rayon | Usage |
+|-----|-------|-------|
+| small | 8dp | Chips, badges |
+| medium | 12dp | Cards, inputs |
+| large | 16dp | Sheets, big cards |
+
+### 1.4 Spacing tokens (`Dimens` object)
+
+| Token | Valeur |
+|-------|--------|
+| xs | 4dp |
+| sm | 8dp |
+| md | 12dp |
+| lg | 16dp |
+| xl | 24dp |
+| xxl | 32dp |
+
+### 1.5 Elevation
+
+| Niveau | Valeur | Usage |
+|--------|--------|-------|
+| level0 | 0dp | Flat surfaces |
+| level1 | 1dp | Cards |
+| level2 | 3dp | App bar, dialogs |
+
+## 2. Écrans
+
+### 2.1 LoginScreen
+
+Layout centré vertical:
+- Icône `SportsHockey` (Material) 48dp dans un cercle `primaryContainer` 80dp, en haut
+- `"MyIce"` en `headlineLarge` (le "K" de "MyIceK" était un codename tech — supprimé)
+- Sous-titre `"Votre calendrier hockey"` en `titleMedium` `onSurfaceVariant`
+- Spacer `xxl` (32dp)
+- `Button` plein, 48dp de haut, icône `Login` leading: `"Se connecter avec Infomaniak"`
+- Snackbar erreur en `errorContainer`/`onErrorContainer`
+- Fond `background`, contenu centré verticalement (pas collé au haut)
+
+### 2.2 ScheduleScreen
+
+**TopAppBar:**
+- Titre `"Calendrier"` (au lieu de "MyIceK")
+- Actions: icône `Refresh` + icône `Logout` uniquement (Material icons, pas de texte)
+- L'email utilisateur est supprimé de la barre (trop encombrant sur mobile). Il n'est pas relocalisé — un menu compte futur est hors scope.
+
+**Filtres:**
+- `SegmentedButton` (singleChoice, 3 segments) sur une ligne: `"Tous"` / `"Matchs"` / `"Entraînements"` (remplace le `FilterDropdown` pour le type)
+- `AssistChip` cliquables pour Compte / Age / Sous-groupe (affichent la valeur sélectionnée, `"Tous"` par défaut). Utilisent `account.label` au lieu de `account.name` pour le dropdown Compte.
+- `AssistChip` "Effacer" avec icône `Close` apparaît si au moins un filtre est actif
+- Section filtres dans une `Card` `surfaceVariant`, `medium` shape, padding `lg`
+
+**Liste d'événements:**
+- `LazyColumn` avec **sticky headers** par jour: `"Samedi 15 mars"` en `labelMedium` uppercase `onSurfaceVariant`, fond `surface`, divider subtil en dessous
+- `EventCard` repensé (voir Section 3)
+- Indicateur `"Dernière mise à jour: ..."` en bas de liste, `bodySmall` `onSurfaceVariant` (utilise `lastUpdated` du state — actuellement non affiché)
+- `PullToRefreshBox` conservé (Material 3 par défaut)
+
+**États partagés:**
+- Loading: 3-4 `SkeletonCard` animés (voir Section 3)
+- Error: `ErrorState` avec icône `CloudOff`, message, bouton `"Réessayer"`
+- Empty: `EmptyState` avec icône `CalendarClear`, `"Aucun événement disponible"`
+
+### 2.3 EventDetailScreen
+
+**TopAppBar:**
+- Navigation icon: `ArrowBack` (icône, pas `TextButton("Retour")`)
+- Titre: titre de l'événement tronqué
+- `PlatformBackHandler` conservé
+
+**Section infos (carte unique, `medium` shape, elevation 1dp):**
+- Chaque ligne: icône leading 18dp `onSurfaceVariant` + label `bodySmall` uppercase `onSurfaceVariant` + valeur `bodyLarge` `onSurface`
+- Lignes: `Event` → type, `Place` → lieu, `CalendarMonth` → date, `Schedule` → heure
+- Plus de `"Type: Match"` interpolé — label et valeur visuellement distincts
+
+**Convocation:**
+- En-tête `"Joueurs (N)"` en `titleMedium` SemiBold + `BadgedBox` avec count
+- **Joueurs:** `ListItem` Material 3 — numéro dans un cercle `primaryContainer` 40dp (avatar), nom `bodyLarge`, position + `"(née 2008)"` en `bodySmall` dessous. Triés par numéro.
+- Si aucun joueur: carte `errorContainer` avec icône `Warning` + `"Aucun joueur ni personnel convoqué"`
+- **Personnel:** `ListItem` avec icône `Person` leading, nom `bodyLarge`, role en `AssistChip` `secondaryContainer` à droite
+- En-tête `"Personnel"` en `titleMedium` SemiBold
+
+**États partagés:**
+- Loading: `LoadingIndicator` conservé
+- Error: `ErrorState` avec icône `ErrorOutline`, message, bouton `"Réessayer"`
+
+### 2.4 Navigation & transitions
+
+- Navigation manuelle conservée (sealed class + `mutableStateOf` — pas de lib externe)
+- **`AnimatedContent`** ajouté dans `App.kt` pour transitions fondues entre écrans (`tween(300ms)`)
+- `PlatformBackHandler` conservé (known limitation: no-op sur desktop/iOS)
+
+## 3. Composants
+
+### 3.1 EventCard (repensé)
+
+Carte `medium` shape (12dp), elevation 1dp, cliquable:
+- **Barre couleur** 4dp à gauche via `Modifier.border` sur le `Card` entier (pas un `Row`) — couleur `event.color` (hex parsé), fallback `primary`
+- **Badge type** en haut-droite: `AssistChip` `"Match"` (couleur teal/primary) ou `"Entraînement"` (couleur secondary/slate)
+- **Titre:** pour un match (`eventType == "Jeu"`): `"Match vs {opponent}"`. Pour un entraînement: `"Entraînement"`. Suppression de la ligne `"Adversaire:"` pour les entraînements.
+- **Lignes info** avec icônes leading 18dp `onSurfaceVariant`:
+  - `Place` 18dp + lieu en `bodyMedium`
+  - `Schedule` 18dp + heure condensée (`formatEventTimeRange`: `"18h00 – 19h30"`)
+- **Âge + nom** (`"{agegroup} - {name}"`) en `titleMedium` SemiBold
+- La date est dans le header de section (pas dans la card)
+
+### 3.2 SkeletonCard
+
+Carte placeholder grise aux mêmes proportions que `EventCard`:
+- Fond `surfaceVariant`, `alpha(0.3f)`
+- Animation shimmer: translation horizontale d'un dégradé clair (`InfiniteTransition` + `rememberInfiniteTransition`)
+- 4 lignes fictives (titre + 2 lignes info + badge)
+- Réutilisé pour le loading state du Schedule
+
+### 3.3 EmptyState / ErrorState (composables partagés)
+
+```
+EmptyState(icon: ImageVector, title: String, message: String)
+ErrorState(icon: ImageVector, title: String, message: String, onRetry: () -> Unit)
+```
+
+- Centrés verticalement dans un `Column` (`Arrangement.Center`, `HorizontalAlignment.CenterHorizontally`)
+- Icône 48dp `onSurfaceVariant`
+- Titre `titleMedium` `onSurface`
+- Message `bodyMedium` `onSurfaceVariant`
+- `ErrorState` ajoute un `Button` `"Réessayer"` avec `onRetry`
+- Réutilisés sur ScheduleScreen et EventDetailScreen
+
+### 3.4 Wrappers filtres
+
+- `SegmentedButton` (singleChoice) pour le type: 3 options `"Tous"/"Matchs"/"Entraînements"`, mappe vers `TypeFilter.ALL/GAMES/PRACTICES`
+- `AssistChip` wrapper pour Compte/Age/Sous-groupe: affiche label + valeur sélectionnée, clic ouvre un `DropdownMenu`
+- `AssistChip` "Effacer" avec icône `Close`: visible si au moins un filtre non-défaut est actif, reset tous les filtres
+
+## 4. Corrections transversales
+
+### 4.1 Accents français
+
+Toutes les strings UI sont corrigées:
+- "Rafraichir" → "Rafraîchir"
+- "Deconnexion" → "Déconnexion"
+- "Reessayer" → "Réessayer"
+- "Aucun evenement" → "Aucun événement"
+- "Entrainements" → "Entraînements"
+- "convoque" → "convoqué"
+- "donnees" → "données"
+
+### 4.2 Couleurs hardcodées supprimées
+
+- `Color.Gray` (ScheduleScreen) → `onSurfaceVariant`
+- `Color(0xFFFFC107)` (EventDetailScreen warning) → `errorContainer`/`onErrorContainer`
+- `Color(0xFF000000 or value)` (EventCard color mask) → `event.color` direct ou `primary` fallback via une util helper `parseHexColor`
+
+### 4.3 Branding
+
+- "MyIceK" → "MyIce" partout (TopAppBar, LoginScreen, titre fenêtre desktop)
+- `account.label` utilisé au lieu de `account.name` dans le dropdown Compte
+
+### 4.4 Strings
+
+Toutes les strings restent hardcodées inline (pas de localization infrastructure — hors scope). Pas de `object Strings` non plus: ajouter une couche d'indirection sans localization réelle est du YAGNI. Les accents français (4.1) sont corrigés directement dans les strings inline.
+
+## 5. Hors scope
+
+- Migration vers Navigation Compose library
+- `viewModel()` au lieu de `remember{}` (known limitation — perte de state rotation Android)
+- Localization infrastructure (string resources)
+- Custom fonts (trop complexe en KMP)
+- Tests UI (Composition Testing) — le projet n'a pas de framework de test UI configuré
+- iOS `.xcodeproj` creation
+- Desktop window icon / menu bar
+
+## 6. Fichiers impactés
+
+| Fichier | Changement |
+|---------|------------|
+| `ui/theme/Theme.kt` | Réécriture complète: palette, typo, shapes, elevation, `Dimens` |
+| `ui/theme/Color.kt` | Nouveau — définitions de couleur teal/slate |
+| `ui/theme/Dimens.kt` | Nouveau — spacing tokens |
+| `ui/screens/LoginScreen.kt` | Refonte: icône, branding, layout |
+| `ui/screens/ScheduleScreen.kt` | Refonte: TopAppBar, chips filtres, sticky headers, états partagés, `lastUpdated` |
+| `ui/screens/EventDetailScreen.kt` | Refonte: icône back, section infos stylisée, ListItems pour joueurs/staff |
+| `ui/components/EventCard.kt` | Refonte: border couleur, badge type, icônes leading, logique match/entraînement |
+| `ui/components/SkeletonCard.kt` | Nouveau — skeleton loading |
+| `ui/components/EmptyState.kt` | Nouveau — état vide partagé |
+| `ui/components/ErrorState.kt` | Nouveau — état erreur partagé |
+| `ui/components/FilterChips.kt` | Nouveau — SegmentedButton + AssistChips (remplace FilterDropdown) |
+| `ui/components/FilterDropdown.kt` | Supprimé — remplacé par FilterChips |
+| `ui/components/LoadingIndicator.kt` | Conservé (utilisé par EventDetail) |
+| `App.kt` | `AnimatedContent` pour transitions, branding "MyIce" |
+| `util/EventDateTimeFormatter.kt` | Ajout `formatEventTimeRange` condensé (existant conservé) |
+| `desktopMain/Main.kt` | Titre fenêtre "MyIce" |