Align design of details screen

app/src/main/java/com/pixelized/rplexicon/model/QuestEntry.kt

@@ -7,7 +7,6 @@ import androidx.compose.runtime.Stable
 data class Quest(
     val id: Int,
     val title: String,
-    val background: Uri?,
     val entries: List<QuestEntry>,
 )
 

app/src/main/java/com/pixelized/rplexicon/repository/QuestRepository.kt

@@ -83,7 +83,6 @@ class QuestRepository @Inject constructor(
             Quest(
                 id = index,
                 title = item,
-                background = questMap[item]?.mapNotNull { it.background }?.randomOrNull(),
                 entries = questMap[item] ?: emptyList(),
             )
         }

app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/detail/LexiconDetailScreen.kt

@@ -62,6 +62,7 @@ import com.pixelized.rplexicon.utilitary.composable.stringResource
 import com.pixelized.rplexicon.utilitary.extentions.annotatedSpan
 import com.pixelized.rplexicon.utilitary.extentions.annotatedString
 import com.pixelized.rplexicon.utilitary.extentions.highlightRegex
+import com.pixelized.rplexicon.utilitary.extentions.lexicon
 import com.pixelized.rplexicon.utilitary.extentions.scrollOffset
 import com.skydoves.landscapist.ImageOptions
 
@@ -205,7 +206,10 @@ private fun LexiconDetailContent(
             Column(
                 modifier = Modifier
                     .verticalScroll(state)
-                    .padding(top = 64.dp, bottom = 16.dp),
+                    .padding(
+                        top = MaterialTheme.lexicon.dimens.detailPadding,
+                        bottom = 16.dp,
+                    ),
                 verticalArrangement = Arrangement.spacedBy(space = 4.dp),
             ) {
                 FlowRow(

app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailScreen.kt

@@ -193,7 +193,12 @@ private fun QuestDetailContent(
                 Column(
                     modifier = Modifier
                         .verticalScroll(state)
-                        .padding(top = 248.dp, bottom = 16.dp, start = 16.dp, end = 16.dp),
+                        .padding(
+                            top = MaterialTheme.lexicon.dimens.detailPadding,
+                            end = 16.dp,
+                            bottom = 16.dp,
+                            start = 16.dp,
+                        ),
                 ) {
                     Column {
                         Text(
@@ -268,7 +273,10 @@ private fun QuestDetailContent(
                                     )
                                     Text(
                                         style = MaterialTheme.typography.bodyMedium,
-                                        text = it,
+                                        text = when (quest.giverId) {
+                                            null -> "◊ $it"
+                                            else -> "⧫ $it"
+                                        },
                                     )
                                 }
                             }

app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailViewModel.kt

@@ -25,7 +25,7 @@ class QuestDetailViewModel @Inject constructor(
         quest = mutableStateOf(
             QuestDetailUio(
                 id = source.id,
-                background = source.background,
+                background = source.entries.mapNotNull { it.background }.randomOrNull(),
                 title = source.title,
                 steps = source.entries.map { entry ->
                     QuestDetailUio.QuestStep(

app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt

@@ -5,8 +5,8 @@ import androidx.compose.animation.ContentTransform
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.animation.with
 import androidx.compose.runtime.Stable
 import androidx.compose.ui.unit.Density
@@ -23,6 +23,10 @@ fun lexiconAnimation(
     density: Density,
 ): LexiconAnimation = LexiconAnimation(
     itemList = with(density) {
-        { fadeIn() + slideInVertically { 8.dp.roundToPx() } with fadeOut() + slideOutVertically { 8.dp.roundToPx() } }
+        {
+            val enter = fadeIn() + slideInHorizontally { 8.dp.roundToPx() }
+            val exit = fadeOut() + slideOutHorizontally { 8.dp.roundToPx() }
+            enter with exit
+        }
     },
 )

app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt

@@ -10,16 +10,19 @@ import androidx.compose.ui.unit.dp
 @Immutable
 data class LexiconDimens(
     val item: Dp,
+    val detailPadding: Dp,
     val itemListPadding: PaddingValues,
 )
 
 fun lexiconDimen(
-    item: Dp = 52.dp,
+    itemHeight: Dp = 52.dp,
+    detailPadding: Dp = 248.dp,
     itemListPadding: PaddingValues = PaddingValues(
         top = 8.dp,
         bottom = 8.dp + 16.dp + 56.dp + 16.dp,
-    )
+    ),
 ) = LexiconDimens(
-    item = item,
-    itemListPadding,
+    item = itemHeight,
+    detailPadding = detailPadding,
+    itemListPadding = itemListPadding
 )