Extract list card avatar

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

@@ -7,12 +7,11 @@
  */
 
 import { Link } from 'react-router-dom';
-import Avatar from '@mui/material/Avatar';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
 import { MangaIdInfo, MangaThumbnailInfo } from '@/modules/manga/Manga.types.ts';
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
+import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
 
 export const ChapterCardThumbnail = ({
     mangaId,
@@ -24,27 +23,10 @@ export const ChapterCardThumbnail = ({
     mangaTitle: MangaType['title'];
 }) => (
     <Link to={AppRoutes.manga.path(mangaId)} style={{ textDecoration: 'none' }}>
-        <Avatar
+        <ListCardAvatar
-            variant="rounded"
+            iconUrl={Mangas.getThumbnailUrl({ thumbnailUrl, thumbnailUrlLastFetched })}
-            sx={{
+            alt={mangaTitle}
-                width: 56,
+            slots={{ spinnerImageProps: { imgStyle: { imageRendering: 'pixelated' } } }}
-                height: 56,
+        />
-                flex: '0 0 auto',
-                marginRight: 1,
-                background: 'transparent',
-            }}
-        >
-            <SpinnerImage
-                imgStyle={{
-                    objectFit: 'cover',
-                    width: '100%',
-                    height: '100%',
-                    imageRendering: 'pixelated',
-                }}
-                spinnerStyle={{ small: true }}
-                alt={mangaTitle}
-                src={Mangas.getThumbnailUrl({ thumbnailUrl, thumbnailUrlLastFetched })}
-            />
-        </Avatar>
     </Link>
 );

src/modules/core/components/SpinnerImage.tsx

@@ -21,7 +21,7 @@ import { Priority } from '@/lib/Queue.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { useIntersectionObserver } from '@/modules/core/hooks/useIntersectionObserver.tsx';
 
-interface IProps {
+export interface SpinnerImageProps {
     shouldLoad?: boolean;
 
     src: string;
@@ -44,7 +44,7 @@ interface IProps {
 }
 
 export const SpinnerImage = forwardRef(
-    (props: IProps, imgRef: ForwardedRef<HTMLImageElement | HTMLDivElement | null>) => {
+    (props: SpinnerImageProps, imgRef: ForwardedRef<HTMLImageElement | HTMLDivElement | null>) => {
         const {
             shouldLoad = true,
             shouldDecode,

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

@@ -0,0 +1,41 @@
+/*
+ * 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 Avatar, { AvatarProps } from '@mui/material/Avatar';
+import { SpinnerImage, SpinnerImageProps } from '@/modules/core/components/SpinnerImage.tsx';
+
+export const ListCardAvatar = ({
+    iconUrl,
+    alt,
+    slots,
+}: {
+    iconUrl: string;
+    alt: string;
+    slots?: { avatarProps?: Partial<AvatarProps>; spinnerImageProps?: Partial<SpinnerImageProps> };
+}) => (
+    <Avatar
+        variant="rounded"
+        alt={alt}
+        {...slots?.avatarProps}
+        sx={{
+            width: 56,
+            height: 56,
+            flex: '0 0 auto',
+            background: 'transparent',
+            ...slots?.avatarProps?.sx,
+        }}
+    >
+        <SpinnerImage
+            alt={alt}
+            src={iconUrl}
+            {...slots?.spinnerImageProps}
+            spinnerStyle={{ small: true, ...slots?.spinnerImageProps?.spinnerStyle }}
+            imgStyle={{ objectFit: 'cover', width: '100%', height: '100%', ...slots?.spinnerImageProps?.imgStyle }}
+        />
+    </Avatar>
+);

src/modules/extension/components/ExtensionCard.tsx

@@ -10,7 +10,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 Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
@@ -19,7 +18,6 @@ import Stack from '@mui/material/Stack';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import {
     ExtensionAction,
     ExtensionState,
@@ -36,6 +34,7 @@ import {
 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';
 
 interface IProps {
     extension: TExtension;
@@ -130,23 +129,7 @@ export function ExtensionCard(props: IProps) {
                     },
                 }}
             >
-                <Avatar
+                <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={name} />
-                    variant="rounded"
-                    sx={{
-                        width: 56,
-                        height: 56,
-                        flex: '0 0 auto',
-                        background: 'transparent',
-                    }}
-                    alt={name}
-                >
-                    <SpinnerImage
-                        spinnerStyle={{ small: true }}
-                        imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
-                        alt={name}
-                        src={requestManager.getValidImgUrlFor(iconUrl)}
-                    />
-                </Avatar>
                 <Stack
                     sx={{
                         justifyContent: 'center',

src/modules/history/components/ChapterHistoryCard.tsx

@@ -43,7 +43,7 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
                         padding: 1.5,
                     }}
                 >
-                    <Box sx={{ display: 'flex', flexGrow: 1 }}>
+                    <Box sx={{ display: 'flex', flexGrow: 1, gap: 1 }}>
                         <ChapterCardThumbnail
                             mangaId={manga.id}
                             mangaTitle={manga.title}

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

@@ -9,17 +9,16 @@
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardActionArea from '@mui/material/CardActionArea';
-import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import { Link as RouterLink } from 'react-router-dom';
 import { memo, useRef } from 'react';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 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';
 
 export const MangaListCard = memo(
     ({
@@ -71,30 +70,21 @@ export const MangaListCard = memo(
                             alignItems: 'center',
                             padding: 1.5,
                             position: 'relative',
+                            gap: 1,
                         }}
                     >
-                        <Avatar
+                        <ListCardAvatar
-                            variant="rounded"
+                            iconUrl={Mangas.getThumbnailUrl(manga)}
-                            sx={{
+                            alt={manga.title}
-                                width: 56,
+                            slots={{
-                                height: 56,
+                                spinnerImageProps: {
-                                flex: '0 0 auto',
+                                    imgStyle: {
-                                marginRight: 1,
+                                        imageRendering: 'pixelated',
+                                        filter: inLibraryIndicator && isInLibrary ? 'brightness(0.4)' : undefined,
+                                    },
+                                },
                             }}
-                        >
+                        />
-                            <SpinnerImage
-                                spinnerStyle={{ small: true }}
-                                imgStyle={{
-                                    objectFit: 'cover',
-                                    width: '100%',
-                                    height: '100%',
-                                    imageRendering: 'pixelated',
-                                    filter: inLibraryIndicator && isInLibrary ? 'brightness(0.4)' : undefined,
-                                }}
-                                alt={manga.title}
-                                src={Mangas.getThumbnailUrl(manga)}
-                            />
-                        </Avatar>
                         <Box
                             sx={{
                                 display: 'flex',

src/modules/migration/components/MigrationCard.tsx

@@ -11,15 +11,14 @@ import CardContent from '@mui/material/CardContent';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import Chip from '@mui/material/Chip';
-import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 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';
 
 export type TMigratableSource = NonNullable<GetMigratableSourcesQuery['mangas']['nodes'][number]['source']> & {
     mangaCount: number;
@@ -43,24 +42,8 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab
                         p: 1.5,
                     }}
                 >
-                    <Box sx={{ display: 'flex' }}>
+                    <Box sx={{ display: 'flex', gap: 1 }}>
-                        <Avatar
+                        <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
-                            variant="rounded"
-                            sx={{
-                                width: 56,
-                                height: 56,
-                                flex: '0 0 auto',
-                                mr: 1,
-                                background: 'transparent',
-                            }}
-                        >
-                            <SpinnerImage
-                                spinnerStyle={{ small: true }}
-                                imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
-                                alt={sourceName}
-                                src={requestManager.getValidImgUrlFor(iconUrl)}
-                            />
-                        </Avatar>
                         <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                             <Typography variant="h6" component="h3">
                                 {sourceName}

src/modules/reader/components/viewer/ReaderPage.tsx

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ComponentProps, memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
+import { SpinnerImage, SpinnerImageProps } from '@/modules/core/components/SpinnerImage.tsx';
 import {
     IReaderSettings,
     ReaderCustomFilter,
@@ -74,7 +74,7 @@ const BaseReaderPage = ({
     readerNavBarWidth,
     isLoaded,
     ...props
-}: Omit<ComponentProps<typeof SpinnerImage>, 'ref' | 'spinnerStyle' | 'imgStyle' | 'onLoad' | 'onError'> &
+}: Omit<SpinnerImageProps, 'spinnerStyle' | 'imgStyle' | 'onLoad' | 'onError'> &
     Pick<IReaderSettings, 'readingMode' | 'customFilter' | 'pageScaleMode' | 'shouldStretchPage' | 'readerWidth'> &
     Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
     Pick<NavbarContextType, 'readerNavBarWidth'> & {

src/modules/source/components/SourceCard.tsx

@@ -7,7 +7,6 @@
  */
 
 import CardActionArea from '@mui/material/CardActionArea';
-import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -18,13 +17,13 @@ import { Link } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { SourceContentType } from '@/modules/source/screens/SourceMangas.tsx';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
 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';
 
 interface IProps {
     source: GetSourcesListQuery['sources']['nodes'][number];
@@ -69,23 +68,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                         p: 1.5,
                     }}
                 >
-                    <Avatar
+                    <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
-                        variant="rounded"
-                        alt={sourceName}
-                        sx={{
-                            width: 56,
-                            height: 56,
-                            flex: '0 0 auto',
-                            background: 'transparent',
-                        }}
-                    >
-                        <SpinnerImage
-                            spinnerStyle={{ small: true }}
-                            imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
-                            alt={sourceName}
-                            src={requestManager.getValidImgUrlFor(iconUrl)}
-                        />
-                    </Avatar>
                     <Stack
                         sx={{
                             justifyContent: 'center',

src/modules/updates/components/ChapterUpdateCard.tsx

@@ -42,7 +42,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                         padding: 1.5,
                     }}
                 >
-                    <Box sx={{ display: 'flex', flexGrow: 1 }}>
+                    <Box sx={{ display: 'flex', flexGrow: 1, gap: 1 }}>
                         <ChapterCardThumbnail
                             mangaId={manga.id}
                             mangaTitle={manga.title}