Extract "chapter metadata" into component

src/modules/chapter/components/cards/ChapterCard.tsx

@@ -15,7 +15,6 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
 import React, { memo, MouseEvent, TouchEvent, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +26,6 @@ import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateI
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterActionMenuItems } from '@/modules/chapter/components/actions/ChapterActionMenuItems.tsx';
 import { Menu } from '@/modules/core/components/menu/Menu.tsx';
-import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import {
     ChapterBookmarkInfo,
     ChapterDownloadInfo,
@@ -39,6 +37,7 @@ import {
     ChapterScanlatorInfo,
 } from '@/modules/chapter/services/Chapters.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
 
 type TChapter = ChapterIdInfo &
     ChapterMangaInfo &
@@ -138,60 +137,41 @@ export const ChapterCard = memo((props: IProps) => {
                                     '&:last-child': { pb: 1.5 },
                                 }}
                             >
-                                <Stack
+                                <ChapterCardMetadata
-                                    direction="column"
+                                    title={
-                                    sx={{
+                                        showChapterNumber
-                                        flex: 1,
+                                            ? `${t('chapter.title_one')} ${chapter.chapterNumber}`
-                                    }}
+                                            : chapter.name
-                                >
+                                    }
-                                    <Stack
+                                    secondaryText={chapter.scanlator}
-                                        sx={{
+                                    ternaryText={`${getDateString(Number(chapter.uploadDate ?? 0), true)}${isDownloaded ? ` • ${t('chapter.status.label.downloaded')}` : ''}`}
-                                            flexDirection: 'row',
+                                    infoIcons={
-                                            gap: 0.5,
+                                        chapter.isBookmarked && (
-                                            alignItems: 'center',
-                                        }}
-                                    >
-                                        {chapter.isBookmarked && (
                                             <BookmarkIcon
                                                 color={mode === 'reader' && isActiveChapter ? 'secondary' : 'primary'}
                                             />
-                                        )}
+                                        )
-                                        <TypographyMaxLines
+                                    }
-                                            variant="h6"
+                                    slotProps={{
-                                            component="h4"
+                                        title: {
-                                            sx={{
+                                            variant: 'h6',
-                                                ...applyStyles(mode === 'reader' && isActiveChapter, {
+                                            component: 'h3',
-                                                    color: theme.palette.primary.contrastText,
+                                            sx: applyStyles(mode === 'reader' && isActiveChapter, {
-                                                }),
-                                            }}
-                                        >
-                                            {showChapterNumber
-                                                ? `${t('chapter.title_one')} ${chapter.chapterNumber}`
-                                                : chapter.name}
-                                        </TypographyMaxLines>
-                                    </Stack>
-                                    <Typography
-                                        variant="caption"
-                                        sx={{
-                                            ...applyStyles(mode === 'reader' && isActiveChapter, {
                                                 color: theme.palette.primary.contrastText,
                                             }),
-                                        }}
+                                        },
-                                    >
+                                        secondaryText: {
-                                        {chapter.scanlator}
+                                            sx: applyStyles(mode === 'reader' && isActiveChapter, {
-                                    </Typography>
-                                    <Typography
-                                        variant="caption"
-                                        sx={{
-                                            ...applyStyles(mode === 'reader' && isActiveChapter, {
                                                 color: theme.palette.primary.contrastText,
                                             }),
-                                        }}
+                                        },
-                                    >
+                                        ternaryText: {
-                                        {getDateString(Number(chapter.uploadDate ?? 0), true)}
+                                            sx: applyStyles(mode === 'reader' && isActiveChapter, {
-                                        {isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
+                                                color: theme.palette.primary.contrastText,
-                                    </Typography>
+                                            }),
-                                </Stack>
+                                        },
+                                    }}
+                                />
 
                                 <DownloadStateIndicator
                                     chapterId={chapter.id}

src/modules/chapter/components/cards/ChapterCardMetadata.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Box from '@mui/material/Box';
+import { ComponentProps, ReactNode } from 'react';
+import Stack from '@mui/material/Stack';
+import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
+
+export const ChapterCardMetadata = ({
+    title,
+    secondaryText,
+    ternaryText,
+    infoIcons,
+    slotProps,
+}: {
+    title: string;
+    secondaryText?: string | null;
+    ternaryText?: string | null;
+    infoIcons?: ReactNode;
+    slotProps?: {
+        title?: ComponentProps<typeof TypographyMaxLines>;
+        secondaryText?: ComponentProps<typeof TypographyMaxLines>;
+        ternaryText?: ComponentProps<typeof TypographyMaxLines>;
+    };
+}) => (
+    <Box
+        sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            flexGrow: 1,
+            flexShrink: 1,
+            wordBreak: 'break-word',
+        }}
+    >
+        <Stack
+            sx={{
+                flexDirection: 'row',
+                gap: 0.5,
+                alignItems: 'center',
+            }}
+        >
+            {infoIcons}
+            <TypographyMaxLines variant="h6" component="h3" {...slotProps?.title}>
+                {title}
+            </TypographyMaxLines>
+        </Stack>
+        {secondaryText && (
+            <TypographyMaxLines variant="caption" display="block" lines={1} {...slotProps?.secondaryText}>
+                {secondaryText}
+            </TypographyMaxLines>
+        )}
+        {ternaryText && (
+            <TypographyMaxLines variant="caption" display="block" lines={1} {...slotProps?.ternaryText}>
+                {ternaryText}
+            </TypographyMaxLines>
+        )}
+    </Box>
+);

src/modules/history/components/ChapterHistoryCard.tsx

@@ -19,7 +19,6 @@ import { memo } from 'react';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { ChapterHistoryListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
-import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
@@ -27,6 +26,7 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { epochToDate, timeFormatter } from '@/util/DateHelper.ts';
 import { ChapterCardThumbnail } from '@/modules/chapter/components/cards/ChapterCardThumbnail.tsx';
+import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
 
 export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryListFieldsFragment }) => {
     const { manga } = chapter;
@@ -75,23 +75,10 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
                             thumbnailUrl={manga.thumbnailUrl}
                             thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
                         />
-                        <Box
+                        <ChapterCardMetadata
-                            sx={{
+                            title={manga.title}
-                                display: 'flex',
+                            secondaryText={`${chapter.name} — ${timeFormatter.format(epochToDate(Number(chapter.lastReadAt)).valueOf())}`}
-                                flexDirection: 'column',
+                        />
-                                justifyContent: 'center',
-                                flexGrow: 1,
-                                flexShrink: 1,
-                                wordBreak: 'break-word',
-                            }}
-                        >
-                            <TypographyMaxLines variant="h6" component="h3">
-                                {manga.title}
-                            </TypographyMaxLines>
-                            <TypographyMaxLines variant="caption" display="block" lines={1}>
-                                {`${chapter.name} — ${timeFormatter.format(epochToDate(Number(chapter.lastReadAt)).valueOf())}`}
-                            </TypographyMaxLines>
-                        </Box>
                     </Box>
                     <DownloadStateIndicator chapterId={chapter.id} />
                     {download?.state === DownloadState.Error && (

src/modules/updates/components/ChapterUpdateCard.tsx

@@ -19,13 +19,13 @@ import { memo } from 'react';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { ChapterUpdateListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
-import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { ChapterCardThumbnail } from '@/modules/chapter/components/cards/ChapterCardThumbnail.tsx';
+import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
 
 export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
     const { manga } = chapter;
@@ -75,23 +75,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                             thumbnailUrl={manga.thumbnailUrl}
                             thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
                         />
-                        <Box
+                        <ChapterCardMetadata title={manga.title} secondaryText={chapter.name} />
-                            sx={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                                flexGrow: 1,
-                                flexShrink: 1,
-                                wordBreak: 'break-word',
-                            }}
-                        >
-                            <TypographyMaxLines variant="h6" component="h3">
-                                {manga.title}
-                            </TypographyMaxLines>
-                            <TypographyMaxLines variant="caption" display="block" lines={1}>
-                                {chapter.name}
-                            </TypographyMaxLines>
-                        </Box>
                     </Box>
                     <DownloadStateIndicator chapterId={chapter.id} />
                     {download?.state === DownloadState.Error && (