move sorts to copy tachiyomi (#151)

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

src/components/library/LibraryOptions.tsx

@@ -8,7 +8,6 @@
 
 import React, { useState } from 'react';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import SortIcon from '@mui/icons-material/Sort';
 import {
     Drawer,
     FormControlLabel,
@@ -30,33 +29,11 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import TabPanel from 'components/util/TabPanel';
 import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 
-function Options() {
+function filtersTab(currentTab: number) {
     const {
         downloaded, setDownloaded, unread, setUnread,
     } = useLibraryOptions();
-    const [currentTab, setCurrentTab] = useState<number>(0);
-    const { options, setOptions } = useLibraryOptionsContext();
-
-    function setContextOptions(
-        e: React.ChangeEvent<HTMLInputElement>,
-        checked: boolean,
-    ) {
-        setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
-    }
-
     return (
-        <Box>
-            <Tabs
-                key={currentTab}
-                value={currentTab}
-                variant="fullWidth"
-                onChange={(e, newTab) => setCurrentTab(newTab)}
-                indicatorColor="primary"
-                textColor="primary"
-            >
-                <Tab label="Filter" value={0} />
-                <Tab label="Display" value={1} />
-            </Tabs>
         <TabPanel index={0} currentIndex={currentTab}>
             <Stack direction="column">
                 <FormControlLabel
@@ -81,7 +58,61 @@ function Options() {
                 />
             </Stack>
         </TabPanel>
+    );
+}
+
+function sortsTab(currentTab: number) {
+    const {
+        sorts, setSorts, sortDesc, setSortDesc,
+    } = useLibraryOptions();
+
+    const handleChange = (event:
+    React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
+        if (sorts === index) {
+            setSortDesc(!sortDesc);
+        } else { setSortDesc(false); }
+        setSorts(index);
+    };
+
+    return (
+        <>
             <TabPanel index={1} currentIndex={currentTab}>
+                <Stack direction="column">
+                    {
+                        ['sortToRead', 'sortAlph', 'sortID'].map((e) => {
+                            let icon;
+                            if (sorts === e) {
+                                icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
+                                    : (<ArrowDownwardIcon color="primary" />);
+                            }
+                            icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
+                            return (
+                                <ListItem disablePadding>
+                                    <ListItemButton onClick={(event) => handleChange(event, e)}>
+                                        <ListItemIcon>{icon}</ListItemIcon>
+                                        <ListItemText primary={e} />
+                                    </ListItemButton>
+                                </ListItem>
+                            );
+                        })
+                    }
+                </Stack>
+            </TabPanel>
+        </>
+    );
+}
+
+function dispalyTab(currentTab: number) {
+    const { options, setOptions } = useLibraryOptionsContext();
+
+    function setContextOptions(
+        e: React.ChangeEvent<HTMLInputElement>,
+        checked: boolean,
+    ) {
+        setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
+    }
+    return (
+        <TabPanel index={2} currentIndex={currentTab}>
             <Stack direction="column">
                 <FormControlLabel
                     label="Unread Badges"
@@ -105,50 +136,35 @@ function Options() {
                 />
             </Stack>
         </TabPanel>
+    );
+}
+
+function Options() {
+    const [currentTab, setCurrentTab] = useState<number>(0);
+
+    return (
+        <Box>
+            <Tabs
+                key={currentTab}
+                value={currentTab}
+                variant="fullWidth"
+                onChange={(e, newTab) => setCurrentTab(newTab)}
+                indicatorColor="primary"
+                textColor="primary"
+            >
+                <Tab label="Filter" value={0} />
+                <Tab label="Sort" value={1} />
+                <Tab label="Display" value={2} />
+            </Tabs>
+            {filtersTab(currentTab)}
+            {sortsTab(currentTab)}
+            {dispalyTab(currentTab)}
         </Box>
     );
 }
 
-function SortOptions() {
-    const {
-        sorts, setSorts, sortDesc, setSortDesc,
-    } = useLibraryOptions();
-
-    const handleChange = (event:
-    React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
-        if (sorts === index) {
-            setSortDesc(!sortDesc);
-        } else { setSortDesc(false); }
-        setSorts(index);
-    };
-
-    return (
-        <>
-            {
-                ['sortToRead', 'sortAlph', 'sortID'].map((e) => {
-                    let icon;
-                    if (sorts === e) {
-                        icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
-                            : (<ArrowDownwardIcon color="primary" />);
-                    }
-                    icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
-                    return (
-                        <ListItem disablePadding>
-                            <ListItemButton onClick={(event) => handleChange(event, e)}>
-                                <ListItemIcon>{icon}</ListItemIcon>
-                                <ListItemText primary={e} />
-                            </ListItemButton>
-                        </ListItem>
-                    );
-                })
-            }
-        </>
-    );
-}
-
 export default function LibraryOptions() {
     const [filtersOpen, setFiltersOpen] = React.useState(false);
-    const [sortsOpen, setSortsOpen] = React.useState(false);
     const { active } = useLibraryOptions();
     return (
         <>
@@ -171,27 +187,6 @@ export default function LibraryOptions() {
             >
                 <Options />
             </Drawer>
-
-            <IconButton
-                onClick={() => setSortsOpen(!filtersOpen)}
-                color={active ? 'warning' : 'default'}
-            >
-                <SortIcon />
-            </IconButton>
-
-            <Drawer
-                anchor="bottom"
-                open={sortsOpen}
-                onClose={() => setSortsOpen(false)}
-                PaperProps={{
-                    style: {
-                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
-                    },
-                }}
-            >
-                <SortOptions />
-            </Drawer>
-
         </>
     );
 }