add comfortable grid option (#152)

* move sorts to copy tachiyomi

is now in a tab along with filter ad display same as tachiyomi

* add comfortable grid

and all the stuff needed to make it easy to add more

* Revert "Merge remote-tracking branch 'upstream/master' into grid-types-(comfortable/list)"

This reverts commit 33eed92e8f7259ddce0e34ab59f721553bbb7e93, reversing
changes made to d699955345e253d2b2c2d837e76509a39b3bef00.

src/components/library/LibraryMangaGrid.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import MangaGrid, { IMangaGridProps } from 'components/MangaGrid';
 import useLibraryOptions from 'util/useLibraryOptions';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 
 const FILTERED_OUT_MESSAGE = 'There are no Manga matching this filter';
 
@@ -79,6 +80,7 @@ export default function LibraryMangaGrid(props: IMangaGridProps) {
         mangas, isLoading, hasNextPage, lastPageNum, setLastPageNum, message,
     } = props;
 
+    const { options } = useLibraryOptionsContext();
     const { active, query } = useLibraryOptions();
     const filteredManga = filterManga(mangas);
     const sortedManga = sortManga(filteredManga);
@@ -93,6 +95,7 @@ export default function LibraryMangaGrid(props: IMangaGridProps) {
             lastPageNum={lastPageNum}
             setLastPageNum={setLastPageNum}
             message={showFilteredOutMessage ? FILTERED_OUT_MESSAGE : message}
+            gridLayout={options.gridLayout}
         />
     );
 }

src/components/library/LibraryOptions.tsx

@@ -21,6 +21,7 @@ import {
     ListItemButton,
     ListItemIcon,
     ListItemText,
+    Radio,
 } from '@mui/material';
 import useLibraryOptions from 'util/useLibraryOptions';
 import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
@@ -111,9 +112,41 @@ function dispalyTab(currentTab: number) {
     ) {
         setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
     }
+
+    function setGridContextOptions(
+        e: React.ChangeEvent<HTMLInputElement>,
+        checked: boolean,
+    ) {
+        if (checked) {
+            setOptions((prev) => ({ ...prev, gridLayout: parseInt(e.target.name, 10) }));
+        }
+    }
+
     return (
         <TabPanel index={2} currentIndex={currentTab}>
             <Stack direction="column">
+                DISPLAY MODE
+                <FormControlLabel
+                    label="Compact grid"
+                    control={(
+                        <Radio
+                            name="0"
+                            checked={options.gridLayout === 0 || options.gridLayout === undefined}
+                            onChange={setGridContextOptions}
+                        />
+                    )}
+                />
+                <FormControlLabel
+                    label="Comfortable grid"
+                    control={(
+                        <Radio
+                            name="1"
+                            checked={options.gridLayout === 1}
+                            onChange={setGridContextOptions}
+                        />
+                    )}
+                />
+                BADGES
                 <FormControlLabel
                     label="Unread Badges"
                     control={(

src/components/library/LibraryOptionsProvider.tsx

@@ -15,7 +15,7 @@ interface IProps {
 
 export default function LibraryOptionsContextProvider({ children }: IProps) {
     const [options, setOptions] = useLocalStorage<LibraryDisplayOptions>('libraryOptions',
-        { showDownloadBadge: false, showUnreadBadge: false });
+        { showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0 });
 
     return (
         <LibraryOptionsContext.Provider value={{ options, setOptions }}>