Options panels refactoring (#196)

* Refactor library options to match chapter options using shared component

* Disable some eslint rules

* Cleanup SourceOptions layout to use same components as other panels

src/components/molecules/OptionsPanel.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 {
+    Drawer,
+} from '@mui/material';
+import { Box } from '@mui/system';
+import React from 'react';
+
+interface IProps {
+    open: boolean
+    onClose: () => void
+    children: React.ReactNode
+    minHeight?: number
+}
+
+const OptionsPanel: React.FC<IProps> = ({
+    open, onClose, children, minHeight,
+}) => (
+    <Drawer
+        anchor="bottom"
+        open={open}
+        onClose={onClose}
+        PaperProps={{
+            style: {
+                maxWidth: 600,
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                minHeight,
+            },
+        }}
+    >
+        <Box>
+            {children}
+        </Box>
+    </Drawer>
+);
+
+OptionsPanel.defaultProps = {
+    minHeight: undefined,
+};
+
+export default OptionsPanel;

src/components/molecules/OptionsTabs.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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 { Stack, Tab, Tabs } from '@mui/material';
+import TabPanel from 'components/util/TabPanel';
+import React, { useState } from 'react';
+import OptionsPanel from './OptionsPanel';
+
+interface IProps<T = string>{
+    open: boolean
+    onClose: () => void
+    tabs: T[]
+    tabTitle: (key: T) => React.ReactNode
+    tabContent: (key: T) => React.ReactNode
+    minHeight?: number
+}
+
+const OptionsTabs = <T extends string = string>({
+    open, onClose, tabs, tabTitle, tabContent, minHeight,
+}: IProps<T>) => {
+    const [tabNum, setTabNum] = useState(0);
+
+    return (
+        <OptionsPanel
+            open={open}
+            onClose={onClose}
+            minHeight={minHeight}
+        >
+            <Tabs
+                value={tabNum}
+                variant="fullWidth"
+                onChange={(e, newTab) => setTabNum(newTab)}
+                indicatorColor="primary"
+                textColor="primary"
+            >
+                {tabs.map((tab, tabIndex) => (
+                    <Tab key={tab} value={tabIndex} label={tabTitle(tab)} />
+                ))}
+            </Tabs>
+            {tabs.map((tab, tabIndex) => (
+                <TabPanel key={tab} index={tabIndex} currentIndex={tabNum}>
+                    <Stack sx={{ px: 3, py: 1, minHeight }}>
+                        {tabContent(tab)}
+                    </Stack>
+                </TabPanel>
+            ))}
+        </OptionsPanel>
+    );
+};
+
+OptionsTabs.defaultProps = {
+    minHeight: undefined,
+};
+
+export default OptionsTabs;