From dc3003f2663dcca503766ca94186d8e40ac2b1ef Mon Sep 17 00:00:00 2001
From: Aaron Leopold <36278431+aaronleopold@users.noreply.github.com>
Date: Wed, 21 Aug 2024 12:21:41 -0700
Subject: [PATCH] :bug: Fix book titles in entity cards

The filename was being displayed instead of prioritizing the `title` from metadata (if present)
---
 apps/expo/src/components/book/BookListItem.tsx           | 2 +-
 packages/browser/src/components/book/BookCard.tsx        | 2 +-
 packages/browser/src/scenes/book/BookOverviewScene.tsx   | 4 ++--
 packages/browser/src/scenes/book/DownloadMediaButton.tsx | 6 ++++--
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/expo/src/components/book/BookListItem.tsx b/apps/expo/src/components/book/BookListItem.tsx
index 42b8300d2..f5502e113 100644
--- a/apps/expo/src/components/book/BookListItem.tsx
+++ b/apps/expo/src/components/book/BookListItem.tsx
@@ -24,7 +24,7 @@ export const BookListItem = React.memo(({ book, navigate }: BookListItemProps) =
 			style={{ height: 50, objectFit: 'scale-down', width: 50 / (3 / 2) }}
 		/>
 		<View className="flex-1">
-			<Text size="sm">{book.name}</Text>
+			<Text size="sm">{book.metadata?.title || book.name}</Text>
 		</View>
 	</TouchableOpacity>
 ))
diff --git a/packages/browser/src/components/book/BookCard.tsx b/packages/browser/src/components/book/BookCard.tsx
index 3e1a5e4ae..eed593295 100644
--- a/packages/browser/src/components/book/BookCard.tsx
+++ b/packages/browser/src/components/book/BookCard.tsx
@@ -143,7 +143,7 @@ export default function BookCard({
 	return (
 		<EntityCard
 			key={media.id}
-			title={media.name}
+			title={media.metadata?.title || media.name}
 			href={href}
 			fullWidth={fullWidth}
 			imageUrl={getMediaThumbnail(media.id)}
diff --git a/packages/browser/src/scenes/book/BookOverviewScene.tsx b/packages/browser/src/scenes/book/BookOverviewScene.tsx
index af7367931..3bac0fe18 100644
--- a/packages/browser/src/scenes/book/BookOverviewScene.tsx
+++ b/packages/browser/src/scenes/book/BookOverviewScene.tsx
@@ -65,7 +65,7 @@ export default function BookOverviewScene() {
 	const renderHeader = () => {
 		return (
 			<div className="flex flex-col items-center text-center md:items-start md:text-left">
-				<Heading size="sm">{media.name}</Heading>
+				<Heading size="sm">{media.metadata?.title || media.name}</Heading>
 
 				<BookLibrarySeriesLinks
 					libraryId={media.series?.library_id}
@@ -88,7 +88,7 @@ export default function BookOverviewScene() {
 		<SceneContainer>
 			<Suspense>
 				<Helmet>
-					<title>Stump | {media.name || ''}</title>
+					<title>Stump | {media.metadata?.title || media.name || ''}</title>
 				</Helmet>
 
 				<div className="flex h-full w-full flex-col gap-4">
diff --git a/packages/browser/src/scenes/book/DownloadMediaButton.tsx b/packages/browser/src/scenes/book/DownloadMediaButton.tsx
index 856733bd4..9f3804dcf 100644
--- a/packages/browser/src/scenes/book/DownloadMediaButton.tsx
+++ b/packages/browser/src/scenes/book/DownloadMediaButton.tsx
@@ -10,16 +10,18 @@ type Props = {
 export default function DownloadMediaButton({ media }: Props) {
 	const isAtLeastMedium = useMediaMatch('(min-width: 768px)')
 
+	const bookTitle = media.metadata?.title || media.name
+
 	const renderButton = () => {
 		if (isAtLeastMedium) {
 			return (
-				<IconButton size="sm" variant="ghost" title={`Download ${media.name}`}>
+				<IconButton size="sm" variant="ghost" title={`Download ${bookTitle}`}>
 					<DownloadCloud size="1.25rem" />
 				</IconButton>
 			)
 		} else {
 			return (
-				<Button className="w-full" variant="ghost" title={`Download ${media.name}`}>
+				<Button className="w-full" variant="ghost" title={`Download ${bookTitle}`}>
 					<DownloadCloud size="1.25rem" className="mr-2" /> Download Book
 				</Button>
 			)