Implement Unread Filter for Library (#54)

src/components/library/LibraryOptions.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 FilterListIcon from '@mui/icons-material/FilterList';
+import { Drawer, FormControlLabel, IconButton } from '@mui/material';
+import useLibraryOptions from '../../util/useLibraryOptions';
+import ThreeStateCheckbox from '../ThreeStateCheckbox';
+
+function Options() {
+    const { unread, setUnread } = useLibraryOptions();
+    return (
+        <div>
+            <FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
+        </div>
+    );
+}
+
+export default function LibraryOptions() {
+    const [filtersOpen, setFiltersOpen] = React.useState(false);
+    const { active } = useLibraryOptions();
+    return (
+        <>
+            <IconButton
+                onClick={() => setFiltersOpen(!filtersOpen)}
+                color={active ? 'warning' : 'default'}
+            >
+                <FilterListIcon />
+            </IconButton>
+
+            <Drawer
+                anchor="bottom"
+                open={filtersOpen}
+                onClose={() => setFiltersOpen(false)}
+                PaperProps={{
+                    style: {
+                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
+                    },
+                }}
+            >
+                <Options />
+            </Drawer>
+
+        </>
+    );
+}