Extract list card content

src/modules/core/components/cards/list/ListCardContent.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 CardContent, { CardContentProps } from '@mui/material/CardContent';
+
+export const ListCardContent = ({ children, ...props }: CardContentProps) => (
+    <CardContent
+        {...props}
+        sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            p: 1.5,
+            ...props.sx,
+        }}
+    >
+        {children}
+    </CardContent>
+);

src/modules/extension/components/ExtensionCard.tsx

@@ -8,7 +8,6 @@
 
 import { useEffect, useState } from 'react';
 import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
@@ -35,6 +34,7 @@ import { getInstalledState } from '@/modules/extension/Extensions.utils.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
 import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
+import { ListCardContent } from '@/modules/core/components/cards/list/ListCardContent.tsx';
 
 interface IProps {
     extension: TExtension;
@@ -118,17 +118,7 @@ export function ExtensionCard(props: IProps) {
 
     return (
         <Card>
-            <CardContent
+            <ListCardContent>
-                sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                    p: 1.5,
-                    '&:last-child': {
-                        paddingBottom: 1.5,
-                    },
-                }}
-            >
                 <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={name} />
                 <Stack
                     sx={{
@@ -168,7 +158,7 @@ export function ExtensionCard(props: IProps) {
                 >
                     {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
                 </Button>
-            </CardContent>
+            </ListCardContent>
         </Card>
     );
 }

src/modules/history/components/ChapterHistoryCard.tsx

@@ -9,7 +9,6 @@
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
 import { Link } from 'react-router-dom';
 import { memo } from 'react';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
@@ -21,6 +20,7 @@ import { ChapterCardThumbnail } from '@/modules/chapter/components/cards/Chapter
 import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
 import { ChapterDownloadButton } from '@/modules/chapter/components/buttons/ChapterDownloadButton.tsx';
 import { ChapterDownloadRetryButton } from '@/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx';
+import { ListCardContent } from '@/modules/core/components/cards/list/ListCardContent';
 
 export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryListFieldsFragment }) => {
     const { manga } = chapter;
@@ -35,14 +35,7 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
                     color: (theme) => theme.palette.text[chapter.isRead ? 'disabled' : 'primary'],
                 }}
             >
-                <CardContent
+                <ListCardContent sx={{ justifyContent: 'space-between' }}>
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        padding: 1.5,
-                    }}
-                >
                     <Box sx={{ display: 'flex', flexGrow: 1, gap: 1 }}>
                         <ChapterCardThumbnail
                             mangaId={manga.id}
@@ -58,7 +51,7 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
                     <DownloadStateIndicator chapterId={chapter.id} />
                     <ChapterDownloadRetryButton chapterId={chapter.id} />
                     <ChapterDownloadButton chapterId={chapter.id} isDownloaded={chapter.isDownloaded} />
-                </CardContent>
+                </ListCardContent>
             </CardActionArea>
         </Card>
     );

src/modules/manga/components/cards/MangaListCard.tsx

@@ -7,7 +7,6 @@
  */
 
 import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
 import CardActionArea from '@mui/material/CardActionArea';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
@@ -19,6 +18,7 @@ import { SpecificMangaCardProps } from '@/modules/manga/Manga.types.ts';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
 import { MangaOptionButton } from '@/modules/manga/components/MangaOptionButton.tsx';
 import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
