feat(web): developer drawer

Move all debug functions into a single developer drawer,

Not the best implementation as there is focus fighting going on between some elements and the drawer but will do for now without state management

web/src/features/dev/index.tsx

@@ -0,0 +1,96 @@
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  IconButton,
+  Tooltip,
+  VStack,
+  Divider,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { debugAlert } from "./debug/alert";
+import { debugContext } from "./debug/context";
+import { debugInput } from "./debug/input";
+import { debugMenu } from "./debug/menu";
+import {
+  debugCustomNotification,
+  debugNotification,
+} from "./debug/notification";
+import { debugCircleProgressbar, debugProgressbar } from "./debug/progress";
+import { debugTextUI } from "./debug/textui";
+import { debugSettings } from "./debug/settings";
+
+const Dev: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Tooltip label="Developer drawer">
+        <IconButton
+          position="absolute"
+          bottom={0}
+          right={0}
+          mr={20}
+          mb={20}
+          borderRadius="50%"
+          icon={<FontAwesomeIcon icon="wrench" fixedWidth size="lg" />}
+          colorScheme="orange"
+          size="lg"
+          aria-label="Dev tools"
+          onClick={() => onOpen()}
+        />
+      </Tooltip>
+      <Drawer placement="left" onClose={onClose} isOpen={isOpen}>
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerHeader>Developer drawer</DrawerHeader>
+          <DrawerBody>
+            <VStack>
+              <Divider />
+              <Button isFullWidth onClick={() => debugInput()}>
+                Open input dialog
+              </Button>
+              <Button isFullWidth onClick={() => debugAlert()}>
+                Open alert dialog
+              </Button>
+              <Divider />
+              <Button isFullWidth onClick={() => debugContext()}>
+                Open context menu
+              </Button>
+              <Button isFullWidth onClick={() => debugMenu()}>
+                Open list menu
+              </Button>
+              <Divider />
+              <Button isFullWidth onClick={() => debugCustomNotification()}>
+                Send custom notification
+              </Button>
+              <Button isFullWidth onClick={() => debugNotification()}>
+                Send default notification
+              </Button>
+              <Divider />
+              <Button isFullWidth onClick={() => debugProgressbar()}>
+                Activate progress bar
+              </Button>
+              <Button isFullWidth onClick={() => debugCircleProgressbar()}>
+                Activate progress circle
+              </Button>
+              <Divider />
+              <Button isFullWidth onClick={() => debugSettings()}>
+                Open settings page
+              </Button>
+              <Button isFullWidth onClick={() => debugTextUI()}>
+                Show TextUI
+              </Button>
+            </VStack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default Dev;