Design revision 2

app/src/main/java/eu/kanade/presentation/manga/MangaNotesScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.EditNote
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -31,12 +32,14 @@ import eu.kanade.presentation.components.AppBar
 import eu.kanade.presentation.components.AppBarTitle
 import eu.kanade.presentation.manga.components.MangaNotesTextArea
 import eu.kanade.tachiyomi.ui.manga.notes.MangaNotesScreenState
+import kotlinx.collections.immutable.persistentListOf
 import tachiyomi.i18n.MR
 import tachiyomi.presentation.core.components.material.ExtendedFloatingActionButton
 import tachiyomi.presentation.core.components.material.Scaffold
 import tachiyomi.presentation.core.components.material.padding
 import tachiyomi.presentation.core.i18n.stringResource
 import tachiyomi.presentation.core.screens.EmptyScreen
+import tachiyomi.presentation.core.screens.EmptyScreenAction
 
 @Composable
 fun MangaNotesScreen(
@@ -116,6 +119,13 @@ fun MangaNotesScreen(
             EmptyScreen(
                 stringRes = MR.strings.information_no_notes,
                 modifier = Modifier.padding(paddingValues),
+                actions = persistentListOf(
+                    EmptyScreenAction(
+                        MR.strings.action_add_notes,
+                        Icons.Filled.EditNote,
+                        beginEditing,
+                    ),
+                ),
             )
         }
 

app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt

@@ -5,7 +5,6 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -26,7 +25,6 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.material3.Icon
 import androidx.compose.material3.SnackbarHost
@@ -46,7 +44,6 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.platform.LocalLayoutDirection
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.fastAll
 import androidx.compose.ui.util.fastAny
 import androidx.compose.ui.util.fastMap
@@ -338,47 +335,29 @@ private fun MangaScreenSmallImpl(
         },
         snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
         floatingActionButton = {
-            Column(
+            val isFABVisible = remember(chapters) {
-                horizontalAlignment = Alignment.End,
+                chapters.fastAny { !it.chapter.read } && !isAnySelected
-                verticalArrangement = Arrangement.spacedBy(4.dp),
+            }
+            AnimatedVisibility(
+                visible = isFABVisible,
+                enter = fadeIn(),
+                exit = fadeOut(),
             ) {
-                AnimatedVisibility(
+                ExtendedFloatingActionButton(
-                    visible = !isAnySelected,
+                    text = {
-                    enter = fadeIn(),
+                        val isReading = remember(state.chapters) {
-                    exit = fadeOut(),
+                            state.chapters.fastAny { it.chapter.read }
-                ) {
+                        }
-                    ExtendedFloatingActionButton(
+                        Text(
-                        text = { Text(stringResource(MR.strings.action_notes)) },
+                            text = stringResource(
-                        icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = null) },
+                                if (isReading) MR.strings.action_resume else MR.strings.action_start,
-                        onClick = onNotesEditClicked,
+                            ),
-                        expanded = chapterListState.shouldExpandFAB(),
+                        )
-                    )
+                    },
-                }
+                    icon = { Icon(imageVector = Icons.Filled.PlayArrow, contentDescription = null) },
-
+                    onClick = onContinueReading,
-                val isFABVisible = remember(chapters) {
+                    expanded = chapterListState.shouldExpandFAB(),
-                    chapters.fastAny { !it.chapter.read } && !isAnySelected
+                )
-                }
-                AnimatedVisibility(
-                    visible = isFABVisible,
-                    enter = fadeIn(),
-                    exit = fadeOut(),
-                ) {
-                    ExtendedFloatingActionButton(
-                        text = {
-                            val isReading = remember(state.chapters) {
-                                state.chapters.fastAny { it.chapter.read }
-                            }
-                            Text(
-                                text = stringResource(
-                                    if (isReading) MR.strings.action_resume else MR.strings.action_start,
-                                ),
-                            )
-                        },
-                        icon = { Icon(imageVector = Icons.Filled.PlayArrow, contentDescription = null) },
-                        onClick = onContinueReading,
-                        expanded = chapterListState.shouldExpandFAB(),
-                    )
-                }
             }
         },
     ) { contentPadding ->
@@ -613,39 +592,21 @@ fun MangaScreenLargeImpl(
                 enter = fadeIn(),
                 exit = fadeOut(),
             ) {
-                Column(
+                ExtendedFloatingActionButton(
-                    horizontalAlignment = Alignment.End,
+                    text = {
-                    verticalArrangement = Arrangement.spacedBy(4.dp),
+                        val isReading = remember(state.chapters) {
-                ) {
+                            state.chapters.fastAny { it.chapter.read }
-                    AnimatedVisibility(
+                        }
-                        visible = !isAnySelected,
+                        Text(
-                        enter = fadeIn(),
+                            text = stringResource(
-                        exit = fadeOut(),
+                                if (isReading) MR.strings.action_resume else MR.strings.action_start,
-                    ) {
+                            ),
-                        ExtendedFloatingActionButton(
-                            text = { Text(stringResource(MR.strings.action_notes)) },
-                            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = null) },
-                            onClick = onNotesEditClicked,
-                            expanded = chapterListState.shouldExpandFAB(),
                         )
-                    }
+                    },
-
+                    icon = { Icon(imageVector = Icons.Filled.PlayArrow, contentDescription = null) },
-                    ExtendedFloatingActionButton(
+                    onClick = onContinueReading,
-                        text = {
+                    expanded = chapterListState.shouldExpandFAB(),
-                            val isReading = remember(state.chapters) {
+                )
-                                state.chapters.fastAny { it.chapter.read }
-                            }
-                            Text(
-                                text = stringResource(
-                                    if (isReading) MR.strings.action_resume else MR.strings.action_start,
-                                ),
-                            )
-                        },
-                        icon = { Icon(imageVector = Icons.Filled.PlayArrow, contentDescription = null) },
-                        onClick = onContinueReading,
-                        expanded = chapterListState.shouldExpandFAB(),
-                    )
-                }
             }
         },
     ) { contentPadding ->

app/src/main/java/eu/kanade/presentation/manga/components/MangaInfoHeader.kt

@@ -597,13 +597,14 @@ private fun MangaSummary(
                 }
             },
             {
-                SelectionContainer {
+
-                    Column {
+                Column {
-                        MangaNotesSection(
+                    MangaNotesSection(
-                            content = noteContent,
+                        content = noteContent,
-                            expanded = expanded,
+                        expanded = expanded,
-                            onClickNotes = onNotesEditClicked,
+                        onClickNotes = onNotesEditClicked,
-                        )
+                    )
+                    SelectionContainer {
                         Text(
                             text = if (expanded) expandedDescription else shrunkDescription,
                             maxLines = Int.MAX_VALUE,

app/src/main/java/eu/kanade/presentation/manga/components/MangaNotesSection.kt

@@ -1,7 +1,12 @@
 package eu.kanade.presentation.manga.components
 
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.core.spring
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -9,8 +14,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Edit
+import androidx.compose.material.icons.filled.EditNote
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -39,49 +45,12 @@ fun MangaNotesSection(
     onClickNotes: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Column(modifier.fillMaxWidth()) {
+    Column(
-        Column(
+        modifier = modifier.fillMaxWidth(),
-            horizontalAlignment = Alignment.CenterHorizontally,
+        horizontalAlignment = Alignment.CenterHorizontally,
-            modifier = Modifier
+    ) {
-                .fillMaxWidth(),
+        if (!content.isNullOrBlank()) {
-        ) {
+            SelectionContainer {
-            if (!content.isNullOrBlank()) {
-                Column(
-                    modifier = Modifier
-                        .animateContentSize(
-                            animationSpec = spring(),
-                            alignment = Alignment.Center,
-                        ),
-                ) {
-                    if (expanded) {
-                        Button(
-                            onClick = onClickNotes,
-                            colors = ButtonDefaults.buttonColors(
-                                containerColor = Color.Transparent,
-                                contentColor = MaterialTheme.colorScheme.primary,
-                            ),
-                            shape = RoundedCornerShape(8.dp),
-                            modifier = Modifier
-                                .padding(horizontal = 16.dp, vertical = 4.dp),
-                        ) {
-                            Row(
-                                horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.extraSmall),
-                                verticalAlignment = Alignment.CenterVertically,
-                            ) {
-                                Icon(
-                                    imageVector = Icons.Outlined.Edit,
-                                    contentDescription = null,
-                                    modifier = Modifier
-                                        .size(16.dp),
-                                )
-                                Text(
-                                    stringResource(MR.strings.action_edit_notes),
-                                )
-                            }
-                        }
-                    }
-                }
-
                 RichText(
                     modifier = Modifier
                         .fillMaxWidth(),
@@ -93,10 +62,52 @@ fun MangaNotesSection(
                 ) {
                     Markdown(content = content)
                 }
+            }
 
+            AnimatedVisibility(
+                visible = expanded,
+                enter = fadeIn(animationSpec = spring()) + expandVertically(animationSpec = spring()),
+                exit = fadeOut(animationSpec = spring()) + shrinkVertically(animationSpec = spring()),
+            ) {
+                Button(
+                    onClick = onClickNotes,
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = Color.Transparent,
+                        contentColor = MaterialTheme.colorScheme.primary,
+                    ),
+                    shape = RoundedCornerShape(8.dp),
+                    modifier = Modifier
+                        .padding(horizontal = 16.dp, vertical = 4.dp),
+                ) {
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.extraSmall),
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        Icon(
+                            imageVector = Icons.Filled.EditNote,
+                            contentDescription = null,
+                            modifier = Modifier
+                                .size(16.dp),
+                        )
+                        Text(
+                            stringResource(MR.strings.action_edit_notes),
+                        )
+                    }
+                }
+            }
+
+            Column(
+                modifier = Modifier
+                    .animateContentSize(
+                        animationSpec = spring(),
+                    ),
+            ) {
                 HorizontalDivider(
                     modifier = Modifier
-                        .padding(vertical = 16.dp),
+                        .padding(
+                            top = if (expanded) 0.dp else 12.dp,
+                            bottom = if (expanded) 16.dp else 12.dp,
+                        ),
                 )
             }
         }