+import { ListCardContent } from '@/modules/core/components/cards/list/ListCardContent';
 
 export const MangaListCard = memo(
     ({
@@ -63,14 +63,10 @@ export const MangaListCard = memo(
                         },
                     }}
                 >
-                    <CardContent
+                    <ListCardContent
                         sx={{
-                            display: 'flex',
                             justifyContent: 'space-between',
-                            alignItems: 'center',
-                            padding: 1.5,
                             position: 'relative',
-                            gap: 1,
                         }}
                     >
                         <ListCardAvatar
@@ -117,7 +113,7 @@ export const MangaListCard = memo(
                                 asCheckbox
                             />
                         </Stack>
-                    </CardContent>
+                    </ListCardContent>
                 </CardActionArea>
             </Card>
         );

src/modules/migration/components/MigrationCard.tsx

@@ -7,7 +7,6 @@
  */
 
 import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import Chip from '@mui/material/Chip';
@@ -19,6 +18,7 @@ import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
+import { ListCardContent } from '@/modules/core/components/cards/list/ListCardContent.tsx';
 
 export type TMigratableSource = NonNullable<GetMigratableSourcesQuery['mangas']['nodes'][number]['source']> & {
     mangaCount: number;
@@ -34,14 +34,7 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab
     return (
         <Card>
             <CardActionArea component={Link} to={AppRoutes.migrate.path(id)}>
-                <CardContent
+                <ListCardContent sx={{ justifyContent: 'space-between' }}>
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        p: 1.5,
-                    }}
-                >
                     <Box sx={{ display: 'flex', gap: 1 }}>
                         <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
                         <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
@@ -59,7 +52,7 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab
                         </Box>
                     </Box>
                     <Chip sx={{ borderRadius: 1 }} size="small" label={mangaCount} />
-                </CardContent>
+                </ListCardContent>
             </CardActionArea>
         </Card>
     );

src/modules/source/components/SourceCard.tsx

@@ -9,7 +9,6 @@
 import CardActionArea from '@mui/material/CardActionArea';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +23,7 @@ import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { MUIUtil } from '@/lib/mui/MUI.util.ts';
 import { Sources } from '@/modules/source/services/Sources.ts';
 import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
+import { ListCardContent } from '@/modules/core/components/cards/list/ListCardContent.tsx';
 
 interface IProps {
     source: GetSourcesListQuery['sources']['nodes'][number];
@@ -60,14 +60,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                 to={AppRoutes.sources.childRoutes.browse.path(id)}
                 state={{ contentType: SourceContentType.POPULAR, clearCache: true }}
             >
-                <CardContent
+                <ListCardContent>
-                    sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 1,
-                        p: 1.5,
-                    }}
-                >
                     <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
                     <Stack
                         sx={{
@@ -112,7 +105,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                             {t('global.button.popular')}
                         </Button>
                     )}
-                </CardContent>
+                </ListCardContent>
             </CardActionArea>
         </Card>
     );

src/modules/updates/components/ChapterUpdateCard.tsx

@@ -9,7 +9,6 @@
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
 import { Link } from 'react-router-dom';
 import { memo } from 'react';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
@@ -20,6 +19,7 @@ import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterC
 import { ChapterDownloadButton } from '@/modules/chapter/components/buttons/ChapterDownloadButton.tsx';
 import { ChapterDownloadRetryButton } from '@/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx';
 import { Chapters } from '@/modules/chapter/services/Chapters.ts';
+import { ListCardContent } from '@/modules/core/components/cards/list/ListCardContent.tsx';
 
 export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
     const { manga } = chapter;
@@ -34,14 +34,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                     color: (theme) => theme.palette.text[chapter.isRead ? 'disabled' : 'primary'],
                 }}
             >
-                <CardContent
+                <ListCardContent sx={{ justifyContent: 'space-between' }}>
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        padding: 1.5,
-                    }}
-                >
                     <Box sx={{ display: 'flex', flexGrow: 1, gap: 1 }}>
                         <ChapterCardThumbnail
                             mangaId={manga.id}
@@ -54,7 +47,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                     <DownloadStateIndicator chapterId={chapter.id} />
                     <ChapterDownloadRetryButton chapterId={chapter.id} />
                     <ChapterDownloadButton chapterId={chapter.id} isDownloaded={chapter.isDownloaded} />
-                </CardContent>
+                </ListCardContent>
             </CardActionArea>
         </Card>
     );