Writeopia · leandroBorgesFerreira · Nov 10, 2025 · Nov 10, 2025 · Nov 10, 2025 · Nov 10, 2025
diff --git a/...cation/core/common_ui/src/commonMain/kotlin/io/writeopia/commonui/buttons/CommonButton.kt b/...cation/core/common_ui/src/commonMain/kotlin/io/writeopia/commonui/buttons/CommonButton.kt
@@ -2,6 +2,7 @@ package io.writeopia.commonui.buttons
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -15,6 +16,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -58,6 +60,8 @@ fun CommonButton(
     defaultColor: Color = WriteopiaTheme.colorScheme.defaultButton,
     selectedColor: Color = WriteopiaTheme.colorScheme.highlight,
     isEnabledState: StateFlow<Boolean> = MutableStateFlow(true),
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
     clickListener: () -> Unit,
 ) {
     val isEditable by isEnabledState.collectAsState()
@@ -66,7 +70,8 @@ fun CommonButton(
     val shape = MaterialTheme.shapes.medium
 
     Row(
-        verticalAlignment = Alignment.CenterVertically,
+        verticalAlignment = verticalAlignment,
+        horizontalArrangement = horizontalArrangement,
         modifier = modifier
             .background(lockButtonColor, shape)
             .clip(shape)

diff --git a/...note_menu/src/androidMain/kotlin/io/writeopia/notemenu/ui/screen/menu/ChooseNoteScreen.kt b/...note_menu/src/androidMain/kotlin/io/writeopia/notemenu/ui/screen/menu/ChooseNoteScreen.kt
@@ -8,6 +8,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import io.writeopia.common.utils.NotesNavigation
 import io.writeopia.notemenu.viewmodel.ChooseNoteViewModel
 
 @OptIn(ExperimentalSharedTransitionApi::class)
@@ -19,6 +20,7 @@ internal fun ChooseNoteScreen(
     navigateToNote: (String, String) -> Unit,
     newNote: () -> Unit,
     navigateToAccount: () -> Unit,
+    navigateToNotes: (NotesNavigation) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     val hasSelectedNotes by chooseNoteViewModel.hasSelectedNotes.collectAsState()
@@ -40,9 +42,10 @@ internal fun ChooseNoteScreen(
         chooseNoteViewModel,
         sharedTransitionScope = sharedTransitionScope,
         animatedVisibilityScope = animatedVisibilityScope,
-        navigateToNote,
-        newNote,
-        navigateToAccount,
-        modifier
+        navigateToNote = navigateToNote,
+        newNote = newNote,
+        navigateToAccount = navigateToAccount,
+        navigateToNotes = navigateToNotes,
+        modifier = modifier,
     )
 }
diff --git a/...nu/src/androidMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.android.kt b/...nu/src/androidMain/kotlin/io/writeopia/notemenu/ui/screen/menu/NotesMenuScreen.android.kt
@@ -38,6 +38,7 @@ actual fun NotesMenuScreen(
         navigateToNote = onNoteClick,
         newNote = onNewNoteClick,
         navigateToAccount = onAccountClick,
+        navigateToNotes = navigateToFolders,
         modifier = modifier,
     )
 }
diff --git a/...tures/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/DesktopNotesMenu.kt b/...tures/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/DesktopNotesMenu.kt
@@ -38,7 +38,7 @@ import io.writeopia.notemenu.ui.screen.configuration.molecules.NotesSelectionMen
 import io.writeopia.commonui.workplace.WorkspaceConfigurationDialog
 import io.writeopia.controller.OllamaConfigController
 import io.writeopia.commonui.dialogs.confirmation.DeleteConfirmationDialog
-import io.writeopia.notemenu.ui.screen.documents.NotesCards
+import io.writeopia.notemenu.ui.screen.documents.NotesCardsScreen
 import io.writeopia.notemenu.ui.screen.file.fileChooserLoad
 import io.writeopia.notemenu.viewmodel.ChooseNoteViewModel
 import io.writeopia.notemenu.viewmodel.ConfigState
@@ -86,8 +86,9 @@ fun DesktopNotesMenu(
                     verticalAlignment = Alignment.CenterVertically,
                     modifier = Modifier.padding(start = 40.dp)
                 ) {
-                    NotesCards(
+                    NotesCardsScreen(
                         documents = chooseNoteViewModel.documentsState.collectAsState().value,
+                        showAddMenuState = chooseNoteViewModel.showAddMenuState,
                         loadNote = { id, title ->
                             val handled = chooseNoteViewModel.handleMenuItemTap(id)
                             if (!handled) {
@@ -101,16 +102,16 @@ fun DesktopNotesMenu(
                                 navigateToNotes(NotesNavigation.Folder(id))
                             }
                         },
-                        moveRequest = { item, parentId ->
-                            chooseNoteViewModel.moveToFolder(item, parentId)
-                        },
+                        moveRequest = chooseNoteViewModel::moveToFolder,
                         modifier = Modifier.weight(1F).fillMaxHeight()
                             .padding(end = 10.dp, top = 20.dp),
                         changeIcon = chooseNoteViewModel::changeIcons,
                         onSelection = chooseNoteViewModel::toggleSelection,
                         sharedTransitionScope = sharedTransitionScope,
                         animatedVisibilityScope = animatedVisibilityScope,
-                        newNote = onNewNoteClick
+                        newNote = onNewNoteClick,
+                        newFolder = chooseNoteViewModel::newFolder,
+                        hideShowMenu = chooseNoteViewModel::hideAddMenu,
                     )
 
                     Spacer(modifier = Modifier.width(20.dp))
@@ -159,7 +160,7 @@ fun DesktopNotesMenu(
                     .padding(horizontal = 40.dp - borderPadding, vertical = 40.dp)
                     .testTag("addNote"),
                 onClick = {
-                    chooseNoteViewModel.requestInitFlow(onNewNoteClick)
+                    chooseNoteViewModel.requestInitFlow(chooseNoteViewModel::showAddMenu)
                 },
                 content = {
                     Icon(

diff --git a/...notemenu/ui/screen/documents/NoteItems.kt → ...u/ui/screen/documents/NotesCardsScreen.kt b/...notemenu/ui/screen/documents/NoteItems.kt → ...u/ui/screen/documents/NotesCardsScreen.kt
@@ -28,13 +28,15 @@ import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
 import androidx.compose.foundation.lazy.staggeredgrid.itemsIndexed
+import androidx.compose.material3.Card
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -53,10 +55,12 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.window.Dialog
 import io.writeopia.common.utils.icons.IconChange
 import io.writeopia.common.utils.icons.WrIcons
 import io.writeopia.common.utils.icons.WrIcons.folder
 import io.writeopia.commonui.IconsPicker
+import io.writeopia.commonui.buttons.CommonButton
 import io.writeopia.commonui.dtos.MenuItemUi
 import io.writeopia.core.configuration.models.NotesArrangement
 import io.writeopia.notemenu.ui.dto.NotesUi
@@ -79,15 +83,17 @@ import io.writeopia.ui.drawer.preview.ImagePreviewDrawer
 import io.writeopia.ui.drawer.preview.TextPreviewDrawer
 import io.writeopia.ui.drawer.preview.UnOrderedListItemPreviewDrawer
 import io.writeopia.ui.model.DrawInfo
+import kotlinx.coroutines.flow.StateFlow
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 const val DOCUMENT_ITEM_TEST_TAG = "DocumentItem_"
 const val ADD_NOTE_TEST_TAG = "addNote"
 
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
-fun NotesCards(
+fun NotesCardsScreen(
     documents: ResultData<NotesUi>,
+    showAddMenuState: StateFlow<Boolean>,
     sharedTransitionScope: SharedTransitionScope,
     animatedVisibilityScope: AnimatedVisibilityScope,
     minimalNoteWidth: Dp = minimalNoteCardWidth(),
@@ -98,6 +104,8 @@ fun NotesCards(
     changeIcon: (String, String, Int, IconChange) -> Unit,
     onSelection: (String) -> Unit,
     newNote: () -> Unit,
+    newFolder: () -> Unit,
+    hideShowMenu: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     when (documents) {
@@ -191,6 +199,58 @@ fun NotesCards(
             }
         }
     }
+
+    val showAddMenu by showAddMenuState.collectAsState()
+
+    if (showAddMenu) {
+        Dialog(onDismissRequest = hideShowMenu) {
+            Card(modifier = Modifier.width(320.dp), shape = MaterialTheme.shapes.large) {
+                Column(
+                    modifier = Modifier.padding(
+                        start = 20.dp,
+                        end = 20.dp,
+                        bottom = 20.dp,
+                        top = 20.dp
+                    ),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    val modifier = Modifier.height(50.dp).width(280.dp)
+
+                    Text(
+                        "Add",
+                        style = MaterialTheme.typography.titleLarge,
+                        modifier = Modifier.fillMaxWidth()
+                    )
+
+                    Spacer(modifier = Modifier.height(20.dp))
+
+                    CommonButton(
+                        modifier = modifier,
+                        text = "Document",
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.Center,
+                        clickListener = {
+                            hideShowMenu()
+                            newNote()
+                        }
+                    )
+
+                    Spacer(modifier = Modifier.height(10.dp))
+
+                    CommonButton(
+                        modifier = modifier,
+                        text = "Folder",
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.Center,
+                        clickListener = {
+                            hideShowMenu()
+                            newFolder()
+                        }
+                    )
+                }
+            }
+        }
+    }
 }
 
 @OptIn(ExperimentalSharedTransitionApi::class)

diff --git a/...menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/menu/MobileChooseNoteScreen.kt b/...menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/menu/MobileChooseNoteScreen.kt
@@ -33,12 +33,13 @@ import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.unit.dp
+import io.writeopia.common.utils.NotesNavigation
 import io.writeopia.common.utils.icons.WrIcons
 import io.writeopia.notemenu.ui.screen.configuration.molecules.MobileConfigurationsMenu
 import io.writeopia.notemenu.ui.screen.configuration.molecules.NotesSelectionMenu
 import io.writeopia.commonui.dialogs.confirmation.DeleteConfirmationDialog
 import io.writeopia.notemenu.ui.screen.documents.ADD_NOTE_TEST_TAG
-import io.writeopia.notemenu.ui.screen.documents.NotesCards
+import io.writeopia.notemenu.ui.screen.documents.NotesCardsScreen
 import io.writeopia.notemenu.viewmodel.ChooseNoteViewModel
 import io.writeopia.notemenu.viewmodel.UserState
 import io.writeopia.notemenu.viewmodel.toNumberDesktop
@@ -55,6 +56,7 @@ internal fun MobileChooseNoteScreen(
     navigateToNote: (String, String) -> Unit,
     newNote: () -> Unit,
     navigateToAccount: () -> Unit,
+    navigateToNotes: (NotesNavigation) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     LaunchedEffect(key1 = "refresh", block = {
@@ -76,7 +78,7 @@ internal fun MobileChooseNoteScreen(
                 )
             },
             floatingActionButton = {
-                FloatingActionButton(newNoteClick = newNote)
+                FloatingActionButton(onClick = chooseNoteViewModel::showAddMenu)
             }
         ) { paddingValues ->
             DraggableScreen {
@@ -87,7 +89,8 @@ internal fun MobileChooseNoteScreen(
                     loadNote = navigateToNote,
                     selectionListener = chooseNoteViewModel::onDocumentSelected,
                     paddingValues = paddingValues,
-                    newNote = newNote
+                    newNote = newNote,
+                    navigateToNotes = navigateToNotes,
                 )
             }
         }
@@ -220,13 +223,15 @@ private fun getUserName(userNameState: UserState<String>): String =
     }
 
 @Composable
-private fun FloatingActionButton(newNoteClick: () -> Unit) {
+private fun FloatingActionButton(
+    onClick: () -> Unit
+) {
     FloatingActionButton(
         modifier = Modifier.semantics {
             testTag = ADD_NOTE_TEST_TAG
         },
         containerColor = MaterialTheme.colorScheme.primary,
-        onClick = newNoteClick,
+        onClick = onClick,
         content = {
             Icon(
                 imageVector = WrIcons.add,
@@ -246,19 +251,28 @@ private fun Content(
     loadNote: (String, String) -> Unit,
     selectionListener: (String, Boolean) -> Unit,
     newNote: () -> Unit,
+    navigateToNotes: (NotesNavigation) -> Unit,
     paddingValues: PaddingValues,
 ) {
-    NotesCards(
+    NotesCardsScreen(
         documents = chooseNoteViewModel.documentsState.collectAsState().value,
+        showAddMenuState = chooseNoteViewModel.showAddMenuState,
         animatedVisibilityScope = animatedVisibilityScope,
         sharedTransitionScope = sharedTransitionScope,
         loadNote = loadNote,
         selectionListener = selectionListener,
-        folderClick = {},
+        hideShowMenu = chooseNoteViewModel::hideAddMenu,
+        folderClick = { id ->
+            val handled = chooseNoteViewModel.handleMenuItemTap(id)
+            if (!handled) {
+                navigateToNotes(NotesNavigation.Folder(id))
+            }
+        },
         changeIcon = { _, _, _, _ -> },
-        moveRequest = { _, _ -> },
+        moveRequest = chooseNoteViewModel::moveToFolder,
         onSelection = {},
         newNote = newNote,
+        newFolder = chooseNoteViewModel::newFolder,
         modifier = Modifier
             .padding(paddingValues)
             .fillMaxSize()

diff --git a/...note_menu/src/commonMain/kotlin/io/writeopia/notemenu/viewmodel/ChooseNoteKmpViewModel.kt b/...note_menu/src/commonMain/kotlin/io/writeopia/notemenu/viewmodel/ChooseNoteKmpViewModel.kt
@@ -204,6 +204,9 @@ internal class ChooseNoteKmpViewModel(
         }.stateIn(viewModelScope, SharingStarted.Lazily, ResultData.Idle())
     }
 
+    private val _showAddMenuState = MutableStateFlow(false)
+    override val showAddMenuState: StateFlow<Boolean> = _showAddMenuState
+
     init {
         folderController.initCoroutine(viewModelScope)
 
@@ -250,15 +253,14 @@ internal class ChooseNoteKmpViewModel(
         }
     }
 
-    override fun handleMenuItemTap(id: String): Boolean {
-        return if (selectionState.value) {
+    override fun handleMenuItemTap(id: String): Boolean =
+        if (selectionState.value) {
             toggleSelection(id)
 
             true
         } else {
             false
         }
-    }
 
     override fun showEditMenu() {
         _editState.value = true
@@ -463,6 +465,12 @@ internal class ChooseNoteKmpViewModel(
         }
     }
 
+    override fun newFolder() {
+        viewModelScope.launch(Dispatchers.Default) {
+            folderController.addFolder()
+        }
+    }
+
     private suspend fun importJsonNotes(externalFiles: List<ExternalFile>, now: Instant) {
         externalFiles.filter { file -> file.extension == "json" }
             .map { file -> file.fullPath }
@@ -486,6 +494,14 @@ internal class ChooseNoteKmpViewModel(
             .collect(notesUseCase::saveDocumentDb)
     }
 
+    override fun showAddMenu() {
+        _showAddMenuState.value = true
+    }
+
+    override fun hideAddMenu() {
+        _showAddMenuState.value = false
+    }
+
     private suspend fun importMarkdownNotes(externalFiles: List<ExternalFile>, now: Instant) {
         externalFiles.filter { file -> file.extension == "md" }
             .map { file -> file.fullPath }