Transition for folders (Writeopia#377)

leandroBorgesFerreira · CI Bot · Leandro Ferreira · web-flow · commit 74bcfd0b190a · 2025-04-17T19:03:22.000+02:00
* Transition for folders

* Update DesktopNotesMenu.kt

* Update DesktopNotesMenu.kt

* fixing compilation of web

---------

Co-authored-by: CI Bot &lt;ci-bot@bol.com&gt;
Co-authored-by: Leandro Ferreira &lt;email@email.com&gt;
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(
+    folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController?,
     navigationController: NavController,
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
@@ -69,6 +69,7 @@ fun NavGraphBuilder.notesMenuNavigation(
         val ollamaConfigController = ollamaConfigInjector?.provideOllamaConfigController()
 
         NotesMenuScreen(
+            folderId = notesNavigation.id,
             chooseNoteViewModel = chooseNoteViewModel,
             ollamaConfigController = ollamaConfigController,
             navigationController = navigationController,
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
diff --git a/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/documents/NoteItems.kt b/application/features/note_menu/src/commonMain/kotlin/io/writeopia/notemenu/ui/screen/documents/NoteItems.kt
@@ -252,6 +252,8 @@ private fun LazyStaggeredGridNotes(
                     is MenuItemUi.FolderUi -> {
                         FolderItem(
                             menuItem,
+                            sharedTransitionScope = sharedTransitionScope,
+                            animatedVisibilityScope = animatedVisibilityScope,
                             folderClick = folderClick,
                             position = i,
                             selectionListener = selectionListener,
@@ -328,6 +330,8 @@ private fun LazyGridNotes(
                     is MenuItemUi.FolderUi -> {
                         FolderItem(
                             menuItem,
+                            sharedTransitionScope = sharedTransitionScope,
+                            animatedVisibilityScope = animatedVisibilityScope,
                             folderClick = folderClick,
                             moveRequest = moveRequest,
                             selectionListener = selectionListener,
@@ -398,7 +402,9 @@ private fun LazyColumnNotes(
                     is MenuItemUi.FolderUi -> {
                         FolderItem(
                             menuItem,
-                            folderClick,
+                            sharedTransitionScope = sharedTransitionScope,
+                            animatedVisibilityScope = animatedVisibilityScope,
+                            folderClick = folderClick,
                             selectionListener = selectionListener,
                             moveRequest = moveRequest,
                             changeIcon = { id, icon, tint ->
@@ -414,9 +420,12 @@ private fun LazyColumnNotes(
     )
 }
 
+@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 private fun FolderItem(
     folderUi: MenuItemUi.FolderUi,
+    sharedTransitionScope: SharedTransitionScope,
+    animatedVisibilityScope: AnimatedVisibilityScope,
     folderClick: (String) -> Unit,
     position: Int,
     moveRequest: (MenuItemUi, String) -> Unit,
@@ -425,108 +434,123 @@ private fun FolderItem(
     onDragIconClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Box(shadowModifier()) {
-        DropTarget { inBound, data ->
-            val menuItemUI = data?.info as? MenuItemUi
-            if (inBound && menuItemUI != null) {
-                LaunchedEffect(menuItemUI) {
-                    moveRequest(menuItemUI, folderUi.documentId)
-                }
-            }
-
-            val bgColor =
-                when {
-                    inBound && menuItemUI?.id != folderUi.id -> WriteopiaTheme.colorScheme.highlight
-                    folderUi.selected -> WriteopiaTheme.colorScheme.selectedBg
-                    else -> WriteopiaTheme.colorScheme.cardBg
+    sharedTransitionScope.run {
+        Box(
+            shadowModifier().sharedBounds(
+                rememberSharedContentState(key = "folderTransition${folderUi.documentId}"),
+                animatedVisibilityScope = animatedVisibilityScope,
+                resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds
+            )
+        ) {
+            DropTarget { inBound, data ->
+                val menuItemUI = data?.info as? MenuItemUi
+                if (inBound && menuItemUI != null) {
+                    LaunchedEffect(menuItemUI) {
+                        moveRequest(menuItemUI, folderUi.documentId)
+                    }
                 }
 
-            val textColor = WriteopiaTheme.colorScheme.textLight
+                val bgColor =
+                    when {
+                        inBound && menuItemUI?.id != folderUi.id -> WriteopiaTheme.colorScheme.highlight
+                        folderUi.selected -> WriteopiaTheme.colorScheme.selectedBg
+                        else -> WriteopiaTheme.colorScheme.cardBg
+                    }
 
-            SwipeBox(
-                modifier = modifier
-                    .fillMaxWidth()
-                    .background(WriteopiaTheme.colorScheme.cardPlaceHolderBackground)
-                    .clip(MaterialTheme.shapes.large)
-                    .clickable {
-                        folderClick(folderUi.documentId)
+                val textColor = WriteopiaTheme.colorScheme.textLight
+
+                SwipeBox(
+                    modifier = modifier
+                        .fillMaxWidth()
+                        .background(WriteopiaTheme.colorScheme.cardPlaceHolderBackground)
+                        .clip(MaterialTheme.shapes.large)
+                        .clickable {
+                            folderClick(folderUi.documentId)
+                        },
+                    isOnEditState = folderUi.selected,
+                    swipeListener = { state ->
+                        selectionListener(folderUi.documentId, state)
                     },
-                isOnEditState = folderUi.selected,
-                swipeListener = { state ->
-                    selectionListener(folderUi.documentId, state)
-                },
-                cornersShape = MaterialTheme.shapes.large,
-                defaultColor = WriteopiaTheme.colorScheme.cardBg,
-                activeColor = bgColor,
-                activeBorderColor = MaterialTheme.colorScheme.primary
-            ) {
-                DragCardTarget(
-                    modifier = modifier.clip(MaterialTheme.shapes.large),
-                    position = position,
-                    dataToDrop = DropInfo(folderUi, position),
-                    iconTintOnHover = MaterialTheme.colorScheme.onBackground,
-                    onIconClick = onDragIconClick,
+                    cornersShape = MaterialTheme.shapes.large,
+                    defaultColor = WriteopiaTheme.colorScheme.cardBg,
+                    activeColor = bgColor,
+                    activeBorderColor = MaterialTheme.colorScheme.primary
                 ) {
-                    Column(
-                        modifier = Modifier
-                            .background(color = bgColor, shape = MaterialTheme.shapes.large)
-                            .fillMaxWidth()
-                            .padding(bottom = 26.dp, top = 10.dp)
-                            .align(Alignment.Center),
-                        horizontalAlignment = Alignment.CenterHorizontally
+                    DragCardTarget(
+                        modifier = modifier.clip(MaterialTheme.shapes.large),
+                        position = position,
+                        dataToDrop = DropInfo(folderUi, position),
+                        iconTintOnHover = MaterialTheme.colorScheme.onBackground,
+                        onIconClick = onDragIconClick,
                     ) {
-                        var showIconsOptions by remember { mutableStateOf(false) }
-                        val tint = folderUi.icon?.tint?.let(::Color)
-                            ?: MaterialTheme.colorScheme.primary
-
-                        Icon(
+                        Column(
                             modifier = Modifier
-                                .padding(6.dp)
-                                .clip(MaterialTheme.shapes.large)
-                                .clickable { showIconsOptions = !showIconsOptions }
-                                .size(56.dp)
-                                .padding(6.dp),
-                            imageVector = folderUi.icon?.label?.let(WrIcons::fromName) ?: folder,
-                            contentDescription = "Folder",
-                            tint = tint
-                        )
-
-                        DropdownMenu(
-                            expanded = showIconsOptions,
-                            onDismissRequest = { showIconsOptions = false },
-                            modifier = Modifier.background(WriteopiaTheme.colorScheme.cardBg),
+                                .background(color = bgColor, shape = MaterialTheme.shapes.large)
+                                .fillMaxWidth()
+                                .padding(bottom = 26.dp, top = 10.dp)
+                                .align(Alignment.Center),
+                            horizontalAlignment = Alignment.CenterHorizontally
                         ) {
-                            IconsPicker(
-                                iconSelect = { icon, tint -> changeIcon(folderUi.id, icon, tint) }
+                            var showIconsOptions by remember { mutableStateOf(false) }
+                            val tint = folderUi.icon?.tint?.let(::Color)
+                                ?: MaterialTheme.colorScheme.primary
+
+                            Icon(
+                                modifier = Modifier
+                                    .padding(6.dp)
+                                    .clip(MaterialTheme.shapes.large)
+                                    .clickable { showIconsOptions = !showIconsOptions }
+                                    .size(56.dp)
+                                    .padding(6.dp),
+                                imageVector = folderUi.icon?.label?.let(WrIcons::fromName)
+                                    ?: folder,
+                                contentDescription = "Folder",
+                                tint = tint
                             )
-                        }
 
-                        Text(
-                            modifier = Modifier.padding(horizontal = 12.dp),
-                            text = folderUi.title,
-                            color = textColor,
-                            fontWeight = FontWeight.Bold,
-                            maxLines = 1,
-                            overflow = TextOverflow.Ellipsis
-                        )
+                            DropdownMenu(
+                                expanded = showIconsOptions,
+                                onDismissRequest = { showIconsOptions = false },
+                                modifier = Modifier.background(WriteopiaTheme.colorScheme.cardBg),
+                            ) {
+                                IconsPicker(
+                                    iconSelect = { icon, tint ->
+                                        changeIcon(
+                                            folderUi.id,
+                                            icon,
+                                            tint
+                                        )
+                                    }
+                                )
+                            }
 
-                        Spacer(modifier = Modifier.height(4.dp))
+                            Text(
+                                modifier = Modifier.padding(horizontal = 12.dp),
+                                text = folderUi.title,
+                                color = textColor,
+                                fontWeight = FontWeight.Bold,
+                                maxLines = 1,
+                                overflow = TextOverflow.Ellipsis
+                            )
 
-                        Text(
-                            text = "${folderUi.itemsCount} items",
-                            color = textColor,
-                            style = MaterialTheme.typography.bodySmall
-                        )
+                            Spacer(modifier = Modifier.height(4.dp))
+
+                            Text(
+                                text = "${folderUi.itemsCount} items",
+                                color = textColor,
+                                style = MaterialTheme.typography.bodySmall
+                            )
+                        }
                     }
-                }
 
-                if (folderUi.isFavorite) {
-                    Icon(
-                        modifier = Modifier.align(Alignment.TopEnd).size(40.dp).padding(12.dp),
-                        imageVector = WrIcons.favorites,
-                        contentDescription = "Favorite",
-                        tint = MaterialTheme.colorScheme.onBackground
-                    )
+                    if (folderUi.isFavorite) {
+                        Icon(
+                            modifier = Modifier.align(Alignment.TopEnd).size(40.dp).padding(12.dp),
+                            imageVector = WrIcons.favorites,
+                            contentDescription = "Favorite",
+                            tint = MaterialTheme.colorScheme.onBackground
+                        )
+                    }
                 }
             }
         }
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(
+    folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController? = null,
     navigationController: NavController,
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(
+    folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController?,
     navigationController: NavController,
@@ -31,6 +32,7 @@ actual fun NotesMenuScreen(
     modifier: Modifier
 ) {
     DesktopNotesMenu(
+        folderId = folderId,
         chooseNoteViewModel = chooseNoteViewModel,
         sharedTransitionScope = sharedTransitionScope,
         animatedVisibilityScope = animatedVisibilityScope,
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(
+    folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController?,
     navigationController: NavController,
@@ -63,6 +64,7 @@ actual fun NotesMenuScreen(
     )
 
     DesktopNotesMenu(
+        folderId = folderId,
         chooseNoteViewModel = chooseNoteViewModel,
         ollamaConfigController = ollamaConfigController,
         sharedTransitionScope = sharedTransitionScope,
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(
+    folderId: String,
     chooseNoteViewModel: ChooseNoteViewModel,
     ollamaConfigController: OllamaConfigController?,
     navigationController: NavController,
