Implement section-wise scroll behaviour on the Detail Screen

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/DetailScreenPreview.kt

@@ -4,12 +4,16 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
 import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailScreenUI
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.toDetailUi
 import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
 
 @PreviewLightDark
 @Composable
 fun DetailScreenPreview() {
     KotlinDictionaryTheme {
-        DetailScreenUI(topic = fakeTopicDetails())
+        DetailScreenUI(
+            detailUiState = fakeTopicDetails().toDetailUi(),
+            navigateUp = {},
+        )
     }
 }

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/navigation/AppNavigation.kt

@@ -34,7 +34,10 @@ fun AppNavigation(
 
         composable<AppDestinations.Detail> {
             val viewModel: DetailViewModel = koinViewModel()
-            DetailScreen(viewModel = viewModel)
+            DetailScreen(
+                viewModel = viewModel,
+                navigateUp = { navController.navigateUp() },
+            )
         }
     }
 }

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreen.kt

@@ -8,10 +8,14 @@ import com.developersbreach.kotlindictionarymultiplatform.ui.components.UiStateH
 @Composable
 fun DetailScreen(
     viewModel: DetailViewModel,
+    navigateUp: () -> Unit,
 ) {
     val topicState by viewModel.state.collectAsState()
 
-    UiStateHandler(uiState = topicState) { topic ->
-        DetailScreenUI(topic)
+    UiStateHandler(uiState = topicState) { detailUiState ->
+        DetailScreenUI(
+            detailUiState = detailUiState,
+            navigateUp = navigateUp,
+        )
     }
 }

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreenComponents.kt

@@ -0,0 +1,156 @@
+package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.Section
+import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.Syntax
+import kotlindictionarymultiplatform.composeapp.generated.resources.Res
+import kotlindictionarymultiplatform.composeapp.generated.resources.bullet_item
+import kotlindictionarymultiplatform.composeapp.generated.resources.introduction
+import kotlindictionarymultiplatform.composeapp.generated.resources.notes_with_value
+import kotlindictionarymultiplatform.composeapp.generated.resources.pitfalls
+import kotlindictionarymultiplatform.composeapp.generated.resources.related_topics
+import kotlindictionarymultiplatform.composeapp.generated.resources.syntax
+import org.jetbrains.compose.resources.stringResource
+
+@Composable
+fun TableOfContents(
+    item: String,
+    onClick: () -> Unit,
+) {
+    Text(
+        text = item,
+        modifier = Modifier.clickable { onClick() },
+        color = MaterialTheme.colorScheme.onSurface,
+    )
+    Spacer(Modifier.height(4.dp))
+}
+
+@Composable
+fun IntroductionSection(
+    intro: String,
+) {
+    Text(
+        text = stringResource(resource = Res.string.introduction),
+        style = MaterialTheme.typography.headlineLarge,
+        color = MaterialTheme.colorScheme.onPrimary,
+    )
+    Spacer(Modifier.height(4.dp))
+    Text(
+        text = intro,
+        style = MaterialTheme.typography.bodyMedium,
+    )
+    Spacer(Modifier.height(16.dp))
+}
+
+@Composable
+fun SyntaxSection(
+    syntax: Syntax,
+) {
+    Text(
+        text = stringResource(resource = Res.string.syntax),
+        style = MaterialTheme.typography.headlineLarge,
+        color = MaterialTheme.colorScheme.onPrimary,
+    )
+    Spacer(Modifier.height(4.dp))
+    Text(
+        text = syntax.signature,
+        style = MaterialTheme.typography.bodyMedium,
+    )
+    syntax.notes?.let {
+        Spacer(Modifier.height(4.dp))
+        Text(
+            text = stringResource(
+                Res.string.notes_with_value,
+                it,
+            ),
+            style = MaterialTheme.typography.bodyMedium,
+        )
+    }
+    Spacer(Modifier.height(16.dp))
+}
+
+@Composable
+fun SectionBlock(
+    section: Section,
+) {
+    section.heading?.let {
+        Text(
+            text = it,
+            style = MaterialTheme.typography.headlineLarge,
+            color = MaterialTheme.colorScheme.onPrimary,
+        )
+        Spacer(Modifier.height(4.dp))
+    }
+
+    section.content?.let {
+        Text(
+            text = it,
+            style = MaterialTheme.typography.bodyMedium,
+        )
+        Spacer(Modifier.height(8.dp))
+    }
+
+    section.codeExamples.forEach { example ->
+        example.description?.let {
+            Text(
+                text = it,
+                fontWeight = FontWeight.Bold,
+                style = MaterialTheme.typography.bodyMedium,
+            )
+        }
+        Spacer(Modifier.height(16.dp))
+        CodeExampleBox(code = example.code)
+        Spacer(Modifier.height(16.dp))
+    }
+}
+
+@Composable
+fun PitfallsSection(
+    pitfalls: List<String>,
+) {
+    Text(
+        text = stringResource(resource = Res.string.pitfalls),
+        style = MaterialTheme.typography.headlineLarge,
+        color = MaterialTheme.colorScheme.onPrimary,
+    )
+    Spacer(Modifier.height(4.dp))
+    pitfalls.forEach {
+        Text(
+            text = stringResource(
+                Res.string.bullet_item,
+                it,
+            ),
+            style = MaterialTheme.typography.bodyMedium,
+        )
+    }
+    Spacer(Modifier.height(16.dp))
+}
+
+@Composable
+fun RelatedTopicsSection(
+    relatedTopics: List<String>,
+) {
+    Text(
+        text = stringResource(resource = Res.string.related_topics),
+        style = MaterialTheme.typography.headlineLarge,
+        color = MaterialTheme.colorScheme.onPrimary,
+    )
+    Spacer(Modifier.height(4.dp))
+    relatedTopics.forEach {
+        Text(
+            text = stringResource(
+                Res.string.bullet_item,
+                it,
+            ),
+            style = MaterialTheme.typography.bodyMedium,
+        )
+    }
+}