Tried isolating the ViewModel/UI

Author: YugaJ7

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

@@ -3,6 +3,7 @@ package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
@@ -31,24 +32,26 @@ fun DetailContent(
 ) {
     val listState = rememberLazyListState()
     val coroutineScope = rememberCoroutineScope()
-
-    val tocItems = buildList {
-        var index = 1
-        add(stringResource(Res.string.introduction_bullet) to index++)
-        if (topic.syntax.signature.isNotBlank()) add(stringResource(Res.string.syntax_bullet) to index++)
-        topic.sections.forEach { section ->
-            section.heading?.let { add(stringResource(Res.string.bullet_item, it) to index++) }
-        }
-        if (topic.pitfalls.isNotEmpty()) add(stringResource(Res.string.pitfalls_bullet) to index++)
-        if (topic.relatedTopics.isNotEmpty()) add(stringResource(Res.string.related_topics_bullet) to index)
-    }
-
+    val tocItems = list(topic)
     LazyColumn(
         state = listState,
         modifier = modifier
             .fillMaxSize()
             .padding(horizontal = 16.dp),
     ) {
+        items(
+            tocItems
+        ){
+
+            when(it){
+                DetailViewModel.ItemTableOfContent.Introduction(intro = topic.intro) -> IntroductionSection(it.)
+                DetailViewModel.ItemTableOfContent.Pitfall -> SyntaxSection(it.)
+                DetailViewModel.ItemTableOfContent.RelatedTopic -> TODO()
+                is DetailViewModel.ItemTableOfContent.Section -> TODO()
+                DetailViewModel.ItemTableOfContent.Syntax -> TODO()
+            }
+        }
+
         // Table of Contents
         item {
             TableOfContents(

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

@@ -6,12 +6,13 @@ import androidx.lifecycle.viewModelScope
 import androidx.navigation.toRoute
 import com.developersbreach.kotlindictionarymultiplatform.Log
 import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
-import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.launch
 import com.developersbreach.kotlindictionarymultiplatform.data.detail.repository.DetailRepository
 import com.developersbreach.kotlindictionarymultiplatform.ui.components.UiState
 import com.developersbreach.kotlindictionarymultiplatform.ui.navigation.AppDestinations
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailViewModel.ItemTableOfContent
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.launch
 import kotlinx.io.IOException
 
 class DetailViewModel(
@@ -40,4 +41,38 @@ class DetailViewModel(
             ifRight = { UiState.Success(it) },
         )
     }
+
+
+
+//    data class ItemTableOfContent(
+//        val index :  Int,
+//        val isVisible : Boolean,
+//    )
+
+    sealed class ItemTableOfContent{
+        // abstract val index : Int
+        data class Introduction(val intro : String):ItemTableOfContent()
+        data object Syntax: ItemTableOfContent()
+        data class Section (
+            val index : Int
+        ):ItemTableOfContent()
+        data object Pitfall: ItemTableOfContent()
+        data object RelatedTopic: ItemTableOfContent()
+    }
+}
+
+fun list(topic: KotlinTopicDetails): List<ItemTableOfContent> {
+    val tocItems = buildList {
+        //add(stringResource(Res.string.introduction_bullet) to index++)
+        add(ItemTableOfContent.Introduction(intro = topic.intro))
+        if (topic.syntax.signature.isNotBlank()) add(ItemTableOfContent.Syntax)
+        topic.sections.forEachIndexed {index,  section ->
+            section.heading?.let {
+                add(ItemTableOfContent.Section(index))
+            }
+        }
+        if (topic.pitfalls.isNotEmpty()) add(ItemTableOfContent.Pitfall)
+        if (topic.relatedTopics.isNotEmpty()) add(ItemTableOfContent.RelatedTopic)
+    }
+    return tocItems
 }

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

@@ -7,15 +7,14 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
 import kotlindictionarymultiplatform.composeapp.generated.resources.Res
 import kotlindictionarymultiplatform.composeapp.generated.resources.introduction
 import org.jetbrains.compose.resources.stringResource
 
 @Composable
-fun IntroductionSection(topic: KotlinTopicDetails) {
+fun IntroductionSection(intro : String) {
     Text(stringResource(Res.string.introduction), style = MaterialTheme.typography.headlineLarge, color = MaterialTheme.colorScheme.onPrimary)
     Spacer(Modifier.height(4.dp))
-    Text(text = topic.intro, style = MaterialTheme.typography.bodyMedium)
+    Text(text = intro, style = MaterialTheme.typography.bodyMedium)
     Spacer(Modifier.height(16.dp))
 }