Settings UI refactor (#2086)

* Full width settings page
* Group settings
* Make config fields optional
* auto save on change
* Add settings context
* Refactor stash library section
* Restructure settings
* Refactor tasks page
* Add collapse buttons for setting groups
* Add collapse buttons in library
* Add loading indicator
* Simplify task options. Add details to manual
* Add manual links to tasks page
* Add help tooltips
* Refactor about page
* Refactor log page
* Refactor tools panel
* Refactor plugin page
* Refactor task queue
* Improve disabled styling

ui/v2.5/src/components/MainNavbar.tsx

@@ -14,7 +14,7 @@ import Mousetrap from "mousetrap";
 import { SessionUtils } from "src/utils";
 import { Icon } from "src/components/Shared";
 import { ConfigurationContext } from "src/hooks/Config";
-import { Manual } from "./Help/Manual";
+import { ManualStateContext } from "./Help/Manual";
 import { SettingsButton } from "./SettingsButton";
 
 interface IMenuItem {
@@ -141,12 +141,12 @@ export const MainNavbar: React.FC = () => {
   const history = useHistory();
   const location = useLocation();
   const { configuration, loading } = React.useContext(ConfigurationContext);
+  const { openManual } = React.useContext(ManualStateContext);
 
   // Show all menu items by default, unless config says otherwise
   const [menuItems, setMenuItems] = useState<IMenuItem[]>(allMenuItems);
 
   const [expanded, setExpanded] = useState(false);
-  const [showManual, setShowManual] = useState(false);
 
   useEffect(() => {
     const iCfg = configuration?.interface;
@@ -203,7 +203,7 @@ export const MainNavbar: React.FC = () => {
 
   // set up hotkeys
   useEffect(() => {
-    Mousetrap.bind("?", () => setShowManual(!showManual));
+    Mousetrap.bind("?", () => openManual());
     Mousetrap.bind("g z", () => goto("/settings"));
 
     menuItems.forEach((item) =>
@@ -267,7 +267,7 @@ export const MainNavbar: React.FC = () => {
         </NavLink>
         <Button
           className="nav-utility minimal"
-          onClick={() => setShowManual(true)}
+          onClick={() => openManual()}
           title="Help"
         >
           <Icon icon="question-circle" />
@@ -279,7 +279,6 @@ export const MainNavbar: React.FC = () => {
 
   return (
     <>
-      <Manual show={showManual} onClose={() => setShowManual(false)} />
       <Navbar
         collapseOnSelect
         fixed="top"