Split book thumbnail

app/src/main/java/com/pixelized/biblib/ui/screen/home/common/item/LargeBookThumbnail.kt

@@ -0,0 +1,190 @@
+package com.pixelized.biblib.ui.screen.home.common.item
+
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Card
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.pixelized.biblib.R
+import com.pixelized.biblib.ui.theme.BibLibTheme
+import com.pixelized.biblib.utils.extention.bibLib
+import com.pixelized.biblib.utils.extention.default
+import com.skydoves.landscapist.glide.GlideImage
+
+@Stable
+data class LargeBookThumbnailUio(
+    val id: Int,
+    val title: String,
+    val author: String,
+    val date: String?,
+    val isNew: Boolean,
+    val cover: String,
+)
+
+@Composable
+fun LargeBookThumbnail(
+    modifier: Modifier = Modifier,
+    thumbnail: LargeBookThumbnailUio?,
+    onClick: (LargeBookThumbnailUio) -> Unit = default<LargeBookThumbnailUio>(),
+) {
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .wrapContentHeight(),
+        shape = MaterialTheme.bibLib.shapes.bookThumbnailCoverLarge,
+    ) {
+        if (thumbnail != null) {
+            LargeBookThumbnailContent(
+                modifier = modifier,
+                thumbnail = thumbnail,
+                onClick = onClick,
+            )
+        } else {
+            LargeBookThumbnailPlaceHolder(
+                modifier = modifier,
+            )
+        }
+    }
+}
+
+@Composable
+private fun LargeBookThumbnailContent(
+    modifier: Modifier = Modifier,
+    thumbnail: LargeBookThumbnailUio,
+    onClick: (LargeBookThumbnailUio) -> Unit = default<LargeBookThumbnailUio>(),
+) {
+    Column(
+        modifier = modifier.clickable { thumbnail.let(onClick) }
+    ) {
+        GlideImage(
+            modifier = Modifier
+                .clip(shape = MaterialTheme.bibLib.shapes.bookThumbnailCoverLarge)
+                .fillMaxWidth()
+                .aspectRatio(64f / 102f),
+            previewPlaceholder = R.drawable.ic_fondatoin_cover,
+            imageModel = thumbnail.cover,
+        )
+
+        Text(
+            modifier = Modifier
+                .padding(top = MaterialTheme.bibLib.dimen.dp4)
+                .padding(horizontal = MaterialTheme.bibLib.dimen.dp8),
+            style = MaterialTheme.typography.body1,
+            color = MaterialTheme.bibLib.colors.typography.medium,
+            text = thumbnail.title,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+
+        Text(
+            modifier = Modifier.padding(horizontal = MaterialTheme.bibLib.dimen.dp8),
+            style = MaterialTheme.typography.caption,
+            color = MaterialTheme.bibLib.colors.typography.easy,
+            text = thumbnail.author
+        )
+
+        Text(
+            modifier = Modifier
+                .align(alignment = Alignment.End)
+                .padding(horizontal = MaterialTheme.bibLib.dimen.dp8)
+                .padding(bottom = MaterialTheme.bibLib.dimen.dp8),
+            style = MaterialTheme.typography.caption,
+            color = MaterialTheme.bibLib.colors.typography.easy,
+            text = thumbnail.date ?: ""
+        )
+    }
+}
+
+@Composable
+private fun LargeBookThumbnailPlaceHolder(
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .aspectRatio(64f / 102f)
+                .background(
+                    color = MaterialTheme.bibLib.colors.placeHolder,
+                    shape = MaterialTheme.bibLib.shapes.bookThumbnailCoverLarge,
+                ),
+        )
+
+        Box(
+            modifier = Modifier
+                .padding(top = MaterialTheme.bibLib.dimen.dp4)
+                .padding(horizontal = MaterialTheme.bibLib.dimen.dp8)
+                .size(width = 80.dp, height = 12.dp)
+                .background(
+                    color = MaterialTheme.bibLib.colors.placeHolder,
+                    shape = CircleShape,
+                ),
+        )
+
+        Box(
+            modifier = Modifier
+                .padding(top = MaterialTheme.bibLib.dimen.dp4)
+                .padding(horizontal = MaterialTheme.bibLib.dimen.dp8)
+                .size(width = 60.dp, height = 12.dp)
+                .background(
+                    color = MaterialTheme.bibLib.colors.placeHolder,
+                    shape = CircleShape,
+                ),
+        )
+
+        Box(
+            modifier = Modifier
+                .align(alignment = Alignment.End)
+                .padding(top = MaterialTheme.bibLib.dimen.dp4)
+                .padding(horizontal = MaterialTheme.bibLib.dimen.dp8)
+                .padding(bottom = MaterialTheme.bibLib.dimen.dp8)
+                .size(width = 40.dp, height = 12.dp)
+                .background(
+                    color = MaterialTheme.bibLib.colors.placeHolder,
+                    shape = CircleShape,
+                ),
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun LargeBookThumbnailPreview() {
+    BibLibTheme {
+        LargeBookThumbnail(
+            modifier = Modifier.width(168.dp),
+            thumbnail = LargeBookThumbnailUio(
+                id = 0,
+                title = "Foundation",
+                author = "Asimov",
+                date = "February 1951",
+                isNew = false,
+                cover = "",
+            ),
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun LargeBookThumbnailEmptyPreview() {
+    BibLibTheme {
+        LargeBookThumbnail(
+            modifier = Modifier.width(168.dp),
+            thumbnail = null,
+        )
+    }
+}

app/src/main/java/com/pixelized/biblib/ui/screen/home/common/item/SmallBookThumbnail.kt

@@ -1,7 +1,6 @@
 package com.pixelized.biblib.ui.screen.home.common.item
 
 import android.content.res.Configuration
-import android.text.Layout
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
@@ -26,7 +25,7 @@ import com.pixelized.biblib.utils.extention.default
 import com.skydoves.landscapist.glide.GlideImage
 
 @Stable
-data class BookThumbnailUio(
+data class SmallBookThumbnailUio(
     val id: Int,
     val genre: String,
     val title: String,
@@ -39,8 +38,8 @@ data class BookThumbnailUio(
 @Composable
 fun SmallBookThumbnail(
     modifier: Modifier = Modifier,
-    thumbnail: BookThumbnailUio?,
+    thumbnail: SmallBookThumbnailUio?,
-    onClick: (BookThumbnailUio) -> Unit = default<BookThumbnailUio>(),
+    onClick: (SmallBookThumbnailUio) -> Unit = default<SmallBookThumbnailUio>(),
 ) {
     if (thumbnail != null) {
         SmallBookThumbnailContent(
@@ -58,8 +57,8 @@ fun SmallBookThumbnail(
 @Composable
 private fun SmallBookThumbnailContent(
     modifier: Modifier = Modifier,
-    thumbnail: BookThumbnailUio,
+    thumbnail: SmallBookThumbnailUio,
-    onClick: (BookThumbnailUio) -> Unit = default<BookThumbnailUio>(),
+    onClick: (SmallBookThumbnailUio) -> Unit = default<SmallBookThumbnailUio>(),
 ) {
     val dimen = MaterialTheme.bibLib.dimen
     Card(
@@ -229,135 +228,13 @@ private fun SmallBookThumbnailPlaceHolder(
     }
 }
 
-@Composable
-fun LargeBookThumbnail(
-    modifier: Modifier = Modifier,
-    thumbnail: BookThumbnailUio?,
-    onClick: (BookThumbnailUio) -> Unit = default<BookThumbnailUio>(),
-) {
-    Card(
-        modifier = modifier
-            .fillMaxWidth()
-            .wrapContentHeight(),
-        shape = MaterialTheme.bibLib.shapes.bookThumbnailCoverLarge,
-    ) {
-        if (thumbnail != null) {
-            LargeBookThumbnailContent(
-                modifier = modifier,
-                thumbnail = thumbnail,
-                onClick = onClick,
-            )
-        } else {
-            LargeBookThumbnailPlaceHolder(
-                modifier = modifier,
-            )
-        }
-    }
-}
-
-@Composable
-private fun LargeBookThumbnailContent(
-    modifier: Modifier = Modifier,
-    thumbnail: BookThumbnailUio,
-    onClick: (BookThumbnailUio) -> Unit = default<BookThumbnailUio>(),
-) {
-    Column(
-        modifier = modifier.clickable { thumbnail.let(onClick) }
-    ) {
-        GlideImage(
-            modifier = Modifier
-                .clip(shape = MaterialTheme.bibLib.shapes.bookThumbnailCoverLarge)
-                .fillMaxWidth()
-                .aspectRatio(64f / 102f),
-            previewPlaceholder = R.drawable.ic_fondatoin_cover,
-            imageModel = thumbnail.cover,
-        )
-
-        Text(
-            modifier = Modifier
-                .padding(top = MaterialTheme.bibLib.dimen.dp4)
-                .padding(horizontal = MaterialTheme.bibLib.dimen.dp8),
-            style = MaterialTheme.typography.body1,
-            color = MaterialTheme.bibLib.colors.typography.medium,
-            text = thumbnail.title,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-        )
-
-        Text(
-            modifier = Modifier.padding(horizontal = MaterialTheme.bibLib.dimen.dp8),
-            style = MaterialTheme.typography.caption,
-            color = MaterialTheme.bibLib.colors.typography.easy,
-            text = thumbnail.author
-        )
-
-        Text(
-            modifier = Modifier
-                .align(alignment = Alignment.End)
-                .padding(horizontal = MaterialTheme.bibLib.dimen.dp8)
-                .padding(bottom = MaterialTheme.bibLib.dimen.dp8),
-            style = MaterialTheme.typography.caption,
-            color = MaterialTheme.bibLib.colors.typography.easy,
-            text = thumbnail.date ?: ""
-        )
-    }
-}
-
-@Composable
-private fun LargeBookThumbnailPlaceHolder(
-    modifier: Modifier = Modifier,
-) {
-    Column(modifier = modifier) {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .aspectRatio(64f / 102f)
-                .background(
-                    color = MaterialTheme.bibLib.colors.placeHolder,
-                    shape = MaterialTheme.bibLib.shapes.bookThumbnailCoverLarge,
-                ),
-        )
-
-        Box(
-            modifier = Modifier
-                .padding(top = MaterialTheme.bibLib.dimen.dp4)
-                .size(width = 80.dp, height = 12.dp)
-                .background(
-                    color = MaterialTheme.bibLib.colors.placeHolder,
-                    shape = CircleShape,
-                ),
-        )
-
-        Box(
-            modifier = Modifier
-                .padding(top = MaterialTheme.bibLib.dimen.dp4)
-                .size(width = 60.dp, height = 12.dp)
-                .background(
-                    color = MaterialTheme.bibLib.colors.placeHolder,
-                    shape = CircleShape,
-                ),
-        )
-
-        Box(
-            modifier = Modifier
-                .padding(top = MaterialTheme.bibLib.dimen.dp4)
-                .size(width = 40.dp, height = 12.dp)
-                .background(
-                    color = MaterialTheme.bibLib.colors.placeHolder,
-                    shape = CircleShape,
-                ),
-        )
-    }
-}
-
-
 @Composable
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 private fun SmallBookThumbnailPreview() {
     BibLibTheme {
         SmallBookThumbnail(
-            thumbnail = BookThumbnailUio(
+            thumbnail = SmallBookThumbnailUio(
                 id = 0,
                 genre = "Sci-Fi",
                 title = "Foundation",
@@ -379,36 +256,4 @@ private fun SmallBookThumbnailEmptyPreview() {
             thumbnail = null,
         )
     }
-}
-
-@Composable
-@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_NO)
-@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
-private fun LargeBookThumbnailPreview() {
-    BibLibTheme {
-        LargeBookThumbnail(
-            modifier = Modifier.width(168.dp),
-            thumbnail = BookThumbnailUio(
-                id = 0,
-                genre = "Sci-Fi",
-                title = "Foundation",
-                author = "Asimov",
-                date = "February 1951",
-                isNew = false,
-                cover = "",
-            ),
-        )
-    }
-}
-
-@Composable
-@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_NO)
-@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
-private fun LargeBookThumbnailEmptyPreview() {
-    BibLibTheme {
-        LargeBookThumbnail(
-            modifier = Modifier.width(168.dp),
-            thumbnail = null,
-        )
-    }
 }

app/src/main/java/com/pixelized/biblib/ui/screen/home/common/preview/bookPreviewResources.kt

@@ -4,14 +4,15 @@ import androidx.compose.runtime.Composable
 import androidx.paging.PagingData
 import androidx.paging.compose.LazyPagingItems
 import androidx.paging.compose.collectAsLazyPagingItems
-import com.pixelized.biblib.ui.screen.home.common.item.BookThumbnailUio
+import com.pixelized.biblib.ui.screen.home.common.item.LargeBookThumbnailUio
+import com.pixelized.biblib.ui.screen.home.common.item.SmallBookThumbnailUio
 
 import kotlinx.coroutines.flow.flowOf
 
 @Composable
-fun bookPreviewResources(): LazyPagingItems<BookThumbnailUio> {
+fun smallBookThumbnailPreviewResources(): LazyPagingItems<SmallBookThumbnailUio> {
     val thumbnails = listOf(
-        BookThumbnailUio(
+        SmallBookThumbnailUio(
             id = 112,
             title = "Prélude à Fondation",
             author = "Asimov",
@@ -20,7 +21,7 @@ fun bookPreviewResources(): LazyPagingItems<BookThumbnailUio> {
             isNew = false,
             cover = "",
         ),
-        BookThumbnailUio(
+        SmallBookThumbnailUio(
             id = 78,
             title = "L'Aube de Fondation",
             author = "Asimov",
@@ -29,7 +30,7 @@ fun bookPreviewResources(): LazyPagingItems<BookThumbnailUio> {
             isNew = false,
             cover = "",
         ),
-        BookThumbnailUio(
+        SmallBookThumbnailUio(
             id = 90,
             title = "Fondation",
             author = "Asimov",
@@ -38,7 +39,7 @@ fun bookPreviewResources(): LazyPagingItems<BookThumbnailUio> {
             isNew = false,
             cover = "",
         ),
-        BookThumbnailUio(
+        SmallBookThumbnailUio(
             id = 184,
             title = "Fondation et Empire",
             author = "Asimov",
@@ -47,7 +48,7 @@ fun bookPreviewResources(): LazyPagingItems<BookThumbnailUio> {
             isNew = false,
             cover = "",
         ),
-        BookThumbnailUio(
+        SmallBookThumbnailUio(
             id = 185,
             title = "Seconde Fondation",
             author = "Asimov",
@@ -56,7 +57,7 @@ fun bookPreviewResources(): LazyPagingItems<BookThumbnailUio> {
             isNew = false,
             cover = "",
         ),
-        BookThumbnailUio(
+        SmallBookThumbnailUio(
             id = 119,
             title = "Fondation foudroyée",
             author = "Asimov",
@@ -65,7 +66,7 @@ fun bookPreviewResources(): LazyPagingItems<BookThumbnailUio> {
             isNew = false,
             cover = "",
         ),
-        BookThumbnailUio(
+        SmallBookThumbnailUio(
             id = 163,
             title = "Terre et Fondation",
             author = "Asimov",
@@ -76,4 +77,67 @@ fun bookPreviewResources(): LazyPagingItems<BookThumbnailUio> {
         ),
     )
     return flowOf(PagingData.from(thumbnails)).collectAsLazyPagingItems()
+}
+
+@Composable
+fun largeBookThumbnailPreviewResources(): LazyPagingItems<LargeBookThumbnailUio> {
+    val thumbnails = listOf(
+        LargeBookThumbnailUio(
+            id = 112,
+            title = "Prélude à Fondation",
+            author = "Asimov",
+            date = "1988",
+            isNew = false,
+            cover = "",
+        ),
+        LargeBookThumbnailUio(
+            id = 78,
+            title = "L'Aube de Fondation",
+            author = "Asimov",
+            date = "1993",
+            isNew = false,
+            cover = "",
+        ),
+        LargeBookThumbnailUio(
+            id = 90,
+            title = "Fondation",
+            author = "Asimov",
+            date = "1951",
+            isNew = false,
+            cover = "",
+        ),
+        LargeBookThumbnailUio(
+            id = 184,
+            title = "Fondation et Empire",
+            author = "Asimov",
+            date = "1952",
+            isNew = false,
+            cover = "",
+        ),
+        LargeBookThumbnailUio(
+            id = 185,
+            title = "Seconde Fondation",
+            author = "Asimov",
+            date = "1953",
+            isNew = false,
+            cover = "",
+        ),
+        LargeBookThumbnailUio(
+            id = 119,
+            title = "Fondation foudroyée",
+            author = "Asimov",
+            date = "1982",
+            isNew = false,
+            cover = "",
+        ),
+        LargeBookThumbnailUio(
+            id = 163,
+            title = "Terre et Fondation",
+            author = "Asimov",
+            date = "1986",
+            isNew = false,
+            cover = "",
+        ),
+    )
+    return flowOf(PagingData.from(thumbnails)).collectAsLazyPagingItems()
 }

app/src/main/java/com/pixelized/biblib/ui/screen/home/page/books/BooksPage.kt

@@ -13,9 +13,9 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.paging.compose.LazyPagingItems
 import androidx.paging.compose.items
 import com.pixelized.biblib.ui.scaffold.LocalDetailBottomSheetState
-import com.pixelized.biblib.ui.screen.home.common.preview.bookPreviewResources
+import com.pixelized.biblib.ui.screen.home.common.preview.smallBookThumbnailPreviewResources
 import com.pixelized.biblib.ui.screen.home.common.item.SmallBookThumbnail
-import com.pixelized.biblib.ui.screen.home.common.item.BookThumbnailUio
+import com.pixelized.biblib.ui.screen.home.common.item.SmallBookThumbnailUio
 import com.pixelized.biblib.ui.theme.BibLibTheme
 import com.pixelized.biblib.utils.extention.bibLib
 import com.pixelized.biblib.utils.extention.navigationBarsHeight
@@ -34,7 +34,7 @@ fun BooksPage(
 
 @Composable
 private fun BooksPageContent(
-    books: LazyPagingItems<BookThumbnailUio>,
+    books: LazyPagingItems<SmallBookThumbnailUio>,
 ) {
     val bottomDetailState = LocalDetailBottomSheetState.current
 
@@ -66,7 +66,7 @@ private fun BooksPagePreview() {
     BibLibTheme {
         Column {
             BooksPageContent(
-                books = bookPreviewResources()
+                books = smallBookThumbnailPreviewResources()
             )
         }
     }

app/src/main/java/com/pixelized/biblib/ui/screen/home/page/books/BooksViewModel.kt

@@ -5,12 +5,8 @@ import androidx.lifecycle.ViewModel
 import androidx.paging.Pager
 import androidx.paging.PagingConfig
 import androidx.paging.compose.collectAsLazyPagingItems
-import com.pixelized.biblib.model.book.Book
-import com.pixelized.biblib.network.client.IBibLibClient
 import com.pixelized.biblib.repository.book.IBookRepository
-import com.pixelized.biblib.ui.screen.home.common.item.BookThumbnailUio
+import com.pixelized.biblib.utils.extention.toSmallThumbnailUio
-import com.pixelized.biblib.utils.extention.longDate
-import com.pixelized.biblib.utils.extention.toThumbnailUio
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.Dispatchers
 import javax.inject.Inject
@@ -24,7 +20,7 @@ class BooksViewModel @Inject constructor(
     private val booksSource = Pager(
         config = PagingConfig(pageSize = PAGING_SIZE),
         pagingSourceFactory = bookRepository.getBooksSource()
-            .map { it.toThumbnailUio() }
+            .map { it.toSmallThumbnailUio() }
             .asPagingSourceFactory(Dispatchers.IO)
     ).flow
 

app/src/main/java/com/pixelized/biblib/ui/screen/home/page/news/NewsBookViewModel.kt

@@ -8,8 +8,9 @@ import androidx.paging.PagingData
 import androidx.paging.compose.collectAsLazyPagingItems
 import com.pixelized.biblib.network.client.IBibLibClient
 import com.pixelized.biblib.repository.book.IBookRepository
-import com.pixelized.biblib.ui.screen.home.common.item.BookThumbnailUio
+import com.pixelized.biblib.ui.screen.home.common.item.LargeBookThumbnailUio
-import com.pixelized.biblib.utils.extention.toThumbnailUio
+import com.pixelized.biblib.utils.extention.toLargeBookThumbnailUio
+import com.pixelized.biblib.utils.extention.toSmallThumbnailUio
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.Flow
@@ -21,10 +22,10 @@ class NewsBookViewModel @Inject constructor(
     bookRepository: IBookRepository,
 ) : ViewModel() {
 
-    private val newsSource: Flow<PagingData<BookThumbnailUio>> = Pager(
+    private val newsSource: Flow<PagingData<LargeBookThumbnailUio>> = Pager(
         config = PagingConfig(pageSize = PAGING_SIZE),
         pagingSourceFactory = bookRepository.getNewsSource()
-            .map { it.toThumbnailUio(coverBaseUrl = IBibLibClient.COVER_URL) }
+            .map { it.toLargeBookThumbnailUio() }
             .asPagingSourceFactory(Dispatchers.IO)
     ).flow
 

app/src/main/java/com/pixelized/biblib/ui/screen/home/page/news/NewsPage.kt

@@ -2,7 +2,9 @@ package com.pixelized.biblib.ui.screen.home.page.news
 
 import android.content.res.Configuration.UI_MODE_NIGHT_NO
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.material.MaterialTheme
@@ -12,9 +14,9 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.paging.compose.LazyPagingItems
 import com.pixelized.biblib.ui.scaffold.DetailBottomSheetState
 import com.pixelized.biblib.ui.scaffold.LocalDetailBottomSheetState
-import com.pixelized.biblib.ui.screen.home.common.preview.bookPreviewResources
-import com.pixelized.biblib.ui.screen.home.common.item.BookThumbnailUio
 import com.pixelized.biblib.ui.screen.home.common.item.LargeBookThumbnail
+import com.pixelized.biblib.ui.screen.home.common.item.LargeBookThumbnailUio
+import com.pixelized.biblib.ui.screen.home.common.preview.largeBookThumbnailPreviewResources
 import com.pixelized.biblib.ui.theme.BibLibTheme
 import com.pixelized.biblib.utils.extention.bibLib
 import com.pixelized.biblib.utils.extention.navigationBarsHeight
@@ -33,7 +35,7 @@ fun NewsPage(
 
 @Composable
 private fun NewsPageContent(
-    books: LazyPagingItems<BookThumbnailUio>,
+    books: LazyPagingItems<LargeBookThumbnailUio>,
 ) {
     val detailBottomSheetState: DetailBottomSheetState = LocalDetailBottomSheetState.current
 
@@ -68,7 +70,7 @@ private fun NewPagePreview() {
     BibLibTheme {
         Column {
             NewsPageContent(
-                books = bookPreviewResources()
+                books = largeBookThumbnailPreviewResources()
             )
         }
     }

app/src/main/java/com/pixelized/biblib/ui/screen/home/page/search/SearchPage.kt

@@ -16,6 +16,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -33,8 +34,8 @@ import com.pixelized.biblib.ui.scaffold.LocalCategorySearchBottomSheetState
 import com.pixelized.biblib.ui.scaffold.LocalDetailBottomSheetState
 import com.pixelized.biblib.ui.scaffold.LocalSearchViewModel
 import com.pixelized.biblib.ui.scaffold.SearchFilter
-import com.pixelized.biblib.ui.screen.home.common.item.BookThumbnailUio
 import com.pixelized.biblib.ui.screen.home.common.item.SmallBookThumbnail
+import com.pixelized.biblib.ui.screen.home.common.item.SmallBookThumbnailUio
 import com.pixelized.biblib.ui.theme.BibLibTheme
 import com.pixelized.biblib.utils.extention.bibLib
 import com.pixelized.biblib.utils.extention.default
@@ -71,17 +72,21 @@ fun SearchPage(
 @Composable
 private fun SearchPageContent(
     modifier: Modifier = Modifier,
-    search: Flow<PagingData<BookThumbnailUio>> = emptyFlow(),
+    search: Flow<PagingData<SmallBookThumbnailUio>> = emptyFlow(),
     filters: List<SearchFilter> = SearchFilter.all,
     onFilter: (filter: SearchFilter) -> Unit = default<SearchFilter>(),
-    onDetail: (item: BookThumbnailUio) -> Unit = default<BookThumbnailUio>()
+    onDetail: (item: SmallBookThumbnailUio) -> Unit = default<SmallBookThumbnailUio>()
 ) {
     val items = search.collectAsLazyPagingItems()
 
     LazyColumn(
         modifier = modifier,
-        contentPadding = PaddingValues(bottom = MaterialTheme.bibLib.dimen.thumbnail.padding + navigationBarsHeight()),
+        contentPadding = PaddingValues(
-        verticalArrangement = Arrangement.spacedBy(MaterialTheme.bibLib.dimen.dp8),
+            bottom = MaterialTheme.bibLib.dimen.thumbnail.padding + navigationBarsHeight()
+        ),
+        verticalArrangement = Arrangement.spacedBy(
+            space = MaterialTheme.bibLib.dimen.thumbnail.arrangement
+        ),
     ) {
         item(key = "Search Filter") {
             SearchFilter(
@@ -132,7 +137,8 @@ private fun SearchFilter(
     Row(
         modifier = Modifier
             .horizontalScroll(rememberScrollState())
-            .then(modifier)
+            .then(modifier),
+        verticalAlignment = Alignment.CenterVertically,
     ) {
         filters.forEachIndexed { index, filter ->
             val chipModifier = if (index != filters.lastIndex) {
@@ -140,6 +146,7 @@ private fun SearchFilter(
             } else {
                 Modifier
             }
+
             SearchChipFilter(
                 modifier = chipModifier,
                 selected = filter.isSelected,
@@ -166,16 +173,27 @@ private fun SearchChipFilter(
         onClick = onClick,
     ) {
         Text(
+            color = MaterialTheme.bibLib.colors.typography.medium,
+            style = MaterialTheme.typography.caption,
             text = label
         )
 
         value?.let {
-            Text(text = ": ")
+            Text(
-            Text(text = value)
+                color = MaterialTheme.bibLib.colors.typography.medium,
+                style = MaterialTheme.typography.caption,
+                text = ": "
+            )
+            Text(
+                color = MaterialTheme.bibLib.colors.typography.medium,
+                style = MaterialTheme.typography.caption,
+                text = value
+            )
         }
 
         Icon(
             imageVector = Icons.Default.ArrowDropDown,
+            tint = MaterialTheme.bibLib.colors.typography.medium,
             contentDescription = null
         )
     }

app/src/main/java/com/pixelized/biblib/ui/screen/home/page/search/SearchViewModel.kt

@@ -6,12 +6,8 @@ import androidx.compose.runtime.setValue
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import androidx.paging.*
-import com.pixelized.biblib.model.book.Book
-import com.pixelized.biblib.network.client.IBibLibClient
 import com.pixelized.biblib.repository.book.IBookRepository
-import com.pixelized.biblib.ui.screen.home.common.item.BookThumbnailUio
+import com.pixelized.biblib.utils.extention.toSmallThumbnailUio
-import com.pixelized.biblib.utils.extention.longDate
-import com.pixelized.biblib.utils.extention.toThumbnailUio
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -90,7 +86,7 @@ class SearchViewModel @Inject constructor(
         .combine(language.confirmFlow) { paging, filter ->
             paging.filter { filter == null || it.language == null || it.language.id == filter.id }
         }
-        .map { paging -> paging.map { it.toThumbnailUio() } }
+        .map { paging -> paging.map { it.toSmallThumbnailUio() } }
 
     data class FilterUio(
         val id: Int,

app/src/main/java/com/pixelized/biblib/utils/extention/BookEx.kt

@@ -3,7 +3,8 @@ package com.pixelized.biblib.utils.extention
 import androidx.annotation.StringDef
 import com.pixelized.biblib.model.book.Book
 import com.pixelized.biblib.network.client.IBibLibClient
-import com.pixelized.biblib.ui.screen.home.common.item.BookThumbnailUio
+import com.pixelized.biblib.ui.screen.home.common.item.LargeBookThumbnailUio
+import com.pixelized.biblib.ui.screen.home.common.item.SmallBookThumbnailUio
 import com.pixelized.biblib.ui.screen.home.detail.BookDetailUio
 
 
@@ -14,16 +15,27 @@ import com.pixelized.biblib.ui.screen.home.detail.BookDetailUio
 )
 annotation class CoverUrl
 
-fun Book.toThumbnailUio(
+fun Book.toSmallThumbnailUio(
     @CoverUrl coverBaseUrl: String = IBibLibClient.THUMBNAIL_URL
-) = BookThumbnailUio(
+) = SmallBookThumbnailUio(
     id = id,
     genre = genre?.joinToString { it.name } ?: "",
     title = title,
     author = author.joinToString { it.name },
     date = releaseDate.longDate(),
     isNew = isNew,
-    cover = "${coverBaseUrl}/$id.jpg"
+    cover = "${coverBaseUrl}/$id.jpg",
+)
+
+fun Book.toLargeBookThumbnailUio(
+    @CoverUrl coverBaseUrl: String = IBibLibClient.COVER_URL
+) = LargeBookThumbnailUio(
+    id = id,
+    title = title,
+    author = author.joinToString { it.name },
+    date = releaseDate.longDate(),
+    isNew = isNew,
+    cover = "${coverBaseUrl}/$id.jpg",
 )
 
 fun Book.toDetailUio(