Resolved Merged Conflicts (#127)

src/components/library/LibraryOptions.tsx

@@ -6,24 +6,101 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import SortIcon from '@mui/icons-material/Sort';
-import { Drawer, FormControlLabel, IconButton } from '@mui/material';
+import {
+    Drawer,
+    FormControlLabel,
+    IconButton,
+    Tabs,
+    Tab,
+    Box,
+    Stack,
+    Checkbox,
+    Radio,
+    Switch,
+} from '@mui/material';
 import useLibraryOptions from 'util/useLibraryOptions';
 import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
-import Switch from '@mui/material/Switch';
-import Radio from '@mui/material/Radio';
-import { Box } from '@mui/system';
+import TabPanel from 'components/util/TabPanel';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import SortIcon from '@mui/icons-material/Sort';
 
 function Options() {
     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 sx={{ display: 'flex', flexDirection: 'column' }}>
-            <FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
-            <FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={downloaded} onChange={setDownloaded} />} label="Downloaded" />
+        <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
+                        control={(
+                            <ThreeStateCheckbox
+                                name="Unread"
+                                checked={unread}
+                                onChange={setUnread}
+                            />
+                        )}
+                        label="Unread"
+                    />
+                    <FormControlLabel
+                        control={(
+                            <ThreeStateCheckbox
+                                name="Downloaded"
+                                checked={downloaded}
+                                onChange={setDownloaded}
+                            />
+                        )}
+                        label="Downloaded"
+                    />
+                </Stack>
+            </TabPanel>
+            <TabPanel index={1} currentIndex={currentTab}>
+                <Stack direction="column">
+                    <FormControlLabel
+                        label="Unread Badges"
+                        control={(
+                            <Checkbox
+                                name="showUnreadBadge"
+                                checked={options.showUnreadBadge}
+                                onChange={setContextOptions}
+                            />
+                        )}
+                    />
+                    <FormControlLabel
+                        label="Download Badges"
+                        control={(
+                            <Checkbox
+                                name="showDownloadBadge"
+                                checked={options.showDownloadBadge}
+                                onChange={setContextOptions}
+                            />
+                        )}
+                    />
+                </Stack>
+            </TabPanel>
         </Box>
     );
 }
@@ -33,20 +110,57 @@ function SortOptions() {
         sorts, setSorts, sortDesc, setSortDesc,
     } = useLibraryOptions();
 
-    const handleSortChange = (name: string) => (event: { target: { checked: boolean; }; }) => {
+    const handleSortChange = (name: string) => (event: { target: { checked: boolean } }) => {
         setSorts(event.target.checked ? name : undefined);
     };
 
-    const handleOrderChange = () => (event: { target: { checked: boolean; }; }) => {
+    const handleOrderChange = () => (event: { target: { checked: boolean } }) => {
         setSortDesc(event.target.checked);
     };
 
     return (
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <FormControlLabel control={<Switch name="sortDesc" checked={sortDesc === true} onChange={handleOrderChange()} color="default" />} label="Asc/Desc" />
-            <FormControlLabel control={<Radio name="sortToRead" checked={sorts === 'sortToRead'} onChange={handleSortChange('sortToRead')} />} label="Sort by left to read" />
-            <FormControlLabel control={<Radio name="sortAlph" checked={sorts === 'sortAlph'} onChange={handleSortChange('sortAlph')} />} label="Sort alphbetical" />
-            <FormControlLabel control={<Radio name="sortID" checked={sorts === 'sortID' || sorts === undefined} onChange={handleSortChange('sortID')} />} label="Sort by ID" />
+            <FormControlLabel
+                control={(
+                    <Switch
+                        name="sortDesc"
+                        checked={sortDesc === true}
+                        onChange={handleOrderChange()}
+                        color="default"
+                    />
+                )}
+                label="Asc/Desc"
+            />
+            <FormControlLabel
+                control={(
+                    <Radio
+                        name="sortToRead"
+                        checked={sorts === 'sortToRead'}
+                        onChange={handleSortChange('sortToRead')}
+                    />
+                )}
+                label="Sort by left to read"
+            />
+            <FormControlLabel
+                control={(
+                    <Radio
+                        name="sortAlph"
+                        checked={sorts === 'sortAlph'}
+                        onChange={handleSortChange('sortAlph')}
+                    />
+                )}
+                label="Sort alphbetical"
+            />
+            <FormControlLabel
+                control={(
+                    <Radio
+                        name="sortID"
+                        checked={sorts === 'sortID' || sorts === undefined}
+                        onChange={handleSortChange('sortID')}
+                    />
+                )}
+                label="Sort by ID"
+            />
         </Box>
     );
 }
@@ -70,7 +184,10 @@ export default function LibraryOptions() {
                 onClose={() => setFiltersOpen(false)}
                 PaperProps={{
                     style: {
-                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
+                        maxWidth: 600,
+                        padding: '1em',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
                     },
                 }}
             >
@@ -90,13 +207,15 @@ export default function LibraryOptions() {
                 onClose={() => setSortsOpen(false)}
                 PaperProps={{
                     style: {
-                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
+                        maxWidth: 600,
+                        padding: '1em',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
                     },
                 }}
             >
                 <SortOptions />
             </Drawer>
-
         </>
     );
 }

src/components/library/LibraryOptionsProvider.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 React from 'react';
+import LibraryOptionsContext from 'components/context/LibraryOptionsContext';
+import useLocalStorage from 'util/useLocalStorage';
+
+interface IProps {
+    children: React.ReactNode;
+}
+
+export default function LibraryOptionsContextProvider({ children }: IProps) {
+    const [options, setOptions] = useLocalStorage<LibraryDisplayOptions>('libraryOptions',
+        { showDownloadBadge: false, showUnreadBadge: false });
+
+    return (
+        <LibraryOptionsContext.Provider value={{ options, setOptions }}>
+            {children}
+        </LibraryOptionsContext.Provider>
+    );
+}