Extract list card content

2025-04-25 01:05:43 +02:00
parent c0ab5f93a1
commit 1b7338f5e3
7 changed files with 42 additions and 60 deletions
--- a/src/modules/core/components/cards/list/ListCardContent.tsx
+++ b/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>
+);
--- a/src/modules/extension/components/ExtensionCard.tsx
+++ b/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
-                sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                    p: 1.5,
-                    '&:last-child': {
-                        paddingBottom: 1.5,
-                    },
-                }}
-            >
+            <ListCardContent>
                <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>
    );
 }
--- a/src/modules/history/components/ChapterHistoryCard.tsx
+++ b/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
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        padding: 1.5,
-                    }}
-                >
+                <ListCardContent sx={{ justifyContent: 'space-between' }}>
                    <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>
    );
--- a/src/modules/manga/components/cards/MangaListCard.tsx
+++ b/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>
        );
--- a/src/modules/migration/components/MigrationCard.tsx
+++ b/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
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        p: 1.5,
-                    }}
-                >
+                <ListCardContent sx={{ justifyContent: 'space-between' }}>
                    <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>
    );
--- a/src/modules/source/components/SourceCard.tsx
+++ b/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
-                    sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 1,
-                        p: 1.5,
-                    }}
-                >
+                <ListCardContent>
                    <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>
    );
--- a/src/modules/updates/components/ChapterUpdateCard.tsx
+++ b/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
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        padding: 1.5,
-                    }}
-                >
+                <ListCardContent sx={{ justifyContent: 'space-between' }}>
                    <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>
    );