Add Manga Notes

app/build.gradle.kts

@@ -254,6 +254,7 @@ dependencies {
     }
     implementation(libs.insetter)
     implementation(libs.bundles.richtext)
+    implementation(libs.richeditor.compose)
     implementation(libs.aboutLibraries.compose)
     implementation(libs.bundles.voyager)
     implementation(libs.compose.materialmotion)

app/src/main/java/eu/kanade/domain/DomainModule.kt

@@ -79,6 +79,7 @@ import tachiyomi.domain.manga.interactor.GetMangaWithChapters
 import tachiyomi.domain.manga.interactor.NetworkToLocalManga
 import tachiyomi.domain.manga.interactor.ResetViewerFlags
 import tachiyomi.domain.manga.interactor.SetMangaChapterFlags
+import tachiyomi.domain.manga.interactor.SetMangaNotes
 import tachiyomi.domain.manga.repository.MangaRepository
 import tachiyomi.domain.release.interactor.GetApplicationRelease
 import tachiyomi.domain.release.service.ReleaseService
@@ -124,6 +125,7 @@ class DomainModule : InjektModule {
         addFactory { GetUpcomingManga(get()) }
         addFactory { ResetViewerFlags(get()) }
         addFactory { SetMangaChapterFlags(get()) }
+        addFactory { SetMangaNotes(get()) }
         addFactory { FetchInterval(get()) }
         addFactory { SetMangaDefaultChapterFlags(get(), get(), get()) }
         addFactory { SetMangaViewerFlags(get()) }

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

@@ -0,0 +1,57 @@
+package eu.kanade.presentation.manga
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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.MangaNotesScreen
+import tachiyomi.i18n.MR
+import tachiyomi.presentation.core.components.material.Scaffold
+import tachiyomi.presentation.core.components.material.padding
+import tachiyomi.presentation.core.i18n.stringResource
+
+@Composable
+fun MangaNotesScreen(
+    state: MangaNotesScreen.State,
+    navigateUp: () -> Unit,
+    onSave: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Scaffold(
+        topBar = { scrollBehavior ->
+            AppBar(
+                titleContent = {
+                    AppBarTitle(title = stringResource(MR.strings.action_notes), subtitle = state.manga.title)
+                },
+                navigateUp = navigateUp,
+                scrollBehavior = scrollBehavior,
+            )
+        },
+        modifier = modifier
+            .imePadding(),
+    ) { paddingValues ->
+        MangaNotesTextArea(
+            state = state,
+            onSave = onSave,
+            modifier = Modifier
+                .padding(
+                    top = paddingValues.calculateTopPadding() + MaterialTheme.padding.small,
+                    bottom = MaterialTheme.padding.small,
+                )
+                .padding(horizontal = MaterialTheme.padding.small)
+                .windowInsetsPadding(
+                    WindowInsets.navigationBars
+                        .only(WindowInsetsSides.Bottom),
+                ),
+        )
+    }
+}

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

@@ -112,6 +112,7 @@ fun MangaScreen(
     onEditCategoryClicked: (() -> Unit)?,
     onEditFetchIntervalClicked: (() -> Unit)?,
     onMigrateClicked: (() -> Unit)?,
+    onNotesClicked: () -> Unit,
 
     // For bottom action menu
     onMultiBookmarkClicked: (List<Chapter>, bookmarked: Boolean) -> Unit,
@@ -160,6 +161,7 @@ fun MangaScreen(
             onEditCategoryClicked = onEditCategoryClicked,
             onEditIntervalClicked = onEditFetchIntervalClicked,
             onMigrateClicked = onMigrateClicked,
+            onNotesClicked = onNotesClicked,
             onMultiBookmarkClicked = onMultiBookmarkClicked,
             onMultiMarkAsReadClicked = onMultiMarkAsReadClicked,
             onMarkPreviousAsReadClicked = onMarkPreviousAsReadClicked,
@@ -195,6 +197,7 @@ fun MangaScreen(
             onEditCategoryClicked = onEditCategoryClicked,
             onEditIntervalClicked = onEditFetchIntervalClicked,
             onMigrateClicked = onMigrateClicked,
+            onNotesClicked = onNotesClicked,
             onMultiBookmarkClicked = onMultiBookmarkClicked,
             onMultiMarkAsReadClicked = onMultiMarkAsReadClicked,
             onMarkPreviousAsReadClicked = onMarkPreviousAsReadClicked,
@@ -240,6 +243,7 @@ private fun MangaScreenSmallImpl(
     onEditCategoryClicked: (() -> Unit)?,
     onEditIntervalClicked: (() -> Unit)?,
     onMigrateClicked: (() -> Unit)?,
+    onNotesClicked: () -> Unit,
 
     // For bottom action menu
     onMultiBookmarkClicked: (List<Chapter>, bookmarked: Boolean) -> Unit,
@@ -305,6 +309,7 @@ private fun MangaScreenSmallImpl(
                 onClickEditCategory = onEditCategoryClicked,
                 onClickRefresh = onRefresh,
                 onClickMigrate = onMigrateClicked,
+                onClickNotes = onNotesClicked,
                 actionModeCounter = selectedChapterCount,
                 onSelectAll = { onAllChapterSelected(true) },
                 onInvertSelection = { onInvertSelection() },
@@ -414,8 +419,10 @@ private fun MangaScreenSmallImpl(
                             defaultExpandState = state.isFromSource,
                             description = state.manga.description,
                             tagsProvider = { state.manga.genre },
+                            noteContent = state.manga.notes,
                             onTagSearch = onTagSearch,
                             onCopyTagToClipboard = onCopyTagToClipboard,
+                            onClickNotes = onNotesClicked,
                         )
                     }
 
@@ -484,6 +491,7 @@ fun MangaScreenLargeImpl(
     onEditCategoryClicked: (() -> Unit)?,
     onEditIntervalClicked: (() -> Unit)?,
     onMigrateClicked: (() -> Unit)?,
+    onNotesClicked: () -> Unit,
 
     // For bottom action menu
     onMultiBookmarkClicked: (List<Chapter>, bookmarked: Boolean) -> Unit,
@@ -542,6 +550,7 @@ fun MangaScreenLargeImpl(
                 onClickEditCategory = onEditCategoryClicked,
                 onClickRefresh = onRefresh,
                 onClickMigrate = onMigrateClicked,
+                onClickNotes = onNotesClicked,
                 actionModeCounter = selectedChapterCount,
                 onSelectAll = { onAllChapterSelected(true) },
                 onInvertSelection = { onInvertSelection() },
@@ -640,8 +649,10 @@ fun MangaScreenLargeImpl(
                             defaultExpandState = true,
                             description = state.manga.description,
                             tagsProvider = { state.manga.genre },
+                            noteContent = state.manga.notes,
                             onTagSearch = onTagSearch,
                             onCopyTagToClipboard = onCopyTagToClipboard,
+                            onClickNotes = onNotesClicked,
                         )
                     }
                 },

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

@@ -236,8 +236,10 @@ fun ExpandableMangaDescription(
     defaultExpandState: Boolean,
     description: String?,
     tagsProvider: () -> List<String>?,
+    noteContent: String,
     onTagSearch: (String) -> Unit,
     onCopyTagToClipboard: (tag: String) -> Unit,
+    onClickNotes: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Column(modifier = modifier) {
@@ -255,6 +257,8 @@ fun ExpandableMangaDescription(
             expandedDescription = desc,
             shrunkDescription = trimmedDescription,
             expanded = expanded,
+            noteContent = noteContent,
+            onNotesEditClicked = onClickNotes,
             modifier = Modifier
                 .padding(top = 8.dp)
                 .padding(horizontal = 16.dp)
@@ -559,7 +563,9 @@ private fun ColumnScope.MangaContentInfo(
 private fun MangaSummary(
     expandedDescription: String,
     shrunkDescription: String,
+    noteContent: String,
     expanded: Boolean,
+    onNotesEditClicked: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     val animProgress by animateFloatAsState(
@@ -571,27 +577,43 @@ private fun MangaSummary(
         contents = listOf(
             {
                 Text(
-                    text = "\n\n", // Shows at least 3 lines
+                    // Shows at least 3 lines if no notes
+                    // when there are notes show 6
+                    text = if (noteContent.isBlank()) "\n\n" else "\n\n\n\n\n",
                     style = MaterialTheme.typography.bodyMedium,
                 )
             },
             {
-                Text(
-                    text = expandedDescription,
-                    style = MaterialTheme.typography.bodyMedium,
-                )
-            },
-            {
-                SelectionContainer {
+                Column {
+                    MangaNotesSection(
+                        content = noteContent,
+                        expanded = true,
+                        onClickNotes = onNotesEditClicked,
+                    )
                     Text(
-                        text = if (expanded) expandedDescription else shrunkDescription,
-                        maxLines = Int.MAX_VALUE,
+                        text = expandedDescription,
                         style = MaterialTheme.typography.bodyMedium,
-                        color = MaterialTheme.colorScheme.onBackground,
-                        modifier = Modifier.secondaryItemAlpha(),
                     )
                 }
             },
+            {
+                Column {
+                    MangaNotesSection(
+                        content = noteContent,
+                        expanded = expanded,
+                        onClickNotes = onNotesEditClicked,
+                    )
+                    SelectionContainer {
+                        Text(
+                            text = if (expanded) expandedDescription else shrunkDescription,
+                            maxLines = Int.MAX_VALUE,
+                            style = MaterialTheme.typography.bodyMedium,
+                            color = MaterialTheme.colorScheme.onBackground,
+                            modifier = Modifier.secondaryItemAlpha(),
+                        )
+                    }
+                }
+            },
             {
                 val colors = listOf(Color.Transparent, MaterialTheme.colorScheme.background)
                 Box(

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

@@ -0,0 +1,59 @@
+package eu.kanade.presentation.manga.components
+
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.text.selection.SelectionContainer
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import com.mohamedrejeb.richeditor.model.rememberRichTextState
+import com.mohamedrejeb.richeditor.ui.material3.RichText
+
+private val FADE_TIME = tween<Float>(500)
+
+@Composable
+fun MangaNotesDisplay(
+    content: String,
+    modifier: Modifier,
+) {
+    val alpha = remember { Animatable(1f) }
+    var contentUpdatedOnce by remember { mutableStateOf(false) }
+
+    val richTextState = rememberRichTextState()
+    val primaryColor = MaterialTheme.colorScheme.primary
+    LaunchedEffect(content) {
+        richTextState.setMarkdown(markdown = content)
+
+        if (!contentUpdatedOnce) {
+            contentUpdatedOnce = true
+            return@LaunchedEffect
+        }
+
+        alpha.snapTo(targetValue = 0f)
+        alpha.animateTo(targetValue = 1f, animationSpec = FADE_TIME)
+    }
+    LaunchedEffect(Unit) {
+        richTextState.config.listIndent = 10
+    }
+    LaunchedEffect(primaryColor) {
+        richTextState.config.linkColor = primaryColor
+    }
+
+    SelectionContainer {
+        RichText(
+            modifier = modifier
+                // Only animate size if the notes changes
+                .then(if (contentUpdatedOnce) Modifier.animateContentSize() else Modifier)
+                .alpha(alpha.value),
+            style = MaterialTheme.typography.bodyMedium,
+            state = richTextState,
+        )
+    }
+}