List layout (#154)

* source layouts

* list layout

Co-authored-by: Aria Moradi <aria.moradi007@gmail.com>

src/components/MangaCard.tsx

@@ -10,7 +10,7 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import { Grid } from '@mui/material';
+import { Avatar, CardContent, Grid } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
 import { Box, styled } from '@mui/system';
@@ -84,6 +84,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);
 
+    if (gridLayout !== 2) {
         return (
             <Grid item xs={6} sm={4} md={3} lg={2}>
                 <Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
@@ -166,6 +167,70 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                 </Link>
             </Grid>
         );
+    }
+    return (
+        <Grid item xs={12} sm={12} md={12} lg={12}>
+            <Link to={`/manga/${id}/`} style={{ textDecoration: 'none', color: 'unset' }}>
+                <CardContent sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: 2,
+                    '&:hover': {
+                        backgroundColor: 'action.hover',
+                        transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                    },
+                    '&:active': {
+                        backgroundColor: 'action.selected',
+                        transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                    },
+                    position: 'relative',
+                }}
+                >
+                    <Avatar
+                        variant="rounded"
+                        sx={{
+                            width: 56,
+                            height: 56,
+                            flex: '0 0 auto',
+                            marginRight: 2,
+                            imageRendering: 'pixelated',
+                        }}
+                        src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
+                    />
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            flexGrow: 1,
+                            width: 'min-content',
+                        }}
+                    >
+                        <Typography variant="h5" component="h2">
+                            {truncateText(title, 61)}
+                        </Typography>
+                    </Box>
+                    <BadgeContainer sx={{ position: 'relative' }}>
+                        { showUnreadBadge && unread! > 0 && (
+                            <Typography
+                                sx={{ backgroundColor: 'primary.dark' }}
+                            >
+                                {unread}
+                            </Typography>
+                        )}
+                        { showDownloadBadge && downloadCount! > 0 && (
+                            <Typography sx={{
+                                backgroundColor: 'success.dark',
+                            }}
+                            >
+                                {downloadCount}
+                            </Typography>
+                        )}
+                    </BadgeContainer>
+                </CardContent>
+            </Link>
+        </Grid>
+    );
 });
 
 export default MangaCard;

src/components/library/LibraryOptions.tsx

@@ -146,6 +146,16 @@ function dispalyTab(currentTab: number) {
                         />
                     )}
                 />
+                <FormControlLabel
+                    label="list"
+                    control={(
+                        <Radio
+                            name="2"
+                            checked={options.gridLayout === 2}
+                            onChange={setGridContextOptions}
+                        />
+                    )}
+                />
                 BADGES
                 <FormControlLabel
                     label="Unread Badges"

src/components/source/GridLayouts.tsx

@@ -76,7 +76,18 @@ export default function SourceGridLayout() {
                             />
                         )}
                     />
-
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <FormControlLabel
+                        label="List"
+                        control={(
+                            <Radio
+                                name="2"
+                                checked={options.SourcegridLayout === 2}
+                                onChange={setGridContextOptions}
+                            />
+                        )}
+                    />
                 </MenuItem>
             </Menu>