From 98b8aa3f2dcca27d5148d9c84cad8ebaa6f249a0 Mon Sep 17 00:00:00 2001
From: Koitharu <nvasya95@gmail.com>
Date: Sat, 1 Jul 2023 14:46:42 +0300
Subject: [PATCH] Update details fragment layout

---
 .../kotatsu/details/ui/DetailsFragment.kt     |  10 +-
 .../details/ui/scrobbling/ScrobblingInfoAD.kt |   4 +-
 .../layout-w600dp-land/fragment_details.xml   | 223 ------------------
 app/src/main/res/layout/fragment_details.xml  | 125 +++++++---
 .../main/res/layout/item_header_button.xml    |   2 +-
 app/src/main/res/layout/item_list_group.xml   |   2 +-
 .../main/res/layout/item_scrobbling_info.xml  |  79 ++++---
 app/src/main/res/values/strings.xml           |   1 +
 app/src/main/res/values/styles.xml            |   4 +
 9 files changed, 163 insertions(+), 287 deletions(-)
 delete mode 100644 app/src/main/res/layout-w600dp-land/fragment_details.xml

diff --git a/app/src/main/kotlin/org/koitharu/kotatsu/details/ui/DetailsFragment.kt b/app/src/main/kotlin/org/koitharu/kotatsu/details/ui/DetailsFragment.kt
index 8272c3b2e..b98d8180b 100644
--- a/app/src/main/kotlin/org/koitharu/kotatsu/details/ui/DetailsFragment.kt
+++ b/app/src/main/kotlin/org/koitharu/kotatsu/details/ui/DetailsFragment.kt
@@ -52,6 +52,7 @@ import org.koitharu.kotatsu.parsers.model.MangaState
 import org.koitharu.kotatsu.parsers.model.MangaTag
 import org.koitharu.kotatsu.reader.ui.ReaderActivity
 import org.koitharu.kotatsu.scrobbling.common.domain.model.ScrobblingInfo
+import org.koitharu.kotatsu.scrobbling.common.ui.selector.ScrobblingSelectorSheet
 import org.koitharu.kotatsu.search.ui.MangaListActivity
 import org.koitharu.kotatsu.search.ui.SearchActivity
 import javax.inject.Inject
@@ -80,6 +81,9 @@ class DetailsFragment :
 		super.onViewBindingCreated(binding, savedInstanceState)
 		binding.textViewAuthor.setOnClickListener(this)
 		binding.imageViewCover.setOnClickListener(this)
+		binding.buttonDescriptionMore.setOnClickListener(this)
+		binding.buttonBookmarksMore.setOnClickListener(this)
+		binding.buttonScrobblingMore.setOnClickListener(this)
 		binding.infoLayout.textViewSource.setOnClickListener(this)
 		binding.textViewDescription.movementMethod = LinkMovementMethod.getInstance()
 		binding.chipsTags.onChipClickListener = this
@@ -217,7 +221,7 @@ class DetailsFragment :
 
 	private fun onScrobblingInfoChanged(scrobblings: List<ScrobblingInfo>) {
 		var adapter = requireViewBinding().recyclerViewScrobbling.adapter as? ScrollingInfoAdapter
-		requireViewBinding().recyclerViewScrobbling.isGone = scrobblings.isEmpty()
+		requireViewBinding().groupScrobbling.isGone = scrobblings.isEmpty()
 		if (adapter != null) {
 			adapter.items = scrobblings
 		} else {
@@ -260,6 +264,10 @@ class DetailsFragment :
 					scaleUpActivityOptionsOf(v),
 				)
 			}
+
+			R.id.button_scrobbling_more -> {
+				ScrobblingSelectorSheet.show(parentFragmentManager, manga, null)
+			}
 		}
 	}
 
diff --git a/app/src/main/kotlin/org/koitharu/kotatsu/details/ui/scrobbling/ScrobblingInfoAD.kt b/app/src/main/kotlin/org/koitharu/kotatsu/details/ui/scrobbling/ScrobblingInfoAD.kt
index 42644501a..1447002d3 100644
--- a/app/src/main/kotlin/org/koitharu/kotatsu/details/ui/scrobbling/ScrobblingInfoAD.kt
+++ b/app/src/main/kotlin/org/koitharu/kotatsu/details/ui/scrobbling/ScrobblingInfoAD.kt
@@ -29,8 +29,8 @@ fun scrobblingInfoAD(
 			error(R.drawable.ic_error_placeholder)
 			enqueueWith(coil)
 		}
