Adding spans in preview (#524)

leandroBorgesFerreira · Leandro Ferreira · web-flow · commit efdfba5944ef · 2025-11-15T21:19:44.000-03:00
* Adding spans in preview

* fixing build for ios app

* fixing name change of folders

---------

Co-authored-by: Leandro Ferreira &lt;email@email.com&gt;
diff --git a/application/core/navigation/src/commonMain/kotlin/io/writeopia/navigation/Navigation.kt b/application/core/navigation/src/commonMain/kotlin/io/writeopia/navigation/Navigation.kt
@@ -44,6 +44,7 @@ fun Navigation(
     SharedTransitionLayout {
         NavHost(navController = navController, startDestination = startDestination) {
             notesMenuNavigation(
+                isDarkTheme = isDarkTheme,
                 notesMenuInjection = notesMenuInjection,
                 ollamaConfigInjector = sideMenuKmpInjector,
                 navigationController = navController,
diff --git a/application/features/global_shell/src/commonMain/kotlin/io/writeopia/global/shell/viewmodel/GlobalShellKmpViewModel.kt b/application/features/global_shell/src/commonMain/kotlin/io/writeopia/global/shell/viewmodel/GlobalShellKmpViewModel.kt
@@ -185,7 +185,7 @@ class GlobalShellKmpViewModel(
         ) { selectedFolder, menuItems, workspace ->
             if (selectedFolder != null) {
                 val folder =
-                    menuItems["${selectedFolder.parentId}:${workspace.id}"]
+                    menuItems[selectedFolder.parentId]
                         ?.find { menuItem ->
                             menuItem.id == selectedFolder.id
                         } as? Folder
diff --git a/application/features/note_menu/src/androidMain/kotlin/io/writeopia/notemenu/ui/screen/menu/ChooseNoteScreen.kt b/application/features/note_menu/src/androidMain/kotlin/io/writeopia/notemenu/ui/screen/menu/ChooseNoteScreen.kt
@@ -14,6 +14,7 @@ import io.writeopia.notemenu.viewmodel.ChooseNoteViewModel
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 internal fun ChooseNoteScreen(
+    isDarkTheme: Boolean,
     chooseNoteViewModel: ChooseNoteViewModel,
     sharedTransitionScope: SharedTransitionScope,
     animatedVisibilityScope: AnimatedVisibilityScope,
@@ -39,6 +40,7 @@ internal fun ChooseNoteScreen(
     }
 
     MobileChooseNoteScreen(
+        isDarkTheme,
         chooseNoteViewModel,
         sharedTransitionScope = sharedTransitionScope,
         animatedVisibilityScope = animatedVisibilityScope,
diff --git a/application/features/note_menu/src/androidMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.android.kt b/application/features/note_menu/src/androidMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.android.kt
@@ -15,6 +15,7 @@ import io.writeopia.notemenu.viewmodel.ChooseNoteViewModel
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 actual fun NotesMenuScreen(
+    isDarkTheme: Boolean,
     folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController?,
@@ -32,6 +33,7 @@ actual fun NotesMenuScreen(
     modifier: Modifier
 ) {
     ChooseNoteScreen(
+        isDarkTheme = isDarkTheme,
         chooseNoteViewModel = chooseNoteViewModel,
         sharedTransitionScope = sharedTransitionScope,
         animatedVisibilityScope = animatedVisibilityScope,
diff --git a/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/navigation/NotesMenuNavigation.kt b/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/navigation/NotesMenuNavigation.kt
@@ -28,6 +28,7 @@ object NoteMenuDestiny {
 
 @OptIn(ExperimentalSharedTransitionApi::class)
 fun NavGraphBuilder.notesMenuNavigation(
+    isDarkTheme: Boolean,
     notesMenuInjection: NotesMenuInjection,
     ollamaConfigInjector: OllamaConfigInjector? = null,
     navigationController: NavController,
@@ -68,6 +69,7 @@ fun NavGraphBuilder.notesMenuNavigation(
         val ollamaConfigController = ollamaConfigInjector?.provideOllamaConfigController()
 
         NotesMenuScreen(
+            isDarkTheme = isDarkTheme,
             folderId = notesNavigation.id,
             chooseNoteViewModel = chooseNoteViewModel,
             ollamaConfigController = ollamaConfigController,
@@ -94,6 +96,7 @@ fun NavGraphBuilder.notesMenuNavigation(
         val ollamaConfigController = ollamaConfigInjector?.provideOllamaConfigController()
 
         NotesMenuScreen(
+            isDarkTheme = isDarkTheme,
             folderId = notesNavigation.id,
             chooseNoteViewModel = chooseNoteViewModel,
             ollamaConfigController = ollamaConfigController,
diff --git a/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/DesktopNotesMenu.kt b/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/DesktopNotesMenu.kt
@@ -49,6 +49,7 @@ import io.writeopia.onboarding.OnboardingWorkspace
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 fun DesktopNotesMenu(
+    isDarkTheme: Boolean,
     folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController? = null,
@@ -87,6 +88,7 @@ fun DesktopNotesMenu(
                     modifier = Modifier.padding(start = 40.dp)
                 ) {
                     NotesCardsScreen(
+                        isDarkTheme = isDarkTheme,
                         documents = chooseNoteViewModel.documentsState.collectAsState().value,
                         showAddMenuState = chooseNoteViewModel.showAddMenuState,
                         loadNote = { id, title ->
diff --git a/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/documents/NotesCardsScreen.kt b/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/documents/NotesCardsScreen.kt
@@ -92,6 +92,7 @@ const val ADD_NOTE_TEST_TAG = "addNote"
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 fun NotesCardsScreen(
+    isDarkTheme: Boolean,
     documents: ResultData<NotesUi>,
     showAddMenuState: StateFlow<Boolean>,
     sharedTransitionScope: SharedTransitionScope,
@@ -126,7 +127,8 @@ fun NotesCardsScreen(
                         when (notesUi.notesArrangement) {
                             NotesArrangement.STAGGERED_GRID -> {
                                 LazyStaggeredGridNotes(
-                                    documentsUiList,
+                                    isDarkTheme = isDarkTheme,
+                                    documents = documentsUiList,
                                     animatedVisibilityScope = animatedVisibilityScope,
                                     sharedTransitionScope = sharedTransitionScope,
                                     minimalNoteWidth = minimalNoteWidth,
@@ -143,7 +145,8 @@ fun NotesCardsScreen(
 
                             NotesArrangement.GRID -> {
                                 LazyGridNotes(
-                                    documentsUiList,
+                                    isDarkTheme,
+                                    documents = documentsUiList,
                                     animatedVisibilityScope = animatedVisibilityScope,
                                     sharedTransitionScope = sharedTransitionScope,
                                     minimalNoteWidth = minimalNoteWidth,
@@ -160,7 +163,8 @@ fun NotesCardsScreen(
 
                             NotesArrangement.LIST -> {
                                 LazyColumnNotes(
-                                    documentsUiList,
+                                    isDarkTheme = isDarkTheme,
+                                    documents = documentsUiList,
                                     animatedVisibilityScope = animatedVisibilityScope,
                                     sharedTransitionScope = sharedTransitionScope,
                                     selectionListener = selectionListener,
@@ -256,6 +260,7 @@ fun NotesCardsScreen(
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 private fun LazyStaggeredGridNotes(
+    isDarkTheme: Boolean,
     documents: List<MenuItemUi>,
     sharedTransitionScope: SharedTransitionScope,
     animatedVisibilityScope: AnimatedVisibilityScope,
@@ -304,7 +309,7 @@ private fun LazyStaggeredGridNotes(
                             animatedVisibilityScope = animatedVisibilityScope,
                             onDocumentClick,
                             selectionListener,
-                            previewDrawers(),
+                            previewDrawers(isDarkTheme),
                             position = i,
                             { onDragIconClick(menuItem.documentId) },
                             modifier = itemModifier,
@@ -336,6 +341,7 @@ private fun LazyStaggeredGridNotes(
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 private fun LazyGridNotes(
+    isDarkTheme: Boolean,
     documents: List<MenuItemUi>,
     sharedTransitionScope: SharedTransitionScope,
     animatedVisibilityScope: AnimatedVisibilityScope,
@@ -382,7 +388,7 @@ private fun LazyGridNotes(
                             animatedVisibilityScope = animatedVisibilityScope,
                             onDocumentClick,
                             selectionListener,
-                            previewDrawers(),
+                            previewDrawers(isDarkTheme),
                             position = i,
                             { onDragIconClick(menuItem.documentId) },
                             modifier = Modifier.animateItem()
@@ -413,6 +419,7 @@ private fun LazyGridNotes(
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 private fun LazyColumnNotes(
+    isDarkTheme: Boolean,
     documents: List<MenuItemUi>,
     sharedTransitionScope: SharedTransitionScope,
     animatedVisibilityScope: AnimatedVisibilityScope,
@@ -454,7 +461,7 @@ private fun LazyColumnNotes(
                             animatedVisibilityScope = animatedVisibilityScope,
                             onDocumentClick,
                             selectionListener,
-                            previewDrawers(),
+                            previewDrawers(isDarkTheme),
                             position = i,
                             onDragIconClick = { onDragIconClick(menuItem.documentId) },
                             modifier = Modifier.animateItem()
@@ -759,8 +766,8 @@ private fun NoNotesScreen() {
 }
 
 @Composable
-private fun previewDrawers(): Map<Int, StoryStepDrawer> {
-    val unOrderedListItemPreviewDrawer = UnOrderedListItemPreviewDrawer()
+private fun previewDrawers(isDarkTheme: Boolean): Map<Int, StoryStepDrawer> {
+    val unOrderedListItemPreviewDrawer = UnOrderedListItemPreviewDrawer(isDarkTheme = true)
 
     return mapOf(
         StoryTypes.TITLE.type.number to HeaderPreviewDrawer(
@@ -769,7 +776,7 @@ private fun previewDrawers(): Map<Int, StoryStepDrawer> {
             )
         ),
         StoryTypes.CHECK_ITEM.type.number to CheckItemPreviewDrawer(),
-        StoryTypes.TEXT.type.number to TextPreviewDrawer(),
+        StoryTypes.TEXT.type.number to TextPreviewDrawer(isDarkTheme = isDarkTheme),
         StoryTypes.DOCUMENT_LINK.type.number to DocumentLinkPreviewDrawer(),
         StoryTypes.UNORDERED_LIST_ITEM.type.number to unOrderedListItemPreviewDrawer,
         StoryTypes.IMAGE.type.number to ImagePreviewDrawer(),
diff --git a/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/menu/MobileChooseNoteScreen.kt b/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/menu/MobileChooseNoteScreen.kt
@@ -50,6 +50,7 @@ import kotlinx.coroutines.flow.StateFlow
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 internal fun MobileChooseNoteScreen(
+    isDarkTheme: Boolean,
     chooseNoteViewModel: ChooseNoteViewModel,
     sharedTransitionScope: SharedTransitionScope,
     animatedVisibilityScope: AnimatedVisibilityScope,
@@ -83,6 +84,7 @@ internal fun MobileChooseNoteScreen(
         ) { paddingValues ->
             DraggableScreen {
                 Content(
+                    isDarkTheme = isDarkTheme,
                     chooseNoteViewModel = chooseNoteViewModel,
                     sharedTransitionScope = sharedTransitionScope,
                     animatedVisibilityScope = animatedVisibilityScope,
@@ -245,6 +247,7 @@ private fun FloatingActionButton(
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 private fun Content(
+    isDarkTheme: Boolean,
     chooseNoteViewModel: ChooseNoteViewModel,
     sharedTransitionScope: SharedTransitionScope,
     animatedVisibilityScope: AnimatedVisibilityScope,
@@ -255,6 +258,7 @@ private fun Content(
     paddingValues: PaddingValues,
 ) {
     NotesCardsScreen(
+        isDarkTheme = isDarkTheme,
         documents = chooseNoteViewModel.documentsState.collectAsState().value,
         showAddMenuState = chooseNoteViewModel.showAddMenuState,
         animatedVisibilityScope = animatedVisibilityScope,
diff --git a/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.kt b/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.kt
@@ -15,6 +15,7 @@ import io.writeopia.notemenu.viewmodel.ChooseNoteViewModel
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 expect fun NotesMenuScreen(
+    isDarkTheme: Boolean,
     folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController? = null,
diff --git a/application/features/note_menu/src/jsMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.js.kt b/application/features/note_menu/src/jsMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.js.kt
@@ -16,6 +16,7 @@ import io.writeopia.notemenu.viewmodel.ChooseNoteViewModel
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 actual fun NotesMenuScreen(
+    isDarkTheme: Boolean,
     folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController?,
@@ -33,6 +34,7 @@ actual fun NotesMenuScreen(
     modifier: Modifier
 ) {
     DesktopNotesMenu(
+        isDarkTheme = isDarkTheme,
         folderId = folderId,
         chooseNoteViewModel = chooseNoteViewModel,
         sharedTransitionScope = sharedTransitionScope,
diff --git a/application/features/note_menu/src/jvmMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.jvm.kt b/application/features/note_menu/src/jvmMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.jvm.kt
@@ -32,6 +32,7 @@ import java.io.File
 @OptIn(ExperimentalSharedTransitionApi::class, ExperimentalComposeUiApi::class)
 @Composable
 actual fun NotesMenuScreen(
+    isDarkTheme: Boolean,
     folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController?,
@@ -65,6 +66,7 @@ actual fun NotesMenuScreen(
     )
 
     DesktopNotesMenu(
+        isDarkTheme = isDarkTheme,
         folderId = folderId,
         chooseNoteViewModel = chooseNoteViewModel,
         ollamaConfigController = ollamaConfigController,
diff --git a/application/features/note_menu/src/nativeMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.native.kt b/application/features/note_menu/src/nativeMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.native.kt
@@ -15,6 +15,7 @@ import io.writeopia.notemenu.viewmodel.ChooseNoteViewModel
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 actual fun NotesMenuScreen(
+    isDarkTheme: Boolean,
     folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController?,
@@ -32,6 +33,7 @@ actual fun NotesMenuScreen(
     modifier: Modifier
 ) {
     MobileChooseNoteScreen(
+        isDarkTheme = isDarkTheme,
         chooseNoteViewModel = chooseNoteViewModel,
         sharedTransitionScope = sharedTransitionScope,
         animatedVisibilityScope = animatedVisibilityScope,
diff --git a/writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/drawer/preview/TextPreviewDrawer.kt b/writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/drawer/preview/TextPreviewDrawer.kt
@@ -5,6 +5,8 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
@@ -13,6 +15,7 @@ import io.writeopia.sdk.models.story.StoryStep
 import io.writeopia.sdk.models.story.StoryTypes
 import io.writeopia.ui.drawer.StoryStepDrawer
 import io.writeopia.ui.model.DrawInfo
+import io.writeopia.ui.utils.Spans
 import io.writeopia.ui.utils.previewTextStyle
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
@@ -24,14 +27,19 @@ class TextPreviewDrawer(
     private val maxLines: Int = Int.MAX_VALUE,
     private val textColor: @Composable (DrawInfo) -> Color = {
         MaterialTheme.colorScheme.onBackground
-    }
+    },
+    private val isDarkTheme: Boolean,
 ) : StoryStepDrawer {
 
     @Composable
     override fun Step(step: StoryStep, drawInfo: DrawInfo) {
+        val inputText by derivedStateOf {
+            Spans.createStringWithSpans(step.text, step.spans, isDarkTheme)
+        }
+
         Text(
             modifier = modifier,
-            text = step.text ?: "",
+            text = inputText,
             style = style(step),
             color = textColor(drawInfo),
             maxLines = maxLines
@@ -43,12 +51,12 @@ class TextPreviewDrawer(
 @Composable
 fun TextPreviewDrawerPreview() {
     Surface {
-        TextPreviewDrawer().Step(
+        TextPreviewDrawer(isDarkTheme = false).Step(
             step = StoryStep(
                 type = StoryTypes.TEXT.type,
                 text = "This is a text message preview"
             ),
-            drawInfo = DrawInfo()
+            drawInfo = DrawInfo(),
         )
     }
 }
diff --git a/writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/drawer/preview/UnOrderedListItemPreviewDrawer.kt b/writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/drawer/preview/UnOrderedListItemPreviewDrawer.kt
@@ -24,7 +24,8 @@ class UnOrderedListItemPreviewDrawer(
     private val textStyle: @Composable (StoryStep) -> TextStyle = {
         previewTextStyle(it)
     },
-    private val maxLines: Int = 1
+    private val maxLines: Int = 1,
+    private val isDarkTheme: Boolean,
 ) : StoryStepDrawer {
     @Composable
     override fun Step(step: StoryStep, drawInfo: DrawInfo) {
@@ -42,6 +43,7 @@ class UnOrderedListItemPreviewDrawer(
                 modifier = textModifier,
                 style = textStyle,
                 maxLines = maxLines,
+                isDarkTheme = isDarkTheme
             ).Step(
                 step = step,
                 drawInfo = drawInfo
@@ -54,7 +56,7 @@ class UnOrderedListItemPreviewDrawer(
 @Composable
 fun UnOrderedListItemPreviewDrawerPreview() {
     Surface {
-        UnOrderedListItemPreviewDrawer().Step(
+        UnOrderedListItemPreviewDrawer(isDarkTheme = true).Step(
             step = StoryStep(
                 type = StoryTypes.TEXT.type,
                 text = "This is a text list item preview"
