Touch up manga grid/list items (#8307)

* Touch up library item touch indicator

Now the touch indicator has the same coverage as the selection indicator.
Experimental Modifier.Node API is used to draw the selection indicator

* Unify library and browse source list item layouts

app/src/main/java/eu/kanade/presentation/browse/components/BrowseSourceComfortableGrid.kt

@@ -1,28 +1,22 @@
 package eu.kanade.presentation.browse.components
 
-import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.paging.LoadState
 import androidx.paging.compose.LazyPagingItems
 import eu.kanade.domain.manga.model.Manga
+import eu.kanade.domain.manga.model.MangaCover
 import eu.kanade.presentation.components.Badge
-import eu.kanade.presentation.components.MangaCover
-import eu.kanade.presentation.library.components.MangaGridComfortableText
-import eu.kanade.presentation.library.components.MangaGridCover
+import eu.kanade.presentation.components.CommonMangaItemDefaults
+import eu.kanade.presentation.components.MangaComfortableGridItem
 import eu.kanade.presentation.util.plus
 import eu.kanade.tachiyomi.R
 
@@ -37,9 +31,9 @@ fun BrowseSourceComfortableGrid(
 ) {
     LazyVerticalGrid(
         columns = columns,
-        contentPadding = PaddingValues(8.dp, 4.dp) + contentPadding,
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
-        verticalArrangement = Arrangement.spacedBy(8.dp),
+        contentPadding = contentPadding + PaddingValues(8.dp),
+        verticalArrangement = Arrangement.spacedBy(CommonMangaItemDefaults.GridVerticalSpacer),
+        horizontalArrangement = Arrangement.spacedBy(CommonMangaItemDefaults.GridHorizontalSpacer),
     ) {
         if (mangaList.loadState.prepend is LoadState.Loading) {
             item(span = { GridItemSpan(maxLineSpan) }) {
@@ -71,36 +65,22 @@ fun BrowseSourceComfortableGridItem(
     onClick: () -> Unit = {},
     onLongClick: () -> Unit = onClick,
 ) {
-    val overlayColor = MaterialTheme.colorScheme.background.copy(alpha = 0.66f)
-    Column(
-        modifier = Modifier
-            .combinedClickable(
-                onClick = onClick,
-                onLongClick = onLongClick,
-            ),
-    ) {
-        MangaGridCover(
-            cover = {
-                MangaCover.Book(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .drawWithContent {
-                            drawContent()
-                            if (manga.favorite) {
-                                drawRect(overlayColor)
-                            }
-                        },
-                    data = manga.thumbnailUrl,
-                )
-            },
-            badgesStart = {
-                if (manga.favorite) {
-                    Badge(text = stringResource(R.string.in_library))
-                }
-            },
-        )
-        MangaGridComfortableText(
-            text = manga.title,
-        )
-    }
+    MangaComfortableGridItem(
+        title = manga.title,
+        coverData = MangaCover(
+            mangaId = manga.id,
+            sourceId = manga.source,
+            isMangaFavorite = manga.favorite,
+            url = manga.thumbnailUrl,
+            lastModified = manga.coverLastModified,
+        ),
+        coverAlpha = if (manga.favorite) CommonMangaItemDefaults.BrowseFavoriteCoverAlpha else 1f,
+        coverBadgeStart = {
+            if (manga.favorite) {
+                Badge(text = stringResource(R.string.in_library))
+            }
+        },
+        onLongClick = onLongClick,
+        onClick = onClick,
+    )
 }

app/src/main/java/eu/kanade/presentation/browse/components/BrowseSourceCompactGrid.kt

@@ -1,35 +1,22 @@
 package eu.kanade.presentation.browse.components
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.drawWithContent
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.paging.LoadState
 import androidx.paging.compose.LazyPagingItems
 import eu.kanade.domain.manga.model.Manga
+import eu.kanade.domain.manga.model.MangaCover
 import eu.kanade.presentation.components.Badge
-import eu.kanade.presentation.components.MangaCover
-import eu.kanade.presentation.library.components.MangaGridCompactText
-import eu.kanade.presentation.library.components.MangaGridCover
+import eu.kanade.presentation.components.CommonMangaItemDefaults
+import eu.kanade.presentation.components.MangaCompactGridItem
 import eu.kanade.presentation.util.plus
 import eu.kanade.tachiyomi.R
 
@@ -44,12 +31,12 @@ fun BrowseSourceCompactGrid(
 ) {
     LazyVerticalGrid(
         columns = columns,
-        contentPadding = PaddingValues(8.dp, 4.dp) + contentPadding,
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
-        verticalArrangement = Arrangement.spacedBy(8.dp),
+        contentPadding = contentPadding + PaddingValues(8.dp),
+        verticalArrangement = Arrangement.spacedBy(CommonMangaItemDefaults.GridVerticalSpacer),
+        horizontalArrangement = Arrangement.spacedBy(CommonMangaItemDefaults.GridHorizontalSpacer),
     ) {
-        item(span = { GridItemSpan(maxLineSpan) }) {
-            if (mangaList.loadState.prepend is LoadState.Loading) {
+        if (mangaList.loadState.prepend is LoadState.Loading) {
+            item(span = { GridItemSpan(maxLineSpan) }) {
                 BrowseSourceLoadingItem()
             }
         }
@@ -64,8 +51,8 @@ fun BrowseSourceCompactGrid(
             )
         }
 
-        item(span = { GridItemSpan(maxLineSpan) }) {
-            if (mangaList.loadState.refresh is LoadState.Loading || mangaList.loadState.append is LoadState.Loading) {
+        if (mangaList.loadState.refresh is LoadState.Loading || mangaList.loadState.append is LoadState.Loading) {
+            item(span = { GridItemSpan(maxLineSpan) }) {
                 BrowseSourceLoadingItem()
             }
         }
@@ -73,57 +60,27 @@ fun BrowseSourceCompactGrid(
 }
 
 @Composable
-fun BrowseSourceCompactGridItem(
+private fun BrowseSourceCompactGridItem(
     manga: Manga,
     onClick: () -> Unit = {},
     onLongClick: () -> Unit = onClick,
 ) {
-    val overlayColor = MaterialTheme.colorScheme.background.copy(alpha = 0.66f)
-    MangaGridCover(
-        modifier = Modifier
-            .combinedClickable(
-                onClick = onClick,
-                onLongClick = onLongClick,
-            ),
-        cover = {
-            MangaCover.Book(
-                modifier = Modifier
-                    .fillMaxHeight()
-                    .drawWithContent {
-                        drawContent()
-                        if (manga.favorite) {
-                            drawRect(overlayColor)
-                        }
-                    },
-                data = eu.kanade.domain.manga.model.MangaCover(
-                    manga.id,
-                    manga.source,
-                    manga.favorite,
-                    manga.thumbnailUrl,
-                    manga.coverLastModified,
-                ),
-            )
-        },
-        badgesStart = {
+    MangaCompactGridItem(
+        title = manga.title,
+        coverData = MangaCover(
+            mangaId = manga.id,
+            sourceId = manga.source,
+            isMangaFavorite = manga.favorite,
+            url = manga.thumbnailUrl,
+            lastModified = manga.coverLastModified,
+        ),
+        coverAlpha = if (manga.favorite) CommonMangaItemDefaults.BrowseFavoriteCoverAlpha else 1f,
+        coverBadgeStart = {
             if (manga.favorite) {
                 Badge(text = stringResource(R.string.in_library))
             }
         },
-        content = {
-            Box(
-                modifier = Modifier
-                    .clip(RoundedCornerShape(bottomStart = 4.dp, bottomEnd = 4.dp))
-                    .background(
-                        Brush.verticalGradient(
-                            0f to Color.Transparent,
-                            1f to Color(0xAA000000),
-                        ),
-                    )
-                    .fillMaxHeight(0.33f)
-                    .fillMaxWidth()
-                    .align(Alignment.BottomCenter),
-            )
-            MangaGridCompactText(manga.title)
-        },
+        onLongClick = onLongClick,
+        onClick = onClick,
     )
 }

app/src/main/java/eu/kanade/presentation/browse/components/BrowseSourceList.kt

@@ -1,26 +1,21 @@
 package eu.kanade.presentation.browse.components
 
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.paging.LoadState
 import androidx.paging.compose.LazyPagingItems
 import androidx.paging.compose.items
 import eu.kanade.domain.manga.model.Manga
+import eu.kanade.domain.manga.model.MangaCover
 import eu.kanade.presentation.components.Badge
+import eu.kanade.presentation.components.CommonMangaItemDefaults
 import eu.kanade.presentation.components.LazyColumn
-import eu.kanade.presentation.components.MangaCover
-import eu.kanade.presentation.library.components.MangaListItem
-import eu.kanade.presentation.library.components.MangaListItemContent
+import eu.kanade.presentation.components.MangaListItem
 import eu.kanade.presentation.util.plus
-import eu.kanade.presentation.util.verticalPadding
 import eu.kanade.tachiyomi.R
 
 @Composable
@@ -32,7 +27,7 @@ fun BrowseSourceList(
     onMangaLongClick: (Manga) -> Unit,
 ) {
     LazyColumn(
-        contentPadding = contentPadding,
+        contentPadding = contentPadding + PaddingValues(vertical = 8.dp),
     ) {
         item {
             if (mangaList.loadState.prepend is LoadState.Loading) {
@@ -64,31 +59,22 @@ fun BrowseSourceListItem(
     onClick: () -> Unit = {},
     onLongClick: () -> Unit = onClick,
 ) {
-    val overlayColor = MaterialTheme.colorScheme.background.copy(alpha = 0.66f)
     MangaListItem(
-        coverContent = {
-            MangaCover.Square(
-                modifier = Modifier
-                    .padding(vertical = verticalPadding)
-                    .fillMaxHeight()
-                    .drawWithContent {
-                        drawContent()
-                        if (manga.favorite) {
-                            drawRect(overlayColor)
-                        }
-                    },
-                data = manga.thumbnailUrl,
-            )
-        },
-        onClick = onClick,
-        onLongClick = onLongClick,
-        badges = {
+        title = manga.title,
+        coverData = MangaCover(
+            mangaId = manga.id,
+            sourceId = manga.source,
+            isMangaFavorite = manga.favorite,
+            url = manga.thumbnailUrl,
+            lastModified = manga.coverLastModified,
+        ),
+        coverAlpha = if (manga.favorite) CommonMangaItemDefaults.BrowseFavoriteCoverAlpha else 1f,
+        badge = {
             if (manga.favorite) {
                 Badge(text = stringResource(R.string.in_library))
             }
         },
-        content = {
-            MangaListItemContent(text = manga.title)
-        },
+        onLongClick = onLongClick,
+        onClick = onClick,
     )
 }