-		binding.textViewTitle.text = item.title
-		binding.textViewTitle.setCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, item.scrobbler.iconResId, 0)
+		binding.textViewTitle.setText(item.scrobbler.titleResId)
+		binding.imageViewIcon.setImageResource(item.scrobbler.iconResId)
 		binding.ratingBar.rating = item.rating * binding.ratingBar.numStars
 		binding.textViewStatus.text = item.status?.let {
 			context.resources.getStringArray(R.array.scrobbling_statuses).getOrNull(it.ordinal)
diff --git a/app/src/main/res/layout-w600dp-land/fragment_details.xml b/app/src/main/res/layout-w600dp-land/fragment_details.xml
deleted file mode 100644
index 19d7974ea..000000000
--- a/app/src/main/res/layout-w600dp-land/fragment_details.xml
+++ /dev/null
@@ -1,223 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.core.widget.NestedScrollView
-	xmlns:android="http://schemas.android.com/apk/res/android"
-	xmlns:app="http://schemas.android.com/apk/res-auto"
-	xmlns:tools="http://schemas.android.com/tools"
-	android:id="@+id/scrollView"
-	android:layout_width="match_parent"
-	android:layout_height="match_parent"
-	android:clipToPadding="false"
-	android:scrollbars="vertical"
-	app:layout_behavior="@string/appbar_scrolling_view_behavior">
-
-	<androidx.constraintlayout.widget.ConstraintLayout
-		android:layout_width="match_parent"
-		android:layout_height="match_parent">
-
-		<com.google.android.material.imageview.ShapeableImageView
-			android:id="@+id/imageView_cover"
-			android:layout_width="0dp"
-			android:layout_height="0dp"
-			android:layout_marginStart="16dp"
-			android:layout_marginTop="16dp"
-			android:background="?colorSecondaryContainer"
-			android:foreground="?selectableItemBackground"
-			android:scaleType="centerCrop"
-			app:layout_constraintDimensionRatio="H,13:18"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintHorizontal_bias="0"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toTopOf="parent"
-			app:layout_constraintWidth_percent="0.3"
-			app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Kotatsu.Cover"
-			tools:background="@tools:sample/backgrounds/scenic"
-			tools:ignore="ContentDescription,UnusedAttribute" />
-
-		<org.koitharu.kotatsu.history.ui.util.ReadingProgressView
-			android:id="@+id/progressView"
-			android:layout_width="@dimen/card_indicator_size"
-			android:layout_height="@dimen/card_indicator_size"
-			android:layout_margin="@dimen/card_indicator_offset"
-			app:layout_constraintBottom_toBottomOf="@id/imageView_cover"
-			app:layout_constraintEnd_toEndOf="@id/imageView_cover" />
-
-		<LinearLayout
-			android:id="@+id/layout_titles"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:orientation="vertical"
-			android:paddingHorizontal="16dp"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toEndOf="@id/imageView_cover"
-			app:layout_constraintTop_toTopOf="@+id/imageView_cover">
-
-			<TextView
-				android:id="@+id/textView_title"
-				android:layout_width="match_parent"
-				android:layout_height="wrap_content"
-				android:ellipsize="end"
-				android:maxLines="4"
-				android:padding="4dp"
-				android:textAppearance="?attr/textAppearanceHeadlineSmall"
-				tools:text="@tools:sample/lorem[15]" />
-
-			<TextView
-				android:id="@+id/textView_subtitle"
-				android:layout_width="match_parent"
-				android:layout_height="wrap_content"
-				android:ellipsize="end"
-				android:maxLines="3"
-				android:padding="4dp"
-				android:textAppearance="?attr/textAppearanceBodyMedium"
-				tools:text="@tools:sample/lorem[12]" />
-
-			<TextView
-				android:id="@+id/textView_author"
-				android:layout_width="wrap_content"
-				android:layout_height="wrap_content"
-				android:background="@drawable/list_selector"
-				android:padding="4dp"
-				android:singleLine="true"
-				android:textColor="?attr/colorTertiary"
-				android:textStyle="bold"
-				tools:text="@tools:sample/full_names" />
-
-			<RatingBar
-				android:id="@+id/rating_bar"
-				style="?ratingBarStyleSmall"
-				android:layout_width="wrap_content"
-				android:layout_height="wrap_content"
-				android:isIndicator="true"
-				android:max="1"
-				android:numStars="5"
-				android:padding="4dp"
-				android:stepSize="0.5"
-				tools:rating="4" />
-
-		</LinearLayout>
-
-		<androidx.constraintlayout.widget.Barrier
-			android:id="@+id/barrier_header"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			app:barrierDirection="bottom"
-			app:barrierMargin="8dp"
-			app:constraint_referenced_ids="layout_titles,imageView_cover" />
-
-		<include
-			android:id="@+id/info_layout"
-			layout="@layout/layout_details_info"
-			android:layout_width="match_parent"
-			android:layout_height="wrap_content"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@+id/barrier_header" />
-
-		<org.koitharu.kotatsu.core.ui.widgets.ChipsView
-			android:id="@+id/chips_tags"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:layout_marginTop="8dp"
-			android:paddingStart="16dp"
-			android:paddingEnd="16dp"
-			app:chipSpacingHorizontal="6dp"
-			app:chipSpacingVertical="6dp"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@+id/info_layout" />
-
-		<TextView
-			android:id="@+id/textView_bookmarks"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:layout_marginTop="16dp"
-			android:gravity="center_vertical|start"
-			android:paddingStart="16dp"
-			android:paddingEnd="16dp"
-			android:singleLine="true"
-			android:text="@string/bookmarks"
-			android:textAppearance="@style/TextAppearance.Kotatsu.SectionHeader"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/chips_tags" />
-
-		<androidx.recyclerview.widget.RecyclerView
-			android:id="@+id/recyclerView_bookmarks"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:layout_marginTop="4dp"
-			android:layout_marginBottom="6dp"
-			android:clipToPadding="false"
-			android:nestedScrollingEnabled="false"
-			android:orientation="horizontal"
-			android:paddingStart="12dp"
-			android:paddingEnd="12dp"
-			app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/textView_bookmarks"
-			tools:listitem="@layout/item_bookmark" />
-
-		<androidx.recyclerview.widget.RecyclerView
-			android:id="@+id/recyclerView_scrobbling"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:layout_marginStart="16dp"
-			android:layout_marginEnd="16dp"
-			android:layout_marginBottom="12dp"
-			android:nestedScrollingEnabled="false"
-			android:orientation="vertical"
-			android:overScrollMode="never"
-			android:scrollbars="none"
-			android:visibility="gone"
-			app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/recyclerView_bookmarks"
-			tools:itemCount="2"
-			tools:listitem="@layout/item_scrobbling_info"
-			tools:visibility="visible" />
-
-		<org.koitharu.kotatsu.core.ui.widgets.SelectableTextView
-			android:id="@+id/textView_description"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:layout_marginStart="@dimen/margin_normal"
-			android:layout_marginTop="@dimen/margin_small"
-			android:layout_marginEnd="@dimen/margin_normal"
-			android:lineSpacingMultiplier="1.2"
-			android:paddingBottom="@dimen/margin_normal"
-			android:textAppearance="?attr/textAppearanceBodyMedium"
-			android:textIsSelectable="true"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/recyclerView_scrobbling"
-			tools:ignore="UnusedAttribute"
-			tools:text="@tools:sample/lorem/random[250]" />
-
-		<com.google.android.material.progressindicator.LinearProgressIndicator
-			android:id="@+id/progressBar"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:indeterminate="true"
-			android:visibility="gone"
-			app:hideAnimationBehavior="outward"
-			app:layout_constraintBottom_toTopOf="parent"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toTopOf="parent"
-			app:showAnimationBehavior="inward"
-			app:trackCornerRadius="0dp"
-			tools:visibility="visible" />
-
-		<androidx.constraintlayout.widget.Group
-			android:id="@+id/group_bookmarks"
-			android:layout_width="wrap_content"
-			android:layout_height="wrap_content"
-			android:visibility="gone"
-			app:constraint_referenced_ids="recyclerView_bookmarks,textView_bookmarks"
-			tools:visibility="visible" />
-
-	</androidx.constraintlayout.widget.ConstraintLayout>
-
-</androidx.core.widget.NestedScrollView>
diff --git a/app/src/main/res/layout/fragment_details.xml b/app/src/main/res/layout/fragment_details.xml
index 4f32dbd71..66e41f044 100644
--- a/app/src/main/res/layout/fragment_details.xml
+++ b/app/src/main/res/layout/fragment_details.xml
@@ -139,25 +139,79 @@
 			app:layout_constraintTop_toBottomOf="@+id/info_layout" />
 
 		<TextView
-			android:id="@+id/textView_bookmarks"
+			android:id="@+id/textView_description_title"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
-			android:layout_marginTop="16dp"
+			android:layout_marginStart="@dimen/margin_small"
+			android:layout_marginTop="@dimen/margin_small"
+			android:layout_weight="1"
 			android:gravity="center_vertical|start"
-			android:paddingStart="16dp"
-			android:paddingEnd="16dp"
+			android:padding="@dimen/grid_spacing"
+			android:singleLine="true"
+			android:text="@string/description"
+			android:textAppearance="@style/TextAppearance.Kotatsu.SectionHeader"
+			app:layout_constraintEnd_toStartOf="@id/button_description_more"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toBottomOf="@id/chips_tags" />
+
+		<Button
+			android:id="@+id/button_description_more"
+			style="@style/Widget.Kotatsu.Button.More"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:layout_marginEnd="8dp"
+			android:text="@string/more"
+			app:layout_constraintBaseline_toBaselineOf="@id/textView_description_title"
+			app:layout_constraintEnd_toEndOf="parent" />
+
+		<TextView
+			android:id="@+id/textView_description"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_marginStart="@dimen/margin_normal"
+			android:layout_marginTop="@dimen/margin_small"
+			android:layout_marginEnd="@dimen/margin_normal"
+			android:ellipsize="end"
+			android:lineSpacingMultiplier="1.2"
+			android:maxLines="5"
+			android:paddingBottom="@dimen/margin_normal"
+			android:textAppearance="?attr/textAppearanceBodyMedium"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toBottomOf="@id/textView_description_title"
+			tools:ignore="UnusedAttribute"
+			tools:text="@tools:sample/lorem/random" />
+
+		<TextView
+			android:id="@+id/textView_bookmarks_title"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_marginStart="@dimen/margin_small"
+			android:layout_marginTop="@dimen/margin_small"
+			android:layout_weight="1"
+			android:gravity="center_vertical|start"
+			android:padding="@dimen/grid_spacing"
 			android:singleLine="true"
 			android:text="@string/bookmarks"
 			android:textAppearance="@style/TextAppearance.Kotatsu.SectionHeader"
-			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintEnd_toStartOf="@id/button_bookmarks_more"
 			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/chips_tags" />
+			app:layout_constraintTop_toBottomOf="@id/textView_description" />
+
+		<Button
+			android:id="@+id/button_bookmarks_more"
+			style="@style/Widget.Kotatsu.Button.More"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:layout_marginEnd="8dp"
+			android:text="@string/show_all"
+			app:layout_constraintBaseline_toBaselineOf="@id/textView_bookmarks_title"
+			app:layout_constraintEnd_toEndOf="parent" />
 
 		<androidx.recyclerview.widget.RecyclerView
 			android:id="@+id/recyclerView_bookmarks"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
-			android:layout_marginTop="4dp"
 			android:layout_marginBottom="6dp"
 			android:clipToPadding="false"
 			android:nestedScrollingEnabled="false"
@@ -167,9 +221,35 @@
 			app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
 			app:layout_constraintEnd_toEndOf="parent"
 			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/textView_bookmarks"
+			app:layout_constraintTop_toBottomOf="@id/textView_bookmarks_title"
 			tools:listitem="@layout/item_bookmark" />
 
+		<TextView
+			android:id="@+id/textView_scrobbling_title"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_marginStart="@dimen/margin_small"
+			android:layout_marginTop="@dimen/margin_small"
+			android:layout_weight="1"
+			android:gravity="center_vertical|start"
+			android:padding="@dimen/grid_spacing"
+			android:singleLine="true"
+			android:text="@string/tracking"
+			android:textAppearance="@style/TextAppearance.Kotatsu.SectionHeader"
+			app:layout_constraintEnd_toStartOf="@id/button_scrobbling_more"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toBottomOf="@id/recyclerView_bookmarks" />
+
+		<Button
+			android:id="@+id/button_scrobbling_more"
+			style="@style/Widget.Kotatsu.Button.More"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:layout_marginEnd="8dp"
+			android:text="@string/manage"
+			app:layout_constraintBaseline_toBaselineOf="@id/textView_scrobbling_title"
+			app:layout_constraintEnd_toEndOf="parent" />
+
 		<androidx.recyclerview.widget.RecyclerView
 			android:id="@+id/recyclerView_scrobbling"
 			android:layout_width="0dp"
@@ -185,28 +265,11 @@
 			app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
 			app:layout_constraintEnd_toEndOf="parent"
 			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/recyclerView_bookmarks"
+			app:layout_constraintTop_toBottomOf="@id/textView_scrobbling_title"
 			tools:itemCount="2"
 			tools:listitem="@layout/item_scrobbling_info"
 			tools:visibility="visible" />
 
-		<org.koitharu.kotatsu.core.ui.widgets.SelectableTextView
-			android:id="@+id/textView_description"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:layout_marginStart="@dimen/margin_normal"
-			android:layout_marginTop="@dimen/margin_small"
-			android:layout_marginEnd="@dimen/margin_normal"
-			android:lineSpacingMultiplier="1.2"
-			android:paddingBottom="@dimen/margin_normal"
-			android:textAppearance="?attr/textAppearanceBodyMedium"
-			android:textIsSelectable="true"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@id/recyclerView_scrobbling"
-			tools:ignore="UnusedAttribute"
-			tools:text="@tools:sample/lorem/random[250]" />
-
 		<com.google.android.material.progressindicator.LinearProgressIndicator
 			android:id="@+id/progressBar"
 			android:layout_width="0dp"
@@ -227,7 +290,15 @@
 			android:layout_width="wrap_content"
 			android:layout_height="wrap_content"
 			android:visibility="gone"
-			app:constraint_referenced_ids="recyclerView_bookmarks,textView_bookmarks"
+			app:constraint_referenced_ids="recyclerView_bookmarks,textView_bookmarks_title,button_bookmarks_more"
+			tools:visibility="visible" />
+
+		<androidx.constraintlayout.widget.Group
+			android:id="@+id/group_scrobbling"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:visibility="gone"
+			app:constraint_referenced_ids="recyclerView_scrobbling,textView_scrobbling_title,button_scrobbling_more"
 			tools:visibility="visible" />
 
 	</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/item_header_button.xml b/app/src/main/res/layout/item_header_button.xml
index 5b478fef9..a0fa2d7c9 100644
--- a/app/src/main/res/layout/item_header_button.xml
+++ b/app/src/main/res/layout/item_header_button.xml
@@ -19,7 +19,7 @@
 
 	<Button
 		android:id="@+id/button_more"
-		style="@style/Widget.Material3.Button.TextButton"
+		style="@style/Widget.Kotatsu.Button.More"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:text="@string/manage" />
diff --git a/app/src/main/res/layout/item_list_group.xml b/app/src/main/res/layout/item_list_group.xml
index 3a8becad9..cb34ff150 100644
--- a/app/src/main/res/layout/item_list_group.xml
+++ b/app/src/main/res/layout/item_list_group.xml
@@ -27,7 +27,7 @@
 
 	<Button
 		android:id="@+id/button_more"
-		style="@style/Widget.Material3.Button.TextButton"
+		style="@style/Widget.Kotatsu.Button.More"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:layout_alignBaseline="@id/textView_title"
diff --git a/app/src/main/res/layout/item_scrobbling_info.xml b/app/src/main/res/layout/item_scrobbling_info.xml
index 65a7148ff..2f6699c9f 100644
--- a/app/src/main/res/layout/item_scrobbling_info.xml
+++ b/app/src/main/res/layout/item_scrobbling_info.xml
@@ -3,65 +3,80 @@
 	xmlns:android="http://schemas.android.com/apk/res/android"
 	xmlns:app="http://schemas.android.com/apk/res-auto"
 	xmlns:tools="http://schemas.android.com/tools"
-	style="@style/Widget.Material3.CardView.Filled"
+	style="@style/Widget.Material3.CardView.Outlined"
 	android:layout_width="match_parent"
-	android:layout_height="wrap_content"
-	app:contentPadding="8dp">
+	android:layout_height="wrap_content">
 
-	<RelativeLayout
+	<androidx.constraintlayout.widget.ConstraintLayout
 		android:layout_width="match_parent"
-		android:layout_height="wrap_content"
-		android:paddingBottom="2dp">
+		android:layout_height="wrap_content">
 
 		<com.google.android.material.imageview.ShapeableImageView
-			android:id="@+id/imageView_cover"
-			android:layout_width="46dp"
-			android:layout_height="46dp"
-			android:layout_alignParentStart="true"
-			android:layout_alignParentTop="true"
-			android:contentDescription="@null"
-			app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Kotatsu.Cover.Small"
-			tools:src="@tools:sample/backgrounds/scenic[7]" />
+			android:id="@+id/imageView_icon"
+			android:layout_width="40dp"
+			android:layout_height="40dp"
+			android:layout_marginVertical="20dp"
+			android:layout_marginStart="16dp"
+			android:background="?colorPrimary"
+			android:scaleType="center"
+			app:layout_constraintBottom_toBottomOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toTopOf="parent"
+			app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Kotatsu.Circle"
+			app:tint="?colorOnPrimary"
+			tools:src="@drawable/ic_shikimori" />
 
 		<TextView
 			android:id="@+id/textView_title"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
-			android:layout_alignParentTop="true"
-			android:layout_alignParentEnd="true"
-			android:layout_marginStart="8dp"
+			android:layout_marginHorizontal="16dp"
 			android:layout_toEndOf="@id/imageView_cover"
-			android:drawablePadding="8dp"
-			android:gravity="center_vertical"
+			android:singleLine="true"
 			android:textAppearance="@style/TextAppearance.Material3.TitleSmall"
-			app:drawableTint="?colorControlNormal"
-			tools:drawableEndCompat="@drawable/ic_shikimori"
-			tools:text="@tools:sample/lorem" />
+			app:layout_constraintBottom_toTopOf="@id/textView_status"
+			app:layout_constraintEnd_toStartOf="@id/imageView_cover"
+			app:layout_constraintStart_toEndOf="@id/imageView_icon"
+			app:layout_constraintTop_toTopOf="parent"
+			app:layout_constraintVertical_chainStyle="packed"
+			tools:text="@string/shikimori" />
 
 		<RatingBar
 			android:id="@+id/ratingBar"
 			style="?ratingBarStyleSmall"
 			android:layout_width="wrap_content"
 			android:layout_height="wrap_content"
-			android:layout_below="@id/textView_title"
-			android:layout_marginStart="8dp"
-			android:layout_marginTop="4dp"
-			android:layout_toEndOf="@id/imageView_cover"
 			android:isIndicator="true"
 			android:max="1"
-			android:numStars="5" />
+			android:layout_marginStart="6dp"
+			android:numStars="5"
+			app:layout_constraintBottom_toBottomOf="@id/textView_status"
+			app:layout_constraintStart_toEndOf="@id/textView_status"
+			app:layout_constraintTop_toTopOf="@id/textView_status" />
 
 		<TextView
 			android:id="@+id/textView_status"
 			android:layout_width="wrap_content"
 			android:layout_height="wrap_content"
-			android:layout_alignBottom="@id/ratingBar"
-			android:layout_marginStart="4dp"
-			android:layout_marginBottom="-2dp"
-			android:layout_toEndOf="@id/ratingBar"
+			android:layout_marginStart="16dp"
+			android:layout_marginTop="4dp"
 			android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+			app:layout_constraintBottom_toBottomOf="parent"
+			app:layout_constraintStart_toEndOf="@id/imageView_icon"
+			app:layout_constraintTop_toBottomOf="@id/textView_title"
 			tools:text="Reading" />
 
-	</RelativeLayout>
+		<ImageView
+			android:id="@+id/imageView_cover"
+			android:layout_width="0dp"
+			android:layout_height="0dp"
+			android:scaleType="centerCrop"
+			app:layout_constraintBottom_toBottomOf="parent"
+			app:layout_constraintDimensionRatio="1:1"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintTop_toTopOf="parent"
+			tools:src="@tools:sample/backgrounds/scenic[7]" />
+
+	</androidx.constraintlayout.widget.ConstraintLayout>
 
 </com.google.android.material.card.MaterialCardView>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 90f39ddb6..4bb16d66e 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -449,4 +449,5 @@
 	<string name="pick_custom_directory">Pick custom directory</string>
 	<string name="no_access_to_file">You have no access to this file or directory</string>
 	<string name="local_manga_directories">Local manga directories</string>
+	<string name="description">Description</string>
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index fce1c7d72..4d2ce0958 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -103,6 +103,10 @@
 		<item name="chipMinTouchTargetSize">28dp</item>
 	</style>
 
+	<style name="Widget.Kotatsu.Button.More" parent="Widget.Material3.Button.TextButton">
+		<item name="android:minWidth">48dp</item>
+	</style>
+
 	<style name="Widget.Kotatsu.ToggleButton" parent="Widget.Material3.Button.OutlinedButton">
 		<item name="android:checkable">true</item>
 		<item name="android:textAlignment">textStart</item>