Update the highligh element of a "isNew" item

app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/list/LexiconItem.kt

@@ -2,13 +2,23 @@ package com.pixelized.rplexicon.ui.screens.lexicon.list
 
 import android.content.res.Configuration.UI_MODE_NIGHT_NO
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -30,10 +40,8 @@ import androidx.compose.ui.unit.dp
 import com.pixelized.rplexicon.R
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
 import com.pixelized.rplexicon.utilitary.LOS_FULL
-import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
 import com.pixelized.rplexicon.utilitary.extentions.placeholder
-import java.util.UUID
 
 @Stable
 class LexiconGroupUio(
@@ -53,14 +61,23 @@ data class LexiconItemUio(
     val isNew: Boolean = false,
 ) {
     companion object {
-        fun placeholder() = LexiconItemUio(
+        fun preview(
-            id = UUID.randomUUID().toString(),
+            name: String,
-            name = "placeholder",
+            diminutive: String? = null,
-            diminutive = null,
+            gender: String? = "Homme",
-            gender = null,
+            race: String? = "Humain",
-            race = null,
+            isPlayingCharacter: Boolean = false,
-            isPlayingCharacter = false,
+            placeholder: Boolean = false,
-            placeholder = true,
+            isNew: Boolean = false,
+        ) = LexiconItemUio(
+            id = name,
+            name = name,
+            diminutive = diminutive,
+            gender = gender,
+            race = race,
+            isPlayingCharacter = isPlayingCharacter,
+            placeholder = placeholder,
+            isNew = isNew,
         )
     }
 }
@@ -68,108 +85,125 @@ data class LexiconItemUio(
 @Composable
 fun LexiconItem(
     modifier: Modifier = Modifier,
+    padding: PaddingValues = PaddingValues(start = 16.dp, end = 8.dp, top = 4.dp, bottom = 4.dp),
     item: LexiconItemUio,
     onItem: (LexiconItemUio) -> Unit,
     onCharacterSheet: (LexiconItemUio) -> Unit,
 ) {
     val typography = MaterialTheme.lexicon.typography
 
-    Row(
+    Box(
-        modifier = modifier
+        modifier = Modifier.height(intrinsicSize = IntrinsicSize.Min)
-            .clickable { item.let(onItem) }
-            .fillMaxWidth()
-            .heightIn(min = MaterialTheme.lexicon.dimens.item)
-            .padding(vertical = 4.dp)
-            .padding(start = 16.dp, end = 8.dp),
-        verticalAlignment = Alignment.CenterVertically,
     ) {
         Row(
             modifier = Modifier
-                .weight(weight = 1f)
+                .clickable { item.let(onItem) }
-                .padding(end = 8.dp),
+                .fillMaxWidth()
-            horizontalArrangement = Arrangement.spacedBy(space = 4.dp),
+                .heightIn(min = MaterialTheme.lexicon.dimens.item)
+                .padding(paddingValues = padding)
+                .then(other = modifier),
+            verticalAlignment = Alignment.CenterVertically,
         ) {
-            Text(
+            Row(
                 modifier = Modifier
-                    .padding(end = 4.dp)
+                    .weight(weight = 1f)
-                    .alignByBaseline(),
+                    .padding(end = 8.dp),
-                style = typography.base.titleMedium,
+                horizontalArrangement = Arrangement.spacedBy(space = 4.dp),
-                color = if (item.isNew) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface,
+            ) {
-                text = LOS_FULL,
+                Text(
-            )
+                    modifier = Modifier
+                        .padding(end = 4.dp)
+                        .alignByBaseline(),
+                    style = typography.base.titleMedium,
+                    color = if (item.isNew) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface,
+                    text = LOS_FULL,
+                )
 
-            Text(
-                modifier = Modifier
-                    .alignByBaseline()
-                    .placeholder { item.placeholder },
-                style = typography.base.titleMedium,
-                fontWeight = FontWeight.Bold,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-                text = AnnotatedString(
-                    text = item.name,
-                    spanStyles = when (item.placeholder) {
-                        true -> emptyList()
-                        else -> listOf(
-                            AnnotatedString.Range(
-                                item = typography.titleMediumDropCap,
-                                start = 0,
-                                end = 1,
-                            )
-                        )
-                    },
-                ),
-            )
-
-            item.diminutive?.let {
                 Text(
                     modifier = Modifier
                         .alignByBaseline()
                         .placeholder { item.placeholder },
-                    style = typography.base.labelMedium,
+                    style = typography.base.titleMedium,
+                    fontWeight = FontWeight.Bold,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
-                    text = it,
+                    text = AnnotatedString(
+                        text = item.name,
+                        spanStyles = when (item.placeholder) {
+                            true -> emptyList()
+                            else -> listOf(
+                                AnnotatedString.Range(
+                                    item = typography.titleMediumDropCap,
+                                    start = 0,
+                                    end = 1,
+                                )
+                            )
+                        },
+                    ),
                 )
+
+                item.diminutive?.let {
+                    Text(
+                        modifier = Modifier
+                            .alignByBaseline()
+                            .placeholder { item.placeholder },
+                        style = typography.base.labelMedium,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        text = it,
+                    )
+                }
+
+                item.gender?.let {
+                    Text(
+                        modifier = Modifier
+                            .alignByBaseline()
+                            .placeholder { item.placeholder },
+                        style = typography.base.labelMedium,
+                        fontStyle = FontStyle.Italic,
+                        fontWeight = FontWeight.Light,
+                        maxLines = 1,
+                        text = it,
+                    )
+                }
+
+                item.race?.let {
+                    Text(
+                        modifier = Modifier
+                            .alignByBaseline()
+                            .placeholder { item.placeholder },
+                        style = typography.base.labelMedium,
+                        fontStyle = FontStyle.Italic,
+                        fontWeight = FontWeight.Light,
+                        maxLines = 1,
+                        text = it,
+                    )
+                }
             }
 
-            item.gender?.let {
+            if (item.isPlayingCharacter) {
-                Text(
+                IconButton(
-                    modifier = Modifier
+                    modifier = Modifier.offset(x = 4.dp),
-                        .alignByBaseline()
+                    onClick = { item.let(onCharacterSheet) }
-                        .placeholder { item.placeholder },
+                ) {
-                    style = typography.base.labelMedium,
+                    Icon(
-                    fontStyle = FontStyle.Italic,
+                        painter = painterResource(id = R.drawable.ic_d20_24),
-                    fontWeight = FontWeight.Light,
+                        contentDescription = null
-                    maxLines = 1,
+                    )
-                    text = it,
+                }
-                )
-            }
-
-            item.race?.let {
-                Text(
-                    modifier = Modifier
-                        .alignByBaseline()
-                        .placeholder { item.placeholder },
-                    style = typography.base.labelMedium,
-                    fontStyle = FontStyle.Italic,
-                    fontWeight = FontWeight.Light,
-                    maxLines = 1,
-                    text = it,
-                )
             }
         }
-
+        AnimatedVisibility(
-        if (item.isPlayingCharacter) {
+            visible = item.isNew,
-            IconButton(
+            enter = fadeIn(),
-                modifier = Modifier.offset(x = 4.dp),
+            exit = fadeOut(),
-                onClick = { item.let(onCharacterSheet) }
+        ) {
-            ) {
+            Box(
-                Icon(
+                modifier = Modifier
-                    painter = painterResource(id = R.drawable.ic_d20_24),
+                    .fillMaxHeight()
-                    contentDescription = null
+                    .width(width = 2.dp)
-                )
+                    .background(color = MaterialTheme.colorScheme.primary)
-            }
+            )
         }
     }
 }
@@ -194,22 +228,23 @@ private fun LexiconItemPreview(
 
 private class LexiconItemPreviewProvider : PreviewParameterProvider<LexiconItemUio> {
     override val values: Sequence<LexiconItemUio> = sequenceOf(
-        LexiconItemUio(
+        LexiconItemUio.preview(
-            id = "",
             name = "Mundas-Naltum-Brulkhai-Arauishi",
             diminutive = "Mun-Nalt-Bru-Arahi",
             gender = "Femme",
             race = "Demi-orc",
             isPlayingCharacter = true,
         ),
-        LexiconItemUio(
+        LexiconItemUio.preview(
-            id = "",
             name = "Brulkhai",
             diminutive = "Bru",
             gender = "Femme",
             race = "Demi-orc",
             isNew = true,
         ),
-        LexiconItemUio.placeholder(),
+        LexiconItemUio.preview(
+            name = "Isaac Asimov",
+            placeholder = true,
+        ),
     )
 }

app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/list/LexiconScreen.kt

@@ -5,7 +5,6 @@ import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -45,7 +44,6 @@ import com.pixelized.rplexicon.ui.navigation.screens.navigateToCharacterSheet
 import com.pixelized.rplexicon.ui.navigation.screens.navigateToLexiconDetail
 import com.pixelized.rplexicon.ui.navigation.screens.navigateToSearch
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
-import com.pixelized.rplexicon.utilitary.extentions.cell
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
 import com.pixelized.rplexicon.utilitary.extentions.scroll
 import kotlinx.coroutines.launch

app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/list/rememberLexiconGroupStatePreview.kt

@@ -15,64 +15,78 @@ fun rememberLexiconGroupStatePreview(): State<List<LexiconGroupUio>> {
                 LexiconGroupUio(
                     category = "Personnage joueur",
                     items = listOf(
-                        LexiconItemUio(
+                        LexiconItemUio.preview(
-                            id = "Brulkhai-1",
                             name = "Brulkhai",
-                            diminutive = "Bru",
+                            diminutive = "./ Bru",
                             gender = "Femme",
                             race = "Demi-orc",
+                            isPlayingCharacter = true,
                         ),
-                        LexiconItemUio(
+                        LexiconItemUio.preview(
-                            id = "Léandre-1",
                             name = "Léandre",
-                            diminutive = null,
                             gender = "Homme",
                             race = "Humain",
+                            isPlayingCharacter = true,
                         ),
-                        LexiconItemUio(
+                        LexiconItemUio.preview(
-                            id = "Nelia-1",
                             name = "Nelia",
-                            diminutive = "Nel",
                             gender = "Femme",
                             race = "Elfe",
+                            isPlayingCharacter = true,
                         ),
-                        LexiconItemUio(
+                        LexiconItemUio.preview(
-                            id = "Tigrane-1",
                             name = "Tigrane",
-                            diminutive = null,
                             gender = "Homme",
                             race = "Tieffelin",
+                            isPlayingCharacter = true,
                         ),
-                        LexiconItemUio(
+                        LexiconItemUio.preview(
-                            id = "Unathana-1",
                             name = "Unathana",
-                            diminutive = "Una",
+                            diminutive = "./ Una",
                             gender = "Femme",
                             race = "Demi-elfe",
+                            isPlayingCharacter = true,
                         ),
                     ),
                 ),
                 LexiconGroupUio(
                     category = "Argynvosthold",
                     items = listOf(
-                        LexiconItemUio(
+                        LexiconItemUio.preview(
-                            id = "Godfrey Gwylin-1",
                             name = "Godfrey Gwylin",
-                            diminutive = null,
                             gender = "Homme",
-                            race = "Inconnu",
                         ),
                     ),
                 ),
                 LexiconGroupUio(
                     category = "Vallakiens",
                     items = listOf(
-                        LexiconItemUio(
+                        LexiconItemUio.preview(
-                            id = "Godfrey Gwylin-1",
+                            name = "Père Petrovich",
-                            name = "Godfrey Gwylin",
-                            diminutive = null,
                             gender = "Homme",
-                            race = "Inconnu",
+                        ),
+                        LexiconItemUio.preview(
+                            name = "Yeska",
+                            gender = "Homme",
+                            isNew = true,
+                        ),
+                        LexiconItemUio.preview(
+                            name = "Milivoj",
+                            gender = "Homme",
+                        ),
+                        LexiconItemUio.preview(
+                            name = "Claudia Belasco",
+                            gender = "Femme",
+                            isNew = true,
+                        ),
+                        LexiconItemUio.preview(
+                            name = "Henrik van der Voort",
+                            gender = "Homme",
+                            isNew = true,
+                        ),
+                        LexiconItemUio.preview(
+                            name = "Dame Fiona Wachter",
+                            gender = "Femme",
                         ),
                     ),
                 ),

app/src/main/java/com/pixelized/rplexicon/ui/screens/location/list/LocationItem.kt

@@ -1,9 +1,22 @@
 package com.pixelized.rplexicon.ui.screens.location.list
 
 import android.content.res.Configuration
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -21,9 +34,6 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
 import com.pixelized.rplexicon.utilitary.LOS_FULL
-import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
-import com.pixelized.rplexicon.utilitary.annotateWithDropCap
-import com.pixelized.rplexicon.utilitary.extentions.cell
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
 import com.pixelized.rplexicon.utilitary.extentions.placeholder
 
@@ -42,14 +52,15 @@ data class LocationItemUio(
 ) {
     companion object {
         fun preview(
-            id: String = "0",
             title: String = "Daggerfall",
             placeHolder: Boolean = false,
+            isNew: Boolean = false,
         ): LocationItemUio {
             return LocationItemUio(
-                id = id,
+                id = title,
                 title = title,
                 placeholder = placeHolder,
+                isNew = isNew,
             )
         }
     }
@@ -58,15 +69,22 @@ data class LocationItemUio(
 @Composable
 fun LocationItem(
     modifier: Modifier = Modifier,
+    padding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 4.dp),
     item: LocationItemUio,
+    onItem: (LocationItemUio) -> Unit,
 ) {
     val typography = MaterialTheme.lexicon.typography
-
     Box(
-        modifier = modifier,
+        modifier = Modifier
+            .clickable { item.let(onItem) }
+            .fillMaxWidth()
+            .heightIn(min = MaterialTheme.lexicon.dimens.item)
+            .height(intrinsicSize = IntrinsicSize.Min)
+            .then(other = modifier),
         contentAlignment = Alignment.CenterStart,
     ) {
         Row(
+            modifier = Modifier.padding(paddingValues = padding),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             Text(
@@ -104,6 +122,18 @@ fun LocationItem(
                 },
             )
         }
+        AnimatedVisibility(
+            visible = item.isNew,
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .width(width = 2.dp)
+                    .background(color = MaterialTheme.colorScheme.primary)
+            )
+        }
     }
 }
 
@@ -116,8 +146,8 @@ private fun QuestItemPreview(
     LexiconTheme {
         Surface {
             LocationItem(
-                modifier = Modifier.cell(),
                 item = preview,
+                onItem = { },
             )
         }
     }
@@ -126,6 +156,7 @@ private fun QuestItemPreview(
 private class QuestItemPreviewProvider : PreviewParameterProvider<LocationItemUio> {
     override val values: Sequence<LocationItemUio> = sequenceOf(
         LocationItemUio.preview(placeHolder = false),
+        LocationItemUio.preview(placeHolder = false, isNew = true),
         LocationItemUio.preview(placeHolder = true),
     )
 }

app/src/main/java/com/pixelized/rplexicon/ui/screens/location/list/LocationScreen.kt

@@ -4,7 +4,6 @@ import android.content.res.Configuration
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -40,10 +39,9 @@ import com.pixelized.rplexicon.ui.composable.FloatingActionButton
 import com.pixelized.rplexicon.ui.composable.Loader
 import com.pixelized.rplexicon.ui.composable.error.HandleFetchError
 import com.pixelized.rplexicon.ui.navigation.LocalScreenNavHost
-import com.pixelized.rplexicon.ui.navigation.screens.navigateToSearch
 import com.pixelized.rplexicon.ui.navigation.screens.navigateToLocationDetail
+import com.pixelized.rplexicon.ui.navigation.screens.navigateToSearch
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
-import com.pixelized.rplexicon.utilitary.extentions.cell
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
 import com.pixelized.rplexicon.utilitary.extentions.scroll
 import kotlinx.coroutines.launch
@@ -137,10 +135,8 @@ private fun LocationContent(
                     contentType = { "Location" },
                 ) {
                     LocationItem(
-                        modifier = Modifier
-                            .clickable { onItem(it) }
-                            .cell(),
                         item = it,
+                        onItem = onItem,
                     )
                 }
             }
@@ -191,7 +187,7 @@ private fun QuestListPreview() {
                 lazyColumnState = rememberLazyListState(),
                 refreshState = rememberPullRefreshState(
                     refreshing = false,
-                    onRefresh = {},
+                    onRefresh = { },
                 ),
                 refreshing = remember { mutableStateOf(false) },
                 items = remember {
@@ -200,8 +196,16 @@ private fun QuestListPreview() {
                             LocationGroupUio(
                                 category = null,
                                 maps = listOf(
-                                    LocationItemUio.preview(id = "0", title = "Daggerfall"),
+                                    LocationItemUio.preview(
-                                    LocationItemUio.preview(id = "1", title = "Athkatla"),
+                                        title = "Daggerfall",
+                                    ),
+                                    LocationItemUio.preview(
+                                        title = "Athkatla",
+                                    ),
+                                    LocationItemUio.preview(
+                                        title = "Vallaki",
+                                        isNew = true,
+                                    ),
                                 ),
                             )
                         ),

app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/list/QuestItem.kt

@@ -1,9 +1,22 @@
 package com.pixelized.rplexicon.ui.screens.quest.list
 
 import android.content.res.Configuration
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -22,7 +35,6 @@ import androidx.compose.ui.unit.dp
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
 import com.pixelized.rplexicon.utilitary.LOS_FULL
 import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
-import com.pixelized.rplexicon.utilitary.extentions.cell
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
 import com.pixelized.rplexicon.utilitary.extentions.placeholder
 
@@ -44,16 +56,17 @@ data class QuestItemUio(
 ) {
     companion object {
         fun preview(
-            id: String = "La chasse aux loups",
             title: String = "La chasse aux loups",
             complete: Boolean = false,
             placeHolder: Boolean = false,
+            isNew: Boolean = false,
         ): QuestItemUio {
             return QuestItemUio(
-                id = id,
+                id = title,
                 title = title,
                 complete = complete,
                 placeholder = placeHolder,
+                isNew = isNew,
             )
         }
     }
@@ -62,14 +75,22 @@ data class QuestItemUio(
 @Composable
 fun QuestItem(
     modifier: Modifier = Modifier,
+    padding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 4.dp),
     item: QuestItemUio,
+    onItem: (QuestItemUio) -> Unit,
 ) {
     val typography = MaterialTheme.lexicon.typography
     Box(
-        modifier = modifier,
+        modifier = Modifier
+            .clickable { item.let(onItem) }
+            .fillMaxWidth()
+            .heightIn(min = MaterialTheme.lexicon.dimens.item)
+            .height(intrinsicSize = IntrinsicSize.Min)
+            .then(other = modifier),
         contentAlignment = Alignment.CenterStart,
     ) {
         Row(
+            modifier = Modifier.padding(paddingValues = padding),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             val alignModifier = Modifier
@@ -104,6 +125,18 @@ fun QuestItem(
                 },
             )
         }
+        AnimatedVisibility(
+            visible = item.isNew,
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .width(width = 2.dp)
+                    .background(color = MaterialTheme.colorScheme.primary)
+            )
+        }
     }
 }
 
@@ -116,8 +149,8 @@ private fun QuestItemPreview(
     LexiconTheme {
         Surface {
             QuestItem(
-                modifier = Modifier.cell(),
                 item = preview,
+                onItem = { },
             )
         }
     }
@@ -127,6 +160,7 @@ private class QuestItemPreviewProvider : PreviewParameterProvider<QuestItemUio>
     override val values: Sequence<QuestItemUio> = sequenceOf(
         QuestItemUio.preview(complete = false, placeHolder = false),
         QuestItemUio.preview(complete = true, placeHolder = false),
+        QuestItemUio.preview(complete = false, isNew = true),
         QuestItemUio.preview(complete = true, placeHolder = true),
     )
 }

app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/list/QuestListScreen.kt

@@ -4,7 +4,6 @@ import android.content.res.Configuration
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -43,7 +42,6 @@ import com.pixelized.rplexicon.ui.navigation.LocalScreenNavHost
 import com.pixelized.rplexicon.ui.navigation.screens.navigateToQuestDetail
 import com.pixelized.rplexicon.ui.navigation.screens.navigateToSearch
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
-import com.pixelized.rplexicon.utilitary.extentions.cell
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
 import com.pixelized.rplexicon.utilitary.extentions.scroll
 import kotlinx.coroutines.launch
@@ -135,10 +133,8 @@ private fun QuestListContent(
                     contentType = { "Quest" },
                 ) {
                     QuestItem(
-                        modifier = Modifier
-                            .clickable { onItem(it) }
-                            .cell(),
                         item = it,
+                        onItem = onItem,
                     )
                 }
             }
@@ -195,15 +191,25 @@ private fun QuestListPreview() {
                 items = remember {
                     mutableStateOf(
                         listOf(
+                            QuestGroupUio(
+                                category = "La ville de Vallaki",
+                                quests = listOf(
+                                    QuestItemUio.preview(
+                                        title = "Aider les réfugier",
+                                    ),
+                                    QuestItemUio.preview(
+                                        title = "Invitation à diner",
+                                        isNew = true,
+                                    ),
+                                ),
+                            ),
                             QuestGroupUio(
                                 category = "Faerûn",
                                 quests = listOf(
                                     QuestItemUio.preview(
-                                        id = "La chasse aux loups",
                                         title = "La chasse aux loups",
                                     ),
                                     QuestItemUio.preview(
-                                        id = "Les enfants de la caravanes",
                                         title = "Les enfants de la caravanes",
                                     ),
                                 ),

app/src/main/java/com/pixelized/rplexicon/utilitary/extentions/ModifierEx.kt

@@ -11,8 +11,6 @@ import androidx.compose.foundation.gestures.detectTransformGestures
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
@@ -90,14 +88,6 @@ fun Modifier.zoomable() = composed {
         }
 }
 
-@Stable
-fun Modifier.cell() = composed {
-    this then Modifier
-        .fillMaxWidth()
-        .heightIn(min = MaterialTheme.lexicon.dimens.item)
-        .padding(horizontal = 16.dp, vertical = 4.dp)
-}
-
 @Stable
 fun Modifier.scrollOffset(
     scrollState: ScrollState,