Move tracker files into new folder

src/modules/tracker/components/cards/TrackerMangaCard.tsx

@@ -0,0 +1,181 @@
+/*
+ * 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 Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardMedia from '@mui/material/CardMedia';
+import Collapse from '@mui/material/Collapse';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { useLayoutEffect, useRef, useState } from 'react';
+import parseHtml from 'html-react-parser';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import sanitizeHtml from 'sanitize-html';
+import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
+import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
+import { Metadata } from '@/modules/core/components/Metadata.tsx';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
+import { TTrackerManga } from '@/modules/tracker/services/Trackers.ts';
+
+const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
+    <Stack
+        direction="row"
+        sx={{
+            gap: '5px',
+            justifyContent: 'space-between',
+        }}
+    >
+        <Tooltip title={title}>
+            <TypographyMaxLines variant="h5" component="h1">
+                {title}
+            </TypographyMaxLines>
+        </Tooltip>
+        <CheckCircleIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} color="primary" />
+    </Stack>
+);
+
+const SUMMARY_COLLAPSED_SIZE = 50;
+const TrackerMangaCardSummary = ({ summary }: { summary: string }) => {
+    const { t } = useTranslation();
+
+    const summaryRef = useRef<HTMLParagraphElement>(null);
+
+    const [isSummaryExpanded, setIsSummaryExpanded] = useState(false);
+    const [showSummaryExpandButton, setShowSummaryExpandButton] = useState(false);
+
+    const summaryCollapsedSize = showSummaryExpandButton ? SUMMARY_COLLAPSED_SIZE : 0;
+
+    useLayoutEffect(() => {
+        const shouldCollapseSummary = (summaryRef.current?.clientHeight ?? 0) > SUMMARY_COLLAPSED_SIZE;
+
+        setShowSummaryExpandButton(shouldCollapseSummary);
+        setIsSummaryExpanded(!shouldCollapseSummary);
+    }, []);
+    return (
+        <>
+            {summary.length && (
+                <Collapse collapsedSize={summaryCollapsedSize} in={isSummaryExpanded}>
+                    <Typography ref={summaryRef} variant="body1" component="p">
+                        {parseHtml(sanitizeHtml(summary, { disallowedTagsMode: 'escape' }))}
+                    </Typography>
+                </Collapse>
+            )}
+            {summary.length && showSummaryExpandButton && (
+                <Button
+                    component="div"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        setIsSummaryExpanded(!isSummaryExpanded);
+                    }}
+                    onTouchStart={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                >
+                    {t(isSummaryExpanded ? 'global.button.show_less' : 'global.button.show_more')}
+                </Button>
+            )}
+        </>
+    );
+};
+
+const TrackerMangaCardLink = ({ children, url }: { children: React.ReactNode; url: string }) => (
+    <Link
+        href={url}
+        rel="noreferrer"
+        target="_blank"
+        underline="none"
+        color="inherit"
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+    >
+        {children}
+    </Link>
+);
+
+export const TrackerMangaCard = ({
+    manga,
+    selected,
+    onSelect,
+}: {
+    manga: TTrackerManga;
+    selected: boolean;
+    onSelect: () => void;
+}) => {
+    const { t } = useTranslation();
+    const isMobileWidth = MediaQuery.useIsMobileWidth();
+
+    return (
+        <Card
+            sx={{
+                backgroundColor: 'background.default',
+                marginBottom: 2,
+                '&:last-child': { marginBottom: 8 },
+            }}
+        >
+            <CardActionArea onClick={onSelect}>
+                <CardContent sx={{ padding: '0', borderRadius: 'inherit' }}>
+                    <Box
+                        sx={{
+                            padding: 1,
+                            border: '3px solid',
+                            borderRadius: 'inherit',
+                            borderColor: selected ? 'primary.main' : 'transparent',
+                        }}
+                    >
+                        <Stack
+                            direction="row"
+                            sx={{
+                                gap: 2,
+                                marginBottom: 2,
+                            }}
+                        >
+                            <CardMedia
+                                sx={{
+                                    aspectRatio: '225/350',
+                                    minWidth: '100px',
+                                    width: '150px',
+                                    borderRadius: 1,
+                                    overflow: 'hidden',
+                                }}
+                            >
+                                <TrackerMangaCardLink url={manga.trackingUrl}>
+                                    <SpinnerImage
+                                        useFetchApi={false}
+                                        alt={manga.title}
+                                        src={manga.coverUrl}
+                                        spinnerStyle={{ width: '100%', height: '100%' }}
+                                        imgStyle={{
+                                            width: '100%',
+                                            height: isMobileWidth ? undefined : '100%',
+                                            maxHeight: '100%',
+                                            objectFit: 'cover',
+                                        }}
+                                    />
+                                </TrackerMangaCardLink>
+                            </CardMedia>
+                            <Stack direction="column" sx={{ width: '100%' }}>
+                                <TrackerMangaCardLink url={manga.trackingUrl}>
+                                    <TrackerMangaCardTitle title={manga.title} selected={selected} />
+                                </TrackerMangaCardLink>
+                                <Metadata title={t('global.label.type')} value={manga.publishingType} />
+                                <Metadata title={t('global.label.started')} value={manga.startDate} />
+                                <Metadata title={t('manga.label.status')} value={manga.publishingStatus} />
+                            </Stack>
+                        </Stack>
+                        <TrackerMangaCardSummary summary={manga.summary} />
+                    </Box>
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    );
+};